/* leona.ee — values from design_handoff_leona_wishes/README.md.
   Mobile-first: base rules are the phone spec, the 768px query is desktop. */

:root {
  --plum: #2A1259;
  --violet: #4B1E8C;
  --cream: #FFF6E9;
  --cream-warm: #FFE9C9;
  --sun: #FFD93D;
  --pink: #FF5FA2;
  --pink-light: #FF8FC0;
  --magenta: #C81D6B;
  --teal: #0E7C7B;
  --mint: #7BE0AD;
  --sky: #8FD4FF;
  --purple-muted: #5B2E7E;

  --display: 'Fredoka', system-ui, sans-serif;
  --body: 'Baloo 2', system-ui, sans-serif;
}

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

html { background: var(--plum); }

body {
  margin: 0;
  background: var(--plum);
  color: var(--cream);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 20% 8%, var(--violet) 0%, transparent 55%),
    radial-gradient(circle at 90% 4%, var(--teal) 0%, transparent 45%),
    radial-gradient(circle at 50% 105%, var(--magenta) 0%, transparent 55%),
    var(--plum);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding:
    calc(10px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right))
    10px
    calc(14px + env(safe-area-inset-left));
  background: var(--cream);
  color: var(--plum);
  border-bottom: 4px solid var(--plum);
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--plum); }

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pink);
  border: 3px solid var(--plum);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font: 700 14px/1 var(--display);
}

.brand-name { font: 700 18px/1 var(--display); letter-spacing: .2px; }

.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }

.pill {
  font: 700 13px var(--body);
  color: var(--plum);
  border: 2.5px solid var(--plum);
  border-radius: 999px;
  padding: 7px 10px;
  box-shadow: 2px 2px 0 var(--plum);
  white-space: nowrap;
}
.pill--sun { background: var(--sun); }
.pill--mint { background: var(--mint); }
.pill:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* The narrowest phones cannot fit the wordmark and two pills; the L stays. */
@media (max-width: 339px) {
  .brand-name { display: none; }
}

/* ---------- Marquee ---------- */

.marquee {
  background: var(--sun);
  color: var(--plum);
  border-bottom: 4px solid var(--plum);
  overflow: hidden;
  white-space: nowrap;
  font: 600 11px var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.marquee-track {
  display: inline-block;
  padding: 6px 0;
  animation: marquee 16s linear infinite;
}
.marquee-track span { padding: 0 14px; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Hero ---------- */

.hero {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 26px 18px 42px;
  text-align: center;
}
.hero > :not(.confetti) { position: relative; z-index: 2; }

.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* `rotate` (not transform) so the bob animation's transform does not wipe it. */
.confetti span {
  position: absolute;
  opacity: .5;
  animation: bob 5s ease-in-out infinite;
}

.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sun);
  color: var(--plum);
  border: 4px solid var(--plum);
  border-radius: 22px;
  padding: 10px 18px;
  box-shadow: 6px 6px 0 var(--magenta);
  transform: rotate(-1.5deg);
}
.badge-num { font: 700 40px/1 var(--display); }
.badge-text {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 16ch;
}
.badge-text span { font-weight: 600; color: var(--purple-muted); }

.headline {
  margin: 0;
  font: 700 36px/1 var(--display);
  max-width: 13ch;
  text-wrap: balance;
  color: var(--cream);
  text-shadow: 3px 3px 0 var(--magenta), 6px 6px 0 rgba(14, 124, 123, .75);
}
.headline em { font-style: normal; color: var(--sun); }

.lede {
  margin: 0;
  max-width: 30ch;
  font: 500 14px/1.5 var(--body);
  color: var(--cream-warm);
  text-wrap: pretty;
}

/* ---------- Button, rings, floaters ---------- */

.wish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
}

.wish-target {
  position: relative;
  width: 230px;
  height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* opacity 0 at rest hides the delayed ring until its animation starts. */
.ring {
  --ring-scale: 1.5;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--mint);
  opacity: 0;
  animation: pulse-ring 2.4s ease-out infinite;
}
.ring--late { border-color: var(--pink); animation-delay: 1.2s; }

@keyframes pulse-ring {
  from { transform: scale(1); opacity: .55; }
  to { transform: scale(var(--ring-scale)); opacity: 0; }
}

