/* =========================================================
   eyes.team — a greenhouse of looking
   Sepia-nostalgic with dopamine accents.
   Ma (間) negative-space composition.
   ========================================================= */

:root {
    /* Design tokens retained without fetching external assets: Space Mono" (Google Fonts (400 when available; IntersectionObserver` with `threshold: 0.15` to trigger `.visible` class on scroll. CSS transitions use `transition: opacity 0.8s ease. */
    --ground:           #f5ede0;   /* Aged Ivory */
    --ground-deep:      #ece0cb;   /* slightly darker ivory pooling */
    --surface-tint:     rgba(218, 197, 167, 0.35);
    --surface-hover:    rgba(218, 197, 167, 0.20);
    --ink:              #3d2e1f;   /* Deep Walnut */
    --ink-soft:         #7a6248;   /* Faded Umber */
    --vellum:           rgba(168, 142, 108, 0.30);
    --peony:            #d4577a;
    --marigold:         #e8a832;
    --fern:             #4a9e6d;
    --frost:            rgba(255, 255, 255, 0.25);
    --darkroom:         #1e1610;

    --font-display:     'Space Mono', ui-monospace, SFMono-Regular, monospace;
    --font-body:        'DM Mono', ui-monospace, SFMono-Regular, monospace;
    --font-hand:        'Caveat', 'Brush Script MT', cursive;

    --section-gap:      clamp(12rem, 20vh, 24rem);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.85;
    color: var(--ink);
    background: var(--ground);
    /* aged-paper base: radial warmth pooling in corners + faint linen */
    background-image:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(200, 160, 110, 0.22), transparent 70%),
        radial-gradient(ellipse 55% 45% at 100% 0%, rgba(180, 140, 95, 0.18), transparent 72%),
        radial-gradient(ellipse 70% 60% at 50% 100%, rgba(200, 170, 130, 0.16), transparent 75%),
        repeating-linear-gradient(45deg, rgba(61, 46, 31, 0.025) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(-45deg, rgba(61, 46, 31, 0.02) 0 1px, transparent 1px 9px);
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---- Pollen canvas --------------------------------------- */
#pollen-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 1;
}

main#greenhouse {
    position: relative;
    z-index: 2;
}

/* =========================================================
   Sections
   ========================================================= */

section {
    position: relative;
    padding-block: var(--section-gap);
    padding-inline: clamp(1.5rem, 8vw, 10rem);
}

.aperture,
.pressed-page {
    min-height: 100vh;
    padding-block: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   Aperture Hero
   ========================================================= */

.aperture {
    overflow: hidden;
}

.condensation {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.85;
    background-image:
        radial-gradient(circle at 15% 18%, rgba(255,255,255,0.14) 0 1.2px, transparent 1.5px),
        radial-gradient(circle at 82% 12%, rgba(255,255,255,0.12) 0 1px,   transparent 1.5px),
        radial-gradient(circle at 45% 72%, rgba(255,255,255,0.10) 0 1.4px, transparent 2px),
        radial-gradient(circle at 68% 45%, rgba(255,255,255,0.10) 0 1px,   transparent 1.5px),
        radial-gradient(circle at 22% 85%, rgba(255,255,255,0.12) 0 1.1px, transparent 1.8px),
        radial-gradient(circle at 91% 78%, rgba(255,255,255,0.10) 0 1px,   transparent 1.4px);
    background-size: 480px 480px, 520px 520px, 600px 600px, 540px 540px, 500px 500px, 470px 470px;
    animation: drift-condensation 30s linear infinite;
    mix-blend-mode: screen;
    z-index: 1;
}

@keyframes drift-condensation {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 0 -480px, 0 -520px, 0 -600px, 0 -540px, 0 -500px, 0 -470px; }
}

/* asymmetric Ma placement: ~38% left / ~42% top */
.aperture__frame {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-inline: clamp(1.5rem, 6vw, 6rem);
    padding-block: clamp(6rem, 14vh, 14rem);
    z-index: 2;
}

