/* ==========================================================================
   E³ — Motion & Atmosphere layer
   Loads AFTER style.css. Base look is unchanged; this file adds motion,
   depth and an ambient procedural layer. Fully disabled by
   prefers-reduced-motion, and the page remains correct without JS.
   ========================================================================== */

:root{
  /* Motion tokens */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.22s;--t-base:.45s;--t-slow:.85s;--t-reveal:.9s;
  --stagger:70ms;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- keyframes */
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-spin-rev{to{transform:rotate(-360deg)}}
@keyframes m-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes m-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(3%,-4%,0) scale(1.06)}66%{transform:translate3d(-3%,3%,0) scale(.97)}}
@keyframes m-twinkle{0%,100%{opacity:.15;transform:scale(.7) rotate(0deg)}50%{opacity:.9;transform:scale(1.15) rotate(90deg)}}
@keyframes m-dash{to{stroke-dashoffset:-1000}}
@keyframes m-sheen{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes m-scan{0%{transform:translateY(-120%)}100%{transform:translateY(560%)}}
@keyframes m-glow{0%,100%{opacity:.42}50%{opacity:.95}}
@keyframes m-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes m-ring-out{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.5);opacity:0}}
@keyframes m-kicker{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-arc{to{transform:rotate(360deg)}}
@keyframes m-sheen-slow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes m-sway{0%,100%{transform:translateX(-50%) rotate(-2deg)}50%{transform:translateX(-50%) rotate(-1.1deg)}}
@keyframes m-pulse-bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes m-signal{0%{transform:scaleX(0);opacity:0}40%{opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes m-neon{0%,100%{opacity:.5;filter:blur(0px)}50%{opacity:1;filter:blur(.5px)}}

/* ------------------------------------------------------------ atmosphere */
/* Fine grain over everything: kills the flat "digital brochure" look. */
body:after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:var(--grain);background-size:140px 140px;
  opacity:.038;mix-blend-mode:overlay;
}
/* Ambient procedural field (canvas, drawn by motion.js) */
.ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1}
html,body{overflow-x:clip}
.reveal-left,.reveal-right{max-width:100%}
/* Let the field breathe through the flat panels instead of being walled off */
.dark-section{background:linear-gradient(180deg,rgba(7,19,31,.93),rgba(7,19,31,.87))}
/* Aurora wash behind the page */
body:before{
  background:
    linear-gradient(180deg,rgba(8,20,31,.2),transparent 35%),
    radial-gradient(38% 26% at 78% 6%,rgba(72,216,255,.10),transparent 70%),
    radial-gradient(32% 24% at 12% 22%,rgba(155,140,255,.075),transparent 72%),
    radial-gradient(46% 30% at 52% 0,rgba(72,216,255,.05),transparent 70%);
  animation:m-drift 34s var(--e-inout) infinite;
  will-change:transform;
}
main,.footer{position:relative;z-index:2}
/* header and mobile CTA keep the higher layers style.css gave them */
.site-header{z-index:100}
.mobile-whatsapp{z-index:90}

@media(prefers-reduced-motion:reduce){.ambient{display:none}}

/* ---------------------------------------------------------------- header */
.site-header{transition:background var(--t-base) ease,box-shadow var(--t-base) ease,border-color var(--t-base) ease}
.site-header.is-stuck{background:rgba(5,13,22,.92);box-shadow:0 18px 40px rgba(0,0,0,.4);border-bottom-color:rgba(255,255,255,.16)}
.logo-mark{position:relative;background:linear-gradient(100deg,var(--accent),var(--accent2),var(--accent));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:m-sheen-slow 7s linear infinite}
.nav-links a{position:relative;transition:color var(--t-fast) ease}
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--e-out)}
.nav-links a:hover:after,.nav-links a[aria-current]:after{transform:scaleX(1)}
.nav-links a:hover{color:#fff}

/* Mobile nav slide-in */
#mobileNav a{opacity:0;transform:translateY(10px);transition:opacity .4s var(--e-out),transform .4s var(--e-out)}
#mobileNav.open a{opacity:1;transform:none}
#mobileNav.open a:nth-child(1){transition-delay:.04s}
#mobileNav.open a:nth-child(2){transition-delay:.08s}
#mobileNav.open a:nth-child(3){transition-delay:.12s}
#mobileNav.open a:nth-child(4){transition-delay:.16s}
#mobileNav.open a:nth-child(5){transition-delay:.2s}
#mobileNav.open a:nth-child(6){transition-delay:.24s}
#mobileNav.open a:nth-child(7){transition-delay:.28s}
#mobileNav.open a:nth-child(8){transition-delay:.32s}

/* --------------------------------------------------------------- buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);opacity:0;pointer-events:none}
.btn-primary:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.btn:hover:before{opacity:1;animation:m-sheen .85s var(--e-out)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{position:relative}
.btn-primary:after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent2) 45%,transparent);animation:m-ring-out 3.4s var(--e-out) infinite;pointer-events:none}

/* ---------------------------------------------------- reveal (upgraded) */
/* Hidden-until-revealed states are gated behind `.js`, which a tiny inline
   script sets on <html>. Without scripting nothing is ever hidden, and if the
   motion engine never starts, `.no-motion` (set by a timer) reveals it all. */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity var(--t-reveal) var(--e-out),transform var(--t-reveal) var(--e-out);transition-delay:calc(var(--i,0) * var(--stagger));will-change:opacity,transform}
