/* =============================================================
   thesecond.world — vaporwave + seapunk + horizontal-scroll
   Palette: #FF6B9D, #D4C8E8, #4A2060, #8A7AA0, #1A0A2A,
            #0A2A2A, #2AE8D0, #C850C0, #2A1840, #4158D0
   Fonts:   Bungee, Work Sans, Noto Sans JP, VT323
   ============================================================= */

:root {
    --void: #1A0A2A;
    --twilight: #2A1840;
    --indigo: #4A2060;
    --ocean: #0A2A2A;
    --teal: #2AE8D0;
    --pink: #FF6B9D;
    --magenta: #C850C0;
    --electric: #4158D0;
    --lavender: #D4C8E8;
    --lilac: #8A7AA0;
    --zone-hue: 280;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--void);
    color: var(--lavender);
    font-family: "Work Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    position: relative;
    background:
        radial-gradient(circle at 20% 30%, rgba(74,32,96,0.55), transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(42,232,208,0.10), transparent 60%),
        var(--void);
    transition: background 600ms ease;
}

button {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* ---------- GLOBAL OVERLAYS ---------- */

.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 90;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 1px,
        rgba(0,0,0,0.06) 1px,
        rgba(0,0,0,0.06) 2px
    );
    mix-blend-mode: multiply;
}

.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 91;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(10,4,28,0.55) 100%);
}

/* ---------- HORIZONTAL TRANSIT ---------- */

.transit {
    width: 100vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.transit::-webkit-scrollbar { display: none; }
.transit { scrollbar-width: none; }

.parallel {
    display: flex;
    flex-direction: row;
    width: 500vw;
    height: 100vh;
    will-change: transform;
}

.zone {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    isolation: isolate;
}

.zone-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.zone-aura {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* ---------- TYPOGRAPHY UTILITIES ---------- */

.zone-tag {
    font-family: "VT323", monospace;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 2px;
    color: var(--teal);
    text-transform: uppercase;
}

.tag-dark {
    color: var(--void);
    text-shadow: 0 0 0 transparent;
}

.display-title,
.panel-h,
.ocean-h,
.sunset-h,
.signal-h {
    font-family: "Bungee", "Work Sans", sans-serif;
    font-weight: 400;
    line-height: 1.0;
    color: var(--teal);
    letter-spacing: 0.5px;
}

.chroma {
    position: relative;
    text-shadow: 3px 3px 0 var(--pink), -2px -2px 0 var(--electric);
    transition: text-shadow 480ms cubic-bezier(.2,.7,.2,1), letter-spacing 480ms ease;
}

.chroma:hover {
    text-shadow: 5px 2px 0 var(--pink), -5px -2px 0 var(--teal), 0 0 22px rgba(200,80,192,0.55);
    letter-spacing: 1.2px;
}

.chroma-dark {
    color: var(--void);
    text-shadow: 3px 3px 0 var(--pink), -2px -2px 0 var(--lavender);
}

.chroma-dark:hover {
    text-shadow: 5px 2px 0 var(--lavender), -5px -2px 0 var(--pink), 0 0 22px rgba(255,107,157,0.55);
}

/* ---------- KANJI FLOATERS ---------- */

.kanji {
    position: absolute;
    font-family: "Noto Sans JP", "Work Sans", sans-serif;
    font-weight: 300;
    color: var(--pink);
    opacity: 0.18;
    user-select: none;
    pointer-events: none;
    z-index: 1;
    letter-spacing: 4px;
}

.kanji-a { top: 12%;  left: 6%;  font-size: 96px; animation: drift-y 17s ease-in-out infinite; }
.kanji-b { top: 70%;  right: 10%; font-size: 64px; animation: drift-y 22s ease-in-out infinite reverse; }
.kanji-c { top: 8%;   right: 8%;  font-size: 110px; animation: drift-y 19s ease-in-out infinite; }
.kanji-d { top: 78%;  left: 6%;   font-size: 78px; animation: drift-y 24s ease-in-out infinite reverse; }
.kanji-e { top: 16%;  left: 8%;   font-size: 132px; color: var(--teal); opacity: 0.12; animation: drift-y 21s ease-in-out infinite; }
.kanji-f { top: 72%;  right: 12%; font-size: 70px;  animation: drift-y 18s ease-in-out infinite reverse; }
.kanji-g { top: 14%;  right: 9%;  font-size: 120px; color: var(--void); opacity: 0.22; animation: drift-y 23s ease-in-out infinite; }
.kanji-h { top: 76%;  left: 7%;   font-size: 70px;  color: var(--void); opacity: 0.22; animation: drift-y 25s ease-in-out infinite reverse; }
.kanji-i { top: 50%;  left: 50%;  transform: translate(-50%, -50%); font-size: 220px; opacity: 0.06; color: var(--teal); animation: pulse-fade 6s ease-in-out infinite; }

@keyframes drift-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-40px); }
}

