/* ==========================================
   GGIGGL.com - Wabi-Sabi Digital Experience
   Colors: #F2EDE4, #3B2F2F, #D4CFBC, #7A6874, #C4867A, #B8A56A, #8B9DAF, #C7BCA8
   Fonts: Fraunces, Anybody, Caveat, JetBrains Mono
   ========================================== */

/* --- CSS Custom Properties --- */
:root {
    --aged-linen: #F2EDE4;
    --faded-sage: #D4CFBC;
    --walnut-ink: #3B2F2F;
    --dusty-plum: #7A6874;
    --pressed-rose: #C4867A;
    --tarnished-gold: #B8A56A;
    --washed-indigo: #8B9DAF;
    --frosted-cream: rgba(242, 237, 228, 0.72);
    --cracked-clay: #C7BCA8;

    --font-headline: 'Fraunces', serif;
    --font-body: 'Anybody', sans-serif;
    --font-accent: 'Caveat', cursive;
    --font-mono: 'JetBrains Mono', monospace;

    --transition-morph: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
    --shadow-card: inset 0 1px 2px rgba(255,255,255,0.4), 0 8px 32px rgba(59,47,47,0.08);
    --shadow-card-hover: inset 0 1px 3px rgba(255,255,255,0.5), 0 12px 40px rgba(59,47,47,0.12);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-variation-settings: 'wdth' clamp(75, 2vw + 70, 100);
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--walnut-ink);
    background-color: var(--aged-linen);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Noise Overlay --- */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* --- Floating Nav Indicator --- */
.nav-indicator {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    background: var(--frosted-cream);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-morph);
    box-shadow: var(--shadow-card);
}

.nav-indicator:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-card-hover);
}

.nav-indicator svg {
    transition: var(--transition-morph);
}

.nav-indicator:hover svg {
    transform: rotate(15deg);
}

/* --- Table of Contents Overlay --- */
.toc-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 47, 47, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.toc-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.toc-card {
    background: var(--frosted-cream);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 1.2rem 1.3rem 1.25rem 1.15rem;
    padding: 3rem;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-card);
    transform: translateY(20px) rotate(-0.5deg);
    transition: var(--transition-morph);
}

.toc-overlay.active .toc-card {
    transform: translateY(0) rotate(-0.5deg);
}

.toc-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--walnut-ink);
    cursor: pointer;
    line-height: 1;
    transition: var(--transition-morph);
}

.toc-close:hover {
    color: var(--pressed-rose);
    transform: rotate(90deg);
}

.toc-title {
    font-family: var(--font-headline);
    font-size: 1.8rem;
    font-variation-settings: 'WONK' 1, 'opsz' 36, 'wght' 500;
    color: var(--walnut-ink);
    margin-bottom: 1.5rem;
}

.toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toc-link {
    font-family: var(--font-accent);
    font-size: 1.3rem;
    color: var(--walnut-ink);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: var(--transition-morph);
}

.toc-link:hover {
    background: rgba(196, 134, 122, 0.15);
    color: var(--pressed-rose);
    padding-left: 1.25rem;
}

/* --- Scroll Progress Fern --- */
.scroll-fern {
    position: fixed;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    opacity: 0.4;
    transition: opacity 400ms ease;
}

.scroll-fern:hover {
    opacity: 0.7;
}

.fern-stem {
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    transition: stroke-dashoffset 200ms ease-out;
}

.fern-frond {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    transition: stroke-dashoffset 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.fern-curl {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    transition: stroke-dashoffset 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--aged-linen) 0%, var(--faded-sage) 100%);
    overflow: hidden;
    padding: 4rem 2rem;
}

.hero-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.breathing-path {
    transition: d 4000ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}

.hero-headline h1 {
    font-family: var(--font-headline);
    font-size: clamp(3.5rem, 8vw + 1rem, 12rem);
    font-variation-settings: 'WONK' 1, 'opsz' 72, 'wght' 400;
    color: var(--walnut-ink);
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 1rem;
}

.hero-tagline {
    font-family: var(--font-accent);
    font-size: clamp(1.2rem, 2vw + 0.5rem, 2rem);
    color: var(--dusty-plum);
    transform: rotate(-1deg);
    margin-top: 0.5rem;
}

