/* =====================================================================
   home.css — Premium-Layer NUR für die Startseite (body.home)
   Wird NACH style.css geladen und überschreibt/erweitert nur dort.
   Berührt keine andere Seite des Portals.
   ===================================================================== */

body.home {
    /* ---- Erweiterte Palette (bestehende Farben bleiben Basis) ---- */
    --twitch:        #9147FF;
    --twitch-2:      #772ce8;
    --twitch-soft:   #b794ff;
    --twitch-glow:   rgba(145, 71, 255, 0.45);
    --grad-premium:  linear-gradient(135deg, #6441a5 0%, #9147FF 50%, #ff6b35 100%);
    --grad-purple:   linear-gradient(135deg, #9147FF, #772ce8);
    --ease:          cubic-bezier(.22, 1, .36, 1);
    --radius-lg:     22px;

    /* ---- Typografie ---- */
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: 0.1px;
}

body.home h1, body.home h2, body.home h3,
body.home .logo, body.home .hero-title,
body.home .streams-title, body.home .stream-label {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.4px;
}

/* =====================================================================
   AURORA-HINTERGRUND (zusätzlicher Lila-Akzent über dem bestehenden BG)
   ===================================================================== */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.aurora::before, .aurora::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.45;
    will-change: transform;
}
.aurora::before {
    width: 52vmax; height: 52vmax;
    background: radial-gradient(circle, var(--twitch-glow), transparent 70%);
    top: -12vmax; left: -10vmax;
    animation: auroraA 24s var(--ease) infinite alternate;
}
.aurora::after {
    width: 44vmax; height: 44vmax;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.28), transparent 70%);
    bottom: -14vmax; right: -8vmax;
    animation: auroraB 28s var(--ease) infinite alternate;
}
@keyframes auroraA { to { transform: translate3d(18vmax, 10vmax, 0) scale(1.2); } }
@keyframes auroraB { to { transform: translate3d(-14vmax, -8vmax, 0) scale(1.15); } }

/* =====================================================================
   HERO mit schwebender 3D-Logo-Form
   ===================================================================== */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(20px, 5vh, 60px) 16px clamp(12px, 2vh, 24px);
}
.hero-3d {
    position: relative;
    width: min(380px, 82vw);
    height: clamp(190px, 32vh, 300px);
}
.hero-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
/* Statischer Fallback (kein WebGL / reduced-motion): zeigt das Logo */
.hero-logo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-logo-fallback img {
    max-width: 60%;
    max-height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 14px 34px var(--twitch-glow));
    animation: floatY 6s var(--ease) infinite alternate;
}
@keyframes floatY { to { transform: translateY(-12px); } }

.hero-title {
    font-size: clamp(2.1rem, 7vw, 3.9rem);
    font-weight: 700;
    line-height: 1.03;
    margin-top: 4px;
    background: var(--grad-premium);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 9s linear infinite;
}
@keyframes shine { to { background-position: 220% center; } }

.hero-sub {
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: clamp(0.98rem, 2.3vw, 1.2rem);
    max-width: 40ch;
}

.hero-cta {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(145, 71, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease),
                background .4s var(--ease);
}
.hero-cta:hover {
    transform: translateY(-3px);
    background: var(--grad-purple);
    box-shadow: 0 12px 34px var(--twitch-glow);
}
.hero-cta .arrow { transition: transform .4s var(--ease); }
.hero-cta:hover .arrow { transform: translateY(3px); }

/* =====================================================================
   SEITEN-FADE beim Intro-Ende — Seite faded sanft rein
   ===================================================================== */
html.intro-playing .main-container,
html.intro-playing footer {
    opacity: 0;
    transform: translateY(12px);
}
html.intro-playing.intro-done .main-container,
html.intro-playing.intro-done footer {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}

/* =====================================================================
   SCROLL-REVEALS
   ===================================================================== */
/* Startwerte nur aktiv, wenn JS läuft (html.js) — sonst bleibt alles sichtbar */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    will-change: opacity, transform;
}
html.js [data-reveal="left"]  { transform: translateX(-46px); }
html.js [data-reveal="right"] { transform: translateX(46px); }
html.js [data-reveal="scale"] { transform: scale(.92); }
html.js [data-reveal].in-view { opacity: 1; transform: none; }

