/*
Theme Name: Prizma
Theme URI: https://prizma.pt
Author: Prizma
Description: Tema a medida para a Prizma - design de espacos comerciais (lojas, restauracao, clinicas, escritorios). Experiencia cinematic de scroll com cursor customizado, mensagem de marca com aberracao cromatica e comparador antes/depois para projetos, geridos via wp-admin.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; background: oklch(0.1 0.01 260); }
body {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: oklch(0.96 0.005 90);
    cursor: none;
}
a { color: inherit; text-decoration: none; }
.display { font-family: 'Bebas Neue', system-ui, sans-serif; letter-spacing: 0.01em; }

/* ---- prism gradient text (used on the wordmark) ---- */
.grad {
    background: linear-gradient(100deg,
          oklch(0.78 0.15 300) 0%, oklch(0.78 0.15 220) 25%,
          oklch(0.78 0.15 60) 50%, oklch(0.78 0.15 300) 75%,
          oklch(0.78 0.15 220) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: gradSweep 6s linear infinite;
}
@keyframes gradSweep { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* ---- custom cursor ---- */
.cur {
    position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: oklch(0.96 0.005 90); mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: width .25s ease, height .25s ease, background .25s ease;
    display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    will-change: transform;
}
.cur.big { width: 84px; height: 84px; }

/* ---- nav ---- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px clamp(24px, 5vw, 64px);
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
    background: linear-gradient(oklch(0.1 0.01 260 / 85%), transparent);
}
.nav.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav .links { display: flex; gap: clamp(20px, 3vw, 40px); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---- pinned scroll scenes ---- */
.pin-wrap { position: relative; }
.pin-inner { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }

.prism-halo {
    position: absolute; inset: -25%; will-change: transform;
    background: conic-gradient(from 0deg at 50% 50%,
          oklch(0.7 0.16 300), oklch(0.7 0.16 255), oklch(0.7 0.16 210),
          oklch(0.7 0.16 150), oklch(0.7 0.16 95), oklch(0.7 0.16 45),
          oklch(0.7 0.16 10), oklch(0.7 0.16 300));
    filter: blur(140px) saturate(1.3);
    opacity: 0.32;
    mix-blend-mode: screen;
    animation: prismSpin 46s linear infinite;
}
@keyframes prismSpin { to { transform: rotate(360deg); } }

.scene-bg {
    position: absolute; inset: -10%; will-change: transform;
    background:
          radial-gradient(1000px 700px at 25% 30%, oklch(0.3 0.1 300 / 55%), transparent 60%),
          radial-gradient(1100px 800px at 80% 70%, oklch(0.28 0.12 40 / 45%), transparent 60%),
          radial-gradient(900px 900px at 50% 100%, oklch(0.24 0.08 220 / 40%), transparent 60%),
          oklch(0.1 0.01 260);
}
@keyframes hueDrift { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(35deg); } }
.scene-grid {
    position: absolute; inset: 0; opacity: .2; will-change: transform;
    background-image: repeating-linear-gradient(0deg, oklch(1 0 0 / 30%) 0px, oklch(1 0 0 / 30%) 1px, transparent 1px, transparent 64px),
                           repeating-linear-gradient(90deg, oklch(1 0 0 / 30%) 0px, oklch(1 0 0 / 30%) 1px, transparent 1px, transparent 64px);
    transform: perspective(600px) rotateX(58deg) scale(2.2);
    transform-origin: 50% 100%;
    animation: hueDrift 14s ease-in-out infinite;
}

.msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; text-align: center; will-change: opacity, transform; pointer-events: none; }
.msg .word { font-family: 'Bebas Neue', sans-serif; font-size: clamp(64px, 11vw, 160px); line-height: 1; }

/* brand reveal: chromatic aberration converging into focus */
.ca-stack { position: relative; }
.ca { position: absolute; inset: 0; mix-blend-mode: screen; will-change: transform; }
.ca.rr { color: oklch(0.62 0.22 25); }
.ca.gg { color: oklch(0.75 0.22 145); }
.ca.bb { color: oklch(0.65 0.2 260); }
.ca.base { position: relative; color: oklch(0.97 0.005 90); }

.tagline { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; opacity: 0; font-size: 14px; letter-spacing: 0.3em; text-transform: uppercase; color: oklch(0.8 0.01 90); }
.scrolltip { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); opacity: 0; }

/* ---- statement ---- */
.statement { padding: clamp(80px,14vw,180px) clamp(24px,6vw,80px); text-align: center; background: oklch(0.1 0.01 260); border-top: 1px solid oklch(1 0 0 / 8%); }
.statement p { font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 5vw, 56px); line-height: 1.25; max-width: 1100px; margin: 0 auto; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---- projects cinematic pin ---- */
.proj-inner { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.panel { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; display: flex; align-items: flex-end; }
.panel .scrim { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.05 0.01 260 / 78%), transparent 60%); pointer-events: none; }
.panel .info { position: relative; padding: clamp(24px,5vw,64px); }
.panel .cat { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: oklch(0.85 0.02 90); }
.panel .name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px,6vw,84px); margin-top: 6px; }

.ba { position: absolute; inset: 0; }
.ba-after, .ba-before { position: absolute; inset: 0; }
.ba-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: oklch(0.96 0.005 90); }
.ba-handle::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border-radius: 50%;
    background: conic-gradient(from 0deg, oklch(0.75 0.15 300), oklch(0.75 0.15 200), oklch(0.75 0.15 90), oklch(0.75 0.15 20), oklch(0.75 0.15 300));
    box-shadow: 0 0 0 2px oklch(0.96 0.005 90 / 80%), 0 4px 14px oklch(0.05 0.01 260 / 50%);
    transform: translate(-50%,-50%);
    animation: prismSpin 8s linear infinite;
}
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; appearance: none; -webkit-appearance: none; }
.ba-tag { position: absolute; bottom: 24px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: oklch(0.9 0.01 90); }

/* ---- footer ---- */
.foot { padding: clamp(60px,10vw,100px) clamp(24px,6vw,64px) 40px; border-top: 1px solid oklch(1 0 0 / 10%); background: oklch(0.1 0.01 260); }
.foot h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px,6vw,72px); margin: 0; }

@media (pointer: coarse) {
  .cur { display: none; }
  body { cursor: auto; }
}