.bloom-card--hero {
    position: relative;
    width: min(560px, 90vw);
    margin-left: clamp(0rem, 30vw, 38%);
    margin-top: clamp(2rem, 6vh, 6rem);
    padding: clamp(2.4rem, 4.2vw, 4.2rem);
    text-align: left;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.72rem, 0.82vw, 0.82rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1.6rem;
}

.eyebrow--heart {
    color: var(--ink-soft);
    opacity: 0.85;
}

/* Wordmark: Space Mono 700, quirky and monumental */
.wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 9vw, 8rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 1.5rem;
    line-height: 0.95;
    display: flex;
    gap: 0.04em;
}

.wordmark__letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(1.2em);
    animation: letter-rise 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: calc(var(--petal, 0) * 0.12s + 0.3s);
}

@keyframes letter-rise {
    to { opacity: 1; transform: translateY(0); }
}

.hero__sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.8;
    color: var(--ink-soft);
    margin: 0 0 2.4rem;
    max-width: 36ch;
}

.accent--peony    { color: var(--peony);    font-weight: 500; }
.accent--marigold { color: var(--marigold); font-weight: 500; }
.accent--fern     { color: var(--fern);     font-weight: 500; }

/* ---- Peony SVG illustration ----------------------------- */
.peony {
    width: clamp(180px, 22vw, 260px);
    height: clamp(180px, 22vw, 260px);
    margin: 0.4rem -1rem 0 auto;
    filter: drop-shadow(0 4px 12px rgba(212, 87, 122, 0.15)) sepia(0.15) contrast(0.95);
}

.peony svg { width: 100%; height: 100%; overflow: visible; }

.petal {
    fill: var(--peony);
    opacity: 0.45;
    transform-origin: 0 0;
    transform-box: fill-box;
    animation: petal-bloom 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(var(--petal, 0) * 0.12s + 0.8s);
    transform: scale(0) rotate(-30deg);
    transform-origin: center 55px;
}

.peony__ring--outer .petal { opacity: 0.38; }
.peony__ring--middle .petal { opacity: 0.60; }
.peony__ring--core .petal--core  { fill: var(--peony); opacity: 0.85; transform-origin: center center; }
.peony__ring--core .petal--pistil { fill: var(--marigold); opacity: 0.95; transform-origin: center center; }

@keyframes petal-bloom {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
    60%  { opacity: var(--target-opacity, 0.6); }
    100% { transform: scale(1) rotate(0deg); opacity: var(--target-opacity, 0.6); }
}

.caveat {
    font-family: var(--font-hand);
    font-weight: 400;
    color: var(--ink-soft);
    font-size: clamp(0.95rem, 1.1vw, 1.25rem);
    line-height: 1.5;
    transform: rotate(var(--rot, -2deg));
    display: inline-block;
}

.caveat--hero {
    margin-top: 1.2rem;
    font-size: clamp(1rem, 1.25vw, 1.4rem);
    color: var(--ink-soft);
    opacity: 0.9;
}

.drift-hint {
    position: absolute;
    bottom: 3.5vh;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 0.8rem;
    align-items: center;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: 0.6;
    z-index: 3;
    animation: hint-float 4.5s ease-in-out infinite;
}

@keyframes hint-float {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
    50%      { transform: translate(-50%, 8px); opacity: 0.75; }
}

/* =========================================================
   Pressed Flower Dividers
   ========================================================= */

