/* ==========================================================================
   ROVE WAITLIST & LIVING ARCHIVE
   - Visual Standard: Rove Private LGBTQ+ Social Cooperative
   - Typography: Inter (Functional/Navigation/Forms) + Instrument Serif (Literary/Emotional)
   - Color Palette: Warm Paper Canvas, Cobalt Interactive Accent, Pure White Surface
   - Floating Glass Navbar with Blur & Elevation Shadows
   - High-Contrast Editorial Hero with Multi-Stop Photography Vignette
   - Rove Authentic Pill Buttons with Chalk Outline & Spring Physics
   - Full-Length Edge-to-Edge Living Collage Archive Rail
   - Complete Editorial Site Footer
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light;
  /* ── Level 1 & 2 Rove Semantic Tokens ── */
  --canvas: #f7f4ec;
  --surface: #ffffff;
  --surface-sunken: #eee9dc;
  --line: #ded8cb;
  --border-subtle: #ded8cb;
  --border-pill: rgba(38, 39, 45, 0.14);

  --text: #111216;
  --text-muted: #4b4e57;
  --ink-primary: #111216;
  --ink-muted: #4b4e57;
  --ink-subtle: #62656e;
  --white: #ffffff;

  /* Cobalt Blue (Deliberate Interactive Actions & Focus) */
  --accent: #1f45d6;
  --on-accent: #ffffff;
  --accent-soft: #e8edfd;
  --on-accent-soft: #1a3bb8;
  --accent-gentle: #99b7f5;
  --accent-gentle-soft: #edf2fd;

  /* Secondary Archival Pigments (7-Drum Risograph Library) */
  --color-ochre: #fab327;
  --color-ochre-soft: #fef4dc;
  --color-terracotta: #f5793b;
  --color-terracotta-soft: #feece3;
  --color-rose: #f58f9e;
  --color-rose-soft: #fdebee;
  --color-sage: #267f53;
  --color-sage-soft: #e4f3eb;
  --color-lavender: #99b7f5;
  --color-lavender-soft: #eef3fe;

  --danger: #c0264f;
  --online: #17803d;

  /* Frosted Glass Tokens */
  --glass: rgba(255, 255, 255, 0.78);
  --glass-line: rgba(255, 255, 255, 0.75);
  --glass-shadow: rgba(17, 18, 22, 0.12);
  --chalk-outline: rgba(255, 255, 255, 0.35);
  --border-riso: rgba(40, 23, 59, 0.084);

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --easing: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0d0e11;
  --surface: #181920;
  --surface-sunken: #111217;
  --line: #2c2e3a;
  --border-subtle: #2c2e3a;
  --border-pill: rgba(255, 255, 255, 0.12);

  --text: #f7f4ec;
  --text-muted: #a2a5ae;
  --ink-primary: #f7f4ec;
  --ink-muted: #a2a5ae;
  --ink-subtle: #6c707a;
  --white: #ffffff;

  /* Cobalt Blue Dark */
  --accent: #7d9bff;
  --on-accent: #0d0e11;
  --accent-soft: #232846;
  --on-accent-soft: #b8c8ff;
  --accent-gentle: #b8cfff;
  --accent-gentle-soft: #1a243c;

  /* Secondary Archival Pigments - Dark */
  --color-ochre: #fcca59;
  --color-ochre-soft: #382d14;
  --color-terracotta: #f5793b;
  --color-terracotta-soft: #381f14;
  --color-rose: #f296bd;
  --color-rose-soft: #381a28;
  --color-sage: #38a56f;
  --color-sage-soft: #142e20;
  --color-lavender: #b8cfff;
  --color-lavender-soft: #1a243c;

  --danger: #ff8fab;
  --online: #4ade80;

  --glass: rgba(24, 25, 32, 0.85);
  --glass-line: rgba(255, 255, 255, 0.09);
  --glass-shadow: rgba(0, 0, 0, 0.5);
  --chalk-outline: rgba(125, 155, 255, 0.4);
  --border-riso: rgba(255, 255, 255, 0.098);
}

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

html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: relative;
  overflow-x: clip;
  background: var(--canvas);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("./paper-grain-tile.png?v=3");
  background-repeat: repeat;
  background-size: 64px 64px;
  opacity: 0.055;
  mix-blend-mode: multiply;
}

[data-theme="dark"] body::before {
  opacity: 0.045;
  mix-blend-mode: screen;
}

@media (pointer: fine) {
  html {
    overscroll-behavior: none;
  }
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: var(--font-body);
  background-color: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

.skip-link {
  position: absolute;
  top: -9999px;
  left: 16px;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: top 0.2s var(--easing);
}

.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--on-accent);
}

::selection {
  background: var(--accent-soft);
  color: var(--on-accent-soft);
}

/* ── ROVE SIGNATURE BUTTONS ─────── */
.btn-rove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  background-color: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0 22px;
  height: 42px;
  border: 1px solid var(--chalk-outline);
  box-shadow:
    0 1px 2px rgba(17, 18, 22, 0.08),
    0 4px 14px color-mix(in srgb, var(--accent) 26%, transparent);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 220ms var(--easing),
    box-shadow 220ms ease,
    background-color 200ms ease;
}

.btn-rove:hover {
  background-color: color-mix(in srgb, var(--accent) 88%, #000);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(17, 18, 22, 0.12),
    0 10px 26px color-mix(in srgb, var(--accent) 38%, transparent);
}

.btn-rove:active {
  transform: scale(0.97);
}

.btn-rove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn-rove svg {
  transition: transform 260ms var(--easing);
}

.btn-rove:hover svg {
  transform: translateX(4px);
}

.btn-rove-lg {
  height: 52px;
  padding: 0 32px;
  font-size: 16px;
  gap: 10px;
}

/* ── FROSTED GLASS EFFECT PANEL (Matching Rove) ────────── */
.glass-panel {
  border: 1px solid var(--glass-line);
  background: var(--glass);
  box-shadow:
    0 1px 2px var(--glass-shadow),
    0 16px 44px color-mix(in srgb, var(--glass-shadow) 72%, transparent);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

[data-theme="dark"] .glass-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px var(--glass-shadow),
    0 20px 52px color-mix(in srgb, var(--glass-shadow) 80%, transparent);
}

/* ── FLOATING GLASS NAVBAR (http://localhost:5173) ──────────── */
.floating-nav-wrapper {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 0 clamp(16px, 3.5vw, 64px);
  pointer-events: none;
}

.glass-navbar {
  pointer-events: auto;
  width: 100%;
  max-width: 1200px;
  height: 60px;
  border-radius: 9999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow:
    0 1px 2px var(--glass-shadow),
    0 16px 40px -8px color-mix(in srgb, var(--glass-shadow) 75%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 2vw, 24px) 0 clamp(20px, 2.5vw, 36px);
  transition: height 0.3s var(--easing), background-color 0.3s var(--easing), border-color 0.3s var(--easing), box-shadow 0.3s var(--easing);
}

.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  gap: 8px;
}

.nav-brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

.send-animation {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.send-envelope {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168px;
  height: 112px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: 0 18px 42px rgb(17 18 22 / 0.2);
  transform: translate(-50%, -50%) scale(0.5) rotate(-3deg);
  transform-origin: center;
}

.send-envelope::before,
.send-envelope::after {
  content: "";
  position: absolute;
  inset: 0;
}

.send-envelope::before {
  background: var(--accent-gentle-soft);
  clip-path: polygon(0 0, 50% 54%, 100% 0);
  transform-origin: top center;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.send-envelope::after {
  border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  clip-path: polygon(0 100%, 50% 46%, 100% 100%);
}

.send-envelope-mark {
  position: relative;
  z-index: 1;
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-style: italic;
}

.send-animation.is-ready {
  opacity: 1;
  visibility: visible;
}

.send-animation.is-ready .send-envelope {
  animation: envelopeAppear 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.send-animation.is-flying .send-envelope {
  animation: envelopeFlyToLogo 900ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards;
}

@keyframes envelopeAppear {
  from {
    transform: translate(-50%, -50%) scale(0.5) rotate(-3deg);
  }
  to {
    transform: translate(-50%, -50%) scale(1) rotate(2deg);
  }
}

@keyframes envelopeFlyToLogo {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(2deg);
    opacity: 1;
  }
  62% {
    transform: translate(calc(-50% + var(--fly-mid-x, -19vw)), calc(-50% + var(--fly-mid-y, -26vh))) scale(0.62) rotate(9deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--fly-x, -30vw)), calc(-50% + var(--fly-y, -42vh))) scale(0.12) rotate(-8deg);
    opacity: 0;
  }
}

.pasteup-desk-card.is-sending {
  pointer-events: none;
}

.pasteup-desk-card.is-folding .mail-letter {
  animation: letterFoldAway 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top center;
}

.pasteup-desk-card.is-folding .mail-cover-top {
  animation: letterHeaderFold 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: bottom center;
}

.pasteup-desk-card.is-folding .mail-letter-footer {
  animation: letterFooterFold 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: bottom center;
}

@keyframes letterFoldAway {
  0% {
    opacity: 1;
    transform: perspective(900px) rotateX(0) scaleY(1);
  }
  45% {
    opacity: 1;
    transform: perspective(900px) rotateX(-10deg) scaleY(0.72);
  }
  100% {
    opacity: 0;
    transform: perspective(900px) rotateX(-76deg) scaleY(0.12) translateY(-18px);
  }
}

@keyframes letterHeaderFold {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: perspective(900px) rotateX(-76deg) scaleY(0.12) translateY(18px);
    opacity: 0;
  }
}

@keyframes letterFooterFold {
  0% {
    transform: perspective(900px) rotateX(0) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: perspective(900px) rotateX(76deg) scaleY(0.12) translateY(-18px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .send-animation,
  .send-envelope,
  .pasteup-desk-card.is-folding .mail-letter,
  .pasteup-desk-card.is-folding .mail-cover-top {
    animation: none !important;
    transition: none !important;
  }

  .pasteup-desk-card.is-folding .mail-letter-footer {
    animation: none !important;
  }
}

.light-only {
  display: block !important;
}

.dark-only {
  display: none !important;
}

[data-theme="dark"] .light-only {
  display: none !important;
}

[data-theme="dark"] .dark-only {
  display: block !important;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--accent);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-theme-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-pill);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s var(--easing), background-color 0.2s ease, border-color 0.2s ease;
}

.nav-theme-btn:hover {
  background: var(--surface-sunken);
  transform: scale(1.05);
}

.nav-theme-btn .theme-icon-sun {
  display: none;
}

.nav-theme-btn .theme-icon-moon {
  display: block;
}

[data-theme="dark"] .nav-theme-btn .theme-icon-sun {
  display: block;
}

[data-theme="dark"] .nav-theme-btn .theme-icon-moon {
  display: none;
}

.nav-cta {
  height: 40px;
  padding: 0 20px;
  font-size: 13.5px;
}

@media (max-width: 680px) {
  .nav-links {
    display: none;
  }

  .glass-navbar {
    height: 54px;
    padding: 0 8px 0 18px;
  }
}

/* ── EDITORIAL HERO SECTION ────────────────────── */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 24px 60px;
  overflow: hidden;
  background-color: #111216;
}

.hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  filter: none;
  display: block;
}

[data-theme="dark"] .hero-bg-img {
  opacity: 1;
  filter: none;
}

.hero-vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.28) 100%);
  pointer-events: none;
}

[data-theme="dark"] .hero-vignette-overlay {
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.38) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.hero-eyebrow {
  display: none;
}

.hero-heading {
  font-family: var(--font-body);
  font-size: clamp(48px, 6.8vw, 84px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.7);
  text-align: center;
  text-wrap: balance;
  max-width: 680px;
  margin-bottom: 20px;
}

[data-theme="dark"] .hero-heading {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.85);
}

.hero-heading .serif-italic {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  color: #ffffff;
}

.hero-subheading {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.25vw, 16.5px);
  font-weight: 500;
  line-height: 1.55;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.85);
  max-width: 580px;
  margin: 0 auto 28px;
  text-align: center;
}

[data-theme="dark"] .hero-subheading {
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

.hero-actions {
  margin-bottom: 0;
}

.hero-cta-btn {
  background-color: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0 34px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid var(--chalk-outline);
  box-shadow:
    0 2px 4px rgba(17, 18, 22, 0.12),
    0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--easing), background-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-cta-btn:hover {
  background-color: color-mix(in srgb, var(--accent) 88%, #000);
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow:
    0 4px 14px rgba(17, 18, 22, 0.18),
    0 16px 36px color-mix(in srgb, var(--accent) 48%, transparent);
}

.hero-cta-btn svg {
  stroke: var(--on-accent);
}

.hero-trust-badge {
  display: none;
}

/* ── EDITORIAL PAGE WRAPPER ─────────────────────────────────── */
.editorial-container {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 110px) clamp(24px, 4vw, 64px);
  position: relative;
  z-index: 10;
}

/* ── SECTION 2: SHORT SECTION OF INFORMATION (2-COLUMN) ─────── */
.information-section {
  padding: 40px 0 80px;
  border-top: 1px solid var(--border-subtle);
  scroll-margin-top: 100px;
}

.info-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(420px, 1.35fr);
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}

@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.info-left-col {
  position: sticky;
  top: 100px;
}

.info-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 12px;
}

.info-display-heading {
  font-family: var(--font-body);
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text);
  text-wrap: balance;
  margin-bottom: 24px;
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: normal;
}

.info-lead {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.4vw, 1.4rem);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 600px;
}

.info-right-col {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 54px);
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-block-num {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.info-block-title {
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
}

.info-block-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ── WAITLIST SECTION ────────────────────────────────────────── */
.waitlist-section {
  width: 100%;
  padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--border-subtle);
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

/* ── STREAMLINED GLASS WAITLIST DESK (ROVE GLASS EFFECT) ─ */
.desk-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
  position: relative;
  z-index: 25;
}

/* ── WAITLIST BOX STAGE & SURROUNDING FLOATING EMOJIS ───────── */
.waitlist-box-stage {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.waitlist-section-emojis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 12;
  overflow: hidden;
}

.floating-emoji {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  will-change: transform;
}

.floating-emoji:hover {
  transform: scale(1.28) !important;
  filter: drop-shadow(0 10px 24px rgba(31, 69, 214, 0.35));
  z-index: 50;
}

html.calm-mode .floating-emoji,
html.calm-mode .floating-emoji *,
html.calm-mode .floating-emoji svg {
  animation-play-state: paused !important;
  transition: none !important;
}

html.calm-mode .floating-emoji {
  filter: none;
}

/* Reaction Button Spring Pop on Click */
.floating-emoji:active,
.floating-emoji.emoji-clicked {
  animation: reactionPop 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

[data-theme="dark"] .floating-emoji {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.2));
}

.floating-emoji svg {
  display: block;
  overflow: visible;
  transform-origin: center center;
}

