/* KickstarterCash Club – Intro beim Öffnen der App: Logo, Lichtstrahlen, Glitzern (gehört zu intro.js)
   Dieselbe Datei steckt in der Telegram-App der Webseite (app/assets/) und im Member Support Bot
   (platform/assets/member-support/) – bei Änderungen beide gleich halten.
   Größen hängen an --kcc-vw/--kcc-vh/--kcc-vmin/--kcc-vmax (setzt intro.js aus der Größe des Intros) –
   so passt dasselbe Intro in die App (ganzer Bildschirm) und in die Vorschau im Admin (Handy-Rahmen).
   Zeiten hängen an --kcc-d (Dauer aus dem Admin). */
.kcc-intro {
    --kcc-d: 3s;
    --kcc-bg: 0, 0, 0;
    --kcc-a: 242, 184, 75;
    --kcc-a-hi: 248, 216, 147;
    --kcc-a-lo: 150, 114, 46;
    --kcc-vw: 1vw; --kcc-vh: 1vh; --kcc-vmin: 1vmin; --kcc-vmax: 1vmax;
    --kcc-cx: 50%; --kcc-cy: 45%;
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2147483000;
    overflow: hidden;
    background: rgb(var(--kcc-bg));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    opacity: 1;
    transition: opacity .45s ease;
    /* Sicherheitsnetz: falls etwas hängt, verschwindet das Intro spätestens 10 s nach seinem Ende von selbst */
    animation: kcc-intro-safety .5s ease calc(var(--kcc-d) + 10s) forwards;
}
.kcc-intro--preview { position: absolute; z-index: 5; }
.kcc-intro.is-out { opacity: 0; pointer-events: none; }
.kcc-intro *, .kcc-intro *::before, .kcc-intro *::after { box-sizing: border-box; }
@keyframes kcc-intro-safety { to { opacity: 0; visibility: hidden; } }

/* ---------- Lichtstrahlen und Funken: zwei Leinwände (zeichnet intro.js), Strahlen hinter, Funken vor dem Logo ---------- */
.kcc-intro__rays, .kcc-intro__sparks { position: absolute; top: 0; left: 0; pointer-events: none; }

/* Goldenes Leuchten hinter dem Logo */
.kcc-intro__glow {
    position: absolute; left: var(--kcc-cx); top: var(--kcc-cy);
    width: calc(var(--kcc-vmin) * 124); height: calc(var(--kcc-vmin) * 124);
    margin: calc(var(--kcc-vmin) * -62) 0 0 calc(var(--kcc-vmin) * -62);
    border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, rgba(var(--kcc-a-hi), .42) 0, rgba(var(--kcc-a), .16) 28%, rgba(var(--kcc-a), 0) 62%);
}
.is-ready .kcc-intro__glow {
    animation: kcc-intro-glow calc(var(--kcc-d) * .45) ease-out calc(var(--kcc-d) * .02) both,
               kcc-intro-pulse 2.6s ease-in-out calc(var(--kcc-d) * .5) infinite alternate;
}

/* Startblitz: heller Punkt + waagrechter Lichtstreif */
.kcc-intro__flare { position: absolute; left: var(--kcc-cx); top: var(--kcc-cy); width: 0; height: 0; pointer-events: none; }
.kcc-intro__flare::before {
    content: ''; position: absolute; opacity: 0;
    width: calc(var(--kcc-vmin) * 30); height: calc(var(--kcc-vmin) * 30);
    left: calc(var(--kcc-vmin) * -15); top: calc(var(--kcc-vmin) * -15);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 252, 242, 1) 0, rgba(255, 240, 208, .85) 9%, rgba(var(--kcc-a-hi), .35) 26%, rgba(var(--kcc-a), 0) 60%);
}
.kcc-intro__flare::after {
    content: ''; position: absolute; opacity: 0;
    width: calc(var(--kcc-vw) * 170); height: 2px;
    left: calc(var(--kcc-vw) * -85); top: -1px;
    background: linear-gradient(90deg, rgba(255, 245, 222, 0) 0, rgba(255, 245, 222, .3) 26%, rgba(255, 253, 245, 1) 50%, rgba(255, 245, 222, .3) 74%, rgba(255, 245, 222, 0) 100%);
    box-shadow: 0 0 9px 1px rgba(var(--kcc-a-hi), .55);
}
.is-ready .kcc-intro__flare::before { animation: kcc-intro-flare-dot calc(var(--kcc-d) * .34) ease-out both; }
.is-ready .kcc-intro__flare::after { animation: kcc-intro-flare-line calc(var(--kcc-d) * .34) ease-out both; }

