/* hero-fx.css - "living" hero pictures on the Spotlight (owner, 2026-11-09: Tomatl and the other veggie
 * bosses). A picture listed in data/hero_fx.json is built as
 *   <span class="hfx" style="--c:#ffb02e"><span class="hfx-in"><img ...><i class="hfx-eye" style="--x:46%;--y:44%;--s:9%"></i>...</span></span>
 * by engine/spotlight_sections.py: the picture breathes and sways a little, and each eye glows, pulses and
 * blinks. The eyes sit inside the moving layer, so they stay on the face. Reduced motion: still picture,
 * eyes glow without moving. */
.hfx{position:relative;display:block;overflow:hidden;line-height:0;container-type:size}
.hfx-in{position:absolute;inset:0;transform-origin:50% 85%;animation:hfxBreathe 4.6s ease-in-out infinite}
.hfx-in>img{display:block;width:100%;height:100%;object-fit:cover}
.hfx-eye{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:var(--ar,1);border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0 16%,var(--c) 34%,color-mix(in srgb,var(--c) 45%,transparent) 55%,transparent 72%);
  filter:drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 10px var(--c));
  animation:hfxGlow 2.4s ease-in-out infinite,hfxBlink 6.2s infinite}
.hfx-eye+.hfx-eye{animation-delay:-.4s,0s}
@keyframes hfxBreathe{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.035) rotate(-.8deg) translateY(-1.2%)}
  65%{transform:scale(1.02) rotate(.7deg) translateY(-.4%)}}
@keyframes hfxGlow{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes hfxBlink{0%,90%,100%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scaleY(1)}
  93%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scaleY(.08)}95%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scaleY(1)}
  97%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scaleY(.08)}}
/* smoke wisps: three soft puffs that rise from the spot, drift sideways (--d) and fade */
.hfx-smoke{position:absolute;left:var(--x);top:var(--y);width:1px;height:1px;pointer-events:none}
.hfx-smoke>i{position:absolute;left:0;top:0;width:clamp(12px,22cqw,56px);aspect-ratio:.75;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,250,245,.95) 0,rgba(225,220,220,.8) 28%,rgba(165,160,165,.4) 52%,transparent 70%);
  filter:blur(3px);transform:translate(-50%,-50%) scale(.3);opacity:0;animation:hfxSmoke 3.2s ease-out infinite}
.hfx-smoke>i:nth-child(2){animation-delay:-1.07s}.hfx-smoke>i:nth-child(3){animation-delay:-2.13s}
@keyframes hfxSmoke{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:1}
  60%{opacity:.75;transform:translate(calc(-50% + var(--d,0) * 60%),calc(-50% - 110%)) scale(1.1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--d,0) * 110%),calc(-50% - 210%)) scale(1.7)}}
/* the wrapper takes the picture's place in each layout */
.bpic>.hfx,.pf>.hfx,.pic>.hfx{width:100%;height:100%}
.pf>.hfx{border-radius:7px}
.mob>.hfx.hfx{grid-column:1;grid-row:span 4;width:52px;height:52px;border-radius:10px;background:#0a1120}
.mob.big>.hfx.hfx{width:64px;height:64px}
.mob>.hfx>.hfx-in>img{width:100%;height:100%;border-radius:0;background:none;vertical-align:top}   /* beats .mob span img (spotlight.css) */
@media (max-width:560px){.mob>.hfx.hfx{width:40px;height:40px}.mob.big>.hfx.hfx{width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){.hfx-in,.hfx-eye,.hfx-smoke>i{animation:none}.hfx-eye{opacity:.85}.hfx-smoke{display:none}}