/* ═══════════════════════════════════════════════════════════════
   BATMAN THEME
   Gotham City — Dark. Yellow. Armored.
   ══════════════════════════════════════════════════════════════ */

/* ─── CSS Variables ───────────────────────────────────────────── */
[data-theme="batman"] {
    --color-accent:         #f5c518;
    --color-highlight:      #f5c518;
    --color-secondary:      #b8940a;
    --color-success:        #4ade80;
    --color-bg-primary:     #000000;
    --color-bg-secondary:   #0a0a0e;
    --color-bg-tertiary:    #141419;
    --color-bg-elevated:    #1c1c24;
    --color-text-primary:   #e8e8e0;
    --color-text-secondary: #8a8a9a;
    --color-text-muted:     #55556a;
    --glow-accent:    0 0 10px rgba(245,197,24,1), 0 0 28px rgba(245,197,24,.65), 0 0 60px rgba(245,197,24,.25);
    --glow-highlight: 0 0 10px rgba(245,197,24,1), 0 0 28px rgba(245,197,24,.65);
    --glow-secondary: 0 0 10px rgba(184,148,10,.85), 0 0 24px rgba(184,148,10,.45);
    --glow-success:   0 0 8px rgba(74,222,128,.5), 0 0 16px rgba(74,222,128,.25);
    --font-display: 'Bebas Neue', 'Impact', condensed, sans-serif;
}

/* ─── Background: Batman ───────────────────────────────────────── */

[data-theme="batman"] .grid-background {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        url("assets/batman-background.jpg") center center / cover no-repeat;
}

[data-theme="batman"] .grid-background::before {
    display: none;
}

[data-theme="batman"] .grid-background::after {
    display: none;
}

[data-theme="batman"] .scan-lines {
    display: none;
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
[data-theme="batman"] .sidebar {
    border-right: 2px solid rgba(245,197,24,.4);
    box-shadow: 2px 0 32px rgba(245,197,24,.12), 4px 0 60px rgba(245,197,24,.05);
    position: relative;
}

[data-theme="batman"] .sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(245,197,24,.7) 30%, rgba(245,197,24,.7) 70%, transparent 100%);
    animation: batBorderPulse 3s ease-in-out infinite;
}

[data-theme="batman"] .sidebar-header {
    border-bottom: 1px solid rgba(245,197,24,.18);
    background: linear-gradient(180deg, rgba(245,197,24,.05) 0%, transparent 100%);
}

[data-theme="batman"] .sidebar-footer {
    border-top: 1px solid rgba(245,197,24,.12);
}

@keyframes batBorderPulse {
    0%, 100% { opacity: .3; filter: none; }
    50%       { opacity: 1;  filter: drop-shadow(0 0 6px rgba(245,197,24,.9)); }
}

/* ─── Logo ────────────────────────────────────────────────────── */
[data-theme="batman"] .logo-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 3px;
    animation: batLogoGlow 6s ease-in-out infinite;
}

[data-theme="batman"] .logo-accent {
    color: var(--color-accent);
}

[data-theme="batman"] .subtitle {
    font-family: var(--font-display);
    letter-spacing: 4px;
    font-size: 0.6rem;
    color: rgba(245,197,24,.6);
}

@keyframes batLogoGlow {
    0%, 60%, 100% { filter: drop-shadow(0 0 4px rgba(245,197,24,.4)); }
    68%            { filter: drop-shadow(0 0 22px rgba(245,197,24,1)) drop-shadow(0 0 50px rgba(245,197,24,.7)) drop-shadow(0 0 90px rgba(245,197,24,.35)); }
    78%            { filter: drop-shadow(0 0 5px rgba(245,197,24,.55)); }
}

/* ─── Collection items ────────────────────────────────────────── */
[data-theme="batman"] .collections-list .collection-btn {
    position: relative;
    border-left: 2px solid transparent;
    transition: border-color .2s, background .2s, transform .15s;
}

[data-theme="batman"] .collections-list .collection-btn:hover {
    border-left-color: rgba(245,197,24,.5);
    background: rgba(245,197,24,.04);
    transform: translateX(3px);
}