.js .reveal.show{opacity:1;transform:none}
.js .reveal-left{transform:translateX(-16px)}
.js .reveal-right{transform:translateX(16px)}
.js .reveal-zoom{transform:translateY(20px) scale(.965)}
.js .reveal-left.show,.js .reveal-right.show,.js .reveal-zoom.show{transform:none}
.js .reveal-blur{filter:blur(9px);transition:opacity var(--t-reveal) var(--e-out),transform var(--t-reveal) var(--e-out),filter var(--t-reveal) var(--e-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.js .reveal-blur.show{filter:blur(0)}

/* Kicker line draws itself */
.js .section-kicker:before{transform:scaleX(0);transform-origin:left}
.js .section-intro.show .section-kicker:before,.js .reveal.show .section-kicker:before{animation:m-kicker .7s var(--e-out) .12s forwards}

/* Headline focus-in for hero */
.js .hero-copy h1,.js .vertical-copy h1{animation:m-rise 1s var(--e-out) both}
.js .hero-copy .eyebrow{animation:m-rise .8s var(--e-out) .05s both}
.js .hero-copy .hero-lead{animation:m-rise .9s var(--e-out) .18s both}
.js .hero-copy .cta-row{animation:m-rise .9s var(--e-out) .3s both}
.js .hero-copy .hero-note{animation:m-rise .9s var(--e-out) .4s both}
.gradient-text{background-size:200% 100%;animation:m-sheen-slow 8s linear infinite}

/* Live indicators */
.pulse,.live-dot{animation:m-glow 2.6s var(--e-inout) infinite}
.pulse{position:relative}
.pulse:after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:m-ring-out 2.6s var(--e-out) infinite}

/* ##################################################  HERO ORBITAL SYSTEM */
.orbit-shell{--pad:.95rem;--cap-h:3.9rem;position:relative;display:block;width:100%;aspect-ratio:1/1;height:auto;min-height:0;padding:0;overflow:hidden}
.orbit-shell:before,.orbit-shell:after{z-index:0}
.orbit-stage{position:absolute;inset:var(--pad) var(--pad) var(--cap-h) var(--pad);margin:0;container-type:size;container-name:orbit}

/* Soft aurora plate behind the orbits, slowly rotating */
.orbit-aurora{
  position:absolute;inset:-14%;border-radius:50%;z-index:0;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(72,216,255,.16),rgba(155,140,255,.13),rgba(101,244,195,.11),rgba(72,216,255,.16));
  filter:blur(46px);opacity:.5;animation:m-spin 46s linear infinite;
}
/* Technical grid plate */
.orbit-grid{
  position:absolute;inset:6%;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(72,216,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(72,216,255,.075) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 74%);
  mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 74%);
}
.orbit-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.orbit-svg .ring{fill:none;stroke-width:.55;vector-effect:non-scaling-stroke}
.orbit-svg .ring-fill{fill:none;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:16 240;animation:m-dash 9s linear infinite}
.orbit-svg .beam{stroke-width:.45;stroke-dasharray:3 5;opacity:.34;animation:m-dash 26s linear infinite}
.orbit-svg .beam-core{stroke-width:1;opacity:.5;stroke-linecap:round}
.orbit-svg .pulse-dot{fill:#fff;filter:drop-shadow(0 0 5px rgba(72,216,255,.95))}
.orbit-svg .hub{fill:none;stroke-width:.4;opacity:.5}

/* Nodes ride their orbit (position applied by motion.js).
   The classes below are the no-JS / pre-JS fallback arrangement. */
.float-node{
  position:absolute;left:50%;top:50%;z-index:4;
  min-width:clamp(70px,22cqw,104px);padding:clamp(.36rem,1.4cqw,.56rem) clamp(.4rem,1.7cqw,.68rem);border-radius:clamp(11px,3.2cqw,14px);
  background:rgba(8,19,31,.82);border:1px solid var(--line);
  backdrop-filter:blur(10px);box-shadow:0 14px 30px rgba(0,0,0,.22);
  transform:translate(-50%,-50%) scale(var(--ns,1));
  will-change:transform,opacity;
}
.float-node:before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;border-radius:2px;background:linear-gradient(180deg,transparent,var(--nc,var(--accent)),transparent);opacity:.9}
.float-node b{display:block;font-size:clamp(.46rem,2.5cqw,.62rem);letter-spacing:.1em;color:var(--nc,var(--accent));transition:color var(--t-fast) ease}
.float-node span{display:block;color:#c7d3df;font-size:clamp(.5rem,2.9cqw,.7rem);line-height:1.3}
.float-node .node-pip{position:absolute;right:clamp(.3rem,1.2cqw,.5rem);top:clamp(.3rem,1.2cqw,.5rem);width:clamp(3px,1.1cqw,5px);height:clamp(3px,1.1cqw,5px);border-radius:50%;background:var(--nc,var(--accent));opacity:.55;box-shadow:0 0 10px var(--nc,var(--accent))}
/* Node "arrival" glow is driven by --glow (0..1) from motion.js */
.float-node{box-shadow:0 14px 30px rgba(0,0,0,.22),0 0 calc(6px + var(--glow,0) * 26px) color-mix(in srgb,var(--nc,var(--accent)) calc(10% + var(--glow,0) * 62%),transparent)}
.float-node.is-live{border-color:color-mix(in srgb,var(--nc,var(--accent)) 52%,transparent)}

/* Per-node accent: FOUND / TRUST / WORK / CONNECT each keep their own colour,
   matching the palette used across the verticals. */
.float-node{--nc:var(--accent);right:auto;bottom:auto}
.float-node.node-1{--nc:#48d8ff}
.float-node.node-2{--nc:#65f4c3}
.float-node.node-3{--nc:#9b8cff}
.float-node.node-4{--nc:#f4c56a}

/* Pre-JS fallback: a calm, legible spread. motion.js takes over immediately.
   right/bottom are reset because style.css sets them per node and combining
   both insets on one absolutely-positioned box stretches it. */
.float-node.node-1{left:26%;top:22%}
.float-node.node-2{left:74%;top:19%}
.float-node.node-3{left:24%;top:74%}
.float-node.node-4{left:76%;top:78%}

.orbit-stage.is-riding .float-node{left:var(--px,50%);top:var(--py,50%);right:auto;bottom:auto;z-index:4}

/* Core card: the organisation at the centre */
.core-card{
  --card-r:clamp(15px,5.2cqw,24px);
  position:absolute;inset:0;margin:auto;z-index:9;
  width:clamp(74px,22cqw,128px);height:clamp(72px,24cqw,142px);
  border-radius:var(--card-r);border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(160deg,rgba(10,24,38,.95),rgba(6,15,25,.9));
  box-shadow:0 28px 60px rgba(0,0,0,.34),0 0 0 1px rgba(72,216,255,.07),0 0 42px rgba(72,216,255,.13);
  display:grid;place-items:center;text-align:center;padding:clamp(.5rem,2.6cqw,1rem);
  backdrop-filter:blur(12px);overflow:visible;
  animation:m-breathe 6.5s var(--e-inout) infinite;
}
.core-card:before{ /* scanning sweep, clipped to the card shape */
  content:"";position:absolute;left:0;right:0;height:38%;top:0;
  border-radius:inherit;clip-path:inset(0 round var(--card-r));
  background:linear-gradient(180deg,transparent,rgba(72,216,255,.16),transparent);
  animation:m-scan 5.2s var(--e-inout) infinite;pointer-events:none;
}
.core-card:after{ /* inner rim arc */
  content:"";position:absolute;inset:-40%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(101,244,195,.55) 76%,transparent 88%);
  -webkit-mask-image:radial-gradient(circle,#000 60%,transparent 68%);
  mask-image:radial-gradient(circle,#000 60%,transparent 68%);
  animation:m-arc 8s linear infinite;opacity:.85;
}
.core-card>*{position:relative;z-index:2}
.core-card .mini-brand{animation:m-glow 4.2s var(--e-inout) infinite}

/* Sparks */
.spark{z-index:3}
.spark-1{animation:m-twinkle 3.6s var(--e-inout) infinite}
.spark-2{animation:m-twinkle 4.4s var(--e-inout) .7s infinite}

.visual-caption{z-index:6;position:absolute;left:var(--pad);right:var(--pad);bottom:1.1rem}
.visual-caption .live-dot{position:relative}

/* ------------------------------------------------------------ signal strip */
.signal-strip{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.signal-strip:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,16,26,.85),transparent 12%,transparent 88%,rgba(6,16,26,.85))}
.signal-track{justify-content:flex-start;padding:0;width:max-content}
.signal-track.is-marquee{animation:m-marquee linear infinite;animation-duration:var(--marquee,42s);will-change:transform}
.signal-strip:hover .signal-track{animation-play-state:paused}
.signal-group{display:flex;align-items:center;gap:1.5rem;padding:1rem 1.5rem 1rem 0;white-space:nowrap}
.signal-track{color:#b6c6d6}
.signal-group i{color:var(--accent);font-style:normal;animation:m-glow 3s var(--e-inout) infinite}

/* ------------------------------------------------------------------ cards */
/* Cursor-tracked spotlight on cards (position from motion.js) */
.door-card,.build-item,.feature-card,.principle,.audience-card,.vertical-step,.quick,.contact-panel,.process-note,.insight-card{
  position:relative;
  transition:transform var(--t-base) var(--e-out),border-color var(--t-base) ease,background var(--t-base) ease,box-shadow var(--t-base) ease;
  will-change:transform;
}
.door-card:after,.build-item:after,.feature-card:after,.principle:after,.audience-card:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 15%,transparent),transparent 62%);
  transition:opacity var(--t-base) ease;
}
.door-card:hover:after,.build-item:hover:after,.feature-card:hover:after,.principle:hover:after,.audience-card:hover:after{opacity:1}
.door-card:hover,.build-item:hover,.feature-card:hover,.principle:hover,.audience-card:hover,.vertical-step:hover,.quick:hover,.insight-card:hover,.process-note:hover{
  transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  box-shadow:0 26px 56px rgba(0,0,0,.34);
}
.door-card>*,.build-item>*,.feature-card>*,.principle>*,.audience-card>*{position:relative;z-index:2}

/* Door / build icon idle motion */
.door-icon,.build-icon,.audience-card>span,.feature-card .feature-number{transition:transform var(--t-base) var(--e-spring),color var(--t-fast) ease,background var(--t-base) ease}
.door-card:hover .door-icon{transform:translateY(-4px) rotate(-6deg) scale(1.08);background:color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.05))}
.build-item:hover .build-icon{transform:translateY(-4px) scale(1.1) rotate(4deg);color:var(--accent2)}
.audience-card:hover>span{transform:translateY(-4px) scale(1.1)}
.door-link .icon{transition:transform var(--t-base) var(--e-out)}
.door-card:hover .door-link .icon{transform:translateX(6px)}
.live-tag,.vertical-live{animation:m-glow 3.2s var(--e-inout) infinite}

