/* ───────────────────────────────────────────────────────────────
   Evelyn's card — built from Charlotte's crayon drawing.
   Every colour is sampled from the rainbow she drew last year:
   red on the outside, navy in the middle, pink hearts either side.
   ─────────────────────────────────────────────────────────────── */

:root {
  --red:    #e8442e;
  --orange: #f5872b;
  --yellow: #f5c018;
  --green:  #35a94b;
  --blue:   #2e8bd6;
  --navy:   #23368c;
  --heart:  #ff5c9e;

  --paper:  #fffdf7;
  --ink:    #3a3742;
  --pencil: #7c7688;
  --wall-1: #f7efe2;
  --wall-2: #e6eef5;

  --hand: "Shantell Sans", "Comic Sans MS", cursive;
  --pen:  "Caveat", cursive;
  --ui:   "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --lift: 0 1px 2px rgba(58,55,66,.06), 0 12px 28px -12px rgba(58,55,66,.28);
  --ease: cubic-bezier(.22,.9,.3,1);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--ui);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--wall-2) 0%, transparent 62%),
    linear-gradient(178deg, var(--wall-1), #f1e7d8);
  background-attachment: fixed;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.defs { position: absolute; width: 0; height: 0; }

/* Shared crayon-shape fills, so the SVGs stay free of presentation attributes. */
.ink-line   { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ink-fill   { fill: var(--paper); }
.heart-fill { fill: var(--heart); }
.tier-fill  { fill: #ffe9c9; }
.tier-fill--alt { fill: #ffd9b0; }
.dot        { fill: var(--band); }
.icing      { fill: #fff3dd; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }

/* ═══════════  layout  ═══════════ */

.stage {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}

.scene { width: 100%; max-width: 460px; text-align: center; }
.scene[hidden] { display: none; }

#confetti {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
}

/* ═══════════  the envelope  ═══════════ */

.stamp {
  font-family: var(--pen);
  font-size: 22px;
  color: var(--pencil);
  letter-spacing: .04em;
  margin: 0 0 22px;
  transform: rotate(-2deg);
}

.envelope {
  position: relative;
  display: block;
  width: min(100%, 340px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 18px 24px rgba(58,55,66,.18));
  transition: transform .5s var(--ease);
  animation: breathe 5s ease-in-out infinite;
}
.envelope:hover, .envelope:focus-visible { transform: translateY(-6px) rotate(-1deg); }
.envelope__paper { display: block; width: 100%; height: auto; }

.envelope__name {
  position: absolute;
  left: 0; right: 0; top: 62%;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(30px, 9vw, 40px);
  color: var(--navy);
  transform: rotate(-2deg);
  pointer-events: none;
}

.envelope__heart {
  position: absolute;
  left: 50%; top: 47%;
  width: 46px;
  translate: -50% -50%;
  rotate: -6deg;
  pointer-events: none;
}
.envelope__heart svg { display: block; width: 100%; }

@keyframes breathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

.hint {
  margin: 26px 0 0;
  font-family: var(--pen);
  font-size: 24px;
  color: var(--pencil);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

.scene--envelope.is-leaving { animation: send-off .55s var(--ease) forwards; }
@keyframes send-off {
  to { opacity: 0; transform: translateY(-28px) scale(.94); }
}

/* ═══════════  the card  ═══════════ */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(460px, 74dvh, 640px);
  background: var(--paper);
  border-radius: 4px;
  /* the deep bottom padding is the pager's lane — content never runs into it */
  padding: clamp(22px, 6vw, 32px) clamp(18px, 5vw, 30px) 96px;
  box-shadow: var(--lift);
  text-align: center;
  cursor: pointer;
  /* torn-from-a-pad top edge */
  clip-path: polygon(0 6px, 3% 2px, 7% 7px, 12% 1px, 18% 6px, 24% 2px, 31% 7px,
                     38% 2px, 45% 6px, 52% 1px, 60% 6px, 68% 2px, 76% 7px,
                     84% 2px, 92% 6px, 97% 2px, 100% 6px, 100% 100%, 0 100%);
  animation: card-in .6s var(--ease) both;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
}

/* one page at a time */

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page[hidden] { display: none; }

.page.turn-in   { animation: turn-in .42s var(--ease) both; }
.page.turn-back { animation: turn-back .42s var(--ease) both; }
@keyframes turn-in {
  from { opacity: 0; transform: translateX(26px); }
}
@keyframes turn-back {
  from { opacity: 0; transform: translateX(-26px); }
}

/* ═══════════  page 1 · rainbow and candles  ═══════════ */

.rainbow { position: relative; margin: 0 auto 4px; max-width: 400px; width: 100%; }
.rainbow svg { display: block; width: 100%; height: auto; overflow: visible; }

.band {
  stroke: var(--band);
  stroke-width: 18;
  stroke-dasharray: var(--len, 560);
  stroke-dashoffset: var(--len, 560);
}
.is-drawing .band {
  animation: draw 900ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 170ms);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.doodle {
  position: absolute;
  bottom: 6%;
  width: 26px;
  opacity: 0;
  scale: .4;
}
.doodle svg { display: block; width: 100%; }
.doodle--l { left: -2%;  rotate: -14deg; }
.doodle--r { right: -2%; rotate: 12deg; }
.is-drawing .doodle { animation: pop-in .5s var(--ease) 1.25s forwards; }
@keyframes pop-in {
  60%  { opacity: 1; scale: 1.18; }
  100% { opacity: 1; scale: 1; }
}

/* The cake stands on the rainbow's baseline, candles reaching into the arch.
   The negative margin is exactly the candle stack's height. */
.cake {
  position: relative;
  width: min(70%, 244px);
  margin: -44px auto 0;
  padding-top: 44px;
}
.cake__body { display: block; width: 100%; height: auto; overflow: visible; }

.cake__candles {
  position: absolute;
  left: 0; right: 0; top: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.candle {
  position: relative;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--heart);
  cursor: pointer;
  transition: transform .2s var(--ease);
  -webkit-user-select: none; user-select: none;
}
.candle:hover { transform: translateY(-2px); }

.flame {
  position: absolute;
  left: 50%; top: -22px;
  width: 15px; height: 22px;
  translate: -50% 0;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: radial-gradient(ellipse at 50% 75%, #fff6c9 0%, var(--yellow) 38%, var(--orange) 70%, var(--red) 100%);
  box-shadow: 0 0 18px 5px rgba(245,192,24,.5);
  transform-origin: 50% 100%;
  animation: flicker 320ms ease-in-out infinite alternate;
}
@keyframes flicker {
  from { transform: scale(1) rotate(-3deg);        opacity: .92; }
  to   { transform: scale(1.12, .94) rotate(3deg); opacity: 1; }
}

.smoke {
  position: absolute;
  left: 50%; top: -20px;
  width: 8px; height: 8px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--pencil);
  opacity: 0;
}

.is-out .flame { animation: snuff .28s var(--ease) forwards; }
@keyframes snuff { to { transform: scale(.1) translateY(6px); opacity: 0; } }

.is-out .smoke { animation: wisp 1.6s ease-out .12s forwards; }
@keyframes wisp {
  0%   { opacity: .45; transform: translateY(0) scale(.6); }
  100% { opacity: 0;   transform: translateY(-52px) scale(2.4); }
}

.prompt { margin-top: 22px; }
.prompt[hidden] { display: none; }

.prompt__text {
  font-family: var(--hand);
  font-size: 21px;
  margin: 0 0 14px;
}

.prompt__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.prompt__note {
  min-height: 1.2em;
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--pencil);
}

/* ═══════════  the written pages  ═══════════ */

.eyebrow {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0 0 8px;
}

.card__title {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(30px, 8.5vw, 42px);
  line-height: 1.1;
  margin: 0;
}
.card__title em {
  font-style: normal;
  color: var(--red);
  font-size: 1.28em;
  display: inline-block;
  rotate: -2deg;
}
.card__title--small { font-size: clamp(26px, 7vw, 34px); }

.lede {
  font-family: var(--hand);
  font-size: 17px;
  color: var(--pencil);
  margin: 24px 0 0;
}

.letter {
  font-family: var(--hand);
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  max-width: 32ch;
  margin: 0 auto;
  text-wrap: pretty;
}
.letter p { margin: 0 0 14px; }
.letter p:last-child { margin-bottom: 0; }

/* The English sits quieter and smaller — it serves the Tagalog, not the
   other way round. */
.translation {
  max-width: 32ch;
  margin: 22px auto 0;
  padding-top: 18px;
  border-top: 1px dashed #ded5c6;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  color: var(--pencil);
}
.translation p { margin: 0 0 10px; }
.translation p:last-child { margin-bottom: 0; }

.translation__label {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b0a89c;
  margin: 0 0 8px !important;
}

.signature {
  font-family: var(--pen);
  font-size: 40px;
  color: var(--navy);
  margin: 22px 0 0;
  rotate: -3deg;
}

/* ═══════════  photos  ═══════════ */

.photos[hidden] { display: none; }

/* A grid, not a wrapping flex row — two columns hold whatever the tilt does
   to each photo's painted width. */
.photos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 14px;
  padding: 12px 6px;
}

.snap {
  position: relative;
  margin: 0;
  padding: 8px 8px 26px;
  background: #fff;
  box-shadow: var(--lift);
  rotate: var(--tilt, 0deg);
  transition: transform .25s var(--ease), rotate .25s var(--ease);
}
.snap:hover { transform: translateY(-5px); rotate: 0deg; }
.snap img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #efe9df;
}
.snap::before {                    /* strip of tape */
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 48px; height: 16px;
  translate: -50% 0;
  rotate: var(--tape, -3deg);
  background: rgba(255,231,168,.72);
  box-shadow: 0 1px 2px rgba(58,55,66,.14);
}

.photos__empty {
  font-family: var(--hand);
  color: var(--pencil);
  font-size: 16px;
}
.photos__empty[hidden] { display: none; }

/* ═══════════  presents  ═══════════ */

.wrap      { fill: var(--band); }
/* lid, ribbon and bow share one colour so they read as a single ribbon
   tied round the box, not as three more stripes */
.ribbon    { fill: var(--heart); }
.lid-fill  { fill: var(--heart); }

/* The one place the card raises its voice — so nothing else on the page does. */
.shout {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(38px, 12vw, 56px);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
  rotate: -3deg;
}

.present {
  display: block;
  width: min(60%, 190px);
  margin: 40px auto 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: jiggle 2.6s ease-in-out infinite;
}
.present svg { display: block; width: 100%; height: auto; overflow: visible; }

@keyframes jiggle {
  0%, 88%, 100% { rotate: 0deg; }
  91%  { rotate: -3.5deg; }
  94%  { rotate: 3.5deg; }
  97%  { rotate: -2deg; }
}

.present__lid { transition: transform .5s var(--ease); transform-origin: 50% 100%; }
.present.is-open { animation: none; }
.present.is-open .present__lid { transform: translateY(-44px) rotate(-12deg); }
.present.is-open .present__box { animation: shake .4s var(--ease); }
@keyframes shake {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.present__hint {
  font-family: var(--pen);
  font-size: 19px;
  color: var(--pencil);
  margin: 20px 0 0;
  animation: pulse 2.4s ease-in-out infinite;
}

/* ═══════════  last page  ═══════════ */

.page--end { gap: 4px; }
.end-heart { width: 44px; margin: 0 auto 18px; }
.end-heart svg { display: block; width: 100%; }
.end-actions { margin-top: 30px; }

/* ═══════════  buttons and paging  ═══════════ */

.btn {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s, color .18s;
}
.btn:active { transform: scale(.96); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: #d63a26; }
.btn--ghost { background: transparent; color: var(--pencil); border-color: #ded5c6; }
.btn--ghost:hover { color: var(--ink); border-color: var(--pencil); }
.btn[hidden] { display: none; }

.pager {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.pager[hidden] { display: none; }

.pager__arrow {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--pencil);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .18s, opacity .18s;
}
.pager__arrow:hover:not(:disabled) { color: var(--ink); }
.pager__arrow:disabled { opacity: .22; cursor: default; }

.pager__dots { display: flex; gap: 8px; }

.dot-btn {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ddd4c5;
  cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease);
}
.dot-btn.is-on { background: var(--red); transform: scale(1.35); }

.turn-hint {
  position: absolute;
  left: 0; right: 0; bottom: 60px;
  margin: 0;
  font-family: var(--pen);
  font-size: 17px;
  color: var(--pencil);
  opacity: .7;
  animation: pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
.turn-hint[hidden] { display: none; }

/* ═══════════  sound toggle  ═══════════ */

.sound {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--pencil);
  background: rgba(255,253,247,.9);
  border: 1px solid #e4dccd;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color .2s, border-color .2s;
}
.sound:hover { color: var(--ink); }
.sound[aria-pressed="true"] { color: var(--red); border-color: currentColor; }
.sound__icon { font-size: 15px; }

/* ═══════════  focus, motion, small screens  ═══════════ */

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 380px) {
  .candle { font-size: 38px; }
  .letter { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .band { stroke-dashoffset: 0; }
  .doodle { opacity: 1; scale: 1; }
}