/* ============================================================
   genpatsu.io - Nuclear Risk Simulator
   Goblincore Aesthetic / Parallax-Sections / Dopamine-Neon
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    --reactor-dark: #0A0A1A;
    --reactor-deep: #1A0A2A;
    --warning-neon: #FF3366;
    --radiation-green: #39FF14;
    --containment-blue: #4A6BD9;
    --moss-olive: #5A6A3A;
    --concrete-gray: #5A5A64;
    --alert-yellow: #FFD23F;

    --font-display: 'Saira Condensed', sans-serif;
    --font-body: 'Noto Serif JP', serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--reactor-dark);
    color: #c8c8d0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.8;
    overflow-x: hidden;
}

/* --- Hero Section --- */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--reactor-dark) 0%, var(--reactor-deep) 100%);
    overflow: hidden;
}

/* Radiation burst background */
.radiation-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--radiation-green) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.radiation-burst.active {
    animation: radiationExpand 600ms ease-out forwards;
}

@keyframes radiationExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0.15;
    }
}

/* Reactor Schematic */
#reactor-schematic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 500px);
    height: min(70vw, 500px);
    z-index: 1;
    opacity: 0.7;
}

#reactor-svg {
    width: 100%;
    height: 100%;
}

/* SVG stroke-dashoffset animation setup */
#containment-ring {
    stroke-dasharray: 1382;
    stroke-dashoffset: 1382;
}

#containment-ring.draw {
    animation: drawRing 500ms ease-out forwards;
}

@keyframes drawRing {
    to { stroke-dashoffset: 0; }
}

#pressure-ring {
    stroke-dasharray: 974;
    stroke-dashoffset: 974;
}

#pressure-ring.draw {
    animation: drawRing 400ms ease-out forwards;
}

#core-ring {
    stroke-dasharray: 503;
    stroke-dashoffset: 503;
}

#core-ring.draw {
    animation: drawRing 300ms ease-out forwards;
}

#core-glow.active {
    animation: coreGlow 1200ms ease-in-out infinite alternate;
}

@keyframes coreGlow {
    0% { opacity: 0.15; r: 25; }
    100% { opacity: 0.4; r: 35; }
}

/* Fuel rods reveal */
.fuel-rod.visible {
    animation: fuelReveal 400ms ease-out forwards;
}

@keyframes fuelReveal {
    to { opacity: 0.5; }
}

/* Goblincore elements */
.goblincore-element.visible {
    animation: goblinGrow 400ms ease-out forwards;
}

@keyframes goblinGrow {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Vine drawing animation */
.vine {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.vine.draw {
    animation: drawVine 800ms ease-out forwards;
}

@keyframes drawVine {
    to { stroke-dashoffset: 0; }
}

/* Radiation lines */
#radiation-lines.active {
    animation: radLinesIn 600ms ease-out forwards;
}

@keyframes radLinesIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rad-line {
    transform-origin: 250px 250px;
}

/* --- Hero Title --- */
#hero-title {
    position: relative;
    z-index: 2;
    text-align: center;
    pointer-events: none;
}

#site-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 8vw, 90px);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #e0e0e8;
    text-transform: uppercase;
    margin-bottom: 0.15em;
}

.title-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
}

.title-char.visible {
    animation: charReveal 120ms ease-out forwards;
}

@keyframes charReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternate weight rhythm on chars */
.title-char[data-index="0"],
.title-char[data-index="2"],
.title-char[data-index="4"],
.title-char[data-index="6"] {
    font-weight: 700;
}

.title-char[data-index="1"],
.title-char[data-index="3"],
.title-char[data-index="5"],
.title-char[data-index="7"] {
    font-weight: 600;
}

.dot-io {
    color: var(--warning-neon);
    opacity: 0;
    display: inline-block;
}

.dot-io.visible {
    opacity: 1;
    animation: ioPulse 1800ms ease-in-out infinite;
}

@keyframes ioPulse {
    0%, 100% {
        text-shadow: 0 0 8px var(--warning-neon), 0 0 20px rgba(255, 51, 102, 0.3);
    }
    50% {
        text-shadow: 0 0 16px var(--warning-neon), 0 0 40px rgba(255, 51, 102, 0.5);
    }
}

.subtitle {
    font-family: var(--font-body);
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 400;
    color: var(--concrete-gray);
    opacity: 0;
    letter-spacing: 0.05em;
}

.subtitle.visible {
    animation: fadeIn 500ms ease-out forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
    opacity: 0;
}

.scroll-indicator.visible {
    animation: fadeInUp 600ms ease-out forwards;
    animation-delay: 3000ms;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 0.6;
        transform: translateX(-50%) translateY(0);
    }
}

