:root {
  color-scheme: dark;
  --paper: #f2eadc;
  --paper-soft: #faf6ed;
  --ink: #211915;
  --night: #100d0b;
  --night-soft: #191310;
  --copper: #d4774c;
  --amber: #e3ae61;
  --ivory: #f6efe5;
  --blue: #16325c;
  --green: #19382f;
  --muted-light: rgba(246, 239, 229, .62);
  --line-light: rgba(255, 255, 255, .16);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --page-progress: 0;
  --beat-progress: 0;
  --world-progress: 0;
  --reveal-x: 100%;
  --mx: 0;
  --my: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ivory);
  background: var(--night);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
::selection { color: var(--night); background: var(--amber); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .7rem .9rem;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus-visible { transform: none; }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 0 clamp(1rem, 3vw, 3.5rem);
  color: var(--ivory);
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(8,6,5,.78), rgba(8,6,5,.12));
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}
.brand-mark { position: relative; display: block; width: 19px; height: 19px; border: 1px solid var(--amber); border-radius: 50%; }
.brand-mark i { position: absolute; width: 13px; height: 13px; right: -1px; top: -1px; border: 1px solid var(--copper); border-radius: 50%; background: var(--night); }
.header-state { display: flex; align-items: center; gap: .7rem; margin: 0; color: rgba(255,255,255,.6); font-size: .52rem; font-weight: 800; letter-spacing: .16em; }
.header-state i { width: 44px; height: 1px; background: rgba(255,255,255,.24); }
.header-state b { color: var(--ivory); font-weight: 800; }
.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 40px;
  padding: .55rem .85rem;
  color: var(--ivory);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease, transform .25s var(--ease);
}
.header-cta:hover { color: var(--night); background: var(--paper); transform: translateY(-2px); }
.header-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; }
.header-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--copper),var(--amber)); transform: scaleX(var(--page-progress)); transform-origin: left; }

.film { position: relative; height: 1320svh; background: var(--night); }
.stage {
  position: sticky;
  top: 0;
  isolation: isolate;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--night);
}
.stage::after {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  border: clamp(.7rem,1.1vw,1.1rem) solid rgba(12,9,7,.7);
  pointer-events: none;
}
.stage-visual { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: #110d0b; }
.stage-visual::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,7,6,.9) 0, rgba(9,7,6,.48) 30%, transparent 56%),
    linear-gradient(0deg, rgba(9,7,6,.82), transparent 38%);
  pointer-events: none;
  transition: background .8s ease;
}
.ambient { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); opacity: .44; transition: background 1s ease, transform 1.2s var(--ease); }
.ambient--one { width: 48vw; height: 48vw; right: -8vw; top: -16vw; background: rgba(209,103,57,.38); transform: translate(calc(var(--mx) * 2vw),calc(var(--my) * 2vw)); }
.ambient--two { width: 34vw; height: 34vw; left: 28vw; bottom: -18vw; background: rgba(232,171,91,.22); transform: translate(calc(var(--mx) * -1.5vw),calc(var(--my) * -1.5vw)); }
.stage-word {
  position: absolute;
  z-index: 1;
  left: 3vw;
  top: 14vh;
  color: rgba(255,255,255,.028);
  font-family: Iowan Old Style, Baskerville, Georgia, serif;
  font-size: clamp(8rem, 22vw, 25rem);
  font-weight: 500;
  letter-spacing: -.1em;
  line-height: .7;
  white-space: nowrap;
  transform: translateX(calc(var(--world-progress) * -8vw));
  transition: color .8s ease;
}

