/*
 * Scripted landing: house style from the scripted-videos project:
 * Apple-ad feel, light mode, black and white first, brand orange only where
 * it means something (a checked episode, the playhead). Cal Sans titles that
 * rise word by word from behind a mask; Inter for everything else.
 */

@font-face {
  font-family: 'Cal Sans';
  src: url('assets/fonts/CalSans.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* The app's light theme (global.css) */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(0.965 0 0);
  --secondary: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --primary: oklch(0.6386 0.202 35.83);

  --font-title: 'Cal Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Inter', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Menlo, monospace;

  /* Emil Kowalski's curves, never plain ease-in for UI */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-camera: cubic-bezier(0.65, 0, 0.35, 1);

  /* 30fps frames → ms: 3 frames stagger, 24 frames reveal, 16 frames exit */
  --stagger: 100ms;
  --reveal: 800ms;
  --exit: 530ms;

  --shadow-card: 0 50px 110px -40px rgba(0, 0, 0, 0.28);
  --shadow-poster: 0 20px 40px -24px rgba(0, 0, 0, 0.4);
  --gutter: 24px;

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.muted {
  color: var(--muted-foreground);
}

/* ------------------------------------------------------------------ Nav */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease-out);
}

.nav.is-scrolled {
  border-bottom-color: var(--border);
}

.nav-inner {
  max-width: 1120px;
  height: 60px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img {
  height: 22px;
  width: auto;
}

/* components/ui/button: default variant, size sm */
.pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--background);
  font-size: 14px;
  font-weight: 500;
  transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}

.pill:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* ------------------------------------------------------------------ Scenes */

.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 168px var(--gutter) 40px;
}

.scene.hero {
  padding-top: 148px;
}

