/* ===== Drowly prelander — minimal elegant funnel ===== */
:root {
  --navy-900: #060a16;
  --navy-800: #0b1224;
  --amber: #ffb24d;
  --cream: #f6edd9;
  --muted: #c3ccea;
  --spotify: #1ed760;
  --maxw: 1000px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; background: #8b966f; }

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--cream);
  background: transparent;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; background: var(--amber); color: #1a1303; padding: 10px 16px; font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 8px; }

/* ---- background video + light veil (keep video visible) ---- */
.bg-video {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  object-fit: cover; z-index: -2; pointer-events: none;
  /* poster painted by CSS too, so there's no solid-color flash before the video
     (each page also inlines its own poster on the element) */
  background: #8b966f url("/assets/insomnia-poster.jpg") center center / cover no-repeat;
}
.bg-veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(110% 80% at 50% 35%, rgba(6,10,22,.05) 0%, rgba(6,10,22,.35) 70%, rgba(6,10,22,.65) 100%),
    linear-gradient(180deg, rgba(6,10,22,.55) 0%, rgba(6,10,22,.15) 28%, rgba(6,10,22,.55) 100%);
}

/* ---- nav (persistent listen CTA) ---- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(18px, 5vw, 44px);
}
.wordmark {
  font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 22px;
  letter-spacing: .01em; color: var(--cream); text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.nav-cta {
  padding: 10px 20px; border-radius: 999px; background: var(--spotify); color: #04210f;
  font-weight: 600; font-size: 14px; box-shadow: 0 6px 20px rgba(30,215,96,.32);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30,215,96,.5); }

/* ---- hero (the whole funnel, one screen) ---- */
.hero {
  flex: 1; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; padding: 120px 22px 80px; max-width: var(--maxw); margin: 0 auto;
}
.eyebrow {
  font-family: "Inter", sans-serif; text-transform: uppercase; letter-spacing: .32em;
  font-size: 12px; color: var(--amber); margin-bottom: 14px; text-shadow: 0 2px 14px rgba(0,0,0,.6);
  animation: fade .9s var(--ease) both;
}
.hero__title {
  font-family: "Fraunces", Georgia, serif; font-weight: 500; line-height: 1;
  font-size: clamp(60px, 13vw, 132px); letter-spacing: -.015em; color: var(--cream);
  text-shadow: 0 6px 40px rgba(0,0,0,.55); margin-bottom: 16px;
  animation: rise 1s var(--ease) both;
}
.hero__tag {
  font-size: clamp(16px, 2.3vw, 20px); color: var(--cream); opacity: .9; max-width: 460px;
  text-shadow: 0 2px 18px rgba(0,0,0,.6); margin-bottom: 34px;
  animation: rise 1s var(--ease) .1s both;
}
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; animation: rise 1s var(--ease) .2s both; }

.hero__whisper {
  margin-top: 30px; max-width: 420px; font-size: 14.5px; font-style: italic;
  color: var(--cream); opacity: .72; letter-spacing: .01em;
  text-shadow: 0 2px 16px rgba(0,0,0,.6); animation: fade 1.2s var(--ease) .45s both;
}

.btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 17px 34px; border-radius: 999px;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 17px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); cursor: pointer;
}
.btn--spotify { background: var(--spotify); color: #04210f; box-shadow: 0 12px 34px rgba(30,215,96,.35); }
.btn--spotify:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(30,215,96,.5); }

.link-soft {
  color: var(--cream); opacity: .82; font-size: 15px; padding-bottom: 2px;
  border-bottom: 1px solid rgba(246,237,217,.28); transition: opacity .2s, border-color .2s;
}
.link-soft:hover { opacity: 1; border-color: var(--amber); }

/* ---- Spotify save hint (animated + -> green check, looping nudge) ---- */
.save-hint {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  font-size: 13px; color: var(--cream); opacity: .8; letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  animation: fade 1.3s var(--ease) .6s both;
}
.save-hint__text b { color: var(--spotify); font-weight: 700; }
.save-ic { position: relative; width: 22px; height: 22px; flex: 0 0 auto; color: var(--cream); }
.save-ic svg { display: block; }
/* tap ripple — pulses at the click moment to show the press */
.save-tap {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--cream); opacity: 0; transform: scale(.4);
  animation: saveTap 4.6s var(--ease) infinite;
}
@keyframes saveTap {
  0%, 32% { opacity: 0; transform: scale(.4); }
  38% { opacity: .85; transform: scale(.55); }
  46% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}
