/* ============================================================
   ronpa.day — Pop-Art Vibrant Showcase
   Colors: #2d5aa0 #e63946 #ffbe0b #fafafa #111111 #f4c2c2
   Fonts: Black Ops One, Bangers, Roboto
   ============================================================ */

/* ── Reset & Base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --arg-blue:   #2d5aa0;
    --ref-red:    #e63946;
    --impact-yel: #ffbe0b;
    --panel-wht:  #fafafa;
    --dense-blk:  #111111;
    --benday-dot: #f4c2c2;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--dense-blk);
    color: var(--panel-wht);
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    overflow-x: hidden;
}

/* ── HERO ── */
#hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    min-height: 100vh;
    position: relative;
}

.hero-argument {
    background-color: var(--arg-blue);
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Ben-Day dots on argument side */
.hero-argument::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--benday-dot) 2px, transparent 2px);
    background-size: 12px 12px;
    opacity: 0.35;
    pointer-events: none;
}

/* Speed lines on argument */
.hero-argument::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(
        from 0deg at 50% 100%,
        transparent 0deg 3deg,
        rgba(0,0,0,0.04) 3deg 4deg
    );
    pointer-events: none;
}

.hero-refutation {
    background-color: var(--ref-red);
    padding: 4rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Speed lines on refutation */
.hero-refutation::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(
        from 0deg at 50% 0%,
        transparent 0deg 3deg,
        rgba(0,0,0,0.04) 3deg 4deg
    );
    pointer-events: none;
}

.hero-center {
    background-color: var(--dense-blk);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.vs-emblem {
    font-family: 'Black Ops One', cursive;
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 400;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--arg-blue) 50%, var(--ref-red) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

#lightning-bolt {
    width: 60px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 8px var(--impact-yel));
    animation: bolt-pulse 2s ease-in-out infinite;
}

@keyframes bolt-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px var(--impact-yel)); opacity: 0.9; }
    50%       { filter: drop-shadow(0 0 16px var(--impact-yel)) drop-shadow(0 0 32px var(--impact-yel)); opacity: 1; }
}

.hero-label {
    font-family: 'Bangers', cursive;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    letter-spacing: 0.2em;
    color: var(--impact-yel);
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 2;
}

.hero-claim {
    font-family: 'Black Ops One', cursive;
    font-size: clamp(1.4rem, 3.5vw, 3rem);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--panel-wht);
    line-height: 1.15;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.hero-body {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: rgba(250,250,250,0.85);
    max-width: 40ch;
    position: relative;
    z-index: 2;
}

/* Hero starburst */
.hero-burst {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(
        50% 0%, 61% 28%, 93% 11%, 76% 40%,
        100% 50%, 76% 60%, 93% 89%, 61% 72%,
        50% 100%, 39% 72%, 7% 89%, 24% 60%,
        0% 50%, 24% 40%, 7% 11%, 39% 28%
    );
    background: var(--impact-yel);
    animation: burst-pop 3s ease-in-out infinite;
}

.hero-burst span {
    font-family: 'Bangers', cursive;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: var(--dense-blk);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
    white-space: nowrap;
}

@keyframes burst-pop {
    0%, 100% { transform: translateX(-50%) scale(1) rotate(0deg); }
    33%       { transform: translateX(-50%) scale(1.08) rotate(3deg); }
    66%       { transform: translateX(-50%) scale(0.96) rotate(-2deg); }
}

/* ── INTRO BAND ── */
#intro-band {
    background-color: var(--dense-blk);
    padding: 5rem 2rem 4rem;
    text-align: center;
    position: relative;
    z-index: 5;
    border-top: 4px solid var(--impact-yel);
    border-bottom: 4px solid var(--impact-yel);
}

.site-title {
    font-family: 'Black Ops One', cursive;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--panel-wht);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.site-tagline {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(250,250,250,0.7);
    max-width: 60ch;
    margin: 0 auto;
}

/* ── PANEL WRAPPERS (rotation) ── */
.panel-wrapper {
    overflow: hidden;
    position: relative;
}

.panel-wrapper.odd  .impact-panel { transform: rotate(1.5deg);  }
.panel-wrapper.even .impact-panel { transform: rotate(-1.5deg); }

/* ── IMPACT PANELS ── */
.impact-panel {
    position: relative;
    padding: 5rem 4rem;
    overflow: hidden;
}

.argument-panel   { background-color: var(--arg-blue); }
.refutation-panel { background-color: var(--ref-red);  }

/* Ben-Day dots on argument panels */
.panel-bg-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--benday-dot) 2px, transparent 2px);
    background-size: 12px 12px;
    opacity: 0.35;
    pointer-events: none;
}

/* Speed lines background */
.panel-bg-speed {
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(
        from 0deg at 50% 100%,
        transparent 0deg 3deg,
        rgba(0,0,0,0.04) 3deg 4deg
    );
    pointer-events: none;
}

.panel-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.panel-tag {
    font-family: 'Bangers', cursive;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.25em;
    color: var(--impact-yel);
    margin-bottom: 1rem;
}

.panel-headline {
    font-family: 'Black Ops One', cursive;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--panel-wht);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.panel-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    color: rgba(250,250,250,0.88);
    max-width: 65ch;
    margin-bottom: 1.5rem;
}

