/* ============================================
   chloe.cx — Fairycore Digital Keepsake Box
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
    --dried-rose: #C4828A;
    --sage-mist: #8AAE98;
    --antique-gold: #C4A95E;
    --parchment-cream: #F5F0E8;
    --twilight-indigo: #2E2A4A;
    --sepia-ink: #3D3228;
    --faded-lavender: #9B8FA3;
    --moth-wing-white: #FFF8F0;
    --warm-parchment: #F5EDE2;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.35rem);
    line-height: 1.85;
    color: var(--sepia-ink);
    background-color: var(--parchment-cream);
    overflow-x: hidden;
    cursor: default;
}

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

/* --- Viewport Vignette Overlay --- */
.viewport-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(46, 42, 74, 0.12) 100%);
}

/* ============================================
   CHAPTERS
   ============================================ */

.chapter {
    position: relative;
    width: 100%;
}

/* --- Chapter 1: The Garden Gate --- */
.chapter-garden-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, var(--parchment-cream) 60%, rgba(138, 174, 152, 0.12) 100%);
    overflow: hidden;
}

.gate-illustration {
    width: 90%;
    max-width: 700px;
    position: relative;
    z-index: 2;
}

.gate-svg {
    width: 100%;
    height: auto;
}

/* Gate animation - elements fade/grow in on load */
.gate-frame {
    opacity: 0;
    animation: gateFadeIn 1.8s ease-out 0.2s forwards;
}

.climbing-roses-left {
    opacity: 0;
    animation: gateFadeIn 2s ease-out 0.8s forwards;
}

.climbing-roses-right {
    opacity: 0;
    animation: gateFadeIn 2s ease-out 1.0s forwards;
}

.gate-title {
    opacity: 0;
    animation: gateFadeIn 2.2s ease-out 1.4s forwards;
}

.gate-background {
    opacity: 0;
    animation: gateFadeIn 1.5s ease-out 1.8s forwards;
}

@keyframes gateFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Pressed Flowers (floating) --- */
.pressed-flower {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.flower-1 {
    width: 80px;
    top: 15%;
    left: 8%;
    animation: flowerDrift 12s ease-in-out infinite;
}

.flower-2 {
    width: 60px;
    top: 25%;
    right: 10%;
    animation: flowerDrift 12s ease-in-out 3s infinite;
}

.flower-3 {
    width: 50px;
    top: 20%;
    right: 15%;
    animation: flowerDrift 12s ease-in-out 1.5s infinite;
}

.flower-4 {
    width: 55px;
    bottom: 15%;
    left: 12%;
    animation: flowerDrift 12s ease-in-out 4s infinite;
}

@keyframes flowerDrift {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2.5deg); }
    75% { transform: rotate(-2.5deg); }
}