/* ── CURATED 12-EMOJI EDITORIAL CONSTELLATION (SLOW, TRANQUIL LEVITATION) ── */
@keyframes feLevitateA {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}
@keyframes feLevitateB {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(6px) rotate(-1.5deg); }
}
@keyframes feLevitateC {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes feLevitateD {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(7px) rotate(1.2deg); }
}

.fe-pos-top-1 { top: 4.5%; left: 16%; animation: feLevitateA 10.5s ease-in-out infinite; }
.fe-pos-top-2 { top: 5.5%; right: 16%; animation: feLevitateB 11.8s ease-in-out infinite; }

.fe-pos-left-1 { top: 20%; left: 9%; animation: feLevitateC 12.4s ease-in-out infinite; }
.fe-pos-left-2 { top: 40%; left: 15%; animation: feLevitateD 11.2s ease-in-out infinite; }
.fe-pos-left-3 { top: 60%; left: 8%; animation: feLevitateA 13.0s ease-in-out infinite; }
.fe-pos-left-4 { top: 80%; left: 14%; animation: feLevitateB 10.2s ease-in-out infinite; }

.fe-pos-right-1 { top: 20%; right: 9%; animation: feLevitateC 11.6s ease-in-out infinite; }
.fe-pos-right-2 { top: 40%; right: 15%; animation: feLevitateD 12.8s ease-in-out infinite; }
.fe-pos-right-3 { top: 60%; right: 8%; animation: feLevitateA 10.8s ease-in-out infinite; }
.fe-pos-right-4 { top: 80%; right: 14%; animation: feLevitateB 12.2s ease-in-out infinite; }

.fe-pos-bot-1 { bottom: 5%; left: 26%; animation: feLevitateC 11.0s ease-in-out infinite; }
.fe-pos-bot-2 { bottom: 5%; right: 26%; animation: feLevitateD 11.4s ease-in-out infinite; }

/* ── CONTINUOUS LIVING CHARACTER ANIMATIONS (CALM, LITERARY PACE LIKE MESSAGE PAGE) ── */
/* 1. Sunburst: Majestic, unhurried 16s solar rotation */
.floating-emoji .anim-glyph-sun {
  animation: glyphSunRotate 16s linear infinite !important;
}

/* 2. Sparkle: Gentle ambient cosmic shimmer */
@keyframes ambientSparkleTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.92; }
  50% { transform: scale(1.12) rotate(12deg); opacity: 1; }
}
.floating-emoji .anim-glyph-sparkle {
  animation: ambientSparkleTwinkle 5.4s ease-in-out infinite !important;
}

/* 3. Coffee Mug: Gentle, soothing steam waft */
@keyframes ambientSteamRise {
  0% { transform: translateY(2px) scaleX(0.9); opacity: 0.15; }
  45% { transform: translateY(-3px) scaleX(1.05); opacity: 0.85; }
  100% { transform: translateY(-7px) scaleX(0.85); opacity: 0; }
}
.floating-emoji .prog-steam-1 {
  animation: ambientSteamRise 3.8s ease-out infinite !important;
  transform-origin: bottom center;
}
.floating-emoji .prog-steam-2 {
  animation: ambientSteamRise 3.8s ease-out 1.9s infinite !important;
  transform-origin: bottom center;
}

/* 4. Heart: Calm resting organic pulse (2.4s interval) */
.floating-emoji .anim-glyph-heart {
  animation: glyphHeartBeat 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

/* 5. Candle: Slow, meditative sanctuary flame dance */
@keyframes ambientFlameDance {
  0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
  25% { transform: scale(1.06, 0.95) translateY(-1px) rotate(-1.5deg); }
  75% { transform: scale(0.96, 1.04) translateY(-1.5px) rotate(1.5deg); }
}
.floating-emoji .prog-candle-flame {
  transform-origin: 16px 11px;
  animation: ambientFlameDance 3.2s ease-in-out infinite !important;
}

/* 6. Cactus: Slow living succulent flower breathing */
@keyframes ambientFlowerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.floating-emoji .prog-cactus-flower {
  transform-origin: 16px 5.5px;
  animation: ambientFlowerPulse 4.8s ease-in-out infinite !important;
}

/* 7. Moon: Slow celestial star twinkle */
.floating-emoji .prog-moon-star {
  transform-origin: 21px 11px;
  animation: progMoonStarTwinkle 3.2s ease-in-out infinite !important;
}

/* 8. Disco Ball: Subtle velvet-room mirror glint */
@keyframes ambientDiscoGlint {
  0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.25; }
  50% { transform: scale(1.25) rotate(45deg); opacity: 0.95; }
}
.floating-emoji .prog-disco-glint {
  transform-origin: 12px 12px;
  animation: ambientDiscoGlint 3.6s ease-in-out infinite !important;
}

/* 9. Journal Stack: Unhurried bookmark ribbon sway */
@keyframes ambientRibbonFlutter {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(7deg) translateY(0.5px); }
}
.floating-emoji .prog-book-ribbon {
  transform-origin: 21px 17px;
  animation: ambientRibbonFlutter 4.2s ease-in-out infinite !important;
}

/* 10. Planet Saturn: Graceful orbital ring tilt */
@keyframes ambientPlanetRing {
  0%, 100% { transform: rotate(-22deg) scale(1); }
  50% { transform: rotate(-19deg) scale(1.03); }
}
.floating-emoji .prog-planet-ring {
  transform-origin: 16px 16px;
  animation: ambientPlanetRing 5.6s ease-in-out infinite !important;
}

/* 11. Daisy: Calm living petal breathing */
@keyframes ambientPetalBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.floating-emoji .prog-petal {
  transform-origin: center center;
  animation: ambientPetalBreathe 4.6s ease-in-out infinite !important;
}

/* 12. Zen Stones: Grounded meditative breath */
@keyframes ambientZenBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.2px); }
}
.floating-emoji .prog-zen-top {
  transform-origin: center bottom;
  animation: ambientZenBreath 5.0s ease-in-out infinite !important;
}

