/* ============================================================
   PERFUME GANG — pre-launch
   Palette: espresso #1A120C / #0E0906 · amber #8A5324→#E8B877
   cream #EDE4D3 · oxblood #5C1616
   ============================================================ */

:root {
  --bg-deep: #0e0906;
  --bg: #1a120c;
  --amber-1: #8a5324;
  --amber-2: #c98a45;
  --amber-3: #e8b877;
  --cream: #ede4d3;
  --cream-30: rgba(237, 228, 211, 0.3);
  --cream-60: rgba(237, 228, 211, 0.6);
  --oxblood: #5c1616;
  --serif: "Playfair Display", "Georgia", serif;
  --script: "Pinyon Script", cursive;
  --sans: "Jost", "Helvetica Neue", sans-serif;
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  background: var(--bg-deep);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---------- film grain ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared ---------- */
.script {
  font-family: var(--script);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.35em;
  color: var(--amber-3);
  line-height: 0;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--cream-60);
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.02em;
}

.section-sub {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-60);
  text-align: center;
  margin-top: 1.1rem;
}

.social-proof {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-60);
  justify-content: center;
}
.proof-num {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--amber-3);
}
.proof-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber-3);
  box-shadow: 0 0 8px rgba(232, 184, 119, 0.8);
  animation: proofPulse 2.6s ease-in-out infinite;
}
@keyframes proofPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-dot { animation: none; }
}

.rule-lockup {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  justify-content: center;
  margin-bottom: 2.2rem;
}
.rule-line { height: 1px; width: min(120px, 20vw); background: var(--cream-30); }
.rule-text {
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--cream-60);
  white-space: nowrap;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.6rem;
  cursor: pointer;
  transition: all 0.7s var(--ease-lux);
  border-radius: 0;
}
.btn--ghost {
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--cream-30);
}
.btn--ghost:hover:not(:disabled) {
  border-color: var(--amber-3);
  color: var(--amber-3);
  box-shadow: 0 0 40px rgba(232, 184, 119, 0.12);
}
.btn--solid {
  color: var(--bg-deep);
  background: var(--cream);
  border: 1px solid var(--cream);
}
.btn--solid:hover:not(:disabled) {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--cream);
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-lux), transform 0.9s var(--ease-lux);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.6s var(--ease-lux), border-color 0.6s var(--ease-lux), padding 0.6s var(--ease-lux);
}
.nav.is-scrolled {
  background: rgba(14, 9, 6, 0.72);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(237, 228, 211, 0.1);
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}
.nav-mark { display: block; line-height: 0; }
.nav-mark img {
  height: 30px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.5s var(--ease-lux);
}
.nav-mark:hover img { opacity: 1; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}
.nav-link {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-60);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.5s var(--ease-lux), border-color 0.5s var(--ease-lux);
  white-space: nowrap;
}
.nav-link:hover { color: var(--amber-3); border-color: var(--amber-3); }
.nav-link--cta {
  color: var(--cream);
  border-bottom-color: var(--cream-30);
}
.nav-link--cta:hover { color: var(--amber-3); border-color: var(--amber-3); }

@media (max-width: 560px) {
  .nav { padding: 1.1rem 1.2rem; }
  .nav-mark img { height: 24px; }
  .nav-links { gap: 1rem; }
  .nav-link { font-size: 0.58rem; letter-spacing: 0.18em; }
}