[data-theme="batman"] .collections-list .collection-btn.active {
    border-left-color: var(--color-accent);
    background: rgba(245,197,24,.07);
    color: var(--color-accent);
}

[data-theme="batman"] .collections-list .collection-btn.active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--color-accent);
    box-shadow: var(--glow-highlight);
}

[data-theme="batman"] .settings-btn:hover {
    border-color: rgba(245,197,24,.5);
    background: rgba(245,197,24,.06);
    color: var(--color-accent);
}

/* ─── Section headers & titles ────────────────────────────────── */
[data-theme="batman"] .section-header {
    border-bottom: 1px solid rgba(245,197,24,.15);
    position: relative;
}

[data-theme="batman"] .section-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245,197,24,.5) 25%,
        rgba(245,197,24,.9) 50%,
        rgba(245,197,24,.5) 75%,
        transparent 100%
    );
    animation: sectionUnderlineSweep 3.5s ease-in-out infinite;
}

@keyframes sectionUnderlineSweep {
    0%, 100% { opacity: .35; transform: scaleX(.7); transform-origin: center; }
    50%       { opacity: 1;   transform: scaleX(1); }
}

[data-theme="batman"] .section-title {
    font-family: var(--font-display);
    letter-spacing: 2px;
    font-size: 1rem;
    color: var(--color-text-primary);
}

[data-theme="batman"] .collection-title {
    font-family: var(--font-display);
    letter-spacing: 3px;
}

/* ─── Link cards ──────────────────────────────────────────────── */
[data-theme="batman"] .link-card {
    border: 1px solid rgba(255,255,255,.06);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    transition: border-color .2s, box-shadow .2s, transform .15s;
    background-image: radial-gradient(circle, rgba(245,197,24,.022) 1px, transparent 1px);
    background-size: 14px 14px;
}

[data-theme="batman"] .link-card:hover {
    border-color: rgba(245,197,24,.9);
    box-shadow: 0 0 12px rgba(245,197,24,1), 0 0 32px rgba(245,197,24,.5), 0 0 70px rgba(245,197,24,.18);
    transform: translateY(-3px);
}