/* =====================================================================
   LOGIN-KARTE — Glas-Verfeinerung + Lila-Glow bei Fokus
   ===================================================================== */
body.home .login-form {
    position: relative;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(145, 71, 255, 0.08);
    transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}
/* Animierter Gradient-Rand (nur Rahmen via Mask) */
body.home .login-form::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(130deg, rgba(145, 71, 255, 0.65), rgba(255, 107, 53, 0.4), rgba(145, 71, 255, 0.65));
    background-size: 220% 220%;
    animation: cardBorder 9s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}
@keyframes cardBorder { to { background-position: 220% center; } }
/* Karteninhalt über dem Rahmen halten */
body.home .login-form > * { position: relative; z-index: 1; }

body.home .login-form:focus-within {
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.55), 0 0 44px var(--twitch-glow);
}

/* ---- "Aufladen" beim Login-Klick / smoothes Entladen bei Fehler ---- */
@keyframes loginCharge {
    0%   { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(145, 71, 255, 0); transform: scale(1); }
    100% { box-shadow: 0 30px 84px rgba(0, 0, 0, 0.55), 0 0 95px 16px rgba(145, 71, 255, 0.85); transform: scale(1.02); }
}
body.home .login-form.charging {
    animation: loginCharge 2.4s var(--ease) forwards;
}
/* Vorgeladener Zustand nach fehlgeschlagenem Login (vom Inline-Script gesetzt) -> kein Flash */
html.login-charged body.home .login-form {
    box-shadow: 0 30px 84px rgba(0, 0, 0, 0.55), 0 0 95px 16px rgba(145, 71, 255, 0.85);
    transform: scale(1.02);
}

body.home .form-input:focus {
    border-color: var(--twitch);
    box-shadow: 0 0 0 3px rgba(145, 71, 255, 0.25);
}

/* =====================================================================
   BUTTONS — animierter Gradient, atmender Glow, Shine-Sweep
   ===================================================================== */
body.home .btn-primary {
    background: linear-gradient(120deg, #9147FF, #772ce8, #9147FF);
    background-size: 220% auto;
    position: relative;
    overflow: hidden;
    animation: btnGradient 6s linear infinite, btnPulse 3.4s var(--ease) infinite;
}
@keyframes btnGradient { to { background-position: 220% center; } }
@keyframes btnPulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(145, 71, 255, 0.28); }
    50%      { box-shadow: 0 12px 32px rgba(145, 71, 255, 0.6); }
}
body.home .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(-130%);
    transition: transform .6s var(--ease);
}
body.home .btn-primary:hover::after { transform: translateX(130%); }
body.home .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 42px var(--twitch-glow) !important;
    animation-play-state: paused;
}

/* Twitch-Button: dezent atmender Glow */
body.home .btn-twitch {
    position: relative;
    animation: btnPulseSoft 4.2s var(--ease) infinite;
}
@keyframes btnPulseSoft {
    0%, 100% { box-shadow: 0 6px 18px rgba(119, 44, 232, 0.22); }
    50%      { box-shadow: 0 10px 26px rgba(119, 44, 232, 0.46); }
}
body.home .btn-twitch:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 42px rgba(145, 71, 255, 0.5) !important;
    animation-play-state: paused;
}

/* =====================================================================
   LINKS — animierter Underline-Effekt (im Inhalt)
   ===================================================================== */
body.home .hero-sub a,
body.home .login-form a:not(.btn) {
    position: relative;
    color: var(--twitch-soft);
    text-decoration: none;
    background-image: linear-gradient(var(--twitch), var(--twitch));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s var(--ease), color .3s var(--ease);
    padding-bottom: 2px;
}
body.home .hero-sub a:hover,
body.home .login-form a:not(.btn):hover {
    background-size: 100% 2px;
    color: #fff;
}

/* =====================================================================
   STREAM-CARDS — 3D-Tilt + Lila-Glow
   ===================================================================== */