@keyframes pulse-fade {
    0%, 100% { opacity: 0.04; }
    50%      { opacity: 0.10; }
}

/* ============================================================
   ZONE 0 — GATEWAY
   ============================================================ */

.gateway-bg {
    background: linear-gradient(180deg, var(--void) 0%, var(--twilight) 55%, var(--indigo) 100%);
}

.gateway-aura {
    background:
        radial-gradient(ellipse 60% 70% at 50% 60%, rgba(42,232,208,0.22), transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(74,32,96,0.6), transparent 70%);
}

.gateway-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    padding: 0 8vw;
    gap: 4vw;
}

.column {
    width: 220px;
    height: 100%;
    max-height: 78vh;
    margin: 0 auto;
    filter: drop-shadow(0 0 8px rgba(42,232,208,0.6));
    animation: column-glow 4s ease-in-out infinite;
}

@keyframes column-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(42,232,208,0.5)); }
    50%      { filter: drop-shadow(0 0 18px rgba(42,232,208,0.85)); }
}

.gateway-text {
    max-width: 640px;
}

.gateway-text .zone-tag { margin-bottom: 18px; }

.display-title {
    font-size: clamp(48px, 6.4vw, 92px);
    line-height: 1.0;
    margin-bottom: 24px;
}

.display-sub {
    font-family: "Work Sans", sans-serif;
    font-size: 18px;
    line-height: 1.65;
    color: var(--lavender);
    max-width: 460px;
}

.hint {
    position: absolute;
    bottom: 80px;
    right: 56px;
    z-index: 4;
    font-family: "VT323", monospace;
    font-size: 16px;
    color: var(--teal);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hint span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(42,232,208,0.4);
    animation: blink 2.4s steps(2, end) infinite;
}

@keyframes blink {
    0%, 60%  { opacity: 1; }
    61%, 100% { opacity: 0.25; }
}

/* ============================================================
   ZONE 1 — AGORA
   ============================================================ */

.agora-bg {
    background:
        linear-gradient(135deg, var(--twilight) 0%, var(--indigo) 100%);
}

.agora-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(42,232,208,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,232,208,0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, transparent, black 20%, black 80%, transparent);
}

.agora-grid {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 1fr);
    padding: 8vh 6vw;
    gap: 0;
    perspective: 1200px;
}

.panel {
    position: relative;
    padding: 22px 24px;
    background: rgba(26,10,42,0.66);
    border: 1px solid rgba(212,200,232,0.18);
    backdrop-filter: blur(2px);
    box-shadow:
        0 0 0 1px rgba(42,232,208,0.08) inset,
        0 24px 40px -20px rgba(10,4,28,0.7);
    transition: transform 480ms cubic-bezier(.2,.7,.2,1), box-shadow 480ms ease, border-color 320ms ease;
}

.panel:hover {
    transform: perspective(800px) rotateY(0deg) translateZ(20px) !important;
    border-color: rgba(42,232,208,0.6);
    box-shadow:
        0 0 0 1px rgba(42,232,208,0.4) inset,
        0 30px 60px -16px rgba(42,232,208,0.25);
}

.panel-1 { grid-column: 1 / span 4;  grid-row: 1 / span 3;  transform: perspective(800px) rotateY(5deg)  translateZ(-10px); }
.panel-2 { grid-column: 6 / span 4;  grid-row: 1 / span 4;  transform: perspective(800px) rotateY(-6deg) translateZ(0); }
.panel-3 { grid-column: 9 / span 4;  grid-row: 2 / span 3;  transform: perspective(800px) rotateY(7deg)  translateZ(-30px); }
.panel-4 { grid-column: 2 / span 4;  grid-row: 4 / span 3;  transform: perspective(800px) rotateY(-4deg) translateZ(-15px); }
.panel-5 { grid-column: 6 / span 5;  grid-row: 5 / span 3;  transform: perspective(800px) rotateY(8deg)  translateZ(10px); }
.panel-6 { grid-column: 11 / span 2; grid-row: 6 / span 2;  transform: perspective(800px) rotateY(-10deg) translateZ(-40px); width: 100%; }

.panel-tag {
    font-family: "VT323", monospace;
    font-size: 14px;
    color: var(--pink);
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.panel-h {
    font-size: clamp(20px, 2vw, 28px);
    margin-bottom: 12px;
    color: var(--teal);
}

.panel-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--lavender);
}