.plate-stack {
  position: absolute;
  z-index: 2;
  top: 9vh;
  right: 2.5vw;
  width: min(68vw, 1180px);
  height: 82vh;
  min-height: 500px;
  overflow: hidden;
  background: #211814;
  box-shadow: 0 45px 120px rgba(0,0,0,.52);
  clip-path: polygon(7% 0, 100% 0, 100% 91%, 85% 100%, 0 100%, 0 12%);
  transform: perspective(1600px) rotateY(calc(var(--mx) * -1.8deg)) rotateX(calc(var(--my) * 1.2deg)) scale(1.01);
  transform-origin: center;
  transition: opacity .7s ease, filter .7s ease;
}
.plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--plate-position, center); filter: saturate(.78) contrast(1.08) brightness(.76); will-change: transform, clip-path; }
.plate--current { transform: scale(calc(1.035 + var(--beat-progress) * .035)) translate(calc(var(--mx) * 6px),calc(var(--my) * 5px)); }
.plate--next { clip-path: inset(0 var(--reveal-x) 0 0); filter: saturate(.95) contrast(1.04) brightness(.8); transform: scale(calc(1.08 - var(--beat-progress) * .045)); }
.plate-vignette { position: absolute; z-index: 3; inset: 0; background: linear-gradient(90deg,rgba(8,6,5,.68),transparent 44%),linear-gradient(0deg,rgba(8,6,5,.68),transparent 42%); pointer-events: none; }

.stage-grain { position: absolute; z-index: 25; inset: -50%; opacity: .12; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); animation: grain .25s steps(2) infinite; mix-blend-mode: soft-light; }
.stage-scan { position: absolute; z-index: 24; inset: 0; opacity: .15; pointer-events: none; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 4px); }
@keyframes grain { 0%{transform:translate(1%,2%)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(2%,-1%)} 75%{transform:translate(-1%,-2%)} }

.hero-intro {
  position: absolute;
  z-index: 20;
  left: clamp(1.4rem,4.5vw,5.5rem);
  top: 50%;
  width: min(42rem,44vw);
  opacity: calc(1 - min(1,var(--page-progress) * 34));
  transform: translateY(calc(-50% - min(1,var(--page-progress) * 34) * 38px));
  pointer-events: none;
}
.eyebrow { margin: 0 0 1rem; color: var(--amber); font-size: .58rem; font-weight: 850; letter-spacing: .24em; text-transform: uppercase; }
.memory-line { margin: 0 0 .55rem; color: rgba(255,255,255,.7); font-family: Iowan Old Style, Baskerville, Georgia, serif; font-size: clamp(1rem,1.25vw,1.3rem); font-style: italic; }
h1,h2 { margin-top: 0; font-family: Iowan Old Style, Baskerville, Georgia, serif; font-weight: 500; letter-spacing: -.065em; line-height: .88; }
h1 { max-width: 10ch; margin-bottom: 1.3rem; font-size: clamp(4.6rem,8.2vw,10rem); text-shadow: 0 20px 50px rgba(0,0,0,.35); }
h1 em,h2 em { color: var(--copper); font-weight: 400; }
.hero-support { max-width: 34rem; margin: 0; color: rgba(255,255,255,.68); font-size: clamp(.9rem,1vw,1.05rem); }
.hero-support strong { color: var(--ivory); }

.beat-copy {
  position: absolute;
  z-index: 20;
  left: clamp(1.4rem,4.5vw,5.5rem);
  top: 18vh;
  width: min(38rem,41vw);
  opacity: 1;
  transform: translateY(calc((.5 - var(--beat-progress)) * 8px));
  transition: color .6s ease, opacity .45s ease;
}
html[data-beat="0"] .beat-copy { opacity: 0; pointer-events: none; }
html.capture-mode .hero-intro { opacity: 0; pointer-events: none; }
html.capture-mode .beat-copy { opacity: 1; }
.beat-kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; color: rgba(255,255,255,.58); font-size: .55rem; letter-spacing: .16em; }
.beat-kicker span { color: var(--amber); font-weight: 900; }
.beat-kicker i { width: 42px; height: 1px; background: currentColor; }
.beat-kicker b { font-weight: 800; }
.beat-copy h2 { max-width: 12ch; margin-bottom: 1.15rem; color: var(--ivory); font-size: clamp(3.3rem,6.4vw,7.7rem); text-shadow: 0 18px 55px rgba(0,0,0,.45); }
.beat-copy > p:last-child { max-width: 28rem; margin: 0; color: rgba(255,255,255,.7); font-size: clamp(.82rem,.95vw,1rem); }

