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

:root {
    --color-bg: #0f0e0c;
    --color-dark: #2c251e;
    --color-brown: #5c3a1e;
    --color-gold: #c9a84c;
    --color-gold-light: #d4a55a;
    --color-cream: #e8dcc8;
    --color-green: #3a4a2f;
    --grain-opacity: 0.15;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-bg);
    color: var(--color-cream);
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.7;
    overflow-x: hidden;
}

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

/* Fracture Spine */
#fracture-spine {
    position: fixed;
    left: 38%;
    top: 0;
    height: 100vh;
    width: 4vw;
    pointer-events: none;
    z-index: 10;
}

/* Leaf Drift */
.drift-leaf {
    position: fixed;
    pointer-events: none;
    z-index: 5;
    width: 40px;
    height: 60px;
}

.leaf-1 {
    animation: leafDrift1 30s linear infinite;
    animation-delay: 0s;
}
.leaf-2 {
    animation: leafDrift2 38s linear infinite;
    animation-delay: 8s;
    width: 30px;
    height: 50px;
}
.leaf-3 {
    animation: leafDrift3 25s linear infinite;
    animation-delay: 17s;
    width: 35px;
    height: 55px;
}

@keyframes leafDrift1 {
    0% { top: -10%; right: -5%; transform: rotate(0deg) scale(1); }
    100% { top: 110%; left: -5%; right: auto; transform: rotate(360deg) scale(0.8); }
}
@keyframes leafDrift2 {
    0% { top: -15%; right: -8%; transform: rotate(0deg) scale(0.9); }
    100% { top: 105%; left: -10%; right: auto; transform: rotate(-360deg) scale(1.2); }
}
@keyframes leafDrift3 {
    0% { top: -8%; right: -3%; transform: rotate(0deg) scale(1.1); }
    100% { top: 112%; left: -8%; right: auto; transform: rotate(270deg) scale(0.8); }
}

/* Glitch Overlay */
#glitch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    background: var(--color-gold);
    mix-blend-mode: screen;
}

#glitch-overlay.glitch-active {
    animation: glitchPulse 400ms ease-out forwards;
}

@keyframes glitchPulse {
    0% { clip-path: inset(0 0 0 0); opacity: 0.3; }
    10% { clip-path: inset(20% 0 30% 0); transform: translateX(3px); opacity: 0.4; }
    20% { clip-path: inset(60% 0 10% 0); transform: translateX(-5px); opacity: 0.3; }
    30% { clip-path: inset(5% 0 70% 0); transform: translateX(0); opacity: 0.2; }
    50% { clip-path: inset(40% 0 20% 0); transform: translateX(2px); opacity: 0.15; }
    100% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
}

/* Main Grid */
#main-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.6fr 1.8fr 0.4fr 1.2fr 1fr;
    width: 100%;
}

/* Acts */
.act {
    grid-column: 1 / -1;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mesh-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
}

.act-content {
    position: relative;
    z-index: 2;
    padding: 4rem 2rem;
    max-width: 70vw;
}

/* Act I */
.hero-title {
    font-family: 'Caveat', cursive;
    font-size: clamp(2.8rem, 9vw, 8rem);
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: var(--color-cream);
    transform: rotate(-2.5deg);
    margin-bottom: 2rem;
}

.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-left: 3rem;
}

/* Act II */
.act-2 .act-content {
    grid-column: 2 / 5;
    margin-left: 10%;
}

.act-heading {
    font-family: 'Caveat', cursive;
    font-size: clamp(2rem, 5vw, 5rem);
    line-height: 1.15;
    color: var(--color-cream);
    margin-bottom: 2.5rem;
}

.act-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.7;
    color: var(--color-cream);
    max-width: 55ch;
    margin-bottom: 1.5rem;
}

.act-text.secondary {
    font-style: italic;
    color: var(--color-gold-light);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

/* Act III: Shards */
.shards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 80vw;
    width: 100%;
}

.shard {
    background: var(--color-dark);
    border: 1px solid var(--color-brown);
    padding: 2rem;
    clip-path: polygon(5% 0%, 95% 5%, 100% 90%, 0% 100%);
    transition: transform 1.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.2s ease;
    opacity: 0;
    transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--rot, 0deg));
}

.shard p {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: var(--color-gold);
    text-align: center;
}

.shard-1 { --tx: -80px; --ty: 60px; --rot: -12deg; transition-delay: 0ms; }
.shard-2 { --tx: 100px; --ty: -40px; --rot: 8deg; transition-delay: 150ms; }
.shard-3 { --tx: -60px; --ty: -80px; --rot: 15deg; transition-delay: 300ms; }
.shard-4 { --tx: 90px; --ty: 50px; --rot: -10deg; transition-delay: 450ms; }
.shard-5 { --tx: -110px; --ty: 30px; --rot: 6deg; transition-delay: 600ms; clip-path: polygon(0% 5%, 90% 0%, 100% 95%, 8% 100%); }
.shard-6 { --tx: 70px; --ty: -60px; --rot: -14deg; transition-delay: 750ms; clip-path: polygon(3% 0%, 100% 8%, 95% 100%, 0% 92%); }
.shard-7 { --tx: -50px; --ty: 90px; --rot: 11deg; transition-delay: 900ms; clip-path: polygon(8% 0%, 92% 3%, 100% 95%, 5% 100%); }
.shard-8 { --tx: 80px; --ty: -30px; --rot: -7deg; transition-delay: 1050ms; clip-path: polygon(0% 0%, 95% 5%, 98% 100%, 3% 95%); }

.shard.assembled {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}

/* Act IV */
.final-heading {
    font-size: clamp(3rem, 10vw, 9rem);
    color: var(--color-gold);
    text-align: center;
    margin-bottom: 2rem;
}

.final-text {
    text-align: center;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    color: var(--color-cream);
    max-width: 40ch;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .shards-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .act-content {
        max-width: 90vw;
        padding: 2rem 1rem;
    }
    .hero-subtitle {
        margin-left: 1rem;
    }
}