/* Zuschauerseite – Grundgerüst + gemeinsame Effekte. Das Aussehen der Themes steht in themes.css. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--size);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

.page {
    position: relative;
    z-index: 1;
    max-width: 640px;
    overflow-x: clip;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top) + 32px) 22px calc(env(safe-area-inset-bottom) + 48px);
}

.intro { text-align: center; margin-bottom: 1.5em; position: relative; }
.intro h1 { font-family: var(--head-font); font-size: 1.8em; line-height: 1.15; margin: 0 0 .2em; }
.intro .sub { margin: 0; font-size: 1.2em; opacity: .8; }

.text p { margin: 0 0 1em; }

/* Abstand, damit die Karte erst nach dem Scrollen sichtbar wird */
.spacer {
    min-height: var(--spacer);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: .6em;
    padding-bottom: 2em;
}
.hint { opacity: .55; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

.hero { margin: 0 0 2.5em; text-align: center; }
.hero figcaption { margin-top: 1em; }
.after { margin-top: 1em; }
.footer { text-align: center; font-size: .85em; opacity: .85; margin-top: 2.5em; }
.footer p { margin: 0 0 .3em; }

/* Dekorations-Elemente: nur aktiv, wenn ein Theme sie gestaltet */
.progress, .bg-layer, .ornament, .chevron, .card-glow, .sparkles { display: none; }
.bg-layer { position: fixed; left: 0; right: 0; top: -15vh; bottom: -15vh; pointer-events: none; z-index: 0; }

/* Startbildschirm: Überschrift füllt den ersten Bildschirm */
.hero-full .intro {
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    margin-bottom: 0;
}
.hero-full .intro-chevron { position: absolute; bottom: 8px; left: 50%; margin-left: -14px; }

/* Fortschrittsbalken */
.fx-progress .progress {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20;
    transform-origin: 0 50%;
    transform: scaleX(var(--progress, 0));
    background: var(--accent);
}

/* Animierter Scroll-Pfeil */
.fx-chevron .chevron { display: block; width: 28px; height: 28px; opacity: .7; }
.chevron span {
    display: block; width: 16px; height: 16px; margin: 2px auto 0;
    border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    animation: chevron 1.8s ease-in-out infinite;
}
@keyframes chevron {
    0%, 100% { transform: translateY(0) rotate(45deg); opacity: .35; }
    50% { transform: translateY(8px) rotate(45deg); opacity: 1; }
}

/* Texte beim Scrollen einblenden */
.js .fx-text .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--delay, 0s);
}
.js .fx-text .reveal.in { opacity: 1; transform: none; }

/* ---------- Karte ---------- */
.card-stage {
    position: relative;
    width: var(--card-w);
    max-width: 74vw;
    margin: 0 auto;
    perspective: 1400px;
}
.card-flip { position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.card {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 250 / 350;
    border-radius: 5.6% / 4%;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
}
.card-back { display: none; }

/* Umdrehen: Rückseite zuerst, dreht sich beim Hinscrollen um */
.fx-flip .card-flip { transition: transform 1.1s cubic-bezier(.3, 1.3, .4, 1); }
.fx-flip .card-back,
.fx-flip .card-front { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fx-flip .card-back { display: block; }
.fx-flip .card-front { position: absolute; inset: 0; transform: rotateY(180deg); }
.fx-flip .card-stage.shown.has-card .card-flip { transform: rotateY(180deg); }

/* Auftauchen */
.js .fx-rise .card-flip {
    opacity: 0;
    transform: translateY(90px) rotate(-6deg) scale(.92);
    transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.js .fx-rise .card-stage.shown .card-flip { opacity: 1; transform: none; }

/* Heranzoomen */
.js .fx-zoom .card-flip {
    opacity: 0;
    transform: scale(.35) rotate(-14deg);
    transition: opacity .6s ease, transform 1s cubic-bezier(.3, 1.5, .5, 1);
}
.js .fx-zoom .card-stage.shown .card-flip { opacity: 1; transform: none; }

/* Leuchten hinter der Karte */
.card-glow {
    position: absolute; inset: -18%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--glow, rgba(255, 210, 120, .55)), transparent);
    opacity: 0;
    transition: opacity 1.2s ease .3s;
    z-index: -1;
}
.card-stage.shown.has-card .card-glow { opacity: 1; animation: pulse 3.5s ease-in-out 1.5s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .7; } }

/* Glitzer beim Aufdecken */
.fx-sparkle .sparkles { display: block; position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.sparkles i {
    position: absolute; left: -5px; top: -5px; width: 10px; height: 10px;
    background: var(--spark, #ffd76a);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    animation: spark 1.3s cubic-bezier(.15, .7, .3, 1) forwards;
    animation-delay: var(--d);
}
@keyframes spark {
    0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(var(--s)) rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}