/* ==========================================================================
   endfx.css — download finale motion, footer v2, scroll chrome (endfx.js)
   PERF LAW: nothing inside #app carries backdrop-filter; the only real glass
   here is #scroll-indicator, which is fixed chrome outside #app.
   ========================================================================== */

/* ------------------------------------------------ finale: download buttons */
#end.end--video #end-reveal-buttons .dl-btn{position:relative;overflow:hidden}
/* site.css puts real backdrop-filter on the Mac pill INSIDE #app -> faux glass instead */
#end.end--video .dl-btn--alt{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 60%),rgba(16,17,23,.55)}
#end.end--video .dl-btn--alt:hover{background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.1) 60%),rgba(16,17,23,.6)}
/* magnet owns transform only after the entrance settles AND endfx.js armed it,
   so the clip-path/spring entrance in site.css is never fought */
#end.end--video.endfx-magnet.er-settled #end-reveal-buttons .dl-btn{
  transform:translate3d(var(--mx,0px),var(--my,0px),0) scale(var(--ms,1));
  transition:background .35s var(--ease);will-change:transform}
/* press squish fallback when the magnet is off (touch / reduced motion) */
#end.end--video.er-settled:not(.endfx-magnet) #end-reveal-buttons .dl-btn:active{transform:scale(.96)}
/* specular sweep */
#end.end--video #end-reveal-buttons .dl-btn::before{content:"";position:absolute;top:-4px;bottom:-4px;left:0;width:34%;
  background:linear-gradient(105deg,transparent 8%,rgba(255,255,255,.38) 50%,transparent 92%);
  transform:translateX(-170%) skewX(-16deg);pointer-events:none}
#end.end--video #end-reveal-buttons .dl-btn:hover::before{animation:dlfx-sweep .85s cubic-bezier(.3,.6,.2,1) .06s forwards}
@keyframes dlfx-sweep{to{transform:translateX(440%) skewX(-16deg)}}
/* soft pulsing halo behind the primary (Windows) pill */
#end.end--video.is-revealed #end-reveal-buttons .dl-btn:not(.dl-btn--alt){
  animation:dlfx-halo 3.2s ease-in-out .9s infinite}
@keyframes dlfx-halo{
  0%,100%{box-shadow:0 0 0 0 rgba(26,47,251,0),0 10px 32px rgba(26,47,251,.28)}
  50%{box-shadow:0 0 0 10px rgba(26,47,251,.13),0 14px 46px rgba(26,47,251,.5)}}

/* ------------------------------------------------ finale: ambient layer */
.endfx-motes{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
#end.end--video.is-revealed .endfx-motes{opacity:.6}
/* topline shimmer: background-position only, never opacity (site.js owns it inline) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #end.end--video #end-topline{color:transparent;
    background:linear-gradient(100deg,rgba(255,255,255,.72) 42%,#fff 50%,rgba(160,175,255,.95) 53%,rgba(255,255,255,.72) 60%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    animation:endfx-shimmer 5.6s linear infinite}
}
@keyframes endfx-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* =================================================================== footer v2
   All rules scoped to .ftr-v2 or new classes so this sheet is safe on pages
   that still carry the old footer markup. Faux glass only: layered gradients. */
#footer.ftr-v2{position:relative;overflow:hidden;
  background:radial-gradient(110% 80% at 82% -12%,rgba(26,47,251,.18),transparent 55%),
    radial-gradient(90% 70% at 8% 108%,rgba(26,47,251,.09),transparent 60%),var(--black);
  padding-top:clamp(40px,6vh,80px)}
/* glass theme on: same pools over a translucent base so the aurora glows through
   (higher specificity than glass.css's [data-glass] #footer, wins regardless of link order) */
[data-glass] #footer.ftr-v2{
  background:radial-gradient(110% 80% at 82% -12%,rgba(26,47,251,.16),transparent 55%),
    radial-gradient(90% 70% at 8% 108%,rgba(26,47,251,.08),transparent 60%),rgba(11,12,16,.92)}
#footer-wordmark{overflow:hidden;text-align:center;padding:10px 0 clamp(28px,4.5vh,52px);
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:clamp(28px,4.5vh,52px)}
#footer-wordmark-track{display:inline-block;white-space:nowrap;font-weight:500;line-height:.92;
  font-size:clamp(56px,13.2vw,218px);letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.3);will-change:transform;
  transition:-webkit-text-stroke-color .5s var(--ease)}