/* Big background numerals drift up as they enter */
.build-item>span,.feature-number{transition:transform var(--t-slow) var(--e-out),color var(--t-slow) ease}
.reveal.show .feature-number,.build-item.show>span{transform:translateY(-6px)}

/* --------------------------------------------------- journey / steps flow */
.journey-step,.vertical-step{transition:transform var(--t-base) var(--e-out),border-color var(--t-base) ease,background var(--t-base) ease}
.js .journey-step:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent2));transform:scaleY(0);transform-origin:top;transition:transform .7s var(--e-out) .15s}
.js .journey-step.show:before{transform:scaleY(1)}
.journey-step>span,.vertical-step>span{transition:transform var(--t-base) var(--e-spring),color var(--t-fast) ease}
.journey-step:hover>span,.vertical-step:hover>span{transform:translateY(-3px) scale(1.14);color:var(--accent2)}
.journey-step p,.vertical-step p{transition:color var(--t-base) ease}
.journey-step:hover p,.vertical-step:hover p{color:#bccadb}

/* Manifesto chain links pulse in turn */
.manifesto-line b{animation:m-glow 2.8s var(--e-inout) infinite}
.manifesto-line b:nth-of-type(2){animation-delay:.5s}
.manifesto-line b:nth-of-type(3){animation-delay:1s}

/* Problem board: rows arrive one after another */
.problem-board{position:relative;overflow:hidden}
.problem-board:after{content:"";position:absolute;left:0;right:0;height:34%;top:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(72,216,255,.09),transparent);animation:m-scan 6.5s var(--e-inout) infinite}
.js .board-row{opacity:0;transform:translateX(-14px)}
.js .problem-board.show .board-row{animation:m-rise .6s var(--e-out) forwards;animation-delay:calc(.18s + var(--i,0) * .12s)}
.board-dot{animation:m-glow 2.2s var(--e-inout) infinite}

