/* =========================================================
   Intro-Flug — eine durchgehende Kamerafahrt durch fünf Stationen

   Kein Video, keine Clips: echtes CSS-3D, die Kamera ist eine
   einzige Transformation. Keine Schnitte, also auch keine Nähte.
   Die Motive stammen aus der Sammlerwelt selbst — Kartenrücken,
   Sammelblätter, Booster, Energiesymbole — nicht aus Dekoration.

   Leistung: Nur .hf-world wird pro Bild angefasst (ein einziger
   transform-String). Alles darunter ist statisch positioniert und
   wird von der Grafikkarte zusammengesetzt.
   ========================================================= */

/* Der Flug liegt als Einblendung ÜBER dem Dashboard — das Dashboard
   selbst wird dadurch weder verschoben noch verändert. */
.hf{position:fixed;inset:0;z-index:400;opacity:1;
    transition:opacity .8s var(--ease)}
.hf.out{opacity:0;pointer-events:none}
.hf-lock,.hf-lock body{overflow:hidden}

.hf-stage{
  position:absolute;inset:0;overflow:hidden;
  perspective:1100px;perspective-origin:50% 47%;
  background:var(--bg);
  contain:strict;
}
/* Tiefennebel: die Ferne verliert sich im Seitengrund */
.hf-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(122% 80% at 50% 46%, transparent 30%, var(--bg) 78%),
    linear-gradient(180deg, var(--bg) 0%, transparent 14% 86%, var(--bg) 100%);
}

.hf-world{
  position:absolute;inset:0;transform-style:preserve-3d;
  will-change:transform;
}

.hf-station{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:translate3d(0,0,var(--sz,0px));
  opacity:var(--o,0);
  will-change:opacity;
}

/* ---------------------------------------------------------
   Karte — das Grundmotiv. Vorderseite mit Bildfeld, oder
   Rückseite mit Emblem und diagonalem Band.
   --------------------------------------------------------- */
.hf-card{
  position:absolute;width:96px;height:134px;margin:-67px 0 0 -48px;
  border-radius:7px;background:var(--bg2);
  box-shadow:0 0 0 1px var(--line2);
  transform:translate3d(var(--x,0px), var(--y,0px), var(--z,0px))
            rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));
  backface-visibility:hidden;
}
/* Vorderseite: Bildfeld, Namenszeile, Attackenzeilen — nur angedeutet */
.hf-card::before{
  content:"";position:absolute;left:7px;right:7px;top:15px;height:60px;border-radius:3px;
  background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line);
}
.hf-card::after{
  content:"";position:absolute;left:9px;top:5px;width:42%;height:4px;border-radius:2px;
  background:var(--line2);
  box-shadow:0 78px 0 -1px var(--line), 0 92px 0 -1px var(--line), 0 106px 0 -2px var(--line);
}
/* Rückseite: zentrales Emblem auf diagonalem Grund — die Rückseite
   eines Sammelkartenspiels, abstrahiert auf ihre Geometrie */
.hf-card.back{background:linear-gradient(148deg, var(--bg3) 0%, var(--bg2) 52%, var(--bg3) 100%)}
.hf-card.back::before{
  content:"";position:absolute;inset:0;margin:auto;width:46px;height:46px;
  border-radius:50%;top:0;left:0;right:0;bottom:0;
  border:1.5px solid var(--accent2);opacity:.55;background:none;box-shadow:none;
}
.hf-card.back::after{
  content:"";position:absolute;left:8px;right:8px;top:50%;height:1.5px;width:auto;
  border-radius:0;background:var(--accent2);opacity:.4;box-shadow:none;transform:translateY(-.75px);
}
/* Holo: ein feiner Lichtstreifen über der Kartenfläche */
.hf-card.holo{
  background:
    linear-gradient(112deg, transparent 26%, rgba(255,255,255,.13) 40%,
                    rgba(255,255,255,.05) 52%, transparent 66%),
    var(--bg3);
  box-shadow:0 0 0 1px var(--accent2);
}

/* --- Booster: schmaler, oben gecrimpt --- */
.hf-pack{
  position:absolute;width:84px;height:146px;margin:-73px 0 0 -42px;
  border-radius:4px;background:linear-gradient(160deg,var(--bg3),var(--bg2));
  box-shadow:0 0 0 1px var(--line2);
  transform:translate3d(var(--x,0px), var(--y,0px), var(--z,0px))
            rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));
}
.hf-pack::before{   /* Crimpstreifen oben */
  content:"";position:absolute;left:0;right:0;top:0;height:13px;
  background:repeating-linear-gradient(90deg,var(--line2) 0 2px,transparent 2px 5px);
  border-radius:4px 4px 0 0;opacity:.7;
}
.hf-pack::after{    /* Emblemfenster */
  content:"";position:absolute;left:50%;top:52%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:1.5px solid var(--accent2);opacity:.6;
}