#footer-wordmark:hover #footer-wordmark-track{-webkit-text-stroke-color:rgba(122,138,255,.75)}
@supports not (-webkit-text-stroke:1px #fff){#footer-wordmark-track{color:rgba(255,255,255,.14)}}

#footer.ftr-v2 #footer-middle{border-bottom:0;gap:clamp(14px,1.6vw,22px);
  padding-bottom:clamp(36px,5vh,60px);grid-template-columns:1.3fr 1fr 1.15fr 1.25fr;align-items:stretch}
@media (max-width:1100px){#footer.ftr-v2 #footer-middle{grid-template-columns:1fr 1fr}}
@media (max-width:560px){#footer.ftr-v2 #footer-middle{grid-template-columns:1fr}}
.ftr-card{position:relative;display:flex;flex-direction:column;border-radius:26px;padding:clamp(20px,2vw,30px);
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 46%),
    linear-gradient(180deg,rgba(23,25,34,.92),rgba(13,14,19,.96));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px rgba(0,0,0,.35);
  transition:transform .5s var(--ease),border-color .5s var(--ease)}
.ftr-card:hover{transform:translateY(-3px);border-color:rgba(122,138,255,.32)}
.ftr-tag{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
#footer.ftr-v2 .footer-address{display:block;font-size:clamp(19px,1.7vw,26px)}

/* dot + slide link hover (menu-link language) */
.ftr-link{position:relative}
.footer-socials .ftr-link,.footer-links .ftr-link{display:block}
.ftr-link .fl-dot{position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 10px rgba(26,47,251,.8);
  transform:translateY(-50%) scale(0);transition:transform .35s var(--ease)}
.ftr-link .fl-txt{display:inline-block;transition:transform .35s var(--ease)}
.ftr-link:hover .fl-dot{transform:translateY(-50%) scale(1)}
.ftr-link:hover .fl-txt{transform:translateX(15px)}

/* newsletter */
#footer.ftr-v2 #footer-newsletter .nl-input{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
#footer.ftr-v2 #footer-newsletter .nl-input:focus-within{border-color:rgba(94,110,255,.6);
  box-shadow:0 0 0 3px rgba(26,47,251,.16),0 0 26px rgba(26,47,251,.18)}
#footer.ftr-v2 #footer-newsletter .nl-input input{caret-color:#8a97ff}
#footer.ftr-v2 #footer-newsletter .nl-input input::placeholder{color:rgba(255,255,255,.45)}
#footer.ftr-v2 #footer-newsletter .nl-input button{transition:transform .35s var(--ease),background .35s var(--ease)}
#footer.ftr-v2 #footer-newsletter .nl-input button:hover{transform:rotate(-45deg);background:var(--dark-blue)}

/* bottom row + circular back-to-top with orbiting dot + arrow relaunch */
#footer.ftr-v2 #footer-bottom{align-items:center;opacity:.78}
#footer.ftr-v2 #footer-bottom .ftr-link{display:inline-block}
#footer.ftr-v2 #footer-up{display:inline-flex;align-items:center;gap:12px}
#footer.ftr-v2 #footer-up .fu-label{transition:color .3s var(--ease)}
#footer.ftr-v2 #footer-up:hover .fu-label{color:#fff}
.fu-ring{position:relative;width:44px;height:44px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;
  background:linear-gradient(165deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 55%),rgba(15,16,22,.85);
  transition:border-color .35s var(--ease)}
#footer.ftr-v2 #footer-up:hover .fu-ring{border-color:rgba(122,138,255,.55)}
.fu-arrow{grid-area:1/1;font-size:15px;line-height:1;color:#fff}
#footer.ftr-v2 #footer-up:hover .fu-arrow{animation:fu-fly .7s var(--ease)}
@keyframes fu-fly{0%{transform:translateY(0);opacity:1}42%{transform:translateY(-160%);opacity:0}
  50%{transform:translateY(170%);opacity:0}100%{transform:translateY(0);opacity:1}}
.fu-orbit{position:absolute;inset:3px;border-radius:50%;opacity:0;transition:opacity .3s var(--ease)}
.fu-orbit-dot{position:absolute;left:50%;top:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 8px rgba(26,47,251,.9)}
#footer.ftr-v2 #footer-up:hover .fu-orbit{opacity:1;animation:fu-orbit .9s cubic-bezier(.4,.1,.3,1)}
@keyframes fu-orbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ============================================== scroll chrome: progress pill
   #scroll-indicator is position:fixed OUTSIDE #app -> real glass is legal here.
   site.js keeps driving the bar via width%. */
#scroll-indicator{top:auto;bottom:16px;left:50%;width:min(300px,42vw);height:12px;
  transform:translateX(-50%);padding:3px;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,rgba(24,26,35,.5),rgba(12,13,18,.62));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 24px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
#scroll-indicator-bar{border-radius:999px;background:linear-gradient(90deg,var(--blue),#7a8aff);
  box-shadow:0 0 10px rgba(26,47,251,.85),0 0 22px rgba(26,47,251,.4)}
