/* Cinematic layer. Loads after styles.css. Compositor-only motion (transform/opacity) on touch devices;
   pointer-driven effects (glow, tilt, magnetic) are desktop-only and added by js/cinema.js. */
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* ---------- Hero: CSS-only entrance (no JS, no LCP penalty) + Ken Burns ---------- */
@keyframes cine-rise{from{opacity:0;transform:translate3d(0,26px,0)}}
@keyframes cine-kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.6%,-1.2%,0)}}
.hero-kicker,.hero h1,.hero-copy,.hero-actions,.hero-bottom{animation:cine-rise .95s var(--ease) backwards}
.hero h1{animation-delay:.1s}.hero-copy{animation-delay:.24s}.hero-actions{animation-delay:.38s}.hero-bottom{animation-delay:.55s}
.hero-poster,.hero-video{transform-origin:62% 48%;animation:cine-kb 22s ease-in-out infinite alternate}
.hero-media{transform-origin:50% 100%;transform:translate3d(0,0,0) scale(1.14)}
@media(max-width:900px){.hero-media{animation:none}}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;inset:0 0 auto;height:3px;z-index:150;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--teal),var(--gold))}

/* ---------- Word-split headings ---------- */
.w{display:inline-block;transform-origin:50% 100%}

/* ---------- Depth, glass and contrast ---------- */
.site-header.scrolled{background:rgba(11,16,38,.74);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 12px 40px -12px rgba(2,5,20,.6)}
.cap-card,.system-card,.founder-grid article,.process-track article,.estimate-panel{box-shadow:inset 0 1px 0 rgba(246,241,231,.07),0 26px 60px -34px rgba(0,0,0,.7)}
.system-card{background:linear-gradient(160deg,rgba(246,241,231,.05),transparent 42%),#101831}
.founder-grid article,.process-track article{background:linear-gradient(160deg,rgba(246,241,231,.05),transparent 45%),var(--midnight)}
.platform-card,.engage-grid article,.tool-panel,.brief-panel{box-shadow:0 1px 2px rgba(11,16,38,.06),0 14px 28px -14px rgba(11,16,38,.14),0 44px 80px -44px rgba(11,16,38,.22)}
.device{box-shadow:0 2px 4px rgba(11,16,38,.12),0 24px 60px -18px rgba(11,16,38,.38)}
.stats-grid strong{font-variant-numeric:tabular-nums}
.button-gold{box-shadow:0 10px 30px -12px rgba(232,163,61,.55)}
.marquee:hover div{animation-play-state:paused}
.scroll-cue b{will-change:transform}

/* ---------- Touch feedback (cheap, compositor-only) ---------- */
@media(hover:none){
  .button,.filter,.scanner-option,.nav-cta,.mobile-cta a{transition:transform .18s var(--ease),background .25s,color .25s}
  .button:active,.filter:active,.scanner-option:active,.mobile-cta a:active{transform:scale(.97)}
}

/* ---------- Desktop pointer effects ---------- */
@media(hover:hover) and (pointer:fine){
  .fx{position:relative;transition:transform .45s var(--ease),box-shadow .35s,background .25s}
  .fx-glow{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(246,241,231,.11),rgba(46,196,182,.05) 40%,transparent 62%)}
  .light .fx-glow{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(232,163,61,.2),rgba(46,196,182,.07) 42%,transparent 65%)}
  .fx:hover .fx-glow{opacity:1}
  .fx:not(.tilt-card):not(.tool-panel):not(.brief-panel):not(.estimate-panel):hover{transform:translate3d(0,-6px,0)}
  .platform-card:hover{box-shadow:0 2px 4px rgba(11,16,38,.08),0 30px 60px -20px rgba(11,16,38,.28),0 60px 100px -50px rgba(8,127,118,.35)}
  .system-card:hover,.cap-card:hover,.founder-grid article:hover{box-shadow:inset 0 1px 0 rgba(246,241,231,.12),0 34px 70px -30px rgba(46,196,182,.28)}
  .device img,.story-visual img{transition:transform 1.2s var(--ease)}
  .platform-card:hover .device img{transform:scale(1.045)}
  #cursor{transition:transform .08s linear,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),opacity .3s}
  #cursor.hot{width:46px;height:46px;margin:-18px 0 0 -18px;opacity:.55}
  .button,.nav-cta{transition-property:background,color,box-shadow,border-color}
  .button:hover{transform:none;box-shadow:0 18px 34px -14px rgba(0,0,0,.4)}
  .hero-actions .button-outline{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}
@media(min-width:901px) and (hover:hover){
  @supports (background-clip:text){
    .hero h1 em{background:linear-gradient(100deg,var(--gold) 20%,#ffe3ab 45%,var(--gold) 62%) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:cine-shimmer 7s linear infinite}
  }
  /* Ambient light behind dark sections */
  .capabilities,.systems,.faq,.founders{position:relative}
  .capabilities:before,.systems:before,.faq:before,.founders:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;background:radial-gradient(60% 50% at 12% 20%,rgba(46,196,182,.09),transparent 70%),radial-gradient(50% 45% at 90% 85%,rgba(232,163,61,.07),transparent 70%);animation:cine-breathe 9s ease-in-out infinite alternate}
  .capabilities>.wrap,.systems>.wrap,.faq>.wrap,.founders>.wrap{position:relative;z-index:1}
}
@keyframes cine-shimmer{to{background-position:-220% 0}}
@keyframes cine-breathe{to{opacity:.35}}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .hero-poster,.hero-video,.hero-media,.hero h1 em,.capabilities:before,.systems:before,.faq:before,.founders:before{animation:none!important}
  .scroll-progress,.fx-glow{display:none!important}
  .hero-media{transform:none}
}

/* ---------- Mobile menu: animated, always reachable, fits any iPhone viewport ---------- */
@media(max-width:900px){
  html:has(body.menu-open){overflow:hidden}
  .mobile-menu{display:flex;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:calc(88px + env(safe-area-inset-top)) var(--gutter) calc(32px + env(safe-area-inset-bottom));
    visibility:hidden;opacity:0;transform:translate3d(0,-14px,0);
    transition:opacity .35s ease,transform .55s var(--ease),visibility 0s linear .55s}
  .mobile-menu.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .mobile-menu a{font-size:clamp(1.7rem,4.6svh,2.6rem);padding:clamp(8px,1.6svh,14px) 0;
    opacity:0;transform:translate3d(0,22px,0);transition:opacity .4s ease,transform .6s var(--ease),color .2s}
  .mobile-menu.open a{opacity:1;transform:none}
  .mobile-menu.open a:nth-child(1){transition-delay:.06s}.mobile-menu.open a:nth-child(2){transition-delay:.1s}
  .mobile-menu.open a:nth-child(3){transition-delay:.14s}.mobile-menu.open a:nth-child(4){transition-delay:.18s}
  .mobile-menu.open a:nth-child(5){transition-delay:.22s}.mobile-menu.open a:nth-child(6){transition-delay:.26s}
  .mobile-menu.open a:nth-child(7){transition-delay:.3s;color:var(--gold)}
  .mobile-menu a:active{color:var(--gold)}
  /* Close button must never scroll away while the menu is open */
  body.menu-open .site-header{transform:none!important;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:transparent}
  .menu-toggle{position:relative;z-index:101;width:48px;height:48px;margin-right:-6px}
  .menu-toggle span{transition:transform .45s var(--ease),opacity .25s}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translate3d(0,8px,0) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){transform:translate3d(0,-8px,0) rotate(-45deg)}
}