.pressed-divider {
    width: 100%;
    padding-block: clamp(2rem, 4vh, 4rem);
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.pressed-divider svg {
    width: 100%;
    max-width: 1200px;
    height: auto;
    filter: sepia(0.3) contrast(0.9);
}

.pressed-divider--wide svg { max-width: 1400px; }

/* =========================================================
   Bloom Cards — frosted glass with dopamine behind
   ========================================================= */

.bloom-card {
    position: relative;
    background: var(--surface-tint);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--frost);
    border-radius: 1.5rem;
    box-shadow:
        0 8px 32px rgba(61, 46, 31, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(61, 46, 31, 0.04);
    padding: clamp(2rem, 4vw, 4rem);
    overflow: hidden;
    transition:
        backdrop-filter 1.2s ease,
        -webkit-backdrop-filter 1.2s ease,
        background 1.2s ease,
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    isolation: isolate;
}

.bloom-card:hover {
    backdrop-filter: blur(4px) saturate(1.8);
    -webkit-backdrop-filter: blur(4px) saturate(1.8);
    background: var(--surface-hover);
}

.bloom-card:hover .bloom-gradient {
    opacity: var(--bloom-opacity-hover, 0.85);
    transform: scale(1.05);
}

/* dopamine radial blooms living BEHIND the frosted glass */
.bloom-gradient {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    z-index: -1;
    filter: blur(40px);
    pointer-events: none;
    transition: opacity 1.2s ease, transform 2s ease;
}

.bloom-gradient--peony {
    background: radial-gradient(ellipse at 30% 50%, var(--peony) 0%, transparent 70%);
    width: 120%; height: 140%;
    opacity: 0.55;
    --bloom-opacity-hover: 0.9;
}

.bloom-gradient--marigold {
    background: radial-gradient(ellipse at 70% 40%, var(--marigold) 0%, transparent 65%);
    width: 110%; height: 130%;
    opacity: 0.48;
    filter: blur(35px);
    --bloom-opacity-hover: 0.82;
}

.bloom-gradient--fern {
    background: radial-gradient(ellipse at 50% 70%, var(--fern) 0%, transparent 60%);
    width: 130%; height: 120%;
    opacity: 0.38;
    filter: blur(45px);
    --bloom-opacity-hover: 0.78;
}

/* left/right weighted drift placements */
.bloom-card--left {
    width: min(60%, 640px);
    margin-left: 15%;
    margin-right: auto;
}

.bloom-card--right {
    width: min(60%, 640px);
    margin-left: 25%;
    margin-right: 0;
}

/* narrower screens: relax the offsets */
@media (max-width: 900px) {
    .bloom-card--left,
    .bloom-card--right {
        width: min(92%, 640px);
        margin-left: auto;
        margin-right: auto;
    }
    .bloom-card--hero {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Card interior typography */
.card__header {
    margin-bottom: 1.4rem;
}

.card__index {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.72rem, 0.82vw, 0.82rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.9rem;
    opacity: 0.85;
}

.card__index em {
    font-style: italic;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: 0.05em;
    opacity: 0.95;
}

.card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    letter-spacing: 0.08em;
    line-height: 1.18;
    color: var(--ink);
    margin: 0;
    text-transform: none;
}

.card__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.85;
    color: var(--ink);
    margin: 1.2rem 0;
}

.card__body strong {
    font-weight: 500;
    color: var(--ink);
}

.card__body em {
    font-style: italic;
    color: var(--ink-soft);
}

.caveat--inline {
    display: inline-block;
    margin-top: 0.8rem;
    font-size: clamp(1rem, 1.2vw, 1.35rem);
    color: var(--ink-soft);
    opacity: 0.88;
}

.caveat--margin {
    position: absolute;
    top: 4vh;
    max-width: 22ch;
    font-size: clamp(1rem, 1.3vw, 1.45rem);
    color: var(--ink-soft);
    opacity: 0.82;
    pointer-events: none;
    z-index: 3;
}

#first-clearing .caveat--margin {
    right: clamp(2rem, 8vw, 10rem);
    top: 8vh;
}

.caveat--heart {
    left: clamp(2rem, 6vw, 8rem);
    top: -1vh;
}

/* =========================================================
   Specimen cards (Garden Path)
   ========================================================= */

.garden-path {
    display: flex;
    flex-direction: column;
    gap: clamp(10rem, 18vh, 20rem);
}

.specimen {
    position: relative;
}

.specimen__art {
    position: absolute;
    top: -4rem;
    width: clamp(120px, 14vw, 180px);
    height: clamp(120px, 14vw, 180px);
    filter: sepia(0.25) contrast(0.95);
}