/* ─── Buttons ─────────────────────────────────────────────────── */
[data-theme="batman"] .btn-primary {
    background: var(--color-accent);
    color: #000;
    border: none;
    font-weight: 700;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

[data-theme="batman"] .btn-primary:hover {
    background: #ffd700;
    box-shadow: 0 0 14px rgba(245,197,24,1), 0 0 35px rgba(245,197,24,.55), 0 0 70px rgba(245,197,24,.2);
    transform: translateY(-2px);
}

[data-theme="batman"] .btn-secondary {
    border: 2px solid rgba(245,197,24,.4);
    color: var(--color-accent);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

[data-theme="batman"] .btn-secondary:hover {
    border-color: var(--color-accent);
    background: rgba(245,197,24,.08);
    box-shadow: var(--glow-secondary);
}

[data-theme="batman"] .btn-icon {
    border: 1px solid rgba(245,197,24,.18);
}

[data-theme="batman"] .btn-icon:hover {
    border-color: rgba(245,197,24,.7);
    background: rgba(245,197,24,.08);
    box-shadow: 0 0 10px rgba(245,197,24,.4);
    transform: scale(1.08);
}

[data-theme="batman"] .btn-danger {
    border: 2px solid rgba(239,68,68,.35);
}

[data-theme="batman"] .btn-danger:hover {
    background: rgba(239,68,68,.1);
    border-color: #ef4444;
}

[data-theme="batman"] .btn-text-danger:hover {
    color: #ef4444;
}

/* ─── Modal ───────────────────────────────────────────────────── */
[data-theme="batman"] .modal-backdrop {
    background: rgba(0,0,0,.92);
    backdrop-filter: blur(8px);
}

[data-theme="batman"] .modal-content {
    border: 1px solid rgba(245,197,24,.28);
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 0 40px rgba(245,197,24,.12), 0 20px 60px rgba(0,0,0,.85);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

[data-theme="batman"] .modal-header {
    background: linear-gradient(180deg, rgba(245,197,24,.06) 0%, transparent 100%);
    border-bottom: 1px solid rgba(245,197,24,.18);
}

[data-theme="batman"] .modal-title {
    font-family: var(--font-display);
    letter-spacing: 2px;
    font-size: 1.1rem;
    color: var(--color-accent);
}

/* ─── Forms ───────────────────────────────────────────────────── */
[data-theme="batman"] .form-input {
    border-color: rgba(245,197,24,.18);
}

[data-theme="batman"] .form-input:focus {
    border-color: var(--color-accent);
    box-shadow: var(--glow-accent);
    outline: none;
}

[data-theme="batman"] .form-label {
    color: var(--color-text-secondary);
    letter-spacing: .5px;
}

/* ─── Loading spinner ─────────────────────────────────────────── */
[data-theme="batman"] .loading-spinner {
    border-top-color: var(--color-accent);
    border-right-color: rgba(245,197,24,.3);
    border-bottom-color: rgba(245,197,24,.1);
    border-left-color: rgba(245,197,24,.2);
    box-shadow: var(--glow-accent);
}

/* ─── Scrollbar ───────────────────────────────────────────────── */
[data-theme="batman"] ::-webkit-scrollbar-track {
    background: #000;
}

[data-theme="batman"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-accent), var(--color-secondary));
    border-radius: 2px;
}

[data-theme="batman"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
    box-shadow: var(--glow-accent);
}

/* ─── Settings ────────────────────────────────────────────────── */
[data-theme="batman"] .settings-section-title {
    font-family: var(--font-display);
    letter-spacing: 2px;
    font-size: 1rem;
    color: var(--color-accent);
}

[data-theme="batman"] .settings-section {
    border-color: rgba(245,197,24,.12);
}

[data-theme="batman"] .theme-card {
    border-color: rgba(245,197,24,.2);
}

[data-theme="batman"] .theme-card:hover {
    border-color: rgba(245,197,24,.5);
}

[data-theme="batman"] .theme-card.active {
    border-color: var(--color-accent);
    box-shadow: var(--glow-highlight);
}

[data-theme="batman"] .theme-card.active .theme-card-label {
    color: var(--color-accent);
}

/* ─── Settings: batman theme preview card (visible in all themes) ─ */
.theme-preview-batman {
    background: #000;
    position: relative;
    overflow: hidden;
}

.theme-preview-batman::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 80% at 72% 22%, rgba(245,197,24,.22) 0%, transparent 70%);
    pointer-events: none;
}

.theme-preview-batman .tp-sidebar {
    background: #0a0a0e;
    border-right: 1px solid rgba(245,197,24,.4);
}

.theme-preview-batman .tp-bar {
    background: rgba(245,197,24,.12);
    border: 1px solid rgba(245,197,24,.35);
}

.theme-preview-batman .tp-card {
    background: #1c1c24;
    border: 1px solid rgba(245,197,24,.2);
    clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
}

/* ─── Login page ──────────────────────────────────────────────── */
[data-theme="batman"] .login-box {
    border: 1px solid rgba(245,197,24,.22);
    border-top: 3px solid var(--color-accent);
    box-shadow: 0 0 40px rgba(245,197,24,.1), 0 20px 60px rgba(0,0,0,.85);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

[data-theme="batman"] .login-box .login-subtitle {
    font-family: var(--font-display);
    letter-spacing: 4px;
    font-size: 0.6rem;
    color: rgba(245,197,24,.6);
}

[data-theme="batman"] .login-btn {
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

/* ─── Batman Intro: 10s cinematic boot sequence ───────────────── */

#batman-intro {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: all;
    overflow: hidden;
    background: #000;
}

/* Shared: fullscreen absolute layers */
#batman-intro .bi-grain,
#batman-intro .bi-thunder,
#batman-intro .bi-lightning,
#batman-intro .bi-signal,
#batman-intro .bi-stamp,
#batman-intro .bi-flash,
#batman-intro .bi-vignette {
    position: absolute;
    inset: 0;
}