/* --------------------------------------------------------------- location */
.location-card{position:relative;overflow:hidden}
.location-badge{animation:m-float 7s var(--e-inout) infinite;transition:transform var(--t-base) var(--e-out),border-color var(--t-base) ease}
.location-card:hover .location-badge{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.location-card:after{content:"";position:absolute;width:320px;height:320px;right:-90px;top:-120px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(72,216,255,.16),transparent 66%);animation:m-float 9s var(--e-inout) infinite}

/* -------------------------------------------------------------- CTA band */
.cta-section{position:relative;overflow:hidden}
.cta-card{position:relative;overflow:hidden}
.cta-card:before{content:"";position:absolute;inset:-60% -10%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(101,244,195,.18) 72%,transparent 86%);animation:m-arc 14s linear infinite}
.cta-card:after{content:"";position:absolute;top:-60%;bottom:-60%;left:-30%;width:26%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);animation:m-sheen 6.5s var(--e-out) infinite}
.cta-card>*{position:relative;z-index:2}

/* ------------------------------------------------------------------ about */
.number-art{position:relative;overflow:hidden}
.number-art:before{animation:m-float 11s var(--e-inout) infinite}
.number-art span{transition:transform var(--t-slow) var(--e-out),color var(--t-slow) ease}
.number-art:hover span{transform:translateY(-8px) scale(1.04);color:rgba(255,255,255,.14)}
.founder-mark{position:relative;overflow:hidden;transition:transform var(--t-base) var(--e-spring)}
.founder-note:hover .founder-mark{transform:scale(1.05) rotate(-3deg)}
.founder-mark:after{content:"";position:absolute;top:-40%;bottom:-40%;left:-40%;width:36%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:m-sheen 5s var(--e-out) infinite}
.belief-stack>div{transition:transform var(--t-base) var(--e-out),border-color var(--t-base) ease,background var(--t-base) ease}
.belief-stack>div:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--accent) 34%,transparent);background:rgba(72,216,255,.04)}