.bloom-card--left .specimen__art  { right: -1.5rem; }
.bloom-card--right .specimen__art { left: -1.5rem; }

.specimen__art svg { width: 100%; height: 100%; overflow: visible; }

/* marigold burst */
.marigold-burst .petal--sun {
    fill: var(--marigold);
    opacity: 0;
    transform: scale(0);
    transform-origin: center 0;
    animation: sun-bloom 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.marigold-burst .petal--sun:nth-child(1)  { animation-delay: 0.05s; }
.marigold-burst .petal--sun:nth-child(2)  { animation-delay: 0.10s; }
.marigold-burst .petal--sun:nth-child(3)  { animation-delay: 0.15s; }
.marigold-burst .petal--sun:nth-child(4)  { animation-delay: 0.20s; }
.marigold-burst .petal--sun:nth-child(5)  { animation-delay: 0.25s; }
.marigold-burst .petal--sun:nth-child(6)  { animation-delay: 0.30s; }
.marigold-burst .petal--sun:nth-child(7)  { animation-delay: 0.35s; }
.marigold-burst .petal--sun:nth-child(8)  { animation-delay: 0.40s; }
.marigold-burst .petal--sun:nth-child(9)  { animation-delay: 0.45s; }
.marigold-burst .petal--sun:nth-child(10) { animation-delay: 0.50s; }
.marigold-burst .petal--sun:nth-child(11) { animation-delay: 0.55s; }
.marigold-burst .petal--sun:nth-child(12) { animation-delay: 0.60s; }

.marigold-burst .petal--eye {
    fill: var(--ink);
    opacity: 0;
    animation: eye-open 0.9s ease forwards;
    animation-delay: 0.7s;
}

@keyframes sun-bloom {
    0%   { opacity: 0; transform: scale(0); }
    100% { opacity: 0.75; transform: scale(1); }
}

@keyframes eye-open {
    0%   { opacity: 0; transform: scale(0.2); }
    100% { opacity: 0.88; transform: scale(1); }
}

/* fern frond */
.fern-frond .frond-leaves path {
    fill: none;
    stroke: var(--fern);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.75;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: frond-grow 1.4s ease forwards;
}

.fern-frond .frond-leaves path:nth-child(1)  { animation-delay: 0.10s; }
.fern-frond .frond-leaves path:nth-child(2)  { animation-delay: 0.20s; }
.fern-frond .frond-leaves path:nth-child(3)  { animation-delay: 0.30s; }
.fern-frond .frond-leaves path:nth-child(4)  { animation-delay: 0.40s; }
.fern-frond .frond-leaves path:nth-child(5)  { animation-delay: 0.50s; }
.fern-frond .frond-leaves path:nth-child(6)  { animation-delay: 0.15s; }
.fern-frond .frond-leaves path:nth-child(7)  { animation-delay: 0.25s; }
.fern-frond .frond-leaves path:nth-child(8)  { animation-delay: 0.35s; }
.fern-frond .frond-leaves path:nth-child(9)  { animation-delay: 0.45s; }
.fern-frond .frond-leaves path:nth-child(10) { animation-delay: 0.55s; }

@keyframes frond-grow {
    to { stroke-dashoffset: 0; }
}

/* seed pods drift gently */
.seedpod-cluster circle {
    animation: pod-pulse 4.5s ease-in-out infinite;
    transform-origin: center;
}
.seedpod-cluster circle:nth-child(1) { animation-delay: 0s; }
.seedpod-cluster circle:nth-child(2) { animation-delay: 0.4s; }
.seedpod-cluster circle:nth-child(3) { animation-delay: 0.8s; }
.seedpod-cluster circle:nth-child(4) { animation-delay: 1.2s; }
.seedpod-cluster circle:nth-child(5) { animation-delay: 1.6s; }
.seedpod-cluster circle:nth-child(6) { animation-delay: 2.0s; }

@keyframes pod-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.12); opacity: 1; }
}

