/* ==========================================================================
   base.css — Gigi's disco birthday card
   Owns: reset, palette, typography, #intro, #message-modal, and the
   SKIN (colors/type/borders) of #headline, #hud, #tap-hint.
   scene.css owns the LAYOUT/positioning/animation of every #scene layer
   (incl. #headline, #hud, #tap-hint, #frank-mount) plus the dance floor,
   lights, balloons, disco ball, and confetti canvas.
   Beat: 116 BPM -> 1 beat ~= 0.517s. Loops here run at 1.034s / 2.068s
   so everything pulses on the music.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Quicksand:wght@500;700&display=swap');

/* ------------------------------------------------------------------ tokens */

:root {
  --night: #17103a;
  --pink: #ff4fa3;
  --gold: #ffcf5c;
  --aqua: #4fd8eb;
  --purple: #8b5cf6;
  --cream: #fff3e0;
  --ink: #3a2a1e;

  --font-display: 'Shrikhand', 'Chalkboard SE', 'Marker Felt', 'Comic Sans MS', cursive;
  --font-body: 'Quicksand', 'Avenir Next', 'Trebuchet MS', 'Verdana', sans-serif;
  --font-hand: 'Bradley Hand', 'Marker Felt', 'Chalkboard SE', 'Comic Sans MS', cursive;

  /* wobbly hand-drawn border trick */
  --wobble-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --wobble-b: 225px 15px 255px 15px / 15px 255px 15px 225px;

  --beat-2: 1.034s; /* two beats  @ 116 BPM */
  --beat-4: 2.068s; /* four beats @ 116 BPM */
}

/* ------------------------------------------------------------------- reset */

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

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cream);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

button:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------- intro */

#intro {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background:
    radial-gradient(circle at 50% 118%, rgba(139, 92, 246, 0.38), rgba(139, 92, 246, 0) 55%),
    radial-gradient(circle at 82% -8%, rgba(79, 216, 235, 0.18), rgba(79, 216, 235, 0) 45%),
    radial-gradient(circle at 50% 0%, #261b5e, var(--night) 78%);
  transition: opacity 0.55s ease;
}

/* two layers of stars twinkling in counter-phase */
#intro::before,
#intro::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

#intro::before {
  background-image:
    radial-gradient(2px 2px at 11% 16%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(1.6px 1.6px at 27% 7%, rgba(255, 243, 224, 0.85) 40%, rgba(255, 243, 224, 0) 100%),
    radial-gradient(2.4px 2.4px at 68% 12%, rgba(255, 207, 92, 0.9) 40%, rgba(255, 207, 92, 0) 100%),
    radial-gradient(1.6px 1.6px at 87% 24%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(2px 2px at 8% 62%, rgba(79, 216, 235, 0.8) 40%, rgba(79, 216, 235, 0) 100%),
    radial-gradient(1.6px 1.6px at 46% 84%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(2.2px 2.2px at 91% 71%, rgba(255, 79, 163, 0.8) 40%, rgba(255, 79, 163, 0) 100%),
    radial-gradient(1.6px 1.6px at 71% 90%, rgba(255, 243, 224, 0.75) 40%, rgba(255, 243, 224, 0) 100%);
  animation: star-twinkle var(--beat-4) ease-in-out infinite;
}

#intro::after {
  background-image:
    radial-gradient(1.6px 1.6px at 19% 34%, rgba(255, 243, 224, 0.85) 40%, rgba(255, 243, 224, 0) 100%),
    radial-gradient(2.2px 2.2px at 39% 14%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(1.6px 1.6px at 57% 6%, rgba(255, 207, 92, 0.85) 40%, rgba(255, 207, 92, 0) 100%),
    radial-gradient(2px 2px at 79% 42%, rgba(79, 216, 235, 0.75) 40%, rgba(79, 216, 235, 0) 100%),
    radial-gradient(1.6px 1.6px at 14% 86%, rgba(255, 255, 255, 0.75) 40%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(2.2px 2.2px at 31% 68%, rgba(255, 79, 163, 0.7) 40%, rgba(255, 79, 163, 0) 100%),
    radial-gradient(1.6px 1.6px at 62% 74%, rgba(255, 243, 224, 0.8) 40%, rgba(255, 243, 224, 0) 100%),
    radial-gradient(2px 2px at 94% 88%, rgba(255, 207, 92, 0.8) 40%, rgba(255, 207, 92, 0) 100%);
  animation: star-twinkle var(--beat-4) ease-in-out infinite;
  animation-delay: calc(var(--beat-4) / -2);
}

@keyframes star-twinkle {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* the handmade card */
.envelope {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 42px 26px 36px;
  text-align: center;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--wobble-a);
  box-shadow:
    0 5px 0 rgba(58, 42, 30, 0.85),
    0 22px 55px rgba(0, 0, 0, 0.5);
  transform: rotate(-1.5deg);
  transition: transform 0.55s ease, opacity 0.55s ease;
}

/* slightly offset second stroke, like a pen that went around twice */
.envelope::before {
  content: '';
  position: absolute;
  top: 7px;
  right: -6px;
  bottom: -8px;
  left: 6px;
  border: 2px solid rgba(58, 42, 30, 0.4);
  border-radius: var(--wobble-b);
  pointer-events: none;
}

.intro-kicker {
  margin-bottom: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #c72a72; /* deep pink — AA contrast on cream for older eyes */
}

.intro-title {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 7.5vw, 2.4rem);
  line-height: 1.18;
}

.intro-frank {
  color: var(--pink);
  text-shadow: 2px 2px 0 var(--gold);
}

#open-card {
  display: inline-block;
  min-height: 56px;
  padding: 14px 34px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(58, 42, 30, 0.45);
  background: #e0197f; /* deeper pink — white text clears AA */
  border: 3px solid var(--ink);
  border-radius: 205px 16px 225px 14px / 16px 225px 14px 205px;
  box-shadow:
    0 5px 0 var(--ink),
    0 16px 30px rgba(255, 79, 163, 0.4);
  animation: open-pulse var(--beat-4) ease-in-out infinite;
  transition: box-shadow 0.12s ease;
}

@keyframes open-pulse {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

#open-card:active {
  animation: none;
  transform: translateY(4px) scale(0.98);
  box-shadow:
    0 1px 0 var(--ink),
    0 6px 14px rgba(255, 79, 163, 0.3);
}

#open-card:disabled {
  animation: none;
  opacity: 0.75;
  cursor: default;
}

