/* Motion and finish layer (pairs with assets/js/motion.js).
   Transform/opacity only. Everything here is skipped under prefers-reduced-motion (app.css kills
   animations and transitions there, and motion.js never adds the hooks). */

/* ---------- scroll reveal ---------- */
[data-rv]{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px);transition:opacity .8s var(--ease) var(--rv-d,0ms),transform .9s cubic-bezier(.16,.84,.3,1) var(--rv-d,0ms),filter .7s var(--ease) var(--rv-d,0ms);will-change:opacity,transform}
[data-rv].rv-in{opacity:1;transform:none;filter:none}
[data-rv].rv-now{transition-duration:0s,0s,0s;transition-delay:0s}
[data-rv].rv-in:not(.rv-now){transition-delay:var(--rv-d,0ms)}
[data-rv].rv-in{will-change:auto}
@media (prefers-reduced-motion:reduce){[data-rv]{opacity:1;transform:none;filter:none}}

/* ---------- page transitions ---------- */
#view{transition:opacity .16s ease,transform .16s ease}
#view.pg-out{opacity:0;transform:translate3d(0,-8px,0)}
#view.pg-in{animation:pgin .55s cubic-bezier(.16,.84,.3,1) both}
@keyframes pgin{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* ---------- scroll progress + top bar state ---------- */
.scroll-prog{position:fixed;left:0;top:0;z-index:60;width:100%;height:2px;background:var(--grad-gold);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;box-shadow:0 0 12px rgba(214,178,110,.6)}
.scrolled .top{background:linear-gradient(180deg,rgba(6,12,24,.97),rgba(9,18,31,.92));box-shadow:0 10px 30px rgba(2,6,15,.45)}
.scrolled .top::after{opacity:.7}
@media (min-width:1024px){.scroll-prog{left:var(--rail);width:calc(100% - var(--rail))}}

/* ---------- film grain ---------- */
.grain{position:fixed;inset:-12%;z-index:39;pointer-events:none;opacity:.055;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:220px 220px;animation:grain 1.1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(3%,3%)}}
body[data-page="map"] .grain{display:none}
@media (max-width:1023px){.grain{animation:none;opacity:.045}}

/* ---------- hero: aurora, light sweep, parallax plate, split headline ---------- */
.hero .ph img{transform:scale(1.08);transform-origin:50% 30%;will-change:transform;animation:hero-settle 1.6s cubic-bezier(.16,.84,.3,1) backwards}
@keyframes hero-settle{from{transform:scale(1.16);filter:saturate(.6) brightness(.7)}to{transform:scale(1.08);filter:saturate(1.02) brightness(1)}}
.aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mix-blend-mode:screen;opacity:.55}
.aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.aurora i:nth-child(1){left:-20vmax;top:-30vmax;background:radial-gradient(circle,rgba(214,178,110,.42),rgba(214,178,110,0) 62%);animation:drift1 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){right:-22vmax;top:-18vmax;background:radial-gradient(circle,rgba(106,168,255,.26),rgba(106,168,255,0) 60%);animation:drift2 32s ease-in-out infinite alternate}
.aurora i:nth-child(3){left:30%;bottom:-40vmax;background:radial-gradient(circle,rgba(243,220,166,.28),rgba(243,220,166,0) 60%);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(18vmax,10vmax,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-14vmax,12vmax,0) scale(.9)}}
@keyframes drift3{to{transform:translate3d(-16vmax,-10vmax,0) scale(1.1)}}
.hero-sweep{position:absolute;top:-20%;bottom:-20%;left:-30%;width:26%;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(247,230,184,0),rgba(247,230,184,.14) 50%,rgba(247,230,184,0));transform:skewX(-18deg);mix-blend-mode:screen;animation:sweep 2.6s cubic-bezier(.4,0,.2,1) .5s both}
@keyframes sweep{to{left:130%}}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(38px,5.4vw,78px);letter-spacing:-.02em;line-height:1.02}
.hero .kicker::before{transform:scaleX(0);transform-origin:0 50%;animation:kick .9s cubic-bezier(.16,.84,.3,1) .25s both}
@keyframes kick{to{transform:scaleX(1)}}
.hero .kicker,.hero .lede,.hero .fd-mission,.hero .fd-box,.hero .fd-ex,.hero .ctas,.hero .hm-quick{animation:rise .9s cubic-bezier(.16,.84,.3,1) both}
.hero .lede{animation-delay:.35s}.hero .fd-mission{animation-delay:.45s}.hero .fd-box,.hero .ctas{animation-delay:.55s}.hero .fd-ex,.hero .hm-quick{animation-delay:.68s}
@keyframes rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
/* words rise out of a mask; "Santa Monica" is gold */
h1 .sw,h2 .sw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
h1 .swi,h2 .swi{display:inline-block;transform:translate3d(0,110%,0);transition:transform 1s cubic-bezier(.16,.84,.3,1) calc(var(--i,0) * 55ms)}
.split-in .swi{transform:none}
h2 .swi{transition-duration:.8s}
.swi.gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 18px rgba(214,178,110,.28))}
@media (prefers-reduced-motion:reduce){h1 .swi,h2 .swi{transform:none}.hero .ph img{transform:scale(1.04)}.aurora i,.hero-sweep{animation:none}}