.hero-card-container {
    position: absolute;
    bottom: 12%;
    right: 8%;
    z-index: 3;
    max-width: 380px;
}

.peony-watermark {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 10%;
    left: -5%;
    z-index: 0;
    pointer-events: none;
}

/* --- Glassmorphic Cards --- */
.glassmorphic-card {
    background: var(--frosted-cream);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 1.2rem 1.3rem 1.25rem 1.15rem;
    padding: 2rem 2.25rem;
    box-shadow: var(--shadow-card);
    transition: var(--transition-morph);
    position: relative;
}

.glassmorphic-card:hover {
    border-radius: 1.4rem 1.5rem 1.45rem 1.35rem;
    box-shadow: var(--shadow-card-hover);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

.glassmorphic-card:hover {
    transform: rotate(0deg) !important;
}

.card-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--walnut-ink);
}

.card-annotation {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-accent);
    font-size: 1.1rem;
    color: var(--pressed-rose);
    transform: rotate(-1deg);
}

.card-title {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-variation-settings: 'WONK' 1, 'opsz' 24, 'wght' 500;
    color: var(--walnut-ink);
    margin-bottom: 0.75rem;
}

.card-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

/* --- Diagonal Sections --- */
.diagonal-section {
    position: relative;
    padding: 10rem 2rem;
    overflow: hidden;
}

.section-odd {
    clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
    margin-top: -4%;
    background: linear-gradient(135deg, var(--aged-linen) 0%, var(--faded-sage) 100%);
}

.section-even {
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    margin-top: -4%;
    background: linear-gradient(135deg, var(--faded-sage) 0%, var(--aged-linen) 100%);
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.section-heading {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
    font-variation-settings: 'WONK' 1, 'opsz' 48, 'wght' 400;
    color: var(--walnut-ink);
    margin-bottom: 3rem;
    text-align: center;
}

/* --- Content Grid (About) --- */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* --- Hydrangea Ornament --- */
.hydrangea-ornament {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0.2;
    pointer-events: none;
}

.hydrangea-top-right {
    top: 8rem;
    right: 3rem;
}

/* --- Pull Quote --- */
.pull-quote {
    font-family: var(--font-accent);
    font-size: clamp(1.8rem, 3vw + 0.5rem, 3.5rem);
    color: var(--walnut-ink);
    text-align: center;
    padding: 2rem 3rem;
    margin-bottom: 3rem;
    position: relative;
    transform: rotate(-0.5deg);
    line-height: 1.4;
}

.quote-mark {
    color: var(--pressed-rose);
    font-size: 1.4em;
    vertical-align: -0.1em;
}

/* --- Philosophy Text --- */
.philosophy-text {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.philosophy-text p {
    margin-bottom: 1.5rem;
    color: var(--walnut-ink);
}

/* --- Collection Grid --- */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.collection-card {
    text-align: center;
    padding: 2.5rem 2rem;
}

/* --- Stories Layout --- */
.stories-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.story-card {
    padding: 2.5rem 2rem;
}

.story-date {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--washed-indigo);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

/* --- Closing Section --- */
.closing-inner {
    text-align: center;
}

.closing-heading {
    color: var(--walnut-ink);
}

.closing-quote {
    margin-bottom: 2rem;
}

.closing-text {
    font-family: var(--font-accent);
    font-size: 1.3rem;
    color: var(--dusty-plum);
    max-width: 600px;
    margin: 0 auto;
    transform: rotate(-0.5deg);
}

/* --- Botanical Interstitials --- */
.botanical-interstitial {
    position: relative;
    height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aged-linen);
}

.ivy-divider {
    width: 100%;
    height: 80px;
}

.ivy-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.ivy-path.animated {
    stroke-dashoffset: 0;
}

.ivy-leaf {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    transition: stroke-dashoffset 800ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 800ms;
}

.ivy-leaf.animated {
    stroke-dashoffset: 0;
}

.seed-pod, .grass-blade {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    transition: stroke-dashoffset 800ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 900ms;
}

.seed-pod.animated, .grass-blade.animated {
    stroke-dashoffset: 0;
}

/* --- Footer Cascade --- */
.footer-cascade {
    position: relative;
    padding: 6rem 2rem 4rem;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--faded-sage) 0%, var(--aged-linen) 100%);
    overflow: hidden;
}