/* ------------------------------------------------------- vertical stages */
/* School: the visible surface keeps quietly working */
.school-screen .screen-card{animation:m-float 6.5s var(--e-inout) infinite}
.school-screen .screen-card:nth-child(2){animation-delay:.6s}
.school-screen .screen-card:nth-child(3){animation-delay:1.2s}
.laptop{transition:transform var(--t-slow) var(--e-out)}
.product-stage:hover .laptop{transform:perspective(900px) rotateY(-5deg) rotateX(1deg) translateY(-4px)}
.phone{animation:m-float 7.5s var(--e-inout) .4s infinite}
.score strong{transition:color var(--t-fast) ease}
.stage-chip{animation:m-float 5.5s var(--e-inout) infinite;transition:border-color var(--t-base) ease}
.chip-b{animation-delay:1.1s}
.product-stage:hover .stage-chip{border-color:color-mix(in srgb,var(--accent) 44%,transparent)}
.product-stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(72,216,255,.055),transparent);height:30%;top:0;animation:m-scan 7s var(--e-inout) infinite}

/* Medical: a heartbeat trace + breathing status */
.medical-orbit{animation:m-spin 22s linear infinite;border-style:dashed}
.medical-orbit:after{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(98,229,189,.3);animation:m-spin-rev 15s linear infinite}
.pulse-grid{animation:m-glow 5s var(--e-inout) infinite}
.health-message,.health-card{animation:m-float 8s var(--e-inout) infinite}
.health-bar span{animation:m-pulse-bar 1.5s var(--e-inout) infinite;transform-origin:center}
.health-bar span:nth-child(2){animation-delay:.2s}
.health-bar span:nth-child(3){animation-delay:.4s}
.health-bar span:nth-child(4){animation-delay:.6s}
.health-bar span:nth-child(5){animation-delay:.8s}
.health-options span{transition:background var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease}
.health-options span:hover{background:rgba(98,229,189,.14);color:#eafff6;border-color:rgba(98,229,189,.4)}
.bot-avatar{animation:m-glow 3.4s var(--e-inout) infinite}

/* Nightlife: neon breathes and sweeps */
.neon-ring{animation:m-spin 28s linear infinite;border-style:dashed}
.neon-ring:after{content:"";position:absolute;inset:9%;border-radius:50%;border:1px solid rgba(255,99,190,.26);animation:m-spin-rev 19s linear infinite}
.nightlife-stage:before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 40% at 30% 20%,rgba(192,140,255,.2),transparent 60%),radial-gradient(50% 40% at 72% 78%,rgba(255,99,190,.16),transparent 62%);
  animation:m-drift 22s var(--e-inout) infinite}
