/* fx/footer.css — lane 3: footer + phoenix (2026-09-24). Prefix .fxft-
   Phoenix layer, the name in the windows, two working cranes, studio light, molten CTA edge.
   Motion is transform/opacity only; loops pause offscreen (.fxft-off). */

/* -- phoenix layer: registered to the skyline (same viewBox + slice; height from site.css) -- */
.footer-skyline .fxft-sky{position:absolute;left:0;top:0;pointer-events:none}
.fxft-bird{transform-box:fill-box;transform-origin:50% 60%;opacity:.66;transition:opacity .5s,transform .6s var(--fx-ease-out)}
.fxft-bird__glow{opacity:.16;transition:opacity .6s}
.fxft-bird use{pointer-events:none}
.fxft-ember{opacity:0;transform-box:fill-box;transform-origin:center}
html.fx-js .fxft-sky:not(.fxft-rest) .fxft-bird{opacity:0}

.fxft-go .fxft-ember{animation:fxft-emb 1.5s var(--fx-ease-out) forwards}
.fxft-go .fxft-bird{animation:fxft-rise 2.8s var(--fx-ease-out) 1.05s both}
.fxft-go .fxft-bird__glow{animation:fxft-flare 2.8s ease-out 1.05s both}
@keyframes fxft-emb{0%{opacity:0;transform:none}12%{opacity:1}80%{opacity:1;transform:translateY(-146px)}100%{opacity:0;transform:translateY(-150px) scale(2.4)}}
@keyframes fxft-rise{0%{opacity:0;transform:translateY(30px) scale(.25)}34%{opacity:1;transform:translateY(-5px) scale(1.07)}52%{transform:translateY(1px) scale(.97,.93)}70%{transform:translateY(-2px) scale(1.02)}100%{opacity:.66;transform:none}}
@keyframes fxft-flare{0%{opacity:0}34%{opacity:.95}100%{opacity:.16}}

/* at rest: a quiet mark that breathes; hover wakes it */
.fxft-rest .fxft-bird__glow{animation:fxft-breathe 10s ease-in-out infinite}
@keyframes fxft-breathe{50%{opacity:.34}}
.fxft-rest .fxft-bird__body{pointer-events:visiblePainted}
.fxft-rest .fxft-bird:hover{opacity:1;transform:translateY(-3px) scale(1.04)}
.fxft-rest .fxft-bird:hover .fxft-bird__glow{opacity:.6;animation:none}
.fxft-flare .fxft-bird{opacity:1}
.fxft-flare .fxft-bird__glow{animation:fxft-pulse 2.4s ease-out}
@keyframes fxft-pulse{40%{opacity:.8}}

/* taller cap than site.css (208px) so 1920 screens keep the I/F/S crowns and the phoenix whole */
.footer-skyline svg{height:clamp(132px,13.5vw,240px)}

/* -- the name in the windows, played like piano keys: every tower is its own key. The letter
   under the pointer comes on with a quick fluorescent catch, holds, and fades on its own, so a
   fast sweep reads IDEA FORGE STUDIOS for a moment. At rest the letters are only "dimmer
   windows" (--fxft-ghost). fx/footer.js toggles .is-on. Art: templates/includes/footer_skyline.html -- */
.fxft-l{opacity:var(--fxft-ghost,.1);transition:opacity 1.5s ease-in}
.fxft-bl{opacity:0;transition:opacity 1.5s ease-in}
.fxft-l.is-on{opacity:.96;transition:opacity .1s ease-out;animation:fxft-key .34s linear}
.fxft-bl.is-on{opacity:.13;transition:opacity .3s ease-out}
@keyframes fxft-key{0%{opacity:var(--fxft-ghost,.1)}22%{opacity:.9}38%{opacity:.3}58%,100%{opacity:.96}}

/* -- the studio, out past the south edge; its light stays on late -- */
.fxft-studio circle{transition:opacity .8s}
.fxft-studio.fxft-late circle{opacity:.22}
.fxft-studio.fxft-warm circle{opacity:.3}

