/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- app bar ---------- */
.appbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(18,52,59,.07);
}
.appbar__inner{
  height:var(--appbar-h);
  width:min(100% - 24px, 1080px); margin-inline:auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
}
.appbar__title{
  font-size:1rem; font-weight:700; text-align:center; letter-spacing:.01em;
}
.btn-ghost{
  justify-self:start;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border-radius:999px;
  border:1.5px solid rgba(18,52,59,.16);
  font-size:.9rem; font-weight:600;
  transition:background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.btn-ghost:hover{ background:#f1f6f4; border-color:rgba(18,52,59,.3); transform:translateX(-2px); }
.icon{ width:18px; height:18px; }

.btn-primary{
  justify-self:end;
  display:inline-block; padding:11px 20px; border-radius:12px;
  background:var(--purple); color:#fff; font-weight:700; font-size:.92rem;
  box-shadow:0 6px 18px rgba(109,93,246,.32);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 10px 24px rgba(109,93,246,.4); }
.btn-primary:active{ transform:translateY(0); }

/* ---------- intro / envelope ---------- */
.intro{
  position:fixed; inset:0; z-index:80;
  display:grid; place-content:center; gap:26px;
  padding:24px;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/46px 46px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/46px 46px,
    radial-gradient(110% 70% at 50% 10%, #f4faf7, var(--bg-deep));
  transition:opacity .6s var(--ease), visibility .6s;
}
.intro.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.no-js .intro{ display:none; }
.intro__hit{ position:absolute; inset:0; width:100%; height:100%; }
.intro__cta{
  text-align:center; font-size:.78rem; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase; color:#9ab5ad;
  animation:pulseSoft 2.4s ease-in-out infinite;
}

.envelope{ position:relative; width:min(88vw,340px); margin-inline:auto; pointer-events:none; }
.envelope__letter{
  position:relative; z-index:3;
  background:#fff; border-radius:6px; padding:26px 20px 34px;
  box-shadow:var(--shadow-md);
  transform:translateY(-46px) rotate(-.6deg);
  transition:transform .8s var(--ease), opacity .5s var(--ease);
}
.envelope__body{
  position:relative; z-index:2;
  height:150px; border-radius:14px;
  background:var(--teal-soft);
  border:2.5px solid #6ea79a;
  box-shadow:var(--shadow-md);
  overflow:visible;
}
.envelope__body::before,
.envelope__body::after{
  content:""; position:absolute; inset:0; border-radius:12px;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1.4px), #6ea79a 50%, transparent calc(50% + 1.4px));
  opacity:.75;
}
.envelope__body::after{ transform:scaleX(-1); }
.envelope__flap{
  position:absolute; left:-2px; right:-2px; top:-2px; height:88px;
  background:var(--teal-soft);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  border-bottom:0;
  transform-origin:top center;
  transition:transform .7s var(--ease);
}
.envelope__stamp{
  position:absolute; z-index:4; left:16px; top:38px;
  padding:7px 12px; border:1.6px dashed var(--teal-deep); border-radius:8px;
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-deep); background:rgba(255,255,255,.35);
  transform:rotate(-2deg);
}
.envelope__seal{ position:absolute; z-index:5; left:50%; top:34px; width:44px; translate:-50% 0; }
.envelope__heart{ position:absolute; top:-118px; font-size:1.5rem; color:var(--amber); z-index:4; }
.envelope__heart--l{ left:8px; }
.envelope__heart--r{ right:8px; }
.envelope__cat{ position:absolute; right:-8px; bottom:-6px; z-index:5; width:56px; animation:wiggle 1.6s ease-in-out infinite; }

.envelope.is-open .envelope__flap{ transform:rotateX(180deg); }
.envelope.is-open .envelope__letter{ transform:translateY(-150px) rotate(0); opacity:0; }

/* ---------- cards ---------- */
.card{
  background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}
.card--message{
  margin-top:26px; padding:clamp(24px,6vw,34px);
  text-align:center; color:#5f8f90; font-size:clamp(1rem,4.1vw,1.08rem); line-height:1.95;
}
.card__flowers{ display:flex; justify-content:center; margin-top:16px; }

/* polaroid */
.polaroid{
  position:relative; margin:34px auto 0; width:min(100%,420px);
  background:#fff; padding:14px; border-radius:6px;
  box-shadow:var(--shadow-lg);
  transform:rotate(-1.6deg);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.polaroid:hover{ transform:rotate(0) scale(1.02); box-shadow:0 28px 60px rgba(16,71,63,.2); }
.polaroid img{ width:100%; border-radius:3px; }
.tape{
  position:absolute; top:-14px; width:78px; height:28px;
  background:rgba(150,208,192,.72);
  box-shadow:0 2px 6px rgba(16,71,63,.1);
}
.tape--l{ left:-16px; transform:rotate(-26deg); }
.tape--r{ right:-16px; transform:rotate(26deg); }

/* thumbs */
.thumbs{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.thumbs li{
  background:#fff; border-radius:var(--r-sm); padding:8px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.thumbs li:hover{ transform:translateY(-5px) rotate(-1deg); box-shadow:var(--shadow-md); }
.thumbs img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; }

/* ---------- player ---------- */
.player{
  margin-top:26px; padding:22px;
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
}
.player__art{
  width:84px; height:84px; border-radius:var(--r-sm); object-fit:cover;
  background:#f3f8f6;
}
.player__label{
  color:var(--coral); font-size:.72rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
}
.player__title{ font-family:var(--font-serif); font-size:1.4rem; font-weight:700; margin-top:2px; }
.player__sub{ color:#6d9698; font-size:.94rem; }
.player__controls{ display:flex; align-items:center; gap:14px; margin-top:14px; }
.player__time{ font-size:.78rem; color:#7ba09f; white-space:nowrap; font-variant-numeric:tabular-nums; }

.playbtn{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:var(--teal); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(15,107,95,.35);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.playbtn:hover{ transform:scale(1.07); background:var(--teal-deep); }
.playbtn:active{ transform:scale(.96); }
.playbtn svg{ width:24px; height:24px; }
.playbtn--sm{ width:42px; height:42px; box-shadow:none; }
.playbtn--sm svg{ width:20px; height:20px; }
.playbtn__pause{ display:none; }
[data-state="playing"] .playbtn__pause{ display:block; }
[data-state="playing"] .playbtn__play{ display:none; }
[data-state="unavailable"] .playbtn{ background:#a9c4bf; box-shadow:none; cursor:not-allowed; }

.progress{
  position:relative; flex:1 1 auto; height:7px; border-radius:99px;
  background:#dfeee8; cursor:pointer; touch-action:none;
}
.progress__fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--teal); border-radius:99px;
  transition:width .12s linear;
}
.progress__fill::after{
  content:""; position:absolute; right:-5px; top:50%; translate:0 -50%;
  width:12px; height:12px; border-radius:50%; background:var(--teal);
  opacity:0; transition:opacity .2s var(--ease);
}
.progress:hover .progress__fill::after,
.progress:focus-visible .progress__fill::after{ opacity:1; }

/* mini player */
.mini{
  position:fixed; z-index:65;
  right:12px; bottom:calc(var(--bar-h) + 12px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px;
  padding:8px 16px 8px 8px; border-radius:999px;
  background:#fff; box-shadow:var(--shadow-lg);
  animation:popIn .45s var(--ease) both;
}
.mini[hidden]{ display:none; }
.mini__title{ font-family:var(--font-serif); font-weight:700; font-size:1rem; }
.eq{ display:flex; align-items:flex-end; gap:3px; height:16px; }
.eq i{ width:3px; height:6px; border-radius:2px; background:var(--coral); }
[data-state="playing"] .eq i{ animation:eq .9s ease-in-out infinite; }
.eq i:nth-child(2){ animation-delay:.15s; }
.eq i:nth-child(3){ animation-delay:.3s; }

/* ---------- pill button ---------- */
.btn-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 34px; border-radius:999px;
  background:var(--teal); color:#fff; font-weight:600; font-size:1.05rem;
  box-shadow:0 12px 26px rgba(15,107,95,.28);
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-pill:hover{ background:var(--teal-deep); transform:translateY(-3px); box-shadow:0 18px 34px rgba(15,107,95,.34); }
.btn-pill:hover span{ transform:translateX(4px); }
.btn-pill span{ display:inline-block; transition:transform .25s var(--ease); }

/* ---------- memory wall ---------- */
.wall{
  margin-top:30px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,4vw,26px);
}
.flip{
  position:relative; display:block; width:100%; aspect-ratio:3/4;
  perspective:1100px; padding:0; background:none;
}
.pin{
  position:absolute; z-index:4; left:50%; top:-9px; translate:-50% 0;
  width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #ffc98d, var(--amber));
  box-shadow:0 3px 6px rgba(16,71,63,.28);
}
.flip__inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .62s var(--ease);
}
.flip[aria-pressed="true"] .flip__inner{ transform:rotateY(180deg); }
.flip:hover .flip__inner{ box-shadow:var(--shadow-md); }
.flip__face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:#fff; border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
  display:grid; place-items:center; padding:12px;
  overflow:hidden;
}
.flip__face--front img{ width:100%; height:100%; object-fit:contain; }
.flip__flower{ position:absolute; bottom:8px; left:50%; translate:-50% 0; font-size:.8rem; color:#3fb2a0; }
.flip__face--back{
  transform:rotateY(180deg);
  background:
    repeating-linear-gradient(#fff 0 25px, #e3efe9 25px 26px);
  padding:18px;
}
.flip__text{
  font-family:var(--font-hand); font-size:1.12rem; line-height:26px;
  color:#2f5d5c; text-align:center;
}

/* ---------- scratch truths ---------- */
.truths{
  margin-top:6px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,3.4vw,22px);
}
.truth{
  position:relative; isolation:isolate;
  background:#fff; border-radius:var(--r-lg);
  padding:20px 18px 22px; min-height:190px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.truth__no{ color:var(--coral); font-size:.74rem; font-weight:700; letter-spacing:.16em; }
.truth__title{ font-size:1.14rem; font-weight:700; margin:6px 0 8px; }
.truth__body{ font-size:.94rem; line-height:1.55; color:#6b8f90; }
.truth canvas{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  border-radius:var(--r-lg); cursor:grab; touch-action:none;
  transition:opacity .55s var(--ease);
}
.truth.is-cleared canvas{ opacity:0; pointer-events:none; }
.truth.is-cleared{ animation:cardPop .5s var(--ease); }

/* ---------- note / paper ---------- */
.titlecard{
  position:relative; width:max-content; max-width:100%;
  margin:0 auto 26px; padding:12px 26px;
  background:#fff; box-shadow:var(--shadow-sm);
}
.titlecard .tape{ top:-12px; width:66px; height:24px; }

.paper{
  position:relative; padding:34px 24px 44px 44px;
  border-radius:var(--r-md);
  background:
    repeating-linear-gradient(transparent 0 37px, #e6f1ec 37px 38px) 0 26px/100% auto,
    #fff;
  box-shadow:var(--shadow-md);
  font-family:var(--font-hand);
  color:#1c5e56; font-size:clamp(1.16rem,4.6vw,1.32rem); line-height:38px;
}
.paper::before{  /* punch holes */
  content:""; position:absolute; left:16px; top:34px; bottom:34px; width:10px;
  background:radial-gradient(circle, #cfe6dd 46%, transparent 47%) 0 0/10px 76px repeat-y;
}
.paper__tape{
  position:absolute; left:18px; top:-12px; width:96px; height:26px;
  background:rgba(242,162,92,.85); border-radius:2px;
  transform:rotate(-2.5deg);
  box-shadow:0 2px 6px rgba(16,71,63,.12);
}
.paper__tape::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle, rgba(255,255,255,.75) 42%, transparent 43%) 4px 50%/18px 8px repeat-x;
}
.paper__hi{ font-size:1.5em; font-weight:700; color:var(--teal); margin-bottom:12px; }
.paper p + p{ margin-top:22px; }
.paper__stickers{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:26px 0;
}
.paper__stickers img{
  width:min(30%,120px); background:#fff; border-radius:6px; padding:4px;
  box-shadow:var(--shadow-sm);
  transform:rotate(-2deg);
  transition:transform .3s var(--ease);
}
.paper__stickers img:nth-child(2){ transform:rotate(2.5deg); }
.paper__stickers img:hover{ transform:rotate(0) scale(1.06); }
.paper__outro{ margin-top:26px; }
.paper__sign{
  display:inline-block; margin-top:4px;
  font-size:1.5em; font-weight:700; color:var(--teal);
  border-bottom:2.5px solid var(--teal); padding-bottom:2px;
}
.paper__cat{ position:absolute; right:18px; bottom:14px; width:48px; opacity:.9; }

.madeby{
  margin-top:34px; text-align:center;
  color:#4d8079; font-size:.78rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
}
.madeby__year{ margin-top:8px; letter-spacing:.1em; opacity:.65; }

/* ---------- toast ---------- */
.toast{
  position:fixed; z-index:90; left:50%; translate:-50% 0;
  bottom:24px;
  padding:12px 20px; border-radius:999px;
  background:var(--ink); color:#fff; font-size:.9rem; font-weight:600;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  transform:translateY(10px);
}
.toast.is-on{ opacity:1; transform:translateY(0); }

/* ---------- responsive ---------- */
@media (min-width:600px){
  .wall{ grid-template-columns:repeat(3,1fr); }
  .truths{ grid-template-columns:repeat(3,1fr); }
  .player{ padding:26px 30px; }
  .player__art{ width:96px; height:96px; }
}
@media (min-width:1024px){
  .thumbs{ gap:20px; }
  .paper{ padding:46px 54px 56px 74px; }
  .mini{ right:24px; bottom:calc(var(--bar-h) + 20px); }
  .polaroid{ width:min(100%,460px); }
}
@media (max-width:400px){
  .player{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .player__controls{ justify-content:center; }
}