/* framed video owns the bottom edge: the pill yields to the reel controls bar */
#scroll-indicator{transition:opacity .35s var(--ease)}
html.reel-framed #scroll-indicator{opacity:0}

/* ================================================== scroll chrome: scroll-nav */
#scroll-nav-sub{opacity:.5;letter-spacing:.2em}
.sn-divider{width:min(340px,46vw);margin:clamp(20px,3.5vh,34px) auto;display:flex;align-items:center;gap:14px;
  color:rgba(255,255,255,.4)}
.sn-divider::before,.sn-divider::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28))}
.sn-divider::after{background:linear-gradient(90deg,rgba(255,255,255,.28),transparent)}
#scroll-nav-main a{gap:clamp(14px,2.5vw,28px)}
.sn-label{transition:color .45s var(--ease)}
@supports (-webkit-text-stroke:1px #fff){
  #scroll-nav-main .sn-label{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.8);
    transition:color .45s var(--ease),-webkit-text-stroke-color .45s var(--ease)}
  #scroll-nav-main a:hover .sn-label{color:var(--blue);-webkit-text-stroke-color:var(--blue)}
}
.sn-arw{display:inline-grid;place-items:center;overflow:hidden}
.sn-arw-in{display:inline-block}
#scroll-nav-main a:hover .sn-arw-in{animation:sn-arw .55s var(--ease)}
@keyframes sn-arw{0%{transform:translate(0,0);opacity:1}45%{transform:translate(115%,-115%);opacity:0}
  50%{transform:translate(-115%,115%);opacity:0}100%{transform:translate(0,0);opacity:1}}
#scroll-nav-next{display:flex;align-items:center;justify-content:center;gap:10px}
.sn-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(26,47,251,.9);
  animation:sn-pulse 2.2s ease-in-out infinite}
@keyframes sn-pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}

/* =========================================== hero cue micro-polish (CSS only)
   #hero-scroll itself gets an inline transform from initHeroParallax every
   frame, so motion lives on a pseudo-element and the line gradient only. */
#hero-scroll::before{content:"";width:5px;height:5px;flex:0 0 auto;border-radius:50%;
  background:var(--blue);box-shadow:0 0 8px rgba(26,47,251,.9);
  animation:sn-pulse 2.4s ease-in-out infinite}
#hero-scroll .line{background:linear-gradient(90deg,var(--blue),currentColor 55%)}

/* ------------------------------------------------------------ reduced motion
   site.css clamps animation-duration to .001s globally, which would strobe the
   infinite loops here; kill them outright instead. */
@media (prefers-reduced-motion:reduce){
  #end.end--video.is-revealed #end-reveal-buttons .dl-btn:not(.dl-btn--alt){animation:none!important}
  #end.end--video #end-reveal-buttons .dl-btn:hover::before{animation:none!important}
  #end.end--video #end-topline{animation:none!important}
  .endfx-motes{display:none}
  .sn-dot,#hero-scroll::before{animation:none!important}
  #scroll-nav-main a:hover .sn-arw-in,#footer.ftr-v2 #footer-up:hover .fu-arrow{animation:none!important}
  #footer.ftr-v2 #footer-up:hover .fu-orbit{animation:none!important}
  #footer-wordmark-track{transform:none!important}
}