/* -- a line of italic that surfaces over the city -- */
.fxft-whisper{position:absolute;top:9%;left:50%;z-index:2;margin:0;transform:translate(-50%,4px);font:italic 400 15px/1.3 var(--fx-serif);letter-spacing:.02em;color:var(--fx-gold);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .6s,transform .6s var(--fx-ease-out)}
.fxft-whisper.fxft-on{opacity:1;transform:translate(-50%,0)}

/* -- footer links: a thin ember line draws in under the one you point at -- */
@media (hover:hover){
  .footer-main ul li a{position:relative}
  .footer-main ul li a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:linear-gradient(90deg,var(--fx-ember),var(--fx-gold));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--fx-ease-out)}
  .footer-main ul li a:hover::after,.footer-main ul li a:focus-visible::after{transform:scaleX(1)}
}

/* -- molten edge: the Forged band's lower edge is hot iron dripping into the footer -- */
.fxft-molten{position:absolute;left:0;right:0;bottom:0;height:22px;z-index:1;pointer-events:none}
.fxft-molten svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.fxft-molten__glow{opacity:.26}
.fxft-molten__rim{animation:fxft-heat 9s ease-in-out infinite}
@keyframes fxft-heat{50%{opacity:.62}}
.fxft-molten__heat{position:absolute;left:0;bottom:4px;width:360px;height:60px;border-radius:50%;background:radial-gradient(closest-side,rgba(249,221,154,.3),rgba(230,73,37,.2) 50%,rgba(230,73,37,0));mix-blend-mode:screen;transform:translateX(-360px);animation:fxft-drift 17s linear infinite}
@keyframes fxft-drift{to{transform:translateX(100vw)}}
@media (min-width:768px){.fxft-molten{height:28px}}

/* offscreen: every loop in the band and the skyline holds still */
.fxft-off *{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .fxft-molten__rim,.fxft-molten__heat,.fxft-rest .fxft-bird__glow,.fxft-flare .fxft-bird__glow{animation:none!important}
  .fxft-molten__heat{transform:translateX(34vw)}
  .fxft-l,.fxft-bl,.fxft-l.is-on,.fxft-bl.is-on{animation:none;transition:none}
  .fxft-bird,.fxft-bird__glow,.fxft-whisper,.fxft-studio circle{transition:none!important}
  .fxft-rest .fxft-bird:hover{transform:none}
}

/* SKYGEN:BEGIN */
/* ---- tower cranes (generated by skyline_gen.py): white-hot steel rises out of the street,
   cools as it climbs, and is set down on a roof with a weld flash ---- */