.scroll-indicator span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--concrete-gray);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.scroll-indicator svg {
    animation: bobDown 1500ms ease-in-out infinite;
}

@keyframes bobDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* --- Depth Sections (Parallax Layers) --- */
.depth-section {
    position: relative;
    min-height: 100vh;
    padding: 120px 5vw 80px;
    overflow: hidden;
}

/* Section radiation background */
.section-radiation-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 0;
}

/* Progressive radiation intensity per depth */
#section-societal {
    background: linear-gradient(180deg, var(--reactor-dark) 0%, #0D0A1E 50%, var(--reactor-deep) 100%);
}

#section-societal .section-radiation-bg {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 51, 102, 0.03) 10deg,
        transparent 20deg,
        rgba(255, 51, 102, 0.02) 50deg,
        transparent 60deg,
        rgba(255, 51, 102, 0.03) 90deg,
        transparent 100deg,
        rgba(255, 51, 102, 0.02) 140deg,
        transparent 150deg,
        rgba(255, 51, 102, 0.03) 180deg,
        transparent 190deg,
        rgba(255, 51, 102, 0.02) 230deg,
        transparent 240deg,
        rgba(255, 51, 102, 0.03) 270deg,
        transparent 280deg,
        rgba(255, 51, 102, 0.02) 320deg,
        transparent 330deg,
        rgba(255, 51, 102, 0.03) 360deg
    );
}

#section-engineering {
    background: linear-gradient(180deg, var(--reactor-deep) 0%, #12082E 50%, #150A32 100%);
}

#section-engineering .section-radiation-bg {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(57, 255, 20, 0.04) 8deg,
        transparent 16deg,
        rgba(255, 51, 102, 0.03) 36deg,
        transparent 44deg,
        rgba(57, 255, 20, 0.04) 72deg,
        transparent 80deg,
        rgba(255, 51, 102, 0.03) 108deg,
        transparent 116deg,
        rgba(57, 255, 20, 0.04) 144deg,
        transparent 152deg,
        rgba(255, 51, 102, 0.03) 180deg,
        transparent 188deg,
        rgba(57, 255, 20, 0.04) 216deg,
        transparent 224deg,
        rgba(255, 51, 102, 0.03) 252deg,
        transparent 260deg,
        rgba(57, 255, 20, 0.04) 288deg,
        transparent 296deg,
        rgba(255, 51, 102, 0.03) 324deg,
        transparent 332deg,
        rgba(57, 255, 20, 0.04) 360deg
    );
}

#section-physics {
    background: linear-gradient(180deg, #150A32 0%, #1A0C38 50%, #1D0E3D 100%);
}

#section-physics .section-radiation-bg {
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(57, 255, 20, 0.06) 6deg,
        transparent 12deg,
        rgba(255, 51, 102, 0.05) 24deg,
        transparent 30deg,
        rgba(57, 255, 20, 0.06) 48deg,
        transparent 54deg,
        rgba(255, 210, 63, 0.04) 72deg,
        transparent 78deg,
        rgba(57, 255, 20, 0.06) 96deg,
        transparent 102deg,
        rgba(255, 51, 102, 0.05) 120deg,
        transparent 126deg,
        rgba(57, 255, 20, 0.06) 144deg,
        transparent 150deg,
        rgba(255, 210, 63, 0.04) 168deg,
        transparent 174deg,
        rgba(57, 255, 20, 0.06) 192deg,
        transparent 198deg,
        rgba(255, 51, 102, 0.05) 216deg,
        transparent 222deg,
        rgba(57, 255, 20, 0.06) 240deg,
        transparent 246deg,
        rgba(255, 210, 63, 0.04) 264deg,
        transparent 270deg,
        rgba(57, 255, 20, 0.06) 288deg,
        transparent 294deg,
        rgba(255, 51, 102, 0.05) 312deg,
        transparent 318deg,
        rgba(57, 255, 20, 0.06) 336deg,
        transparent 342deg,
        rgba(255, 210, 63, 0.04) 360deg
    );
}

#section-reclamation {
    background: linear-gradient(180deg, #1D0E3D 0%, #120822 50%, var(--reactor-dark) 100%);
    min-height: 80vh;
}

/* Depth labels */
.depth-label {
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.depth-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--concrete-gray);
    text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid rgba(90, 90, 100, 0.3);
    border-radius: 2px;
}

.depth-indicator {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--warning-neon);
    opacity: 0.6;
}

/* Section content */
.section-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 5vw, 60px);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #e8e8f0;
    margin-bottom: 50px;
}

/* Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.content-block {
    position: relative;
    padding: 30px;
    background: rgba(10, 10, 26, 0.5);
    border: 1px solid rgba(90, 90, 100, 0.15);
    border-radius: 4px;
    transition: border-color 0.4s ease, transform 0.4s ease;
    filter: blur(0px);
    opacity: 1;
}

.content-block.blurred {
    filter: blur(3px);
    opacity: 0.5;
}

.content-block:hover {
    border-color: rgba(90, 90, 100, 0.35);
    transform: translateY(-2px);
}

/* Isometric Icons */
.isometric-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}

.isometric-icon svg {
    width: 100%;
    height: 100%;
}

.content-block h3 {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #d0d0d8;
    margin-bottom: 12px;
}

.content-block p {
    color: #a0a0b0;
    margin-bottom: 20px;
}

/* Data Readout (technical data display) */
.data-readout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(10, 10, 26, 0.6);
    border: 1px solid rgba(90, 90, 100, 0.2);
    border-radius: 2px;
    margin-top: auto;
}

.data-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--concrete-gray);
    text-transform: uppercase;
}

.data-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--radiation-green);
    letter-spacing: 0.05em;
}

/* --- Engineering section accent --- */
#section-engineering .depth-indicator {
    color: var(--containment-blue);
}

#section-engineering .data-value {
    color: var(--containment-blue);
}

#section-engineering .content-block:hover {
    border-color: rgba(74, 107, 217, 0.3);
}

/* --- Physics section accent --- */
#section-physics .depth-indicator {
    color: var(--radiation-green);
}

#section-physics .section-title {
    background: linear-gradient(90deg, var(--radiation-green), var(--alert-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#section-physics .content-block:hover {
    border-color: rgba(57, 255, 20, 0.2);
}

/* --- Reclamation Section --- */
.reclamation-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reclamation-visual {
    width: 100%;
    max-width: 700px;
    margin-bottom: 40px;
    opacity: 0.6;
}

.reclamation-visual svg {
    width: 100%;
    height: auto;
}

.reclamation-title {
    color: var(--moss-olive) !important;
    margin-bottom: 30px !important;
}

.reclamation-text {
    max-width: 700px;
    color: #a0a0b0;
    margin-bottom: 20px;
    text-align: center;
}

.reclamation-text.secondary {
    font-size: clamp(20px, 3vw, 32px);
    color: var(--moss-olive);
    margin-top: 30px;
    margin-bottom: 10px;
}

.reclamation-translation {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--concrete-gray);
    letter-spacing: 0.05em;
    opacity: 0.7;
}

/* Reclamation mushroom animation */
.reclamation-mushroom {
    opacity: 0;
    transform-origin: center bottom;
}

.reclamation-mushroom.grow {
    animation: mushroomGrow 600ms ease-out forwards;
}

@keyframes mushroomGrow {
    from {
        opacity: 0;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* --- Footer --- */
#site-footer {
    position: relative;
    padding: 40px 5vw;
    background: var(--reactor-dark);
    border-top: 1px solid rgba(90, 90, 100, 0.15);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-brand {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #808090;
}

.footer-description {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--concrete-gray);
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.footer-data {
    display: flex;
    gap: 20px;
}

.footer-status {
    color: var(--radiation-green) !important;
    animation: statusBlink 3000ms ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 90%, 100% { opacity: 1; }
    95% { opacity: 0.3; }
}

/* --- Progressive Disclosure (blur transitions) --- */
.depth-section .content-block {
    transition: filter 0.6s ease, opacity 0.6s ease, border-color 0.4s ease, transform 0.4s ease;
}

/* --- Scroll-Driven Parallax support (via JS transform) --- */
.parallax-layer {
    will-change: transform;
}

/* --- Radiation burst intensify per section --- */
.depth-section .section-radiation-bg.active {
    opacity: 1;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .depth-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .depth-section {
        padding: 80px 5vw 60px;
    }

    #reactor-schematic {
        width: 85vw;
        height: 85vw;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .reclamation-text.secondary {
        font-size: clamp(18px, 4vw, 28px);
    }
}

@media (max-width: 480px) {
    .content-block {
        padding: 20px;
    }

    .isometric-icon {
        width: 60px;
        height: 60px;
    }

    #site-title {
        font-size: clamp(32px, 10vw, 60px);
    }
}

/* --- Selection styling --- */
::selection {
    background: rgba(57, 255, 20, 0.2);
    color: #e8e8f0;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--reactor-dark);
}

::-webkit-scrollbar-thumb {
    background: rgba(90, 90, 100, 0.4);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 90, 100, 0.6);
}