/* ── HOVER: GENTLE, UNHURRIED NATIVE CHARACTER ANIMATIONS (LIKE MESSAGE PAGE) ── */
.floating-emoji:hover svg.anim-glyph-sun,
.floating-emoji.is-hover-animating svg.anim-glyph-sun {
  animation: glyphSun 620ms cubic-bezier(0.16, 1, 0.3, 1) both, glyphSunRotate 16s linear infinite !important;
}
.floating-emoji:hover svg.anim-glyph-sparkle,
.floating-emoji.is-hover-animating svg.anim-glyph-sparkle {
  animation: glyphSparkle 580ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-coffee,
.floating-emoji.is-hover-animating svg.anim-glyph-coffee {
  animation: glyphCoffee 580ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-heart,
.floating-emoji.is-hover-animating svg.anim-glyph-heart {
  animation: glyphHeart 580ms cubic-bezier(0.16, 1, 0.3, 1) both, glyphHeartBeat 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}
.floating-emoji:hover svg.anim-glyph-candle,
.floating-emoji.is-hover-animating svg.anim-glyph-candle {
  animation: glyphCandle 580ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-cactus,
.floating-emoji.is-hover-animating svg.anim-glyph-cactus {
  animation: glyphCactus 580ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-moon,
.floating-emoji.is-hover-animating svg.anim-glyph-moon {
  animation: glyphMoon 620ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-disco,
.floating-emoji.is-hover-animating svg.anim-glyph-disco {
  animation: glyphDisco 620ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-books,
.floating-emoji.is-hover-animating svg.anim-glyph-books {
  animation: glyphBooks 600ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-planet,
.floating-emoji.is-hover-animating svg.anim-glyph-planet {
  animation: glyphPlanet 620ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-daisy,
.floating-emoji.is-hover-animating svg.anim-glyph-daisy {
  animation: glyphFlower 600ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.floating-emoji:hover svg.anim-glyph-zen,
.floating-emoji.is-hover-animating svg.anim-glyph-zen {
  animation: glyphZen 600ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

/* Progressive element bursts on hover (smooth, natural stagger) */
.floating-emoji:hover .prog-sun-core { animation: progSunCore 480ms cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.floating-emoji:hover .prog-sun-ray-0 { animation: progSunRay 340ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both !important; }
.floating-emoji:hover .prog-sun-ray-1 { animation: progSunRay 340ms cubic-bezier(0.16, 1, 0.3, 1) 110ms both !important; }
.floating-emoji:hover .prog-sun-ray-2 { animation: progSunRay 340ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both !important; }
.floating-emoji:hover .prog-sun-ray-3 { animation: progSunRay 340ms cubic-bezier(0.16, 1, 0.3, 1) 210ms both !important; }
.floating-emoji:hover .prog-sun-ray-4 { animation: progSunRay 340ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both !important; }
.floating-emoji:hover .prog-sun-ray-5 { animation: progSunRay 340ms cubic-bezier(0.16, 1, 0.3, 1) 310ms both !important; }
.floating-emoji:hover .prog-sun-ray-6 { animation: progSunRay 340ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both !important; }
.floating-emoji:hover .prog-sun-ray-7 { animation: progSunRay 340ms cubic-bezier(0.16, 1, 0.3, 1) 410ms both !important; }

.floating-emoji:hover .prog-sparkle-star { animation: progSparkleStar 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.floating-emoji:hover .prog-sparkle-core { animation: progDotPop 380ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both !important; }

.floating-emoji:hover .prog-steam-1 { animation: ambientSteamRise 3.2s ease-out infinite !important; }
.floating-emoji:hover .prog-steam-2 { animation: ambientSteamRise 3.2s ease-out 1.6s infinite !important; }

.floating-emoji:hover .prog-heart-core { animation: progHeartBeat 560ms cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.floating-emoji:hover .prog-heart-highlight { animation: progDotPop 420ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both !important; }

.floating-emoji:hover .prog-candle-flame { animation: ambientFlameDance 2.6s ease-in-out infinite !important; }

.floating-emoji:hover .prog-cactus-arm-l { animation: progCactusArmL 480ms cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.floating-emoji:hover .prog-cactus-arm-r { animation: progCactusArmR 480ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both !important; }
.floating-emoji:hover .prog-cactus-flower { animation: progDotPop 420ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both !important; }

.floating-emoji:hover .prog-moon-star { animation: progMoonStar 500ms cubic-bezier(0.16, 1, 0.3, 1) both, progMoonStarTwinkle 2.4s ease-in-out infinite !important; }

.floating-emoji:hover .prog-disco-glint { animation: ambientDiscoGlint 2.8s ease-in-out infinite !important; }

.floating-emoji:hover .prog-book-top { animation: progBookTop 500ms cubic-bezier(0.16, 1, 0.3, 1) both !important; }
.floating-emoji:hover .prog-book-ribbon { animation: ambientRibbonFlutter 3.2s ease-in-out infinite !important; }

.floating-emoji:hover .prog-planet-ring { animation: progPlanetRing 560ms cubic-bezier(0.16, 1, 0.3, 1) both !important; }

.floating-emoji:hover .prog-petal-1 { animation: progPetalBloom 360ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both !important; }
.floating-emoji:hover .prog-petal-2 { animation: progPetalBloom 360ms cubic-bezier(0.16, 1, 0.3, 1) 130ms both !important; }
.floating-emoji:hover .prog-petal-3 { animation: progPetalBloom 360ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both !important; }
.floating-emoji:hover .prog-petal-4 { animation: progPetalBloom 360ms cubic-bezier(0.16, 1, 0.3, 1) 230ms both !important; }
.floating-emoji:hover .prog-petal-5 { animation: progPetalBloom 360ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both !important; }
.floating-emoji:hover .prog-petal-6 { animation: progPetalBloom 360ms cubic-bezier(0.16, 1, 0.3, 1) 330ms both !important; }
.floating-emoji:hover .prog-petal-7 { animation: progPetalBloom 360ms cubic-bezier(0.16, 1, 0.3, 1) 380ms both !important; }
.floating-emoji:hover .prog-petal-8 { animation: progPetalBloom 360ms cubic-bezier(0.16, 1, 0.3, 1) 430ms both !important; }

.floating-emoji:hover .prog-zen-bottom { animation: progZenStoneDrop 400ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both !important; }
.floating-emoji:hover .prog-zen-middle { animation: progZenStoneDrop 400ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both !important; }
.floating-emoji:hover .prog-zen-top { animation: progZenStoneDrop 400ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both !important; }

/* Responsive elegance: preserve generous whitespace on smaller viewports */
@media (max-width: 1200px) {
  .fe-pos-left-2, .fe-pos-right-2 {
    display: none;
  }
}

@media (max-width: 992px) {
  .fe-pos-top-1, .fe-pos-top-2, .fe-pos-bot-1, .fe-pos-bot-2 {
    display: none;
  }
  .floating-emoji svg {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 768px) {
  /* On mobile, completely unclutter the waitlist stage so the card is clear and frictionless */
  .waitlist-section-emojis {
    display: none !important;
  }
}



.pasteup-desk-card.glass-panel {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  padding: 0;
  box-shadow:
    0 1px 2px var(--glass-shadow),
    0 24px 64px -12px color-mix(in srgb, var(--glass-shadow) 75%, transparent);
  position: relative;
  z-index: 10;
  scroll-margin-top: 100px;
  overflow: hidden;
}

[data-theme="dark"] .pasteup-desk-card.glass-panel {
  box-shadow:
    0 1px 2px var(--glass-shadow),
    0 24px 64px -12px rgba(0, 0, 0, 0.75);
}

.mail-cover-top {
  position: relative;
  min-height: 80px;
  padding: 24px clamp(30px, 5vw, 64px) 0;
  background: var(--surface);
}

.mail-letter-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.72rem;
  line-height: 1.4;
}

.mail-letter-rule {
  height: 1px;
  margin-top: 18px;
  height: 1px;
  background: var(--line);
}

.mail-letter {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) clamp(30px, 5vw, 64px) 34px;
  background: var(--surface);
}

.mail-greeting,
.mail-form-intro,
.mail-letter-footer {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.mail-greeting {
  margin: 0 0 26px;
  color: var(--text);
  font-size: 0.9rem;
}

.mail-form-intro {
  margin: 28px 0 20px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.5;
}

.mail-letter-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(30px, 5vw, 64px) 26px;
}

.mail-letter-footer span {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.mail-letter-footer strong {
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 500;
}

.archive-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: grid;
  gap: 4px;
  width: min(320px, calc(100vw - 32px));
  padding: 14px 16px 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: 0 14px 32px rgb(17 18 22 / 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 220ms var(--easing), transform 220ms var(--easing);
}

.archive-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-kicker {
  color: var(--accent);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.toast-message {
  font-size: 0.86rem;
  line-height: 1.45;
}

.pasteup-header,
.receipt-header {
  margin-bottom: 26px;
  text-align: center;
}

.badge-registry-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.ochre-dot {
  background-color: #fab327;
}

.sage-dot {
  background-color: #267f53;
}

.archival-register-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.pasteup-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 9999px;
}

.badge-sealed {
  background: rgba(38, 127, 83, 0.12);
  color: #17803d;
}

[data-theme="dark"] .badge-sealed {
  background: rgba(38, 127, 83, 0.24);
  color: #4ade80;
}

.form-error-banner {
  background: rgba(192, 38, 79, 0.08);
  border: 1px solid rgba(192, 38, 79, 0.28);
  color: var(--danger);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 9999px;
  margin-bottom: 18px;
  text-align: center;
}

.waitlist-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pasteup-subview {
  transition: opacity 0.3s var(--easing);
}

.pasteup-subview.fade-in {
  animation: subviewFadeIn 0.4s var(--easing) forwards;
}

@keyframes subviewFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.receipt-highlight {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

.receipt-note-card {
  background: var(--surface-sunken);
  border: 1px solid var(--border-pill);
  border-radius: 20px;
  padding: 22px 26px;
  margin: 24px 0;
  text-align: left;
}

.receipt-note-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-subtle);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.receipt-quote {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

.receipt-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.receipt-meta-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.receipt-chip {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-subtle);
  background: var(--surface-sunken);
  border: 1px solid var(--border-pill);
  padding: 4px 12px;
  border-radius: 9999px;
}

.receipt-reset-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink-subtle);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.receipt-reset-btn:hover {
  color: var(--accent);
}

.pasteup-title {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
  line-height: 1.16;
  margin-bottom: 16px;
}

.pasteup-desc {
  max-width: 48ch;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.86rem;
  line-height: 1.72;
  color: var(--text-muted);
  margin: 0;
  text-align: left;
}

.pasteup-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pasteup-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .pasteup-field-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.pasteup-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pasteup-field label {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pasteup-field label small {
  text-transform: none;
  font-weight: 400;
  color: var(--ink-subtle);
  margin-left: 4px;
}

.pasteup-input,
.pasteup-textarea {
  width: 100%;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--border-pill);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: border-color 0.2s var(--easing), background-color 0.2s var(--easing), box-shadow 0.2s var(--easing);
}

.pasteup-input {
  height: 48px;
  border-radius: 2px;
  padding: 0 14px;
}

.pasteup-textarea {
  border-radius: 2px;
  padding: 14px;
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}

.pasteup-input:focus,
.pasteup-textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pasteup-input:focus-visible,
.pasteup-textarea:focus-visible {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pasteup-input.input-error,
.pasteup-textarea.input-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192, 38, 79, 0.18);
}

.field-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.field-meta-simple {
  justify-content: flex-end;
}

.field-hint {
  font-size: 0.75rem;
  color: var(--ink-subtle);
  font-style: italic;
}

.char-counter {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-subtle);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.char-counter.is-warning {
  color: var(--danger);
  font-weight: 600;
}

/* ── ANIMATED TALISMAN & EMOJI HALLMARK SYSTEM ──────────────── */
.pasteup-header-talisman-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.pasteup-header-talisman {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 24px -4px rgba(31, 69, 214, 0.12);
  transition: transform 300ms var(--easing), box-shadow 300ms ease, border-color 200ms ease;
  cursor: pointer;
}

.pasteup-header-talisman:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--accent);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.06),
    0 12px 32px -4px rgba(31, 69, 214, 0.22);
}

.pasteup-header-talisman svg {
  width: 32px;
  height: 32px;
}

.pasteup-header-talisman.talisman-pop {
  animation: talismanPop 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes talismanPop {
  0% { transform: scale(0.7) rotate(-12deg); opacity: 0.6; }
  50% { transform: scale(1.22) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Talisman Group inside the Form */
.pasteup-talisman-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.talisman-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.talisman-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.talisman-label small {
  text-transform: none;
  font-weight: 400;
  color: var(--ink-subtle);
  margin-left: 4px;
}

.talisman-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--border-pill);
  padding: 3px 10px;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

.talisman-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* Talisman Bento Tray of animated emojis */
.talisman-bento-tray {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .talisman-bento-tray {
    grid-template-columns: repeat(4, 1fr);
  }
}

.talisman-chip-btn {
  height: 48px;
  border-radius: 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition:
    transform 220ms var(--easing),
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
  user-select: none;
}

.talisman-chip-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 8px 18px -4px rgba(31, 69, 214, 0.18);
}

.talisman-chip-btn:active {
  transform: scale(0.95);
}

.talisman-chip-btn.active {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent),
    0 6px 16px -2px rgba(31, 69, 214, 0.25);
}

.talisman-chip-btn.active::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--accent);
}

.talisman-chip-btn svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Receipt Seal Medallion */
.receipt-seal-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.receipt-seal-disc {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-sunken);
  border: 2px dashed var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 16px -2px rgba(31, 69, 214, 0.16),
    inset 0 0 0 4px var(--surface);
  animation: sealFloat 4s ease-in-out infinite;
}

@keyframes sealFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.receipt-seal-disc svg {
  width: 36px;
  height: 36px;
}

.receipt-talisman-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 14px;
  border-radius: 9999px;
  margin-top: 12px;
}

/* ── ROVE EDITORIAL FOOTER ────────────────────────────────────────── */
.rove-site-footer {
  width: 100%;
  background: var(--text);
  border-top: 0;
  color: var(--canvas);
  padding: clamp(64px, 9vw, 120px) clamp(24px, 5vw, 80px) 28px;
  position: relative;
  z-index: 20;
}

.footer-clean-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 10vw, 120px);
}

.footer-closing {
  max-width: 760px;
}

.footer-kicker {
  margin: 0 0 20px;
  color: var(--color-ochre);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.footer-heading {
  margin: 0 0 24px;
  color: var(--canvas);
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.92;
  text-wrap: balance;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-brand-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.footer-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}

.rove-site-footer .footer-logo.light-only {
  display: none !important;
}

.rove-site-footer .footer-logo.dark-only {
  display: block !important;
}

.footer-statement {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.05vw, 1.05rem);
  line-height: 1.6;
  color: rgb(247 244 236 / 0.68);
  max-width: 520px;
  margin: 0;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid rgb(247 244 236 / 0.2);
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
}

.footer-links a {
  color: rgb(247 244 236 / 0.76);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-ochre);
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8125rem;
  color: rgb(247 244 236 / 0.56);
  margin-top: 0;
}

.footer-copyright {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: rgb(247 244 236 / 0.56);
}

.footer-dot {
  opacity: 0.4;
  font-size: 0.75rem;
  color: rgb(247 244 236 / 0.56);
}

.footer-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(247 244 236 / 0.72);
  background: rgb(247 244 236 / 0.08);
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid rgb(247 244 236 / 0.16);
}

[data-theme="dark"] .footer-badge {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── Bespoke First-Principles Emoji Animations ────────────────────── */


/* 1. Sparkle: Starburst Twinkle & Radiant Pulse (Anticipation pinch -> Elastic pop) */
@keyframes glyphSparkle {
  0% { transform: scale(0.3) rotate(-30deg); opacity: 0; }
  35% { transform: scale(0.6) rotate(-15deg); opacity: 0.8; }
  65% { transform: scale(1.35) rotate(18deg); opacity: 1; }
  85% { transform: scale(0.92) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphSparkleIdle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(14deg); }
}
.anim-glyph-sparkle {
  animation: glyphSparkle 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphSparkleIdle 6.4s ease-in-out 450ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 2. Palette: Painterly Flourish & Brush Tilt (Dip down -> Upward stroke flourish) */
@keyframes glyphPalette {
  0% { transform: scale(0.4) rotate(-35deg) translateY(4px); opacity: 0; }
  35% { transform: scale(0.85) rotate(-20deg) translateY(2px); opacity: 0.9; }
  65% { transform: scale(1.28) rotate(16deg) translateY(-3px); opacity: 1; }
  85% { transform: scale(0.96) rotate(-4deg) translateY(1px); }
  100% { transform: scale(1) rotate(0deg) translateY(0); opacity: 1; }
}
@keyframes glyphPaletteIdle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-7deg) translateY(-1.5px); }
  70% { transform: rotate(5deg) translateY(1px); }
}
.anim-glyph-palette {
  animation: glyphPalette 450ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphPaletteIdle 6.7s ease-in-out 480ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 3. Moon: Celestial Cradle Rock (Anticipation tilt -> Arc float into sky) */
@keyframes glyphMoon {
  0% { transform: scale(0.4) rotate(40deg) translateY(6px); opacity: 0; }
  45% { transform: scale(1.26) rotate(-18deg) translateY(-4px); opacity: 1; }
  75% { transform: scale(0.95) rotate(8deg) translateY(1px); }
  100% { transform: scale(1) rotate(0deg) translateY(0); opacity: 1; }
}
@keyframes glyphMoonIdle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(-9deg) translateY(-2px); }
  70% { transform: rotate(7deg) translateY(1px); }
}
.anim-glyph-moon {
  animation: glyphMoon 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphMoonIdle 7.0s ease-in-out 460ms infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* 4. Arch: Architectural Portal Unfold (Compression -> Vertical spring stretch) */
@keyframes glyphArch {
  0% { transform: scaleX(0.5) scaleY(0.2); opacity: 0; }
  45% { transform: scaleX(0.88) scaleY(1.3); opacity: 1; }
  75% { transform: scaleX(1.06) scaleY(0.94); }
  100% { transform: scale(1, 1); opacity: 1; }
}
@keyframes glyphArchIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.anim-glyph-arch {
  animation: glyphArch 410ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphArchIdle 6.8s ease-in-out 430ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 5. Heart: Organic Heartbeat (Anticipation squeeze -> Lub-dub double stroke) */
@keyframes glyphHeart {
  0% { transform: scale(0.3); opacity: 0; }
  35% { transform: scale(0.8) scaleY(0.9); opacity: 0.9; }
  60% { transform: scale(1.32) scaleY(1.08); opacity: 1; }
  80% { transform: scale(0.94); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes glyphHeartBeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.24) scaleY(1.05); }
  24% { transform: scale(1.02); }
  36% { transform: scale(1.15) scaleY(1.03); }
  50% { transform: scale(1); }
}
.anim-glyph-heart {
  animation: glyphHeart 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphHeartBeat 2.2s cubic-bezier(0.16, 1, 0.3, 1) 450ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 6. Speech Bubble: Pop, Squash & Speaking Chatter Bob (Squeeze down -> Pop up & chatter) */
@keyframes glyphSpeech {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  30% { transform: scale(1.22, 0.78) translateY(4px); opacity: 0.9; }
  65% { transform: scale(0.92, 1.25) translateY(-5px); opacity: 1; }
  85% { transform: scale(1.06, 0.96) translateY(1px); }
  100% { transform: scale(1, 1) translateY(0); opacity: 1; }
}
@keyframes glyphSpeechIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-3deg); }
  60% { transform: translateY(1.5px) rotate(2deg); }
  80% { transform: translateY(-0.5px) rotate(-1deg); }
}
.anim-glyph-speech {
  animation: glyphSpeech 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphSpeechIdle 6.2s ease-in-out 460ms infinite;
  transform-origin: 30% 80%;
  will-change: transform;
}