.world-nav {
  position: absolute;
  z-index: 40;
  left: clamp(1.4rem,4.5vw,5.5rem);
  bottom: 4.2vh;
  display: grid;
  grid-template-columns: repeat(3,minmax(8.5rem,1fr));
  width: min(37rem,44vw);
  border-top: 1px solid rgba(255,255,255,.16);
}
.world-nav button {
  position: relative;
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .25rem .5rem;
  min-height: 76px;
  padding: .9rem .7rem .6rem 0;
  color: rgba(255,255,255,.42);
  border: 0;
  background: transparent;
  text-align: left;
  transition: color .3s ease;
}
.world-nav button::before { content:""; position:absolute; left:0; right:.7rem; top:-1px; height:2px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.world-nav button:hover,.world-nav button[aria-current="true"] { color: white; }
.world-nav button[aria-current="true"]::before { transform:scaleX(1); }
.world-nav span { color: var(--amber); font-size: .5rem; font-weight: 850; }
.world-nav i { align-self: center; height: 1px; background: currentColor; }
.world-nav strong { grid-column: 1/-1; font-family: Georgia,serif; font-size: .78rem; font-weight: 500; }
.world-nav small { grid-column: 1/-1; font-size: .45rem; letter-spacing: .08em; text-transform: uppercase; }

.beat-rail { position: absolute; z-index: 40; left: 50%; bottom: 2vh; width: min(38vw,520px); transform: translateX(-50%); }
.beat-rail__track { height: 1px; background: rgba(255,255,255,.18); }
.beat-rail__track::before { content:""; display:block; width:100%; height:2px; background:linear-gradient(90deg,var(--copper),var(--amber)); transform:scaleX(var(--page-progress)); transform-origin:left; }
.beat-rail__markers { display: grid; grid-template-columns: repeat(15,1fr); margin-top: -.7rem; }
.beat-rail__markers button { position: relative; min-width: 24px; height: 30px; padding: 0; border: 0; background: transparent; }
.beat-rail__markers button::before { content:""; position:absolute; left:50%; top:9px; width:4px; height:4px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:var(--night); transform:translateX(-50%); transition:background .25s ease,transform .25s ease; }
.beat-rail__markers button:hover::before,.beat-rail__markers button[aria-current="true"]::before { background:var(--amber); border-color:var(--amber); transform:translateX(-50%) scale(1.8); }

.next-tease {
  position: absolute;
  z-index: 20;
  right: clamp(1.4rem,3vw,3.5rem);
  bottom: 4.7vh;
  width: min(16rem,18vw);
  color: white;
}
.next-tease > span { display:block; margin-bottom:.35rem; color:rgba(255,255,255,.45); font-size:.45rem; font-weight:850; letter-spacing:.16em; }
.next-tease > strong { display:block; margin-bottom:.7rem; font-family:Georgia,serif; font-size:.82rem; font-weight:500; line-height:1.1; }
.next-tease > div { position:relative; height:68px; overflow:hidden; border:1px solid rgba(255,255,255,.22); }
.next-tease img { width:100%; height:100%; object-fit:cover; filter:brightness(.7) saturate(.75); transform:scale(1.08); transition:transform 1s var(--ease); }
.next-tease:hover img { transform:scale(1); }
.next-tease i { position:absolute; right:.6rem; bottom:.45rem; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.46); font-style:normal; }