.s-fill, .s-plus, .s-check { transform-box: fill-box; transform-origin: center; }
.s-fill { transform: scale(0); }
.s-check { opacity: 0; transform: scale(.5); }
.s-fill { animation: saveFill 4.6s var(--ease) infinite; }
.s-plus { animation: savePlus 4.6s var(--ease) infinite; }
.s-check { animation: saveCheck 4.6s var(--ease) infinite; }
@keyframes saveFill {
  0%, 40% { transform: scale(0); }
  48% { transform: scale(1.1); }
  54%, 86% { transform: scale(1); }
  92%, 100% { transform: scale(0); }
}
@keyframes savePlus {
  0%, 40% { opacity: 1; }
  46%, 90% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes saveCheck {
  0%, 42% { opacity: 0; transform: scale(.5); }
  52% { opacity: 1; transform: scale(1.18); }
  58%, 86% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.5); }
}

/* ---- personalized social proof (city/flag via geo) ---- */
.social-proof {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; color: var(--cream); opacity: .78; letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.6); animation: fade 1s var(--ease) both;
}
.social-proof[hidden] { display: none; }
.sp-flag { font-size: 15px; line-height: 1; }
.sp-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--spotify); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(30,215,96,.55); animation: spPulse 2.2s var(--ease) infinite;
}
@keyframes spPulse {
  0% { box-shadow: 0 0 0 0 rgba(30,215,96,.5); }
  70% { box-shadow: 0 0 0 7px rgba(30,215,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,215,96,0); }
}

/* ---- playlist picker carousel ---- */
.picker {
  width: 100%; max-width: 820px; margin: 30px auto 0; overflow: hidden;
  position: relative;
  animation: fade 1.2s var(--ease) .7s both;
}
/* edge fade as a non-interactive overlay so it never blocks card clicks
   (mask-image used to swallow pointer events on the faded edges) */
.picker::before, .picker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 56px; z-index: 3;
  pointer-events: none;
}
.picker::before { left: 0;  background: linear-gradient(90deg, var(--navy-900), rgba(6,10,22,0)); }
.picker::after  { right: 0; background: linear-gradient(270deg, var(--navy-900), rgba(6,10,22,0)); }
.picker__title {
  text-align: center; margin: 0 0 12px; color: rgba(255,255,255,.78);
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.picker__track {
  display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 4px;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: auto;
}
.picker__track::-webkit-scrollbar { display: none; }
.pcard {
  flex: 0 0 auto; width: 124px; text-align: center; cursor: pointer;
  transition: transform .22s var(--ease);
}
.pcard img {
  width: 124px; height: 124px; border-radius: 16px; object-fit: cover; display: block;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 26px rgba(0,0,0,.45);
  transition: box-shadow .22s var(--ease);
}
.pcard__label {
  display: block; margin-top: 9px; font-size: 11.5px; font-weight: 500;
  color: var(--cream); opacity: .82; letter-spacing: .01em; text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.pcard:hover { transform: translateY(-6px); }
.pcard:hover img { box-shadow: 0 18px 38px rgba(0,0,0,.6), 0 0 0 1px var(--spotify); }
.picker__track.dragging { scroll-behavior: auto; cursor: grabbing; }
.picker__track.dragging .pcard { pointer-events: none; }

/* ---- language flag bar (real per-language links) ---- */
.langbar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 26px; animation: fade 1.2s var(--ease) .85s both;
}
.langbar__flag {
  font-size: 17px; line-height: 1; padding: 7px 9px; border-radius: 10px;
  opacity: .55; filter: saturate(.8);
  transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.langbar__flag:hover { opacity: 1; transform: translateY(-2px); background: rgba(255,255,255,.08); }
.langbar__flag[aria-current="true"] {
  opacity: 1; filter: none; background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

/* ---- on-page content (about + FAQ, crawlable text) ---- */
.content { position: relative; z-index: 2; padding: 26px 22px 10px; }
.content__inner {
  max-width: 660px; margin: 0 auto; padding: clamp(26px, 5vw, 44px);
  background: rgba(6, 10, 22, .62); border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.content__inner h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: clamp(21px, 3.4vw, 27px); line-height: 1.25; color: var(--cream);
  margin: 0 0 14px;
}
.content__inner h2 + p { margin-top: 0; }
.content__inner > p {
  color: var(--muted); font-size: 15px; line-height: 1.75; margin: 0 0 14px;
}
.content__inner > h2:not(:first-child) { margin-top: 30px; }
.faq {
  border-bottom: 1px solid rgba(255,255,255,.1); padding: 2px 0;
}
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 13px 2px; font-weight: 600; font-size: 14.5px; color: var(--cream);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 auto; font-size: 18px; font-weight: 400;
  color: var(--amber); transition: transform .25s var(--ease);
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq > p { color: var(--muted); font-size: 14px; line-height: 1.7; padding: 0 2px 14px; }

/* ---- footer ---- */
.site-footer { position: relative; z-index: 2; text-align: center; padding: 30px 20px 40px; }
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  max-width: 720px; margin: 0 auto 16px;
}
.footer-links a {
  color: #aab3d6; font-size: 12.5px; transition: color .2s;
  border-bottom: 1px solid transparent;
}
.footer-links a:hover { color: var(--cream); border-color: var(--amber); }
.site-footer small { color: #8b94b8; font-size: 12.5px; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}