:root {
  --ink: #ffffff;
  --ink-soft: rgba(255, 234, 222, 0.74);
  --ink-faint: rgba(255, 228, 214, 0.56);
  --night: #0a0604;
  --glass-fill: #140a06;
  --card: #140b07;
  --ember: #ff6a2b;
  --ember-hot: #ffb07a;
  --youtube: #ff0000;
  --spotify: #1db954;
  --apple: #9933cc;
}

@property --beam {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The page must not form its own stacking context, or the logo's screen blend cannot reach the
   background and its black square shows. So the ground lives on html and the canvas sits at -1. */
html {
  -webkit-text-size-adjust: 100%;
  background: radial-gradient(60% 40% at 50% 18%, #3a1606 0%, var(--night) 70%) fixed, var(--night);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: transparent;
  overflow-x: hidden;
}

/* Live ember light (app.js). The radial background above shows if WebGL is unavailable. */
.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.bg.on { opacity: 1; }

/* Static film grain, matching the logo render. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light; /* grain lives in the light, so the blacks stay black */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The glass logo. Screen blending drops its black backdrop so only the lit glass shows. */
.hero-logo {
  display: block;
  width: 188px;
  height: 188px;
  margin: -6px 0 -10px;
  mix-blend-mode: screen;
  animation: logo-in 1100ms cubic-bezier(0.16, 0.84, 0.24, 1) both, float 7s 1100ms ease-in-out infinite;
}

h1 {
  margin: 10px 0 0;
  font-size: clamp(2.6rem, 12vw, 3.4rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Headline reveals word by word; the last word carries the logo's ember. */
h1 .w {
  display: inline-block;
  animation: word-in 760ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(420ms + var(--i) * 90ms);
}
h1 .accent {
  background: linear-gradient(180deg, #ffd3b4 0%, var(--ember-hot) 35%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 106, 43, 0.45));
}

.tagline {
  margin: 12px 0 0;
  max-width: 22em;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-soft);
  text-wrap: balance;
  animation: fade-up 640ms 860ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ctas {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fade-up 640ms 960ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Arrow pointing at the single CTA: draws on after the button lands, then pulses toward it.
   The tip sits on the scale origin, so growing never pushes it into the button. */
.nudge {
  width: 40px;
  height: 52px;
  margin: 16px 0 0;
  animation: fade-up 400ms 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.nudge + .ctas { margin-top: 6px; }
.nudge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 84%;
  filter: drop-shadow(0 0 8px rgba(255, 106, 43, 0.7));
  animation: nudge 1.3s 1.7s ease-in-out infinite;
}
.nudge path {
  fill: none;
  stroke: url(#nudge-ember);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: draw 520ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.nudge .shaft { animation-delay: 1050ms; }
.nudge .head { animation-delay: 1400ms; }

/* CTA: dark glass pill, an ember light travelling round its edge, and a shimmer across the face.
   The padding-box fill must stay opaque or the conic gradient shows through the label. */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 0 19px;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #1d0f08, var(--glass-fill)) padding-box,
    conic-gradient(from var(--beam),
      rgba(255, 140, 70, 0.22) 0deg,
      rgba(255, 140, 70, 0.22) 245deg,
      #ff7a35 296deg,
      #fff1e6 324deg,
      #ff7a35 346deg,
      rgba(255, 140, 70, 0.22) 360deg) border-box;
  color: #ffffff;
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 34px rgba(255, 106, 43, 0.22), 0 16px 34px rgba(0, 0, 0, 0.55);
  animation: beam 3.4s linear infinite;
  transition: transform 110ms ease;
  -webkit-tap-highlight-color: transparent;
}
.cta:nth-child(2) { animation-delay: -1.1s; }
.cta:nth-child(2)::after { animation-delay: -1.2s; }
.cta:nth-child(3) { animation-delay: -2.2s; }
.cta:nth-child(3)::after { animation-delay: -2.4s; }

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 32%,
    rgba(255, 190, 150, 0.08) 44%,
    rgba(255, 220, 200, 0.2) 50%,
    rgba(255, 190, 150, 0.08) 56%,
    transparent 68%);
  transform: translateX(-130%);
  animation: shimmer 3.4s ease-in-out infinite;
}

.cta:active { transform: scale(0.98); }
.cta:focus-visible { outline: 3px solid var(--ember-hot); outline-offset: 3px; }

.cta-badge {
  position: relative;
  z-index: 2;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff;
}
.cta-badge .icon { width: 22px; height: 22px; fill: currentColor; }
.cta-youtube .cta-badge { color: var(--youtube); }
.cta-spotify .cta-badge { color: var(--spotify); }
.cta-apple .cta-badge { color: var(--apple); }
.cta-label { position: relative; z-index: 2; }

/* Facts as frosted glass chips. */
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  animation: fade-up 640ms 1060ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.glass {
  padding: 7px 13px 8px;
  border-radius: 999px;
  background: rgba(255, 236, 226, 0.07);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 200, 170, 0.12);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.1;
  color: rgba(255, 238, 230, 0.86);
}

/* Swipe deck of recent episodes (app.js). Every tap opens the platform and counts as a click. */
.deck-wrap {
  width: 100%;
  margin-top: 28px;
  animation: fade-up 760ms 1160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.deck-label {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.deck {
  position: relative;
  display: grid;
  padding-bottom: 24px;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.card {
  grid-area: 1 / 1;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  color: #ffffff;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 170, 120, 0.16), 0 0 0 1px rgba(255, 140, 80, 0.10), 0 22px 44px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 100%;
  transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 460ms ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
.card[data-pos="0"] { z-index: 5; }
.card[data-pos="1"] { z-index: 4; transform: translateY(12px) scale(0.94); opacity: 0.62; }
.card[data-pos="2"] { z-index: 3; transform: translateY(23px) scale(0.88); opacity: 0.32; }
.card[data-pos="3"] { z-index: 1; transform: translateY(23px) scale(0.88); opacity: 0; pointer-events: none; }
.card:focus-visible { outline: 3px solid var(--ember-hot); outline-offset: 3px; }

.thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0d0704; }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14), 0 10px 26px rgba(0, 0, 0, 0.45);
}
.play svg { width: 26px; height: 26px; margin-left: 3px; fill: #140a06; }

.meta { display: block; padding: 16px 18px 12px; text-align: center; }
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 4px 9px;
  border-radius: 999px;
  background: var(--ember);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: 0 0 16px rgba(255, 106, 43, 0.45);
}
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.eq i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: #ffffff;
  transform-origin: 50% 100%;
  animation: eq 900ms ease-in-out infinite alternate;
}
.eq i:nth-child(2) { animation-delay: -300ms; }
.eq i:nth-child(3) { animation-delay: -600ms; }

.ep-title {
  display: block;
  margin-top: 6px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.22;
  text-wrap: balance;
}

.dots { display: flex; justify-content: center; gap: 6px; }
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 228, 214, 0.3);
  transition: width 300ms ease, background 300ms ease;
}
.dots i.on { width: 20px; background: var(--ember-hot); }

/* Fallback embed, used only if the episode feed has never loaded. */
.latest { width: 100%; margin-top: 28px; }
.latest h2 { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-soft); }
.frame { position: relative; width: 100%; overflow: hidden; border-radius: 14px; background: #140b07; }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.frame-16x9, .frame-spotify { aspect-ratio: 16 / 9; }
.frame-apple { height: 200px; }

@keyframes logo-in {
  from { opacity: 0; transform: scale(0.82); filter: brightness(0.3); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes nudge {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(5px) scale(1.2); }
}
@keyframes beam { to { --beam: 360deg; } }
@keyframes shimmer {
  0%, 52% { transform: translateX(-130%); }
  84%, 100% { transform: translateX(130%); }
}
@keyframes eq {
  from { transform: scaleY(0.3); }
  to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .nudge path { stroke-dashoffset: 0; }
}