/* ============================================================
   HELIANTHUS — Mobile-First Design System
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
    /* Core palette */
    --gold-50: hsl(43, 100%, 97%);
    --gold-100: hsl(43, 100%, 92%);
    --gold-200: hsl(43, 98%, 82%);
    --gold-300: hsl(43, 96%, 66%);
    --gold-400: hsl(43, 94%, 54%);
    --gold-500: hsl(39, 100%, 50%);
    --gold-600: hsl(36, 100%, 44%);

    --brown-100: hsl(25, 40%, 92%);
    --brown-400: hsl(25, 40%, 52%);
    --brown-800: hsl(25, 40%, 16%);
    --brown-900: hsl(24, 48%, 8%);

    --night-900: hsl(263, 60%, 6%);
    --night-800: hsl(263, 50%, 10%);
    --night-700: hsl(263, 40%, 18%);

    /* Semantic tokens — light mode */
    --accent-gold: var(--gold-400);
    --accent-warm: hsl(36, 100%, 44%);
    --accent-glow: hsla(43, 100%, 70%, 0.5);

    --bg-canvas: hsl(43, 30%, 97%);
    --bg-surface: hsl(40, 25%, 94%);
    --bg-elevated: hsl(40, 20%, 98%);
    --bg-glass: hsla(43, 30%, 97%, 0.72);

    --text-primary: hsl(24, 48%, 10%);
    --text-secondary: hsl(25, 20%, 38%);
    --text-muted: hsl(25, 14%, 58%);
    --text-on-dark: hsl(43, 100%, 95%);

    --border-color: hsla(25, 30%, 60%, 0.18);

    /* Typography */
    --font-sans: 'DM Sans', system-ui, sans-serif;
    --font-serif: 'Cormorant Garamond', 'Georgia', serif;
    --font-display: 'Playfair Display', 'Georgia', serif;

    /* Motion */
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --duration-fast: 200ms;
    --duration-medium: 400ms;
    --duration-slow: 700ms;

    /* Layout */
    --header-h: 64px;
    --container-max: 1180px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 40px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px hsla(24, 48%, 10%, 0.08);
    --shadow-md: 0 4px 24px hsla(24, 48%, 10%, 0.12);
    --shadow-lg: 0 12px 48px hsla(24, 48%, 10%, 0.18);
    --shadow-gold: 0 0 32px hsla(43, 100%, 60%, 0.32);
}

/* Dark theme */
.dark-theme {
    --bg-canvas: hsl(24, 48%, 5%);
    --bg-surface: hsl(24, 40%, 8%);
    --bg-elevated: hsl(24, 36%, 11%);
    --bg-glass: hsla(24, 48%, 5%, 0.75);

    --text-primary: hsl(43, 100%, 94%);
    --text-secondary: hsl(43, 40%, 72%);
    --text-muted: hsl(43, 20%, 52%);

    --border-color: hsla(43, 60%, 60%, 0.12);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* Sleep mode */
.sleep-active {
    --bg-canvas: hsl(263, 60%, 4%);
    --bg-surface: hsl(263, 50%, 7%);
    --text-primary: hsl(280, 60%, 90%);
    --text-secondary: hsl(280, 30%, 70%);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.8s var(--ease-smooth),
        color 0.4s var(--ease-smooth);
}

img {
    max-width: 100%;
    display: block;
    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* ── Utility Classes ───────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 20px;
}

.hidden {
    display: none !important;
}

.font-serif {
    font-family: var(--font-serif);
}

.desktop-only {
    display: none;
}

.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }
}

/* ── Scroll Reveal ─────────────────────────────────────── */
.reveal-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.75s var(--ease-smooth), transform 0.75s var(--ease-smooth);
}

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

.reveal-story {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
}

.reveal-story[data-dir="right"] {
    transform: translateX(40px);
}

.reveal-story.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── Section Tags ──────────────────────────────────────── */
.section-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-warm);
    padding: 5px 14px;
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    margin-bottom: 16px;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 6vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.section-title em {
    font-style: italic;
    color: var(--accent-warm);
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    transition: all var(--duration-medium) var(--ease-smooth);
    min-height: 48px;
    /* touch target */
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--accent-gold);
    color: var(--brown-900);
    border-color: var(--accent-gold);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--gold-300);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
    backdrop-filter: blur(10px);
}

.dark-theme .btn-outline {
    border-color: hsla(43, 60%, 70%, 0.35);
    color: var(--text-on-dark);
}

.btn-outline:hover {
    background: var(--accent-gold);
    color: var(--brown-900);
    border-color: var(--accent-gold);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn-ghost:hover {
    color: var(--accent-warm);
}

.btn-hero {
    background: var(--accent-gold);
    color: var(--brown-900);
    font-size: 16px;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 32px hsla(43, 100%, 50%, 0.4);
}

.btn-hero:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 48px hsla(43, 100%, 50%, 0.5);
}

.btn-large {
    padding: 16px 36px;
    font-size: 15px;
}

