/* Motion and glass layer (index.html, features.html). Pairs with scripts/motion.js.
   Glass surfaces adapt the glass3d.dev recipe (backdrop blur + saturation, layered tinted shadows,
   inset rim highlights, fine noise) to Amyn's light palette. The noise is an inline SVG so the
   Content-Security-Policy can stay img-src 'self' data:. */
:root{
  --glass-noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --glass-shadow:0 0 .75px hsl(222 45% 18% / .18),.7px .8px 1.2px -.4px hsl(222 45% 18% / .08),1.3px 1.5px 2.2px -.8px hsl(222 45% 18% / .08),2.3px 2.6px 3.9px -1.2px hsl(222 45% 18% / .08),3.9px 4.4px 6.6px -1.7px hsl(222 45% 18% / .08),6.5px 7.2px 10.9px -2.1px hsl(222 45% 18% / .08),8px 9px 14px -2.5px hsl(222 45% 18% / .14);
  --glass-rim:inset 1.5px 1.5px 1px -1px hsl(0 0% 100% / .95),inset 3px 3px 2px -3px hsl(0 0% 100% / .6),inset -1px -1px 1px -.5px hsl(214 60% 80% / .35);
}

/* Glass surfaces */
.glass3d,.release-badge,.today-float,.site-header.scrolled,.value-chip{
  background-color:hsl(214 100% 99% / .58);
  background-image:var(--glass-noise);
  -webkit-backdrop-filter:blur(22px) saturate(1.7) brightness(1.04);
  backdrop-filter:blur(22px) saturate(1.7) brightness(1.04);
  box-shadow:var(--glass-shadow),var(--glass-rim);
}
.release-badge{border-color:hsl(214 100% 92% / .9);color:#2d4c75}
.today-float{border-color:hsl(0 0% 100% / .85)}
.site-header.scrolled{border-bottom-color:hsl(214 40% 90% / .7)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass3d,.release-badge,.today-float,.site-header.scrolled,.value-chip{background-color:#f7faff}
}
@media(prefers-reduced-transparency:reduce){
  .glass3d,.release-badge,.today-float,.site-header.scrolled,.value-chip{background-color:#f7faff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Hero backdrop: the brand's frosted glass ribbons, fading into the page */
/* Hero aurora: two soft bands of brand blue drifting behind the headline. No photograph; transform-only motion, and base.css stops it under reduced motion. */
.hero-backdrop{position:absolute;inset:0 0 auto;height:min(1100px,100%);overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 82%);mask-image:linear-gradient(180deg,#000 0,#000 42%,transparent 82%)}
.hero-backdrop::before,.hero-backdrop::after{content:'';position:absolute;filter:blur(64px);will-change:transform}
.hero-backdrop::before{width:min(70vw,980px);height:min(70vw,980px);right:-14vw;top:-26vw;border-radius:50%;background:radial-gradient(closest-side,var(--blue-200) 0%,var(--blue-100) 42%,rgba(220,235,255,0) 72%);opacity:.9;animation:aurora-drift-a 42s ease-in-out infinite alternate}
.hero-backdrop::after{width:min(90vw,1200px);height:min(16vw,220px);right:-22vw;top:19vw;border-radius:999px;background:linear-gradient(90deg,rgba(91,155,255,0) 0%,var(--blue-400) 30%,var(--blue-200) 62%,rgba(185,214,255,0) 100%);opacity:.6;filter:blur(46px);transform:translate3d(6%,-4%,0) rotate(-22deg);animation:aurora-drift-b 36s ease-in-out infinite alternate;animation-delay:-12s}
@keyframes aurora-drift-a{to{transform:translate3d(-7%,9%,0) scale(1.1)}}
@keyframes aurora-drift-b{to{transform:translate3d(-10%,6%,0) rotate(-18deg)}}
.hero .glows{z-index:0}

/* Shine sweep for short labels (adapted from the React Bits "ShinyText" idea, CSS only) */
.shiny-text{background-image:linear-gradient(110deg,currentColor 0 38%,var(--shine,#fff) 50%,currentColor 62% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shiny-sweep 5.5s cubic-bezier(.6,0,.4,1) infinite}
.release-badge .shiny-text{--shine:var(--blue-400)}
@keyframes shiny-sweep{0%{background-position:100% 0}55%,100%{background-position:0 0}}

/* Values: a single slow marquee of the three commitments, built by motion.js */
.values-strip.is-marquee{padding:36px 0 44px;overflow:hidden}
.values-strip.is-marquee .values-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.values-track-wrap{margin:22px 0 18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.values-track{display:flex;width:max-content;gap:14px;padding:6px 0;will-change:transform}
.value-chip{display:inline-flex;align-items:center;gap:12px;padding:13px 22px 13px 16px;border:1px solid hsl(0 0% 100% / .9);border-radius:999px;font-size:clamp(15px,1.5vw,19px);font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.value-chip img{width:17px;height:auto}
.values-strip.is-marquee small{display:block;text-align:center}

/* Vision: brand photography band */
.vision-photo{margin:72px 0 0}
.vision-photo .photo-frame{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:21/9;background:#e9f0fb;box-shadow:var(--shadow-2)}
.vision-photo img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:50% 55%}
.vision-photo figcaption{margin-top:12px;font-size:12px;color:var(--ink-3)}
@media(max-width:819px){.vision-photo{margin-top:48px}.vision-photo .photo-frame{aspect-ratio:4/3}}

/* Closing banner: floating glass padlock */
.final-cta .cta-glass-mark{position:absolute;z-index:0;right:7%;top:50%;width:clamp(170px,21vw,300px);height:auto;translate:0 -50%;filter:drop-shadow(0 30px 50px hsl(222 90% 20% / .35));pointer-events:none}
.final-cta .cta-glass-mark.is-left{left:6%;right:auto;width:clamp(90px,9vw,140px);top:22%;opacity:.55;filter:blur(1px) drop-shadow(0 20px 30px hsl(222 90% 20% / .3))}
.cta-outline{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:hsl(0 0% 100% / .08)}
@media(max-width:1023px){.final-cta .cta-glass-mark{right:-30px;top:30px;translate:none;width:150px;opacity:.45}.final-cta .cta-glass-mark.is-left{display:none}}

/* Fail-safe: the hero copy waits for motion.js, but never longer than 2.4s (no-JS, slow networks) */
@media(prefers-reduced-motion:no-preference){
  .motion-pending .hero-copy>*{opacity:0;animation:motion-failsafe .01s 2.4s forwards}
}
@keyframes motion-failsafe{to{opacity:1}}

/* Refinements */
/* The tight letter-spacing made the gradient "0" clip its right edge: give the clipped
   background room to cover the whole glyph without moving the layout. */
.zero-number{padding-right:.12em;margin-right:-.12em}

/* Lenis */
html.lenis,html.lenis body{height:auto}

/* Split headings keep their gradient per word/line */
.gradient-text .split-word,.gradient-text .split-line{color:inherit}
.split-word{will-change:transform,opacity,filter}