.panel-quote {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--impact-yel);
    border-left: 4px solid var(--impact-yel);
    padding-left: 1rem;
    font-style: italic;
}

/* ── BURST CONNECTORS ── */
.burst-connector {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 20;
    margin: -3rem 0;
}

.starburst {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--impact-yel);
    color: var(--dense-blk);
    font-family: 'Bangers', cursive;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.12);
    animation: burst-spin 6s linear infinite;
}

.burst-1 {
    clip-path: polygon(
        50% 0%, 63% 25%, 93% 12%,
        79% 40%, 100% 50%, 79% 60%,
        93% 88%, 63% 75%, 50% 100%,
        37% 75%, 7% 88%, 21% 60%,
        0% 50%, 21% 40%, 7% 12%, 37% 25%
    );
}

.burst-2 {
    clip-path: polygon(
        50% 0%, 59% 22%, 82% 5%,
        74% 32%, 98% 35%, 82% 55%,
        95% 75%, 70% 70%, 68% 95%,
        50% 78%, 32% 95%, 30% 70%,
        5% 75%, 18% 55%, 2% 35%,
        26% 32%, 18% 5%, 41% 22%
    );
}

.burst-3 {
    clip-path: polygon(
        50% 0%, 64% 30%, 97% 18%,
        78% 45%, 100% 57%, 76% 65%,
        90% 93%, 60% 76%, 50% 100%,
        40% 76%, 10% 93%, 24% 65%,
        0% 57%, 22% 45%, 3% 18%,
        36% 30%
    );
}

@keyframes burst-spin {
    0%   { transform: scale(1) rotate(0deg); }
    25%  { transform: scale(1.06) rotate(6deg); }
    50%  { transform: scale(1) rotate(0deg); }
    75%  { transform: scale(1.06) rotate(-6deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── JUDGMENT SECTION ── */
#judgment {
    background-color: var(--dense-blk);
    padding: 7rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 5px solid var(--impact-yel);
}

.judgment-bg-speed {
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg 4deg,
        rgba(255,190,11,0.06) 4deg 5deg
    );
    pointer-events: none;
}

.judgment-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.judgment-label {
    font-family: 'Bangers', cursive;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    letter-spacing: 0.3em;
    color: var(--impact-yel);
    margin-bottom: 1rem;
}

.judgment-headline {
    font-family: 'Black Ops One', cursive;
    font-size: clamp(5rem, 18vw, 12rem);
    font-weight: 400;
    color: var(--panel-wht);
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow:
        4px 4px 0 var(--ref-red),
        8px 8px 0 var(--arg-blue);
}

.judgment-subhead {
    font-family: 'Bangers', cursive;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: 0.2em;
    color: var(--ref-red);
    margin-bottom: 2rem;
}

.judgment-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: rgba(250,250,250,0.78);
    max-width: 55ch;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.judgment-burst {
    width: 240px;
    height: 240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--impact-yel);
    clip-path: polygon(
        50% 0%, 61% 28%, 93% 11%, 76% 40%,
        100% 50%, 76% 60%, 93% 89%, 61% 72%,
        50% 100%, 39% 72%, 7% 89%, 24% 60%,
        0% 50%, 24% 40%, 7% 11%, 39% 28%
    );
    animation: burst-pop 2.5s ease-in-out infinite;
}

.judgment-burst span {
    font-family: 'Bangers', cursive;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--dense-blk);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

/* ── FOOTER ── */
#footer {
    background-color: var(--dense-blk);
    border-top: 4px solid var(--impact-yel);
    padding: 2.5rem 2rem;
    text-align: center;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.footer-logo {
    font-family: 'Black Ops One', cursive;
    font-size: 1.8rem;
    color: var(--panel-wht);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-tagline {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: rgba(250,250,250,0.5);
    letter-spacing: 0.05em;
}

/* ── ENTRANCE ANIMATIONS ── */
.impact-panel,
.burst-connector,
#intro-band,
#judgment {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.impact-panel.visible,
.burst-connector.visible,
#intro-band.visible,
#judgment.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Keep rotation on panels even when visible */
.panel-wrapper.odd  .impact-panel.visible { transform: translateY(0) rotate(1.5deg); }
.panel-wrapper.even .impact-panel.visible { transform: translateY(0) rotate(-1.5deg); }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    #lightning-bolt { animation: none; }
    .starburst      { animation: none; }
    .hero-burst     { animation: none; }
    .judgment-burst { animation: none; }
    .impact-panel,
    .burst-connector,
    #intro-band,
    #judgment {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .panel-wrapper.odd  .impact-panel { transform: rotate(1.5deg); }
    .panel-wrapper.even .impact-panel { transform: rotate(-1.5deg); }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .hero-center {
        height: 80px;
        width: 100%;
        flex-direction: row;
    }

    .vs-emblem {
        position: static;
        transform: none;
        font-size: 2rem;
    }

    #lightning-bolt {
        display: none;
    }

    .impact-panel {
        padding: 3rem 1.5rem;
    }

    .starburst {
        width: 150px;
        height: 150px;
    }

    .burst-connector {
        margin: -2rem 0;
    }
}