.night-phone{animation:m-neon 5.5s var(--e-inout) infinite}
.event-card{transition:transform var(--t-base) var(--e-out),border-color var(--t-base) ease}
.night-phone:hover .event-card,.event-card:hover{transform:translateX(5px);border-color:rgba(255,99,190,.42)}
.night-nav span:first-child{animation:m-glow 2.6s var(--e-inout) infinite}

/* Weddings: the invitation settles, then breathes */
.wedding-sheet{animation:m-sway 9s var(--e-inout) infinite}
.w-line{transform-origin:center;animation:m-kicker 1.2s var(--e-out) both;animation-direction:normal}
.w-monogram{animation:m-glow 5s var(--e-inout) infinite}
.paper-note{animation:m-float 6.5s var(--e-inout) .8s infinite}
.w-actions span{transition:background var(--t-fast) ease,border-color var(--t-fast) ease,color var(--t-fast) ease}
.w-actions span:hover{background:rgba(241,201,120,.12);border-color:rgba(241,201,120,.4);color:#fff}

/* Footer column headings: these are <h2> for outline correctness, but they
   must keep the original small-caps heading look, not the display h2 scale. */
.footer-col h2{
  font-family:var(--head);font-size:.88rem;font-weight:800;line-height:1.2;
  letter-spacing:.02em;margin:0 0 .8rem;max-width:none;color:#fff}

/* Sub-navigation on the vertical pages: comfortable touch targets */
.vertical-nav a{display:inline-flex;align-items:center;min-height:32px;padding-inline:2px}

/* Footer navigation needs a comfortable touch height at every breakpoint. */
.footer-col a{display:inline-flex;align-items:center;min-height:32px;padding-block:2px}
.footer-wa{display:inline-flex;align-items:center;min-height:30px}
.footer-bottom a{display:inline-flex;align-items:center;min-height:28px}

/* --------------------------------------------------- mockup captions */
/* These were <h3> for presentation only. Keeping them as non-heading
   elements removes false outline entries; these rules preserve the look. */
.night-phone>.mock-title{
  display:block;font-family:var(--head);font-weight:700;letter-spacing:-.04em;
  line-height:1.03;margin-top:.35rem;font-size:1.55rem;max-width:9ch}
.wedding-sheet .mock-title{
  display:block;font-family:var(--head);font-weight:700;letter-spacing:-.04em;
  line-height:1.08;margin-top:.7rem;font-size:1.8rem}

/* --------------------------------------------------------- blog / contact */
.insight-card[open] .summary-arrow{transform:rotate(45deg) scale(1.1)}
.insight-body{animation:m-rise .5s var(--e-out) both}
.field input,.field textarea,.field select{transition:border-color var(--t-base) ease,box-shadow var(--t-base) ease,background var(--t-base) ease}
.field label{transition:color var(--t-fast) ease}
.field:focus-within label{color:#fff}
.contact-tip{border-left-width:2px;animation:m-glow 4.5s var(--e-inout) infinite}
.contact-list>a b{transition:color var(--t-fast) ease,transform var(--t-base) var(--e-out)}
.contact-list>a:hover b{color:#fff;transform:translateX(4px)}
.micro-tags span{transition:border-color var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-fast) var(--e-out)}
.micro-tags span:hover{border-color:color-mix(in srgb,var(--accent) 44%,transparent);color:#dfeaf4;transform:translateY(-2px)}

/* ------------------------------------------------------------ 404 flourish */
.error-hero{position:relative}

/* ============================== responsive: mobile is re-laid-out, not shrunk */
@media(max-width:1100px){
  /* Once the two-column grids stack, a sideways entrance would start off-canvas.
     Scoped with `.js` so it outranks the base `.js .reveal-left` rule. */
  .js .reveal-left,.js .reveal-right{transform:translateY(26px)}
  .js .reveal-left.show,.js .reveal-right.show{transform:none}
}

@media(max-width:720px){
  .vertical-nav .container{overflow-x:auto;scrollbar-width:none}
  .vertical-nav .container::-webkit-scrollbar{display:none}
  .vertical-nav a{white-space:nowrap}
  /* Horizontal entrance transforms would push content past the viewport on
     narrow screens; fall back to a vertical rise there. */
  .js .reveal-left,.js .reveal-right{transform:translateY(24px)}
  .js .reveal-left.show,.js .reveal-right.show{transform:none}
  .orbit-shell{max-width:26rem;margin-inline:auto}
  .night-phone>.mock-title{font-size:1.25rem}
  .wedding-sheet .mock-title{font-size:1.35rem}
  .orbit-grid{display:none}
  body:after{background-size:110px 110px;opacity:.03}
  .ambient{opacity:.6}
  /* Keep the orbital composition on-stage at small widths */
  .orbit-stage .float-node{min-width:76px;padding:.44rem .5rem;border-radius:11px;backdrop-filter:blur(8px)}
  .orbit-aurora{filter:blur(30px)}
  .orbit-grid{background-size:26px 26px}
  .orbit-svg .beam{opacity:.22}
  .spark{font-size:.9rem}
  /* Fewer simultaneous idle loops on small screens = steadier rendering */
  .school-screen .screen-card,.location-badge,.contact-tip,.live-tag,.vertical-live{animation:none}
  .signal-track{animation-duration:26s}
  .section-kicker{font-size:.68rem}
  .btn{padding:.95rem 1.1rem}
  .mobile-whatsapp a{transition:transform var(--t-fast) var(--e-out)}
  .mobile-whatsapp a:active{transform:scale(.97)}
}

@media(max-width:400px){
  .orbit-shell{max-width:21rem}
  .core-card{width:108px;height:104px}
}

/* Landscape phones: give the symbol room without eating the fold */
@media(max-height:520px) and (max-width:900px){
}

/* ----------------------------------------------------- reduced motion: OFF */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.reveal-left,.reveal-right,.reveal-zoom,.reveal-blur{opacity:1!important;transform:none!important;filter:none!important}
  .board-row{opacity:1!important;transform:none!important}
  .section-kicker:before,.journey-step:before{transform:none!important}
  .ambient{display:none}
  body:after{opacity:.02}
}


/* ---------------------------------------------------- no-motion safety net */
/* Applied by the inline timer if the engine never starts: nothing stays hidden. */
.no-motion *, .no-motion *::before, .no-motion *::after{animation:none!important;transition:none!important}
.no-motion .reveal,.no-motion .reveal-left,.no-motion .reveal-right,
.no-motion .reveal-zoom,.no-motion .reveal-blur,.no-motion .board-row{
  opacity:1!important;transform:none!important;filter:none!important}
.no-motion .section-kicker:before,.no-motion .journey-step:before{transform:none!important}