/* ============================================================
   ZONE 2 — OCEAN
   ============================================================ */

.ocean-bg {
    background:
        radial-gradient(ellipse at top, rgba(42,232,208,0.15), transparent 55%),
        linear-gradient(180deg, #061f1f 0%, var(--ocean) 60%, #061515 100%);
}

.zone-ocean .kanji-e,
.zone-ocean .kanji-f {
    z-index: 1;
}

.caustic {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    opacity: 0.22;
    mix-blend-mode: screen;
    z-index: 0;
}

.caustic-a {
    background:
        radial-gradient(circle at 20% 30%, rgba(42,232,208,0.6), transparent 18%),
        radial-gradient(circle at 70% 50%, rgba(42,232,208,0.5), transparent 18%),
        radial-gradient(circle at 40% 80%, rgba(42,232,208,0.55), transparent 16%);
    background-size: 220px 220px;
    animation: shift-a 7s linear infinite;
}

.caustic-b {
    background:
        radial-gradient(circle at 30% 60%, rgba(255,107,157,0.45), transparent 18%),
        radial-gradient(circle at 80% 20%, rgba(42,232,208,0.45), transparent 18%);
    background-size: 280px 280px;
    animation: shift-b 11s linear infinite;
    opacity: 0.18;
}

.caustic-c {
    background:
        radial-gradient(circle at 10% 90%, rgba(212,200,232,0.45), transparent 16%),
        radial-gradient(circle at 60% 40%, rgba(42,232,208,0.6), transparent 18%),
        radial-gradient(circle at 90% 70%, rgba(65,88,208,0.4), transparent 18%);
    background-size: 350px 350px;
    animation: shift-c 13s linear infinite;
    opacity: 0.16;
}

@keyframes shift-a { from { background-position: 0 0; }       to { background-position: 220px 180px; } }
@keyframes shift-b { from { background-position: 0 0; }       to { background-position: -280px 240px; } }
@keyframes shift-c { from { background-position: 0 0; }       to { background-position: 350px -300px; } }

.column-submerged {
    position: absolute;
    left: 8vw;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    opacity: 0.85;
    z-index: 2;
    animation: float-up 9s ease-in-out infinite;
}

@keyframes float-up {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-54%) translateX(6px); }
}

.ocean-text {
    position: absolute;
    right: 8vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    max-width: 540px;
    filter: blur(0.5px);
    transition: filter 320ms ease;
}

.ocean-text:hover {
    filter: blur(0);
}

.ocean-text .zone-tag { margin-bottom: 16px; }

.ocean-h {
    font-size: clamp(48px, 5.6vw, 80px);
    margin-bottom: 24px;
}

.ocean-body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--lavender);
    margin-bottom: 16px;
}

.ocean-quote {
    font-family: "VT323", monospace;
    font-size: 14px;
    color: var(--teal);
    letter-spacing: 1.4px;
}

/* ============================================================
   ZONE 3 — SUNSET
   ============================================================ */

.sunset-bg {
    background: linear-gradient(180deg, #2a0a3a 0%, var(--pink) 40%, var(--magenta) 70%, var(--electric) 100%);
}

.sunset-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 62%, rgba(255,200,140,0.4), transparent 60%);
}

.sunset-sun {
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: 38vw;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, #ffe7a0 0%, #ffb070 38%, var(--pink) 70%, transparent 80%);
    z-index: 1;
}

.sunset-sun::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 8px,
            rgba(26,10,42,0.4) 8px,
            rgba(26,10,42,0.4) 12px
        );
    mask: radial-gradient(circle, black 0%, black 50%, transparent 70%);
    -webkit-mask: radial-gradient(circle, black 0%, black 50%, transparent 70%);
}

.sunset-grid {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(26,10,42,0.85) 80%, var(--void) 100%),
        linear-gradient(rgba(42,232,208,0.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,232,208,0.7) 1px, transparent 1px);
    background-size: 100% 100%, 60px 50px, 60px 50px;
    transform-origin: top center;
    transform: perspective(380px) rotateX(58deg);
    z-index: 2;
}

.sunset-text {
    position: relative;
    z-index: 3;
    padding: 12vh 8vw 0;
    max-width: 720px;
}

.sunset-text .zone-tag { margin-bottom: 14px; }

.sunset-h {
    font-size: clamp(56px, 7vw, 110px);
    line-height: 0.95;
    margin-bottom: 20px;
}

.sunset-body {
    font-size: 17px;
    line-height: 1.65;
    color: var(--void);
    max-width: 480px;
    font-weight: 500;
}

