:root{
    --bg1:#09051a;
    --bg2:#140a33;
    --pink:#ff4fd8;
    --hotpink:#ff1fbf;
    --gold:#ffd27a;
}

*{box-sizing:border-box}
body{
    margin:0;
    height:100vh;
    overflow:hidden;
    user-select:none;
    color:#fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    background:
            radial-gradient(900px 500px at 50% 25%, rgba(255,79,216,.18) 0%, transparent 55%),
            radial-gradient(1200px 700px at 60% 80%, rgba(255,210,122,.10) 0%, transparent 55%),
            radial-gradient(1200px 700px at 30% 90%, rgba(255,31,191,.12) 0%, transparent 55%),
            linear-gradient(180deg, var(--bg2), var(--bg1));
    background-size: 120% 120%, 140% 140%, 140% 140%, 100% 100%;
    background-position: 50% 20%, 60% 80%, 30% 90%, 0 0;
}

/* deutlichere “Flight”-Farbänderung + Speed */
body.flight{
    animation: bgFly 740ms linear infinite;
    filter: hue-rotate(0deg) saturate(1.12);
}
@keyframes bgFly{
    0%   { background-position: 50% 20%, 60% 80%, 30% 90%, 0 0; filter: hue-rotate(0deg) saturate(1.12); }
    50%  { filter: hue-rotate(18deg) saturate(1.22); }
    100% { background-position: 50% 72%, 60% 130%, 30% 170%, 0 0; filter: hue-rotate(40deg) saturate(1.25); }
}

/* ===== Parallax-Layer (Stars + Streaks) ===== */
.parallax{
    position:absolute; inset:0;
    pointer-events:none;
    z-index:1;
    opacity:0;
    transition: opacity 350ms ease;
    mix-blend-mode: screen;
}
body.flight .parallax{ opacity:1; }

.stars{
    background-image:
            radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.55) 40%, transparent 41%),
            radial-gradient(1.0px 1.0px at 32% 42%, rgba(255,210,122,.55) 40%, transparent 41%),
            radial-gradient(1.1px 1.1px at 58% 24%, rgba(255,79,216,.55) 40%, transparent 41%),
            radial-gradient(1.0px 1.0px at 74% 66%, rgba(255,255,255,.50) 40%, transparent 41%),
            radial-gradient(1.2px 1.2px at 86% 36%, rgba(255,210,122,.45) 40%, transparent 41%),
            radial-gradient(1.1px 1.1px at 44% 78%, rgba(255,31,191,.45) 40%, transparent 41%),
            radial-gradient(1.0px 1.0px at 20% 70%, rgba(255,255,255,.42) 40%, transparent 41%),
            radial-gradient(1.0px 1.0px at 66% 86%, rgba(255,255,255,.38) 40%, transparent 41%);
    filter: blur(.2px);
    animation: starsDrift 360ms linear infinite;
    opacity:.95;
}
@keyframes starsDrift{
    0%{ transform: translateY(0); }
    100%{ transform: translateY(18px); }
}

.streaks{
    background-image:
            linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 45%, rgba(255,255,255,0) 100%),
            linear-gradient(90deg, rgba(255,79,216,0) 0%, rgba(255,79,216,.16) 45%, rgba(255,79,216,0) 100%),
            linear-gradient(90deg, rgba(255,210,122,0) 0%, rgba(255,210,122,.14) 45%, rgba(255,210,122,0) 100%);
    background-size: 260px 1px, 320px 1px, 380px 1px;
    background-repeat: repeat;
    background-position: 0 0, 120px 160px, 40px 320px;
    transform: rotate(90deg);
    opacity:.0;
}
body.flight .streaks{
    opacity:.85;
    animation: warp 220ms linear infinite;
    filter: blur(.15px);
}
@keyframes warp{
    0%{ transform: rotate(90deg) translateY(0); }
    100%{ transform: rotate(90deg) translateY(26px); }
}

.birds{
    position:absolute; inset:0;
    pointer-events:none;
    z-index:2;
    opacity:0;
    transition: opacity 300ms ease;
}
body.flight .birds{ opacity:.65; }

.bird{
    position:absolute;
    width:34px; height:18px;
    background-size: contain;
    background-repeat:no-repeat;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
    opacity:.75;
    animation: birdFly 2.2s linear infinite;
}
.bird.b1{ top:18%; left:-10%; animation-duration: 2.6s; transform: scale(1.05); }
.bird.b2{ top:34%; left:-18%; animation-duration: 3.2s; transform: scale(.9); opacity:.55; }
.bird.b3{ top:26%; left:-14%; animation-duration: 2.9s; transform: scale(.75); opacity:.45; }

@keyframes birdFly{
    0%{ transform: translateX(0) translateY(0) scale(1); }
    100%{ transform: translateX(140vw) translateY(-4vh) scale(1); }
}