.btn-icon {
    width: 20px;
    height: 20px;
}

.glow-effect {
    position: relative;
    overflow: hidden;
}

.glow-effect::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(transparent 0deg, var(--accent-gold) 60deg, transparent 120deg);
    animation: rotate-glow 3.5s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

.glow-effect:hover::after {
    opacity: 0.7;
}

@keyframes rotate-glow {
    to {
        transform: rotate(360deg);
    }
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--duration-fast);
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

.icon-btn:hover {
    color: var(--accent-gold);
    transform: scale(1.08);
}

.icon-btn:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

/* ── Accent Glow Text ─────────────────────────────────── */
.accent-glow {
    color: var(--accent-gold);
    text-shadow: 0 0 30px hsla(43, 100%, 60%, 0.6);
}

/* ── Custom Cursor (desktop) ───────────────────────────── */
@media (pointer: fine) {
    body {
        cursor: none;
    }

    a,
    button,
    [role="button"],
    canvas {
        cursor: none;
    }
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: left, top;
}

.cursor-ring {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--accent-gold);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.25s var(--ease-spring), height 0.25s var(--ease-spring), opacity 0.2s;
    opacity: 0.75;
}

.cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cursor-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.custom-cursor.hovering .cursor-ring {
    width: 52px;
    height: 52px;
    background: hsla(43, 100%, 60%, 0.08);
}

.custom-cursor.text-label .cursor-dot {
    opacity: 0;
}

.custom-cursor.text-label .cursor-text {
    opacity: 1;
}

/* ── Petals Canvas ─────────────────────────────────────── */
#petals-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

/* ── Loader ────────────────────────────────────────────── */
.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 99997;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brown-900);
    overflow: hidden;
}

.loader-bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 70%, hsla(43, 100%, 30%, 0.25), transparent 70%);
    animation: loader-glow-pulse 3s ease-in-out infinite;
}

@keyframes loader-glow-pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 1;
    padding: 24px;
    text-align: center;
}

.loader-text-wrapper {
    height: 48px;
    display: flex;
    align-items: center;
}

.loader-quote {
    font-family: var(--font-serif);
    font-size: clamp(14px, 4vw, 18px);
    color: hsla(43, 60%, 80%, 0.65);
    font-style: italic;
    opacity: 0;
    position: absolute;
    max-width: 340px;
    transition: opacity 0.7s;
}

.loader-quote.active {
    opacity: 1;
    position: relative;
}

.loader-svg-container {
    width: 100px;
    height: 100px;
}

#blooming-loader-svg {
    width: 100%;
    height: 100%;
}

.loader-input-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: fade-in 0.5s var(--ease-smooth) forwards;
}

.input-prompt {
    font-family: var(--font-serif);
    font-size: 15px;
    color: hsla(43, 60%, 80%, 0.75);
    font-style: italic;
}

.loader-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
    max-width: 280px;
}

.loader-form input {
    width: 100%;
    padding: 14px 20px;
    border-radius: var(--radius-full);
    border: 1px solid hsla(43, 60%, 60%, 0.3);
    background: hsla(43, 60%, 80%, 0.06);
    color: var(--text-on-dark);
    font-family: var(--font-sans);
    font-size: 15px;
    outline: none;
    transition: border-color 0.25s;
    text-align: center;
}

.loader-form input::placeholder {
    color: hsla(43, 40%, 70%, 0.5);
}

.loader-form input:focus {
    border-color: var(--accent-gold);
}

/* ── Audio Prompt ──────────────────────────────────────── */
.audio-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9996;
    padding: 20px 24px;
    border-radius: var(--radius-lg);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    width: calc(100% - 40px);
    max-width: 340px;
    text-align: center;
}

.audio-emoji {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.audio-prompt h3 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.audio-prompt p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.audio-prompt-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ── Header ────────────────────────────────────────────── */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h);
    transition: background 0.4s, box-shadow 0.4s;
}

.main-header.scrolled {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding-inline: 20px;
    max-width: var(--container-max);
    margin-inline: auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 9px;
}

.logo-icon {
    width: 26px;
    height: 26px;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.nav-desktop {
    display: none;
    gap: 6px;
}

@media (min-width: 768px) {
    .nav-desktop {
        display: flex;
    }
}

.nav-link {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    transition: color var(--duration-fast), background var(--duration-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent-warm);
    background: hsla(43, 100%, 50%, 0.08);
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Hamburger */
.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--duration-medium);
}

#btn-mobile-menu.open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(3px, 3px);
}

#btn-mobile-menu.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

#btn-mobile-menu.open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -3px);
}

/* Mobile Drawer */
.mobile-drawer {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 20px 20px;
    gap: 4px;
    transform: translateY(-110%);
    transition: transform var(--duration-medium) var(--ease-smooth);
    z-index: 999;
}

.mobile-drawer.open {
    transform: translateY(0);
}

.mobile-nav-link {
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
    padding: 14px 16px;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast), color var(--duration-fast);
}