.sunset-marquee {
    position: absolute;
    bottom: 6vh;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    gap: 36px;
    list-style: none;
    font-family: "Bungee", sans-serif;
    font-size: 22px;
    color: var(--void);
    text-shadow: 2px 2px 0 var(--pink);
    white-space: nowrap;
    overflow: hidden;
    padding: 12px 0;
    border-top: 1px solid rgba(26,10,42,0.4);
    border-bottom: 1px solid rgba(26,10,42,0.4);
    background: rgba(255,107,157,0.18);
    animation: marquee 22s linear infinite;
}

.sunset-marquee li {
    flex-shrink: 0;
    letter-spacing: 2px;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   ZONE 4 — SIGNAL
   ============================================================ */

.signal-bg {
    background:
        radial-gradient(ellipse at center, #0a0218 0%, #000000 70%);
}

.signal-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8vw;
}

.signal-line {
    position: absolute;
    left: 50%;
    top: 8%;
    bottom: 8%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent 0%, var(--teal) 12%, var(--teal) 88%, transparent 100%);
    box-shadow: 0 0 12px var(--teal), 0 0 28px rgba(42,232,208,0.6);
    animation: signal-pulse 1s ease-in-out infinite;
}

.signal-pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32vw;
    height: 32vw;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(42,232,208,0.4);
    box-shadow: 0 0 30px rgba(42,232,208,0.25), inset 0 0 40px rgba(42,232,208,0.18);
    animation: ring-pulse 4s ease-out infinite;
}

@keyframes signal-pulse {
    0%, 100% { opacity: 1;   transform: translateX(-50%) scaleY(1); }
    50%      { opacity: 0.4; transform: translateX(-50%) scaleY(1.04); }
}

@keyframes ring-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    25%  { opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

.signal-text {
    position: relative;
    z-index: 3;
    background: rgba(0,0,0,0.4);
    padding: 28px 36px;
    border: 1px solid rgba(42,232,208,0.25);
    backdrop-filter: blur(6px);
    max-width: 560px;
}

.signal-text .zone-tag { margin-bottom: 12px; }

.signal-h {
    font-size: clamp(48px, 5vw, 76px);
    margin-bottom: 16px;
}

.signal-body {
    font-size: 16px;
    line-height: 1.65;
    color: var(--lavender);
    margin-bottom: 18px;
}

.signal-meta {
    font-family: "VT323", monospace;
    font-size: 14px;
    color: var(--pink);
    letter-spacing: 2.4px;
}

/* ============================================================
   HUD — progress + zone marker
   ============================================================ */

.hud {
    position: fixed;
    left: 32px;
    right: 32px;
    bottom: 22px;
    z-index: 95;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    pointer-events: none;
}

.zone-readout {
    pointer-events: auto;
    display: flex;
    justify-content: space-between;
    font-family: "VT323", monospace;
    font-size: 14px;
    color: var(--teal);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.zone-readout-coord {
    color: var(--pink);
}

.progress-track {
    pointer-events: auto;
    position: relative;
    height: 4px;
    background: rgba(212,200,232,0.12);
    border-radius: 2px;
    overflow: visible;
}

.progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, var(--teal), var(--pink), var(--magenta), var(--electric));
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(42,232,208,0.5);
    transition: width 220ms ease;
}

.progress-ticks {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
}

.tick {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border-radius: 50%;
    background: rgba(212,200,232,0.4);
    border: 1px solid rgba(212,200,232,0.5);
    transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.tick:hover {
    transform: scale(1.4);
    background: var(--teal);
    box-shadow: 0 0 12px var(--teal);
}

.tick.active {
    background: var(--teal);
    border-color: var(--teal);
    box-shadow: 0 0 14px var(--teal);
}

/* ============================================================
   ENTER ANIMATION
   ============================================================ */

.zone {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 720ms ease, transform 720ms cubic-bezier(.2,.7,.2,1);
}

.zone.in-view {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================================
   RESPONSIVE — keep horizontal feel on tablet/mobile
   ============================================================ */

@media (max-width: 900px) {
    .gateway-stage {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 0 6vw;
    }
    .column { display: none; }
    .display-title { font-size: 48px; }

    .agora-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 8vh 6vw;
        overflow-y: auto;
    }
    .panel { transform: none !important; width: 100%; }

    .column-submerged { display: none; }
    .ocean-text { right: 6vw; left: 6vw; max-width: none; }

    .sunset-text { padding-top: 8vh; }
    .sunset-h { font-size: 56px; }
    .sunset-marquee { font-size: 18px; }

    .signal-pulse { width: 80vw; height: 80vw; }

    .hud { left: 16px; right: 16px; }
    .kanji { display: none; }
    .kanji-i { display: block; }
}