body.home .streams-container { perspective: 1200px; }

body.home .twitch-stream {
    transform-style: preserve-3d;
    transition: transform .25s var(--ease), box-shadow .45s var(--ease),
                border-color .45s var(--ease);
    will-change: transform;
}
body.home .twitch-stream:hover {
    border-color: var(--twitch);
    box-shadow: 0 24px 54px var(--twitch-glow);
}
body.home .stream-header {
    background: var(--grad-purple);
}

body.home .streams-title {
    background: var(--grad-premium);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 9s linear infinite;
}

/* Footer auf der Startseite mitscrollen lassen (statt fixed) */
body.home footer {
    position: static !important;
    transform: none !important;
    left: auto !important;
    margin: 48px auto 24px;
}

/* =====================================================================
   INTRO-OVERLAY (Partikel sammeln sich zum Logo)
   ===================================================================== */
#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 42%, #1b1230 0%, #0c0c0f 70%);
    transition: opacity .7s var(--ease);
}
#intro-overlay.intro-hide {
    opacity: 0;
    pointer-events: none;
}
#intro-canvas { display: block; width: 100%; height: 100%; }

.intro-skip-btn {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 100000;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary, #d0d0d0);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: color .3s, border-color .3s, background .3s;
}
.intro-skip-btn:hover {
    color: #fff;
    border-color: var(--twitch);
    background: rgba(145, 71, 255, 0.18);
}

/* Wenn Intro übersprungen wird (Session/Reduced-Motion): Overlay + Hero nicht zeigen */
html.intro-skip #intro-overlay,
html.intro-skip .intro-skip-btn { display: none !important; }
/* Hero erscheint nie ohne laufendes Intro (verhindert Flash auf Folgebesuchen) */
html.intro-skip .hero { display: none !important; }

/* =====================================================================
   BARRIEREFREIHEIT — Bewegung reduzieren
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .aurora::before, .aurora::after,
    .hero-title, .streams-title,
    .hero-logo-fallback img,
    body.home .btn-primary, body.home .btn-twitch,
    body.home .login-form.charging,
    body.home .login-form::before { animation: none !important; }

    html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
   RESPONSIVE Feinschliff Startseite
   ===================================================================== */
@media (max-width: 768px) {
    .hero { padding-top: clamp(16px, 4vh, 32px); }
    .hero-3d { height: clamp(160px, 26vh, 230px); }
    body.home footer { margin-top: 32px; }
}

/* =====================================================================
   CHANNEL-ORBS — schwebende Twitch-Logos um die Anmeldung
   (Live-Badge, roter Glow, Hover-Reveal-Slide). Webflow-Style.
   ===================================================================== */

/* ---- Bühne: Logos links | Anmeldung | Logos rechts ---- */
body.home .main-container.has-orbs { justify-content: center; }

.login-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 5vw, 90px);
    min-height: 100dvh;
    width: 100%;
}
.login-stage .login-section {
    margin-bottom: 0;
    min-height: auto;
    flex: 0 1 440px;
}
.orb-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(48px, 11vh, 120px);
    flex: 0 0 auto;
}

/* ---- Einzelner Orb ---- */
.stream-orb {
    position: relative;
    display: flex;
    justify-content: center;
}

/* ---- Logo-Block mit Dauer-Schwebe-Animation ---- */
.orb-logo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: orb-float 6s var(--ease) infinite;
    animation-delay: var(--float-delay, 0s);
    will-change: transform;
}
@keyframes orb-float {
    0%, 100% { transform: translateY(0)     rotate(-1.4deg); }
    50%      { transform: translateY(-16px) rotate(1.4deg); }
}

/* ---- Avatar-Kreis ---- */
.orb-avatar {
    position: relative;
    z-index: 2;
    width: clamp(88px, 9vw, 132px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.14);
    background: var(--grad-purple);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.orb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}
.stream-orb.has-avatar .orb-avatar img { opacity: 1; }
.orb-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 2rem 'Space Grotesk', sans-serif;
    color: #fff;
    transition: opacity .4s ease;
}
.stream-orb.has-avatar .orb-fallback { opacity: 0; }

