/* Motion layer: progress bar, hero numbers, technology band, reveal and card depth. */
.scroll-progress{position:fixed;inset:0 0 auto;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-1;width:min(620px,70vw);aspect-ratio:1;left:-12%;top:-18%;border-radius:50%;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%);filter:blur(10px);pointer-events:none}
.hero::after{content:"";position:absolute;z-index:-1;width:min(460px,60vw);aspect-ratio:1;right:-2%;bottom:-20%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,#6d55c9 11%,transparent),transparent 64%);pointer-events:none}
body{overflow-x:clip}

.pulse{margin-top:-30px;margin-bottom:24px}
.pulse-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}
.pulse-stats article{display:grid;gap:3px;padding:26px 24px 24px;border-left:1px solid var(--rule)}
.pulse-stats article:first-child{border-left:0;padding-left:0}
.pulse-stats b{font:400 clamp(38px,4.4vw,58px)/1 Georgia,"Times New Roman",serif;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.pulse-stats article:nth-child(2) b{color:var(--accent)}
.pulse-stats span{font-size:14px;font-weight:600;margin-top:8px}
.pulse-stats small{font-size:12px;color:var(--muted);line-height:1.55}

.marquee{overflow:hidden;padding:18px 0;border-bottom:1px solid var(--rule);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content}
.marquee-track span{flex:none;font:11px Consolas,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:7px 13px;border:1px solid var(--rule);border-radius:999px;background:var(--white)}

/* Reveal offset and hover depth are independent, so neither overrides the other. */
.motion-card{position:relative;isolation:isolate;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));translate:0 calc(var(--reveal-y,0px) + var(--card-lift,0px));transition:translate .22s ease,transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.motion-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .22s ease;background:radial-gradient(360px circle at var(--glow-x,50%) var(--glow-y,50%),color-mix(in srgb,var(--accent) 11%,transparent),transparent 70%)}
/* Preview light stays above the opaque artwork; card motion remains on its wrapper. */
.project-visual::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--preview-glow-x,50%) var(--preview-glow-y,50%),#ffffff2e,transparent 55%)}
/* Feather only the light, so it reaches zero before the artwork/card clips it. */
.motion-card::after,.project-visual::after{mask-image:linear-gradient(90deg,transparent,#000 min(32px,20%),#000 calc(100% - min(32px,20%)),transparent),linear-gradient(0deg,transparent,#000 min(32px,20%),#000 calc(100% - min(32px,20%)),transparent);mask-composite:intersect}
.project-visual:focus-visible::after{opacity:1}
@media(hover:hover) and (pointer:fine){.project-visual:hover::after{opacity:1}}
.motion-card:focus-within{--card-lift:-3px;box-shadow:0 16px 36px -25px #20261f55;border-color:color-mix(in srgb,var(--accent) 45%,var(--rule))}
.motion-card:focus-within::after{opacity:1}
.motion-stat{transform:none;--card-lift:0px!important}
@media(hover:hover) and (pointer:fine){.motion-card:hover{--card-lift:-3px;box-shadow:0 16px 36px -25px #20261f55;border-color:color-mix(in srgb,var(--accent) 45%,var(--rule))}.motion-card:hover::after{opacity:1}}
@media(hover:none),(pointer:coarse){.motion-card:is(:hover,:focus-within){--card-lift:0px;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .marquee-track{animation:marquee 38s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .hero::before{animation:drift 16s ease-in-out infinite alternate}
  .motion-ready .reveal{--reveal-y:18px;opacity:0;translate:0 var(--reveal-y);transition:opacity .55s ease var(--reveal-delay,0ms),translate .55s ease var(--reveal-delay,0ms)}
  .motion-ready .reveal.is-visible{--reveal-y:0px;opacity:1}
  .motion-ready .motion-card.reveal{translate:0 calc(var(--reveal-y,0px) + var(--card-lift,0px));transition:opacity .55s ease var(--reveal-delay,0ms),translate .22s ease,transform .22s ease,box-shadow .22s ease,border-color .22s ease}
}
@keyframes marquee{to{transform:translateX(calc(-50% - 6px))}}
@keyframes drift{to{transform:translate(8%,10%) scale(1.08)}}

@media(prefers-reduced-motion:reduce){
  .marquee-track{flex-wrap:wrap;width:auto;animation:none}
  .marquee-track span:nth-child(n+15){display:none}
  .marquee{mask-image:none}
  .hero::before{animation:none}
  .project-visual::after{transition:none}
  .motion-card,.motion-ready .reveal,.motion-ready .motion-card.reveal{opacity:1;transition:none;translate:none!important;transform:none!important}
}
:root[data-theme=dark] .motion-card:is(:hover,:focus-within){box-shadow:0 16px 36px -25px #000b}
@media(max-width:900px){.pulse-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.pulse-stats article:nth-child(3){border-left:0;padding-left:0}.pulse-stats article:nth-child(n+3){border-top:1px solid var(--rule)}}
@media(max-width:760px){.pulse{margin-top:-10px}.pulse-stats article{padding:18px 12px 16px}.pulse-stats b{font-size:36px}.pulse-stats small{font-size:11px}.marquee{padding:14px 0}}
@media print{.scroll-progress,.marquee{display:none}}