.scroll-cue { position:absolute; z-index:25; right:clamp(1.4rem,3vw,3.5rem); top:18vh; display:flex; align-items:flex-start; gap:.8rem; color:rgba(255,255,255,.45); font-family:Georgia,serif; font-size:.61rem; font-style:italic; line-height:1.15; }
.scroll-cue i { width:1px; height:45px; background:linear-gradient(var(--amber),transparent); animation:cue 1.7s ease-in-out infinite; }
html:not([data-beat="0"]) .scroll-cue { opacity:0; transform:translateY(-8px); pointer-events:none; }
@keyframes cue { 50%{transform:scaleY(.45);transform-origin:top} }
.stage-instructions { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* MATÉRIA — multiple physical vocabularies */
.material { position:absolute; z-index:7; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .55s ease,transform .85s var(--ease); }
.material img { width:100%; height:100%; object-fit:cover; }
.material--gold { right:-2vw; top:-4vh; width:48vw; height:110vh; clip-path:polygon(38% 0,100% 0,100% 100%,0 100%,22% 64%); transform:translateX(12%) rotate(2deg); mix-blend-mode:screen; }
.material--red { right:20vw; top:18vh; width:30vw; height:58vh; border-radius:50%; filter:saturate(.9) contrast(1.1); transform:scale(.66) rotate(-15deg); mix-blend-mode:screen; }
.material--black { right:-5vw; bottom:-15vh; width:80vw; height:70vh; clip-path:ellipse(60% 60% at 55% 60%); transform:translateY(22%); mix-blend-mode:screen; }
.craft-window { position:absolute; z-index:12; right:6vw; top:19vh; width:22vw; min-width:240px; padding:1.1rem; opacity:0; color:var(--ivory); border:1px solid rgba(255,255,255,.35); background:rgba(16,12,10,.35); backdrop-filter:blur(10px); transform:translateY(26px) rotate(3deg); transition:opacity .5s ease,transform .7s var(--ease); }
.craft-window span { font-size:.47rem; font-weight:850; letter-spacing:.18em; }
.craft-window strong { display:block; margin-top:1.5rem; font-family:Georgia,serif; font-size:2rem; font-weight:500; letter-spacing:-.05em; line-height:.9; }
html[data-treatment="craft"] .craft-window { opacity:1; transform:translateY(0) rotate(1deg); }
html[data-treatment="material"] .material--gold,html[data-treatment="duet"] .material--black,html[data-treatment="resolve"] .material--gold { opacity:.68; transform:translateX(calc(6% - var(--beat-progress)*5%)) rotate(0); }
html[data-treatment="material"] .material--red { opacity:.62; transform:scale(calc(.76 + var(--beat-progress)*.2)) rotate(calc(-10deg + var(--beat-progress)*13deg)); }
html[data-world="matter"][data-treatment="duet"] .plate-stack { width:min(58vw,1000px); }
html[data-world="matter"][data-treatment="resolve"] .plate-stack { filter:saturate(1.08) contrast(1.03); }

/* PERCURSO — real Girollar frames, browser and phone */
.journey-canvas,.journey-fallback { position:absolute; z-index:5; inset:0; width:100%; height:100%; opacity:0; transition:opacity .65s ease; }
.journey-canvas { object-fit:cover; }
.journey-fallback { display:grid; place-content:center; color:white; text-align:center; background:radial-gradient(circle at 55% 35%,rgba(226,175,92,.36),transparent 24%),linear-gradient(145deg,#a75b35,#11284e 65%); }
.journey-fallback span { font-size:.55rem; letter-spacing:.25em; }
.journey-fallback strong { margin-top:.5rem; font-family:Georgia,serif; font-size:clamp(3rem,6vw,7rem); font-weight:500; font-style:italic; letter-spacing:-.06em; line-height:.8; }
html[data-world="journey"] .journey-fallback { opacity:1; }
html[data-world="journey"].journey-ready .journey-canvas { opacity:1; }
html[data-world="journey"].journey-ready .journey-fallback { opacity:0; }
html[data-world="journey"] .plate-stack { opacity:0; }
html[data-world="journey"] .stage-visual::before { background:linear-gradient(90deg,rgba(4,10,22,.85),rgba(4,10,22,.18) 54%,transparent),linear-gradient(0deg,rgba(3,8,18,.76),transparent 50%); }
html[data-world="journey"] .ambient--one { background:rgba(31,76,133,.42); }
html[data-world="journey"] .ambient--two { background:rgba(231,177,85,.3); }
html[data-world="journey"] .stage-word { color:rgba(255,255,255,.035); }
.device { position:absolute; z-index:14; opacity:0; overflow:hidden; box-shadow:0 40px 110px rgba(0,0,0,.48); transition:opacity .55s ease,transform .75s var(--ease); }
.device--browser { right:5vw; top:14vh; width:min(58vw,980px); height:67vh; min-height:430px; border:1px solid rgba(255,255,255,.3); border-radius:12px; background:#071225; transform:perspective(1300px) rotateY(-8deg) translateX(6%); }
.device-chrome { display:flex; align-items:center; gap:.35rem; height:32px; padding:0 .65rem; color:rgba(255,255,255,.45); background:#0b172b; font-size:.44rem; letter-spacing:.1em; }
.device-chrome i { width:5px; height:5px; border-radius:50%; background:#d37c55; }
.device-chrome i:nth-child(2){background:#deb35f}.device-chrome i:nth-child(3){background:#4d9470}.device-chrome span{margin-left:auto}
.device--browser img { width:100%; height:calc(100% - 32px); object-fit:cover; }
.device--phone { right:11vw; top:17vh; width:clamp(170px,15vw,240px); height:min(69vh,610px); padding:10px; border:1px solid rgba(255,255,255,.38); border-radius:28px; background:#080b10; transform:translate(28px,32px) rotate(6deg); }
.device--phone img { width:100%; height:100%; object-fit:cover; border-radius:20px; }
.device--phone > span { position:absolute; left:50%; bottom:1.1rem; width:max-content; padding:.45rem .6rem; color:white; background:rgba(4,8,15,.58); backdrop-filter:blur(7px); font-size:.42rem; letter-spacing:.12em; transform:translateX(-50%); }
.device-speaker { position:absolute; z-index:2; left:50%; top:6px; width:42px; height:4px; border-radius:4px; background:#292c31; transform:translateX(-50%); }
html[data-world="journey"][data-treatment="touch"] .device--browser { opacity:.86; transform:perspective(1300px) rotateY(-2deg); }
html[data-world="journey"][data-treatment="touch"] .device--phone { opacity:1; transform:translate(0) rotate(3deg); }
.journey-caption { position:absolute; z-index:20; right:clamp(1.4rem,4vw,5rem); top:18vh; width:min(21rem,24vw); opacity:0; text-align:right; text-shadow:0 12px 30px rgba(0,0,0,.6); transition:opacity .5s ease,transform .6s var(--ease); transform:translateY(18px); }
html[data-world="journey"] .journey-caption { opacity:1; transform:none; }
.journey-caption span { display:block; color:var(--amber); font-size:.5rem; font-weight:850; letter-spacing:.2em; }
.journey-caption strong { display:block; margin-top:.55rem; font-family:Georgia,serif; font-size:clamp(1.6rem,2.5vw,3rem); font-weight:500; font-style:italic; letter-spacing:-.05em; line-height:.92; }
.journey-caption b { display:block; margin-top:.8rem; color:rgba(255,255,255,.5); font-size:.46rem; letter-spacing:.12em; }

/* DECISÃO — people, signals, convergence, commercial release */
.portrait-collage { position:absolute; z-index:8; inset:10vh 4vw 9vh 39vw; opacity:0; perspective:1300px; transition:opacity .6s ease; }
.portrait-card { position:absolute; width:43%; height:54%; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.32); background:#1c1815; box-shadow:0 30px 80px rgba(0,0,0,.42); transition:transform .9s var(--ease),opacity .65s ease,filter .65s ease; }
.portrait-card img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.04) brightness(.88); }
.portrait-card figcaption { position:absolute; left:.8rem; bottom:.7rem; padding:.35rem .45rem; color:white; background:rgba(0,0,0,.44); backdrop-filter:blur(8px); font-size:.43rem; font-weight:850; letter-spacing:.16em; }
.portrait-card--one { left:2%; top:2%; transform:translate(-34px,-22px) rotate(-6deg); }
.portrait-card--two { right:2%; top:8%; transform:translate(38px,-12px) rotate(5deg); }
.portrait-card--three { left:17%; bottom:0; transform:translate(-18px,30px) rotate(3deg); }
.portrait-card--four { right:7%; bottom:4%; transform:translate(42px,24px) rotate(-4deg); }
html[data-world="decision"] .portrait-collage { opacity:1; }
html[data-world="decision"][data-treatment="portrait"] .portrait-card:not(.portrait-card--one) { opacity:.12; filter:blur(5px); }
html[data-world="decision"][data-treatment="portrait"] .portrait-card--one { box-shadow:0 38px 100px rgba(0,0,0,.58),0 0 0 1px rgba(143,193,171,.22); }
html[data-world="decision"][data-treatment="collage"] .portrait-card { transform:translate(0,0) rotate(0); }
html[data-world="decision"][data-treatment="align"] .portrait-card--one { transform:translate(48%,38%) scale(.78); }
html[data-world="decision"][data-treatment="align"] .portrait-card--two { transform:translate(-46%,32%) scale(.78); }
html[data-world="decision"][data-treatment="align"] .portrait-card--three { transform:translate(32%,-42%) scale(.78); }
html[data-world="decision"][data-treatment="align"] .portrait-card--four { transform:translate(-36%,-34%) scale(.78); }
html[data-world="decision"][data-treatment="resolve"] .portrait-card,html[data-world="decision"][data-treatment="cta"] .portrait-card { opacity:.16; filter:blur(6px) saturate(.4); transform:scale(.96); }
html[data-world="decision"] .plate-stack { opacity:.25; filter:saturate(.35); }
html[data-world="decision"] .stage-visual::before { background:linear-gradient(90deg,rgba(11,24,19,.9),rgba(11,24,19,.38) 47%,transparent 70%),linear-gradient(0deg,rgba(8,17,14,.78),transparent 45%); }
html[data-world="decision"] .ambient--one { background:rgba(53,118,90,.4); }
html[data-world="decision"] .ambient--two { background:rgba(200,113,69,.28); }
.alignment-field { position:absolute; z-index:16; left:69%; top:49%; width:38vw; height:38vw; max-width:560px; max-height:560px; opacity:0; transform:translate(-50%,-50%) scale(.72) rotate(14deg); transition:opacity .5s ease,transform 1s var(--ease); }
.alignment-field i { position:absolute; left:50%; top:50%; width:46%; height:1px; background:linear-gradient(90deg,rgba(228,174,97,.1),rgba(228,174,97,.85)); transform-origin:left; }
.alignment-field i:nth-child(1){transform:rotate(0deg)}.alignment-field i:nth-child(2){transform:rotate(60deg)}.alignment-field i:nth-child(3){transform:rotate(120deg)}.alignment-field i:nth-child(4){transform:rotate(180deg)}.alignment-field i:nth-child(5){transform:rotate(240deg)}.alignment-field i:nth-child(6){transform:rotate(300deg)}
.alignment-core { position:absolute; left:50%; top:50%; width:16%; aspect-ratio:1; border:1px solid var(--amber); border-radius:50%; background:rgba(226,174,97,.12); box-shadow:0 0 70px rgba(226,174,97,.42); transform:translate(-50%,-50%); }
html[data-world="decision"][data-treatment="align"] .alignment-field,html[data-world="decision"][data-treatment="resolve"] .alignment-field,html[data-world="decision"][data-treatment="cta"] .alignment-field { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(calc(14deg - var(--world-progress)*14deg)); }
.commercial-lockup { position:absolute; z-index:24; left:50%; top:49%; width:min(68rem,82vw); opacity:0; text-align:center; transform:translate(-50%,calc(-50% + 25px)); pointer-events:none; transition:opacity .5s ease,transform .7s var(--ease); }
html[data-world="decision"][data-treatment="cta"] .commercial-lockup { opacity:1; transform:translate(-50%,-50%); pointer-events:auto; }
html[data-world="decision"][data-treatment="cta"] .beat-copy,html[data-world="decision"][data-treatment="cta"] .next-tease,html[data-world="decision"][data-treatment="cta"] .journey-caption { opacity:0; }
.commercial-lockup > span { color:var(--amber); font-size:.52rem; font-weight:850; letter-spacing:.2em; }
.commercial-lockup > strong { display:block; margin-top:1rem; font-family:Georgia,serif; font-size:clamp(3.5rem,7.5vw,9rem); font-weight:500; letter-spacing:-.07em; line-height:.82; text-shadow:0 20px 70px rgba(0,0,0,.48); }
.commercial-lockup em { color:var(--copper); font-weight:400; }
.commercial-lockup button { display:inline-flex; align-items:center; gap:1.5rem; margin-top:1.7rem; padding:.95rem 1.15rem; color:var(--night); border:0; background:var(--paper); font-size:.58rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; transition:background .25s ease,transform .25s ease; }
.commercial-lockup button:hover { background:var(--amber); transform:translateY(-3px); }

/* World color shifts */
html[data-world="matter"] { --active-accent:var(--copper); }
html[data-world="journey"] { --active-accent:#e1b665; }
html[data-world="decision"] { --active-accent:#74a48f; }
html[data-world="journey"] .beat-copy h2 em { color:#e4bb70; }
html[data-world="decision"] .beat-copy h2 em { color:#8fc1ab; }

.resolution { position:relative; isolation:isolate; min-height:100svh; padding:clamp(7rem,12vw,13rem) clamp(1.2rem,7vw,8rem); overflow:hidden; color:var(--ink); background:var(--paper); }
.resolution::before { content:"ESCOLHA"; position:absolute; z-index:-1; right:-4vw; top:2vh; color:rgba(33,25,21,.035); font-family:Georgia,serif; font-size:24vw; letter-spacing:-.1em; }
.resolution-mark { position:absolute; right:9vw; top:16vh; width:24vw; max-width:380px; aspect-ratio:1; border:1px solid rgba(202,106,69,.32); border-radius:50%; }
.resolution-mark i { position:absolute; width:74%; aspect-ratio:1; right:-4%; top:-2%; border:1px solid rgba(216,154,73,.5); border-radius:50%; }
.resolution .eyebrow { color:#9b5d2e; }
.resolution h2 { max-width:12ch; margin-bottom:1.8rem; font-size:clamp(4rem,8.8vw,10rem); }
.resolution > p:not(.eyebrow) { max-width:42rem; color:#76685f; font-size:clamp(.95rem,1.15vw,1.18rem); }
.resolution-cta { display:inline-flex; align-items:center; gap:2rem; margin-top:2.2rem; min-height:58px; padding:.95rem 1.2rem; color:white; border:0; background:var(--ink); font-size:.62rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; box-shadow:0 20px 50px rgba(33,25,21,.18); transition:background .25s ease,transform .25s var(--ease); }
.resolution-cta:hover { background:var(--copper); transform:translateY(-3px); }

.site-footer { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; padding:2.4rem clamp(1.2rem,4vw,4.5rem); color:rgba(255,255,255,.48); border-top:1px solid rgba(255,255,255,.1); background:#0b0908; font-size:.55rem; letter-spacing:.04em; }
.site-footer p { margin:0; }
.site-footer details { max-width:30rem; }
.site-footer summary { cursor:pointer; color:rgba(255,255,255,.62); }
.site-footer ul { columns:2; padding-left:1rem; line-height:1.8; }

#brief-dialog { width:min(90vw,680px); padding:clamp(2.2rem,5vw,4.8rem); color:var(--ink); border:0; border-radius:3px; background:var(--paper-soft); box-shadow:0 45px 130px rgba(0,0,0,.52); }
#brief-dialog::backdrop { background:rgba(8,6,5,.76); backdrop-filter:blur(12px); }
#brief-dialog .eyebrow { color:#9b5d2e; }
#brief-dialog h2 { margin-bottom:1.3rem; font-size:clamp(2.8rem,5vw,5rem); }
#brief-dialog > p:not(.eyebrow) { color:#76685f; }
.dialog-close { position:absolute; top:1rem; right:1rem; width:2.6rem; height:2.6rem; color:var(--ink); border:1px solid rgba(33,25,21,.2); border-radius:50%; background:transparent; font-size:1.3rem; }
.dialog-confirm { margin-top:1.4rem; padding:.85rem 1.1rem; color:white; border:0; background:var(--ink); }

@media (min-width: 761px) {
  html[data-world="decision"][data-treatment="portrait"] .portrait-card--one { width:52%; height:68%; left:8%; top:0; transform:translate(-10px,-8px) rotate(-4deg); }
}

@media (max-width: 1050px) {
  .film { height:1240svh; }
  .plate-stack { right:-8vw; width:80vw; }
  .hero-intro,.beat-copy { width:48vw; }
  .beat-copy h2 { font-size:clamp(3.2rem,6.8vw,6rem); }
  .world-nav { width:49vw; }
  .next-tease { display:none; }
  .beat-rail { left:auto; right:2rem; width:38vw; transform:none; }
  .portrait-collage { left:36vw; right:2vw; }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns:1fr auto; min-height:62px; padding-inline:.9rem; }
  .header-state { display:none; }
  .header-cta { gap:.5rem; min-height:36px; padding:.5rem .65rem; font-size:.48rem; }
  .film { height:1160svh; }
  .stage { min-height:560px; }
  .stage::after { border-width:.45rem; }
  .stage-visual::before { background:linear-gradient(0deg,rgba(8,6,5,.92) 0,rgba(8,6,5,.4) 48%,transparent 75%); }
  .plate-stack { top:8vh; right:-18vw; width:118vw; height:69vh; min-height:390px; clip-path:polygon(5% 0,100% 0,100% 92%,84% 100%,0 100%,0 10%); }
  .plate { object-position:var(--plate-mobile-position,center); }
  .stage-word { top:12vh; left:-6vw; font-size:39vw; }
  .hero-intro { left:1rem; right:1rem; top:auto; bottom:20vh; width:auto; transform:translateY(calc(min(1,var(--page-progress)*34) * -28px)); }
  h1 { max-width:9ch; font-size:clamp(4rem,17vw,6.2rem); }
  .hero-support { max-width:28rem; font-size:.84rem; }
  .beat-copy { left:1rem; right:1rem; top:auto; bottom:20vh; width:auto; }
  .beat-copy h2 { max-width:11ch; margin-bottom:.8rem; font-size:clamp(3.4rem,13.5vw,5.5rem); }
  .beat-copy > p:last-child { max-width:24rem; font-size:.76rem; }
  .world-nav { left:1rem; right:1rem; bottom:5.7vh; width:auto; grid-template-columns:repeat(3,1fr); }
  .world-nav button { min-height:60px; padding:.6rem .4rem .35rem 0; }
  .world-nav i,.world-nav small { display:none; }
  .world-nav strong { font-size:.68rem; }
  .beat-rail { left:1rem; right:1rem; bottom:1.8vh; width:auto; }
  .beat-rail__markers button { min-width:14px; }
  .scroll-cue { right:1rem; top:11vh; }
  .journey-caption { left:1rem; right:1rem; top:12vh; width:auto; text-align:left; }
  .journey-caption strong { max-width:11ch; font-size:2.25rem; }
  .device--browser { right:-40vw; top:11vh; width:132vw; height:56vh; min-height:360px; }
  .device--phone { right:8vw; top:16vh; width:150px; height:52vh; }
  .portrait-collage { inset:8vh -7vw 23vh 20vw; }
  .portrait-card { width:52%; height:43%; }
  .alignment-field { left:62%; top:38%; width:80vw; height:80vw; }
  .commercial-lockup { top:44%; width:92vw; }
  .commercial-lockup > strong { font-size:clamp(3.7rem,14vw,6rem); }
  .material--gold { width:92vw; right:-22vw; }
  .material--red { width:62vw; right:4vw; }
  .material--black { width:120vw; right:-30vw; }
  .craft-window { right:1rem; top:17vh; width:44vw; min-width:0; }
  .craft-window strong { font-size:1.45rem; }
  .resolution { padding:7rem 1rem; }
  .resolution h2 { font-size:clamp(4rem,16vw,6.5rem); }
  .resolution-mark { right:-10vw; top:8vh; width:55vw; }
  .site-footer { flex-direction:column; }
  .site-footer ul { columns:1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .stage-grain { display:none; }
  .plate--next { display:none; }
  .plate-stack { transform:none; }
}