.footer-card {
    background: var(--frosted-cream);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 1.2rem 1.3rem 1.25rem 1.15rem;
    padding: 2rem 2.5rem;
    box-shadow: var(--shadow-card);
    transition: var(--transition-morph);
    position: relative;
}

.footer-card:hover {
    border-radius: 1.4rem 1.5rem 1.45rem 1.35rem;
    box-shadow: var(--shadow-card-hover);
    transform: rotate(0deg) !important;
}

.footer-card-1 {
    z-index: 3;
    min-width: 260px;
}

.footer-card-2 {
    z-index: 2;
    min-width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-card-3 {
    z-index: 1;
    min-width: 240px;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-link {
    font-family: var(--font-accent);
    font-size: 1.15rem;
    color: var(--walnut-ink);
    text-decoration: none;
    transition: var(--transition-morph);
    padding: 0.25rem 0;
}

.footer-link:hover {
    color: var(--pressed-rose);
    padding-left: 0.5rem;
}

.footer-botanical {
    width: 140px;
    height: 120px;
}

.fern-footer-stem {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
}

.fern-footer-frond {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}

.fern-footer-stem.animated {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.fern-footer-frond.animated {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

.footer-faded {
    font-family: var(--font-headline);
    font-size: 1.8rem;
    font-variation-settings: 'WONK' 1, 'opsz' 36, 'wght' 400;
    color: var(--walnut-ink);
    margin-bottom: 0.5rem;
}

.footer-small {
    font-family: var(--font-accent);
    font-size: 1.1rem;
    color: var(--dusty-plum);
    margin-bottom: 0.25rem;
}

.footer-tiny {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--cracked-clay);
    letter-spacing: 0.05em;
}

/* --- Animations --- */
@keyframes breathe {
    0%, 100% {
        d: path("M0,0 L1440,0 L1440,720 C1200,680 960,800 720,760 C480,720 240,840 0,800 Z");
    }
    50% {
        d: path("M0,0 L1440,0 L1440,740 C1200,800 960,680 720,740 C480,800 240,700 0,780 Z");
    }
}

.breathing-path {
    animation: breathe 8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

/* Scroll-triggered reveal */
.section-heading,
.glassmorphic-card,
.pull-quote,
.philosophy-text p,
.closing-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

.section-heading.revealed,
.glassmorphic-card.revealed,
.pull-quote.revealed,
.philosophy-text p.revealed,
.closing-text.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Cards get their rotation back after reveal */
.glassmorphic-card.revealed {
    transform: translateY(0);
}

/* Hero elements should be visible */
.hero-card {
    opacity: 1;
    transform: rotate(-1.2deg);
    animation: heroCardIn 1200ms 400ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes heroCardIn {
    from {
        opacity: 0;
        transform: rotate(-1.2deg) translateY(40px);
    }
    to {
        opacity: 1;
        transform: rotate(-1.2deg) translateY(0);
    }
}

.hero-headline h1 {
    animation: heroTitleIn 1000ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

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

.hero-tagline {
    animation: heroTagIn 1000ms 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes heroTagIn {
    from {
        opacity: 0;
        transform: rotate(-1deg) translateY(20px);
    }
    to {
        opacity: 1;
        transform: rotate(-1deg) translateY(0);
    }
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .content-grid,
    .collection-grid,
    .stories-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-card-container {
        position: relative;
        bottom: auto;
        right: auto;
        max-width: 100%;
        margin-top: 2rem;
    }

    .hero-section {
        flex-direction: column;
        padding: 6rem 1.5rem 4rem;
    }

    .diagonal-section {
        padding: 8rem 1.5rem;
    }

    .footer-cascade {
        flex-direction: column;
        align-items: center;
    }

    .scroll-fern {
        display: none;
    }

    .hydrangea-ornament {
        display: none;
    }
}

@media (max-width: 600px) {
    .diagonal-section {
        padding: 6rem 1rem;
    }

    .section-odd {
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
        margin-top: -2%;
    }

    .section-even {
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        margin-top: -2%;
    }

    .glassmorphic-card {
        padding: 1.5rem;
    }

    .pull-quote {
        padding: 1rem;
    }

    .nav-indicator {
        width: 48px;
        height: 48px;
        top: 1rem;
        right: 1rem;
    }
}