/* ═══════════════════════════════════════════════════════════
   AEROVANIA — Interactive inner-page heroes
   Photo collage (option B from _preview/hero-visual-options.html,
   picked 2026-10-24) replacing the old line drawings, which are
   kept in _backup_hero_scene/hero-drawings/.
   With js/hero-fx.js: the three photos drift apart slightly with
   the mouse, a hovered photo comes to the front, and a soft light
   follows the pointer. Colours and fonts are the site's --fx-* tokens.
   ═══════════════════════════════════════════════════════════ */

section.fx-hero.hx-on { isolation: isolate; }
.hx-spot {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(440px circle at var(--mx, 70%) var(--my, 40%), color-mix(in srgb, var(--fx-cyan) 13%, transparent), transparent 70%);
}
.hx-on:hover .hx-spot { opacity: 1; }

/* ── collage ── */
.hv-collage { position: relative; height: 520px; }
.hv-collage .hvc {
  position: absolute; display: block; overflow: hidden; border: 4px solid var(--fx-solid); border-radius: 18px;
  background: var(--fx-bg2); box-shadow: 0 24px 50px -26px rgba(7, 17, 31, .5);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.hv-collage .hvc img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv-collage .p1 { left: 0; top: 40px; width: 58%; height: 330px; z-index: 1;
  transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px)) rotate(-2deg); }
.hv-collage .p2 { right: 0; top: 0; width: 46%; height: 250px; z-index: 2;
  transform: translate(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 16px)) rotate(2.5deg); }
.hv-collage .p3 { right: 8%; bottom: 0; width: 50%; height: 230px; z-index: 3;
  transform: translate(calc(var(--px, 0) * 30px), calc(var(--py, 0) * 22px)) rotate(-1deg); }
.hv-collage .hvc:hover { z-index: 5; transform: scale(1.03) rotate(0deg); box-shadow: 0 30px 60px -24px rgba(7, 17, 31, .55); }

/* fact card */
.hv-chip {
  position: absolute; left: 6%; bottom: 40px; z-index: 4; display: flex; align-items: center; gap: 10px; max-width: 300px;
  padding: 12px 16px; border: 1px solid var(--fx-line); border-radius: 14px; background: var(--fx-solid);
  box-shadow: 0 12px 30px -14px rgba(7, 17, 31, .35); font: 400 14px/1.35 var(--fx-sans); color: var(--fx-tx);
  animation: hvBob 6s ease-in-out infinite;
}
.hv-chip b { display: block; font-size: 15px; font-weight: 600; color: var(--fx-ink); }
.hv-chip i {
  flex: none; display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border-radius: 10px;
  font: 700 14px/1 var(--fx-sans); font-style: normal; color: var(--fx-cyan); background: color-mix(in srgb, var(--fx-cyan) 12%, var(--fx-solid));
}
.hv-chip.o i { color: var(--fx-orange); background: color-mix(in srgb, var(--fx-orange) 12%, var(--fx-solid)); }
@keyframes hvBob { 50% { transform: translateY(-8px); } }

@media (max-width: 980px) {
  .hv-collage { height: 440px; max-width: 620px; }
  .hv-collage .p1 { height: 280px; }
  .hv-collage .p2 { height: 210px; }
  .hv-collage .p3 { height: 200px; }
}
@media (max-width: 560px) {
  .hv-collage { height: 340px; }
  .hv-collage .p1 { top: 30px; width: 64%; height: 200px; }
  .hv-collage .p2 { width: 48%; height: 150px; }
  .hv-collage .p3 { right: 4%; width: 56%; height: 150px; }
  .hv-chip { left: 0; bottom: 18px; max-width: 250px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-collage .hvc { transition: none; }
  .hv-chip { animation: none; }
}