/* modern-v35 — unmistakable glass, stage light, first-paint motion */

html[data-theme="light"] .stage,
html[data-theme="dark"] .stage {
  --stage-ink: #1c1710;
  min-height: calc(100svh - 58px);
}

html[data-theme="light"] .stage-bg,
html[data-theme="light"] .stage-photo,
html[data-theme="dark"] .stage-bg,
html[data-theme="dark"] .stage-photo {
  opacity: 1 !important;
  visibility: visible !important;
}

.stage-bg::after {
  content: "" !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 18%, rgba(255, 232, 186, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(12, 8, 4, 0.18) 0%, rgba(12, 8, 4, 0.08) 42%, rgba(8, 6, 4, 0.55) 100%) !important;
}

html[data-theme="light"] .cinematic .site-header,
html[data-theme="dark"] .cinematic .site-header {
  background: color-mix(in oklab, #120e0a 42%, transparent) !important;
  color: #f6ecda !important;
  border-bottom: 1px solid color-mix(in oklab, #fff 14%, transparent) !important;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

html[data-theme="light"] .cinematic .brand-name,
html[data-theme="light"] .cinematic .brand-name span,
html[data-theme="light"] .cinematic .nav,
html[data-theme="light"] .cinematic .nav a,
html[data-theme="dark"] .cinematic .brand-name,
html[data-theme="dark"] .cinematic .nav a {
  color: #f6ecda !important;
}

html[data-theme="light"] .cinematic .theme-btn,
html[data-theme="light"] .cinematic .menu-btn,
html[data-theme="dark"] .cinematic .theme-btn,
html[data-theme="dark"] .cinematic .menu-btn {
  color: #f6ecda !important;
  border-color: color-mix(in oklab, #fff 26%, transparent) !important;
  background: color-mix(in oklab, #070908 30%, transparent) !important;
}

.split-title {
  color: #fff6e4 !important;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  letter-spacing: -0.03em;
}
.split-title .ital {
  color: #f0d7a0 !important;
}
.cinematic .stage .kicker {
  color: #e8d4a4 !important;
  letter-spacing: 0.22em !important;
}
.cinematic .stage .lede {
  color: #f3e8d2 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* True glass — wood must read through the panel */
.stage-tool .panel {
  background:
    linear-gradient(165deg, rgba(255, 250, 240, 0.34) 0%, rgba(255, 244, 226, 0.16) 48%, rgba(28, 20, 12, 0.18) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  color: #1a1510 !important;
  backdrop-filter: blur(42px) saturate(1.7) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(42px) saturate(1.7) brightness(1.08) !important;
  box-shadow:
    0 40px 90px -28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="dark"] .stage-tool .panel {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, rgba(20, 16, 12, 0.42) 100%) !important;
  color: #f6ecda !important;
}

.stage-tool .field-label,
.stage-tool .coach,
.stage-tool .try-label,
.stage-tool .mini,
.stage-tool .hint {
  color: #2c241c !important;
}
html[data-theme="dark"] .stage-tool .field-label,
html[data-theme="dark"] .stage-tool .coach,
html[data-theme="dark"] .stage-tool .try-label,
html[data-theme="dark"] .stage-tool .mini,
html[data-theme="dark"] .stage-tool .hint {
  color: #d8ccb8 !important;
}

.stage-tool .status h2,
#resultsHeading {
  background: color-mix(in oklab, #fff 22%, transparent) !important;
  border-radius: 12px;
  padding: 0.45rem 0.7rem;
  backdrop-filter: blur(12px);
}

.stage-tool .input-row input[type="text"] {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -18px rgba(0, 0, 0, 0.35) !important;
}
.stage-tool .input-row input[type="text"]:focus {
  outline: none;
  border-color: #e8d4a4 !important;
  box-shadow:
    0 0 0 5px rgba(215, 195, 154, 0.38),
    0 18px 40px -20px rgba(0, 0, 0, 0.4) !important;
}

.stage-tool .primary {
  background: linear-gradient(180deg, #2a5d48 0%, #1a3d2e 100%) !important;
  color: #f6ecda !important;
  box-shadow: 0 12px 24px -12px rgba(16, 40, 28, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  letter-spacing: 0.01em;
}
.stage-tool .primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.keypad { display: flex !important; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.key-row { display: flex; justify-content: center; gap: 5px; }
.key {
  min-width: 32px;
  min-height: 38px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff8ea 0%, #ead7b4 100%) !important;
  border: 1px solid rgba(90, 60, 20, 0.22) !important;
  box-shadow: 0 3px 0 rgba(90, 60, 20, 0.18), inset 0 1px 0 #fff !important;
  color: #1c1710 !important;
  font-weight: 700;
}
.key:hover { transform: translateY(-2px); }
.key:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(90, 60, 20, 0.18) !important; }

@media (max-width: 720px) {
  .keypad { display: none !important; }
}

.chip, .len, .mode {
  backdrop-filter: blur(10px);
  border-color: color-mix(in oklab, #1c1710 14%, transparent) !important;
}
.chip:hover, .word:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 28px -16px rgba(0, 0, 0, 0.4);
}

.daily {
  background: color-mix(in oklab, #fffaf0 46%, transparent) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.consent {
  background: color-mix(in oklab, #1a1410 55%, transparent) !important;
  color: #f6ecda !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.consent p, .consent a { color: #f6ecda !important; }

.bento-card {
  background: color-mix(in oklab, #fff 72%, transparent);
  backdrop-filter: blur(16px);
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1), box-shadow 220ms ease;
}
.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.38);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .stage-copy .kicker { animation: rise 0.7s cubic-bezier(.22, 1, .36, 1) both; }
  .split-title { animation: rise 0.85s 0.06s cubic-bezier(.22, 1, .36, 1) both; }
  .stage-copy .lede { animation: rise 0.85s 0.12s cubic-bezier(.22, 1, .36, 1) both; }
  .stage-tool .panel { animation: rise 0.9s 0.16s cubic-bezier(.22, 1, .36, 1) both; }
  .daily { animation: rise 0.9s 0.24s cubic-bezier(.22, 1, .36, 1) both; }

  @supports (animation-timeline: view()) {
    .group, .bento-card, .prose.faq, section.prose {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 68%;
    }
  }
}