@media (max-width: 420px) {
  .nav-link:not(.nav-link--cta) { display: none; }
  .nav-link--cta { font-size: 0.6rem; letter-spacing: 0.16em; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 5rem;
  background: radial-gradient(ellipse 120% 90% at 50% 110%, #3a2412 0%, var(--bg) 45%, var(--bg-deep) 100%);
  overflow: clip;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate;
}
.hero-glow--1 { width: 46vw; height: 46vw; background: radial-gradient(circle, #c98a4555, transparent 65%); top: 8%; left: -10%; }
.hero-glow--2 { width: 38vw; height: 38vw; background: radial-gradient(circle, #8a532466, transparent 65%); bottom: -5%; right: -8%; animation-delay: -8s; }
.hero-glow--3 { width: 26vw; height: 30vw; background: radial-gradient(circle, #5c161640, transparent 60%); top: 40%; right: 18%; animation-delay: -15s; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6vw, -4vh) scale(1.15); }
}

/* ghosted wheel turning behind the hero content */
.hero-wheel {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hero-wheel svg {
  flex: none;
  width: 150vmin;
  height: 150vmin;
  opacity: 0.055;
  stroke: var(--cream);
  stroke-width: 1;
  animation: idleSpin 150s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-wheel svg { animation: none; }
}

.hero-logo-wrap {
  position: relative;
  width: min(420px, 72vw);
  margin: 2.4rem 0 3rem;
}
.hero-logo {
  display: block;
  width: 100%;
}

/* sparkle sweeping through the letterforms, left to right */
.hero-logo-shine {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 246, 224, 0.55) 44%,
    #fffdf6 50%,
    rgba(255, 246, 224, 0.55) 56%,
    transparent 70%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: logoShine 7s ease-in-out infinite;
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .hero-logo-shine {
    display: block;
    -webkit-mask-image: url("../assets/cream-logo.png");
    mask-image: url("../assets/cream-logo.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}
@keyframes logoShine {
  0%   { background-position: 100% 0; }
  38%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-shine { display: none; }
}

.hero-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 4.5vw, 3.2rem);
  line-height: 1.35;
  max-width: 22ch;
}

.hero-sub {
  margin: 1.8rem 0 2.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-60);
  max-width: 42ch;
  line-height: 2;
}

.countdown {
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  margin-top: 3.2rem;
}
.countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.countdown-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--amber-3);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}
.countdown-label {
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cream-60);
}
.countdown-sep { color: var(--cream-30); font-size: 1.4rem; align-self: center; }

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  width: 1px;
  height: 54px;
  background: var(--cream-30);
  overflow: hidden;
}
.scroll-hint span {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--amber-3);
  animation: hint 2.4s var(--ease-lux) infinite;
}
@keyframes hint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(260%); }
}

/* ============ WHEEL ============ */
.wheel-section {
  position: relative;
  padding: 8rem 1.5rem 7rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #2a1a0e 0%, transparent 60%),
    var(--bg-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gate {
  margin-top: 3.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  align-items: flex-end;
  justify-content: center;
  width: min(680px, 100%);
}
.gate-field { position: relative; flex: 1 1 250px; }
.gate > .btn { flex: 0 0 auto; margin-inline: auto; }
.gate-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cream-30);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 0.8rem 0.2rem;
  outline: none;
  transition: border-color 0.6s var(--ease-lux);
  border-radius: 0;
}
.gate-field input::placeholder { color: var(--cream-30); letter-spacing: 0.12em; }
.gate-field input:focus { border-color: var(--amber-3); }
.gate-error {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c96a5a;
  min-height: 1.2em;
}
.gate-done {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber-3);
}
.gate.is-hidden { display: none; }

/* --- wheel stage --- */
.wheel-stage {
  margin-top: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: opacity 0.8s var(--ease-lux), filter 0.8s var(--ease-lux);
}
.wheel-stage[data-locked="true"] .wheel-wrap {
  opacity: 0.35;
  filter: blur(2px) saturate(0.6);
}
.wheel-wrap {
  position: relative;
  width: min(560px, 88vw);
  aspect-ratio: 1;
  transition: opacity 0.8s var(--ease-lux), filter 0.8s var(--ease-lux);
}

#wheel-svg {
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
}

/* slow ambient rotation while the wheel waits in view */
@keyframes idleSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#wheel-svg.is-idle {
  animation: idleSpin 75s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  #wheel-svg.is-idle { animation: none; }
}

