/* =============================================================================
   Tea — Interactive 51st Birthday Card
   styles.css  ·  Philosophy: "Editorial Nocturne"
   Sections: (1) tokens  (2) base/reset + utilities  (3) atmosphere layers
             (4) section system + reveal  (5) disclosure primitive
             (6) intro  (7) transformation scene  (8) flower garden
             (9) drawer  (10) intermezzo  (11) message + P.S.
             (12) responsive  (13) reduced-motion
   Tokens are inlined (from DESIGN_TOKENS.css) so the deliverable stays at three
   files (index.html / styles.css / script.js), per the brief.
   ============================================================================= */

/* ----------------------------------------------------------------------------
   (1) DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
  --c-night-900: #080a1a;
  --c-night-800: #0e1330;
  --c-night-700: #161b40;
  --c-night-600: #20284f;

  --c-purple-700: #432b73;
  --c-purple-600: #573593;
  --c-purple-500: #7c56c7;
  --c-purple-400: #9b7bd8;
  --c-purple-300: #bca4e6;
  --c-purple-200: #dccdf2;

  --c-gold-600: #c2922e;
  --c-gold-500: #e0b040;
  --c-gold-400: #efc75e;
  --c-gold-300: #f4d789;
  --c-gold-200: #f8e7b6;

  --c-cream-50: #fbf7ef;
  --c-cream-100: #f6efe1;
  --c-cream-200: #ebe0cc;
  --c-cream-300: #dbcbaf;

  --c-brown-700: #382519;
  --c-brown-600: #563d2c;
  --c-brown-500: #785842;
  --c-brown-400: #9a7a60;

  --c-mist-100: #ece7f4;
  --c-mist-300: #b6adc6;
  --c-mist-500: #837a95;

  /* flower-specific warm accents (on-palette extensions) */
  --c-rose: #c96a86;
  --c-magenta: #b65fa6;

  --color-bg-primary: var(--c-night-900);
  --color-bg-secondary: var(--c-night-800);
  --color-bg-tertiary: var(--c-night-700);
  --color-bg-inverse: var(--c-cream-100);

  --color-text-primary: var(--c-mist-100);
  --color-text-secondary: var(--c-mist-300);
  --color-text-tertiary: var(--c-mist-500);
  --color-text-inverse: var(--c-brown-700);
  --color-text-link: var(--c-gold-400);

  --color-border-primary: color-mix(in srgb, var(--c-mist-100) 14%, transparent);
  --color-border-secondary: color-mix(in srgb, var(--c-mist-100) 7%, transparent);
  --color-border-focus: var(--c-gold-400);

  --color-accent-primary: var(--c-purple-400);
  --color-accent-primary-hover: var(--c-purple-300);
  --color-accent-primary-active: var(--c-purple-500);
  --color-accent-secondary: var(--c-gold-400);

  --color-surface-overlay: color-mix(in srgb, var(--c-night-900) 72%, transparent);

  --grad-night: radial-gradient(120% 90% at 72% 18%, var(--c-night-700) 0%, var(--c-night-900) 60%);
  --grad-dusk: radial-gradient(120% 90% at 70% 22%, var(--c-purple-700) 0%, var(--c-night-800) 65%);
  --grad-glow: radial-gradient(130% 100% at 68% 26%, var(--c-purple-600) 0%, #2a1c44 55%, var(--c-night-800) 100%);
  --grad-dawn: radial-gradient(130% 110% at 64% 16%, var(--c-cream-50) 0%, var(--c-cream-100) 46%, var(--c-cream-200) 100%);

  --accent-eyebrow: color-mix(in srgb, var(--c-gold-300) 38%, transparent);

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;
  --space-12: 16rem;

  --font-family-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-xs: 0.78rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  --font-size-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --font-size-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --font-size-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --font-size-3xl: clamp(2.8rem, 2rem + 3.6vw, 4.8rem);
  --font-size-4xl: clamp(3.6rem, 2.4rem + 5.6vw, 7rem);

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.18em;

  --max-width-content: 38rem;
  --max-width-wide: 62rem;
  --max-width-page: 90rem;

  --border-radius-sm: 4px;
  --border-radius-md: 10px;
  --border-radius-lg: 20px;
  --border-radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(8, 10, 26, 0.25);
  --shadow-md: 0 12px 32px -12px rgba(8, 10, 26, 0.45);
  --shadow-lg: 0 40px 80px -28px rgba(8, 10, 26, 0.6);
  --shadow-bloom: 0 0 48px -8px color-mix(in srgb, var(--c-gold-300) 45%, transparent);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--c-gold-400) 65%, transparent);

  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-reveal: 900ms;
  --duration-scene: 1400ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --stagger-1: 0ms;
  --stagger-2: 220ms;
  --stagger-3: 440ms;

  --grain-opacity-dark: 0.07;
  --grain-opacity-dawn: 0.04;
  --bloom-opacity: 0.5;

  --backdrop-color: var(--c-night-900);
  --bloom-live: 0.12;
  --grain-live: var(--grain-opacity-dark);
}

