/*
 * wp-content/themes/fanclub-base/assets/css/hero-intro.css
 * Hero Intro – eigenständiges Modul
 */

#fc-hero-intro {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: #000;
    font-family: 'Courier New', Courier, monospace;
    user-select: none;
    z-index: 1;
}

.fchi-bg-grid,.fchi-bg-dots,.fchi-bg-diag,.fchi-bg-vig {
    position: absolute; inset: 0; pointer-events: none;
}
.fchi-bg-grid {
    z-index: 1;
    background-image: linear-gradient(rgba(216,255,0,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(216,255,0,.038) 1px,transparent 1px);
    background-size: 52px 52px;
    animation: fchiGrid 12s linear infinite;
}
@keyframes fchiGrid { to { background-position: 52px 52px; } }

.fchi-bg-dots {
    z-index: 1;
    background-image: radial-gradient(circle,rgba(216,255,0,.06) 1px,transparent 1px);
    background-size: 24px 24px;
}
.fchi-bg-diag {
    z-index: 1;
    background: repeating-linear-gradient(-57deg,transparent 0,transparent 88px,rgba(216,255,0,.016) 88px,rgba(216,255,0,.016) 89px);
    animation: fchiDiag 24s linear infinite;
}
@keyframes fchiDiag { to { background-position: 176px 0; } }

.fchi-bg-vig {
    z-index: 2;
    background: radial-gradient(ellipse 110% 90% at 50% 50%,transparent 20%,rgba(0,0,0,.82) 100%);
}

.fchi-grain {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 48; mix-blend-mode: screen; opacity: .07;
    transition: opacity .3s ease;
}

.fchi-scanline {
    position: absolute; left: 0; right: 0; height: 1px; top: -2px;
    pointer-events: none; z-index: 9; background: rgba(216,255,0,.22);
    animation: fchiScan 2.6s ease-in-out infinite;
}
@keyframes fchiScan {
    0% { top:-2px;opacity:0; } 6% { opacity:1; } 94% { opacity:.55; } 100% { top:100%;opacity:0; }
}

.fchi-phase-1 {
    position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; transition: opacity .4s ease;
}
.fchi-cd-top {
    position: absolute; top: 16px; left: 20px; z-index: 15;
    font-size: clamp(9px,1.1vw,13px); font-weight: 700; letter-spacing: .55em;
    color: rgba(216,255,0,.55); text-transform: uppercase;
}
.fchi-cd-bot {
    position: absolute; bottom: 14px; right: 20px; z-index: 15;
    font-size: clamp(8px,.9vw,11px); font-weight: 700; letter-spacing: .5em;
    color: rgba(216,255,0,.32); text-transform: uppercase;
}
.fchi-cd-num {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 108vh; font-weight: 900; color: #D8FF00; text-align: center;
    line-height: .85; letter-spacing: -.06em; white-space: nowrap; transition: opacity .07s ease;
}

.fchi-phase-2 {
    position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; opacity: 0;
}
.fchi-word-1 {
    position: absolute; font-size: clamp(90px,18vw,220px); font-weight: 900;
    color: #fff; text-transform: uppercase; letter-spacing: -.03em; line-height: .88;
    top: 11%; left: 0; transform: translateX(-115%); will-change: transform;
    transition: transform .54s cubic-bezier(.1,1.45,.2,1);
}
.fchi-word-2 {
    position: absolute; font-size: clamp(140px,30vw,360px); font-weight: 900;
    color: #D8FF00; text-transform: uppercase; letter-spacing: -.05em; line-height: .82;
    bottom: 8%; right: 0; transform: translateX(115%); will-change: transform;
    transition: transform .5s cubic-bezier(.08,1.5,.18,1) .16s;
}
.fchi-word-3 {
    position: absolute; font-size: clamp(22px,5vw,60px); font-weight: 900;
    letter-spacing: .14em; color: rgba(255,255,255,.38); text-transform: uppercase;
    top: 50%; left: 50%; transform: translate(-50%,-50%) translateY(250%);
    text-align: center; line-height: 1.1; will-change: transform;
    transition: transform .6s cubic-bezier(.06,1.3,.16,1) .36s;
}

.fchi-phase-3 {
    position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
    align-items: center; justify-content: center; opacity: 0; pointer-events: none;
    transition: opacity .45s ease; overflow: hidden;
}
.fchi-logo-big {
    text-align: center; font-weight: 900;
    text-transform: uppercase; line-height: .83; letter-spacing: -.02em;
}
.fchi-logo-l1 { font-size: clamp(60px,22vw,320px); }
.fchi-logo-l2 { font-size: clamp(50px,20vw,300px); }
.fchi-logo-sub {
    font-size: clamp(8px,1.2vw,20px); font-weight: 700; letter-spacing: .56em;
    color: rgba(255,255,255,.3); text-transform: uppercase; margin-top: 18px;
}
.fchi-logo-bar { width: 32px; height: 2px; margin: 12px auto 0; }

.fchi-ring {
    position: absolute; border-radius: 50%; opacity: 0; z-index: 25; pointer-events: none;
}
.fchi-flash {
    position: absolute; inset: 0; opacity: 0; z-index: 55; pointer-events: none;
}
.fchi-crt {
    position: absolute; inset: 0; z-index: 50; pointer-events: none;
    background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.042) 3px,rgba(0,0,0,.042) 4px);
}

.fchi-corner { position: absolute; width: 20px; height: 20px; z-index: 60; pointer-events: none; }
.fchi-corner::before,.fchi-corner::after { content: ''; position: absolute; background: rgba(216,255,0,.35); }
.fchi-corner--tl { top:12px;left:12px; } .fchi-corner--tl::before { top:0;left:0;width:100%;height:1px; } .fchi-corner--tl::after { top:0;left:0;width:1px;height:100%; }
.fchi-corner--tr { top:12px;right:12px; } .fchi-corner--tr::before { top:0;right:0;width:100%;height:1px; } .fchi-corner--tr::after { top:0;right:0;width:1px;height:100%; }
.fchi-corner--bl { bottom:12px;left:12px; } .fchi-corner--bl::before { bottom:0;left:0;width:100%;height:1px; } .fchi-corner--bl::after { bottom:0;left:0;width:1px;height:100%; }
.fchi-corner--br { bottom:12px;right:12px; } .fchi-corner--br::before { bottom:0;right:0;width:100%;height:1px; } .fchi-corner--br::after { bottom:0;right:0;width:1px;height:100%; }

.fchi-btn {
    position: absolute; z-index: 170; background: transparent;
    border: 1px solid rgba(216,255,0,.2); color: rgba(216,255,0,.4);
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(8px,1vw,10px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    padding: 8px 14px; cursor: pointer; opacity: 0; transition: opacity .5s ease,border-color .2s,color .2s;
}
.fchi-btn:hover { border-color: #D8FF00; color: #D8FF00; }
.fchi-btn--skip   { bottom: 14px; right: 14px; }
.fchi-btn--replay { bottom: 14px; left: 14px; }

@media (prefers-reduced-motion: reduce) {
    .fchi-bg-grid,.fchi-bg-diag,.fchi-scanline { animation: none; }
}