.dust{
    position:absolute; inset:0;
    background-image:
            radial-gradient(1.4px 1.4px at 10% 20%, rgba(255,255,255,.55) 40%, transparent 41%),
            radial-gradient(1.1px 1.1px at 70% 30%, rgba(255,210,122,.55) 40%, transparent 41%),
            radial-gradient(1px 1px at 30% 70%, rgba(255,79,216,.55) 40%, transparent 41%),
            radial-gradient(1.3px 1.3px at 90% 60%, rgba(255,255,255,.45) 40%, transparent 41%),
            radial-gradient(1px 1px at 55% 80%, rgba(255,210,122,.45) 40%, transparent 41%),
            radial-gradient(1px 1px at 45% 40%, rgba(255,31,191,.45) 40%, transparent 41%);
    opacity:.9;
    filter: blur(.2px);
    pointer-events:none;
    animation: shimmer 3.5s infinite ease-in-out alternate;
    z-index:1;
}
@keyframes shimmer { to { opacity:.6; filter: blur(.35px); } }

canvas{
    position:absolute; inset:0;
    pointer-events:none;
    z-index:3;
}

.stage{
    position:relative;
    width:100%;
    height:100%;
    z-index:4;
    top: -45px;
}
.stage.shake{ animation: camShake 180ms ease-in-out infinite; }
@keyframes camShake{
    0%{ transform: translate(0,0); }
    25%{ transform: translate(1px, -1px); }
    50%{ transform: translate(-1px, 1px); }
    75%{ transform: translate(1px, 1px); }
    100%{ transform: translate(0,0); }
}

.hint{
    position:absolute;
    left:50%;
    bottom:14px;
    transform: translateX(-50%);
    font-size:14px;
    opacity:.78;
    letter-spacing:.02em;
    z-index:10;
    text-align:center;
    padding:0 14px;
}

.rocket-wrap{
    position:absolute;
    left:50%;
    bottom:36px;
    transform: translateX(-50%);
    width:460px;
    height:240px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.rocket-shell{
    position:absolute;
    left:50%;
    bottom:0;
    transform: translateX(-50%);
    width:120px;
    height:165px;
    z-index:5;
    opacity:1;
    will-change: transform, opacity;
    transition: transform 700ms cubic-bezier(.18,.74,.2,1);
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.62));
}

.rocket{ position:absolute; inset:0; width:120px; height:165px; }
.rocket.wobble{ animation: wobble 240ms ease-in-out infinite; }
@keyframes wobble{
    0%{ transform: rotate(-1deg) translateY(0); }
    50%{ transform: rotate(1.2deg) translateY(-1px); }
    100%{ transform: rotate(-1deg) translateY(0); }
}

