:root {
    --c-magenta: #ff2d6f;
    --c-cyan: #00e5ff;
    --c-yellow: #d4ff00;
    --c-indigo: #1a0a3e;
    --c-ghost: #f0e6ff;
    --c-violet: #7b2dff;
    --space-unit: 8px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--c-indigo);
    color: #fff;
    overflow-x: hidden;
    transition: background 1.5s ease;
}

.zone {
    position: relative;
    width: 100%;
    contain: layout paint;
}

/* ==============================
   NOISE OVERLAY
   ============================== */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ==============================
   IGNITION PANEL
   ============================== */
#ignition {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ignition-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, var(--c-magenta) 0%, var(--c-cyan) 45%, var(--c-yellow) 100%);
    animation: hueShift 12s linear infinite;
}

@keyframes hueShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.ignition-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-kanji {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(8rem, 18vw, 22rem);
    color: #fff;
    text-shadow:
        0 0 20px rgba(255, 255, 255, 0.8),
        0 0 40px rgba(255, 255, 255, 0.5),
        0 0 80px rgba(255, 255, 255, 0.3),
        0 0 120px rgba(255, 45, 111, 0.4),
        0 0 200px rgba(0, 229, 255, 0.3);
    line-height: 1;
}

.hero-subtitle {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    letter-spacing: 0.5em;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2rem;
}

/* ==============================
   NAVIGATOR BLOBS
   ============================== */
.navigator-blob {
    position: absolute;
    width: 120px;
    height: 120px;
    z-index: 3;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 45, 111, 0.27), rgba(0, 229, 255, 0.27));
    animation: blobMorph1 8s ease-in-out infinite, blobPulse 3s ease-in-out infinite;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.navigator-blob:hover {
    transform: scale(1.12);
    filter: hue-rotate(30deg);
}

.blob-label {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

.blob-1 {
    top: 15%;
    left: 5%;
    border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%;
}

.blob-2 {
    top: 20%;
    right: 5%;
    border-radius: 58% 42% 36% 64% / 53% 68% 32% 47%;
    animation-delay: -3s;
}

.blob-3 {
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 42% 58% 64% 36% / 47% 32% 68% 53%;
    animation-delay: -6s;
}

@keyframes blobMorph1 {
    0%, 100% { border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%; }
    33% { border-radius: 58% 42% 36% 64% / 53% 68% 32% 47%; }
    66% { border-radius: 42% 58% 64% 36% / 47% 32% 68% 53%; }
}

@keyframes blobPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.blob-3 {
    animation: blobMorph1 10s ease-in-out infinite, blobPulse 3s ease-in-out infinite;
}

/* ==============================
   AXIOM RIVER
   ============================== */
#axiom-river {
    height: 200vh;
    position: relative;
}

.axiom-band {
    position: sticky;
    top: 0;
    height: 30vh;
    width: 100%;
    background: linear-gradient(90deg, var(--c-cyan), var(--c-magenta), var(--c-yellow));
    background-size: 300% 100%;
    animation: bandShift 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes bandShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.axiom-track {
    position: sticky;
    top: 30vh;
    height: 70vh;
    display: flex;
    align-items: center;
    gap: 8vw;
    padding: 0 8vw;
    will-change: transform;
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.axiom-card {
    flex: 0 0 clamp(300px, 60vw, 700px);
    height: 50vh;
    border-radius: 2rem;
    background: rgba(240, 230, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: transform 0.3s ease;
}

.axiom-card:hover {
    transform: scale(1.02);
}

.axiom-halo {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 45, 111, 0.15), rgba(0, 229, 255, 0.15));
    filter: blur(60px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: blobMorph1 12s ease-in-out infinite;
}

.axiom-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 4rem);
    line-height: 1.3;
    color: #fff;
    position: relative;
    z-index: 1;
    text-align: center;
}

/* ==============================
   SYNAPSE GRID
   ============================== */
#synapse-grid {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    transition: grid-template-columns 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.synapse-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.panel-magenta { background: var(--c-magenta); }
.panel-cyan { background: var(--c-cyan); }
.panel-yellow { background: var(--c-yellow); }
.panel-violet { background: var(--c-violet); }

.panel-word {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6rem);
    color: #fff;
    pointer-events: none;
    transition: transform 0.3s ease;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.panel-yellow .panel-word {
    color: var(--c-indigo);
    text-shadow: none;
}

.synapse-panel:hover .panel-word {
    transform: scale(1.1);
}

.synapse-panel::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
}

.synapse-panel.ripple::after {
    width: 400px;
    height: 400px;
    opacity: 0;
}

/* ==============================
   DISSOLUTION ZONE
   ============================== */