.mobile-nav-link:hover {
    background: hsla(43, 100%, 50%, 0.1);
    color: var(--accent-warm);
}

/* ── HERO SECTION ──────────────────────────────────────── */
.hero-section {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Real hero background image — must fill the scene container */
.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

/* CSS Gradient "photo" layers */
.hero-layer {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.hero-layer--sky {
    background: linear-gradient(180deg,
            hsl(26, 80%, 18%) 0%,
            hsl(31, 90%, 28%) 15%,
            hsl(36, 95%, 42%) 35%,
            hsl(43, 98%, 60%) 55%,
            hsl(48, 90%, 72%) 70%,
            hsl(43, 70%, 85%) 100%);
}

.hero-layer--glow {
    background: radial-gradient(ellipse 80% 60% at 50% 30%,
            hsla(43, 100%, 70%, 0.5) 0%,
            hsla(36, 100%, 60%, 0.2) 50%,
            transparent 80%);
    animation: hero-glow-float 8s ease-in-out infinite;
}

@keyframes hero-glow-float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

.hero-layer--field {
    top: 45%;
    background: linear-gradient(180deg,
            transparent 0%,
            hsl(88, 40%, 22%) 20%,
            hsl(90, 45%, 18%) 50%,
            hsl(88, 50%, 12%) 100%);
    clip-path: polygon(0% 30%, 3% 22%, 7% 28%, 12% 18%, 17% 25%, 22% 16%, 27% 24%, 33% 14%,
            38% 22%, 44% 12%, 50% 20%, 55% 10%, 60% 18%, 66% 14%, 72% 20%, 78% 16%,
            84% 24%, 89% 18%, 94% 26%, 100% 20%, 100% 100%, 0% 100%);
}

.hero-layer--stems {
    top: 42%;
    background: repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 8px,
            hsl(90, 35%, 28%) 8px,
            hsl(90, 35%, 28%) 12px,
            transparent 12px,
            transparent 38px,
            hsl(88, 38%, 22%) 38px,
            hsl(88, 38%, 22%) 41px,
            transparent 41px,
            transparent 70px);
    height: 55%;
    opacity: 0.6;
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 20%, black 60%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 20%, black 60%, black 100%);
}

#hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: calc(var(--header-h) + 40px) 24px 60px;
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
}

.hero-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-200);
    margin-bottom: 20px;
    display: block;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 10vw, 80px);
    font-weight: 700;
    line-height: 1.08;
    color: var(--gold-50);
    text-shadow: 0 4px 32px hsla(24, 60%, 8%, 0.6);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-title-name {
    font-style: italic;
}

.hero-subtitle {
    font-family: var(--font-serif);
    font-size: clamp(16px, 3.5vw, 22px);
    color: var(--gold-100);
    font-style: italic;
    margin-bottom: 36px;
    opacity: 0.9;
}

.hero-cta {
    display: flex;
    justify-content: center;
}

.hero-scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--gold-100);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.7;
    animation: bounce-down 2.5s ease-in-out infinite;
}

@keyframes bounce-down {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(6px);
    }
}

.scroll-mouse {
    width: 22px;
    height: 34px;
    border: 2px solid currentColor;
    border-radius: 11px;
    display: flex;
    justify-content: center;
    padding-top: 7px;
}

.scroll-wheel {
    width: 3px;
    height: 7px;
    background: currentColor;
    border-radius: 2px;
    animation: scroll-wheel-anim 2s ease-in-out infinite;
}

@keyframes scroll-wheel-anim {

    0%,
    100% {
        transform: translateY(0);
        opacity: 1;
    }

    80% {
        transform: translateY(8px);
        opacity: 0;
    }
}

/* ── QUOTE SECTIONS ────────────────────────────────────── */
.quote-section {
    position: relative;
    min-height: 80svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.quote-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.quote-scene--midnight {
    background: linear-gradient(135deg,
            hsl(263, 60%, 5%) 0%,
            hsl(280, 50%, 8%) 40%,
            hsl(263, 45%, 14%) 100%);
}

.quote-scene-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 40% at 50% 110%, hsla(280, 70%, 50%, 0.2), transparent 60%);
}

.quote-sunflower-silhouette {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 380px;
    background: radial-gradient(circle 60px at 50% 18%, hsl(43, 80%, 25%) 0%, hsl(43, 80%, 25%) 40%, transparent 60%),
        linear-gradient(180deg, transparent 15%, hsl(90, 40%, 10%) 30%, hsl(90, 45%, 8%) 100%);
    opacity: 0.55;
    clip-path: polygon(48% 0%, 52% 0%, 53% 28%, 65% 22%, 62% 30%, 53% 32%, 54% 60%, 66% 55%, 63% 63%, 53% 65%, 53% 100%, 47% 100%, 47% 65%, 37% 63%, 34% 55%, 46% 60%, 47% 32%, 38% 30%, 35% 22%, 47% 28%);
}