/* ---------- cards: cursor spotlight, lift, gold edge ---------- */
.card,.hm-tile,.hm-door,.hm-w,.hm-ev,.tg-card,.hm-step,.what > a,.what > button,.board,.list,.tp-lc,.tp-g,.tp-phase,.hm-film,.tp-film-frame{position:relative;isolation:isolate}
.card::before,.hm-tile::before,.hm-door::before,.hm-w::before,.hm-ev::before,.tg-card::before,.hm-step::before,.what > a::before,.what > button::before,.board::before,.list::before,.tp-lc::before,.tp-g::before,.tp-phase::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s var(--ease);background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(214,178,110,.14),rgba(214,178,110,.04) 40%,transparent 70%)}
@media (pointer:fine){
  .card:hover::before,.hm-tile:hover::before,.hm-door:hover::before,.hm-w:hover::before,.hm-ev:hover::before,.tg-card:hover::before,.hm-step:hover::before,.what > a:hover::before,.what > button:hover::before,.board:hover::before,.list:hover::before,.tp-lc:hover::before,.tp-g:hover::before,.tp-phase:hover::before{opacity:1}
  .hm-tile:hover,.hm-door:hover,.hm-w:hover,.hm-ev:hover,a.tg-card:hover,.tp-lc:hover,.tp-g:hover{transform:translate3d(0,-4px,0);box-shadow:var(--shadow),0 0 0 1px rgba(214,178,110,.22),0 0 34px rgba(214,178,110,.12)}
  .hm-tile,.hm-door,.hm-w,.hm-ev,.tg-card,.tp-lc,.tp-g{transition:transform .35s cubic-bezier(.16,.84,.3,1),box-shadow .35s var(--ease),border-color .25s,background .25s}
}
.hm-tile .hm-tb,.board .cell .num,.tp-n{font-variant-numeric:tabular-nums}

/* ---------- buttons: sheen sweep, magnetic settle, pulsing report button ---------- */
/* The floating Report button must stay position:fixed (app.css), so it is left out of the position:relative list. */
.btn-solid,.avatar.join,.fd-go{position:relative;transition:border-color .2s,background .25s,box-shadow .3s,transform .25s cubic-bezier(.16,.84,.3,1)}
.fab-float{transition:border-color .2s,background .25s,box-shadow .3s,transform .25s cubic-bezier(.16,.84,.3,1)}
@media (max-width:1023px){.fab-float{position:fixed}}
.btn-solid::before,.avatar.join::before,.fab-float::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 70%);background-size:220% 100%;background-position:120% 0;opacity:0;transition:opacity .2s}
.btn-solid:hover::before,.avatar.join:hover::before,.fab-float:hover::before{opacity:1;animation:sheen .9s cubic-bezier(.4,0,.2,1) both}
@keyframes sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.fab-float::after,.tabs .tab-report .fab::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:1.5px solid rgba(236,211,149,.7);pointer-events:none;animation:ring 2.6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.tabs .tab-report .fab{position:relative}
.btn:not(.btn-solid):hover{transform:translate3d(0,-1px,0)}
.btn{transition:border-color .2s,background .2s,box-shadow .25s,transform .2s cubic-bezier(.16,.84,.3,1),color .2s}
.chip{transition:border-color .2s,color .2s,background .2s,transform .2s cubic-bezier(.16,.84,.3,1)}
.chip:hover{transform:translate3d(0,-1px,0)}

