/* ============================================================
   tsundere.tech — Jewel Cabinet Stylesheet
   Palette:
     #2D0057  Amethyst Deep (primary bg)
     #0A1628  Sapphire Midnight (secondary bg)
     #0D4F3C  Emerald Vein (act 3 bg)
     #8B0038  Tsundere Ruby (accent)
     #E8DEFF  Alexandrite Ice (display type)
     #D4C5F9  Topaz Pale (body text)
     #FFD166  Citrine Flash (single-use warm reveal)
     #006D6F  Tourmaline Teal (gem faces, act 3)
   Fonts: Playfair Display 900, DM Serif Text 400/italic
   NO white. NO pure black. NO gray.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=DM+Serif+Text:ital@0;1&display=swap');

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

html {
    height: 100%;
}

body {
    margin: 0;
    background: #2D0057;
    color: #D4C5F9;
    font-family: 'DM Serif Text', serif;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
    transition: background 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Scroll Snap Sections ── */
section {
    scroll-snap-align: start;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ── Column ── */
.column {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* ── Display Typography ── */
.display-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(56px, 10vw, 144px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232, 222, 255, 0.95);
    line-height: 0.95;
    margin: 0;
}

/* ── Body Typography ── */
.body-text {
    font-family: 'DM Serif Text', serif;
    font-size: 18px;
    line-height: 1.85;
    color: #D4C5F9;
    letter-spacing: 0.01em;
    margin-bottom: 1.6em;
}

.body-italic {
    font-style: italic;
    color: rgba(232, 222, 255, 0.85);
}

.body-text em {
    font-style: italic;
    color: rgba(232, 222, 255, 0.9);
}

/* ── Pull Quote ── */
.pull-quote-wrapper {
    margin: 2.4em 0;
    padding-left: 28px;
    border-left: 2px solid #8B0038;
}

.pull-quote {
    font-family: 'DM Serif Text', serif;
    font-size: 24px;
    font-style: italic;
    line-height: 1.6;
    color: rgba(232, 222, 255, 0.9);
    letter-spacing: 0.01em;
}

/* ── SVG Flourish ── */
.svg-flourish {
    display: block;
    width: 100%;
    margin: 2em 0;
    opacity: 0.8;
}

/* ── Section Numbers ── */
.section-number {
    position: absolute;
    top: 32px;
    left: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    opacity: 0.65;
}

.section-number-light .section-numeral {
    color: rgba(39, 174, 96, 0.8);
}

.section-numeral {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.2em;
    color: rgba(232, 222, 255, 0.5);
    text-transform: uppercase;
}

/* ============================================================
   GEM CONSTRUCTION SYSTEM — CSS 3D Transforms
   ============================================================ */

.gem {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    position: relative;
}

/* Gem Face Base */
.gem-face {
    position: absolute;
    opacity: 0.82;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backface-visibility: visible;
}

/* Cube face geometry: 160px default */
.gem-face-front  { background: linear-gradient(135deg, var(--face-color), color-mix(in srgb, var(--face-color) 70%, #E8DEFF 30%)); width: 100%; height: 100%; transform: translateZ(80px); }
.gem-face-back   { background: linear-gradient(315deg, var(--face-color), color-mix(in srgb, var(--face-color) 60%, #0A1628 40%)); width: 100%; height: 100%; transform: rotateY(180deg) translateZ(80px); }
.gem-face-right  { background: linear-gradient(225deg, var(--face-color), color-mix(in srgb, var(--face-color) 75%, #E8DEFF 25%)); width: 100%; height: 100%; transform: rotateY(90deg) translateZ(80px); }
.gem-face-left   { background: linear-gradient(45deg, var(--face-color), color-mix(in srgb, var(--face-color) 55%, #0A1628 45%)); width: 100%; height: 100%; transform: rotateY(-90deg) translateZ(80px); }
.gem-face-top    { background: linear-gradient(180deg, color-mix(in srgb, var(--face-color) 80%, #E8DEFF 20%), var(--face-color)); width: 100%; height: 100%; transform: rotateX(90deg) translateZ(80px); }
.gem-face-bottom { background: linear-gradient(0deg, color-mix(in srgb, var(--face-color) 65%, #0A1628 35%), var(--face-color)); width: 100%; height: 100%; transform: rotateX(-90deg) translateZ(80px); }

/* ============================================================
   ACT 1: THE THRESHOLD
   ============================================================ */

#act-threshold {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.threshold-content {
    padding: 80px 0 60px;
}

.threshold-title {
    font-size: clamp(72px, 14vw, 144px);
}

.threshold-subtitle {
    font-size: clamp(72px, 14vw, 144px);
    color: rgba(139, 0, 56, 0.9);
    margin-bottom: 40px;
}

.threshold-kicker {
    font-size: 20px;
    color: rgba(212, 197, 249, 0.8);
    max-width: 480px;
    margin-bottom: 0;
}

/* Act 1 Gem — bleeds right of column */
.gem-wrapper {
    width: 180px;
    height: 180px;
    perspective: 600px;
    position: absolute;
    z-index: 3;
}

.act1-gem-wrapper {
    right: calc(50% - 340px - 20px);
    top: 50%;
    transform: translateY(-50%);
}

.act1-gem {
    animation: rotateGemY 28s linear infinite;
}

@keyframes rotateGemY {
    from { transform: rotateY(0deg) rotateX(12deg); }
    to   { transform: rotateY(360deg) rotateX(12deg); }
}

/* Scroll hint */
.scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollBounce 2.4s ease-in-out infinite;
    z-index: 5;
}

.scroll-dot {
    animation: scrollDotMove 2.4s ease-in-out infinite;
    transform-origin: center;
}

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

@keyframes scrollDotMove {
    0%   { transform: translateY(0); opacity: 0.6; }
    50%  { transform: translateY(8px); opacity: 0.9; }
    100% { transform: translateY(0); opacity: 0.6; }
}

/* ============================================================
   ACT 2: THE REVELATION
   ============================================================ */

#act-revelation {
    background: transparent;
    min-height: 120vh;
    padding: 80px 0;
}

.revelation-column {
    max-width: 580px;
    padding-top: 20px;
}

.revelation-header {
    font-size: clamp(40px, 7vw, 88px);
    margin-bottom: 8px;
}

/* Margin Gems — stagger +60px per item, left margin only */
.margin-gem-container {
    position: absolute;
    left: 0;
    top: 80px;
    width: 120px;
    left: calc(50% - 340px - 120px);
    z-index: 3;
}

.margin-gem {
    position: absolute;
    width: 80px;
    height: 80px;
    perspective: 400px;
}

.margin-gem-1 { top: 120px; }
.margin-gem-2 { top: 180px; } /* +60px stagger */
.margin-gem-3 { top: 240px; } /* +60px stagger */
.margin-gem-4 { top: 300px; } /* +60px stagger */

/* Small gems use half dimensions for faces */
.gem-small .gem-face-front  { transform: translateZ(40px); }
.gem-small .gem-face-back   { transform: rotateY(180deg) translateZ(40px); }
.gem-small .gem-face-right  { transform: rotateY(90deg) translateZ(40px); }
.gem-small .gem-face-left   { transform: rotateY(-90deg) translateZ(40px); }
.gem-small .gem-face-top    { transform: rotateX(90deg) translateZ(40px); }
.gem-small .gem-face-bottom { transform: rotateX(-90deg) translateZ(40px); }

#marginGem1 { animation: rotateGemY 32s linear infinite; }
#marginGem2 { animation: rotateGemY 24s linear infinite reverse; }
#marginGem3 { animation: rotateGemZ 36s linear infinite; }
#marginGem4 { animation: rotateGemY 20s linear infinite; }

@keyframes rotateGemZ {
    from { transform: rotateZ(0deg) rotateX(12deg); }
    to   { transform: rotateZ(360deg) rotateX(12deg); }
}

/* ============================================================
   ACT 3: THE GEMFIELD
   ============================================================ */

#act-gemfield {
    background: #0D4F3C;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gemfield-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Each gem wrapper in the field */
.gemfield-gem-wrapper {
    position: absolute;
    perspective: 700px;
}

.gf-gem {
    width: 100%;
    height: 100%;
}

/* Gemfield gem sizes and positions */
.gf-gem-1 {
    width: 200px;
    height: 200px;
    top: 12%;
    left: 8%;
}
.gf-gem-1 .gem-face-front  { transform: translateZ(100px); }
.gf-gem-1 .gem-face-back   { transform: rotateY(180deg) translateZ(100px); }
.gf-gem-1 .gem-face-right  { transform: rotateY(90deg) translateZ(100px); }
.gf-gem-1 .gem-face-left   { transform: rotateY(-90deg) translateZ(100px); }
.gf-gem-1 .gem-face-top    { transform: rotateX(90deg) translateZ(100px); }
.gf-gem-1 .gem-face-bottom { transform: rotateX(-90deg) translateZ(100px); }

.gf-gem-2 {
    width: 140px;
    height: 140px;
    top: 55%;
    left: 15%;
}
.gf-gem-2 .gem-face-front  { transform: translateZ(70px); }
.gf-gem-2 .gem-face-back   { transform: rotateY(180deg) translateZ(70px); }
.gf-gem-2 .gem-face-right  { transform: rotateY(90deg) translateZ(70px); }
.gf-gem-2 .gem-face-left   { transform: rotateY(-90deg) translateZ(70px); }
.gf-gem-2 .gem-face-top    { transform: rotateX(90deg) translateZ(70px); }
.gf-gem-2 .gem-face-bottom { transform: rotateX(-90deg) translateZ(70px); }

.gf-gem-3 {
    width: 180px;
    height: 180px;
    top: 30%;
    left: 38%;
}
.gf-gem-3 .gem-face-front  { transform: translateZ(90px); }
.gf-gem-3 .gem-face-back   { transform: rotateY(180deg) translateZ(90px); }
.gf-gem-3 .gem-face-right  { transform: rotateY(90deg) translateZ(90px); }
.gf-gem-3 .gem-face-left   { transform: rotateY(-90deg) translateZ(90px); }
.gf-gem-3 .gem-face-top    { transform: rotateX(90deg) translateZ(90px); }
.gf-gem-3 .gem-face-bottom { transform: rotateX(-90deg) translateZ(90px); }

.gf-gem-4 {
    width: 160px;
    height: 160px;
    top: 10%;
    right: 20%;
}
.gf-gem-4 .gem-face-front  { transform: translateZ(80px); }
.gf-gem-4 .gem-face-back   { transform: rotateY(180deg) translateZ(80px); }
.gf-gem-4 .gem-face-right  { transform: rotateY(90deg) translateZ(80px); }
.gf-gem-4 .gem-face-left   { transform: rotateY(-90deg) translateZ(80px); }
.gf-gem-4 .gem-face-top    { transform: rotateX(90deg) translateZ(80px); }
.gf-gem-4 .gem-face-bottom { transform: rotateX(-90deg) translateZ(80px); }

.gf-gem-5 {
    width: 120px;
    height: 120px;
    top: 65%;
    right: 10%;
}
.gf-gem-5 .gem-face-front  { transform: translateZ(60px); }
.gf-gem-5 .gem-face-back   { transform: rotateY(180deg) translateZ(60px); }
.gf-gem-5 .gem-face-right  { transform: rotateY(90deg) translateZ(60px); }
.gf-gem-5 .gem-face-left   { transform: rotateY(-90deg) translateZ(60px); }
.gf-gem-5 .gem-face-top    { transform: rotateX(90deg) translateZ(60px); }
.gf-gem-5 .gem-face-bottom { transform: rotateX(-90deg) translateZ(60px); }

.gf-gem-6 {
    width: 100px;
    height: 100px;
    top: 75%;
    left: 50%;
}
.gf-gem-6 .gem-face-front  { transform: translateZ(50px); }
.gf-gem-6 .gem-face-back   { transform: rotateY(180deg) translateZ(50px); }
.gf-gem-6 .gem-face-right  { transform: rotateY(90deg) translateZ(50px); }
.gf-gem-6 .gem-face-left   { transform: rotateY(-90deg) translateZ(50px); }
.gf-gem-6 .gem-face-top    { transform: rotateX(90deg) translateZ(50px); }
.gf-gem-6 .gem-face-bottom { transform: rotateX(-90deg) translateZ(50px); }

.gf-gem-7 {
    width: 240px;
    height: 240px;
    top: 35%;
    right: 5%;
}
.gf-gem-7 .gem-face-front  { transform: translateZ(120px); }
.gf-gem-7 .gem-face-back   { transform: rotateY(180deg) translateZ(120px); }
.gf-gem-7 .gem-face-right  { transform: rotateY(90deg) translateZ(120px); }
.gf-gem-7 .gem-face-left   { transform: rotateY(-90deg) translateZ(120px); }
.gf-gem-7 .gem-face-top    { transform: rotateX(90deg) translateZ(120px); }
.gf-gem-7 .gem-face-bottom { transform: rotateX(-90deg) translateZ(120px); }

/* Gemfield gem animations — each at different speed and axis */
#gfGem1 { animation: rotateGemY 20s linear infinite; }
#gfGem2 { animation: rotateGemXY 34s linear infinite; }
#gfGem3 { animation: rotateGemY 16s linear infinite reverse; }
#gfGem4 { animation: rotateGemZ 26s linear infinite; }
#gfGem5 { animation: rotateGemXY 40s linear infinite reverse; }
#gfGem6 { animation: rotateGemY 14s linear infinite; }
#gfGem7 { animation: rotateGemZ 44s linear infinite reverse; }

@keyframes rotateGemXY {
    from { transform: rotateY(0deg) rotateX(0deg); }
    to   { transform: rotateY(360deg) rotateX(360deg); }
}

/* ============================================================
   ACT 4: THE CONFESSION
   ============================================================ */

#act-confession {
    background: transparent;
    min-height: 100vh;
    padding: 80px 0;
}

.confession-column {
    padding-top: 20px;
}

.confession-header {
    font-size: clamp(28px, 4vw, 48px);
    color: rgba(232, 222, 255, 0.7);
    margin-bottom: 8px;
    letter-spacing: 0.12em;
}

/* Confession gem — first gem inside the column boundary */
.confession-gem-wrapper {
    width: 140px;
    height: 140px;
    perspective: 600px;
    float: right;
    margin: 16px 0 24px 32px;
    position: relative;
    z-index: 3;
}

.confession-gem {
    animation: rotateGemXY 38s linear infinite;
}

/* Clearfix */
.confession-column::after {
    content: '';
    display: table;
    clear: both;
}

.confession-gem-wrapper .gem-face-front  { transform: translateZ(70px); }
.confession-gem-wrapper .gem-face-back   { transform: rotateY(180deg) translateZ(70px); }
.confession-gem-wrapper .gem-face-right  { transform: rotateY(90deg) translateZ(70px); }
.confession-gem-wrapper .gem-face-left   { transform: rotateY(-90deg) translateZ(70px); }
.confession-gem-wrapper .gem-face-top    { transform: rotateX(90deg) translateZ(70px); }
.confession-gem-wrapper .gem-face-bottom { transform: rotateX(-90deg) translateZ(70px); }

/* ============================================================
   ACT 5: THE WINK
   ============================================================ */

#act-wink {
    background: transparent;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0 60px;
}

.wink-column {
    padding-top: 0;
}

.wink-header {
    font-size: clamp(72px, 16vw, 144px);
    line-height: 0.9;
    margin-bottom: 32px;
    color: rgba(232, 222, 255, 0.95);
}

.wink-body {
    max-width: 520px;
    margin-bottom: 0;
}

/* Act 5 Gem — center-bottom, anthropomorphized nod animation */
.act5-gem-wrapper {
    width: 200px;
    height: 200px;
    perspective: 700px;
    position: absolute;
    bottom: 120px;
    right: calc(50% - 340px - 60px);
    z-index: 4;
    transition: box-shadow 0.3s ease-out;
}

.act5-gem {
    animation: tsundereNod 22s linear infinite;
}

@keyframes tsundereNod {
    0%   { transform: rotateY(0deg) rotateX(12deg); }
    40%  { transform: rotateY(144deg) rotateX(12deg); }
    52%  { transform: rotateY(162deg) rotateX(32deg); }
    60%  { transform: rotateY(180deg) rotateX(12deg); }
    100% { transform: rotateY(360deg) rotateX(12deg); }
}

/* Citrine Flash — the warm reveal, used ONLY here */
.act5-gem-wrapper.warm-flash {
    box-shadow: 0 0 40px 8px #FFD166;
}

.act5-gem-wrapper .gem-face-front  { transform: translateZ(100px); }
.act5-gem-wrapper .gem-face-back   { transform: rotateY(180deg) translateZ(100px); }
.act5-gem-wrapper .gem-face-right  { transform: rotateY(90deg) translateZ(100px); }
.act5-gem-wrapper .gem-face-left   { transform: rotateY(-90deg) translateZ(100px); }
.act5-gem-wrapper .gem-face-top    { transform: rotateX(90deg) translateZ(100px); }
.act5-gem-wrapper .gem-face-bottom { transform: rotateX(-90deg) translateZ(100px); }

.wink-close-column {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 680px;
    max-width: 90vw;
    padding: 0 24px;
}

.wink-close-text {
    font-family: 'DM Serif Text', serif;
    font-size: 13px;
    font-style: italic;
    letter-spacing: 0.15em;
    color: rgba(212, 197, 249, 0.4);
    text-align: center;
}

/* ============================================================
   RESPONSIVE — Maintain single-column discipline at small sizes
   ============================================================ */

@media (max-width: 900px) {
    .margin-gem-container {
        display: none;
    }

    .act1-gem-wrapper {
        right: 16px;
        width: 120px;
        height: 120px;
    }

    .act1-gem-wrapper .gem-face-front  { transform: translateZ(60px); }
    .act1-gem-wrapper .gem-face-back   { transform: rotateY(180deg) translateZ(60px); }
    .act1-gem-wrapper .gem-face-right  { transform: rotateY(90deg) translateZ(60px); }
    .act1-gem-wrapper .gem-face-left   { transform: rotateY(-90deg) translateZ(60px); }
    .act1-gem-wrapper .gem-face-top    { transform: rotateX(90deg) translateZ(60px); }
    .act1-gem-wrapper .gem-face-bottom { transform: rotateX(-90deg) translateZ(60px); }

    .act5-gem-wrapper {
        right: 16px;
        width: 140px;
        height: 140px;
    }

    .act5-gem-wrapper .gem-face-front  { transform: translateZ(70px); }
    .act5-gem-wrapper .gem-face-back   { transform: rotateY(180deg) translateZ(70px); }
    .act5-gem-wrapper .gem-face-right  { transform: rotateY(90deg) translateZ(70px); }
    .act5-gem-wrapper .gem-face-left   { transform: rotateY(-90deg) translateZ(70px); }
    .act5-gem-wrapper .gem-face-top    { transform: rotateX(90deg) translateZ(70px); }
    .act5-gem-wrapper .gem-face-bottom { transform: rotateX(-90deg) translateZ(70px); }
}

@media (max-width: 600px) {
    .display-headline {
        font-size: clamp(44px, 13vw, 88px);
    }

    .threshold-title,
    .threshold-subtitle {
        font-size: clamp(56px, 16vw, 88px);
    }

    .wink-header {
        font-size: clamp(56px, 18vw, 100px);
    }

    .section-number {
        top: 16px;
        left: 16px;
    }

    .gemfield-stage .gf-gem-1,
    .gemfield-stage .gf-gem-7 {
        display: none;
    }
}