/* --- Sammelblatt: das 3×3-Raster, das jeder Sammler kennt --- */
.hf-sheet{
  position:absolute;width:342px;height:462px;margin:-231px 0 0 -171px;
  border-radius:9px;background:var(--bg2);box-shadow:0 0 0 1px var(--line2);
  transform:translate3d(var(--x,0px), var(--y,0px), var(--z,0px)) rotateY(var(--ry,0deg));
  padding:12px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:9px;
}
.hf-sheet i{border-radius:4px;background:var(--bg3);box-shadow:inset 0 0 0 1px var(--line)}
.hf-sheet i.f{background:linear-gradient(150deg,var(--bg4),var(--bg3));
  box-shadow:inset 0 0 0 1px var(--accent2)}

/* --- Energiesymbole: die einzige Stelle mit Typfarben --- */
.hf-energy{
  position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:var(--e,#888);opacity:.85;
  box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--line2);
  transform:translate3d(var(--x,0px), var(--y,0px), var(--z,0px));
}

/* --- Poké-Ball-Geometrie, stark abstrahiert: Ring mit Äquator --- */
.hf-ring{
  position:absolute;width:var(--d,420px);height:var(--d,420px);
  margin:calc(var(--d,420px) / -2) 0 0 calc(var(--d,420px) / -2);
  border-radius:50%;border:1px solid var(--line2);
  transform:translate3d(var(--x,0px), var(--y,0px), var(--z,0px)) rotateX(var(--rx,0deg));
}
.hf-ring.eq::after{
  content:"";position:absolute;left:-1px;right:-1px;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent2),transparent);opacity:.75;
}
.hf-ring.core::before{
  content:"";position:absolute;inset:0;margin:auto;width:11%;height:11%;border-radius:50%;
  border:1.5px solid var(--accent2);opacity:.85;
}

/* --- Balken: Marktbewegung und Wertkurve --- */
.hf-bar{
  position:absolute;width:9px;border-radius:2px;background:var(--line2);
  transform:translate3d(var(--x,0px), var(--y,0px), var(--z,0px));
  height:var(--h,60px);margin-top:calc(var(--h,60px) / -2);
}
.hf-bar.on{background:var(--accent2);opacity:.9}

/* --- Bodenraster: gibt dem Raum Tiefe --- */
.hf-grid{
  position:absolute;left:50%;top:50%;width:2400px;height:2400px;margin:-1200px 0 0 -1200px;
  transform:translate3d(0,var(--y,340px),var(--z,0px)) rotateX(90deg);
  background:
    repeating-linear-gradient(0deg,  var(--line) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 140px);
  opacity:.6;
}

/* --- Beschriftung, mittig im Raum stehend --- */
.hf-plate{
  position:absolute;width:560px;margin:0 0 0 -280px;text-align:center;
  transform:translate3d(0, var(--y,-260px), var(--z,-180px));
}
.hf-plate .n{font-size:10px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--accent2);font-weight:500;display:block;margin-bottom:15px}
.hf-plate .t{font-size:clamp(27px,3.3vw,46px);font-weight:200;letter-spacing:.01em;
  line-height:1.1;color:var(--txt);display:block}
.hf-plate .s{font-size:13px;color:var(--muted);margin-top:15px;display:block;
  line-height:1.7;font-weight:300}

/* --- Stationsleiste am unteren Rand --- */
.hf-rail{
  position:absolute;left:0;right:0;bottom:36px;z-index:4;
  display:flex;gap:10px;justify-content:center;align-items:center;
  padding:0 20px;pointer-events:none;
}
.hf-rail span{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);
  padding:7px 0;position:relative;transition:color .4s var(--ease);min-width:78px;
  text-align:center;
}
.hf-rail span::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--line2);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.hf-rail span.on{color:var(--txt)}
.hf-rail span.on::after{transform:scaleX(1);background:var(--accent2)}

/* --- Überspringen und Fortschritt --- */
.hf-skip{
  position:absolute;top:26px;right:26px;z-index:5;
  background:transparent;border:1px solid var(--line2);border-radius:999px;
  padding:9px 18px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:color .4s var(--ease),border-color .4s var(--ease);
}
.hf-skip:hover{color:var(--txt);border-color:var(--txt)}
.hf-progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);z-index:5}
.hf-progress i{display:block;height:100%;background:var(--accent2);
  transform:scaleX(0);transform-origin:left;will-change:transform}

@media(max-width:860px){
  .hf-stage{perspective:820px}
  .hf-card{width:68px;height:95px;margin:-48px 0 0 -34px}
  .hf-card::before{height:42px;top:11px}
  .hf-card::after{box-shadow:0 55px 0 -1px var(--line), 0 65px 0 -1px var(--line), 0 75px 0 -2px var(--line)}
  .hf-pack{width:60px;height:104px;margin:-52px 0 0 -30px}
  .hf-sheet{width:228px;height:308px;margin:-154px 0 0 -114px;padding:8px;gap:6px}
  .hf-plate{width:300px;margin-left:-150px}
  .hf-rail{bottom:calc(20px + env(safe-area-inset-bottom,0px));gap:2px}
  .hf-rail span{min-width:0;font-size:8px;letter-spacing:.12em;padding:6px 5px}
}