/* ronpa.day — Design Language Styles */
/* Neubrutalism x Opulent Grandeur */

:root {
    --marble-base: #f0ebe3;
    --marble-vein: #c9a87c;
    --marble-shadow: #3d2b1f;
    --neu-border: #0a0a0a;
    --gold-start: #d4a843;
    --gold-end: #8b6914;
    --floral-accent: #8c1c3e;
    --crack-highlight: #f5e6cc;
    --counter-text: #2a2a2a;
    --scroll-progress: 0;
    --border-width: 6px;
}

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

html {
    scroll-behavior: auto;
}

body {
    background: var(--marble-base);
    color: var(--counter-text);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

#scroll-container {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

/* === ACTS === */
.act {
    min-height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
}

#hero {
    min-height: 120vh;
}

/* === MARBLE SURFACE === */
.marble-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(27deg, transparent 49.5%, rgba(201,168,124,0.1) 49.5%, rgba(201,168,124,0.1) 50.5%, transparent 50.5%),
        linear-gradient(43deg, transparent 49.2%, rgba(201,168,124,0.08) 49.2%, rgba(201,168,124,0.08) 50.8%, transparent 50.8%),
        linear-gradient(65deg, transparent 49%, rgba(201,168,124,0.12) 49%, rgba(201,168,124,0.12) 51%, transparent 51%),
        linear-gradient(35deg, transparent 48.5%, rgba(201,168,124,0.06) 48.5%, rgba(201,168,124,0.06) 51.5%, transparent 51.5%),
        linear-gradient(55deg, transparent 49.7%, rgba(201,168,124,0.09) 49.7%, rgba(201,168,124,0.09) 50.3%, transparent 50.3%),
        radial-gradient(ellipse at 20% 30%, rgba(61,43,31,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(61,43,31,0.03) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(61,43,31,0.05) 0%, transparent 45%),
        var(--marble-base);
    filter: contrast(1.05) brightness(1.02);
}

.marble-fractured {
    background:
        linear-gradient(27deg, transparent 49.5%, rgba(180,150,110,0.12) 49.5%, rgba(180,150,110,0.12) 50.5%, transparent 50.5%),
        linear-gradient(43deg, transparent 49.2%, rgba(160,130,100,0.1) 49.2%, rgba(160,130,100,0.1) 50.8%, transparent 50.8%),
        linear-gradient(65deg, transparent 49%, rgba(140,110,90,0.14) 49%, rgba(140,110,90,0.14) 51%, transparent 51%),
        radial-gradient(ellipse at 30% 40%, rgba(61,43,31,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 70%, rgba(61,43,31,0.05) 0%, transparent 45%),
        #ebe5db;
}

.marble-shattered {
    background:
        linear-gradient(27deg, transparent 49.5%, rgba(140,120,100,0.15) 49.5%, rgba(140,120,100,0.15) 50.5%, transparent 50.5%),
        linear-gradient(43deg, transparent 49.2%, rgba(120,100,80,0.12) 49.2%, rgba(120,100,80,0.12) 50.8%, transparent 50.8%),
        linear-gradient(65deg, transparent 49%, rgba(100,80,60,0.16) 49%, rgba(100,80,60,0.16) 51%, transparent 51%),
        linear-gradient(52deg, transparent 49.3%, rgba(90,70,50,0.1) 49.3%, rgba(90,70,50,0.1) 50.7%, transparent 50.7%),
        radial-gradient(ellipse at 25% 35%, rgba(61,43,31,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 65% 55%, rgba(61,43,31,0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 45% 75%, rgba(61,43,31,0.09) 0%, transparent 40%),
        #ddd6ca;
    filter: contrast(1.08) brightness(0.98);
}

.marble-noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* === FLORAL BORDERS (Hero) === */
.floral-border {
    position: absolute;
    z-index: 20;
    pointer-events: none;
}

.floral-border-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
}

.floral-border-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
}

.floral-border-left {
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
}

.floral-border-right {
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
}

.floral-vine {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawVine 3s ease-out forwards;
}

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

/* === HERO === */
#hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
}

#ronpa-seal {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(8rem, 25vw, 22rem);
    letter-spacing: -0.02em;
    line-height: 0.95;
    background: linear-gradient(135deg, #d4a843, #8b6914);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

#hero-subtitle {
    font-family: 'Source Serif 4', serif;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.6rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--marble-shadow);
    margin-top: 1.5rem;
    opacity: 0.7;
}

/* === ACT LABELS === */
.act-label {
    position: absolute;
    top: 5%;
    left: 5%;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: var(--floral-accent);
    letter-spacing: 0.05em;
    z-index: 15;
    opacity: 0.6;
}

/* === NEUBRUTALIST FRAMES === */
.neubrutalist-frame {
    border: var(--border-width) solid var(--neu-border);
    box-shadow: 8px 8px 0px var(--neu-border);
    background: rgba(240, 235, 227, 0.92);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.neubrutalist-frame:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px var(--neu-border);
}

.frame-cracked {
    border-width: 8px;
    border-radius: 0 0 0 8px;
}

.panel-inner {
    padding: clamp(2rem, 4vw, 4rem);
}

/* === ACT I — Proposition === */
#proposition-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 700px;
    width: 85%;
    z-index: 10;
}

.proposition-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: var(--neu-border);
    margin-bottom: 1.5rem;
}

.proposition-text {
    font-family: 'Source Serif 4', serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    letter-spacing: 0.01em;
    line-height: 1.65;
    color: var(--counter-text);
}

/* === ACT II — Fracture === */
#fracture-panel {
    position: absolute;
    top: 15%;
    left: 10%;
    max-width: 550px;
    width: 45%;
    z-index: 10;
}