/* =========================================================
   The Greenhouse Heart — wide, centered, the one exception
   ========================================================= */

.heart {
    position: relative;
    padding-inline: clamp(1.5rem, 6vw, 8rem);
}

.bloom-card--heart {
    width: min(70%, 900px);
    margin: 0 auto;
    padding: clamp(3rem, 5vw, 5.5rem);
    position: relative;
    text-align: left;
}

.bloom-gradient--heart {
    opacity: 0.7;
    filter: blur(50px);
    --bloom-opacity-hover: 1;
}
.bloom-card--heart .bloom-gradient--peony {
    background: radial-gradient(ellipse at 20% 40%, var(--peony) 0%, transparent 60%);
}
.bloom-card--heart .bloom-gradient--marigold {
    background: radial-gradient(ellipse at 80% 30%, var(--marigold) 0%, transparent 55%);
}
.bloom-card--heart .bloom-gradient--fern {
    background: radial-gradient(ellipse at 50% 85%, var(--fern) 0%, transparent 60%);
}

.heart__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: 0.08em;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 2rem;
    text-transform: none;
}

.heart__body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.9;
    color: var(--ink);
    margin: 1.4rem 0;
    max-width: 64ch;
}

.heart__whisper {
    margin-top: 2.4rem;
    font-size: clamp(1rem, 1.2vw, 1.4rem);
    color: var(--ink-soft);
}

@media (max-width: 900px) {
    .bloom-card--heart {
        width: min(92%, 900px);
    }
}

/* =========================================================
   The Pressed Page — dark, closing
   ========================================================= */

.pressed-page {
    background: var(--darkroom);
    color: var(--ground);
    flex-direction: column;
    padding-inline: clamp(1.5rem, 8vw, 10rem);
    position: relative;
    overflow: hidden;
}

.pressed-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(212, 87, 122, 0.07) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, rgba(232, 168, 50, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(74, 158, 109, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

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

.wordmark--dark {
    color: var(--ground);
    justify-content: center;
    display: flex;
    gap: 0.04em;
    margin: 0 auto 2.5rem;
}

.wordmark--dark span {
    display: inline-block;
}

.pressed-page__line {
    margin: 2rem 0 2.5rem;
    font-size: clamp(1.1rem, 1.6vw, 1.8rem);
}

.caveat--closing {
    color: var(--ground);
    opacity: 0.9;
    font-size: clamp(1.2rem, 2.2vw, 2.2rem);
}

.pressed-page__stamp {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(0.7rem, 0.82vw, 0.82rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ground);
    opacity: 0.5;
    display: inline-flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pressed-page__stamp .dot-sep {
    opacity: 0.6;
}

/* =========================================================
   Scroll reveal — data-reveal elements
   ========================================================= */

[data-reveal] {
    opacity: 0;
    transform: translateY(3rem);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: calc(var(--stagger, 0) * 0.12s);
}

[data-reveal].visible {
    opacity: 1;
    transform: translateY(0);
}

/* hero card visible on load after a small delay (JS nudge) */
.bloom-card--hero[data-reveal] {
    transition-delay: 0.1s;
}

/* =========================================================
   Small screens — relax Ma, keep the mood
   ========================================================= */

@media (max-width: 640px) {
    section { padding-block: clamp(8rem, 14vh, 14rem); padding-inline: 1.25rem; }
    .aperture { padding-block: 0; }
    .bloom-card--hero { padding: 2rem 1.6rem; }
    .peony { width: 140px; height: 140px; margin-right: 0; }
    .caveat--margin { position: relative; top: auto; right: auto; left: auto;
                      display: block; margin: 0 auto 1.2rem; text-align: center; }
    .wordmark { font-size: clamp(3rem, 16vw, 5rem); }
    .heart__title, .card__title { font-size: clamp(1.5rem, 6vw, 2.2rem); }
    .specimen__art { position: relative; top: auto; left: auto; right: auto;
                     margin: 0 0 1.2rem; width: 120px; height: 120px; }
}