.stage-night {
  --color-bg-primary: var(--c-night-900);
  --color-bg-secondary: var(--c-night-800);
  --section-gradient: var(--grad-night);
}
.stage-dusk {
  --color-bg-primary: var(--c-night-800);
  --color-bg-secondary: var(--c-purple-700);
  --color-text-primary: var(--c-mist-100);
  --color-accent-primary: var(--c-purple-300);
  --section-gradient: var(--grad-dusk);
}
.stage-glow {
  --color-bg-primary: #2a1c44;
  --color-bg-secondary: var(--c-purple-600);
  --color-text-primary: var(--c-mist-100);
  --color-text-secondary: var(--c-gold-200);
  --color-accent-primary: var(--c-purple-300);
  --color-accent-secondary: var(--c-gold-300);
  --section-gradient: var(--grad-glow);
}
.stage-dawn {
  --color-bg-primary: var(--c-cream-100);
  --color-bg-secondary: var(--c-cream-50);
  --color-text-primary: var(--c-brown-700);
  --color-text-secondary: var(--c-brown-500);
  --color-text-tertiary: var(--c-brown-400);
  --color-accent-primary: var(--c-purple-600);
  --color-accent-secondary: var(--c-gold-600);
  --color-border-primary: color-mix(in srgb, var(--c-brown-700) 14%, transparent);
  --color-border-secondary: color-mix(in srgb, var(--c-brown-700) 7%, transparent);
  --color-border-focus: var(--c-purple-600);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--c-purple-500) 55%, transparent);
  --section-gradient: var(--grad-dawn);
}

/* ----------------------------------------------------------------------------
   (2) BASE / RESET + UTILITIES
   ---------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  background-color: var(--c-night-900);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1,
h2,
h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
p {
  text-wrap: pretty;
}
ul {
  list-style: none;
  padding: 0;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden until a keyboard user focuses it. Uses the clip + 1x1 size
   technique rather than an off-screen transform: iOS Safari can mis-paint a
   position:fixed element that's translated out of view, making it peek at the
   top-left over the status bar. A clipped 1x1 box has nothing to mis-paint. */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border-radius: var(--border-radius-full);
  background: var(--c-cream-50);
  color: var(--c-night-900);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  overflow: visible;
  clip: auto;
  clip-path: none;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--border-radius-sm);
}

/* ----------------------------------------------------------------------------
   (3) ATMOSPHERE LAYERS
   ---------------------------------------------------------------------------- */
.backdrop,
.bloom,
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.backdrop {
  z-index: -3;
  background-color: var(--backdrop-color);
  transition: background-color var(--duration-scene) var(--easing-soft);
}
.bloom {
  z-index: -2;
  background: radial-gradient(
    58% 48% at 72% 20%,
    color-mix(in srgb, var(--c-gold-300) 42%, transparent) 0%,
    transparent 70%
  );
  opacity: var(--bloom-live);
  transition: opacity var(--duration-scene) var(--easing-soft);
}
.grain {
  z-index: -1;
  opacity: var(--grain-live);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transition: opacity var(--duration-scene) var(--easing-soft);
}
body[data-stage="night"] {
  --backdrop-color: #080a1a;
  --bloom-live: 0.12;
  --grain-live: 0.07;
}
body[data-stage="dusk"] {
  --backdrop-color: #15103a;
  --bloom-live: 0.3;
  --grain-live: 0.07;
}
body[data-stage="glow"] {
  --backdrop-color: #251738;
  --bloom-live: 0.55;
  --grain-live: 0.06;
}
body[data-stage="dawn"] {
  --backdrop-color: #f4eddf;
  --bloom-live: 0.4;
  --grain-live: 0.035;
}

/* ----------------------------------------------------------------------------
   (4) SECTION SYSTEM + REVEAL
   ---------------------------------------------------------------------------- */
.section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-9) var(--space-5);
  color: var(--color-text-primary);
  background: var(--section-gradient, var(--grad-night));
}
.js .section {
  background: transparent;
}
.section__inner {
  width: 100%;
  max-width: var(--max-width-content);
  text-align: center;
}

.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--duration-reveal) var(--easing-soft),
    transform var(--duration-reveal) var(--easing-soft);
  will-change: opacity, transform;
}
.js .section.in-view .reveal {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------------
   (5) DISCLOSURE PRIMITIVE — animated grid-rows collapse (no height JS).
   No-JS: panels are open/visible. JS collapses, then .is-open re-opens.
   ---------------------------------------------------------------------------- */
.disc-panel {
  display: grid;
  grid-template-rows: 1fr;
}
.js .disc-panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--easing-soft);
}
.js .disc-panel.is-open {
  grid-template-rows: 1fr;
}
.disc-panel__inner {
  overflow: hidden;
  min-height: 0;
}
.js .disc-panel__inner {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--easing-soft);
}
.js .disc-panel.is-open .disc-panel__inner {
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   (6) INTRO
   ---------------------------------------------------------------------------- */
.intro {
  position: relative;
}
.intro__eyebrow {
  display: block;
  width: 92px;
  height: 46px;
  margin: 0 auto var(--space-5);
  margin-right: clamp(0px, 50% - 40px, 120px); /* nudged off-centre, upper-right */
  border-top: 1.5px solid var(--accent-eyebrow);
  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
  opacity: 0.8;
}
.intro__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
}
.intro__subtitle {
  margin-top: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-style: italic;
  font-family: var(--font-family-display);
}
.otvori {
  position: relative;
  overflow: hidden; /* clip the glow to the pill's rounded shape */
  margin-top: var(--space-8);
  padding: var(--space-3) var(--space-7);
  border-radius: var(--border-radius-full);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border: 1px solid var(--color-border-primary);
  transition: border-color var(--duration-slow) var(--easing-soft),
    color var(--duration-slow) var(--easing-soft),
    transform var(--duration-slow) var(--easing-soft);
}
.otvori__glow {
  position: absolute;
  inset: 0; /* confined to the pill, then clipped by overflow:hidden */
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse 75% 130% at center, color-mix(in srgb, var(--c-gold-300) 55%, transparent) 0%, transparent 72%);
  opacity: 0;
  transition: opacity var(--duration-slower) var(--easing-soft);
}
.otvori:hover,
.otvori:focus-visible {
  color: var(--c-gold-200);
  border-color: color-mix(in srgb, var(--c-gold-300) 50%, transparent);
  transform: translateY(-2px);
}
.otvori:hover .otvori__glow,
.otvori:focus-visible .otvori__glow {
  opacity: 0.5;
}

/* ----------------------------------------------------------------------------
   (7) TRANSFORMATION SCENE
   ---------------------------------------------------------------------------- */
