/*
 * Naghma — Our Wrapped (Boyfriend Day family).
 * Ported verbatim from the original single-file design (t5-wrapped.html).
 * Hosting-sandbox injections (.ha-img-placeholder block, broken-img-handler)
 * have been removed. No other changes to the original CSS.
 */
:root {
  --night: #1D1B2E;
  --night-2: #232038;
  --lavender: #B9B0E0;
  --coral: #D98A80;
  --white: #FFFDF8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--night);
  color: var(--white);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- scroll snap shell ---------- */
.deck {
  height: 100vh;
  height: 100svh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.deck::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; }
}

.screen {
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 28px;
  position: relative;
  overflow: hidden;
}

/* gradient overlays, alternating */
.g-a { background: linear-gradient(175deg, var(--night) 0%, var(--night-2) 45%, rgba(185,176,224,0.22) 100%); }
.g-b { background: linear-gradient(355deg, var(--night) 0%, var(--night-2) 45%, rgba(217,138,128,0.24) 100%); }

.screen::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, rgba(255,253,248,0.05), transparent 60%);
}

.inner {
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  position: relative;
  z-index: 1;
}

/* ---------- type ---------- */
.eyebrow {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lavender);
}

.eyebrow.coral { color: var(--coral); }

h1.title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 11vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
}

.stat-num {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--white);
  display: block;
}

.stat-unit {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lavender);
}

.caption {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,253,248,0.85);
  max-width: 300px;
}

.caption em { color: var(--coral); font-style: italic; }

/* ---------- photo placeholder ---------- */
.photo {
  width: 200px; height: 200px;
  border-radius: 24px;
  display: block;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .screen .photo {
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
  }
  .screen.active .photo {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- song card ---------- */
.song-card {
  width: 100%;
  max-width: 340px;
  max-height: 82vh;
  max-height: 82svh;
  overflow-y: auto;
  scrollbar-width: none;
  background: rgba(255,253,248,0.06);
  border: 1px solid rgba(185,176,224,0.28);
  border-radius: 22px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  backdrop-filter: blur(6px);
}

.song-card::-webkit-scrollbar { display: none; }

.album-art {
  width: 180px; height: 180px;
  border-radius: 16px;
  display: block;
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
}

/* with the video on the card, the vinyl shrinks to a badge */
.song-card:has(.song-embed) .album-art { width: 88px; height: 88px; }

.song-meta { text-align: center; }

.song-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--white);
}

.song-artist {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--lavender);
  margin-top: 6px;
}

.play-link {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--white);
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.play-link:hover { transform: scale(1.04); }

.play-link .svc-ic {
  display: inline-block; width: 16px; height: 16px;
  margin-left: 8px; vertical-align: -2px; border-radius: 50%;
}

.play-link.svc-spotify { background: #1DB954; color: #0A1F14; }
.play-link.svc-apple   { background: #FA243C; color: #FFFDF8; }

.song-embed {
  width: 100%;
  flex-shrink: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,0.5);
  border: 1px solid rgba(185,176,224,0.28);
}

.song-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- closing ---------- */
.closing-note {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.3;
  color: var(--white);
  max-width: 320px;
}

.mini-card {
  width: 100%;
  max-width: 340px;
  border-radius: 24px;
  padding: 28px 24px;
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(217,138,128,0.35), transparent 55%),
    radial-gradient(140% 100% at 100% 100%, rgba(185,176,224,0.35), transparent 55%),
    rgba(255,253,248,0.05);
  border: 1px solid rgba(255,253,248,0.22);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mini-names {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--white);
}

.mini-days {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 44px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--white);
  line-height: 1.1;
}

.mini-days span {
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lavender);
  display: block;
}

.mini-date {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(255,253,248,0.8);
}

.made-with {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--lavender);
}

.paigaam {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,253,248,0.6);
}

.paigaam a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- progress dots ---------- */
.dots {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10;
}

.dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(185,176,224,0.7);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.dots button.active {
  background: var(--white);
  border-color: var(--white);
  transform: scale(1.25);
}

/* ---------- skip button ---------- */
.skip {
  position: absolute;
  left: 20px;
  bottom: 24px;
  z-index: 5;
  background: none;
  border: none;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(255,253,248,0.6);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.skip:hover { color: var(--white); }

/* ---------- reveal-up for text (respect reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
  }
  .screen.active .rise {
    opacity: 1;
    transform: translateY(0);
  }
  .rise.d1 { transition-delay: 0.25s; }
  .rise.d2 { transition-delay: 0.4s; }
  .rise.d3 { transition-delay: 0.55s; }
}