.quote-scene--field {
    background: linear-gradient(180deg,
            hsl(43, 90%, 60%) 0%,
            hsl(38, 85%, 52%) 30%,
            hsl(90, 40%, 28%) 65%,
            hsl(90, 50%, 18%) 100%);
}

.quote-scene-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, hsla(24, 60%, 8%, 0.4) 0%, hsla(24, 60%, 8%, 0.65) 100%);
}

.floating-petals-quote {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.quote-scene--amber {
    background: linear-gradient(160deg,
            hsl(24, 60%, 8%) 0%,
            hsl(30, 80%, 18%) 25%,
            hsl(36, 95%, 40%) 55%,
            hsl(43, 98%, 58%) 80%,
            hsl(48, 90%, 72%) 100%);
}

.amber-glow {
    background: radial-gradient(circle 60% at 50% 80%, hsla(43, 100%, 70%, 0.4), transparent 60%);
}

.quote-content {
    position: relative;
    z-index: 2;
    padding: 40px 28px;
    text-align: center;
    max-width: 700px;
    margin-inline: auto;
}

.quote-text {
    font-family: var(--font-serif);
    font-size: clamp(22px, 5vw, 44px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    color: var(--gold-100);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 20px;
}

.quote-mark {
    font-size: 1.8em;
    line-height: 0.5;
    vertical-align: -0.3em;
    color: var(--accent-gold);
    font-style: normal;
}

.quote-author {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: hsla(43, 60%, 80%, 0.7);
    font-style: normal;
}

/* ── CINEMATIC STRIP ───────────────────────────────────── */
.cinematic-section {
    padding: 80px 0 0;
    background: var(--bg-canvas);
}

.cinematic-header {
    text-align: center;
    margin-bottom: 40px;
    padding-inline: 24px;
}

.cinematic-strip-wrapper {
    position: relative;
    overflow: hidden;
}

.cinematic-strip {
    display: flex;
    gap: 20px;
    padding: 0 24px 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.cinematic-strip::-webkit-scrollbar {
    display: none;
}

.cinematic-strip:active {
    cursor: grabbing;
}

.cinema-panel {
    flex: 0 0 80vw;
    max-width: 380px;
    height: clamp(380px, 60vw, 520px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    flex-shrink: 0;
    transition: transform 0.4s var(--ease-smooth);
}

.cinema-panel:hover {
    transform: scale(1.02) translateY(-4px);
}

.cinema-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s var(--ease-smooth);
}

.cinema-panel:hover .cinema-bg {
    transform: scale(1.06);
}

/* Panel gradient "photos" */
.cinema-bg--dawn {
    background:
        radial-gradient(ellipse 70% 40% at 50% 25%, hsla(43, 100%, 70%, 0.5) 0%, transparent 70%),
        linear-gradient(180deg,
            hsl(25, 70%, 14%) 0%,
            hsl(30, 85%, 28%) 20%,
            hsl(38, 95%, 52%) 45%,
            hsl(88, 40%, 28%) 70%,
            hsl(88, 50%, 15%) 100%);
}

.cinema-bg--morning {
    background:
        radial-gradient(ellipse 50% 50% at 60% 20%, hsla(43, 100%, 80%, 0.7) 0%, transparent 60%),
        linear-gradient(160deg,
            hsl(43, 90%, 78%) 0%,
            hsl(43, 95%, 62%) 25%,
            hsl(39, 100%, 52%) 45%,
            hsl(88, 42%, 30%) 70%,
            hsl(88, 52%, 16%) 100%);
}

.cinema-bg--noon {
    background:
        radial-gradient(ellipse 80% 30% at 50% 0%, hsla(48, 100%, 80%, 0.9) 0%, transparent 60%),
        linear-gradient(180deg,
            hsl(50, 100%, 88%) 0%,
            hsl(48, 100%, 72%) 20%,
            hsl(43, 98%, 58%) 40%,
            hsl(90, 50%, 32%) 65%,
            hsl(88, 55%, 14%) 100%);
}

.cinema-bg--golden {
    background:
        radial-gradient(ellipse 60% 50% at 60% 30%, hsla(36, 100%, 60%, 0.8) 0%, transparent 65%),
        linear-gradient(160deg,
            hsl(24, 80%, 18%) 0%,
            hsl(30, 88%, 36%) 25%,
            hsl(36, 100%, 52%) 50%,
            hsl(43, 90%, 62%) 65%,
            hsl(88, 40%, 22%) 80%,
            hsl(88, 50%, 12%) 100%);
}

.cinema-bg--dusk {
    background:
        radial-gradient(ellipse 50% 40% at 30% 40%, hsla(24, 80%, 40%, 0.6) 0%, transparent 65%),
        linear-gradient(180deg,
            hsl(24, 65%, 10%) 0%,
            hsl(263, 50%, 14%) 30%,
            hsl(280, 45%, 20%) 55%,
            hsl(90, 40%, 12%) 75%,
            hsl(88, 55%, 6%) 100%);
}

.cinema-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 24px;
    background: linear-gradient(to top, hsla(24, 60%, 6%, 0.9) 0%, transparent 100%);
}

.cinema-time {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-300);
    display: block;
    margin-bottom: 6px;
}

.cinema-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--gold-50);
    margin-bottom: 6px;
}