/* Ringe (nur Stil „Pulsieren“) */
.kcc-intro__ring { display: none; }
.kcc-intro--pulse .kcc-intro__ring {
    display: block; position: absolute; left: var(--kcc-cx); top: var(--kcc-cy); opacity: 0; pointer-events: none;
    width: calc(var(--kcc-vmin) * 72); height: calc(var(--kcc-vmin) * 72);
    margin: calc(var(--kcc-vmin) * -36) 0 0 calc(var(--kcc-vmin) * -36);
    border-radius: 50%; border: 2px solid rgba(var(--kcc-a-hi), .85);
    box-shadow: 0 0 22px rgba(var(--kcc-a), .55), inset 0 0 22px rgba(var(--kcc-a), .35);
}
.is-ready.kcc-intro--pulse .kcc-intro__ring--1 { animation: kcc-intro-ring calc(var(--kcc-d) * .42) ease-out calc(var(--kcc-d) * .22) both; }
.is-ready.kcc-intro--pulse .kcc-intro__ring--2 { animation: kcc-intro-ring calc(var(--kcc-d) * .42) ease-out calc(var(--kcc-d) * .36) both; }

/* ---------- Logo und Schriftzug ---------- */
.kcc-intro__stage {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: calc(var(--kcc-vh) * 6) calc(var(--kcc-vw) * 6) calc(var(--kcc-vh) * 9);
    pointer-events: none;
}
.kcc-intro__logo { position: relative; flex: none; width: calc(var(--kcc-vw) * 68); max-width: 560px; }
.kcc-intro__mark { position: relative; width: 100%; height: 100%; opacity: 0; }
.kcc-intro__mark img { display: block; width: 100%; height: 100%; }
.kcc-intro__shine {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; display: none;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 40%, rgba(255, 250, 232, .92) 50%, rgba(255, 255, 255, 0) 60%) no-repeat;
    background-size: 260% 100%; background-position: 135% 0;
}
@supports ((-webkit-mask-size: 100% 100%) or (mask-size: 100% 100%)) {
    .kcc-intro.has-mask .kcc-intro__shine {
        display: block;
        -webkit-mask-image: var(--kcc-logo-url); mask-image: var(--kcc-logo-url);
        -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    }
}
.kcc-intro__text {
    margin-top: calc(var(--kcc-vmin) * 5);
    max-width: calc(var(--kcc-vw) * 88);
    text-align: center; opacity: 0; overflow-wrap: anywhere;
    font: 800 min(calc(var(--kcc-vmin) * 6.4), 34px)/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .06em;
    color: rgb(var(--kcc-a-hi));
    background: linear-gradient(100deg, rgb(var(--kcc-a-lo)) 0%, rgb(var(--kcc-a)) 30%, rgb(255, 249, 228) 46%, rgb(var(--kcc-a-hi)) 54%, rgb(var(--kcc-a)) 70%, rgb(var(--kcc-a-lo)) 100%);
    background-size: 260% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Zeitplan (Anteile der Dauer): Blitz 0–34 %, Logo 7–42 %, Glanz 42–68 %, Schriftzug 42–68 %, danach ruhiges „Atmen“ */
.is-ready .kcc-intro__logo { animation: kcc-intro-breathe 2.4s ease-in-out calc(var(--kcc-d) * .72) infinite alternate; }
.is-ready.kcc-intro--rise .kcc-intro__mark { animation: kcc-intro-rise calc(var(--kcc-d) * .34) cubic-bezier(.22, .8, .3, 1.1) calc(var(--kcc-d) * .07) both; }
.is-ready.kcc-intro--shine .kcc-intro__mark { animation: kcc-intro-softin calc(var(--kcc-d) * .3) ease-out calc(var(--kcc-d) * .04) both; }
.is-ready.kcc-intro--coin .kcc-intro__mark { animation: kcc-intro-coin calc(var(--kcc-d) * .46) cubic-bezier(.15, .75, .3, 1) calc(var(--kcc-d) * .05) both; }
.is-ready.kcc-intro--pulse .kcc-intro__mark { animation: kcc-intro-pop calc(var(--kcc-d) * .32) cubic-bezier(.3, .7, .35, 1) calc(var(--kcc-d) * .06) both; }
.is-ready.kcc-intro--pulse .kcc-intro__logo { animation: kcc-intro-beat 1.6s ease-in-out calc(var(--kcc-d) * .6) infinite; }

.is-ready .kcc-intro__shine { animation: kcc-intro-sweep calc(var(--kcc-d) * .26) ease-in-out calc(var(--kcc-d) * .42) both; }
.is-ready.kcc-intro--coin .kcc-intro__shine { animation-delay: calc(var(--kcc-d) * .52); }
/* Stil „Glanz“: zwei Lichtstreifen nacheinander */
.is-ready.kcc-intro--shine .kcc-intro__shine {
    animation: kcc-intro-sweep calc(var(--kcc-d) * .24) ease-in-out calc(var(--kcc-d) * .3) both,
               kcc-intro-sweep calc(var(--kcc-d) * .24) ease-in-out calc(var(--kcc-d) * .62) forwards;
}
.is-ready .kcc-intro__text {
    animation: kcc-intro-text calc(var(--kcc-d) * .26) ease-out calc(var(--kcc-d) * .42) both,
               kcc-intro-text-shine calc(var(--kcc-d) * .3) ease-in-out calc(var(--kcc-d) * .66) both;
}

/* „Bewegung reduzieren“ (Systemeinstellung): nur sanft ein- und ausblenden */
.kcc-intro.is-reduced .kcc-intro__glow,
.kcc-intro.is-reduced .kcc-intro__logo { animation: none !important; }
.kcc-intro.is-reduced .kcc-intro__glow { opacity: .8; }
.kcc-intro.is-reduced .kcc-intro__flare,
.kcc-intro.is-reduced .kcc-intro__ring,
.kcc-intro.is-reduced .kcc-intro__shine { display: none !important; }
.is-ready.kcc-intro.is-reduced .kcc-intro__mark { animation: kcc-intro-fadein calc(var(--kcc-d) * .3) ease-out both !important; }
.is-ready.kcc-intro.is-reduced .kcc-intro__text { animation: kcc-intro-fadein calc(var(--kcc-d) * .3) ease-out calc(var(--kcc-d) * .2) both !important; }

@keyframes kcc-intro-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes kcc-intro-glow { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes kcc-intro-pulse { from { opacity: 1; } to { opacity: .7; } }
@keyframes kcc-intro-flare-dot { 0% { opacity: 0; transform: scale(.15); } 30% { opacity: 1; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes kcc-intro-flare-line { 0% { opacity: 0; transform: scaleX(.05); } 30% { opacity: 1; transform: scaleX(.8); } 100% { opacity: 0; transform: scaleX(1.15); } }
@keyframes kcc-intro-rise {
    0% { opacity: 0; transform: scale(.6); -webkit-filter: blur(12px) brightness(1.8); filter: blur(12px) brightness(1.8); }
    55% { opacity: 1; -webkit-filter: blur(0) brightness(1.25); filter: blur(0) brightness(1.25); }
    78% { transform: scale(1.035); }
    100% { opacity: 1; transform: scale(1); -webkit-filter: none; filter: none; }
}
@keyframes kcc-intro-softin { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kcc-intro-coin {
    0% { opacity: 0; transform: perspective(900px) rotateY(-540deg) scale(.7); }
    18% { opacity: 1; }
    100% { opacity: 1; transform: perspective(900px) rotateY(0deg) scale(1); }
}
@keyframes kcc-intro-pop { 0% { opacity: 0; transform: scale(.2); } 45% { opacity: 1; transform: scale(1.12); } 72% { transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes kcc-intro-ring { 0% { opacity: 0; transform: scale(.25); } 15% { opacity: .9; } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes kcc-intro-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.06); } 28% { transform: scale(1); } 42% { transform: scale(1.04); } 70% { transform: scale(1); } }
@keyframes kcc-intro-breathe { from { transform: scale(1); } to { transform: scale(1.025); } }
@keyframes kcc-intro-sweep { 0% { opacity: 0; background-position: 135% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -35% 0; } }
@keyframes kcc-intro-text { from { opacity: 0; transform: translateY(14px); letter-spacing: .22em; } to { opacity: 1; transform: none; letter-spacing: .06em; } }
@keyframes kcc-intro-text-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }