/* ===================================================
   xity.one -- Aurora Over Obsidian
   =================================================== */

/* --- Custom Properties --- */
:root {
    --deep-ground: #0A0A14;
    --surface-ground: #12121F;
    --aurora-green: #00E89D;
    --aurora-violet: #8B5CF6;
    --aurora-rose: #FF6B9D;
    --aurora-gold: #FFD93D;
    --text-primary: #C8C3D4;
    --text-secondary: #6B6580;

    --font-display: 'Poiret One', cursive;
    --font-heading: 'Bebas Neue', sans-serif;
    --font-body: 'Commissioner', sans-serif;
}

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

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--deep-ground);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.85;
    overflow-x: hidden;
}

/* --- Aurora Gradient Keyframes --- */
@keyframes aurora-drift {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 50%; }
}

@keyframes hero-entrance {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes glyph-fade-in {
    0% { opacity: 0; }
    100% { opacity: 0.4; }
}

@keyframes orbit {
    0% { transform: rotate(calc(var(--i) * 45deg)) translateX(25vw) rotate(calc(var(--i) * -45deg)); }
    100% { transform: rotate(calc(var(--i) * 45deg + 360deg)) translateX(25vw) rotate(calc(var(--i) * -45deg - 360deg)); }
}

@keyframes final-mark-appear {
    0% {
        opacity: 0;
        letter-spacing: 0.8em;
    }
    60% {
        opacity: 1;
        letter-spacing: 0.3em;
    }
    100% {
        opacity: 1;
        letter-spacing: 0.15em;
    }
}

@keyframes pulse-glow {
    0%, 100% { text-shadow: 0 0 40px rgba(0, 232, 157, 0.3), 0 0 80px rgba(139, 92, 246, 0.15); }
    50% { text-shadow: 0 0 60px rgba(255, 107, 157, 0.4), 0 0 120px rgba(255, 217, 61, 0.2); }
}

/* --- Progress Bar --- */
.progress-bar {
    position: fixed;
    top: 0;
    right: 0;
    width: 2px;
    height: 0%;
    background: linear-gradient(180deg, var(--aurora-green), var(--aurora-violet), var(--aurora-rose), var(--aurora-gold));
    z-index: 1000;
    transition: height 0.15s ease-out;
}

/* --- Particle Canvas --- */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
}

/* --- X Intersection SVG --- */
.x-intersection {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.x-intersection.visible {
    opacity: 1;
}

.x-line {
    stroke: var(--aurora-green);
    stroke-width: 0.15;
    fill: none;
    stroke-dasharray: 142;
    stroke-dashoffset: 142;
    transition: stroke-dashoffset 0.8s ease-out;
}

.x-line.draw {
    stroke-dashoffset: 0;
}

/* --- Sections (Acts & Gutters) --- */
.act,
.gutter-page {
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.act {
    background-color: var(--deep-ground);
    z-index: 5;
}

/* --- Act I: The Sigil --- */
.act-sigil {
    background-color: var(--deep-ground);
}

.hero-x {
    font-family: var(--font-display);
    font-size: clamp(20vw, 40vw, 60vw);
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: lowercase;
    line-height: 1;
    background: linear-gradient(135deg, var(--aurora-green), var(--aurora-violet), var(--aurora-rose), var(--aurora-gold), var(--aurora-green));
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
        aurora-drift 12s ease-in-out infinite,
        hero-entrance 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        pulse-glow 6s ease-in-out infinite;
    transform: scale(0);
    opacity: 0;
    cursor: default;
    user-select: none;
}

/* --- Gutter Pages --- */
.gutter-page {
    background: linear-gradient(135deg, var(--aurora-green), var(--aurora-violet), var(--aurora-rose), var(--aurora-gold), var(--aurora-green));
    background-size: 400% 400%;
    animation: aurora-drift 12s ease-in-out infinite;
    z-index: 5;
}

.gutter-glyph {
    font-family: var(--font-display);
    font-size: clamp(30vw, 50vw, 70vw);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    color: var(--deep-ground);
    opacity: 0;
    animation: glyph-fade-in 1.5s ease-out forwards;
    animation-play-state: paused;
    user-select: none;
}

.gutter-page.in-view .gutter-glyph {
    animation-play-state: running;
}

/* Vary gutter dominant color */
[data-gutter="1"] { animation-delay: 0s; }
[data-gutter="2"] { animation-delay: -3s; }
[data-gutter="3"] { animation-delay: -6s; }
[data-gutter="4"] { animation-delay: -9s; }
[data-gutter="5"] { animation-delay: -2s; }
[data-gutter="6"] { animation-delay: -5s; }

/* --- Magazine Spreads --- */
.act-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.spread {
    display: flex;
    align-items: center;
    padding: 0 5vw;
    gap: 4vw;
}

.spread-left {
    flex-direction: row;
}

.spread-right {
    flex-direction: row;
}

.spread-center {
    justify-content: center;
}

.spread-main {
    flex: 0 0 62%;
    background-color: var(--surface-ground);
    padding: clamp(2rem, 4vw, 4rem);
    border-radius: 2px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spread-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2px;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 232, 157, 0.03), rgba(139, 92, 246, 0.03));
    pointer-events: none;
    mix-blend-mode: overlay;
    transition: background 0.1s ease;
}