.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(232, 184, 119, 0.25));
}

.wheel-pointer {
  width: 30px;
  margin-bottom: -6px;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.wheel-pointer svg { display: block; width: 100%; }
.wheel-pointer path { fill: var(--oxblood); stroke: var(--amber-2); stroke-width: 1.5; }

.wheel-spin-btn { margin-top: 3rem; }
.wheel-locked-note {
  margin-top: 1.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-60);
}

/* wheel svg internals */
.seg-fill { fill: rgba(237, 228, 211, 0.025); transition: fill 0.6s var(--ease-lux); }
.seg:hover .seg-fill { fill: rgba(232, 184, 119, 0.07); }
.seg-fill.is-won {
  fill: rgba(232, 184, 119, 0.16);
  animation: bloom 2.2s var(--ease-lux);
}
@keyframes bloom {
  0% { fill: rgba(232, 184, 119, 0.45); }
  100% { fill: rgba(232, 184, 119, 0.16); }
}
.seg-line { stroke: var(--cream-30); stroke-width: 1; }
.wheel-rim { fill: none; stroke: var(--cream-30); stroke-width: 1.5; }
.wheel-rim--inner { stroke: rgba(237, 228, 211, 0.15); stroke-width: 1; }
.seg-label {
  fill: var(--cream);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}

/* --- result --- */
.result {
  margin-top: 4.2rem;
  text-align: center;
  animation: resultIn 1.1s var(--ease-lux);
}
@keyframes resultIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
.result-seal { width: 74px; opacity: 0.85; margin-bottom: 1.6rem; }
.result-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--cream-60);
  margin-bottom: 1rem;
}
.result-perk {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--amber-3);
}
.result-sub {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-60);
}

/* ============ MANIFESTO ============ */
.manifesto {
  padding: 9rem 1.5rem;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, #241609 0%, var(--bg-deep) 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.5rem;
}
.manifesto-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.6vw, 2.4rem);
  text-align: center;
  max-width: 26ch;
  line-height: 1.5;
}

/* ============ LEDGER ============ */
.ledger {
  padding: 7rem 1.5rem 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ledger-list {
  list-style: none;
  margin-top: 3.6rem;
  width: min(640px, 100%);
}
.ledger-row {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  padding: 1.6rem 0.4rem;
  border-bottom: 1px solid rgba(237, 228, 211, 0.12);
}
.ledger-row:first-child { border-top: 1px solid rgba(237, 228, 211, 0.12); }
.ledger-no {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--amber-2);
  min-width: 2.2ch;
}
.ledger-item {
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--cream);
}

/* ============ FINAL CTA ============ */
.final-cta {
  position: relative;
  padding: 9rem 1.5rem;
  background: radial-gradient(ellipse 110% 90% at 50% 100%, #30190f 0%, var(--bg-deep) 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.final-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 90vw);
  opacity: 0.05;
  pointer-events: none;
}
.final-cta .gate { position: relative; z-index: 1; }
.reassure {
  margin-top: 2.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--cream-60);
}

/* ============ FOOTER ============ */
.footer {
  padding: 4.5rem 1.5rem 3rem;
  border-top: 1px solid rgba(237, 228, 211, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}
.footer-mark { width: 56px; opacity: 0.8; }
.footer-line {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cream-60);
  line-height: 2.1;
}
.footer-socials {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-social-sep { color: var(--cream-30); font-size: 0.8rem; }
.footer-social {
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--cream-30);
  padding-bottom: 2px;
  transition: color 0.6s var(--ease-lux), border-color 0.6s var(--ease-lux);
}
.footer-social:hover { color: var(--amber-3); border-color: var(--amber-3); }
.footer-copy { font-size: 0.55rem; letter-spacing: 0.3em; color: var(--cream-30); }

/* ============ RESPONSIVE ============ */