#transformacija {
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.scene__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.25;
  transition: opacity var(--duration-scene) var(--easing-soft),
    transform var(--duration-scene) var(--easing-soft),
    background-color var(--duration-scene) var(--easing-soft);
}
.scene__blob--1 {
  width: 46vw;
  height: 46vw;
  top: 8%;
  left: 6%;
  background: var(--c-night-700);
}
.scene__blob--2 {
  width: 38vw;
  height: 38vw;
  bottom: 4%;
  right: 10%;
  background: var(--c-purple-700);
}
.scene__blob--3 {
  width: 28vw;
  height: 28vw;
  top: 30%;
  right: 28%;
  background: var(--c-night-800);
}
.in-view .scene__blob {
  opacity: 0.55;
}
.in-view .scene__blob--1 {
  background: var(--c-purple-600);
  transform: translate(2%, -2%);
}
.in-view .scene__blob--2 {
  background: var(--c-gold-500);
  opacity: 0.4;
  transform: translate(-2%, 1%);
}
.in-view .scene__blob--3 {
  background: var(--c-purple-400);
}
.scene__flower {
  position: absolute;
  width: clamp(64px, 10vw, 116px);
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  transition: opacity var(--duration-scene) var(--easing-soft),
    transform var(--duration-scene) var(--easing-soft),
    filter var(--duration-scene) var(--easing-soft);
}
.scene__flower--a {
  bottom: 15%;
  left: 17%;
  transition-delay: 0.5s;
}
.scene__flower--b {
  bottom: 22%;
  right: 21%;
  transition-delay: 0.9s;
}
.in-view .scene__flower {
  opacity: 0.96;
  transform: none;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c-gold-300) 38%, transparent));
}
.transform-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.transform-line {
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}
.js .in-view .transform-line {
  animation: rise var(--duration-reveal) var(--easing-soft) both;
}
.js .in-view .transform-line:nth-child(2) {
  animation-delay: 0.5s;
}
.js .in-view .transform-line:nth-child(3) {
  animation-delay: 1s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------------------------
   (8) FLOWER GARDEN
   ---------------------------------------------------------------------------- */
.garden {
  max-width: var(--max-width-wide);
}
.garden__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  justify-items: center;
  gap: var(--space-6) var(--space-4);
}
.flower-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 160px;
}
.flower {
  position: relative;
  isolation: isolate;
  display: block;
  padding: var(--space-2);
  border-radius: var(--border-radius-md);
  transition: transform var(--duration-slower) var(--easing-soft),
    filter var(--duration-slower) var(--easing-soft);
}
/* "beckon with a glow" — a soft warm halo behind every flower so it reads as
   interactive at rest; brightens on hover/focus. */
.flower::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-gold-300) 32%, transparent), transparent 68%);
  filter: blur(7px);
  opacity: 0.32;
  animation: flower-glow 4.5s var(--easing-soft) infinite;
  transition: opacity var(--duration-slower) var(--easing-soft);
}
.flower__svg {
  width: clamp(64px, 16vw, 92px);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(8, 10, 26, 0.4));
  /* "a held breath" — gentle continuous float on EVERY device (not just touch),
     so the flowers feel alive/interactive before any hover. */
  animation: breathe 5.5s var(--easing-soft) infinite;
}
.flower-item:nth-child(2n) .flower__svg { animation-delay: 1.1s; }
.flower-item:nth-child(3n) .flower__svg { animation-delay: 2.3s; }
.flower:hover,
.flower:focus-visible {
  transform: translateY(-6px) scale(1.05);
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--c-gold-300) 40%, transparent));
}
.flower:hover::before,
.flower:focus-visible::before {
  opacity: 0.9;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes flower-glow {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.46; }
}
@media (prefers-reduced-motion: reduce) {
  .flower__svg { animation: none !important; }
  .flower::before { animation: none !important; opacity: 0.4; }
}
.flower__cap {
  margin-top: var(--space-3);
  text-align: center;
}
.flower__cap p {
  padding-top: var(--space-2);
  font-family: var(--font-family-display);
  font-style: italic;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

/* Flower colours ride on `fill: currentColor`, which (unlike class selectors)
   inherits across the <use> shadow boundary. Two-tone parts and stems carry
   their own presentation attributes in the SVG defs. */
.flower__svg,
.scene__flower {
  fill: currentColor;
}
.flower--mimoza { color: var(--c-gold-400); }
.flower--narcis { color: var(--c-gold-300); }
.flower--tulipan { color: var(--c-purple-400); }
.flower--ruza { color: var(--c-rose); }
.flower--ciklama { color: var(--c-magenta); }
.scene__flower--a { color: var(--c-gold-400); }
.scene__flower--b { color: var(--c-purple-400); }

/* ----------------------------------------------------------------------------
   (9) LITERARY SECTION — Pride & Prejudice quote journey  (Section 4)
   The quotes scroll down below the intermezzo. Each quote sits in a `.joy-row`,
   so the existing journey engine drives it (in-view / is-focus / --rp / --foc).
   A quote BRIGHTENS + grows as it nears the screen centre and dims as it leaves
   — one quote in focus at a time. Reduced-motion / no-JS: all quotes visible,
   static. No overlap (flex column, generous gaps, bounded parallax offset).
   ---------------------------------------------------------------------------- */
.quotes-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  width: 100%;
  max-width: var(--max-width-wide);
  margin: var(--space-10) auto 0;
}
.joy-row {
  min-height: 34vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote {
  margin: 0;
  max-width: var(--quote-measure);
  margin-inline: auto;
  padding: 0 var(--space-5);
  text-align: center;
}
.quote__text {
  font-family: var(--font-family-display);
  font-style: italic;
  font-size: var(--quote-size);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}
.quote__cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-family-display);
  font-style: normal;
  font-size: var(--quote-attribution-size);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--quote-attribution-color);
}
.quote__cite::before { content: "- "; }