.cinema-desc {
    font-family: var(--font-serif);
    font-size: 13px;
    font-style: italic;
    color: hsla(43, 60%, 80%, 0.8);
    line-height: 1.5;
}

.strip-scroll-indicator {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px 24px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.strip-progress-bar {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    max-width: 200px;
}

.strip-progress-fill {
    height: 100%;
    width: 20%;
    background: var(--accent-gold);
    border-radius: 2px;
    transition: width 0.15s;
}

/* ── FIELD SECTION ─────────────────────────────────────── */
.field-section {
    padding: 80px 0 0;
    background: var(--bg-canvas);
}

.field-header {
    text-align: center;
    margin-bottom: 32px;
}

.field-hint {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
}

.canvas-container-outer {
    position: relative;
    width: 100%;
    height: clamp(300px, 55vw, 520px);
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-top: 16px;
    cursor: crosshair;
}

.canvas-instructions {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-gold);
    border-radius: 50%;
    animation: dot-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes dot-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.6);
        opacity: 0.6;
    }
}

#field-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* ── ABOUT SECTION ─────────────────────────────────────── */
.about-section {
    padding: 100px 0;
    background: var(--bg-canvas);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
}

@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.about-text {}

.about-heading {
    font-family: var(--font-display);
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 24px;
}

.about-quote {
    font-size: clamp(17px, 3vw, 22px);
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.7;
    border-left: 3px solid var(--accent-gold);
    padding-left: 20px;
    margin-bottom: 36px;
}

.about-quote strong {
    color: var(--accent-warm);
    font-style: normal;
    font-weight: 600;
}

/* Envelope */
.envelope-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.envelope-wrapper {
    position: relative;
    width: min(340px, 90vw);
    height: 220px;
    cursor: pointer;
    perspective: 1000px;
    user-select: none;
}

.envelope-flap,
.envelope-pocket {
    position: absolute;
    width: 100%;
    border-radius: var(--radius-md);
    transition: transform 0.7s var(--ease-smooth);
}

.envelope-pocket {
    bottom: 0;
    height: 160px;
    background: linear-gradient(135deg, hsl(43, 80%, 55%) 0%, hsl(36, 85%, 48%) 60%, hsl(30, 80%, 42%) 100%);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.envelope-pocket::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to bottom, transparent 0%, hsla(30, 70%, 35%, 0.35) 100%);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.envelope-flap {
    top: 0;
    height: 120px;
    background: linear-gradient(145deg, hsl(43, 85%, 60%) 0%, hsl(36, 88%, 52%) 100%);
    transform-origin: top center;
    clip-path: polygon(0% 0%, 50% 80%, 100% 0%);
    box-shadow: 0 4px 16px hsla(36, 80%, 40%, 0.3);
    z-index: 3;
    transition: transform 0.7s var(--ease-smooth);
}

.envelope-seal {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, hsl(36, 90%, 52%) 0%, hsl(30, 85%, 42%) 100%);
    border-radius: 50%;
    border: 3px solid hsl(43, 80%, 72%);
    z-index: 4;
    box-shadow: 0 0 0 1px hsla(43, 80%, 40%, 0.4), var(--shadow-sm);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
}

.envelope-seal::after {
    content: '🌻';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
}

.envelope-wrapper:hover .envelope-seal {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: var(--shadow-gold), var(--shadow-sm);
}

.envelope-card {
    position: absolute;
    bottom: 12px;
    left: 10px;
    right: 10px;
    height: 220px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    transform-origin: bottom center;
    transform: translateY(0);
    transition: transform 0.75s var(--ease-spring), opacity 0.5s;
    z-index: 200;
    overflow: hidden;
    border: 1px solid var(--border-color);
    padding: 18px;
    opacity: 0;
    display: flex;
    align-items: flex-start;
}

.envelope-card-inner {
    overflow-y: auto;
    scrollbar-width: none;
}

.envelope-card-inner::-webkit-scrollbar {
    display: none;
}

.envelope-stamp {
    font-size: 22px;
    display: block;
    margin-bottom: 8px;
}

.letter-text {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.3;
    color: var(--text-primary);
    font-style: italic;
}

.letter-sig {
    margin-top: 12px;
    font-family: var(--font-serif);
    font-size: 13px;
    font-style: italic;
    color: var(--accent-warm);
    font-weight: 600;
}

.envelope-wrapper.open .envelope-flap {
    transform: rotateX(-180deg);
}

.envelope-wrapper.open .envelope-card {
    transform: translateY(-140px);
    z-index: 999;
    opacity: 1;
}

.envelope-wrapper.open .envelope-seal {
    opacity: 0;
    pointer-events: none;
}

.envelope-hint {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-align: center;
    font-style: italic;
    transition: opacity 0.3s;
}