/* ── GRAIN: old-film analogue noise texture ── */
#batman-intro .bi-grain {
    inset: -80px;
    mix-blend-mode: overlay;
    opacity: 0;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='256' height='256' filter='url(%23n)' opacity='0.45'/></svg>");
    background-size: 256px 256px;
    animation:
        biGrainAppear 0.7s ease 0.9s forwards,
        biGrainShift  0.6s steps(6) 0.9s 16 alternate;
}

@keyframes biGrainAppear {
    to { opacity: 0.25; }
}

@keyframes biGrainShift {
    0%   { transform: translate(0px,   0px);  }
    17%  { transform: translate(-28px, 18px); }
    34%  { transform: translate(20px, -28px); }
    51%  { transform: translate(-18px,-22px); }
    68%  { transform: translate(25px,  14px); }
    85%  { transform: translate(-14px, 26px); }
    100% { transform: translate(18px, -14px); }
}

/* ── THUNDER: subtle yellow pre-glow ── */
#batman-intro .bi-thunder {
    opacity: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245,197,24,.08) 0%, transparent 100%);
    animation: biThunder 0.6s ease 1.8s;
}

@keyframes biThunder {
    0%  { opacity: 0; }
    40% { opacity: 1; }
    100%{ opacity: 0; }
}

/* ── LIGHTNING: white flash, double-flicker ── */
#batman-intro .bi-lightning {
    opacity: 0;
    background: #fff;
    animation: biLightning 0.42s ease 2.1s;
}

@keyframes biLightning {
    0%  { opacity: 0;    }
    8%  { opacity: 0.92; }
    22% { opacity: 0.18; }
    38% { opacity: 0.88; }
    55% { opacity: 0.08; }
    70% { opacity: 0.62; }
    100%{ opacity: 0;    }
}