/* --- Chapter 2: The Meadow --- */
.chapter-meadow {
    min-height: 250vh;
    padding: 10vh 0;
    background: var(--parchment-cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* --- Chapter 3: The Glade --- */
.chapter-glade {
    min-height: 150vh;
    padding: 12vh 0;
    background: linear-gradient(to bottom, var(--parchment-cream), var(--warm-parchment));
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* --- Chapter 4: The Twilight --- */
.chapter-twilight {
    min-height: 100vh;
    padding: 10vh 0 15vh;
    background: linear-gradient(to bottom, var(--warm-parchment), var(--twilight-indigo));
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ============================================
   MOTHS & BUTTERFLIES
   ============================================ */

.moth {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.moth-transition-1 {
    width: 70px;
    margin: 4vh auto 6vh;
    transform: rotate(-8deg);
}

.moth-transition-2 {
    width: 85px;
    margin: 6vh auto 8vh;
    transform: rotate(5deg);
}

.moth-transition-3 {
    width: 65px;
    margin: 4vh auto 5vh;
    transform: rotate(-3deg);
}

/* Wing flutter animation */
.moth-wing-left {
    transform-origin: right center;
    animation: wingFlutterLeft 4s ease-in-out infinite;
}

.moth-wing-right {
    transform-origin: left center;
    animation: wingFlutterRight 4s ease-in-out infinite;
}

@keyframes wingFlutterLeft {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.85); }
}

@keyframes wingFlutterRight {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.85); }
}

/* ============================================
   VIGNETTES
   ============================================ */

.deckled-clip {
    position: absolute;
}

.vignette {
    position: relative;
    max-width: 520px;
    width: 88%;
    margin: 3vh auto;
    /* Sleeping state */
    transform: scale(0.97) translateY(4px);
    filter: saturate(0.7) brightness(0.92);
    box-shadow: 0 2px 12px rgba(61, 50, 40, 0.08);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.vignette:hover {
    /* Awake / lifted state */
    transform: scale(1.0) translateY(0px);
    filter: saturate(1.0) brightness(1.0);
    box-shadow: 0 8px 32px rgba(196, 130, 138, 0.25);
}

.vignette-inner {
    background: var(--moth-wing-white);
    padding: clamp(1.8rem, 4vw, 3rem);
    position: relative;
    overflow: hidden;
}

/* Apply deckled clip paths to specific vignettes */
.vignette-1 .vignette-inner {
    clip-path: url(#deckle-1);
}

.vignette-2 .vignette-inner {
    clip-path: url(#deckle-2);
}

.vignette-3 .vignette-inner {
    clip-path: url(#deckle-3);
}

.vignette-4 .vignette-inner {
    clip-path: url(#deckle-4);
}

.vignette-5 .vignette-inner {
    clip-path: url(#deckle-5);
}

.vignette-glade-1 .vignette-inner {
    clip-path: url(#deckle-glade-1);
}

.vignette-glade-2 .vignette-inner {
    clip-path: url(#deckle-glade-2);
}

/* --- Vignette positioning (scattered collage feel) --- */
.vignette-1 {
    transform: scale(0.97) translateY(4px) rotate(-1.5deg);
    margin-left: 8%;
    align-self: flex-start;
    max-width: 480px;
}

.vignette-1:hover {
    transform: scale(1.0) translateY(0) rotate(-1.5deg);
}

.vignette-2 {
    transform: scale(0.97) translateY(4px) rotate(2deg);
    margin-right: 5%;
    align-self: flex-end;
    max-width: 500px;
    margin-top: -2vh;
}

.vignette-2:hover {
    transform: scale(1.0) translateY(0) rotate(2deg);
}

.vignette-3 {
    transform: scale(0.97) translateY(4px) rotate(-0.8deg);
    margin-left: 12%;
    align-self: flex-start;
    max-width: 540px;
}

.vignette-3:hover {
    transform: scale(1.0) translateY(0) rotate(-0.8deg);
}

.vignette-4 {
    transform: scale(0.97) translateY(4px) rotate(1.2deg);
    margin-right: 8%;
    align-self: flex-end;
    max-width: 470px;
    margin-top: -1vh;
}

.vignette-4:hover {
    transform: scale(1.0) translateY(0) rotate(1.2deg);
}

.vignette-5 {
    transform: scale(0.97) translateY(4px) rotate(-2.5deg);
    margin-left: 6%;
    align-self: flex-start;
    max-width: 510px;
}

.vignette-5:hover {
    transform: scale(1.0) translateY(0) rotate(-2.5deg);
}

/* --- Glade vignettes (larger, more spacious) --- */
.vignette-glade-1 {
    max-width: 700px;
    width: 92%;
    margin: 5vh auto;
    transform: scale(0.97) translateY(4px) rotate(0.5deg);
}

.vignette-glade-1:hover {
    transform: scale(1.0) translateY(0) rotate(0.5deg);
}

.vignette-glade-2 {
    max-width: 620px;
    width: 90%;
    margin: 6vh auto;
    transform: scale(0.97) translateY(4px) rotate(-1deg);
}

.vignette-glade-2:hover {
    transform: scale(1.0) translateY(0) rotate(-1deg);
}

/* --- Twilight vignettes (smaller, more translucent) --- */
.vignette-twilight-1,
.vignette-twilight-2 {
    max-width: 420px;
    opacity: 0.85;
}

.vignette-twilight-1 .vignette-inner,
.vignette-twilight-2 .vignette-inner {
    background: rgba(46, 42, 74, 0.3);
    border: 1px solid rgba(196, 165, 94, 0.15);
}

.vignette-twilight-1 {
    transform: scale(0.97) translateY(4px) rotate(1.8deg);
    margin: 4vh auto;
}

.vignette-twilight-1:hover {
    transform: scale(1.0) translateY(0) rotate(1.8deg);
}

.vignette-twilight-2 {
    transform: scale(0.97) translateY(4px) rotate(-1.2deg);
    margin: 3vh auto;
    max-width: 380px;
}

.vignette-twilight-2:hover {
    transform: scale(1.0) translateY(0) rotate(-1.2deg);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.vignette-label {
    display: block;
    font-family: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
    font-weight: 400;
    font-variant: all-small-caps;
    letter-spacing: 0.18em;
    font-size: clamp(0.65rem, 0.8vw + 0.3rem, 0.85rem);
    color: var(--faded-lavender);
    margin-bottom: 1em;
}

.vignette-text {
    font-family: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.35rem);
    line-height: 1.85;
    color: var(--sepia-ink);
    margin-bottom: 1em;
}

.vignette-text:last-of-type {
    margin-bottom: 0.5em;
}

.vignette-text em {
    font-weight: 300;
    font-style: italic;
}

.vignette-date {
    display: block;
    font-family: 'Josefin Sans', 'Century Gothic', 'Futura', sans-serif;
    font-weight: 400;
    font-variant: all-small-caps;
    letter-spacing: 0.18em;
    font-size: clamp(0.6rem, 0.7vw + 0.25rem, 0.75rem);
    color: var(--faded-lavender);
    margin-top: 1.2em;
    text-align: right;
}

/* --- Twilight text colors --- */
.twilight-label {
    color: rgba(155, 143, 163, 0.7);
}

.twilight-text {
    color: var(--moth-wing-white);
}

.twilight-date {
    color: rgba(155, 143, 163, 0.5);
}

/* --- Glade typography --- */
.decorative-word {
    display: block;
    font-family: 'Great Vibes', cursive;
    font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
    color: var(--antique-gold);
    margin-bottom: 0.6em;
    opacity: 0.75;
}

.glade-body {
    font-size: clamp(1.05rem, 1.3vw + 0.5rem, 1.4rem);
    line-height: 1.9;
}

/* ============================================
   ORNAMENTAL BORDERS
   ============================================ */

.ornamental-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.ornamental-border svg {
    width: 100%;
    height: 100%;
}

.border-path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: borderDraw 2s ease-out forwards;
    animation-play-state: paused;
}

.vignette:hover .border-path {
    animation-play-state: running;
}

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

/* --- Fairy Wing Pattern Background --- */
.wing-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30,5 Q45,15 55,30 Q45,45 30,55 Q15,45 5,30 Q15,15 30,5Z' fill='none' stroke='%23C4828A' stroke-width='0.5'/%3E%3Cline x1='30' y1='5' x2='30' y2='55' stroke='%23C4828A' stroke-width='0.3'/%3E%3Cline x1='5' y1='30' x2='55' y2='30' stroke='%23C4828A' stroke-width='0.3'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   INLINE ILLUSTRATIONS
   ============================================ */

.inline-illustration {
    margin: 1.5em auto;
    max-width: 300px;
    opacity: 0.8;
}

.inline-illustration svg {
    width: 100%;
    height: auto;
}

/* --- Glade illustration --- */
.glade-illustration {
    margin-bottom: 2em;
}

.glade-illustration svg {
    width: 100%;
    height: auto;
}

.glade-text {
    position: relative;
    z-index: 2;
}

/* ============================================
   GILDED DETAILS (marginalia)
   ============================================ */

.gilded-detail {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.gilded-key {
    width: 25px;
    margin: 2vh 0 2vh 75%;
    transform: rotate(15deg);
}

.gilded-thimble {
    width: 20px;
    margin: 2vh 0 2vh 20%;
    transform: rotate(-8deg);
}

.gilded-moon {
    width: 28px;
    margin: 3vh 0 3vh 70%;
    transform: rotate(12deg);
}

.gilded-crown {
    width: 26px;
    margin: 3vh 0 3vh 25%;
    transform: rotate(-5deg);
}

/* ============================================
   FINAL MOTH SCENE
   ============================================ */

.final-moth-scene {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 8vh auto 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glow-point {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--antique-gold);
    box-shadow: 0 0 20px 8px rgba(196, 165, 94, 0.3),
                0 0 40px 16px rgba(196, 165, 94, 0.15),
                0 0 60px 24px rgba(196, 165, 94, 0.08);
    animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

.final-moth {
    position: absolute;
    width: 45px;
    animation: mothOrbit 12s linear infinite;
}

@keyframes mothOrbit {
    from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

.sign-off {
    text-align: center;
    margin-top: 4vh;
}

.sign-off-text {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.8rem, 3vw + 0.5rem, 2.8rem);
    color: var(--antique-gold);
    opacity: 0.5;
}

/* ============================================
   NAVIGATION BUTTERFLY
   ============================================ */

.nav-butterfly {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 38px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10000;
    padding: 0;
    animation: butterflyPulse 3s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

.nav-butterfly:hover {
    opacity: 0.8;
}

.nav-butterfly svg {
    width: 100%;
    height: 100%;
}

.nav-wing-left {
    transform-origin: right center;
    animation: wingFlutterLeft 3s ease-in-out infinite;
}

.nav-wing-right {
    transform-origin: left center;
    animation: wingFlutterRight 3s ease-in-out infinite;
}

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

/* ============================================
   NAVIGATION OVERLAY
   ============================================ */

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(46, 42, 74, 0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.nav-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.nav-link {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.8rem, 4vw + 0.5rem, 3.2rem);
    color: var(--moth-wing-white);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    transform: translateY(0);
}

.nav-link:hover {
    opacity: 1;
    color: var(--antique-gold);
    transform: translateY(-3px);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .vignette {
        width: 92%;
        max-width: none;
    }

    .vignette-1,
    .vignette-2,
    .vignette-3,
    .vignette-4,
    .vignette-5 {
        margin-left: auto;
        margin-right: auto;
        align-self: center;
    }

    .vignette-glade-1,
    .vignette-glade-2 {
        width: 94%;
    }

    .gilded-key { margin-left: 80%; }
    .gilded-thimble { margin-left: 10%; }
    .gilded-moon { margin-left: 78%; }
    .gilded-crown { margin-left: 15%; }

    .pressed-flower {
        opacity: 0.6;
    }

    .gate-illustration {
        width: 95%;
    }
}

@media (max-width: 480px) {
    .vignette-inner {
        padding: clamp(1.2rem, 3vw, 2rem);
    }

    .nav-butterfly {
        bottom: 16px;
        right: 16px;
        width: 36px;
        height: 32px;
    }
}