/* ── PHOTO BREAK ───────────────────────────────────────── */
.photo-break-section {
    position: relative;
    overflow: hidden;
    height: clamp(260px, 45vw, 520px);
}

.photo-break-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.photo-break-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    transform: scale(1.05);
    transition: transform 0.8s var(--ease-smooth);
}

.photo-break-section:hover .photo-break-img {
    transform: scale(1.0);
}

.photo-break-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, hsla(24, 60%, 8%, 0.7) 0%, hsla(24, 60%, 8%, 0.2) 60%, transparent 100%);
    display: flex;
    align-items: center;
    padding: 40px 60px;
}

.photo-break-quote {
    font-family: var(--font-serif);
    font-size: clamp(20px, 4vw, 38px);
    font-style: italic;
    color: var(--gold-100);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    max-width: 500px;
    line-height: 1.5;
}

/* ── GALLERY SECTION ───────────────────────────────────── */
.gallery-section {
    padding: 100px 0;
    background: var(--bg-canvas);
}

.gallery-header {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}

.filter-btn {
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-color);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    transition: all var(--duration-fast);
    min-height: 42px;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--brown-900);
}

/* Masonry Grid */
.masonry-gallery {
    columns: 2;
    column-gap: 12px;
    padding-inline: 16px;
    max-width: 1200px;
    margin-inline: auto;
}

@media (min-width: 640px) {
    .masonry-gallery {
        columns: 3;
        column-gap: 16px;
    }
}

@media (min-width: 1024px) {
    .masonry-gallery {
        columns: 4;
        column-gap: 20px;
        padding-inline: 40px;
    }
}

.gallery-tile {
    break-inside: avoid;
    margin-bottom: 12px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

@media (min-width: 640px) {
    .gallery-tile {
        margin-bottom: 16px;
    }
}

@media (min-width: 1024px) {
    .gallery-tile {
        margin-bottom: 20px;
    }
}

.gallery-tile--tall {}

.gallery-tile--wide {}

.gallery-tile--square {}

.gallery-tile-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    transition: transform 0.5s var(--ease-smooth), box-shadow 0.5s;
}

.gallery-tile:hover .gallery-tile-inner {
    transform: scale(1.025);
    box-shadow: var(--shadow-lg);
}

.gallery-tile img {
    width: 100%;
    display: block;
    transition: transform 0.7s var(--ease-smooth);
}

.gallery-tile:hover img {
    transform: scale(1.07);
}

.gallery-tile--tall .gallery-tile-inner {
    aspect-ratio: 3 / 4;
}

.gallery-tile--wide .gallery-tile-inner {
    aspect-ratio: 4 / 3;
}

.gallery-tile--square .gallery-tile-inner {
    aspect-ratio: 1 / 1;
}

/* CSS Art tiles */
.css-art {
    width: 100%;
    height: 100%;
    min-height: 160px;
    position: absolute;
    inset: 0;
}

.css-art--spiral {
    background:
        radial-gradient(circle 65% at 50% 50%, hsl(25, 55%, 24%) 0%, hsl(25, 50%, 20%) 40%, hsl(25, 45%, 14%) 100%),
        repeating-conic-gradient(from 0deg, hsl(43, 90%, 55%) 0deg 2deg, hsl(36, 80%, 44%) 2deg 11.25deg);
    background-blend-mode: multiply;
}

.css-art--spiral::after {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, hsl(43, 90%, 60%) 0%, hsl(36, 80%, 44%) 25%, hsl(25, 55%, 22%) 45%, hsl(25, 60%, 16%) 80%);
    box-shadow: 0 0 40px hsla(43, 90%, 50%, 0.4);
}

.css-art--midnight {
    background: linear-gradient(180deg,
            hsl(263, 65%, 6%) 0%,
            hsl(280, 55%, 10%) 40%,
            hsl(263, 50%, 15%) 70%,
            hsl(90, 30%, 12%) 100%);
}

.css-art--midnight::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, hsla(43, 90%, 40%, 0.6) 0%, transparent 70%);
    border-radius: 50%;
}

.css-art--midnight::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 14%;
    transform: translateX(-50%);
    width: 28%;
    height: 28%;
    background: radial-gradient(circle, hsl(43, 90%, 55%) 0%, hsl(36, 80%, 44%) 60%, hsl(25, 50%, 24%) 100%);
    border-radius: 50%;
    box-shadow: 0 0 30px hsla(43, 90%, 50%, 0.5);
}

.css-art--sunrise {
    background: linear-gradient(180deg,
            hsl(260, 60%, 10%) 0%,
            hsl(20, 80%, 22%) 30%,
            hsl(36, 95%, 52%) 55%,
            hsl(43, 100%, 68%) 70%,
            hsl(88, 42%, 22%) 80%,
            hsl(88, 50%, 12%) 100%);
}

.css-art--sunrise::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translateX(-50%) translateY(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, hsl(48, 100%, 85%) 0%, hsl(43, 100%, 70%) 30%, hsla(36, 100%, 60%, 0.4) 60%, transparent 80%);
    box-shadow: 0 0 60px hsla(43, 100%, 70%, 0.6);
}

