/* EndoAI liquid-glass footer. Linked from the footer partial, immediately
   before <footer>: browsers render everything above an in-body stylesheet
   without waiting for it, so these rules stay off the critical path. Tokens
   (--glass-*, --halo-*) are defined in living.css. */
/* Footer: the closing scene. A dark liquid plane under a halo that echoes the
   HoloSphere, an invitation, then one glass panel holding every link. Pure CSS;
   js/core/glass.js only adds a damped pointer glint and the meniscus. */
.site-footer{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark);background:radial-gradient(70% 55% at 50% 30%,rgba(26,75,68,.55),transparent 70%),linear-gradient(180deg,#0B1F1A 0%,#081713 55%,#06110E 100%);padding-block:clamp(80px,10vw,140px) calc(32px + env(safe-area-inset-bottom,0px))}
.site-footer a{color:var(--on-dark);text-decoration:none}
.site-footer a:hover{color:var(--mint)}
.gf-stage{position:relative;isolation:isolate;margin-top:clamp(92px,10vw,150px)}
.gf-horizon{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* The halo lies on the liquid plane: centred on the panel's top edge, its far
   arc glows above, its near arc is seen softly refracted through the glass. */
.gf-halo{position:absolute;left:50%;top:0;width:min(1240px,150vw);aspect-ratio:5.4/1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,transparent 90.5%,var(--halo-mint) 95%,var(--halo-gold) 97.4%,transparent 100%);opacity:.6;filter:blur(1px)}
.gf-halo-inner{width:min(860px,112vw);aspect-ratio:4.8/1;background:radial-gradient(closest-side,transparent 88%,var(--halo-teal) 94%,transparent 100%);opacity:.5}
.gf-pool{position:absolute;left:50%;top:0;width:min(1300px,160vw);height:360px;translate:-50% -30%;background:radial-gradient(50% 45% at 50% 30%,rgba(95,211,184,.16),rgba(121,215,163,.05) 50%,transparent 74%)}
@media (prefers-reduced-motion:no-preference){
  [data-motion="on"] .gf-halo{animation:gf-breathe var(--dur-breathe) ease-in-out infinite}
  [data-motion="on"] .gf-halo-inner{animation-duration:calc(var(--dur-breathe) * 1.3);animation-direction:alternate-reverse}
}
@keyframes gf-breathe{0%,100%{transform:scale(1);opacity:.52}50%{transform:scale(1.03);opacity:.7}}

.gf-invite{text-align:center;max-width:760px;margin-inline:auto;padding-top:clamp(24px,5vw,72px)}
.gf-invite .eyebrow{color:var(--mint)}
.gf-title{margin-top:14px;font-size:var(--step-4);color:var(--on-dark)}
.gf-title em{color:var(--mint)}
.gf-lead{margin:18px auto 0;max-width:52ch;color:var(--on-dark-soft);font-size:var(--step-1);line-height:1.55}
.gf-stores{justify-content:center;margin-top:30px}
.gf-stores img{filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));transition:filter .3s var(--ease)}
.gf-stores a:hover img{filter:drop-shadow(0 0 14px rgba(121,215,163,.5))}

.gf-panel{position:relative;isolation:isolate;padding:clamp(28px,4vw,52px);border-radius:var(--glass-radius);background:var(--glass-sheen),var(--glass-tint-strong);box-shadow:var(--glass-rim),var(--glass-drop)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .gf-panel{background:var(--glass-sheen),var(--glass-tint);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
}
.gf-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--glass-edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.gf-panel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(520px circle at var(--gx,22%) var(--gy,0%),rgba(245,241,232,.085),transparent 62%),radial-gradient(60% 90% at 100% 100%,rgba(197,160,89,.07),transparent 70%)}
.gf-meniscus{position:absolute;left:7%;width:86%;top:-12px;height:24px;overflow:visible;pointer-events:none}
.gf-meniscus path{fill:none;stroke:rgba(245,241,232,.5);stroke-width:1.2;vector-effect:non-scaling-stroke}
/* The glow is a wide, faint second stroke rather than a filter, so flexing the
   meniscus never re-runs a blur. */
.gf-meniscus .gf-meniscus-glow{stroke:rgba(121,215,163,.28);stroke-width:7;stroke-linecap:round}

.footer-grid{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.footer-brand .brand{color:var(--on-dark)}
.footer-statement{margin-top:20px;font:400 var(--step-2)/1.2 var(--serif)}
.footer-statement em{color:var(--mint)}
.footer-col h2{font:600 .72rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:10px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid}
.footer-col a{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-soft)}
.footer-col a::before{content:"";position:absolute;z-index:-1;inset:5px -12px;border-radius:12px;background:radial-gradient(140% 160% at var(--mx,50%) 0%,rgba(121,215,163,.18),rgba(245,241,232,.035) 62%);box-shadow:inset 0 1px 0 rgba(245,241,232,.12);opacity:0;transition:opacity .25s var(--ease)}
.footer-col a:hover,.footer-col a:focus-visible{color:var(--on-dark)}
.footer-col a:hover::before,.footer-col a:focus-visible::before{opacity:1}
.site-footer .gf-motion{margin-top:20px;border-color:rgba(245,241,232,.22);color:var(--on-dark-soft);background:rgba(245,241,232,.04);gap:10px}
.site-footer .gf-motion:hover{background:rgba(245,241,232,.1)}
.gf-motion-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
.gf-motion[aria-pressed="true"] .gf-motion-dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--on-dark-mute)}
.footer-base{margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--line-dark);display:grid;gap:12px;font-size:.84rem;color:var(--on-dark-mute)}
.footer-base p{color:var(--on-dark-mute);max-width:110ch}
.footer-base .story-transcript summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (max-width:520px){
  .site-footer{padding-top:64px}
  .gf-stage{margin-top:64px}.gf-halo{aspect-ratio:4/1}.gf-halo-inner{aspect-ratio:3.6/1}
  .gf-title{font-size:clamp(2.1rem,9.5vw,2.6rem)}
  .gf-panel{padding:26px 20px;border-radius:26px}
  .footer-col a::before{inset:4px -8px}
}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;gap:22px}.footer-col h2{margin-bottom:2px}}
@media (max-width:360px){.gf-stores{gap:10px}}
/* Reduced transparency, missing blur, forced colours: solid, calm, legible. */
@media (prefers-reduced-transparency:reduce){
  .gf-panel{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .gf-halo,.gf-halo-inner{opacity:.3;animation:none}
}
@media (forced-colors:active){
  .gf-horizon,.gf-meniscus,.gf-panel::after,.footer-col a::before{display:none}
  .gf-panel{border:1px solid CanvasText;background:Canvas}
  .gf-panel::before{display:none}
}
@media print{.gf-horizon,.gf-meniscus,.gf-stores{display:none}.site-footer,.gf-panel{background:#fff;color:#000;box-shadow:none}}

/* Homepage: the "Begin with you" download section directly above is the
   invitation, so the footer opens on its horizon and panel instead of
   repeating both store badges a screen later. Every other page keeps the
   footer invitation as its download path. */
body[data-page="home"] .gf-invite{display:none}
body[data-page="home"] .site-footer{padding-top:clamp(56px,6vw,88px)}
body[data-page="home"] .gf-stage{margin-top:clamp(64px,7vw,104px)}