/* ---------- nav: tab spring, rail glide ---------- */
.tabs a .ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1),color .2s}
.tabs a.on .ic{transform:translate3d(0,-2px,0) scale(1.12)}
.rail-nav > a{transition:background .25s,color .2s,transform .25s cubic-bezier(.16,.84,.3,1),border-color .25s}
.rail-nav > a:hover{transform:translate3d(3px,0,0)}
.rail-nav > a.on::before{animation:railin .4s cubic-bezier(.16,.84,.3,1) both}
@keyframes railin{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.seg a{transition:background .25s var(--ease),color .2s,border-color .2s,transform .2s}
.seg a:hover{transform:translate3d(0,-1px,0)}

/* ---------- loading: a running gold line instead of "Loading..." text ---------- */
.loading{position:relative;color:transparent;min-height:120px;padding:0}
.loading::before{content:"";position:absolute;left:0;top:48px;width:160px;height:2px;border-radius:2px;background:var(--grad-gold);box-shadow:0 0 14px rgba(214,178,110,.5);animation:ldr 1.1s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ldr{0%{transform:translate3d(0,0,0) scaleX(.2);opacity:0}30%{opacity:1}100%{transform:translate3d(320px,0,0) scaleX(1);opacity:0}}
.skel{background:linear-gradient(90deg,var(--panel) 0%,rgba(214,178,110,.08) 50%,var(--panel) 100%);background-size:200% 100%}

/* ---------- the film: cinematic frame and a real play button ---------- */
.hm-film,.tp-film-frame{position:relative;border-color:rgba(214,178,110,.28);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(214,178,110,.12),0 0 60px rgba(214,178,110,.08)}
.hm-film::before,.tp-film-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 18%,transparent 82%,rgba(0,0,0,.25));opacity:1;transition:opacity .4s}
.hm-film.playing::before,.tp-film-frame.playing::before{opacity:0}
.film-play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:grid;grid-template-columns:auto auto;align-items:center;gap:16px;padding:10px 22px 10px 10px;border:1px solid rgba(236,211,149,.55);border-radius:999px;background:rgba(6,12,24,.62);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);color:var(--fg);cursor:pointer;box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 40px rgba(214,178,110,.18);transition:transform .35s cubic-bezier(.16,.84,.3,1),box-shadow .35s,opacity .3s,border-color .3s}
.film-play:hover{transform:translate(-50%,-50%) scale(1.04);border-color:var(--acc);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 6px rgba(214,178,110,.12),0 0 60px rgba(214,178,110,.3)}
.film-play svg{width:64px;height:64px;padding:16px;border-radius:50%;background:var(--grad-gold);color:var(--acc-ink);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 24px rgba(214,178,110,.4);position:relative;z-index:1}
.film-play .ring{position:absolute;left:10px;top:10px;width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(236,211,149,.75);animation:ring 2.4s cubic-bezier(.2,.7,.2,1) infinite}
.film-play .fp-t{display:grid;gap:2px;text-align:left;font:600 16px/1.2 var(--body);letter-spacing:.01em;padding-right:4px}
.film-play .fp-t small{font:500 11px/1.2 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.playing .film-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9)}
@media (max-width:640px){.film-play{gap:10px;padding:8px 16px 8px 8px}.film-play svg,.film-play .ring{width:48px;height:48px}.film-play svg{padding:12px}.film-play .ring{left:8px;top:8px}.film-play .fp-t{font-size:14px}.film-play .fp-t small{font-size:10px}}

/* ---------- type and surfaces: a little more contrast and air ---------- */
.kicker,.eyebrow{text-shadow:0 0 18px rgba(214,178,110,.25)}
.hm-gh h2,.hm-plan-head h2,.sec-head h2{letter-spacing:-.015em}
.hm-tb{font-weight:300;background:linear-gradient(180deg,#fff,rgba(244,239,230,.78));-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-tile:hover .hm-tb{background:var(--grad-gold-hi);-webkit-background-clip:text;background-clip:text}
.hm-step.on{box-shadow:0 0 0 1px rgba(214,178,110,.3) inset,0 0 40px rgba(214,178,110,.14),0 20px 50px rgba(2,6,15,.5)}
.hm-step.on .hm-sn{box-shadow:0 0 0 4px rgba(214,178,110,.14),0 0 24px rgba(214,178,110,.4)}
.hm-sn{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.hm-step:hover .hm-sn{transform:scale(1.08) rotate(-6deg)}
.hm-di{transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.hm-door:hover .hm-di{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 24px rgba(214,178,110,.35)}
.hm-w .ic{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.hm-w:hover .ic{transform:translate3d(0,-2px,0) scale(1.12)}
.hero .fd-box{box-shadow:0 0 0 1px rgba(236,211,149,.06) inset,0 0 60px rgba(214,178,110,.16),0 30px 80px rgba(2,6,15,.6)}
.foot{background:linear-gradient(180deg,transparent,rgba(6,12,24,.9)),radial-gradient(60% 80% at 50% 120%,rgba(214,178,110,.08),transparent 70%)}

/* section kickers draw their line when they reveal */
[data-rv] .kicker::before,[data-rv].kicker::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.16,.84,.3,1) .15s}
[data-rv].rv-in .kicker::before,[data-rv].rv-in.kicker::before{transform:scaleX(1)}