.intro-hint {
  margin-top: 16px;
  font-size: 1rem;
  font-style: italic;
  color: rgba(58, 42, 30, 0.8);
}

/* main.js adds this class, then flips [hidden] once faded */
#intro.intro-leaving {
  opacity: 0;
  pointer-events: none;
}

#intro.intro-leaving .envelope {
  opacity: 0;
  transform: rotate(2deg) scale(1.08) translateY(-18px);
}

/* ------------------------------------------------- headline (skin only) */
/* Positioning/tilt of #headline lives in scene.css. */

/* soft dark glow so the type stays legible over the party */
#headline::before {
  content: '';
  position: absolute;
  top: -22px;
  right: -10%;
  bottom: -14px;
  left: -10%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 45%, rgba(23, 16, 58, 0.8), rgba(23, 16, 58, 0) 70%);
}

.headline-main {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 10vw, 4.2rem);
  line-height: 1.05;
  color: var(--gold);
  /* em offsets so the sticker depth scales with the fluid type size */
  text-shadow:
    0.05em 0.05em 0 var(--pink),
    0.1em 0.1em 0 var(--purple),
    0.17em 0.17em 0 rgba(23, 16, 58, 0.55),
    0 0.3em 0.85em rgba(0, 0, 0, 0.5);
}

.headline-sub {
  margin-top: 8px;
  font-size: clamp(0.95rem, 3.8vw, 1.25rem);
  font-style: italic;
  font-weight: 700;
  color: var(--cream);
  text-shadow:
    0 1px 2px rgba(23, 16, 58, 0.95),
    0 4px 14px rgba(23, 16, 58, 0.9);
}

/* --------------------------------------------------------- hud (skin only) */
/* #hud layout/positioning lives in scene.css. */

#hud button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
  background: rgba(30, 21, 66, 0.92); /* solid fallback */
  border: 2px solid rgba(255, 243, 224, 0.28);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, border-color 0.2s ease;
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  #hud button {
    background: rgba(30, 21, 66, 0.55);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
  }
}

#hud button:active {
  transform: scale(0.94);
  border-color: rgba(255, 207, 92, 0.6);
}

#mute-btn {
  padding: 10px 14px;
  font-size: 1.15rem;
}

/* ---------------------------------------------------- tap hint (skin only) */
/* #tap-hint positioning/tilt/pulse lives in scene.css. */

#tap-hint {
  padding: 9px 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 95px 12px 110px 10px / 12px 110px 10px 95px;
  box-shadow:
    0 4px 0 rgba(58, 42, 30, 0.35),
    0 12px 26px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------- the note */

#message-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  height: 100vh;
  height: 100dvh;
  display: flex;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 8, 32, 0.75); /* solid-ish fallback */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  #message-modal {
    background: rgba(12, 8, 32, 0.58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.note {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin: auto; /* centers when short, scrolls when tall */
  padding: 38px 26px 30px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: var(--wobble-a);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: rotate(-0.6deg);
}

.note::before {
  content: '';
  position: absolute;
  top: 8px;
  right: -6px;
  bottom: -8px;
  left: 6px;
  border: 2px solid rgba(58, 42, 30, 0.4);
  border-radius: var(--wobble-b);
  pointer-events: none;
}

.note h3 {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--pink);
  text-shadow: 1.5px 1.5px 0 var(--gold);
}

.note p {
  margin-bottom: 12px;
}

.note .note-sign {
  margin-top: 18px;
  margin-bottom: 0;
  font-weight: 700;
}

#close-message {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
  box-shadow: 0 3px 0 var(--ink);
}

#close-message:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.polaroid {
  width: 250px;
  max-width: 82%;
  margin: 24px auto 4px;
  padding: 10px 10px 14px; /* thick white instant-photo frame */
  background: #fff;
  border: 1px solid rgba(58, 42, 30, 0.18);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
  transform: rotate(2.4deg);
}

.polaroid img {
  width: 100%;
  border: 1px solid rgba(58, 42, 30, 0.15);
}

.polaroid figcaption {
  padding-top: 10px;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  text-align: center;
  color: rgba(58, 42, 30, 0.85);
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 360px) {
  .envelope {
    padding: 32px 18px 30px;
  }

  .intro-title {
    font-size: 1.55rem;
  }

  .note {
    padding: 32px 18px 26px;
  }

  #hud button {
    /* keep the 1rem type — reclaim space with padding instead */
    padding: 10px 12px;
  }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  #intro::before,
  #intro::after,
  #open-card {
    animation: none !important;
  }

  #intro,
  .envelope {
    transition-duration: 0.01s;
  }
}