/* lunch.day - Goblincore Pastoral Design */
/* Color Palette */
:root {
    --linen-cream: #f5efe6;
    --sourdough: #ede3d0;
    --bark-ink: #3b2f20;
    --truffle: #5c3a2a;
    --moss: #6b7c4e;
    --wild-berry: #9c5874;
    --chanterelle: #d4a04a;
    --canopy: #2a2318;
    --dew: #e8dfd3;
    --afternoon: #f0e9de;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Recursive', sans-serif;
    font-variation-settings: 'MONO' 0, 'CASL' 0.5, 'wght' 400, 'slnt' 0;
    color: var(--bark-ink);
    background: var(--linen-cream);
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
}

/* Paper Texture Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.03;
    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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Bokeh Background */
.bokeh-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bokeh-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    will-change: transform;
}

.bokeh-layer-1 {
    background:
        radial-gradient(circle 180px at 15% 20%, #d4a04a08 0%, transparent 70%),
        radial-gradient(circle 120px at 75% 35%, #d4a04a08 0%, transparent 70%),
        radial-gradient(circle 200px at 45% 60%, #d4a04a06 0%, transparent 70%),
        radial-gradient(circle 90px at 85% 75%, #d4a04a08 0%, transparent 70%),
        radial-gradient(circle 150px at 25% 85%, #d4a04a06 0%, transparent 70%);
}

.bokeh-layer-2 {
    background:
        radial-gradient(circle 100px at 20% 15%, #6b7c4e0c 0%, transparent 70%),
        radial-gradient(circle 80px at 60% 25%, #6b7c4e0c 0%, transparent 70%),
        radial-gradient(circle 60px at 35% 45%, #6b7c4e0a 0%, transparent 70%),
        radial-gradient(circle 120px at 80% 55%, #6b7c4e0c 0%, transparent 70%),
        radial-gradient(circle 90px at 10% 70%, #6b7c4e0a 0%, transparent 70%),
        radial-gradient(circle 70px at 50% 80%, #6b7c4e0c 0%, transparent 70%),
        radial-gradient(circle 40px at 90% 90%, #6b7c4e0a 0%, transparent 70%),
        radial-gradient(circle 110px at 30% 95%, #6b7c4e0c 0%, transparent 70%);
}

.bokeh-layer-3 {
    background:
        radial-gradient(circle 50px at 25% 10%, #d4a04a18 0%, transparent 70%),
        radial-gradient(circle 35px at 65% 20%, #d4a04a15 0%, transparent 70%),
        radial-gradient(circle 60px at 40% 30%, #d4a04a18 0%, transparent 70%),
        radial-gradient(circle 25px at 80% 40%, #d4a04a15 0%, transparent 70%),
        radial-gradient(circle 45px at 15% 50%, #d4a04a18 0%, transparent 70%),
        radial-gradient(circle 30px at 55% 55%, #d4a04a15 0%, transparent 70%),
        radial-gradient(circle 40px at 90% 65%, #d4a04a18 0%, transparent 70%),
        radial-gradient(circle 55px at 35% 75%, #d4a04a15 0%, transparent 70%),
        radial-gradient(circle 20px at 70% 80%, #d4a04a18 0%, transparent 70%),
        radial-gradient(circle 50px at 10% 90%, #d4a04a15 0%, transparent 70%),
        radial-gradient(circle 35px at 50% 95%, #d4a04a18 0%, transparent 70%),
        radial-gradient(circle 45px at 85% 98%, #d4a04a15 0%, transparent 70%);
}

.bokeh-layer-4 {
    background:
        radial-gradient(circle 12px at 18% 8%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 8px at 42% 12%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 15px at 72% 18%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 6px at 28% 25%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 10px at 88% 30%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 5px at 55% 35%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 14px at 12% 42%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 7px at 65% 48%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 11px at 35% 55%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 9px at 82% 60%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 13px at 48% 68%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 6px at 22% 72%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 8px at 75% 78%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 10px at 38% 82%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 15px at 92% 85%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 5px at 58% 88%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 12px at 15% 92%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 7px at 45% 95%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 9px at 78% 97%, #f5efe640 0%, transparent 70%),
        radial-gradient(circle 11px at 30% 99%, #f5efe640 0%, transparent 70%);
}

/* Course Sections */
.course {
    position: relative;
    min-height: 100vh;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 5vw;
}

/* Course 1 - The Clearing */
.course-1 {
    background: var(--linen-cream);
    flex-direction: column;
}

.course-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.site-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 72, 'wght' 800, 'WONK' 1;
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--truffle);
    transform: translateX(-8%) rotate(-0.8deg);
    margin-bottom: 1rem;
}

.site-subtitle {
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--moss);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-subtitle.visible {
    opacity: 1;
    transform: translateY(0);
}

.mushroom-svg {
    color: var(--moss);
    margin: 2rem 0;
    opacity: 0;
    transition: opacity 600ms ease-out;
}

.mushroom-svg.visible {
    opacity: 1;
}

.svg-draw path,
.svg-draw circle,
.svg-draw line,
.svg-draw ellipse {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.visible .svg-draw path,
.visible .svg-draw circle,
.visible .svg-draw line,
.visible .svg-draw ellipse {
    stroke-dashoffset: 0;
}

.scroll-hint {
    font-family: 'Caveat', cursive;
    font-size: 1rem;
    color: var(--moss);
    opacity: 0;
    position: absolute;
    bottom: -120px;
    animation: scrollBounce 2s infinite ease-in-out;
    transition: opacity 600ms ease-out;
}

.scroll-hint.visible {
    opacity: 0.7;
}

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

/* Gingham Pattern Overlay */
.gingham-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.gingham-bottom {
    bottom: 0;
    height: 30%;
    opacity: 0.08;
    background: repeating-conic-gradient(#6b7c4e33 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
    mask-image: linear-gradient(to bottom, transparent, black);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
}

.gingham-farewell {
    bottom: 0;
    height: 15vh;
    background: repeating-conic-gradient(#6b7c4e33 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
    mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), transparent);
}

/* Course 2 - Bread & Butter */
.course-2 {
    background: linear-gradient(to bottom, var(--linen-cream), var(--sourdough) 40vh, var(--sourdough));
    position: relative;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    position: relative;
    z-index: 2;
}

.text-block {
    position: relative;
    padding: 2rem 2.5rem;
}

.text-block-left {
    grid-column: 2 / 7;
    transform: rotate(0.5deg);
    padding-left: 2rem;
}

.text-border-draw {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--moss);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.text-block-left.visible .text-border-draw {
    transform: scaleY(1);
}

.course-label {
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--moss);
    display: block;
    margin-bottom: 0.5rem;
}

.text-block h2 {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 72, 'wght' 700, 'WONK' 1;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--truffle);
    margin-bottom: 1.2rem;
}

.text-block p {
    font-family: 'Recursive', sans-serif;
    font-variation-settings: 'MONO' 0, 'CASL' 0.5, 'wght' 400, 'slnt' 0;
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 42ch;
    margin-bottom: 1rem;
    color: var(--bark-ink);
}

.deco-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border-radius: 3px;
    overflow: hidden;
}

.deco-panel-right {
    grid-column: 8 / 11;
    transform: rotate(-1deg);
    margin-top: 30px;
}

.basket-weave-bg {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, #d4a04a15 0px, #d4a04a15 2px, transparent 2px, transparent 8px),
        repeating-linear-gradient(90deg, #d4a04a15 0px, #d4a04a15 2px, transparent 2px, transparent 8px);
    border-radius: 3px;
}

.bread-svg {
    color: var(--truffle);
    position: relative;
    z-index: 2;
}

.berry-scatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
    background:
        radial-gradient(ellipse 4px 4px at 15% 30%, #9c5874 0%, transparent 100%),
        radial-gradient(ellipse 4px 4px at 35% 55%, #9c5874 0%, transparent 100%),
        radial-gradient(ellipse 4px 4px at 55% 20%, #9c5874 0%, transparent 100%),
        radial-gradient(ellipse 4px 4px at 75% 65%, #9c5874 0%, transparent 100%),
        radial-gradient(ellipse 4px 4px at 25% 80%, #9c5874 0%, transparent 100%),
        radial-gradient(ellipse 4px 4px at 85% 45%, #9c5874 0%, transparent 100%),
        radial-gradient(ellipse 4px 4px at 45% 90%, #9c5874 0%, transparent 100%);
}

/* Course 3 - The Main */
.course-3 {
    background: var(--sourdough);
    position: relative;
}

.mushroom-dots-left,
.mushroom-dots-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    background: radial-gradient(circle 2px at 50% 50%, #5c3a2a22 0%, transparent 100%);
    background-size: 24px 24px;
    z-index: 1;
}

.mushroom-dots-left { left: 0; }
.mushroom-dots-right { right: 0; }

.text-block-main {
    grid-column: 3 / 10;
    transform: rotate(0deg);
    text-align: center;
    position: relative;
    padding: 3rem;
}

.text-block-main h2 {
    font-variation-settings: 'opsz' 144, 'wght' 800, 'WONK' 1;
    font-size: clamp(2rem, 4vw, 3.2rem);
}

.text-block-main p {
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

.acorn-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.acorn {
    position: absolute;
    color: var(--moss);
}

.acorn-tl { top: -8px; left: -8px; transform: rotate(0deg); }
.acorn-tr { top: -8px; right: -8px; transform: rotate(90deg); }
.acorn-bl { bottom: -8px; left: -8px; transform: rotate(270deg); }
.acorn-br { bottom: -8px; right: -8px; transform: rotate(180deg); }

/* Course 4 - Forage Notes */
.course-4 {
    background: var(--afternoon);
    align-items: flex-start;
    padding-top: 120px;
    padding-bottom: 120px;
}

.course-4 .course-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
}

.forage-card {
    position: relative;
    border: 2px solid var(--moss);
    border-radius: 3px;
    padding: 2rem;
    max-width: 320px;
    overflow: hidden;
    background: var(--afternoon);
}

.forage-card-1 {
    transform: rotate(-1.2deg);
    margin-top: 0;
}

.forage-card-2 {
    transform: rotate(0.8deg);
    margin-top: 60px;
}

.forage-card-3 {
    transform: rotate(-0.5deg);
    margin-top: 25px;
}

.fern-bg {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M5 35C10 25 20 15 35 5' stroke='%236b7c4e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

.card-title {
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--moss);
    margin-bottom: 0.8rem;
}

.forage-card p {
    font-family: 'Recursive', sans-serif;
    font-variation-settings: 'MONO' 0, 'CASL' 0.5, 'wght' 400, 'slnt' 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--bark-ink);
    max-width: 42ch;
}

/* Course 5 - Leaving the Clearing */
.course-5 {
    background: linear-gradient(to bottom, var(--afternoon), var(--linen-cream));
    flex-direction: column;
}

.farewell-title {
    font-family: 'Fraunces', serif;
    font-variation-settings: 'opsz' 72, 'wght' 700, 'WONK' 0.3;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    color: var(--truffle);
    opacity: 0.7;
    transform: rotate(-0.5deg);
    text-align: center;
    margin-bottom: 1.5rem;
}

.farewell-signature {
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    color: var(--moss);
    opacity: 0;
    transition: opacity 800ms ease-out;
}

.farewell-signature.visible {
    opacity: 0.6;
}

.leaf-curl-svg {
    color: var(--moss);
    margin-top: 2rem;
    opacity: 0;
    transition: opacity 600ms ease-out;
}

.leaf-curl-svg.visible {
    opacity: 1;
}

/* Navigation */
.course-nav {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
}

.nav-trigger {
    width: 40px;
    height: 40px;
    border-radius: 47%;
    background: var(--sourdough);
    border: 1.5px solid var(--dew);
    cursor: pointer;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease;
    animation: navPulse 3s infinite ease-in-out;
    box-shadow: 0 2px 8px rgba(42, 35, 24, 0.06);
}

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

.nav-dots {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.course-nav:hover .nav-dots,
.course-nav.active .nav-dots {
    opacity: 1;
    pointer-events: auto;
}

.course-nav:hover .nav-trigger,
.course-nav.active .nav-trigger {
    opacity: 0;
    pointer-events: none;
}

.nav-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 47%;
    background: var(--dew);
    border: 1.5px solid var(--moss);
    cursor: pointer;
    transition: background 300ms ease, transform 200ms ease;
}

.nav-dot:hover {
    background: var(--moss);
    transform: scale(1.2);
}

.nav-dot.active {
    background: var(--wild-berry);
    border-color: var(--wild-berry);
}

/* Pentagon layout for nav dots */
.nav-dot:nth-child(1) { bottom: 95px; right: 50px; }
.nav-dot:nth-child(2) { bottom: 70px; right: 10px; }
.nav-dot:nth-child(3) { bottom: 30px; right: 0px; }
.nav-dot:nth-child(4) { bottom: 10px; right: 40px; }
.nav-dot:nth-child(5) { bottom: 50px; right: 80px; }

/* Reveal Animations */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Special overrides for rotated elements */
.text-block-left.visible {
    opacity: 1;
    transform: translateY(0) rotate(0.5deg);
}

.deco-panel-right.visible {
    opacity: 1;
    transform: translateY(0) rotate(-1deg);
}

.forage-card-1.visible {
    opacity: 1;
    transform: translateY(0) rotate(-1.2deg);
}

.forage-card-2.visible {
    opacity: 1;
    transform: translateY(0) rotate(0.8deg);
}

.forage-card-3.visible {
    opacity: 1;
    transform: translateY(0) rotate(-0.5deg);
}

.site-title.visible {
    opacity: 1;
    transform: translateX(-8%) rotate(-0.8deg) translateY(0);
}

.farewell-title.visible {
    opacity: 0.7;
    transform: rotate(-0.5deg) translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal-element {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .site-title {
        transform: translateX(-8%) rotate(-0.8deg);
    }

    .site-subtitle {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .scroll-hint {
        opacity: 0.7;
        animation: none;
    }

    .svg-draw path,
    .svg-draw circle,
    .svg-draw line,
    .svg-draw ellipse {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        transition: none;
    }

    .text-border-draw {
        transform: scaleY(1);
        transition: none;
    }

    .nav-trigger {
        animation: none;
    }

    .farewell-signature {
        opacity: 0.6;
    }

    .leaf-curl-svg,
    .mushroom-svg {
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .course {
        padding: 60px 6vw;
    }

    .course-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .text-block-left {
        transform: rotate(0.3deg);
    }

    .text-block-left.visible {
        transform: translateY(0) rotate(0.3deg);
    }

    .deco-panel-right {
        margin-top: 0;
        transform: rotate(-0.5deg);
        min-height: 150px;
    }

    .deco-panel-right.visible {
        transform: translateY(0) rotate(-0.5deg);
    }

    .text-block-main {
        padding: 2rem 1rem;
    }

    .course-4 .course-grid {
        flex-direction: column;
        align-items: center;
    }

    .forage-card-2 {
        margin-top: 0;
    }

    .forage-card-3 {
        margin-top: 0;
    }

    .course-nav {
        bottom: 20px;
        right: 20px;
    }

    .nav-trigger {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 480px) {
    .site-title {
        transform: translateX(-4%) rotate(-0.5deg);
    }

    .site-title.visible {
        transform: translateX(-4%) rotate(-0.5deg) translateY(0);
    }

    .text-block p {
        font-size: 0.95rem;
    }

    .forage-card {
        max-width: 100%;
    }
}