.spread-main:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 232, 157, 0.08);
}

.spread-main-center {
    flex: 0 0 70%;
    max-width: 800px;
    text-align: center;
}

.spread-margin {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
}

.margin-label {
    font-family: var(--font-heading);
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.margin-note {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    line-height: 1.6;
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Typography --- */
.act-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 4rem);
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--aurora-green);
    margin-bottom: 2rem;
}

.act-title-center {
    text-align: center;
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.body-text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.85;
    color: var(--text-primary);
    margin-bottom: 1.5em;
    transition: font-variation-settings 0.4s ease-out;
}

.body-text:hover {
    font-variation-settings: 'wght' 500;
    transition-duration: 0.4s;
}

.body-text:not(:hover) {
    font-variation-settings: 'wght' 300;
    transition-duration: 0.6s;
}

.body-text em {
    font-style: normal;
    color: var(--aurora-rose);
    position: relative;
    display: inline;
}

.body-text em::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--aurora-green), var(--aurora-violet), var(--aurora-rose), var(--aurora-gold));
    background-size: 200% 100%;
    animation: aurora-drift 6s ease-in-out infinite;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-out;
}

.body-text em:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.body-text em:not(:hover)::after {
    transform: scaleX(0);
    transform-origin: right;
    transition-duration: 0.4s;
}

/* --- Act VI: Orbit Ring --- */
.orbit-ring {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-glyph {
    position: absolute;
    font-family: var(--font-display);
    font-size: 8vw;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--glyph-color);
    animation: orbit 30s linear infinite;
    animation-delay: calc(var(--i) * -3.75s);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), font-size 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    user-select: none;
    will-change: transform;
}

.orbit-glyph:hover {
    font-size: 20vw;
    z-index: 20;
    animation-play-state: paused;
}

/* --- Act VII: The Mark --- */
.act-mark {
    background-color: var(--deep-ground);
}

.final-mark {
    font-family: var(--font-display);
    font-size: clamp(8vw, 14vw, 20vw);
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.15em;
    line-height: 1;
    background: linear-gradient(135deg, var(--aurora-green), var(--aurora-violet), var(--aurora-rose), var(--aurora-gold), var(--aurora-green));
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: aurora-drift 12s ease-in-out infinite;
    opacity: 0;
    user-select: none;
}

.final-mark.revealed {
    animation: aurora-drift 12s ease-in-out infinite, final-mark-appear 2.5s ease-out forwards;
}

.final-char {
    display: inline-block;
}

/* --- Scroll-driven act color shifts --- */
.act[data-act="1"],
.act[data-act="2"] {
    --act-accent: var(--aurora-green);
}

.act[data-act="3"],
.act[data-act="4"] {
    --act-accent: var(--aurora-violet);
}

.act[data-act="5"],
.act[data-act="6"],
.act[data-act="7"] {
    --act-accent: var(--aurora-rose);
}

.act[data-act="3"] .act-title,
.act[data-act="4"] .act-title {
    color: var(--aurora-violet);
}

.act[data-act="5"] .act-title {
    color: var(--aurora-rose);
}

.act[data-act="6"] .act-title {
    color: var(--aurora-gold);
}

.act[data-act="7"] .act-title {
    color: var(--aurora-green);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .spread {
        flex-direction: column;
        padding: 5vh 5vw;
        gap: 2vh;
    }

    .spread-right {
        flex-direction: column;
    }

    .spread-main,
    .spread-main-center {
        flex: none;
        width: 100%;
    }

    .spread-margin {
        flex: none;
        width: 100%;
        padding: 0;
    }

    .orbit-glyph {
        font-size: 12vw;
    }

    .orbit-glyph:hover {
        font-size: 25vw;
    }

    .hero-x {
        font-size: clamp(30vw, 50vw, 70vw);
    }

    .final-mark {
        font-size: clamp(10vw, 16vw, 25vw);
    }

    .act-title {
        font-size: clamp(1.2rem, 6vw, 2.5rem);
    }
}