.fxft-cr .fxft-cab{transform-box:fill-box;transform-origin:50% 0}
.fxft-cr .fxft-beam{fill:#fff1c9;animation-name:fxft-cool;animation-timing-function:linear}
.fxft-cr .fxft-lc{opacity:0;animation-name:fxft-carry;animation-timing-function:steps(1,end)}
.fxft-cr .fxft-lc .fxft-glow{animation-name:fxft-cglow;animation-timing-function:linear}
.fxft-cr .fxft-lg{animation-name:fxft-ground;animation-timing-function:linear}
.fxft-cr .fxft-lg .fxft-beam{animation-name:fxft-gbeam}
.fxft-cr .fxft-lg .fxft-glow{animation-name:fxft-gglow}
.fxft-cr .fxft-lp{opacity:0;animation-name:fxft-placed;animation-timing-function:linear}
.fxft-cr .fxft-lp .fxft-beam{animation-name:fxft-pbeam}
.fxft-cr .fxft-lp .fxft-glow{animation-name:fxft-pglow}
.fxft-cr .fxft-weld{opacity:0;animation-name:fxft-weld;animation-timing-function:ease-out}
.fxft-cr .fxft-sp{animation-name:fxft-spark;animation-timing-function:ease-out}
@keyframes fxft-carry{0%{opacity:0}16%{opacity:1}65%{opacity:0}}
@keyframes fxft-cool{0%,16%{fill:#fff1c9}24%{fill:#f9dd9a}34%{fill:#f39a4a}46%{fill:#e64925}58%,100%{fill:#b4411f}}
@keyframes fxft-cglow{0%,16%{opacity:.9}34%{opacity:.55}50%{opacity:.25}64%,100%{opacity:.12}}
@keyframes fxft-ground{0%,15.9%{opacity:1}16%,83.9%{opacity:0}84%,100%{opacity:1}}
@keyframes fxft-gbeam{0%,16%{fill:#fff1c9}84%{fill:#7d3422}92%{fill:#e64925}100%{fill:#fff1c9}}
@keyframes fxft-gglow{0%,16%{opacity:.9}84%{opacity:0}100%{opacity:.9}}
@keyframes fxft-placed{0%,64.9%{opacity:0}65%{opacity:1}88%{opacity:1}96%,100%{opacity:0}}
@keyframes fxft-pbeam{0%,65%{fill:#b4411f}75%{fill:#7d3422}88%,100%{fill:#282a2b}}
@keyframes fxft-pglow{0%,65%{opacity:.5}80%,100%{opacity:0}}
@keyframes fxft-weld{0%,64.5%{opacity:0}65.5%{opacity:1}72%,100%{opacity:0}}
@keyframes fxft-spark{0%,65%{transform:none}72%,100%{transform:translate(var(--sx),var(--sy))}}
@media (prefers-reduced-motion:reduce){
  .fxft-cr *{animation:none!important}
  .fxft-cr .fxft-lc,.fxft-cr .fxft-lp,.fxft-cr .fxft-weld{opacity:0}
}

.fxft-cr--a *{animation-duration:21s;animation-delay:-3s;animation-iteration-count:infinite}
.fxft-cr--a .fxft-tro{animation-name:fxft-a-t;animation-timing-function:ease-in-out}
@keyframes fxft-a-t{0%,40%{transform:none}54%,78%{transform:translateX(55px)}92%,100%{transform:none}}
.fxft-cr--a .fxft-hk{transform:translateY(60px);animation-name:fxft-a-h;animation-timing-function:ease-in-out}
@keyframes fxft-a-h{0%{transform:translateY(60px)}14%,18%{transform:translateY(187px)}40%,54%{transform:translateY(60px)}64%,68%{transform:translateY(86px)}78%,100%{transform:translateY(60px)}}
.fxft-cr--a .fxft-cab{transform:scaleY(0.05);animation-name:fxft-a-c;animation-timing-function:ease-in-out}
@keyframes fxft-a-c{0%{transform:scaleY(0.05)}14%,18%{transform:scaleY(1)}40%,54%{transform:scaleY(0.05)}64%,68%{transform:scaleY(0.25)}78%,100%{transform:scaleY(0.05)}}

.fxft-cr--b *{animation-duration:26s;animation-delay:-14s;animation-iteration-count:infinite}
.fxft-cr--b .fxft-tro{animation-name:fxft-b-t;animation-timing-function:ease-in-out}
@keyframes fxft-b-t{0%,40%{transform:none}54%,78%{transform:translateX(45px)}92%,100%{transform:none}}
.fxft-cr--b .fxft-hk{transform:translateY(66px);animation-name:fxft-b-h;animation-timing-function:ease-in-out}
@keyframes fxft-b-h{0%{transform:translateY(66px)}14%,18%{transform:translateY(187px)}40%,54%{transform:translateY(66px)}64%,68%{transform:translateY(90px)}78%,100%{transform:translateY(66px)}}
.fxft-cr--b .fxft-cab{transform:scaleY(0.05);animation-name:fxft-b-c;animation-timing-function:ease-in-out}
@keyframes fxft-b-c{0%{transform:scaleY(0.05)}14%,18%{transform:scaleY(1)}40%,54%{transform:scaleY(0.05)}64%,68%{transform:scaleY(0.24)}78%,100%{transform:scaleY(0.05)}}
/* SKYGEN:END */