/* --- motion: quotes stay readable at all times; the centred one gets a gentle
   emphasis. The floor (0.6) means visibility never depends on the focus
   tracking landing — so scrolling up / fast / with momentum still shows them. */
@media (prefers-reduced-motion: no-preference) {
  .js .quote {
    opacity: calc(0.6 + var(--foc, 0) * 0.4);
    translate: 0 calc(var(--rp, 0) * var(--d) * 26px);
    scale: calc(0.96 + var(--foc, 0) * 0.04);
    transition: opacity 0.5s var(--easing-soft), translate 140ms linear,
      scale 140ms linear;
  }
}

@media (max-width: 767px) {
  .quotes-flow { gap: var(--space-6); margin-top: var(--space-8); }
  .joy-row { min-height: 38vh; }
}

/* reduced-motion: every quote fully visible, no movement */
@media (prefers-reduced-motion: reduce) {
  .js .quote {
    opacity: 1 !important;
    translate: 0 !important;
    scale: 1 !important;
    transition: none !important;
  }
}

/* ----------------------------------------------------------------------------
   (10) INTERMEZZO
   ---------------------------------------------------------------------------- */
.intermezzo {
  position: relative;
  max-width: var(--max-width-wide);
}
.intermezzo__art {
  position: relative;
  height: 120px;
  margin-bottom: var(--space-6);
}
.intermezzo__book {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(120px, 26vw, 200px);
  transform: translate(-115%, -50%);
  opacity: 0.55;
  /* stroke="currentColor" on the art rides on this colour across <use> */
  color: var(--c-gold-200);
}
.intermezzo__beam {
  position: absolute;
  right: 50%;
  top: 50%;
  width: clamp(120px, 26vw, 220px);
  height: 4px;
  transform: translate(115%, -50%) rotate(-8deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-gold-300) 70%, transparent), transparent);
  filter: blur(1px);
  box-shadow: 0 0 40px 10px color-mix(in srgb, var(--c-gold-300) 25%, transparent);
}
.intermezzo__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-style: italic;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------------------------
   (11) MESSAGE + P.S.
   ---------------------------------------------------------------------------- */
.cestitka {
  max-width: var(--max-width-content);
}
.message {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.message__p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}
.message__last {
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-tight);
}
.signature {
  margin-top: var(--space-2);
  font-family: var(--font-family-display);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-accent-primary);
}
/* Slow, deliberate per-line sequence (the emotional peak) */
.js .message > *,
.js .ps {
  opacity: 0;
  transform: translateY(1rem);
}
.js #cestitka.in-view .message > *,
.js #cestitka.in-view .ps {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--easing-soft), transform 1s var(--easing-soft);
}
.js #cestitka.in-view .message > :nth-child(1) { transition-delay: 0.1s; }
.js #cestitka.in-view .message > :nth-child(2) { transition-delay: 0.9s; }
.js #cestitka.in-view .message > :nth-child(3) { transition-delay: 1.7s; }
.js #cestitka.in-view .message > :nth-child(4) { transition-delay: 2.4s; }
.js #cestitka.in-view .ps { transition-delay: 3.1s; }

.ps {
  margin-top: var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.ps__dot {
  position: relative;
  width: 44px; /* ≥44px tap target; the visible dot is drawn smaller via ::before */
  height: 44px;
  border-radius: 50%;
  background: none;
}
.ps__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c-gold-400);
  opacity: 0.55;
  transition: opacity var(--duration-slow) var(--easing-soft),
    box-shadow var(--duration-slower) var(--easing-soft),
    transform var(--duration-slow) var(--easing-soft);
  animation: ps-pulse 4s var(--easing-soft) infinite;
}
.ps__dot:hover::before,
.ps__dot:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 26px 4px color-mix(in srgb, var(--c-gold-300) 55%, transparent);
}
@keyframes ps-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-gold-300) 45%, transparent); }
  50% { box-shadow: 0 0 18px 3px color-mix(in srgb, var(--c-gold-300) 30%, transparent); }
}
.ps__text p {
  padding-top: var(--space-2);
  font-family: var(--font-family-display);
  font-style: italic;
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------------------
   (12) RESPONSIVE  (mobile-first; enhance upward)
   ---------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .section {
    padding: var(--space-10) var(--space-8);
  }
  .garden__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .intermezzo__text {
    font-size: var(--font-size-xl);
  }
}
@media (min-width: 1024px) {
  .garden__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    justify-content: center;
    gap: var(--space-7);
  }
}