.title {
  font-family: var(--font-title);
  font-weight: 400; /* Cal Sans' only weight, already display-bold */
  font-size: clamp(42px, 6.2vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 13em;
  text-wrap: balance;
}

.lede {
  margin-top: 22px;
  max-width: 34em;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.br-sm {
  display: none;
}

.headline-swap {
  display: grid;
  justify-items: center;
}

.headline-swap > * {
  grid-area: 1 / 1;
  align-self: center;
}

.stage {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin-top: 72px;
  display: flex;
  justify-content: center;
  will-change: transform;
}

/* --- Masked word reveal (Words.tsx): rise 115% → 0, 3-frame stagger --- */

.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 0.03em 0.16em;
  margin: -0.08em -0.03em -0.16em;
}

.w > span {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform var(--reveal) var(--ease-out),
    opacity calc(var(--reveal) * 0.66) linear;
  transition-delay: calc(var(--delay, 0ms) + var(--i) * var(--stagger));
}

.is-in .w > span {
  transform: none;
  opacity: 1;
}

/* Exits slip up and out of the mask, faster than the entrance */
.is-out .w > span {
  transform: translateY(-115%);
  opacity: 0;
  transition:
    transform var(--exit) var(--ease-in-out),
    opacity var(--exit) var(--ease-in-out);
  transition-delay: calc(var(--i) * 66ms);
}

/* --- Nothing appears from nothing: small rise, scale, blur --- */

[data-rise] {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  filter: blur(8px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.is-in[data-rise] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ------------------------------------------------------------------ Store badges */

.store-buttons {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.store-badge {
  display: inline-flex;
  height: 48px;
  transition: transform 200ms var(--ease-out);
}

.store-badge img {
  height: 100%;
  width: auto;
}

a.store-badge:active {
  transform: scale(0.97);
}

.store-badge.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  user-select: none;
}

/* ------------------------------------------------------------------ Phone (Phone.tsx) */

.phone {
  --s: 0.74;
  position: relative;
  flex-shrink: 0;
  width: calc(417px * var(--s));
  height: calc(876px * var(--s));
}

.phone-device {
  position: absolute;
  top: 0;
  left: 0;
  width: 417px;
  height: 876px;
  transform: scale(var(--s));
  transform-origin: 0 0;
}

.phone-shadow {
  position: absolute;
  inset: 6% 4% -2%;
  border-radius: 67px;
  box-shadow: 0 60px 90px -30px rgba(0, 0, 0, 0.26), 0 24px 40px -22px rgba(0, 0, 0, 0.22);
}

.phone-button {
  position: absolute;
  width: 6px;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.phone-button.l {
  left: -2.6px;
  background: linear-gradient(to right, #1c1c1e, #5d5d62 40%, #2c2c2f 75%);
}

.phone-button.r {
  right: -2.6px;
  background: linear-gradient(to left, #1c1c1e, #5d5d62 40%, #2c2c2f 75%);
}

.phone-band {
  position: absolute;
  inset: 0;
  border-radius: 67px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 96%, rgba(255, 255, 255, 0.1) 100%),
    linear-gradient(to right, #161618 0%, #58585d 1.1%, #2a2a2d 2.4%, #1d1d1f 50%, #2a2a2d 97.6%, #58585d 98.9%, #161618 100%);
  box-shadow:
    inset 0 0 0 0.75px rgba(255, 255, 255, 0.28),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    0 0 0 0.5px rgba(0, 0, 0, 0.6);
}

.phone-glass {
  position: absolute;
  inset: 3.5px;
  border-radius: 63.5px;
  background: #050506;
  box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.07);
}

/* Screen: logical points (393×852), like the app */
.phone-screen {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 393px;
  height: 852px;
  border-radius: 55px;
  overflow: hidden;
  background: var(--background);
  font-family: var(--font-system);
  color: var(--foreground);
  text-align: left;
  font-size: 16px;
  line-height: 1.4;
}

/* Status bar, dynamic island, home indicator and glass sheen */
.phone-screen::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 134.5px;
  width: 124px;
  height: 36px;
  border-radius: 18px;
  background: #000;
  z-index: 100;
}

.phone-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 140;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(var(--foreground), var(--foreground)) no-repeat center bottom 8px / 140px 5px;
}

.status-bar {
  position: absolute;
  inset: 0 0 auto;
  height: 54px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 34px 0 50px;
  font-weight: 600;
  font-size: 17px;
  background: linear-gradient(to bottom, #fff 70%, rgba(255, 255, 255, 0));
}

.status-bar .icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-rise {
  opacity: 0;
  transform: translateY(260px);
  transition:
    transform 1270ms var(--ease-drawer),
    opacity 600ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.phone-rise.is-in,
.hero-stage.is-in .phone-rise {
  opacity: 1;
  transform: none;
}

/* --- App primitives --- */

.app-title {
  position: absolute;
  top: 96px;
  left: 16px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.app-poster {
  width: 62px;
  height: 93px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--card);
  flex-shrink: 0;
}

.app-button {
  height: 40px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--background);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stars {
  display: inline-flex;
}

.stars img {
  width: var(--star, 16px);
  height: var(--star, 16px);
}

/* ------------------------------------------------------------------ Hero: diary */

.hero-stage {
  margin-top: 80px;
}

.hero-stage .phone {
  --s: 0.8;
}

.diary-month {
  position: absolute;
  top: 146px;
  left: 16px;
  font-size: 14px;
  color: var(--muted-foreground);
}

.diary-window {
  position: absolute;
  top: 178px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 86%, transparent 100%);
}

.diary-list {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 0;
  animation: diary-drift 60s linear infinite;
}

/* components/screens/Diary/DiaryListItem */
.diary-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out),
    filter 800ms var(--ease-out);
  transition-delay: calc(900ms + var(--i) * 167ms);
}

.is-in .diary-row {
  opacity: 1;
  transform: none;
  filter: none;
}

.diary-day {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.diary-row .app-poster {
  width: 52px;
  height: 78px;
}

.diary-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diary-name {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
}

@keyframes diary-drift {
  to {
    transform: translateY(-50%);
  }
}

/* ------------------------------------------------------------------ Series */

.series-stage {
  align-items: center;
  gap: 56px;
}

.poster-grid {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.poster-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  will-change: transform;
}

.poster-col.offset {
  margin-top: 40px;
}

.poster {
  width: 150px;
  aspect-ratio: 2 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-poster);
  opacity: 0;
  transform: translateY(60px) scale(0.96);
  filter: blur(10px);
  transition:
    opacity 930ms var(--ease-out),
    transform 930ms var(--ease-out),
    filter 930ms var(--ease-out);
  transition-delay: calc(var(--i) * var(--stagger));
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-in .poster {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Once the pick is made, the rest fall away a touch */
.is-picking .poster:not(.is-picked) {
  opacity: 0.35;
  filter: blur(2px);
  transform: scale(0.97);
  transition-duration: 470ms;
  transition-timing-function: var(--ease-in-out);
  transition-delay: 0ms;
}

.is-picking .poster.is-picked {
  transform: scale(1.03);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5);
  transition-delay: 0ms;
}

/* SeasonDetails, distilled */
.back-btn {
  position: absolute;
  top: 57px;
  left: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.series-head {
  position: absolute;
  top: 106px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.series-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.season-screen .muted {
  font-size: 14px;
  line-height: 20px;
}

.chips {
  position: absolute;
  top: 214px;
  left: 16px;
  display: flex;
  gap: 8px;
}

.chip {
  width: 81px;
  height: 36px;
  border-radius: 999px;
  background: var(--secondary);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.chip.on {
  background: var(--foreground);
  color: var(--background);
}

.episodes {
  position: absolute;
  top: 266px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.episode {
  background: var(--card);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 330ms var(--ease-out);
}

.episode.is-pressed {
  transform: scale(0.98);
  transition-duration: 130ms;
}

.ep-body {
  flex: 1;
  min-height: 93px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ep-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.check {
  position: relative;
  width: 22px;
  height: 22px;
  font-size: 22px;
  color: var(--muted-foreground);
}

.check i {
  position: absolute;
  inset: 0;
  transition:
    transform 330ms var(--ease-out),
    opacity 330ms var(--ease-out);
}

.check .ph-check-square {
  color: var(--primary);
  opacity: 0;
  transform: scale(0.7);
}

.episode.is-checked .ph-square {
  opacity: 0;
}

.episode.is-checked .ph-check-square {
  opacity: 1;
  transform: none;
}

/* Tap indicator (ui.tsx Tap) */
.check::after {
  content: '';
  position: absolute;
  left: -11px;
  top: -11px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: scale(1.15);
  pointer-events: none;
}

.episode.is-tapping .check::after {
  animation: tap 740ms var(--ease-out);
}

@keyframes tap {
  0% { opacity: 0; transform: scale(1.15); }
  27% { opacity: 1; transform: scale(1); }
  45% { opacity: 1; transform: scale(0.82); }
  70% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.bottom-bar {
  position: absolute;
  inset: auto 0 0;
  background: var(--background);
  border-top: 1px solid var(--border);
  padding: 16px 16px 50px;
}

.bottom-bar .app-button span {
  display: inline-block;
}

/* ------------------------------------------------------------------ Audio review post */

.card-lift {
  opacity: 0;
  transform: translateY(120px);
  transition:
    transform 1130ms var(--ease-drawer),
    opacity 560ms var(--ease-out);
  transition-delay: 250ms;
}

.is-in .card-lift {
  opacity: 1;
  transform: none;
}

/* components/ActivityPost, light mode, at 1.2× */
.post {
  width: min(100%, 460px);
  padding: 24px 20px 12px;
  border-radius: 32px;
  background: var(--background);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-card);
  text-align: left;
  font-family: var(--font-system);
}

.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--foreground);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  flex-shrink: 0;
}

.post-who {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 17px;
  line-height: 1.35;
}

.post-who .muted {
  font-size: 15px;
}

.post-author > i {
  font-size: 24px;
}

.post-title {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
}

.audio-player {
  margin-top: 10px;
  height: 72px;
  border-radius: 16px;
  background: var(--card);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.audio-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.waveform {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.waveform i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: oklch(0.556 0 0 / 30%);
  transform: scaleY(0.15);
}

.waveform i.on {
  background: var(--primary);
}

.audio-time {
  width: 92px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.post-cover {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 361 / 240;
  border-radius: 19px;
  overflow: hidden;
  background: var(--card);
}

.cover-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
}

.cover-poster,
.cover-poster-slot {
  position: absolute;
  left: 4.4%;
  bottom: 6.6%;
  width: 31.5%;
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.post-cover .stars {
  position: absolute;
  right: 4.4%;
  bottom: 6.6%;
  --star: 28px;
}

.post-actions {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  font-size: 16px;
}

.post-actions span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-actions i {
  font-size: 22px;
}

/* ------------------------------------------------------------------ Social */

.social-stage {
  align-items: center;
  gap: 64px;
}

.avatar.sm {
  width: 44px;
  height: 44px;
  font-size: 17px;
}

.avatar.light {
  background: var(--card);
  color: var(--foreground);
}

/* A distilled Followers list: the idea, not the full screen */
.friends {
  width: 380px;
  padding: 10px;
  border-radius: 28px;
  background: #fff;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.friend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out),
    filter 800ms var(--ease-out);
  transition-delay: calc(200ms + var(--i) * 167ms);
}

.friend + .friend {
  border-top: 1px solid var(--border);
}

.friends.is-in .friend {
  opacity: 1;
  transform: none;
  filter: none;
}

.friend-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.35;
}

.friend-body .muted {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* components/ui/button, size sm: default → secondary once followed */
.follow {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--background);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 300ms var(--ease-out),
    color 300ms var(--ease-out),
    transform 130ms var(--ease-out);
}

.follow-label {
  grid-area: 1 / 1;
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out),
    filter 300ms var(--ease-out);
}

.follow-label.alt,
.follow.is-following .follow-label:not(.alt) {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
}

.follow.is-following .follow-label.alt {
  opacity: 1;
  transform: none;
  filter: none;
}

.follow.is-following {
  background: var(--secondary);
  color: var(--foreground);
}

.follow.is-pressed {
  transform: scale(0.97);
}

/* Tap indicator, as on the episode checks */
.follow::after,
.send::after,
.comment-like::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
}

.is-tapping::after {
  animation: tap 740ms var(--ease-out);
}

/* ActivityDetails, distilled: the post, its comments, the comment input */
.thread-window {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 96px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}

.thread {
  padding: 8px 16px 16px;
  transition: transform 700ms var(--ease-camera);
}

.thread-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thread-author .avatar {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.thread-author .post-who {
  font-size: 16px;
}

.thread-author .muted {
  font-size: 14px;
}

.thread-title {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
}

.thread-review {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.4;
}

.thread .post-cover {
  border-radius: 16px;
}

.thread .post-cover .stars {
  --star: 24px;
}

.thread .post-actions {
  height: 40px;
  gap: 18px;
  font-size: 14px;
}

.thread .post-actions i {
  font-size: 20px;
}

.comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.comment {
  background: var(--card);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  filter: blur(8px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out),
    filter 600ms var(--ease-out);
}

.comment.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-head .avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.comment-head .avatar.light {
  background: #fff;
}

.comment-head strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.comment-head .muted {
  font-size: 12px;
}

.comment-text {
  font-size: 14px;
  line-height: 1.4;
}

.comment-like {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted-foreground);
  transition: transform 130ms var(--ease-out);
}

.comment-like i {
  font-size: 18px;
}

/* The app's active like colour (text-red-500) */
.comment-like.is-liked {
  color: #ef4444;
}

.comment-like.is-pressed {
  transform: scale(0.9);
}

.comment-input {
  position: absolute;
  inset: auto 0 0;
  z-index: 20;
  background: var(--background);
  border-top: 1px solid oklch(0.922 0 0 / 50%);
  padding: 16px 16px 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-field {
  position: relative;
  flex: 1;
  height: 40px;
  border-radius: 999px;
  background: var(--card);
  padding: 0 16px;
  display: flex;
  align-items: center;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
}

.input-field .placeholder {
  position: absolute;
  left: 16px;
  color: var(--muted-foreground);
}

.input-field.has-text .placeholder {
  display: none;
}

.caret {
  width: 2px;
  height: 20px;
  margin-left: 1px;
  background: var(--foreground);
  opacity: 0;
}

.input-field.is-focused .caret {
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.send {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    transform 130ms var(--ease-out);
}

.send.is-ready {
  background: var(--foreground);
  color: var(--background);
}

.send.is-pressed {
  transform: scale(0.94);
}

/* ------------------------------------------------------------------ Customise */

.customize-stage {
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.post-cover.big {
  margin-top: 0;
  width: min(100%, 620px);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
}

.post-cover.big .stars {
  --star: 34px;
}

.cover-poster-slot {
  overflow: hidden;
  border-radius: 10px;
}

.cover-poster-slot .cover-poster {
  inset: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

/* Blur bridges every image swap */
.swap-layer {
  transition:
    opacity 600ms var(--ease-in-out),
    filter 600ms var(--ease-in-out),
    transform 600ms var(--ease-in-out);
}

.swap-layer.is-leaving {
  opacity: 0;
  filter: blur(12px);
  transform: scale(1.03);
}

.picker {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.pick {
  width: 84px;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  filter: blur(8px);
  transition:
    opacity 670ms var(--ease-out),
    transform 670ms var(--ease-out),
    filter 670ms var(--ease-out),
    outline-color 300ms var(--ease-out);
  transition-delay: calc(700ms + var(--i) * 167ms);
}

.pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-in .pick {
  opacity: 0.55;
  transform: none;
  filter: none;
}

.is-in .pick:hover,
.is-in .pick.is-on {
  opacity: 1;
}

.is-in .pick.is-on {
  outline-color: var(--foreground);
  transform: translateY(-6px);
}

.pick:active {
  transform: scale(0.97) !important;
}

.pick:focus-visible {
  outline-color: var(--muted-foreground);
}

/* The chosen poster flies from the picker to the cover */
.flyer {
  position: fixed;
  z-index: 40;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition:
    left 700ms var(--ease-camera),
    top 700ms var(--ease-camera),
    width 700ms var(--ease-camera),
    height 700ms var(--ease-camera);
}

/* ------------------------------------------------------------------ Streaming */

.streaming-stage {
  --row: 68px;
  --roll-size: 50px;
  height: 540px;
  max-width: 780px;
}

.country-roll {
  position: absolute;
  left: 0;
  right: 0;
  top: 200px;
  height: 0;
  transition: top 930ms var(--ease-in-out);
}

.streaming-stage.is-settled .country-roll {
  top: 28px;
}

.roll-row {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--row);
  margin-top: calc(var(--row) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: var(--roll-size);
  letter-spacing: -0.01em;
  white-space: nowrap;
  will-change: transform, opacity, filter;
}

/* Only ease once landed; during the spin JS drives the transform every frame. */
.streaming-stage.is-landed .roll-row.target {
  transition: transform 930ms var(--ease-in-out);
}

.streaming-stage.is-settled .roll-row.target {
  transform: scale(0.7) !important;
}

.roll-row.other {
  transition: opacity 600ms var(--ease-in-out);
}

.streaming-stage.is-landed .roll-row.other {
  opacity: 0 !important;
}

.stream-card {
  position: absolute;
  top: 100px;
  left: 50%;
  width: min(100%, 560px);
  padding: 36px;
  border-radius: 36px;
  background: #fff;
  border: 2px solid var(--border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: left;
  opacity: 0;
  transform: translate(-50%, 380px);
  transition:
    transform 1130ms var(--ease-drawer),
    opacity 560ms var(--ease-out);
}

.streaming-stage.is-card .stream-card {
  opacity: 1;
  transform: translate(-50%, 0);
}

.stream-head {
  display: flex;
  align-items: center;
  gap: 28px;
}

.stream-head img {
  width: 80px;
  aspect-ratio: 2 / 3;
  border-radius: 11px;
  object-fit: cover;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.35);
}

.stream-name {
  font-family: var(--font-title);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.hairline {
  height: 2px;
  background: var(--border);
}

.providers {
  display: flex;
  justify-content: space-between;
}

.provider {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  text-align: center;
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  filter: blur(8px);
  transition:
    opacity 670ms var(--ease-out),
    transform 670ms var(--ease-out),
    filter 670ms var(--ease-out);
  transition-delay: calc(900ms + var(--i) * 167ms);
}

.provider img {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  margin-bottom: 12px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.35);
}

.provider strong {
  font-weight: 500;
}

.provider .muted {
  font-size: 14px;
}

.streaming-stage.is-card .provider {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ------------------------------------------------------------------ Letterboxd import */

#import .stage {
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  gap: 18px;
  perspective: 1400px;
}

.flip {
  aspect-ratio: 2 / 3;
  opacity: 0;
  transform: translateY(40px) scale(0.3) rotate(calc((var(--i) * 37deg) - 90deg));
  filter: blur(6px);
  transition:
    opacity 700ms var(--ease-camera),
    transform 1000ms var(--ease-camera),
    filter 700ms var(--ease-camera);
  transition-delay: calc(var(--i) * var(--stagger));
}

.is-in .flip {
  opacity: 1;
  transform: none;
  filter: none;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 530ms var(--ease-in-out);
  transition-delay: calc(var(--i) * 200ms);
}

.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-poster);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-inner img.back {
  transform: rotateY(180deg);
}

.import-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--card);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  transition-delay: 500ms;
}

.import-pill i {
  font-size: 20px;
  color: var(--muted-foreground);
  transition: color 300ms var(--ease-out);
}

.import-pill.is-done i {
  color: var(--primary);
}

.is-in .import-pill {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ CTA + end card */

.scene.cta {
  padding-bottom: 168px;
}

.end-card {
  position: relative;
  min-height: 72vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.end-logo {
  width: clamp(200px, 32vw, 400px);
  height: auto;
  opacity: 0;
  transform: scale(0.97);
  filter: blur(10px);
  transition:
    opacity 1130ms var(--ease-out),
    transform 1130ms var(--ease-out),
    filter 1130ms var(--ease-out);
  transition-delay: 200ms;
}

.end-card.is-in .end-logo {
  opacity: 1;
  transform: none;
  filter: none;
}

.end-links {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 0 var(--gutter);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

.end-links a {
  transition: color 200ms var(--ease-out);
}

.end-links a:hover {
  color: #fff;
}

/* ------------------------------------------------------------------ Responsive */

@media (max-width: 900px) {
  .series-stage,
  .social-stage {
    flex-direction: column;
    gap: 48px;
  }

  .friends {
    width: min(100%, 380px);
  }

  .poster {
    width: 104px;
  }

  .poster-grid,
  .poster-col {
    gap: 12px;
  }

  .poster-col.offset {
    margin-top: 28px;
  }

  .poster-col:not(.offset) .poster:last-child,
  .poster-col.offset .poster:last-child {
    display: none;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 16px;
  }

  .scene {
    padding-top: 120px;
  }

  .scene.hero {
    padding-top: 116px;
  }

  /* Break on meaning, never leave one word alone on a line */
  .br-sm {
    display: inline;
  }

  .stage {
    margin-top: 52px;
  }

  .hero-stage .phone,
  .phone {
    --s: 0.7;
  }

  /* The posters carry the series story on their own here */
  .series-stage .phone {
    display: none;
  }

  /* Social comes in quicker: tighter words, lede and list close behind */
  #social .title {
    --stagger: 60ms;
  }

  #social .lede {
    --d: 200ms !important;
  }

  #social .friend {
    transition-delay: calc(var(--i) * 120ms);
  }

  .post {
    padding: 18px 14px 6px;
    border-radius: 26px;
  }

  .avatar {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  .audio-player {
    height: 64px;
    gap: 8px;
  }

  .audio-btn {
    width: 40px;
    height: 40px;
  }

  .waveform {
    gap: 3px;
  }

  .waveform i {
    width: 3px;
  }

  .audio-time {
    width: auto;
    font-size: 11px;
  }

  .post-cover .stars {
    --star: 20px;
  }

  .post-cover.big {
    border-radius: 20px;
  }

  .post-cover.big .stars {
    --star: 22px;
  }

  .picker {
    gap: 10px;
  }

  .pick {
    width: 56px;
    border-radius: 8px;
  }

  .streaming-stage {
    --row: 50px;
    --roll-size: 34px;
    height: 470px;
  }

  .streaming-stage.is-settled .country-roll {
    top: 22px;
  }

  .stream-card {
    top: 76px;
    padding: 24px;
    border-radius: 28px;
    gap: 22px;
  }

  .stream-head {
    gap: 18px;
  }

  .stream-head img {
    width: 64px;
  }

  .stream-name {
    font-size: 28px;
  }

  .provider {
    font-size: 14px;
  }

  .provider img {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }

  .flip-grid {
    grid-template-columns: repeat(3, minmax(0, 104px));
    gap: 12px;
  }

  .end-card {
    min-height: 60vh;
  }
}

/* ------------------------------------------------------------------ Reduced motion */

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

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }

  .stage {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}