:root {
    --bg-1: #140f18;
    --bg-2: #2a1a2e;
    --bg-3: #3b2338;
    --ink: #eefbff;
    --ink-soft: #b7e6f2;
    --ink-faint: rgba(183, 230, 242, 0.55);
    --accent-a: #f2b880;
    --accent-b: #c86b85;
    --accent-c: #7b6cf6;
    --aqua-1: #f0fdff;
    --aqua-2: #7de8ff;
    --aqua-3: #3cc5f0;
    --aqua-4: #4f8cf7;
    --glass: rgba(255, 255, 255, 0.055);
    --glass-border: rgba(255, 255, 255, 0.12);
    --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --script: "Great Vibes", "Snell Roundhand", "Apple Chancery", "Segoe Script", "Brush Script MT", cursive;
}

@font-face {
    font-family: "Great Vibes";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/great-vibes.woff2") format("woff2");
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg-1);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------
   Hintergrund-Szene
   ------------------------------------------------------------------ */
.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 20% 10%, var(--bg-3) 0%, transparent 60%),
        radial-gradient(100% 80% at 85% 90%, #1e2a3f 0%, transparent 55%),
        linear-gradient(160deg, var(--bg-1), var(--bg-2));
    animation: hue-drift 40s ease-in-out infinite alternate;
}

@keyframes hue-drift {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(-18deg); }
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    mix-blend-mode: screen;
    will-change: transform;
}

.orb--1 {
    width: 48vmax;
    height: 48vmax;
    top: -14vmax;
    left: -10vmax;
    background: radial-gradient(circle at 35% 35%, var(--accent-a), transparent 65%);
    animation: float-a 26s ease-in-out infinite;
}

.orb--2 {
    width: 42vmax;
    height: 42vmax;
    bottom: -16vmax;
    right: -8vmax;
    background: radial-gradient(circle at 60% 40%, var(--accent-b), transparent 65%);
    animation: float-b 32s ease-in-out infinite;
}

.orb--3 {
    width: 30vmax;
    height: 30vmax;
    top: 40%;
    left: 55%;
    background: radial-gradient(circle at 50% 50%, var(--accent-c), transparent 65%);
    opacity: 0.35;
    animation: float-c 38s ease-in-out infinite;
}

@keyframes float-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); }
}

@keyframes float-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-9vmax, -7vmax, 0) scale(1.08); }
}

@keyframes float-c {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33%      { transform: translate3d(-6vmax, 5vmax, 0) scale(0.92); }
    66%      { transform: translate3d(5vmax, -6vmax, 0) scale(1.1); }
}

/* Sternenstaub: zwei Ebenen feiner Punkte, die langsam driften */
.stars {
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,0.75) 50%, transparent 51%),
        radial-gradient(1px 1px at 38% 65%, rgba(255,255,255,0.55) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 72% 30%, rgba(255,255,255,0.65) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,0.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 55% 88%, rgba(255,255,255,0.6) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 20% 85%, rgba(255,255,255,0.45) 50%, transparent 51%),
        radial-gradient(1px 1px at 65% 10%, rgba(255,255,255,0.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.5) 50%, transparent 51%);
    background-size: 900px 900px;
    opacity: 0.5;
    animation: stars-drift 120s linear infinite;
}

@keyframes stars-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-200px, -150px, 0); }
}

/* Feines Filmkorn für Tiefe */
.grain {
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Bühne & Karte
   ------------------------------------------------------------------ */
.stage {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    perspective: 1200px;
}

.card {
    position: relative;
    width: min(100%, 44rem);
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 5vw, 4rem);
    text-align: center;
    border-radius: 28px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 30px 80px -30px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: card-in 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Wandernder Lichtschein entlang der Kartenkante */
.card__glow {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0 70%,
        rgba(125, 232, 255, 0.0) 72%,
        rgba(125, 232, 255, 0.9) 82%,
        rgba(79, 140, 247, 0.9) 90%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: glow-spin 9s linear infinite;
}

@property --angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes glow-spin {
    to { --angle: 360deg; }
}

/* ------------------------------------------------------------------
   Typografie
   ------------------------------------------------------------------ */
.eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Der Name in Schreibschrift mit sanftem Türkis-Schimmer */
.name {
    margin: 0 0 0.9rem;
    font-family: var(--script);
    font-weight: 400;
    font-size: clamp(4.2rem, 13vw, 8rem);
    line-height: 1;
    padding: 0.1em 0.25em 0.15em;
    background-image: linear-gradient(110deg, var(--aqua-1) 0%, var(--aqua-2) 40%, var(--aqua-3) 75%, var(--aqua-4) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(125, 232, 255, 0.35));
    animation: reveal-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, name-shimmer 7s ease-in-out infinite;
    animation-delay: var(--d, 0s), 0s;
}

@keyframes name-shimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

.headline {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.word {
    display: inline-block;
    white-space: nowrap;
}

/* Gradient pro Buchstabe, per --i/--n so verschoben, dass er über die ganze Zeile läuft
   (background-clip: text auf dem h1 würde durch die transformierten Kinder nicht durchscheinen) */
.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.6em) rotateX(-60deg);
    transform-origin: 50% 100%;
    background-image: linear-gradient(100deg, var(--aqua-1) 0%, var(--aqua-2) 40%, var(--aqua-3) 75%, var(--aqua-4) 100%);
    background-size: calc(var(--n, 1) * 100%) 100%;
    background-position: calc(var(--i, 0) / max(var(--n, 2) - 1, 1) * 100%) 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: char-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes char-in {
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

.divider {
    width: 4.5rem;
    height: 1px;
    margin: 2rem auto;
    background: linear-gradient(90deg, transparent, var(--aqua-2), transparent);
    transform-origin: center;
}

.lead {
    margin: 0;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.6;
    color: var(--ink-soft);
}

/* Drei sanft pulsierende Punkte hinter dem Satz */
.dots {
    display: inline-flex;
    gap: 0.22em;
    margin-left: 0.3em;
    vertical-align: baseline;
}

.dots i {
    width: 0.28em;
    height: 0.28em;
    border-radius: 50%;
    background: var(--aqua-2);
    box-shadow: 0 0 8px rgba(125, 232, 255, 0.6);
    animation: dot-pulse 1.6s ease-in-out infinite;
}

.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50%      { opacity: 1; transform: translateY(-0.18em); }
}

.foot {
    margin-top: 2rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}

/* ------------------------------------------------------------------
   Einblend-Helfer
   ------------------------------------------------------------------ */
.reveal {
    opacity: 0;
    animation: reveal-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
}

@keyframes reveal-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   Barrierefreiheit: Bewegung reduzieren
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .char,
    .reveal {
        opacity: 1;
        transform: none;
    }

    .card {
        transform: none;
    }
}