#dissolution {
    height: 100vh;
    background: var(--c-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.starburst {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255,255,255,0.12) 2deg, transparent 4deg,
        transparent 8deg, rgba(255,255,255,0.12) 10deg, transparent 12deg,
        transparent 16deg, rgba(255,255,255,0.12) 18deg, transparent 20deg,
        transparent 24deg, rgba(255,255,255,0.12) 26deg, transparent 28deg,
        transparent 32deg, rgba(255,255,255,0.12) 34deg, transparent 36deg,
        transparent 40deg, rgba(255,255,255,0.12) 42deg, transparent 44deg,
        transparent 48deg, rgba(255,255,255,0.12) 50deg, transparent 52deg,
        transparent 56deg, rgba(255,255,255,0.12) 58deg, transparent 60deg,
        transparent 64deg, rgba(255,255,255,0.12) 66deg, transparent 68deg,
        transparent 72deg, rgba(255,255,255,0.12) 74deg, transparent 76deg,
        transparent 80deg, rgba(255,255,255,0.12) 82deg, transparent 84deg,
        transparent 88deg, rgba(255,255,255,0.12) 90deg, transparent 92deg,
        transparent 96deg, rgba(255,255,255,0.12) 98deg, transparent 100deg,
        transparent 104deg, rgba(255,255,255,0.12) 106deg, transparent 108deg,
        transparent 112deg, rgba(255,255,255,0.12) 114deg, transparent 116deg,
        transparent 120deg, rgba(255,255,255,0.12) 122deg, transparent 124deg,
        transparent 128deg, rgba(255,255,255,0.12) 130deg, transparent 132deg,
        transparent 136deg, rgba(255,255,255,0.12) 138deg, transparent 140deg,
        transparent 144deg, rgba(255,255,255,0.12) 146deg, transparent 148deg,
        transparent 152deg, rgba(255,255,255,0.12) 154deg, transparent 156deg,
        transparent 160deg, rgba(255,255,255,0.12) 162deg, transparent 164deg,
        transparent 168deg, rgba(255,255,255,0.12) 170deg, transparent 172deg,
        transparent 176deg, rgba(255,255,255,0.12) 178deg, transparent 180deg,
        transparent 184deg, rgba(255,255,255,0.12) 186deg, transparent 188deg,
        transparent 192deg, rgba(255,255,255,0.12) 194deg, transparent 196deg,
        transparent 200deg, rgba(255,255,255,0.12) 202deg, transparent 204deg,
        transparent 208deg, rgba(255,255,255,0.12) 210deg, transparent 212deg,
        transparent 216deg, rgba(255,255,255,0.12) 218deg, transparent 220deg,
        transparent 224deg, rgba(255,255,255,0.12) 226deg, transparent 228deg,
        transparent 232deg, rgba(255,255,255,0.12) 234deg, transparent 236deg,
        transparent 240deg, rgba(255,255,255,0.12) 242deg, transparent 244deg,
        transparent 248deg, rgba(255,255,255,0.12) 250deg, transparent 252deg,
        transparent 256deg, rgba(255,255,255,0.12) 258deg, transparent 260deg,
        transparent 264deg, rgba(255,255,255,0.12) 266deg, transparent 268deg,
        transparent 272deg, rgba(255,255,255,0.12) 274deg, transparent 276deg,
        transparent 280deg, rgba(255,255,255,0.12) 282deg, transparent 284deg,
        transparent 288deg, rgba(255,255,255,0.12) 290deg, transparent 292deg,
        transparent 296deg, rgba(255,255,255,0.12) 298deg, transparent 300deg,
        transparent 304deg, rgba(255,255,255,0.12) 306deg, transparent 308deg,
        transparent 312deg, rgba(255,255,255,0.12) 314deg, transparent 316deg,
        transparent 320deg, rgba(255,255,255,0.12) 322deg, transparent 324deg,
        transparent 328deg, rgba(255,255,255,0.12) 330deg, transparent 332deg,
        transparent 336deg, rgba(255,255,255,0.12) 338deg, transparent 340deg,
        transparent 344deg, rgba(255,255,255,0.12) 346deg, transparent 348deg,
        transparent 352deg, rgba(255,255,255,0.12) 354deg, transparent 356deg
    );
    animation: starburstRotate 30s linear infinite;
    pointer-events: none;
}

@keyframes starburstRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.starburst-center {
    position: absolute;
    width: 40vw;
    height: 40vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 40%, transparent 70%);
    pointer-events: none;
}

.dissolution-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(4rem, 10vw, 10rem);
    letter-spacing: 0.3em;
    color: #fff;
    position: relative;
    z-index: 2;
    display: flex;
}

.dissolution-title span {
    display: inline-block;
    transition: transform 0.5s ease;
}

/* ==============================
   RIPPLE EFFECTS
   ============================== */
#ripple-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
}

.ripple-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    animation: rippleExpand 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.4;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
    }
}

/* ==============================
   SCROLL PROGRESS
   ============================== */
.scroll-progress {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
}

.scroll-progress-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.08em;
    color: rgba(240, 230, 255, 0.5);
}