/* =============================================================
   Enchanted Hawks - Bewegung
   -------------------------------------------------------------
   Diese Datei wird ueber
     media="(prefers-reduced-motion: no-preference)"
   eingebunden. Bei reduzierter Bewegung greift keine einzige Regel
   daraus, und der Browser laedt sie nur noch nebenbei statt
   rendersperrend. Das ersetzt die frueheren dreizehn verstreuten
   prefers-reduced-motion-Bloecke durch einen Mechanismus.
   (Nachgemessen: Chromium holt die Datei trotzdem, wendet sie aber
   nicht an - html traegt dann keine motion-Klasse.)

   Alles hier haengt zusaetzlich an html.motion. Die Klasse setzt
   atmosphere.js erst, wenn es wirklich laeuft - sonst bliebe bei
   abgeschaltetem JavaScript aufgedeckter Inhalt unsichtbar.

   Animiert wird ausschliesslich transform und opacity.
   ============================================================= */

/* ── Glut im Hintergrund ─────────────────────────────────── */

.backdrop-embers { transition: opacity 1.2s ease; }
html.motion .backdrop-embers { opacity: 1; }

/* Warmes Licht, das langsam wandert - der ruhende Gegenpol
   zu den aufsteigenden Funken. */
html.motion .backdrop-glow {
    background:
        radial-gradient(38rem 26rem at 20% 30%, rgba(232, 147, 58, .12), transparent 70%),
        radial-gradient(30rem 22rem at 78% 18%, rgba(194, 107, 28, .1), transparent 70%);
    animation: eh-drift 26s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes eh-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-3%, 2%, 0) scale(1.07); }
}

/* ── Einblenden beim Scrollen ────────────────────────────── */

html.reveal-ready [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(1.25rem);
}
html.reveal-ready [data-reveal-group].is-revealed > * {
    opacity: 1;
    transform: none;
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
/* Gestaffelt, damit die Karten nacheinander erscheinen */
html.reveal-ready [data-reveal-group].is-revealed > :nth-child(2) { transition-delay: .08s; }
html.reveal-ready [data-reveal-group].is-revealed > :nth-child(3) { transition-delay: .16s; }
html.reveal-ready [data-reveal-group].is-revealed > :nth-child(4) { transition-delay: .24s; }
html.reveal-ready [data-reveal-group].is-revealed > :nth-child(n+5) { transition-delay: .3s; }

/* ── Lichtschein, der dem Zeiger folgt ───────────────────── */

html.motion [data-spotlight] { --mx: 50%; --my: 50%; }
html.motion [data-spotlight]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(16rem 16rem at var(--mx) var(--my), rgba(242, 172, 85, .13), transparent 68%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
html.motion [data-spotlight]:hover::before { opacity: 1; }
html.motion [data-spotlight] { transition: transform .25s ease, border-color .25s ease; }
html.motion [data-spotlight]:hover { transform: translateY(-2px); border-color: rgba(226, 168, 90, .32); }

/* ── Wappen kippt leicht zum Zeiger ──────────────────────── */

html.motion [data-tilt] { perspective: 1000px; }
html.motion [data-tilt] > img {
    transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

/* ── Goldkante wandert einmal ueber den Hauptknopf ───────── */

html.motion .btn--gold { position: relative; overflow: hidden; }
html.motion .btn--gold::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%);
    transform: translateX(-120%);
    pointer-events: none;
}
html.motion .btn--gold:hover::after { animation: eh-sweep .7s ease-out; }
@keyframes eh-sweep {
    to { transform: translateX(120%); }
}

/* ── Countdown: Ziffernwechsel ───────────────────────────── */

html.motion .countdown-num.is-tick { animation: eh-tick .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes eh-tick {
    from { transform: translateY(-.35em); opacity: .35; }
    to   { transform: none; opacity: 1; }
}

/* ── Ring der Weiterleitungsseite laeuft leer ────────────── */

html.motion .go-counter-ring {
    stroke-dashoffset: 0;
    animation: eh-ring linear forwards; /* Dauer setzt main.js */
}
@keyframes eh-ring {
    to { stroke-dashoffset: 327; }
}

/* ── Zutritt verwehrt: dezent pulsierende Warnung ────────── */

html.motion .denied-siren { animation: eh-pulse 2.4s ease-in-out infinite; }
@keyframes eh-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.94); }
}

/* ── Dialoge fahren auf ──────────────────────────────────── */

html.motion .confirm-overlay:not([hidden]) { animation: eh-fade .18s ease-out; }
html.motion .confirm-overlay:not([hidden]) .confirm-box { animation: eh-rise .24s cubic-bezier(.22, 1, .36, 1); }
@keyframes eh-fade { from { opacity: 0; } }
@keyframes eh-rise { from { opacity: 0; transform: translateY(.75rem) scale(.98); } }

/* ── Seitenuebergang ─────────────────────────────────────── */

/*
 * Die Schaltregel @view-transition steht in style.css - sie wird nur
 * aus einem render-blockierenden Stylesheet heraus angewendet. Hier
 * liegt nur die Bewegung dazu, die bei reduzierter Bewegung entfaellt,
 * weil diese Datei dann nicht greift.
 */

/* Die alte Seite sinkt ab, die neue steigt auf. */
::view-transition-old(root) {
    animation: eh-page-out .26s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
    animation: eh-page-in .3s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes eh-page-out {
    to { opacity: 0; transform: translateY(-1.5rem) scale(.985); }
}
@keyframes eh-page-in {
    from { opacity: 0; transform: translateY(1.75rem) scale(.99); }
}

/* Der Glut-Wisch laeuft nicht ueber ein ::before am
   ::view-transition-new(root) - Pseudo-Elemente auf Uebergangs-Pseudos
   gibt es nicht (nachgemessen: die Animation taucht gar nicht auf).
   Stattdessen wischt ein eigenes Element beim Laden der neuen Seite
   einmal durchs Bild. Das hat zwei Vorteile: es braucht kein
   JavaScript, und es funktioniert auch in Browsern ohne
   dokumentuebergreifende Uebergaenge - dort ist es der ganze Effekt. */
.page-sweep {
    background: linear-gradient(105deg,
        transparent 32%,
        rgba(226, 121, 32, .42) 44%,
        rgba(246, 221, 163, .62) 50%,
        rgba(226, 121, 32, .42) 56%,
        transparent 68%);
    animation: eh-page-sweep .5s cubic-bezier(.4, 0, .2, 1) both;
    will-change: transform;
}
@keyframes eh-page-sweep {
    from { transform: translateX(-115%); }
    to   { transform: translateX(115%); }
}

/* ── Ankuendigungs-Banner beim ersten Laden ──────────────── */

html.motion .announce-banner { animation: eh-slide .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes eh-slide { from { transform: translateY(-100%); opacity: 0; } }