/* 7. Envelope: Letter Flutter & Floating Glide (Flap anticipation -> Air float swoop) */
@keyframes glyphEnvelope {
  0% { transform: scale(0.4) rotate(-25deg) translateY(4px); opacity: 0; }
  40% { transform: scale(1.26) translateY(-6px) rotate(12deg); opacity: 1; }
  75% { transform: scale(0.95) translateY(2px) rotate(-4deg); }
  100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes glyphEnvelopeIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(3deg); }
}
.anim-glyph-envelope {
  animation: glyphEnvelope 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphEnvelopeIdle 6.5s ease-in-out 450ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 8. Hourglass: 180-Degree Mechanical Flip & Settle (Twist back -> Inertial 180 flip) */
@keyframes glyphHourglass {
  0% { transform: scale(0.4) rotate(0deg); opacity: 0; }
  25% { transform: scale(0.85) rotate(-30deg); opacity: 0.9; }
  70% { transform: scale(1.22) rotate(196deg); opacity: 1; }
  85% { transform: scale(0.96) rotate(176deg); }
  100% { transform: scale(1) rotate(180deg); opacity: 1; }
}
@keyframes glyphHourglassIdle {
  0%, 100% { transform: rotate(180deg); }
  45% { transform: rotate(185deg); }
  65% { transform: rotate(177deg); }
}
.anim-glyph-hourglass {
  animation: glyphHourglass 480ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphHourglassIdle 6.6s ease-in-out 500ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 9. Coffee: Warm Mug Jiggle & Steam Breath (Settle -> Warm upward steam stretch) */
@keyframes glyphCoffee {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  35% { transform: scale(1.15, 0.85) translateY(3px); opacity: 0.9; }
  65% { transform: scale(0.92, 1.2) translateY(-4px) rotate(4deg); opacity: 1; }
  85% { transform: scale(1.04, 0.97) translateY(1px) rotate(-2deg); }
  100% { transform: scale(1, 1) translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes glyphCoffeeIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px) scaleY(1.04); }
}
.anim-glyph-coffee {
  animation: glyphCoffee 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphCoffeeIdle 6.3s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 10. Sun: Radiant Flare & Perpetual Core Rotation (Core squeeze -> Radiant corona bloom) */
@keyframes glyphSun {
  0% { transform: scale(0.3) rotate(-90deg); opacity: 0; }
  50% { transform: scale(1.32) rotate(45deg); opacity: 1; }
  80% { transform: scale(0.95) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphSunRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.anim-glyph-sun {
  animation: glyphSun 460ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphSunRotate 16s linear 480ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 11. Candle: Flame Flicker & Gentle Heat Pulse */
@keyframes glyphCandle {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  50% { transform: scale(1.22) translateY(-3px); opacity: 1; }
  80% { transform: scale(0.96) translateY(1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphCandleIdle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.06, 0.96) rotate(-2deg); }
  55% { transform: scale(0.97, 1.05) rotate(2.5deg); }
  75% { transform: scale(1.03) rotate(-1deg); }
}
.anim-glyph-candle {
  animation: glyphCandle 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphCandleIdle 6.0s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 12. Planet: Gravitational Dip & Orbital Ring Wobble */
@keyframes glyphPlanet {
  0% { transform: scale(0.3) rotate(-35deg); opacity: 0; }
  50% { transform: scale(1.28) rotate(15deg); opacity: 1; }
  75% { transform: scale(0.94) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphPlanetIdle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(-8deg) translateY(-2px); }
  70% { transform: rotate(6deg) translateY(1.5px); }
}
.anim-glyph-planet {
  animation: glyphPlanet 460ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphPlanetIdle 7.2s ease-in-out 480ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 13 & 14. Flower & Daisy: Petal Unfold & Breeze Sway */
@keyframes glyphFlower {
  0% { transform: scale(0.2) rotate(-60deg); opacity: 0; }
  55% { transform: scale(1.3) rotate(15deg); opacity: 1; }
  80% { transform: scale(0.94) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphFlowerIdle {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(8deg) translateY(-1px); }
  70% { transform: rotate(-6deg) translateY(1px); }
}
.anim-glyph-flower,
.anim-glyph-daisy {
  animation: glyphFlower 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphFlowerIdle 6.7s ease-in-out 460ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 15. Mushroom: Forest Cap Squash & Bouncy Spring Pop */
@keyframes glyphMushroom {
  0% { transform: scale(0.3, 0.2); opacity: 0; }
  45% { transform: scale(1.15, 1.35) translateY(-5px); opacity: 1; }
  75% { transform: scale(0.92, 0.95) translateY(2px); }
  100% { transform: scale(1, 1) translateY(0); opacity: 1; }
}
@keyframes glyphMushroomIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06, 0.96) translateY(-1px); }
}
.anim-glyph-mushroom {
  animation: glyphMushroom 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphMushroomIdle 6.4s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 16. Tree: Canopy Wind Rustle */
@keyframes glyphTree {
  0% { transform: scaleY(0.3) scaleX(0.5); opacity: 0; }
  50% { transform: scaleY(1.26) scaleX(0.9); opacity: 1; }
  75% { transform: scaleY(0.95) scaleX(1.05); }
  100% { transform: scale(1, 1); opacity: 1; }
}
@keyframes glyphTreeIdle {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-4deg); }
  70% { transform: rotate(3deg); }
}
.anim-glyph-tree {
  animation: glyphTree 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphTreeIdle 6.8s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 17. Peace: Friendly Wave & Victory Spring Bounce */
@keyframes glyphPeace {
  0% { transform: scale(0.3) rotate(-20deg) translateY(6px); opacity: 0; }
  45% { transform: scale(1.28) rotate(14deg) translateY(-4px); opacity: 1; }
  75% { transform: scale(0.95) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg) translateY(0); opacity: 1; }
}
@keyframes glyphPeaceIdle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-4deg); }
}
.anim-glyph-peace {
  animation: glyphPeace 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphPeaceIdle 6.4s ease-in-out 450ms infinite;
  transform-origin: 30% 90%;
  will-change: transform;
}

/* 18 & 19. Eyes & Glasses: Blink Squash & Inquisitive Glance */
@keyframes glyphEyes {
  0% { transform: scaleY(0.2) scaleX(0.8); opacity: 0; }
  45% { transform: scale(1.25); opacity: 1; }
  75% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes glyphEyesIdle {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
}
.anim-glyph-eyes,
.anim-glyph-glasses {
  animation: glyphEyes 400ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphEyesIdle 6.6s ease-in-out 440ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 20. Cherries: Pendular Twin Bounce */
@keyframes glyphCherries {
  0% { transform: scale(0.3) rotate(30deg); opacity: 0; }
  50% { transform: scale(1.25) rotate(-16deg); opacity: 1; }
  75% { transform: scale(0.95) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphCherriesIdle {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-7deg); }
  70% { transform: rotate(5deg); }
}
.anim-glyph-cherries {
  animation: glyphCherries 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphCherriesIdle 6.3s ease-in-out 460ms infinite;
  transform-origin: center top;
  will-change: transform;
}

/* 21. Stairs: Ascending Stepped Float */
@keyframes glyphStairs {
  0% { transform: scale(0.3) translateY(8px); opacity: 0; }
  50% { transform: scale(1.22) translateY(-4px); opacity: 1; }
  75% { transform: scale(0.96) translateY(1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphStairsIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}
.anim-glyph-stairs {
  animation: glyphStairs 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphStairsIdle 6.4s ease-in-out 450ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 22. Books: Spine Open & Flutter */
@keyframes glyphBooks {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  50% { transform: scale(1.24) rotate(10deg); opacity: 1; }
  75% { transform: scale(0.96) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphBooksIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05) translateY(-1px); }
}
.anim-glyph-books {
  animation: glyphBooks 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphBooksIdle 6.7s ease-in-out 450ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 23. Cocktail: Cheers Clink & Swirl */
@keyframes glyphCocktail {
  0% { transform: scale(0.4) rotate(-25deg); opacity: 0; }
  45% { transform: scale(1.26) rotate(14deg); opacity: 1; }
  75% { transform: scale(0.95) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphCocktailIdle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(6deg) translateY(-1.5px); }
}
.anim-glyph-cocktail {
  animation: glyphCocktail 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphCocktailIdle 6.5s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 24. Lamp: Click & Ambient Warmth */
@keyframes glyphLamp {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  50% { transform: scale(1.24) translateY(-3px); opacity: 1; }
  75% { transform: scale(0.96) translateY(1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphLampIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.anim-glyph-lamp {
  animation: glyphLamp 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphLampIdle 6.2s ease-in-out 450ms infinite;
  transform-origin: center top;
  will-change: transform;
}

/* 25. TV: CRT Scan Snap */
@keyframes glyphTv {
  0% { transform: scaleX(0.2) scaleY(0.1); opacity: 0; }
  40% { transform: scaleX(1.2) scaleY(0.4); opacity: 1; }
  70% { transform: scale(1.15, 1.2); }
  85% { transform: scale(0.96, 0.96); }
  100% { transform: scale(1, 1); opacity: 1; }
}
@keyframes glyphTvIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.anim-glyph-tv {
  animation: glyphTv 400ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphTvIdle 6.3s ease-in-out 420ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 26. Chair: Cozy Cushion Lounge Sink */
@keyframes glyphChair {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  45% { transform: scale(1.2, 0.85) translateY(2px); opacity: 1; }
  75% { transform: scale(0.95, 1.1) translateY(-2px); }
  100% { transform: scale(1, 1) translateY(0); opacity: 1; }
}
@keyframes glyphChairIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
.anim-glyph-chair {
  animation: glyphChair 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphChairIdle 6.6s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 27. Rainbow: Vibrant Spectrum Sweep */
@keyframes glyphRainbow {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  50% { transform: scale(1.26) rotate(8deg); opacity: 1; }
  75% { transform: scale(0.96) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphRainbowIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08) translateY(-1.5px); }
}
.anim-glyph-rainbow {
  animation: glyphRainbow 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphRainbowIdle 6.8s ease-in-out 460ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 28. Swirl: Zen Vortex Rotation */
@keyframes glyphSwirl {
  0% { transform: scale(0.2) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.28) rotate(60deg); opacity: 1; }
  85% { transform: scale(0.95) rotate(-10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphSwirlIdle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.anim-glyph-swirl {
  animation: glyphSwirl 450ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphSwirlIdle 12s linear 480ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 29 & 30. Wave & Water: Oceanic Crest Surge & Splash */
@keyframes glyphWave {
  0% { transform: scale(0.3) translateY(6px); opacity: 0; }
  45% { transform: scale(1.24) translateY(-5px); opacity: 1; }
  75% { transform: scale(0.96) translateY(2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphWaveIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-2px) rotate(-4deg); }
  70% { transform: translateY(1.5px) rotate(3deg); }
}
.anim-glyph-wave,
.anim-glyph-water {
  animation: glyphWave 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphWaveIdle 6.3s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 31. Cactus: Desert Sprout Pop */
@keyframes glyphCactus {
  0% { transform: scale(0.3) translateY(8px); opacity: 0; }
  50% { transform: scale(1.24) translateY(-3px); opacity: 1; }
  75% { transform: scale(0.95) translateY(1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphCactusIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05) translateY(-1px); }
}
.anim-glyph-cactus {
  animation: glyphCactus 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphCactusIdle 6.7s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 32. Smiley: Wink & Cheerful Nod */
@keyframes glyphSmiley {
  0% { transform: scale(0.3); opacity: 0; }
  45% { transform: scale(1.3) rotate(8deg); opacity: 1; }
  75% { transform: scale(0.94) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphSmileyIdle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-6deg) scale(1.06); }
  60% { transform: rotate(5deg) scale(1.04); }
}
.anim-glyph-smiley {
  animation: glyphSmiley 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphSmileyIdle 6.3s ease-in-out 450ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 33. Dice: Tumble Roll & Double Bounce */
@keyframes glyphDice {
  0% { transform: scale(0.3) rotate(-90deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(45deg); opacity: 1; }
  80% { transform: scale(0.95) rotate(-10deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphDiceIdle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg) translateY(-2px); }
}
.anim-glyph-dice {
  animation: glyphDice 450ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphDiceIdle 6.5s ease-in-out 480ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 34. Zen: River Stone Balance */
@keyframes glyphZen {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  50% { transform: scale(1.2) translateY(-2px); opacity: 1; }
  75% { transform: scale(0.96) translateY(1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphZenIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04) translateY(-1px); }
}
.anim-glyph-zen {
  animation: glyphZen 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphZenIdle 7.0s ease-in-out 450ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 35. Disco: Shimmer Mirror Ball Flash */
@keyframes glyphDisco {
  0% { transform: scale(0.3) rotate(-45deg); opacity: 0; }
  50% { transform: scale(1.3) rotate(25deg); opacity: 1; }
  75% { transform: scale(0.95) rotate(-8deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphDiscoSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.anim-glyph-disco {
  animation: glyphDisco 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphDiscoSpin 10s linear 460ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 36. Donut: Frosted Wobble & Dough Squash */
@keyframes glyphDonut {
  0% { transform: scale(0.3) rotate(-60deg); opacity: 0; }
  50% { transform: scale(1.25) rotate(20deg); opacity: 1; }
  75% { transform: scale(0.95) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphDonutIdle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.05); }
}
.anim-glyph-donut {
  animation: glyphDonut 430ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphDonutIdle 6.4s ease-in-out 450ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 37. Flame: Thermic Flare & Dancing Ember */
@keyframes glyphFlame {
  0% { transform: scale(0.3) rotate(-12deg); opacity: 0; }
  50% { transform: scale(1.3, 0.88) rotate(6deg); opacity: 1; }
  75% { transform: scale(0.92, 1.1) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphFlameIdle {
  0%, 100% { transform: scale(1) translateY(0); }
  35% { transform: scale(1.08, 0.94) translateY(-1px) rotate(2deg); }
  70% { transform: scale(0.96, 1.05) translateY(0.5px) rotate(-2deg); }
}
.anim-glyph-flame {
  animation: glyphFlame 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphFlameIdle 5.8s ease-in-out 460ms infinite;
  transform-origin: 16px 26px;
  will-change: transform;
}

/* 38. Leaf: Botanical Vane Bloom & Gentle Sway */
@keyframes glyphLeaf {
  0% { transform: scale(0) rotate(-35deg); opacity: 0; }
  60% { transform: scale(1.26) rotate(14deg); opacity: 1; }
  85% { transform: scale(0.94) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphLeafIdle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.04); }
}
.anim-glyph-leaf {
  animation: glyphLeaf 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphLeafIdle 6.4s ease-in-out 460ms infinite;
  transform-origin: 6px 26px;
  will-change: transform;
}

/* 39. Mountain: Tectonic Ridge Elevation & Summit Rest */
@keyframes glyphMountain {
  0% { transform: translateY(8px) scaleY(0.4); opacity: 0; }
  60% { transform: translateY(-3px) scaleY(1.18); opacity: 1; }
  85% { transform: translateY(1px) scaleY(0.96); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes glyphMountainIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
.anim-glyph-mountain {
  animation: glyphMountain 460ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphMountainIdle 7.0s ease-in-out 480ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 40. Lightning: Electrostatic Discharge Pulse */
@keyframes glyphLightning {
  0% { transform: scale(0.2) rotate(-15deg); opacity: 0; }
  30% { transform: scale(1.4) rotate(10deg); opacity: 1; }
  60% { transform: scale(0.9) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphLightningIdle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.95; }
  52% { transform: scale(1.18); opacity: 1; }
}
.anim-glyph-lightning {
  animation: glyphLightning 380ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphLightningIdle 6.0s ease-in-out 400ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 41. Wavehand: Friendly Wrist Pivot Oscillation */
@keyframes glyphWaveHand {
  0% { transform: scale(0.4) rotate(-25deg); opacity: 0; }
  50% { transform: scale(1.25) rotate(18deg); opacity: 1; }
  80% { transform: scale(0.95) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphWaveHandIdle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-14deg); }
  75% { transform: rotate(14deg); }
}
.anim-glyph-wavehand {
  animation: glyphWaveHand 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphWaveHandIdle 5.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) 440ms infinite;
  transform-origin: 16px 27px;
  will-change: transform;
}

/* 42. Lips: Sensual Pout & Kiss Curve */
@keyframes glyphLips {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.3, 0.85); opacity: 1; }
  80% { transform: scale(0.95, 1.05); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes glyphLipsIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12, 0.92); }
}
.anim-glyph-lips {
  animation: glyphLips 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphLipsIdle 5.8s ease-in-out 440ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 43. Trophy: Star Award Podium Ascent */
@keyframes glyphTrophy {
  0% { transform: translateY(8px) scale(0.5); opacity: 0; }
  60% { transform: translateY(-3px) scale(1.2); opacity: 1; }
  85% { transform: translateY(1px) scale(0.96); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes glyphTrophyIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(3deg); }
}
.anim-glyph-trophy {
  animation: glyphTrophy 460ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphTrophyIdle 6.3s ease-in-out 480ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 44. Gift: Surprise Parcel Unbox & Bow Flutter */
@keyframes glyphGift {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  60% { transform: scale(1.22) translateY(-2px); opacity: 1; }
  85% { transform: scale(0.95) translateY(1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphGiftIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-2px) rotate(-3deg); }
  70% { transform: translateY(-2px) rotate(3deg); }
}
.anim-glyph-gift {
  animation: glyphGift 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphGiftIdle 6.0s ease-in-out 460ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 45. Balloon: Buoyant Helium Ascent */
@keyframes glyphBalloon {
  0% { transform: translateY(12px) scale(0.3); opacity: 0; }
  60% { transform: translateY(-4px) scale(1.18); opacity: 1; }
  85% { transform: translateY(1px) scale(0.96); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes glyphBalloonIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(4deg); }
}
.anim-glyph-balloon {
  animation: glyphBalloon 480ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphBalloonIdle 6.2s ease-in-out 500ms infinite;
  transform-origin: 16px 27px;
  will-change: transform;
}

/* 46. Laptop: Modern Workstation Clamshell Open */
@keyframes glyphLaptop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  85% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes glyphLaptopIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
.anim-glyph-laptop {
  animation: glyphLaptop 450ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphLaptopIdle 6.4s ease-in-out 480ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 47. Music: Melodic Eighth Notes Hop */
@keyframes glyphMusic {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(10deg); opacity: 1; }
  85% { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphMusicIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(6deg); }
}
.anim-glyph-music {
  animation: glyphMusic 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphMusicIdle 5.5s ease-in-out 440ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 48. Lipstick: Brass Tube Twist & Carmine Bullet */
@keyframes glyphLipstick {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(6deg); opacity: 1; }
  85% { transform: scale(0.95); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphLipstickIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-4deg); }
}
.anim-glyph-lipstick {
  animation: glyphLipstick 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphLipstickIdle 6.3s ease-in-out 460ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 49. Ticket: Perforated Admission Stub Pop */
@keyframes glyphTicket {
  0% { transform: scale(0.4) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.22) rotate(8deg); opacity: 1; }
  85% { transform: scale(0.96) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphTicketIdle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg) translateY(-1px); }
}
.anim-glyph-ticket {
  animation: glyphTicket 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphTicketIdle 6.3s ease-in-out 440ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 50. Tennis: Elastic Felt Ball Rebound */
@keyframes glyphTennis {
  0% { transform: translateY(-10px) scale(0.4); opacity: 0; }
  60% { transform: translateY(2px) scale(1.25, 0.8); opacity: 1; }
  80% { transform: translateY(-2px) scale(0.95, 1.05); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes glyphTennisIdle {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-4px) scale(0.95, 1.05); }
  70% { transform: translateY(1px) scale(1.06, 0.94); }
}
.anim-glyph-tennis {
  animation: glyphTennis 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphTennisIdle 5.5s cubic-bezier(0.16, 1, 0.3, 1) 460ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 51. Plantpot: Terracotta Succulent Sprout */
@keyframes glyphPlantpot {
  0% { transform: scale(0.3) translateY(6px); opacity: 0; }
  65% { transform: scale(1.2) translateY(-2px); opacity: 1; }
  85% { transform: scale(0.96); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphPlantpotIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05, 1.02) translateY(-1px); }
}
.anim-glyph-plantpot {
  animation: glyphPlantpot 460ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphPlantpotIdle 6.5s ease-in-out 480ms infinite;
  transform-origin: 16px 20px;
  will-change: transform;
}

/* 52. Pill: Care Capsule Float */
@keyframes glyphPill {
  0% { transform: scale(0.3) rotate(-60deg); opacity: 0; }
  60% { transform: scale(1.24) rotate(-30deg); opacity: 1; }
  85% { transform: scale(0.96) rotate(-42deg); }
  100% { transform: scale(1) rotate(-40deg); opacity: 1; }
}
@keyframes glyphPillIdle {
  0%, 100% { transform: translateY(0) rotate(-40deg); }
  50% { transform: translateY(-2.5px) rotate(-35deg); }
}
.anim-glyph-pill {
  animation: glyphPill 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphPillIdle 5.9s ease-in-out 460ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 53. Magnifier: Curious Saccade Lens */
@keyframes glyphMagnifier {
  0% { transform: scale(0.3) rotate(-30deg); opacity: 0; }
  60% { transform: scale(1.26) rotate(10deg); opacity: 1; }
  85% { transform: scale(0.95); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphMagnifierIdle {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(-2px, -2px) rotate(4deg); }
  70% { transform: translate(2px, -1px) rotate(-3deg); }
}
.anim-glyph-magnifier {
  animation: glyphMagnifier 450ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphMagnifierIdle 6.2s ease-in-out 480ms infinite;
  transform-origin: 13px 13px;
  will-change: transform;
}

/* 54. Avocado: Creamy Split & Pit Swell */
@keyframes glyphAvocado {
  0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.22) rotate(6deg); opacity: 1; }
  85% { transform: scale(0.96); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphAvocadoIdle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.06, 0.96) rotate(-3deg); }
}
.anim-glyph-avocado {
  animation: glyphAvocado 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphAvocadoIdle 6.2s ease-in-out 460ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 55. Basket: Woven Market Handle Swing */
@keyframes glyphBasket {
  0% { transform: scale(0.4) translateY(6px); opacity: 0; }
  60% { transform: scale(1.18) translateY(-2px); opacity: 1; }
  85% { transform: scale(0.96); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphBasketIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(3deg); }
}
.anim-glyph-basket {
  animation: glyphBasket 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphBasketIdle 6.3s ease-in-out 460ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 56. Mirror: Specular Sheen Glint */
@keyframes glyphMirror {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.22) rotate(8deg); opacity: 1; }
  85% { transform: scale(0.96); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphMirrorIdle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg) translateY(-1px); }
}
.anim-glyph-mirror {
  animation: glyphMirror 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphMirrorIdle 6.4s ease-in-out 460ms infinite;
  transform-origin: 14px 14px;
  will-change: transform;
}

/* 57. Vase: Ceramic Amphora Turning */
@keyframes glyphVase {
  0% { transform: scaleX(0.3) scaleY(0.5); opacity: 0; }
  60% { transform: scaleX(1.15) scaleY(1.08); opacity: 1; }
  85% { transform: scale(0.96); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes glyphVaseIdle {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.93) translateY(-1px); }
}
.anim-glyph-vase {
  animation: glyphVase 460ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphVaseIdle 6.3s ease-in-out 480ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 58. Globe: Planetary Meridian Spin */
@keyframes glyphGlobe {
  0% { transform: scale(0.3) rotate(-35deg); opacity: 0; }
  60% { transform: scale(1.24) rotate(12deg); opacity: 1; }
  85% { transform: scale(0.96); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphGlobeIdle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(14deg); }
}
.anim-glyph-globe {
  animation: glyphGlobe 480ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphGlobeIdle 6.7s ease-in-out 500ms infinite;
  transform-origin: 16px 16px;
  will-change: transform;
}

/* 59. Dumbbell: Strength Lift Bounce */
@keyframes glyphDumbbell {
  0% { transform: translateY(6px) scale(0.4); opacity: 0; }
  60% { transform: translateY(-3px) scale(1.2); opacity: 1; }
  85% { transform: translateY(1px) scale(0.96); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes glyphDumbbellIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.anim-glyph-dumbbell {
  animation: glyphDumbbell 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphDumbbellIdle 5.6s cubic-bezier(0.16, 1, 0.3, 1) 440ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 60. Hat: Festive Pom-Pom Spring */
@keyframes glyphHat {
  0% { transform: scale(0.3) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(12deg); opacity: 1; }
  85% { transform: scale(0.95); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphHatIdle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(-2px); }
}
.anim-glyph-hat {
  animation: glyphHat 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphHatIdle 5.8s ease-in-out 460ms infinite;
  transform-origin: 16px 24px;
  will-change: transform;
}

/* 61. Poop: Playful Swirl Bounce */
@keyframes glyphPoop {
  0% { transform: scale(0.3) translateY(6px); opacity: 0; }
  60% { transform: scale(1.25, 0.85) translateY(-2px); opacity: 1; }
  85% { transform: scale(0.95, 1.05); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphPoopIdle {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.08, 0.94); }
}
.anim-glyph-poop {
  animation: glyphPoop 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphPoopIdle 5.8s ease-in-out 440ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 62. Egg: Sunny Yolk Sizzle */
@keyframes glyphEgg {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.24, 0.88); opacity: 1; }
  85% { transform: scale(0.96, 1.04); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes glyphEggIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08, 0.92); }
}
.anim-glyph-egg {
  animation: glyphEgg 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphEggIdle 5.6s ease-in-out 440ms infinite;
  transform-origin: 16px 17px;
  will-change: transform;
}

/* 63. Phone: Screen Signal Pulse */
@keyframes glyphPhone {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(8deg); opacity: 1; }
  85% { transform: scale(0.96); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphPhoneIdle {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(-4deg) translateY(-1px); }
  60% { transform: rotate(4deg) translateY(-1px); }
}
.anim-glyph-phone {
  animation: glyphPhone 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphPhoneIdle 6.0s ease-in-out 460ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* 64. Star8: 8-Point Cosmic Pulsation */
@keyframes glyphStar8 {
  0% { transform: scale(0.2) rotate(-90deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(15deg); opacity: 1; }
  85% { transform: scale(0.94) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphStar8Idle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(22.5deg); }
}
.anim-glyph-star8 {
  animation: glyphStar8 450ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphStar8Idle 6.2s cubic-bezier(0.16, 1, 0.3, 1) 480ms infinite;
  transform-origin: 16px 16px;
  will-change: transform;
}

/* 65. Sushi: Fresh Maki Roll Bounce */
@keyframes glyphSushi {
  0% { transform: scale(0.3) translateY(-6px); opacity: 0; }
  60% { transform: scale(1.22, 0.88) translateY(2px); opacity: 1; }
  85% { transform: scale(0.96); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphSushiIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.anim-glyph-sushi {
  animation: glyphSushi 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphSushiIdle 5.6s ease-in-out 440ms infinite;
  transform-origin: center center;
  will-change: transform;
}

/* 66. Atom: Electron Orbital Revolution */
@keyframes glyphAtom {
  0% { transform: scale(0.2) rotate(-60deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(20deg); opacity: 1; }
  85% { transform: scale(0.94); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes glyphAtomIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.anim-glyph-atom {
  animation: glyphAtom 460ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphAtomIdle 6.3s ease-in-out 480ms infinite;
  transform-origin: 16px 16px;
  will-change: transform;
}

/* 67. Gingerbread: Cookie Holiday Hop */
@keyframes glyphGinger {
  0% { transform: scale(0.3) translateY(8px); opacity: 0; }
  60% { transform: scale(1.25) translateY(-3px); opacity: 1; }
  85% { transform: scale(0.95); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes glyphGingerIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-4px) rotate(4deg); }
  60% { transform: translateY(-4px) rotate(-4deg); }
}
.anim-glyph-gingerbread {
  animation: glyphGinger 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             glyphGingerIdle 5.9s cubic-bezier(0.16, 1, 0.3, 1) 460ms infinite;
  transform-origin: center bottom;
  will-change: transform;
}

/* ── Progressive Internal SVG Micro-Animations ────────────────────── */

/* 1. Speech Bubble: Progressive Typing Dots Stagger */
@keyframes progDotPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progDotPulse {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-2px); opacity: 1; }
}
.prog-dot {
  transform-origin: center center;
}
.prog-dot-1 {
  animation: progDotPop 260ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both,
             progDotPulse 1.2s ease-in-out 400ms infinite;
}
.prog-dot-2 {
  animation: progDotPop 260ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both,
             progDotPulse 1.2s ease-in-out 520ms infinite;
}
.prog-dot-3 {
  animation: progDotPop 260ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both,
             progDotPulse 1.2s ease-in-out 640ms infinite;
}

/* 2. Plant Growing Animation (Tree / Sapling): Trunk Sprouts & Canopy Blooms Upward */
@keyframes progPlantTrunk {
  0% { transform: scaleY(0); transform-origin: bottom center; }
  100% { transform: scaleY(1); transform-origin: bottom center; }
}
@keyframes progTreeCanopy {
  0% { transform: scale(0) translateY(4px); opacity: 0; }
  60% { transform: scale(1.28) translateY(-2px); opacity: 1; }
  85% { transform: scale(0.95) translateY(0.5px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.prog-plant-trunk {
  animation: progPlantTrunk 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prog-tree-tier {
  transform-origin: center bottom;
}
.prog-tree-tier-3 {
  animation: progTreeCanopy 320ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
.prog-tree-tier-2 {
  animation: progTreeCanopy 320ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}
.prog-tree-tier-1 {
  animation: progTreeCanopy 320ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both;
}

/* 3. Fruit Growing Animation (Cherries): Fruit Swells & Juicy Bounce */
@keyframes progFruitGrow {
  0% { transform: scale(0); opacity: 0; }
  45% { transform: scale(0.3); opacity: 0.8; }
  75% { transform: scale(1.35); opacity: 1; }
  90% { transform: scale(0.92); }
  100% { transform: scale(1); opacity: 1; }
}
.prog-fruit {
  transform-origin: center center;
}
.prog-fruit-1 {
  animation: progFruitGrow 380ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}
.prog-fruit-2 {
  animation: progFruitGrow 380ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}

/* 4. Flower Blossoming: Radial Petal Cascade */
@keyframes progPetalBloom {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progFlowerCenter {
  0% { transform: scale(0.3); opacity: 0; }
  70% { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.prog-flower-center {
  transform-origin: center center;
  animation: progFlowerCenter 350ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}
.prog-petal {
  transform-origin: center center;
}
.prog-petal-1 { animation: progPetalBloom 280ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
.prog-petal-2 { animation: progPetalBloom 280ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both; }
.prog-petal-3 { animation: progPetalBloom 280ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }
.prog-petal-4 { animation: progPetalBloom 280ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }
.prog-petal-5 { animation: progPetalBloom 280ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both; }
.prog-petal-6 { animation: progPetalBloom 280ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both; }
.prog-petal-7 { animation: progPetalBloom 280ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both; }
.prog-petal-8 { animation: progPetalBloom 280ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both; }

/* 5. Washing Machine Rotating Drum (Swirl): Centrifuge Spin Acceleration */
@keyframes progDrumSpin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(270deg); }
  75% { transform: rotate(540deg); }
  100% { transform: rotate(900deg); }
}
@keyframes progDrumIdle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.prog-drum-rotor {
  transform-origin: 16px 16px;
  animation: progDrumSpin 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both,
             progDrumIdle 3s linear 900ms infinite;
}

/* 6. Hourglass Sand Trickle & Accumulation */
@keyframes progSandStream {
  0% { opacity: 0; transform: scaleY(0); }
  20% { opacity: 1; transform: scaleY(1); }
  85% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0.3; transform: scaleY(0.7); }
}
@keyframes progSandBottom {
  0% { transform: scale(0); transform-origin: bottom center; }
  100% { transform: scale(1); transform-origin: bottom center; }
}
@keyframes progSandTop {
  0% { transform: scale(1); transform-origin: top center; }
  100% { transform: scale(0.3); transform-origin: top center; }
}
.prog-sand-stream {
  animation: progSandStream 1.6s ease-in-out infinite;
  transform-origin: top center;
}
.prog-sand-bottom {
  animation: progSandBottom 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prog-sand-top {
  animation: progSandTop 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 7. Envelope Note Sliding Out */
@keyframes progEnvelopeLetter {
  0% { transform: translateY(6px); opacity: 0; }
  40% { transform: translateY(6px); opacity: 1; }
  100% { transform: translateY(-5px); opacity: 1; }
}
.prog-envelope-letter {
  animation: progEnvelopeLetter 460ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  transform-origin: bottom center;
}

/* 8. Coffee Steam Wisp Float */
@keyframes progSteamWaft {
  0% { transform: translateY(3px) scale(0.6); opacity: 0; }
  40% { transform: translateY(-2px) scale(1); opacity: 0.8; }
  100% { transform: translateY(-6px) scale(1.1); opacity: 0; }
}
.prog-steam-1 {
  animation: progSteamWaft 1.8s ease-out 100ms infinite;
  transform-origin: bottom center;
}
.prog-steam-2 {
  animation: progSteamWaft 1.8s ease-out 500ms infinite;
  transform-origin: bottom center;
}

/* 9. Mushroom Sprout */
@keyframes progMushroomStalk {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}
@keyframes progMushroomCap {
  0% { transform: translateY(6px) scale(0.6); }
  60% { transform: translateY(-3px) scale(1.2); }
  100% { transform: translateY(0) scale(1); }
}
.prog-mushroom-stalk {
  transform-origin: bottom center;
  animation: progMushroomStalk 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prog-mushroom-cap {
  transform-origin: bottom center;
  animation: progMushroomCap 360ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

/* 10. Candle: Wax Base Grounds & Organic Dancing Flame */
@keyframes progFlameFlicker {
  0%, 100% { transform: scale(1) rotate(0deg) skewX(0deg); }
  25% { transform: scale(1.08, 0.92) rotate(-3deg) skewX(-2deg); }
  50% { transform: scale(0.94, 1.1) rotate(2deg) skewX(2deg); }
  75% { transform: scale(1.05, 0.96) rotate(-1deg) skewX(-1deg); }
}
.prog-candle-flame {
  transform-origin: 16px 11px;
  animation: progFlameFlicker 1.8s ease-in-out infinite;
}

/* 11. Planet: Core Sphere Grounds & Orbital Ring Precession */
@keyframes progPlanetRing {
  0% { transform: rotate(-22deg) scale(0.6); opacity: 0; }
  50% { transform: rotate(-26deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(-22deg) scale(1); opacity: 1; }
}
@keyframes progPlanetRingIdle {
  0%, 100% { transform: rotate(-22deg) scale(1); }
  50% { transform: rotate(-18deg) scale(1.04); }
}
.prog-planet-ring {
  transform-origin: 16px 16px;
  animation: progPlanetRing 480ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both,
             progPlanetRingIdle 4s ease-in-out 600ms infinite;
}

/* 12. Heart: Visceral Lub-Dub Pulse */
@keyframes progHeartBeat {
  0% { transform: scale(0.4); opacity: 0; }
  35% { transform: scale(1.22); opacity: 1; }
  50% { transform: scale(0.94); }
  65% { transform: scale(1.08); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progHeartBeatIdle {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.14); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}
.prog-heart-core {
  transform-origin: 16px 16px;
  animation: progHeartBeat 460ms cubic-bezier(0.16, 1, 0.3, 1) both,
             progHeartBeatIdle 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) 500ms infinite;
}
.prog-heart-highlight {
  animation: progDotPop 350ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
  transform-origin: 10px 10px;
}

/* 13. Sun: Core Expands & 8 Rays Radial Burst */
@keyframes progSunCore {
  0% { transform: scale(0.2); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progSunRay {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.prog-sun-core {
  transform-origin: 16px 16px;
  animation: progSunCore 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prog-sun-ray {
  transform-origin: center center;
}
.prog-sun-ray-0 { animation: progSunRay 280ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
.prog-sun-ray-1 { animation: progSunRay 280ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both; }
.prog-sun-ray-2 { animation: progSunRay 280ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }
.prog-sun-ray-3 { animation: progSunRay 280ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }
.prog-sun-ray-4 { animation: progSunRay 280ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both; }
.prog-sun-ray-5 { animation: progSunRay 280ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both; }
.prog-sun-ray-6 { animation: progSunRay 280ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both; }
.prog-sun-ray-7 { animation: progSunRay 280ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both; }

/* 14. Moon: Crescent Float & Twinkling Night Star */
@keyframes progMoonStar {
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.6) rotate(90deg); opacity: 1; }
  100% { transform: scale(1) rotate(180deg); opacity: 1; }
}
@keyframes progMoonStarTwinkle {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 1; }
}
.prog-moon-star {
  transform-origin: 21px 11px;
  animation: progMoonStar 400ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both,
             progMoonStarTwinkle 1.8s ease-in-out 600ms infinite;
}

/* 15. Sparkle: Star Expansion & Core Flash */
@keyframes progSparkleStar {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.prog-sparkle-star {
  transform-origin: 16px 16px;
  animation: progSparkleStar 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prog-sparkle-core {
  transform-origin: 16px 16px;
  animation: progDotPop 300ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

/* 16. Eyes: Saccadic Curiosity */
@keyframes progEyePupil {
  0% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  55% { transform: translateX(2px); }
  80% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.prog-eye-pupil {
  animation: progEyePupil 2.4s ease-in-out 400ms infinite;
}

/* 17. Peace: Palm Grounds & Victory Fingers Spring Up */
@keyframes progPeaceFingers {
  0% { transform: scaleY(0.2) translateY(8px); opacity: 0; }
  60% { transform: scaleY(1.22) translateY(-2px); opacity: 1; }
  85% { transform: scaleY(0.95) translateY(0.5px); }
  100% { transform: scaleY(1) translateY(0); opacity: 1; }
}
.prog-peace-fingers {
  transform-origin: 16px 18px;
  animation: progPeaceFingers 440ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

/* 18. Stairs: Ascending Staggered Emergence */
@keyframes progStairStep {
  0% { transform: scaleY(0); opacity: 0; }
  60% { transform: scaleY(1.2); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
.prog-stair {
  transform-origin: bottom center;
}
.prog-stair-1 { animation: progStairStep 240ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both; }
.prog-stair-2 { animation: progStairStep 240ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both; }
.prog-stair-3 { animation: progStairStep 240ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both; }
.prog-stair-4 { animation: progStairStep 240ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both; }

/* 19. Arch: Frame Grounds & Portal Reveals Horizon */
@keyframes progArchPortal {
  0% { transform: scaleY(0.1) scaleX(0.4); opacity: 0; }
  60% { transform: scaleY(1.15) scaleX(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.prog-arch-portal {
  transform-origin: bottom center;
  animation: progArchPortal 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
.prog-arch-keystone {
  transform-origin: center top;
  animation: progDotPop 280ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both;
}

/* 20. Books: Top Cover Lifts & Pages Flutter */
@keyframes progBookTop {
  0% { transform: translateY(-8px) rotate(-10deg); opacity: 0; }
  60% { transform: translateY(1.5px) rotate(3deg); opacity: 1; }
  85% { transform: translateY(-0.8px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes progBookRibbon {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}
.prog-book-top {
  transform-origin: 9px 17px;
  animation: progBookTop 420ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
.prog-book-ribbon {
  transform-origin: 21px 17px;
  animation: progBookRibbon 2.2s ease-in-out infinite;
}

/* 21. Palette: Paint Dollops Squeeze Sequentially */
@keyframes progPaintDollop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.prog-paint {
  transform-origin: center center;
}
.prog-paint-1 { animation: progPaintDollop 260ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both; }
.prog-paint-2 { animation: progPaintDollop 260ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both; }
.prog-paint-3 { animation: progPaintDollop 260ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both; }
.prog-paint-4 { animation: progPaintDollop 260ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both; }

/* 22. Cocktail: Liquid Slosh & Olive Clink */
@keyframes progCocktailLiquid {
  0% { transform: scaleY(0); transform-origin: bottom center; opacity: 0; }
  60% { transform: scaleY(1.2); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes progCocktailOlive {
  0% { transform: translateY(-8px) rotate(-15deg); opacity: 0; }
  60% { transform: translateY(2px) rotate(6deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.prog-cocktail-liquid {
  transform-origin: center bottom;
  animation: progCocktailLiquid 360ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}
.prog-cocktail-olive {
  transform-origin: 16px 17px;
  animation: progCocktailOlive 440ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}

/* 23. Lamp: Warm Ambient Glow & Cord Click */
@keyframes progLampGlow {
  0% { transform: scale(0.4); opacity: 0; }
  50% { transform: scale(1.2); opacity: 0.55; }
  100% { transform: scale(1); opacity: 0.35; }
}
@keyframes progLampCord {
  0% { transform: translateY(0); }
  30% { transform: translateY(3px); }
  60% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
.prog-lamp-glow {
  transform-origin: 16px 12px;
  animation: progLampGlow 500ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
.prog-lamp-cord {
  transform-origin: 19px 14px;
  animation: progLampCord 350ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

/* 24. TV: Antennas Wobble & CRT Scanline Snap */
@keyframes progTvAntennas {
  0% { transform: rotate(-15deg); }
  40% { transform: rotate(10deg); }
  75% { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}
@keyframes progTvScreenSnap {
  0% { transform: scaleX(0.1) scaleY(0.1); opacity: 0; }
  45% { transform: scaleX(1.15) scaleY(0.25); opacity: 1; }
  75% { transform: scaleX(0.96) scaleY(1.12); }
  100% { transform: scale(1); opacity: 1; }
}
.prog-tv-antennas {
  transform-origin: 16px 10px;
  animation: progTvAntennas 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prog-tv-screen {
  transform-origin: center center;
  animation: progTvScreenSnap 380ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

/* 25. Chair: Lounge Shell Sinking Drop */
@keyframes progChairSeatSink {
  0% { transform: translateY(-6px) scaleY(1.15); opacity: 0; }
  55% { transform: translateY(2px) scale(1.08, 0.9); opacity: 1; }
  80% { transform: translateY(-1px) scale(0.97, 1.03); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.prog-chair-seat {
  transform-origin: center bottom;
  animation: progChairSeatSink 420ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}

/* 26. Rainbow: Consecutive Arch Wipes */
@keyframes progRainbowWipe {
  0% { transform: scaleY(0) scaleX(0.3); opacity: 0; }
  60% { transform: scaleY(1.15) scaleX(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.prog-rainbow-arch {
  transform-origin: center bottom;
}
.prog-rainbow-1 { animation: progRainbowWipe 360ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
.prog-rainbow-2 { animation: progRainbowWipe 360ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both; }
.prog-rainbow-3 { animation: progRainbowWipe 360ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both; }

/* 27. Wave: Breaking Crest Surge & Spray */
@keyframes progWaveCrest {
  0% { transform: scale(0.4) translateX(-4px); opacity: 0; }
  60% { transform: scale(1.18) translateX(1px); opacity: 1; }
  100% { transform: scale(1) translateX(0); opacity: 1; }
}
@keyframes progWaveSpray {
  0% { transform: translate(0, 0) scale(0); opacity: 0; }
  50% { transform: translate(2px, -3px) scale(1.4); opacity: 1; }
  100% { transform: translate(4px, -1px) scale(0.8); opacity: 0.6; }
}
.prog-wave-crest {
  transform-origin: left bottom;
  animation: progWaveCrest 420ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}
.prog-wave-spray-1 {
  animation: progWaveSpray 500ms ease-out 220ms both;
}
.prog-wave-spray-2 {
  animation: progWaveSpray 500ms ease-out 300ms both;
}

/* 28. Cactus: Trunk Growth & Branching Arms */
@keyframes progCactusStem {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
@keyframes progCactusArmL {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progCactusArmR {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.prog-cactus-stem {
  transform-origin: center bottom;
  animation: progCactusStem 260ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
.prog-cactus-arm-l {
  transform-origin: 14px 14px;
  animation: progCactusArmL 320ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}
.prog-cactus-arm-r {
  transform-origin: 18px 12px;
  animation: progCactusArmR 320ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both;
}
.prog-cactus-flower {
  transform-origin: 16px 5.5px;
  animation: progDotPop 260ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
}

/* 29. Smiley: Eyes Wink & Grin Sweeps Wide */
@keyframes progSmileyMouth {
  0% { transform: scaleX(0.2); opacity: 0; }
  60% { transform: scaleX(1.25); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes progSmileyBlink {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
  55% { transform: scaleY(1); }
}
.prog-smiley-mouth {
  transform-origin: center center;
  animation: progSmileyMouth 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}
.prog-smiley-eyes {
  transform-origin: 16px 13.5px;
  animation: progSmileyBlink 3.2s ease-in-out infinite;
}
.prog-smiley-blush {
  animation: progDotPop 340ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}

/* 30. Dice: Pips Pop in Staggered Sequence */
@keyframes progDicePip {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.prog-dice-pip {
  transform-origin: center center;
}
.prog-dice-pip-1 { animation: progDicePip 240ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
.prog-dice-pip-2 { animation: progDicePip 240ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both; }
.prog-dice-pip-3 { animation: progDicePip 240ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }
.prog-dice-pip-4 { animation: progDicePip 240ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both; }
.prog-dice-pip-5 { animation: progDicePip 240ms cubic-bezier(0.16, 1, 0.3, 1) 320ms both; }

/* 31. Water: Teardrop Form, Droop & Glint */
@keyframes progWaterDrop {
  0% { transform: scale(0.3) translateY(-6px); opacity: 0; }
  60% { transform: scale(1.2, 0.9) translateY(2px); opacity: 1; }
  85% { transform: scale(0.95, 1.05) translateY(-1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.prog-water-drop {
  transform-origin: center bottom;
  animation: progWaterDrop 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prog-water-glint {
  animation: progDotPop 320ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

/* 32. Zen: River Stones Stack in Gravitational Harmony */
@keyframes progZenStoneDrop {
  0% { transform: translateY(-8px) scale(0.8); opacity: 0; }
  60% { transform: translateY(1.5px) scale(1.08, 0.95); opacity: 1; }
  85% { transform: translateY(-0.5px) scale(0.98, 1.02); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.prog-zen-bottom {
  transform-origin: center bottom;
  animation: progZenStoneDrop 340ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}
.prog-zen-middle {
  transform-origin: center bottom;
  animation: progZenStoneDrop 340ms cubic-bezier(0.16, 1, 0.3, 1) 160ms both;
}
.prog-zen-top {
  transform-origin: center bottom;
  animation: progZenStoneDrop 340ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

/* 33. Disco: Ball Shimmer & Glint Burst */
@keyframes progDiscoGlint {
  0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1.3) rotate(45deg); opacity: 1; }
}
.prog-disco-glint {
  transform-origin: 12px 12px;
  animation: progDiscoGlint 1.4s ease-in-out infinite;
}

/* 34. Glasses: Tinted Lenses Pop & Sheen Sweep */
@keyframes progGlassesLens {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 0.65; }
}
@keyframes progGlassesSheen {
  0% { opacity: 0; transform: translateX(-4px); }
  50% { opacity: 0.9; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(4px); }
}
.prog-glasses-lens-l {
  transform-origin: 10px 16px;
  animation: progGlassesLens 340ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
}
.prog-glasses-lens-r {
  transform-origin: 22px 16px;
  animation: progGlassesLens 340ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}
.prog-glasses-sheen {
  animation: progGlassesSheen 1.8s ease-in-out 300ms infinite;
}

/* 35. Donut: Strawberry Glaze Settle & Sprinkles Cascade */
@keyframes progDonutGlaze {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progDonutSprinkle {
  0% { transform: scale(0) translateY(-4px); opacity: 0; }
  60% { transform: scale(1.3) translateY(1px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.prog-donut-glaze {
  transform-origin: 16px 16px;
  animation: progDonutGlaze 380ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}
.prog-donut-sprinkle {
  transform-origin: center center;
}
.prog-donut-sprinkle-1 { animation: progDonutSprinkle 240ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both; }
.prog-donut-sprinkle-2 { animation: progDonutSprinkle 240ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both; }
.prog-donut-sprinkle-3 { animation: progDonutSprinkle 240ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both; }

/* ── KINETIC GENESIS EXTENSIONS (31 NEW MASTER GLYPHS) ── */

/* 36. Flame: Thermic Swell & Dancing Core */
@keyframes progFlameLick {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  35% { transform: scale(1.08, 0.94) rotate(2deg); }
  70% { transform: scale(0.96, 1.06) rotate(-2deg); }
}
@keyframes progFlameInner {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.15) translateY(-1px); }
}
.prog-flame-outer {
  transform-origin: 16px 26px;
  animation: progFlameLick 2.2s ease-in-out infinite;
}
.prog-flame-inner {
  transform-origin: 16px 24px;
  animation: progFlameInner 1.4s ease-in-out infinite;
}

/* 37. Leaf: Botanical Vane Unfurl & Gentle Sway */
@keyframes progLeafStem {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
@keyframes progLeafBlade {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  65% { transform: scale(1.18) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes progLeafSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); }
}
.prog-leaf-stem {
  transform-origin: 6px 26px;
  animation: progLeafStem 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.prog-leaf-body {
  transform-origin: 6px 26px;
  animation: progLeafBlade 420ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both,
             progLeafSway 3.2s ease-in-out 540ms infinite;
}

/* 38. Mountain: Stratified Summit Ascent & Summit Rest */
@keyframes progMountainRise {
  0% { transform: scaleY(0) translateY(10px); opacity: 0; }
  60% { transform: scaleY(1.15) translateY(-2px); opacity: 1; }
  100% { transform: scaleY(1) translateY(0); opacity: 1; }
}
@keyframes progMountainBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
.prog-mountain-back {
  transform-origin: center bottom;
  animation: progMountainRise 380ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both;
}
.prog-mountain-front {
  transform-origin: center bottom;
  animation: progMountainRise 420ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both,
             progMountainBreathe 4s ease-in-out 580ms infinite;
}

/* 39. Lightning: Electrostatic Discharge Crackle */
@keyframes progLightningFlash {
  0% { transform: scale(0.4); opacity: 0; }
  20% { transform: scale(1.3); opacity: 1; }
  40% { transform: scale(0.9); opacity: 0.8; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progLightningSpark {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.95; }
  52% { transform: scale(1.15); opacity: 1; }
}
.prog-lightning-bolt {
  transform-origin: 16px 16px;
  animation: progLightningFlash 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             progLightningSpark 2.4s ease-in-out 450ms infinite;
}

/* 40. Wavehand: Wrist Pivot & Friendly Oscillation */
@keyframes progWaveHand {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-16deg); }
  45% { transform: rotate(14deg); }
  70% { transform: rotate(-8deg); }
  85% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}
.prog-hand-wave {
  transform-origin: 16px 27px;
  animation: progWaveHand 1.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* 41. Lips: Sensual Pout & Specular Kiss */
@keyframes progLipsPout {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12, 0.92); }
}
.prog-lips-body {
  transform-origin: 16px 16px;
  animation: progLipsPout 2.2s ease-in-out infinite;
}

/* 42. Trophy: Golden Ascent & Championship Gleam */
@keyframes progTrophyAscent {
  0% { transform: translateY(6px) scale(0.7); opacity: 0; }
  65% { transform: translateY(-2px) scale(1.12); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes progTrophyShine {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
.prog-trophy-cup {
  transform-origin: center bottom;
  animation: progTrophyAscent 440ms cubic-bezier(0.16, 1, 0.3, 1) both,
             progTrophyShine 3s ease-in-out 500ms infinite;
}

/* 43. Gift: Parcel Drop & Bow Flutter */
@keyframes progGiftLid {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px) rotate(-3deg); }
  60% { transform: translateY(-3px) rotate(2deg); }
}
.prog-gift-lid {
  transform-origin: 16px 12px;
  animation: progGiftLid 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* 44. Balloon: Buoyant Helium Drift */
@keyframes progBalloonDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(3deg); }
}
.prog-balloon-drift {
  transform-origin: 16px 27px;
  animation: progBalloonDrift 2.6s ease-in-out infinite;
}

/* 45. Laptop: Clamshell Hinge Unfold & Scanline Breathe */
@keyframes progLaptopScreen {
  0% { transform: scaleY(0.1); opacity: 0; }
  65% { transform: scaleY(1.18); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes progLaptopBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
.prog-laptop-screen {
  transform-origin: 16px 23px;
  animation: progLaptopScreen 460ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both,
             progLaptopBreathe 3.2s ease-in-out 560ms infinite;
}

/* 46. Music: Staccato Note Dance */
@keyframes progMusicHop1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes progMusicHop2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.prog-music-note-1 {
  transform-origin: 10px 22px;
  animation: progMusicHop1 1.4s ease-in-out infinite;
}
.prog-music-note-2 {
  transform-origin: 22px 18px;
  animation: progMusicHop2 1.4s ease-in-out 350ms infinite;
}

/* 47. Lipstick: Brass Tube Twist & Bullet Rise */
@keyframes progLipstickTwist {
  0% { transform: translateY(6px); opacity: 0; }
  60% { transform: translateY(-1.5px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes progLipstickBulletIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}
.prog-lipstick-bullet {
  transform-origin: center bottom;
  animation: progLipstickTwist 450ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both,
             progLipstickBulletIdle 3s ease-in-out 580ms infinite;
}

/* 48. Ticket: Perforated Admission Pop */
@keyframes progTicketPop {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes progTicketFloat {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
}
.prog-ticket-body {
  transform-origin: center center;
  animation: progTicketPop 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
             progTicketFloat 2.8s ease-in-out 440ms infinite;
}

/* 49. Tennis: Elastic Felt Ball Rebound */
@keyframes progTennisArc {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  45% { transform: translateY(-5px) scale(0.92, 1.08); }
  75% { transform: translateY(1px) scale(1.1, 0.9); }
}
.prog-tennis-ball {
  transform-origin: center bottom;
  animation: progTennisArc 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* 50. Plantpot: Terracotta Succulent Sprout */
@keyframes progSucculentGrow {
  0% { transform: scaleY(0.2) scaleX(0.5); opacity: 0; }
  65% { transform: scaleY(1.22) scaleX(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progSucculentBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05, 1.02); }
}
.prog-pot-plant {
  transform-origin: 16px 20px;
  animation: progSucculentGrow 460ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both,
             progSucculentBreathe 3.4s ease-in-out 580ms infinite;
}

/* 51. Pill: Remedy Capsule Suspension */
@keyframes progPillHover {
  0%, 100% { transform: translateY(0) rotate(-15deg); }
  50% { transform: translateY(-3px) rotate(-10deg); }
}
.prog-pill-capsule {
  transform-origin: center center;
  animation: progPillHover 2.2s ease-in-out infinite;
}

/* 52. Magnifier: Curious Optical Saccade */
@keyframes progLensSearch {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(-2px, -2px); }
  70% { transform: translate(2px, -1px); }
}
.prog-lens-rim {
  transform-origin: 13px 13px;
  animation: progLensSearch 2.8s ease-in-out infinite;
}

/* 53. Avocado: Pear Flesh Bloom & Pit Swell */
@keyframes progAvocadoPit {
  0% { transform: scale(0.2); opacity: 0; }
  65% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes progAvocadoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.prog-avocado-pit {
  transform-origin: 16px 19px;
  animation: progAvocadoPit 420ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both,
             progAvocadoPulse 2.8s ease-in-out 580ms infinite;
}

/* 54. Basket: Market Weave & Arching Handle */
@keyframes progBasketHandle {
  0% { transform: scaleY(0.2); opacity: 0; }
  70% { transform: scaleY(1.18); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes progBasketSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}
.prog-basket-handle {
  transform-origin: 16px 18px;
  animation: progBasketHandle 400ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both,
             progBasketSway 3s ease-in-out 520ms infinite;
}

/* 55. Mirror: Hand Vanity Luminous Sweep */
@keyframes progMirrorGlint {
  0% { opacity: 0; transform: translateX(-4px) translateY(-4px); }
  50% { opacity: 0.9; transform: translateX(0) translateY(0); }
  100% { opacity: 0; transform: translateX(4px) translateY(4px); }
}
.prog-mirror-sheen {
  animation: progMirrorGlint 2.2s ease-in-out infinite;
}

/* 56. Vase: Classical Amphora Turning */
@keyframes progVaseTurn {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.92); }
}
.prog-vase-body {
  transform-origin: center center;
  animation: progVaseTurn 2.8s ease-in-out infinite;
}

/* 57. Globe: Planetary Meridian Spin */
@keyframes progGlobeSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(18deg); }
}
.prog-globe-meridian {
  transform-origin: 16px 16px;
  animation: progGlobeSpin 3.6s ease-in-out infinite;
}

/* 58. Dumbbell: Strength Lift Bounce */
@keyframes progDumbbellLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.prog-dumbbell-set {
  transform-origin: center center;
  animation: progDumbbellLift 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* 59. Hat: Festive Pom-Pom Spring */
@keyframes progHatPom {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.3); }
}
.prog-hat-pom {
  transform-origin: 16px 5.5px;
  animation: progHatPom 1.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* 60. Poop: Playful Swirl & Eye Wink */
@keyframes progPoopPulse {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.08, 0.94); }
}
.prog-poop-swirl {
  transform-origin: center bottom;
  animation: progPoopPulse 2.2s ease-in-out infinite;
}

/* 61. Egg: Sunny Yolk Jiggle */
@keyframes progEggYolk {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15, 0.88); }
}
.prog-egg-yolk {
  transform-origin: 16px 17px;
  animation: progEggYolk 1.7s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* 62. Phone: Screen Signal LED Cascade */
@keyframes progPhonePulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.3); }
}
.prog-phone-dot-1 { animation: progPhonePulse 1.2s ease-in-out 0ms infinite; transform-origin: 14px 12px; }
.prog-phone-dot-2 { animation: progPhonePulse 1.2s ease-in-out 200ms infinite; transform-origin: 16px 12px; }
.prog-phone-dot-3 { animation: progPhonePulse 1.2s ease-in-out 400ms infinite; transform-origin: 18px 12px; }

/* 63. Star8: 8-Point Cosmic Pulsation */
@keyframes progStar8Pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.18) rotate(22.5deg); }
}
.prog-star8-body {
  transform-origin: 16px 16px;
  animation: progStar8Pulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* 64. Sushi: Maki Roll Geometry */
@keyframes progSushiRoll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.prog-sushi-roll {
  transform-origin: center center;
  animation: progSushiRoll 2s ease-in-out infinite;
}

/* 65. Atom: Electron Orbital Orbit */
@keyframes progAtomOrbit1 {
  0% { transform: rotate(30deg); }
  100% { transform: rotate(390deg); }
}
@keyframes progAtomOrbit2 {
  0% { transform: rotate(-30deg); }
  100% { transform: rotate(-390deg); }
}
.prog-atom-ring-1 {
  transform-origin: 16px 16px;
  animation: progAtomOrbit1 4s linear infinite;
}
.prog-atom-ring-2 {
  transform-origin: 16px 16px;
  animation: progAtomOrbit2 4s linear infinite;
}

/* 66. Gingerbread: Cookie Jump & Sugar Buttons */
@keyframes progGingerJump {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-4px) rotate(4deg); }
  60% { transform: translateY(-4px) rotate(-4deg); }
}
.prog-ginger-body {
  transform-origin: center bottom;
  animation: progGingerJump 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-pill-icon-pop,
  .anim-editorial-pop,
  .anim-glyph-sparkle,
  .anim-glyph-palette,
  .anim-glyph-moon,
  .anim-glyph-arch,
  .anim-glyph-heart,
  .anim-glyph-speech,
  .anim-glyph-envelope,
  .anim-glyph-hourglass,
  .anim-glyph-coffee,
  .anim-glyph-sun,
  .anim-glyph-candle,
  .anim-glyph-planet,
  .anim-glyph-flower,
  .anim-glyph-daisy,
  .anim-glyph-mushroom,
  .anim-glyph-tree,
  .anim-glyph-peace,
  .anim-glyph-eyes,
  .anim-glyph-cherries,
  .anim-glyph-stairs,
  .anim-glyph-books,
  .anim-glyph-cocktail,
  .anim-glyph-lamp,
  .anim-glyph-tv,
  .anim-glyph-chair,
  .anim-glyph-rainbow,
  .anim-glyph-swirl,
  .anim-glyph-wave,
  .anim-glyph-water,
  .anim-glyph-cactus,
  .anim-glyph-smiley,
  .anim-glyph-dice,
  .anim-glyph-zen,
  .anim-glyph-disco,
  .anim-glyph-glasses,
  .anim-glyph-donut,
  .anim-glyph-flame,
  .anim-glyph-leaf,
  .anim-glyph-mountain,
  .anim-glyph-lightning,
  .anim-glyph-wavehand,
  .anim-glyph-lips,
  .anim-glyph-trophy,
  .anim-glyph-gift,
  .anim-glyph-balloon,
  .anim-glyph-laptop,
  .anim-glyph-music,
  .anim-glyph-lipstick,
  .anim-glyph-ticket,
  .anim-glyph-tennis,
  .anim-glyph-plantpot,
  .anim-glyph-pill,
  .anim-glyph-magnifier,
  .anim-glyph-avocado,
  .anim-glyph-basket,
  .anim-glyph-mirror,
  .anim-glyph-vase,
  .anim-glyph-globe,
  .anim-glyph-dumbbell,
  .anim-glyph-hat,
  .anim-glyph-poop,
  .anim-glyph-egg,
  .anim-glyph-phone,
  .anim-glyph-star8,
  .anim-glyph-sushi,
  .anim-glyph-atom,
  .anim-glyph-gingerbread,
  .prog-dot,
  .prog-dot-1,
  .prog-dot-2,
  .prog-dot-3,
  .prog-plant-trunk,
  .prog-tree-tier,
  .prog-tree-tier-1,
  .prog-tree-tier-2,
  .prog-tree-tier-3,
  .prog-fruit,
  .prog-fruit-1,
  .prog-fruit-2,
  .prog-petal,
  .prog-drum-rotor,
  .prog-sand-stream,
  .prog-sand-bottom,
  .prog-sand-top,
  .prog-envelope-letter,
  .prog-steam-1,
  .prog-steam-2,
  .prog-mushroom-stalk,
  .prog-mushroom-cap,
  .prog-candle-flame,
  .prog-planet-ring,
  .prog-heart-core,
  .prog-heart-highlight,
  .prog-sun-core,
  .prog-sun-ray,
  .prog-moon-star,
  .prog-sparkle-star,
  .prog-sparkle-core,
  .prog-eye-pupil,
  .prog-peace-fingers,
  .prog-stair,
  .prog-arch-portal,
  .prog-arch-keystone,
  .prog-book-top,
  .prog-book-ribbon,
  .prog-paint,
  .prog-cocktail-liquid,
  .prog-cocktail-olive,
  .prog-lamp-glow,
  .prog-lamp-cord,
  .prog-tv-antennas,
  .prog-tv-screen,
  .prog-chair-seat,
  .prog-rainbow-arch,
  .prog-wave-crest,
  .prog-wave-spray-1,
  .prog-wave-spray-2,
  .prog-cactus-stem,
  .prog-cactus-arm-l,
  .prog-cactus-arm-r,
  .prog-cactus-flower,
  .prog-smiley-mouth,
  .prog-smiley-eyes,
  .prog-smiley-blush,
  .prog-dice-pip,
  .prog-water-drop,
  .prog-water-glint,
  .prog-zen-bottom,
  .prog-zen-middle,
  .prog-zen-top,
  .prog-disco-glint,
  .prog-glasses-lens-l,
  .prog-glasses-lens-r,
  .prog-glasses-sheen,
  .prog-donut-glaze,
  .prog-donut-sprinkle,
  .prog-flame-outer,
  .prog-flame-inner,
  .prog-leaf-stem,
  .prog-leaf-body,
  .prog-mountain-back,
  .prog-mountain-front,
  .prog-lightning-bolt,
  .prog-hand-wave,
  .prog-lips-body,
  .prog-trophy-cup,
  .prog-gift-lid,
  .prog-balloon-drift,
  .prog-laptop-screen,
  .prog-music-note-1,
  .prog-music-note-2,
  .prog-lipstick-bullet,
  .prog-ticket-body,
  .prog-tennis-ball,
  .prog-pot-plant,
  .prog-pill-capsule,
  .prog-lens-rim,
  .prog-avocado-pit,
  .prog-basket-handle,
  .prog-mirror-sheen,
  .prog-vase-body,
  .prog-globe-meridian,
  .prog-dumbbell-set,
  .prog-hat-pom,
  .prog-poop-swirl,
  .prog-egg-yolk,
  .prog-phone-dot-1,
  .prog-phone-dot-2,
  .prog-phone-dot-3,
  .prog-star8-body,
  .prog-sushi-roll,
  .prog-atom-nucleus,
  .prog-atom-ring-1,
  .prog-atom-ring-2,
  .prog-ginger-body {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

}

/* ── COMMUNITY INVITATION REDESIGN ─────────────────────────────
     Keep the existing form mechanics, but let the supplied photography
     and clearer copy carry the first impression.
     ───────────────────────────────────────────────────────────── */
  .hero-section {
    min-height: min(820px, 100dvh);
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: var(--canvas);
  }

  .hero-bg-media {
    left: 50%;
    width: 50%;
    height: 100%;
  }

  .hero-bg-img {
    object-position: center center;
  }

  .hero-vignette-overlay {
    background: transparent;
  }

  [data-theme="dark"] .hero-vignette-overlay {
    background: transparent;
  }

  .hero-content {
    width: 50%;
    max-width: 760px;
    margin: 0;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(132px, 12vw, 180px) clamp(32px, 7vw, 120px) 72px;
    text-align: left;
  }

  .hero-heading {
    max-width: 600px;
    margin-bottom: 24px;
    color: var(--text);
    font-size: clamp(54px, 6.6vw, 96px);
    line-height: 0.98;
    text-align: left;
    text-shadow: none;
  }

  [data-theme="dark"] .hero-heading {
    color: var(--text);
    text-shadow: none;
  }

  .hero-heading .serif-italic {
    color: var(--accent-gentle);
  }

  .hero-subheading {
    max-width: 480px;
    margin: 0 0 32px;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.6;
    text-align: left;
    text-shadow: none;
  }

  [data-theme="dark"] .hero-subheading {
    color: var(--text-muted);
    text-shadow: none;
  }

  .hero-actions {
    margin-bottom: 0;
  }

  .editorial-container {
    padding-top: clamp(56px, 7vw, 88px);
    padding-bottom: 0;
  }

  .information-section {
    padding-top: 0;
    border-top: 0;
  }

  .info-eyebrow {
    display: none;
  }

  .info-grid {
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
    column-gap: clamp(48px, 7vw, 112px);
    row-gap: clamp(56px, 7vw, 96px);
  }

  .info-left-col {
    top: 112px;
  }

  .info-display-heading {
    font-size: clamp(2.8rem, 5vw, 5.2rem);
  }

  .info-right-col {
    gap: clamp(28px, 3.5vw, 42px);
  }

  .info-block-num {
    letter-spacing: 0.1em;
  }

  .community-photo-section {
    display: grid;
    grid-column: 1 / -1;
    width: calc(100vw - clamp(48px, 8vw, 160px));
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: clamp(48px, 8vw, 144px);
    max-width: 1480px;
    margin: clamp(8px, 2vw, 24px) auto 0;
    padding: 0 clamp(32px, 7vw, 112px) clamp(56px, 7vw, 96px);
  }

  .community-photo-copy {
    max-width: 520px;
  }

  .community-photo-copy h2 {
    margin-bottom: 20px;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 5vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 0.94;
  }

  .community-photo-copy p {
    max-width: 42ch;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
  }

  .community-photo-section img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 760px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgb(17 18 22 / 0.14);
  }

  .waitlist-section-emojis {
    display: none;
  }

  .waitlist-section {
    padding-top: clamp(48px, 6vw, 72px);
  }

  .pasteup-desk-card.glass-panel {
    border-radius: 16px;
    padding: clamp(32px, 4vw, 48px);
    background: var(--surface);
    border-color: var(--line);
    box-shadow: 0 12px 36px rgb(17 18 22 / 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .pasteup-title {
    font-size: clamp(2.2rem, 3.5vw, 3.4rem);
    letter-spacing: -0.03em;
  }

  .pasteup-desc {
    max-width: 30ch;
  }

  .pasteup-security {
    max-width: 24ch;
    line-height: 1.45;
  }

  @media (max-width: 760px) {
    .info-grid {
      grid-template-columns: 1fr;
      row-gap: 56px;
    }

    .hero-section {
      min-height: auto;
      padding-top: 88px;
    }

    .hero-bg-media {
      position: relative;
      inset: auto;
      width: 100%;
      height: min(72vw, 460px);
      order: 2;
    }

    .hero-vignette-overlay {
      background: linear-gradient(180deg, rgb(247 244 236 / 0) 65%, var(--canvas) 100%);
    }

    [data-theme="dark"] .hero-vignette-overlay {
      background: linear-gradient(180deg, rgb(13 14 17 / 0) 65%, var(--canvas) 100%);
    }

    .hero-content {
      width: 100%;
      order: 1;
      padding: 48px 24px 36px;
    }

    .hero-heading {
      font-size: clamp(3rem, 12vw, 4.5rem);
    }

    .hero-subheading {
      max-width: 38ch;
    }

    .community-photo-section {
      grid-column: 1;
      grid-template-columns: 1fr;
      gap: 32px;
      padding-left: 24px;
      padding-right: 24px;
      padding-bottom: 88px;
    }

    .community-photo-section img {
      max-height: 540px;
    }
  }

/* ── WAITLIST TALISMAN CONSTELLATION ──────────────────────────
     Keep four of the existing illustrated glyphs as a light,
     tactile invitation around the form on roomy screens.
     ───────────────────────────────────────────────────────────── */
@media (min-width: 681px) {
    .waitlist-section-emojis {
      display: none !important;
    }

    .waitlist-section-emojis .fe-pos-top-1,
    .waitlist-section-emojis .fe-pos-top-2,
    .waitlist-section-emojis .fe-pos-bot-1,
    .waitlist-section-emojis .fe-pos-bot-2 {
      display: flex !important;
    }

    .waitlist-section-emojis .fe-pos-top-1 {
      top: 3%;
      left: calc(50% - 300px);
    }

    .waitlist-section-emojis .fe-pos-top-2 {
      top: 4%;
      right: calc(50% - 300px);
    }

    .waitlist-section-emojis .fe-pos-bot-1 {
      bottom: 4%;
      left: calc(50% - 220px);
    }

    .waitlist-section-emojis .fe-pos-bot-2 {
      bottom: 4%;
      right: calc(50% - 220px);
    }
}

.pasteup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 4px;
}

.pasteup-submit-btn {
    flex: 0 0 auto;
}

.pasteup-security {
    color: var(--ink-subtle);
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: right;
}

@media (max-width: 600px) {
  .rove-site-footer {
    padding-top: 72px;
  }

  .footer-heading {
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-links {
    justify-content: flex-start;
    gap: 14px 20px;
  }

  .footer-meta {
    justify-content: flex-start;
  }
}

[data-theme="dark"] .rove-site-footer {
  background: #050608;
}

[data-theme="dark"] .rove-site-footer .footer-heading {
  color: #f7f4ec;
}

[data-theme="dark"] .rove-site-footer .footer-statement {
  color: rgb(247 244 236 / 0.72);
}

@media (max-width: 600px) {
    .pasteup-actions {
      align-items: stretch;
      flex-direction: column;
      gap: 14px;
    }

    .pasteup-submit-btn {
      width: 100%;
    }

    .pasteup-security {
      text-align: center;
    }
}

/* ── FINAL RESPONSIVE COMPOSITION ─────────────────────────────
   Keep the hero readable at tablet widths instead of compressing
   the copy into a narrow strip beside the photograph.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 981px) {
  .hero-section {
    min-height: min(780px, 92dvh);
  }

  .hero-bg-media {
    left: 52%;
    width: 48%;
  }

  .hero-content {
    width: 52%;
    padding: clamp(120px, 10vw, 160px) clamp(36px, 6vw, 96px) 72px;
  }
}

@media (max-width: 980px) {
  .floating-nav-wrapper {
    padding-inline: 20px;
  }

  .hero-section {
    min-height: auto;
    padding-top: 92px;
    display: flex;
    flex-direction: column;
  }

  .hero-content {
    width: 100%;
    max-width: 760px;
    order: 1;
    align-items: flex-start;
    padding: 56px clamp(28px, 7vw, 72px) 48px;
    text-align: left;
  }

  .hero-heading {
    max-width: 680px;
    font-size: clamp(3.6rem, 8vw, 6.4rem);
    text-align: left;
  }

  .hero-subheading {
    max-width: 40ch;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  .hero-bg-media {
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    height: min(64vw, 560px);
    order: 2;
  }

  .hero-vignette-overlay {
    background: transparent;
  }

  [data-theme="dark"] .hero-vignette-overlay {
    background: transparent;
  }

  .editorial-container {
    padding-top: clamp(56px, 8vw, 88px);
  }

  .information-section {
    padding-bottom: 40px;
  }
}

@media (max-width: 680px) {
  .floating-nav-wrapper {
    top: 12px;
    padding-inline: 12px;
  }

  .glass-navbar {
    height: 56px;
  }

  .hero-section {
    padding-top: 76px;
  }

  .hero-content {
    padding: 40px 24px 36px;
  }

  .hero-heading {
    font-size: clamp(3rem, 12vw, 4.5rem);
  }

  .hero-bg-media {
    height: min(82vw, 440px);
  }
}

@media (min-width: 681px) {
  #waitlist .waitlist-section-emojis {
    display: block !important;
  }

  #waitlist .waitlist-section-emojis .fe-pos-top-1,
  #waitlist .waitlist-section-emojis .fe-pos-top-2,
  #waitlist .waitlist-section-emojis .fe-pos-bot-1,
  #waitlist .waitlist-section-emojis .fe-pos-bot-2 {
    display: flex !important;
  }

  #waitlist .waitlist-section-emojis .fe-pos-left-1,
  #waitlist .waitlist-section-emojis .fe-pos-left-3,
  #waitlist .waitlist-section-emojis .fe-pos-left-4,
  #waitlist .waitlist-section-emojis .fe-pos-right-1,
  #waitlist .waitlist-section-emojis .fe-pos-right-3,
  #waitlist .waitlist-section-emojis .fe-pos-right-4 {
    display: none;
  }
}

/* ── MAIL COVER FINAL CASCADE ───────────────────────────────── */
#waitlist .pasteup-desk-card.glass-panel {
  padding: 0;
}

#waitlist .mail-letter {
  padding: clamp(30px, 4.5vw, 60px);
}

@media (max-width: 680px) {
  #waitlist .mail-cover-top {
    min-height: 74px;
    padding: 20px 22px 0;
  }

  #waitlist .mail-letter-meta {
    font-size: 0.6rem;
  }

  #waitlist .mail-letter {
    padding: 24px 22px 30px;
  }

  #waitlist .mail-letter-footer {
    padding-inline: 22px;
  }

  .archive-toast {
    right: 16px;
    bottom: 16px;
    width: min(320px, calc(100vw - 32px));
  }
}

/* ── FLUID DEVICE FIT ────────────────────────────────────────
   Keep the letter comfortable between phone, tablet, laptop,
   and wide desktop widths instead of relying on one breakpoint.
   ─────────────────────────────────────────────────────────── */
#waitlist .desk-container {
  max-width: 1160px;
  padding-inline: clamp(12px, 4vw, 64px);
}

#waitlist .waitlist-box-stage {
  width: min(100%, 760px);
}

#waitlist .mail-cover-top {
  min-height: clamp(68px, 7vw, 88px);
  padding-inline: clamp(18px, 5vw, 64px);
}

#waitlist .mail-letter-meta {
  font-size: clamp(0.58rem, 0.9vw, 0.72rem);
}

#waitlist .mail-letter {
  width: min(100%, 620px);
  padding: clamp(24px, 4.5vw, 56px) clamp(18px, 5vw, 64px) clamp(28px, 4vw, 42px);
}

#waitlist .pasteup-title {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
}

#waitlist .pasteup-desc {
  font-size: clamp(0.78rem, 1.35vw, 0.9rem);
}

#waitlist .pasteup-form {
  gap: clamp(16px, 2.5vw, 24px);
}

#waitlist .pasteup-field-row {
  gap: clamp(12px, 2vw, 18px);
}

#waitlist .pasteup-actions {
  gap: clamp(14px, 3vw, 28px);
}

.send-envelope {
  width: clamp(132px, 26vw, 168px);
  height: clamp(88px, 17vw, 112px);
}

@media (max-width: 720px) {
  #waitlist .pasteup-field-row {
    grid-template-columns: 1fr;
  }

  #waitlist .pasteup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #waitlist .pasteup-submit-btn {
    width: 100%;
  }

  #waitlist .pasteup-security {
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 430px) {
  #waitlist .mail-letter-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  #waitlist .mail-letter-meta span:last-child {
    align-self: flex-end;
  }

  #waitlist .mail-greeting {
    margin-bottom: 20px;
    font-size: 0.82rem;
  }

  #waitlist .pasteup-title {
    font-size: clamp(1.65rem, 8.5vw, 2.15rem);
  }

  #waitlist .pasteup-desc {
    font-size: 0.78rem;
    line-height: 1.65;
  }

  #waitlist .mail-form-intro {
    margin-top: 24px;
    font-size: 0.74rem;
  }

  #waitlist .pasteup-field label {
    font-size: 0.62rem;
    letter-spacing: 0.075em;
  }

  #waitlist .pasteup-input,
  #waitlist .pasteup-textarea {
    font-size: 0.82rem;
  }

  #waitlist .mail-letter-footer {
    gap: 10px;
  }
}