.css-art--rain {
    background: linear-gradient(135deg,
            hsl(200, 40%, 60%) 0%,
            hsl(210, 35%, 52%) 40%,
            hsl(205, 38%, 42%) 80%,
            hsl(210, 40%, 30%) 100%);
}

.css-art--rain::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 3px at 20% 30%, hsla(43, 80%, 70%, 0.8) 0%, transparent 100%),
        radial-gradient(circle 4px at 55% 60%, hsla(43, 80%, 70%, 0.7) 0%, transparent 100%),
        radial-gradient(circle 2px at 75% 25%, hsla(43, 80%, 70%, 0.9) 0%, transparent 100%),
        radial-gradient(circle 5px at 35% 70%, hsla(43, 80%, 70%, 0.6) 0%, transparent 100%),
        radial-gradient(circle 3px at 85% 55%, hsla(43, 80%, 70%, 0.8) 0%, transparent 100%);
}

.css-art--aerial {
    background: linear-gradient(0deg, hsl(90, 50%, 18%) 0%, hsl(88, 45%, 22%) 100%);
}

.css-art--aerial::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 28px,
            hsla(43, 90%, 55%, 0.7) 28px,
            hsla(43, 90%, 55%, 0.7) 36px),
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 28px,
            hsla(43, 90%, 55%, 0.7) 28px,
            hsla(43, 90%, 55%, 0.7) 36px);
}

.css-art--watercolor {
    background:
        radial-gradient(ellipse 80% 60% at 40% 40%, hsla(43, 90%, 65%, 0.9) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 70% 60%, hsla(36, 85%, 55%, 0.7) 0%, transparent 70%),
        linear-gradient(135deg, hsl(43, 60%, 88%) 0%, hsl(43, 50%, 80%) 100%);
    mix-blend-mode: multiply;
}

.css-art--watercolor::after {
    content: '';
    position: absolute;
    inset: 15% 20%;
    background: radial-gradient(circle at 50% 40%, hsl(25, 60%, 30%) 0%, hsl(25, 55%, 20%) 30%, transparent 60%);
    border-radius: 50% 50% 45% 55%;
}

.gallery-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, hsla(24, 60%, 8%, 0.85) 0%, transparent 60%);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity var(--duration-medium);
}

.gallery-tile:hover .gallery-tile-overlay {
    opacity: 1;
}

.gallery-tile-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-300);
    margin-bottom: 4px;
}

.gallery-tile-overlay h4 {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--gold-50);
    font-weight: 700;
}

/* Lightbox */
.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0, 0, 0, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.lightbox-modal[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: hsla(255, 255%, 255%, 0.08);
    border: 1px solid hsla(255, 255%, 255%, 0.15);
    color: white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background 0.2s, transform 0.2s;
    z-index: 2;
    backdrop-filter: blur(8px);
}

.lightbox-close {
    top: 16px;
    right: 16px;
    font-size: 18px;
}