.stream-orb:hover .orb-avatar {
    transform: scale(1.06);
    border-color: var(--twitch);
    box-shadow: 0 20px 50px var(--twitch-glow);
}

.orb-name {
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    transition: color .3s ease;
}
.stream-orb:hover .orb-name { color: #fff; }

/* ---- Roter Glow im Hintergrund, wenn live ---- */
.orb-glow {
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translateX(-50%) scale(.9);
    width: clamp(150px, 15vw, 210px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 40, 40, .72) 0%, rgba(255, 40, 40, 0) 70%);
    filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity .5s ease;
}
.stream-orb.is-live .orb-glow {
    opacity: 1;
    animation: orb-glow-pulse 2.4s ease-in-out infinite;
}
@keyframes orb-glow-pulse {
    0%, 100% { transform: translateX(-50%) scale(.9);  opacity: .55; }
    50%      { transform: translateX(-50%) scale(1.16); opacity: 1; }
}
.stream-orb.is-live .orb-avatar { border-color: rgba(255, 60, 60, .85); }

/* ---- LIVE-Badge über dem Logo ---- */
.orb-badge {
    position: absolute;
    left: 50%;
    top: -16px;
    transform: translate(-50%, -6px);
    z-index: 6;
    padding: 3px 13px;
    border-radius: 6px;
    background: #e10600;
    color: #fff;
    font: 700 .72rem/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.4px;
    box-shadow: 0 6px 18px rgba(225, 6, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease, transform .4s var(--ease);
}
.stream-orb.is-live .orb-badge {
    opacity: 1;
    transform: translate(-50%, 0);
    animation: orb-live-pulse 1.8s ease-out infinite;
}
@keyframes orb-live-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(225, 6, 0, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(225, 6, 0, 0); }
    100% { box-shadow: 0 0 0 0   rgba(225, 6, 0, 0); }
}

/* ---- Hover-Reveal-Slide: Twitch-Player klappt zur Mitte auf ---- */
.orb-reveal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(560px, 48vw, 760px);
    aspect-ratio: 16 / 9;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
.side-left  .orb-reveal { left: 62%; }
.side-right .orb-reveal { right: 62%; }

.orb-reveal-inner {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #0e0e10;
    border: 1px solid var(--twitch);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(145, 71, 255, .25);
    opacity: 0;
    transition: transform .5s var(--ease), opacity .45s var(--ease);
}
.side-left  .orb-reveal-inner { transform: translateX(-28px) scale(.94); }
.side-right .orb-reveal-inner { transform: translateX(28px)  scale(.94); }
.orb-reveal-inner iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.stream-orb.revealed { z-index: 60; }
.stream-orb.revealed .orb-reveal { opacity: 1; pointer-events: auto; }
.stream-orb.revealed .orb-reveal-inner { transform: translateX(0) scale(1); opacity: 1; }

/* ---- Responsive: unter 980px Logos als Reihen unter dem Login ---- */
@media (max-width: 980px) {
    .login-stage {
        flex-direction: column;
        gap: 30px;
        min-height: auto;
        padding: 90px 0 50px;
    }
    .login-stage .login-section { order: -1; width: 100%; flex: none; }
    .orb-column {
        flex-direction: row;
        justify-content: center;
        gap: clamp(36px, 12vw, 70px);
    }
    .orb-reveal {
        left: 50% !important;
        right: auto !important;
        top: 100%;
        transform: translate(-50%, 10px);
        width: min(94vw, 680px);
    }
    .side-left .orb-reveal-inner,
    .side-right .orb-reveal-inner { transform: translateY(-22px) scale(.94); }
    .stream-orb.revealed .orb-reveal-inner { transform: translateY(0) scale(1); }
}

/* ---- Bewegung reduzieren ---- */
@media (prefers-reduced-motion: reduce) {
    .orb-logo { animation: none !important; }
    .stream-orb.is-live .orb-glow,
    .stream-orb.is-live .orb-badge { animation: none !important; }
}