/* ── SKYLINE: Gotham City rises from below ── */
#batman-intro .bi-skyline {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'><rect x='0' y='175' width='68' height='125' fill='%230a0a12'/><rect x='8' y='154' width='52' height='25' fill='%230a0a12'/><rect x='19' y='133' width='30' height='24' fill='%230a0a12'/><rect x='82' y='72' width='54' height='228' fill='%230d0d18'/><rect x='90' y='50' width='38' height='26' fill='%230d0d18'/><rect x='99' y='30' width='20' height='24' fill='%230d0d18'/><line x1='109' y1='30' x2='109' y2='8' stroke='%230d0d18' stroke-width='4'/><rect x='150' y='192' width='85' height='108' fill='%230a0a12'/><rect x='160' y='172' width='65' height='24' fill='%230a0a12'/><rect x='172' y='155' width='42' height='20' fill='%230a0a12'/><rect x='252' y='32' width='76' height='268' fill='%230c0c18'/><rect x='262' y='10' width='56' height='26' fill='%230c0c18'/><rect x='274' y='0' width='32' height='14' fill='%230c0c18'/><rect x='342' y='168' width='72' height='132' fill='%230a0a12'/><rect x='352' y='148' width='52' height='24' fill='%230a0a12'/><rect x='428' y='112' width='42' height='188' fill='%230d0d18'/><rect x='436' y='92' width='26' height='24' fill='%230d0d18'/><rect x='443' y='74' width='12' height='22' fill='%230d0d18'/><rect x='484' y='248' width='50' height='52' fill='%230a0a12'/><rect x='548' y='260' width='44' height='40' fill='%23090910'/><rect x='607' y='268' width='36' height='32' fill='%23090910'/><rect x='658' y='250' width='48' height='50' fill='%230a0a12'/><rect x='722' y='108' width='44' height='192' fill='%230d0d18'/><rect x='730' y='88' width='28' height='24' fill='%230d0d18'/><rect x='737' y='70' width='14' height='22' fill='%230d0d18'/><rect x='780' y='162' width='74' height='138' fill='%230a0a12'/><rect x='790' y='142' width='54' height='24' fill='%230a0a12'/><rect x='870' y='30' width='78' height='270' fill='%230c0c18'/><rect x='880' y='8' width='58' height='26' fill='%230c0c18'/><rect x='892' y='0' width='34' height='12' fill='%230c0c18'/><rect x='964' y='188' width='88' height='112' fill='%230a0a12'/><rect x='974' y='168' width='68' height='24' fill='%230a0a12'/><rect x='987' y='150' width='42' height='22' fill='%230a0a12'/><rect x='1068' y='78' width='52' height='222' fill='%230d0d18'/><rect x='1076' y='56' width='36' height='26' fill='%230d0d18'/><rect x='1085' y='36' width='18' height='24' fill='%230d0d18'/><line x1='1094' y1='36' x2='1094' y2='12' stroke='%230d0d18' stroke-width='4'/><rect x='1134' y='172' width='66' height='128' fill='%230a0a12'/><rect x='1143' y='150' width='48' height='26' fill='%230a0a12'/><rect x='91' y='84' width='6' height='4' fill='%23f5c518' opacity='0.65'/><rect x='106' y='84' width='6' height='4' fill='%23f5c518' opacity='0.4'/><rect x='121' y='84' width='6' height='4' fill='%23f5c518' opacity='0.7'/><rect x='91' y='106' width='6' height='4' fill='%23f5c518' opacity='0.45'/><rect x='121' y='106' width='6' height='4' fill='%23f5c518' opacity='0.55'/><rect x='106' y='128' width='6' height='4' fill='%23f5c518' opacity='0.35'/><rect x='263' y='44' width='6' height='4' fill='%23f5c518' opacity='0.7'/><rect x='278' y='44' width='6' height='4' fill='%23f5c518' opacity='0.5'/><rect x='293' y='44' width='6' height='4' fill='%23f5c518' opacity='0.65'/><rect x='308' y='44' width='6' height='4' fill='%23f5c518' opacity='0.4'/><rect x='263' y='68' width='6' height='4' fill='%23f5c518' opacity='0.5'/><rect x='293' y='68' width='6' height='4' fill='%23f5c518' opacity='0.7'/><rect x='308' y='68' width='6' height='4' fill='%23f5c518' opacity='0.35'/><rect x='278' y='92' width='6' height='4' fill='%23f5c518' opacity='0.55'/><rect x='308' y='92' width='6' height='4' fill='%23f5c518' opacity='0.45'/><rect x='881' y='42' width='6' height='4' fill='%23f5c518' opacity='0.65'/><rect x='896' y='42' width='6' height='4' fill='%23f5c518' opacity='0.45'/><rect x='912' y='42' width='6' height='4' fill='%23f5c518' opacity='0.7'/><rect x='927' y='42' width='6' height='4' fill='%23f5c518' opacity='0.4'/><rect x='881' y='65' width='6' height='4' fill='%23f5c518' opacity='0.5'/><rect x='912' y='65' width='6' height='4' fill='%23f5c518' opacity='0.6'/><rect x='881' y='90' width='6' height='4' fill='%23f5c518' opacity='0.55'/><rect x='896' y='90' width='6' height='4' fill='%23f5c518' opacity='0.35'/><rect x='927' y='90' width='6' height='4' fill='%23f5c518' opacity='0.5'/><rect x='1078' y='90' width='6' height='4' fill='%23f5c518' opacity='0.6'/><rect x='1092' y='90' width='6' height='4' fill='%23f5c518' opacity='0.4'/><rect x='1106' y='90' width='6' height='4' fill='%23f5c518' opacity='0.65'/><rect x='1078' y='112' width='6' height='4' fill='%23f5c518' opacity='0.45'/><rect x='1106' y='112' width='6' height='4' fill='%23f5c518' opacity='0.5'/><rect x='437' y='122' width='6' height='4' fill='%23f5c518' opacity='0.6'/><rect x='450' y='140' width='6' height='4' fill='%23f5c518' opacity='0.45'/><rect x='437' y='158' width='6' height='4' fill='%23f5c518' opacity='0.55'/><rect x='731' y='120' width='6' height='4' fill='%23f5c518' opacity='0.6'/><rect x='745' y='140' width='6' height='4' fill='%23f5c518' opacity='0.4'/><rect x='731' y='158' width='6' height='4' fill='%23f5c518' opacity='0.55'/><rect x='0' y='296' width='1200' height='4' fill='%23f5c518' opacity='0.12'/></svg>");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translateY(100%);
    animation: biSkylineRise 1.9s cubic-bezier(0.12, 0, 0.32, 1) 2.8s forwards;
}

