/* =========================================================================
   Koneval's Kones — Coming Soon
   Palette: strawberry-milk ground, vanilla surface, cocoa ink,
            mint + butterscotch accents.
   ========================================================================= */

@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fredoka-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fredoka-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fredoka-700.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-400.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-600.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nunito-700.woff2") format("woff2");
}

:root {
  --berry:   #F0568C;
  --berry-d: #D63C74;
  --mint:    #5FC9A6;
  --butter:  #FFC24B;
  --waffle:  #E7A85C;
  --waffle-d:#C4863B;
  --cream:   #FFF7EF;
  --cocoa:   #43291B;
  --cocoa-soft: #6E5442;
  --pink-bg: #FFE1E9;

  --radius: 28px;
  --ring: 0 0 0 3px rgba(240, 86, 140, .45);
  --shadow: 0 24px 60px -22px rgba(120, 40, 70, .45);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--cocoa);
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 194, 75, .28), transparent 42%),
    radial-gradient(circle at 85% 12%, rgba(95, 201, 166, .28), transparent 40%),
    radial-gradient(circle at 50% 120%, rgba(240, 86, 140, .30), transparent 55%),
    var(--pink-bg);
  background-attachment: fixed;
  min-height: 100vh;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.card {
  width: min(560px, 100%);
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3rem) clamp(1.75rem, 5vw, 2.5rem);
  text-align: center;
}

/* --- Badge ------------------------------------------------------------- */
.badge {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .3rem .85rem;
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--cream);
  background: var(--berry);
  border-radius: 999px;
}

/* --- Cone hero --------------------------------------------------------- */
.cone {
  width: clamp(150px, 40vw, 200px);
  height: auto;
  margin: .25rem auto .75rem;
  display: block;
  overflow: visible;
}

.cone__waffle { fill: var(--waffle); stroke: var(--waffle-d); stroke-width: 2; }
.cone__hatch  { stroke: var(--waffle-d); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.scoop--berry   { fill: var(--berry); }
.scoop--mint    { fill: var(--mint); }
.scoop--vanilla { fill: var(--butter); }
.cherry      { fill: var(--berry-d); }
.cherry__stem { fill: none; stroke: #4d7c3f; stroke-width: 3; stroke-linecap: round; }

/* --- Type -------------------------------------------------------------- */
.headline {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 6.5vw, 2.9rem);
  line-height: 1.05;
  margin: .25rem 0 .35rem;
  color: var(--cocoa);
}

.brand {
  font-family: "Fredoka", sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 3.5vw, 1.35rem);
  color: var(--berry-d);
  margin: 0 0 .9rem;
}

.lede {
  max-width: 40ch;
  margin: 0 auto 1.5rem;
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  line-height: 1.55;
  color: var(--cocoa-soft);
}

/* --- Countdown --------------------------------------------------------- */
.countdown {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin: 0 0 1.6rem;
}
.countdown__unit {
  min-width: 60px;
  padding: .55rem .3rem;
  background: var(--pink-bg);
  border-radius: 16px;
}
.countdown__num {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--cocoa);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-size: .72rem;
  color: var(--cocoa-soft);
}

/* --- Footer ------------------------------------------------------------ */
.foot {
  margin-top: 1.75rem;
  font-size: .88rem;
  color: var(--cocoa-soft);
}
.foot p { margin: .25rem 0; }

.socials {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

.link {
  color: var(--berry-d);
  text-decoration: none;
  border-bottom: 2px solid rgba(214, 60, 116, .3);
}
.link:hover { border-bottom-color: var(--berry-d); }
.link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 3px; }

/* =========================================================================
   Load reveal — one orchestrated moment. JS adds .is-ready to <body>.
   ========================================================================= */
.card > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.scoop, .cherry, .cherry__stem {
  opacity: 0;
  transform: translateY(-18px) scale(.6);
  transform-origin: center;
  transition: opacity .45s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.is-ready .card > * { opacity: 1; transform: none; }
.is-ready .card > *:nth-child(2) { transition-delay: .05s; }
.is-ready .card > *:nth-child(3) { transition-delay: .28s; }
.is-ready .card > *:nth-child(4) { transition-delay: .34s; }
.is-ready .card > *:nth-child(n+5) { transition-delay: .4s; }

.is-ready .scoop, .is-ready .cherry, .is-ready .cherry__stem {
  opacity: 1;
  transform: none;
}
.is-ready .scoop--berry   { transition-delay: .1s; }
.is-ready .scoop--mint    { transition-delay: .2s; }
.is-ready .scoop--vanilla { transition-delay: .3s; }
.is-ready .cherry__stem   { transition-delay: .42s; }
.is-ready .cherry         { transition-delay: .46s; }

/* =========================================================================
   Accessibility: honor reduced-motion — show everything, no movement.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .card > *, .scoop, .cherry, .cherry__stem {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .notify__btn { transition: none; }
}