.lightbox-prev {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-next {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: hsla(43, 100%, 50%, 0.25);
    transform: scale(1.1) translateY(0);
}

.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.lightbox-next:hover {
    transform: translateY(-50%) scale(1.1);
}

.lightbox-content {
    max-width: min(90vw, 800px);
    max-height: 85svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 72svh;
    border-radius: var(--radius-lg);
    object-fit: contain;
}

#lightbox-css-art {
    width: min(80vw, 500px);
    height: min(80vw, 500px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.lightbox-caption {
    font-family: var(--font-serif);
    font-size: 14px;
    color: hsla(43, 60%, 80%, 0.8);
    font-style: italic;
    text-align: center;
}

/* ── POLAROID MEMORIES ─────────────────────────────────── */
.memories-section {
    padding: 80px 0;
    background: var(--bg-surface);
    overflow: hidden;
}

.memories-header {
    text-align: center;
    margin-bottom: 40px;
}

.memories-hint {
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    font-style: italic;
    margin-top: 8px;
}

.polaroid-strip-wrapper {
    overflow: hidden;
    padding: 20px 0 32px;
}

.polaroid-strip {
    display: flex;
    gap: 24px;
    padding: 24px 28px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

.polaroid-strip::-webkit-scrollbar {
    display: none;
}

.polaroid-strip:active {
    cursor: grabbing;
}

.polaroid {
    flex: 0 0 clamp(170px, 36vw, 240px);
    background: white;
    padding: 12px 12px 40px;
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
    transform: rotate(var(--rot, 0deg));
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
    scroll-snap-align: start;
    cursor: pointer;
    animation: polaroid-float var(--delay, 0s) 4s ease-in-out infinite;
}

.polaroid:hover {
    transform: rotate(0deg) scale(1.06) translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    position: relative;
}

@keyframes polaroid-float {

    0%,
    100% {
        transform: rotate(var(--rot, 0deg)) translateY(0);
    }

    50% {
        transform: rotate(var(--rot, 0deg)) translateY(-4px);
    }
}

.polaroid-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.polaroid-img--dawn {
    background-image: url('assets/hero_dawn.png');
}

.polaroid-img--honey {
    background-image: url('assets/polaroid_honeybee.png');
}

.polaroid-img--bouquet {
    background-image: url('assets/polaroid_bouquet.png');
}

.polaroid-img {
    position: relative;
}

.polaroid-img--shadow {
    background-image: url('assets/polaroid_shadow.png');
}

.polaroid-img--close {
    background-image: url('assets/gallery_golden_hour.png');
}

.polaroid-img--sunset {
    background-image: url('assets/scene_dusk.png');
}

.polaroid-caption {
    margin-top: 8px;
    text-align: center;
    font-family: 'Segoe UI', cursive, sans-serif;
    font-size: 12px;
    color: #555;
    font-style: italic;
    line-height: 1.3;
}

.dark-theme .polaroid {
    background: hsl(25, 20%, 14%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.dark-theme .polaroid-caption {
    color: hsl(43, 30%, 65%);
}

/* ── STORIES SECTION ───────────────────────────────────── */
.stories-section {
    padding: 100px 0;
    background: var(--bg-canvas);
}

.stories-header {
    text-align: center;
    margin-bottom: 60px;
}

.story-journey {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-inline: 20px;
    max-width: var(--container-max);
    margin-inline: auto;
}

.story-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
}

@media (min-width: 768px) {
    .story-card {
        grid-template-columns: 1fr 1fr;
    }

    .story-card:nth-child(even) .story-visual {
        order: 2;
    }

    .story-card:nth-child(even) .story-text {
        order: 1;
    }
}

.story-visual {
    height: clamp(260px, 45vw, 420px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-lg);
}

.story-visual--vangogh {
    background-image: url('assets/story_vangogh.png');
}

.story-visual--ancient {
    background-image: url('assets/story_ancient.png');
}

.story-visual--personal {
    background-image: url('assets/scene_golden.png');
}

.story-era {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-warm);
    display: block;
    margin-bottom: 14px;
}

.story-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.story-body {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 460px;
}

.story-body .user-name {
    color: var(--accent-warm);
    font-weight: 600;
}

/* ── SUNSET SECTION ────────────────────────────────────── */
.sunset-section {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sunset-sky-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            hsl(24, 65%, 8%) 0%,
            hsl(263, 60%, 10%) 20%,
            hsl(263, 55%, 6%) 50%,
            hsl(263, 65%, 4%) 100%);
    transition: background 2.5s var(--ease-smooth);
}

.stars-canvas-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#stars-canvas {
    width: 100%;
    height: 100%;
}

.glowing-moon {
    position: absolute;
    top: 8%;
    right: 10%;
    width: clamp(60px, 12vw, 100px);
    height: auto;
    z-index: 1;
    animation: moon-float 8s ease-in-out infinite;
    opacity: 0;
    transition: opacity 1.5s 0.5s;
}

.sunset-section.visible .glowing-moon {
    opacity: 1;
}

@keyframes moon-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.sunset-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 24px;
    transform: translateY(30px);
    opacity: 0;
    transition: opacity 0.9s 0.3s var(--ease-smooth), transform 0.9s 0.3s var(--ease-smooth);
}

.sunset-section.visible .sunset-content {
    opacity: 1;
    transform: translateY(0);
}

.sunset-section .section-tag {
    color: hsl(280, 60%, 70%);
    border-color: hsl(280, 60%, 70%);
}

.sunset-section .section-title {
    color: var(--gold-100);
}

.sunset-message {
    font-family: var(--font-serif);
    font-size: clamp(17px, 3.5vw, 24px);
    color: hsla(43, 60%, 80%, 0.85);
    font-style: italic;
    margin-bottom: 40px;
    line-height: 1.8;
    max-width: 560px;
    margin-inline: auto;
}

.sunset-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
}

@media (min-width: 480px) {
    .sunset-actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* Sleep mode */
.sleep-active .sunset-sky-gradient {
    background: linear-gradient(180deg, hsl(263, 70%, 3%) 0%, hsl(263, 65%, 5%) 100%);
}

/* ── FOOTER ────────────────────────────────────────────── */
.main-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding-top: 60px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

@media (min-width: 640px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

.footer-brand {}

.footer-tagline {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-newsletter h4 {
    font-family: var(--font-display);
    font-size: 20px;
    margin-bottom: 8px;
}

.footer-newsletter>p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.newsletter-form input {
    flex: 1;
    min-width: 180px;
    padding: 13px 18px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.25s;
}

.newsletter-form input:focus {
    border-color: var(--accent-gold);
}

.newsletter-success {
    font-size: 14px;
    color: var(--accent-warm);
    font-style: italic;
    margin-top: 10px;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 20px 24px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* ── GLASS CARD (utility) ──────────────────────────────── */
.glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* ── Animations ────────────────────────────────────────── */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Focus Styles (accessibility) ─────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}