/* ----------------------------------------------------------------------------
   (13) REDUCED MOTION
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal,
  .js .in-view .transform-line,
  .js #cestitka.in-view .message > *,
  .js #cestitka.in-view .ps {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .js .message > *,
  .js .ps {
    opacity: 1 !important;
    transform: none !important;
  }
  .scene__blob,
  .scene__flower {
    transition: none !important;
  }
  .flower__svg,
  .ps__dot::before {
    animation: none !important;
  }
  .backdrop,
  .bloom,
  .grain,
  .skip-link {
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   SOUND TOGGLE — background-music control (fixed circular media button).
   Shows the ACTION as a CSS-drawn glyph: ▶ play when paused, ❚❚ pause when
   playing. Conventional + instantly legible.
   ---------------------------------------------------------------------------- */
.sound-toggle {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-full);
  background: color-mix(in srgb, var(--c-night-900) 48%, transparent);
  border: 1px solid var(--color-border-primary);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: border-color var(--duration-slow) var(--easing-soft),
    background var(--duration-slow) var(--easing-soft);
}
.sound-toggle:hover,
.sound-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--c-gold-300) 55%, transparent);
}
.sound-toggle__glyph {
  position: relative;
  width: 16px;
  height: 16px;
}
/* paused → play triangle */
.sound-toggle__glyph::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--c-gold-300);
  transform: translateX(2px); /* optical centring */
}
.sound-toggle__glyph::after {
  content: none;
}
/* playing → two pause bars */
.sound-toggle.is-playing .sound-toggle__glyph::before {
  width: 4px;
  height: 15px;
  border: 0;
  background: var(--c-gold-300);
  border-radius: 1px;
  transform: translateX(-3px);
}
.sound-toggle.is-playing .sound-toggle__glyph::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4px;
  height: 15px;
  background: var(--c-gold-300);
  border-radius: 1px;
  transform: translateX(3px);
}

/* ----------------------------------------------------------------------------
   CLOSING — Lunch invitation (#poziv). "Da" reveals the message; "Ne" is an
   evasive button (JS glides it away) that never submits.
   ---------------------------------------------------------------------------- */
.poziv {
  max-width: var(--max-width-content);
  text-align: center;
}
.poziv__lead {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.poziv__question {
  margin-top: var(--space-4);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  /* Even out the wrap so the last line isn't a lone word (e.g. "dvoje?" on
     375px). Progressive enhancement: ignored by browsers without support. */
  text-wrap: balance;
}
.poziv__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: center;
  align-items: center;
  max-height: 240px;
  transition: opacity var(--duration-slow) var(--easing-soft),
    max-height var(--duration-slow) var(--easing-soft),
    margin var(--duration-slow) var(--easing-soft);
}
.poziv__yes,
.poziv__no {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--border-radius-full);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  cursor: pointer;
}
.poziv__yes {
  background: var(--c-purple-600);
  color: var(--c-cream-50);
  border: 1px solid transparent;
  box-shadow: var(--shadow-md);
  transition: background var(--duration-slow) var(--easing-soft),
    transform var(--duration-slow) var(--easing-soft);
}
.poziv__yes:hover,
.poziv__yes:focus-visible {
  background: var(--c-purple-500);
  transform: translateY(-2px);
}
.poziv__no {
  position: relative;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
  will-change: transform;
  transition: transform 0.35s var(--easing-out),
    border-color var(--duration-slow) var(--easing-soft);
}
.poziv__reply {
  margin-top: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-style: italic;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}
/* JS: hide the reply until "Da"; collapse the buttons once answered */
.js .poziv__reply {
  display: none;
}
.js .poziv.answered .poziv__reply {
  display: flex;
  animation: poziv-reply 0.9s var(--easing-soft) both;
}
.js .poziv.answered .poziv__actions {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
}
@keyframes poziv-reply {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .poziv.answered .poziv__reply { animation: none !important; }
}