@keyframes biSkylineRise {
    to { transform: translateY(0); }
}

/* ── BAT SIGNAL: image fades in from upper area ── */
#batman-intro .bi-signal {
    opacity: 0;
    background-image: url("assets/bat-signal.jpg");
    background-position: 60% 0%;
    background-repeat: no-repeat;
    background-size: 29% auto;
    mix-blend-mode: screen;
    animation: biSignalIn 2.0s ease 4.5s forwards;
}

@keyframes biSignalIn {
    0%  { opacity: 0;    }
    25% { opacity: 0.5;  }
    60% { opacity: 0.85; }
    100%{ opacity: 1;    }
}

/* ── BATMAN STAMP: text slams onto screen ── */
#batman-intro .bi-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: biStampIn 1.05s cubic-bezier(0.05, 0.85, 0.2, 1) 6.5s forwards;
}

#batman-intro .bi-stamp-img {
    width: clamp(180px, 42vw, 520px);
    height: auto;
    display: block;
    filter:
        drop-shadow(0 0 28px rgba(245,197,24,1))
        drop-shadow(0 0 65px rgba(245,197,24,.75))
        drop-shadow(0 0 130px rgba(245,197,24,.35));
    animation: biStampShake 0.42s ease 7.1s;
}

@keyframes biStampIn {
    0%  { opacity: 0; transform: scale(4.5) perspective(900px) rotateX(25deg); filter: blur(28px); }
    10% { opacity: 0.9; }
    55% { transform: scale(1.04) perspective(900px) rotateX(-1deg); filter: blur(1px); }
    75% { transform: scale(0.97); filter: blur(0); }
    100%{ opacity: 1;  transform: scale(1); filter: blur(0); }
}

@keyframes biStampShake {
    0%  { transform: translate(0,    0);    }
    14% { transform: translate(-7px, 5px);  }
    28% { transform: translate(7px, -6px);  }
    43% { transform: translate(-5px, 7px);  }
    57% { transform: translate(6px, -4px);  }
    71% { transform: translate(-4px, 4px);  }
    86% { transform: translate(3px, -3px);  }
    100%{ transform: translate(0,    0);    }
}

/* ── YELLOW FLASH: Concept C — hard gele klap ── */
#batman-intro .bi-flash {
    opacity: 0;
    background: #f5c518;
    animation: biFlash 0.45s ease 9.5s;
}

@keyframes biFlash {
    0%  { opacity: 0;    }
    18% { opacity: 0.96; }
    100%{ opacity: 0;    }
}

/* ── VIGNETTE: persistent depth ── */
#batman-intro .bi-vignette {
    background: radial-gradient(ellipse 88% 88% at 50% 50%, transparent 38%, rgba(0,0,0,.85) 100%);
    pointer-events: none;
}

/* Whole intro fades out (9.8–11.6s) */
#batman-intro.active {
    animation: biIntroFade 1.8s ease 9.8s forwards;
}

@keyframes biIntroFade {
    to { opacity: 0; }
}

/* ─── Shutdown: leaving batman theme ──────────────────────────── */
#glitchOverlay.batman-shutdown {
    animation: batmanShutdown 0.6s ease-in forwards;
}

@keyframes batmanShutdown {
    0%   { background-color: #f5c518; opacity: 1; }
    35%  { background-color: #fff;    opacity: 1; }
    65%  { background-color: #000;    opacity: 1; }
    100% { background-color: #000;    opacity: 0; }
}

/* App container hidden during intro, fades in after flash */
.batman-booting .app-container {
    animation: batmanContainerBoot 11.8s ease forwards;
}

@keyframes batmanContainerBoot {
    0%,  80% { opacity: 0; }
    94%       { opacity: 1; }
    100%      { opacity: 1; }
}