.counter-box {
    position: absolute;
    z-index: 12;
    max-width: 350px;
    border-width: 4px;
    box-shadow: 6px 6px 0px var(--neu-border);
    background: rgba(245, 230, 204, 0.95);
}

#counter-argument-1 {
    top: 55%;
    right: 8%;
    width: 35%;
    transform: rotate(-1.5deg);
}

#counter-argument-2 {
    bottom: 12%;
    right: 15%;
    width: 30%;
    transform: rotate(1deg);
}

.counter-text {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.5vw, 1.3rem);
    letter-spacing: 0.03em;
    line-height: 1.5;
    color: var(--floral-accent);
    padding: 1.2rem;
}

/* Annotation */
.annotation {
    position: absolute;
    top: 35%;
    left: 58%;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.annotation.visible {
    opacity: 1;
}

.annotation-text {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    color: var(--floral-accent);
    white-space: nowrap;
}

/* === ACT III — Collapse === */
.fragment {
    position: absolute;
    z-index: 10;
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.8rem);
    color: var(--counter-text);
    opacity: 0.6;
    letter-spacing: 0.01em;
}

.fragment-1 { top: 12%; left: 15%; transform: rotate(-12deg); }
.fragment-2 { top: 22%; right: 20%; transform: rotate(8deg); }
.fragment-3 { top: 38%; left: 8%; transform: rotate(-5deg); }
.fragment-4 { top: 45%; right: 12%; transform: rotate(15deg); }
.fragment-5 { bottom: 35%; left: 25%; transform: rotate(-20deg); }
.fragment-6 { bottom: 28%; right: 30%; transform: rotate(10deg); }
.fragment-7 { bottom: 18%; left: 40%; transform: rotate(-7deg); }
.fragment-8 { top: 30%; left: 55%; transform: rotate(18deg); }

#ronpa-final {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(6rem, 20vw, 16rem);
    letter-spacing: -0.02em;
    line-height: 0.95;
    background: linear-gradient(135deg, #d4a843, #8b6914);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
}

/* === FRACTURE LINES === */
.fracture-line {
    position: absolute;
    z-index: 5;
    pointer-events: none;
}

.fracture-line::before {
    content: '';
    position: absolute;
    background: var(--crack-highlight);
}

.fracture-1::before { width: 200px; height: 1px; top: 30%; left: 10%; transform: rotate(8deg); }
.fracture-2::before { width: 150px; height: 1px; top: 55%; right: 15%; transform: rotate(-12deg); }
.fracture-3::before { width: 180px; height: 1px; bottom: 25%; left: 30%; transform: rotate(5deg); }
.fracture-4::before { width: 120px; height: 1px; top: 70%; right: 25%; transform: rotate(-7deg); }

/* Dense fractures for Act III */
.fracture-dense-1::before { width: 250px; height: 1px; top: 15%; left: 5%; transform: rotate(10deg); }
.fracture-dense-2::before { width: 300px; height: 1px; top: 25%; right: 10%; transform: rotate(-8deg); }
.fracture-dense-3::before { width: 200px; height: 1px; top: 40%; left: 20%; transform: rotate(14deg); }
.fracture-dense-4::before { width: 280px; height: 1px; top: 55%; right: 5%; transform: rotate(-11deg); }
.fracture-dense-5::before { width: 220px; height: 1px; bottom: 35%; left: 10%; transform: rotate(6deg); }
.fracture-dense-6::before { width: 260px; height: 1px; bottom: 25%; right: 15%; transform: rotate(-13deg); }
.fracture-dense-7::before { width: 180px; height: 1px; bottom: 15%; left: 35%; transform: rotate(9deg); }
.fracture-dense-8::before { width: 240px; height: 1px; top: 70%; left: 45%; transform: rotate(-5deg); }

/* === FLORAL INTRUSIONS (Act II) === */
.floral-intrusion {
    position: absolute;
    z-index: 20;
    pointer-events: none;
}

.floral-intrusion-left {
    top: 0;
    left: 0;
    width: 15%;
    height: 100%;
}

.floral-intrusion-right {
    top: 0;
    right: 0;
    width: 15%;
    height: 100%;
}

.floral-intrusion-bottom {
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 20%;
}

.intrusion-svg {
    width: 100%;
    height: 100%;
}

.floral-grow {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.5s ease-out;
}

.floral-grow.animated {
    stroke-dashoffset: 0;
}

.floral-leaf {
    opacity: 0;
    transition: opacity 1s ease-out 0.8s;
}

.floral-leaf.animated {
    opacity: 0.3;
}

/* === FLORAL OVERGROWN (Act III) === */
.floral-overgrown {
    position: absolute;
    z-index: 20;
    pointer-events: none;
}

.floral-overgrown-1 {
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
}

.floral-overgrown-2 {
    top: 0;
    right: 0;
    width: 25%;
    height: 100%;
}

/* === SHAKE ANIMATION === */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shaking {
    animation: shake 0.4s ease-in-out;
}

.shakeable {
    cursor: pointer;
}

/* Fragment shake preserves rotation */
@keyframes shakeFragment {
    0%, 100% { translate: 0 0; }
    10%, 30%, 50%, 70%, 90% { translate: -4px 0; }
    20%, 40%, 60%, 80% { translate: 4px 0; }
}

.fragment-shaking {
    animation: shakeFragment 0.4s ease-in-out;
}

/* === SCROLL PROGRESS === */
#scroll-progress {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #d4a843, #8b6914);
    z-index: 100;
    transition: width 0.1s linear;
}

/* === FRAME DISSOLUTION (Act III context) === */
.frame-dissolved {
    border-style: dashed;
    transition: border-style 0.5s;
}