.wish-button {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid var(--plum);
  background: radial-gradient(circle at 32% 28%, var(--pink-light) 0%, var(--pink) 45%, var(--magenta) 100%);
  color: var(--cream);
  font: 700 21px/1.1 var(--display);
  letter-spacing: .005em;
  padding: 0 22px;
  cursor: pointer;
  text-shadow: 0 2px 0 rgba(42, 18, 89, .4);
  box-shadow: 0 9px 0 var(--plum), 0 10px 24px rgba(0, 0, 0, .35);
  transition: transform .1s ease, box-shadow .1s ease;
  touch-action: manipulation; /* no double-tap zoom while mashing */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.wish-button:active {
  transform: translateY(7px);
  box-shadow: 0 3px 0 var(--plum), 0 4px 12px rgba(0, 0, 0, .35);
}
.wish-button:focus-visible { outline: 4px solid var(--sun); outline-offset: 8px; }

.floaters {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.floater {
  --rise: -150px;
  --grow: 1.5;
  --spin: 20deg;
  position: absolute;
  top: 0;
  font-size: 28px;
  animation: float-up 1.1s ease-out forwards;
}

@keyframes float-up {
  from { opacity: 1; transform: translate(-50%, 0) scale(.6) rotate(0deg); }
  to { opacity: 0; transform: translate(-50%, var(--rise)) scale(var(--grow)) rotate(var(--spin)); }
}

/* ---------- Counter ---------- */

.counter {
  --bob: -7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  color: var(--plum);
  border: 4px solid var(--plum);
  border-radius: 26px;
  padding: 14px 32px;
  box-shadow: 6px 6px 0 var(--teal);
  animation: bob 4s ease-in-out infinite;
}
.counter-num { font: 700 52px/1 var(--display); color: var(--magenta); }
.counter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@keyframes bob { 50% { transform: translateY(var(--bob, -9px)); } }

/* ---------- Desktop ---------- */

@media (min-width: 768px) {
  .page {
    background:
      radial-gradient(circle at 15% 10%, var(--violet) 0%, transparent 55%),
      radial-gradient(circle at 85% 0%, var(--teal) 0%, transparent 50%),
      radial-gradient(circle at 50% 110%, var(--magenta) 0%, transparent 60%),
      var(--plum);
  }

  .nav {
    gap: 28px;
    padding: calc(14px + env(safe-area-inset-top)) 28px 14px;
    box-shadow: 0 6px 0 rgba(255, 95, 162, .55);
  }
  .brand-mark { width: 34px; height: 34px; font-size: 17px; }
  .brand-name { font-size: 21px; }
  .nav-links { gap: 10px; }
  .pill { font-size: 14px; padding: 6px 15px; box-shadow: 3px 3px 0 var(--plum); }

  .marquee { font-size: 14px; }
  .marquee-track { padding: 8px 0; animation-duration: 22s; }
  .marquee-track span { padding: 0 22px; }

  .hero { gap: 30px; padding: 56px 24px 90px; }

  .badge {
    gap: 16px;
    border-width: 5px;
    border-radius: 28px;
    padding: 12px 26px;
    box-shadow: 8px 8px 0 var(--magenta);
  }
  .badge-num { font-size: 56px; }
  .badge-text { font-size: 15px; }

  .headline {
    font-size: clamp(46px, 8.5vw, 104px);
    line-height: .98;
    max-width: 15ch;
    text-shadow: 5px 5px 0 var(--magenta), 10px 10px 0 rgba(14, 124, 123, .75);
  }

  .lede { max-width: 44ch; font-size: 18px; line-height: 1.55; }

  .wish { gap: 26px; }
  .wish-target { width: 280px; height: 280px; }
  .ring { --ring-scale: 1.55; border-width: 4px; }

  .wish-button {
    width: 244px;
    height: 244px;
    border-width: 5px;
    font-size: 26px;
    padding: 0 30px;
    box-shadow: 0 12px 0 var(--plum), 0 12px 30px rgba(0, 0, 0, .35);
  }
  .wish-button:active {
    transform: translateY(9px);
    box-shadow: 0 3px 0 var(--plum), 0 4px 12px rgba(0, 0, 0, .35);
  }

  .floaters { top: 120px; }
  .floater { --rise: -180px; --grow: 1.6; --spin: 25deg; font-size: 34px; }

  .counter {
    --bob: -9px;
    border-width: 5px;
    border-radius: 34px;
    padding: 20px 44px;
    box-shadow: 9px 9px 0 var(--teal);
  }
  .counter-num { font-size: clamp(54px, 10vw, 104px); }
  .counter-label { font-size: 14px; }
}

/* Hover only where a real pointer hovers; declared after :active above would
   let hover win mid-press, so :active is repeated after it. */
@media (min-width: 768px) and (hover: hover) {
  .wish-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 0 var(--plum), 0 20px 34px rgba(0, 0, 0, .4);
  }
  .wish-button:active {
    transform: translateY(9px);
    box-shadow: 0 3px 0 var(--plum), 0 4px 12px rgba(0, 0, 0, .35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .ring,
  .counter,
  .confetti span { animation: none; }
}