/* --- tablets --- */
@media (max-width: 900px) {
  .wheel-section { padding: 6rem 1.5rem 5.5rem; }
  .manifesto { padding: 7rem 1.5rem; }
  .ledger { padding: 6rem 1.5rem 6.5rem; }
  .final-cta { padding: 7rem 1.5rem; }
}

/* --- phones --- */
@media (max-width: 560px) {
  .countdown { gap: 0.8rem; }
  .gate { gap: 1.6rem; }
  .gate .btn { flex: 1 1 100%; }
  .seg-label { font-size: 18px; letter-spacing: 2.5px; }
  .manifesto { gap: 3.2rem; }
  .ledger-row { gap: 1.2rem; }
  .hero { padding: 5.5rem 1.2rem 4.5rem; }
  .hero-logo-wrap { margin: 2rem 0 2.4rem; }
  .wheel-section { padding: 5rem 1rem 4.5rem; }
  .wheel-wrap { width: min(560px, 94vw); }
  .wheel-spin-btn { margin-top: 2.2rem; }
  .btn { padding: 1rem 1.8rem; letter-spacing: 0.28em; }
  .result { margin-top: 3.2rem; }
  .ledger { padding: 5rem 1.2rem 5.5rem; }
  .manifesto { padding: 5.5rem 1.2rem; }
  .final-cta { padding: 6rem 1.2rem; }
  .footer { padding: 3.5rem 1.2rem 2.5rem; }
}

/* --- small phones --- */
@media (max-width: 380px) {
  .countdown { gap: 0.55rem; }
  .countdown-sep { display: none; }
  .countdown-num { font-size: 1.45rem; }
  .countdown-label { font-size: 0.52rem; letter-spacing: 0.28em; }
  .hero-sub { font-size: 0.74rem; letter-spacing: 0.16em; }
  .eyebrow { font-size: 0.62rem; letter-spacing: 0.32em; }
  .btn { font-size: 0.66rem; letter-spacing: 0.22em; padding: 0.95rem 1.4rem; }
  .rule-line { width: 14vw; }
  .rule-text { letter-spacing: 0.34em; }
  .section-sub { font-size: 0.72rem; letter-spacing: 0.12em; }
  .ledger-item { font-size: 0.78rem; letter-spacing: 0.1em; }
  .footer-line { letter-spacing: 0.22em; }
}

/* --- short landscape phones --- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 6rem 1.5rem 4rem; }
  .hero-logo-wrap { width: min(280px, 40vw); margin: 1.4rem 0 1.8rem; }
  .hero-sub { margin: 1.2rem 0 1.8rem; }
  .countdown { margin-top: 1.8rem; }
  .scroll-hint { display: none; }
  .wheel-wrap { width: min(420px, 70vh); }
}

/* --- large desktops --- */
@media (min-width: 1600px) {
  .hero-logo-wrap { width: min(500px, 30vw); }
  .hero-headline { font-size: 3.4rem; }
  .wheel-wrap { width: 620px; }
}

/* --- notched devices: keep fixed nav inside safe areas --- */
@supports (padding: env(safe-area-inset-left)) {
  .nav {
    padding-left: calc(clamp(1.5rem, 5vw, 4rem) + env(safe-area-inset-left));
    padding-right: calc(clamp(1.5rem, 5vw, 4rem) + env(safe-area-inset-right));
    padding-top: calc(1.5rem + env(safe-area-inset-top));
  }
  .nav.is-scrolled { padding-top: calc(1.05rem + env(safe-area-inset-top)); }
  @media (max-width: 560px) {
    .nav {
      padding-left: calc(1.2rem + env(safe-area-inset-left));
      padding-right: calc(1.2rem + env(safe-area-inset-right));
      padding-top: calc(1.1rem + env(safe-area-inset-top));
    }
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-glow, .scroll-hint span { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  #wheel-svg { transition: none !important; }
}