.rocket .body{
    position:absolute;
    inset:24px 20px 22px 20px;
    background: linear-gradient(180deg, #fff, #d7e0f2);
    border-radius: 60px 60px 30px 30px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset;
}
.rocket .nose{
    position:absolute;
    top:0; left:50%;
    transform: translateX(-50%);
    width:78px; height:76px;
    background: linear-gradient(180deg, var(--pink), #b10f8a);
    border-radius: 78px 78px 32px 32px;
    box-shadow: 0 0 22px rgba(255,79,216,.18);
}
.rocket .band{
    position:absolute;
    left:50%; top:76px;
    transform: translateX(-50%);
    width:70px; height:10px;
    border-radius:10px;
    background: linear-gradient(90deg, rgba(255,210,122,.25), rgba(255,210,122,.8), rgba(255,79,216,.35));
    opacity:.95;
}
.rocket .window{
    position:absolute;
    top:60px; left:50%;
    transform: translateX(-50%);
    width:28px; height:28px;
    background: radial-gradient(circle at 30% 30%, #ffeefb, #7bc7ff);
    border-radius:50%;
    box-shadow: 0 0 0 4px rgba(0,0,0,.18), 0 0 16px rgba(255,79,216,.22);
}
.rocket .fin{
    position:absolute;
    bottom:22px;
    width:32px; height:48px;
    background: linear-gradient(180deg, var(--pink), #9a0c77);
    border-radius: 12px 12px 12px 20px;
}
.rocket .fin.left{ left:6px; transform: skewX(-10deg); }
.rocket .fin.right{ right:6px; transform: skewX(10deg) scaleX(-1); }

.rocket .flame{
    position:absolute;
    left:50%;
    bottom:2px;
    transform: translateX(-50%);
    width:28px; height:40px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 25%, #fff 0%, var(--gold) 25%, #ff8a00 58%, var(--hotpink) 78%, transparent 82%);
    opacity:0;
    filter: blur(.15px);
}
.rocket.launching .flame{ opacity:1; animation: flame 110ms infinite alternate; }
@keyframes flame{ to { transform: translateX(-50%) scaleY(1.18) } }

/* START Button */
.start-wrap{
    position:absolute;
    left:50%;
    bottom: 220px;
    transform: translateX(-50%);
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    pointer-events:auto;
    transition: opacity 260ms ease, transform 260ms ease;
}
.start-wrap.hide{
    opacity:0;
    transform: translateX(-50%) translateY(10px) scale(.98);
    pointer-events:none;
}

.start-btn{
    appearance:none;
    border:none;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color: rgba(25,10,35,.95);
    background: linear-gradient(90deg, #fff2c7 0%, #ffd27a 25%, #f6b84c 55%, #ffe2a7 75%, #ffd27a 100%);
    box-shadow:
            0 0 22px rgba(255,210,122,.35),
            0 0 46px rgba(255,79,216,.18),
            0 12px 20px rgba(0,0,0,.35);
    position:relative;
    cursor:pointer;
}

.start-btn::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:999px;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(255,79,216,.25), transparent 55%);
    opacity:.65;
    filter: blur(2px);
    pointer-events:none;
}

.start-btn::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-30%;
    width:60%;
    height:180%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 45%, transparent 100%);
    opacity:0;
    pointer-events:none;
}

.start-btn.shine::after{ animation: shine 1.35s ease-in-out infinite; }
@keyframes shine{
    0%{ transform: translateX(-80%) rotate(18deg); opacity:0; }
    35%{ opacity:.55; }
    70%{ opacity:0; }
    100%{ transform: translateX(260%) rotate(18deg); opacity:0; }
}

.start-btn:disabled{
    opacity:.55;
    cursor:default;
    filter: grayscale(.2);
}

/* Countdown */
.countdown{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    z-index:40;
    font-weight:900;
    font-size: clamp(64px, 14vw, 160px);
    letter-spacing:.05em;
    opacity:0;
    pointer-events:none;
    text-shadow:
            0 0 18px rgba(255,210,122,.25),
            0 0 42px rgba(255,79,216,.22);
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.countdown.show{ opacity:1; }
.countdown.pulse{ animation: pulse 260ms ease-in-out; }
@keyframes pulse{
    0%{ transform: translate(-50%,-50%) scale(1); }
    50%{ transform: translate(-50%,-50%) scale(1.06); }
    100%{ transform: translate(-50%,-50%) scale(1); }
}

/* Overlay */
.overlay{
    position:absolute; inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:18px;
    opacity:0;
    pointer-events:none;
    text-align:center;
    z-index:30;
    padding:24px;
}
.overlay.show{ opacity:1; animation: softIn 700ms ease-out; }
@keyframes softIn{
    0%{ transform: translateY(6px) scale(.98); opacity:0 }
    100%{ transform: translateY(0) scale(1); opacity:1 }
}

/* ======= SVG ALS IMAGE ======= */
.firetext-img{
    width:min(920px, 92vw);
    height:auto;
    display:block;
    /* zusätzlicher Glow wie vorher */
    filter:
            drop-shadow(0 0 16px rgba(255,79,216,.25))
            drop-shadow(0 0 40px rgba(255,31,191,.18));
    opacity:0;
    transform: translateY(8px) scale(.985);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.firetext-img.show{
    opacity:1;
    transform: translateY(0) scale(1);
}

.dateplace{
    font-size: clamp(16px, 2.2vw, 22px);
    letter-spacing:.08em;
    text-transform:uppercase;
    color: rgba(255,255,255,.9);
    text-shadow: 0 0 18px rgba(255,79,216,.18);
    opacity:0;
    transform: translateY(8px);
}
.dateplace.show{
    opacity:1;
    transform: translateY(0);
    transition: all 700ms ease-out;
    transition-delay: 600ms;
}

.glitter{
    position:absolute;
    width:240px; height:240px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(255,210,122,.22), transparent 60%);
    filter: blur(1px);
    opacity:.0;
    pointer-events:none;
    z-index:29;
    mix-blend-mode: screen;
}
.glitter.on{ opacity:.9; animation: floaty 2.8s infinite ease-in-out alternate; }
@keyframes floaty{ to { transform: translate(18px,-12px) scale(1.05) } }

.boom{
    position:absolute;
    width:10px; height:10px;
    border-radius:50%;
    left:50%; top:33%;
    transform: translate(-50%,-50%) scale(0);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,210,122,1) 30%, rgba(255,79,216,.95) 55%, rgba(255,79,216,0) 70%);
    box-shadow: 0 0 90px rgba(255,79,216,.28);
    opacity:0;
    z-index:28;
    pointer-events:none;
}
.boom.show{ opacity:1; animation: boom 700ms ease-out forwards; }
@keyframes boom{
    0%{ transform: translate(-50%,-50%) scale(0); opacity:1; }
    100%{ transform: translate(-50%,-50%) scale(52); opacity:0; }
}