/* The walk down the lane: the home page. On a phone the scenes stack and read top to bottom. From 48em each scene
   fills the viewport and story.js pins it while the scroll drives the choreography. Everything is readable with no
   JavaScript at all: the hidden starting states apply only when html has both the js and motion classes. */

.page--story main { padding-top: 0; }
.page--story .foot { margin-top: 0; }

/* a floating pill for the header, over any scene (from 48em; on a phone it stays in the flow, see below) */
.page--story .top { position: relative; background: transparent; border-bottom: 0; box-shadow: none; z-index: 20; }
.page--story .top__row {
  background: rgba(255, 253, 247, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 2rem; padding: 0.5rem 1.25rem; margin-top: 0.75rem;
  box-shadow: 0 0 0 3px rgba(246, 231, 193, 0.85);
}
.page--story .top--scrolled .top__row { box-shadow: 0 0 0 3px rgba(246, 231, 193, 0.85), 0 10px 30px rgba(46, 52, 64, 0.12); }

.story__skip { margin: 0; }
.story__skip a { position: absolute; left: 1rem; top: -5rem; z-index: 30; background: var(--teal); color: var(--paper); padding: 0.6rem 1rem; border-radius: var(--radius-s); }
.story__skip a:focus { top: 5.5rem; }

/* scenes, stacked (phone first) */
.scene { position: relative; }
.scene__stage { position: relative; display: grid; gap: var(--space-3); padding-bottom: var(--space-5); }
.scene__view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sky); }
.scene--lane .scene__view { aspect-ratio: 4 / 3; }
.scene__bg { position: absolute; inset: 0; margin: 0; }
.scene__bg picture { display: contents; }
.scene__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.scene--lane .scene__bg img { object-position: 12% bottom; }
.scene__copy {
  position: relative; z-index: 2; width: min(100% - 2rem, 38rem); margin: -2.5rem auto 0;
  background: rgba(255, 253, 247, 0.95); border: 3px solid var(--sand); border-radius: var(--radius-l);
  padding: var(--space-3) var(--space-4);
}
.scene__copy h1, .scene__copy h2 { margin-top: 0; }
.scene__copy .actions { margin-top: var(--space-2); }
.scene__copy .lead { margin-bottom: 0.5rem; }
.scene--lane .scene__stage { padding-top: 0; }

.display { font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.01em; }
.display-2 { font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.06; }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.w > span { display: inline-block; will-change: transform; }

/* the family on the pavement */
.scene__family { list-style: none; margin: 0; padding: 0 5%; position: absolute; inset: auto 0 0 0; height: 34%; display: flex; align-items: flex-end; justify-content: center; gap: 2%; }
.scene__person { margin: 0; height: 100%; display: flex; align-items: flex-end; transform: translateY(2%); }
.scene__person picture, .scene__person img { height: 100%; width: auto; }
.scene__person--maryam { height: 90%; }
.scene__person--yusuf { height: 80%; }
.scene__person--raiha, .scene__person--noor { height: 56%; }
.scene__person--mama, .scene__person--baba { display: none; }

.scroll-cue { display: none; }

/* clouds that drift all day */
.clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cloud { position: absolute; width: 9vw; min-width: 4rem; height: 3.2vw; min-height: 1.4rem; background: #fff; border-radius: 3rem; opacity: 0.9; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 55%; height: 170%; left: 12%; bottom: 15%; }
.cloud::after { width: 42%; height: 130%; right: 12%; bottom: 20%; }
.cloud--1 { top: 9%; left: -12%; }
.cloud--2 { top: 20%; left: -30%; width: 7vw; height: 2.5vw; opacity: 0.8; }
.cloud--3 { top: 5%; left: -55%; width: 11vw; height: 3.8vw; }

/* the big words, passing by */
.marquee { overflow: hidden; background: var(--teal); color: var(--paper); padding: 0.9rem 0; }
.marquee__track { display: flex; gap: 3rem; width: max-content; will-change: transform; }
.marquee__item { display: inline-flex; align-items: baseline; gap: 0.9rem; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); }
.marquee__ar { font-family: var(--font-arabic); font-weight: 700; font-size: 1.35em; color: var(--gold); line-height: 1; }
.marquee__latin::after { content: "·"; margin-left: 2rem; color: var(--gold); }

/* the cast */
.cast { list-style: none; margin: 0; padding: 0 1rem 1rem; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.cast__member { flex: 0 0 10rem; margin: 0; text-align: center; scroll-snap-align: start; }
.cast__member img { height: 11rem; width: auto; margin-inline: auto; }
.cast__label { background: rgba(255, 253, 247, 0.95); border: 2px solid var(--sand); border-radius: var(--radius-s); padding: 0.5rem 0.6rem; margin-top: 0.5rem; }
.cast__label h3 { font-size: 1rem; margin: 0 0 0.15rem; }
.cast__label p { font-size: 0.85rem; margin: 0; line-height: 1.35; }

/* three phrases, stacked like the show's cards */
.phrase-stack { display: grid; gap: 1rem; width: min(100% - 2rem, 34rem); margin-inline: auto; }
.phrase-card--stack { gap: var(--space-2); padding: var(--space-3); transform-origin: center; }
.phrase-card--stack .phrase__ar { font-size: 2.2em; }
.phrase-card__link { display: inline-block; margin-top: 0.25rem; font-family: var(--font-display); font-weight: 600; }
.scene__raiha { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 46%; display: none; }
.scene__raiha img { height: 100%; width: auto; }

/* the promise, stamped */
.promise--stamps { display: grid; gap: 0.75rem; }
.promise--stamps li { background: var(--sand); border-radius: var(--radius-s); padding: 0.8rem 1rem 0.8rem 2.4rem; position: relative; transform-origin: center; }
.promise--stamps li::before { left: 1rem; top: 1.05rem; }
.scene__copy--wide { width: min(100% - 2rem, 60rem); }

/* the episodes rail */
.rail { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.rail__track { display: flex; align-items: flex-start; gap: 1rem; padding: 0 1rem 1rem; margin: 0; list-style: none; will-change: transform; }
.rail__item { flex: 0 0 min(19rem, 78vw); margin: 0; scroll-snap-align: start; }
.rail .ep-card { background: rgba(255, 253, 247, 0.96); border: 3px solid var(--sand); border-radius: var(--radius-l); padding: 0.9rem; }
.rail .ep-card__thumb { border: 0; }
.rail__item--more { display: flex; align-items: center; justify-content: center; flex-basis: 12rem; align-self: center; }
.butterfly { position: absolute; top: 18%; left: 55%; width: clamp(3rem, 6vw, 6rem); }
.butterfly img { width: 100%; height: auto; }

/* the letter at night */
.letter-panel {
  position: relative; z-index: 2; width: min(100% - 2rem, 40rem); margin: -2.5rem auto 0;
  background: rgba(255, 253, 247, 0.96); border: 3px solid var(--gold); border-radius: var(--radius-l); padding: var(--space-3) var(--space-4);
}
.letter-panel h2 { margin-top: 0; }
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars span { position: absolute; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gold); opacity: 0.7; }
.stars span:nth-child(1) { top: 12%; left: 8%; }
.stars span:nth-child(2) { top: 20%; left: 22%; width: 0.3rem; height: 0.3rem; }
.stars span:nth-child(3) { top: 9%; left: 38%; }
.stars span:nth-child(4) { top: 25%; left: 50%; width: 0.25rem; height: 0.25rem; }
.stars span:nth-child(5) { top: 14%; left: 63%; }
.stars span:nth-child(6) { top: 30%; left: 92%; width: 0.3rem; height: 0.3rem; }

/* the end of the lane */
.scene--end { padding-bottom: var(--space-5); }
.scene--end .scene__view { aspect-ratio: 16 / 9; }
.scene__family--end { justify-content: center; }
.scene__copy--end { text-align: center; margin-top: 1rem; }
.scene__copy--end .actions { justify-content: center; }

/* ---------- from 48em: each scene fills the viewport, story.js pins it and scrubs the motion ---------- */
@media (min-width: 48em) {
  .page--story .top { position: fixed; inset: 0 0 auto 0; }
  .scene__stage { display: block; height: 100svh; padding: 0; overflow: hidden; }
  .scene + .scene .scene__stage, .marquee + .scene .scene__stage { border-radius: 2rem 2rem 0 0; }
  .scene__view, .scene--lane .scene__view, .scene--end .scene__view { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; }
  .scene__bg { will-change: transform; }
  .scene--lane .scene__bg img { object-position: center bottom; }
  .scene__copy { position: absolute; margin: 0; width: min(42rem, 46vw); padding: var(--space-4); }
  .scene--lane .scene__copy { top: max(13vh, 6.5rem); left: 50%; translate: -50% 0; width: min(54rem, 72vw); text-align: center; }
  .scene--lane .scene__copy .lead { max-width: 40rem; margin-inline: auto; }
  .scene--lane .scene__copy .actions { justify-content: center; }
  .scene__family, .scene__person--mama, .scene__person--baba { display: flex; }
  .scene__family { height: 30%; bottom: 1.5%; }
  .scroll-cue {
    display: inline-flex; align-items: center; gap: 0.5rem; position: absolute; right: 3vw; bottom: 3vh; z-index: 3;
    margin: 0; padding: 0.5rem 1rem; background: rgba(255, 253, 247, 0.9); border-radius: 2rem;
    font-family: var(--font-display); font-weight: 600; color: var(--teal);
  }

  .scene--family .scene__copy { top: 12vh; left: 6vw; width: min(36rem, 40vw); }
  .cast { position: absolute; inset: auto 0 0 0; overflow: visible; padding: 0 3vw; gap: 1vw; justify-content: center; align-items: flex-end; scroll-snap-type: none; }
  .cast__member { flex: 0 1 15vw; }
  .cast__member img { height: 30vh; }
  .cast__label { margin: 0.4rem 0 1.5rem; }

  .scene--phrases .scene__copy { top: 50%; left: 6vw; translate: 0 -50%; width: min(30rem, 34vw); }
  .phrase-stack { position: absolute; right: 7vw; top: 50%; translate: 0 -50%; width: min(32rem, 40vw); margin: 0; }
  .phrase-card--stack { grid-area: 1 / 1; }
  .scene__raiha { display: block; height: 36%; left: 48%; }

  .scene--promise .scene__copy--wide { left: 50%; top: 50%; translate: -50% -50%; width: min(62rem, 88vw); }
  .promise--stamps { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.9rem; }

  /* the rail scene stacks its introduction above the cards, so they never overlap whatever the screen height */
  .scene--rail .scene__stage { display: flex; flex-direction: column; padding-top: 10vh; }
  .scene--rail .scene__copy { position: relative; top: auto; left: auto; margin: 0 0 0 6vw; width: min(40rem, 50vw); flex: 0 0 auto; }
  .rail { position: relative; inset: auto; flex: 1 1 auto; display: flex; align-items: flex-start; min-height: 0; padding-top: 3vh; overflow: visible; scroll-snap-type: none; z-index: 2; }
  .rail__track { gap: 1.5rem; padding: 0 6vw; }
  .rail__item { flex: 0 0 20rem; }

  .letter-panel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(42rem, 82vw); margin: 0; padding: var(--space-4) var(--space-5); }

  .scene--end { padding: 0; }
  .scene--end .scene__view { position: relative; aspect-ratio: auto; width: 100%; height: min(72vh, 52vw); }
  /* the closing card floats in the sky above the family, like every other scene's panel */
  .scene--end { position: relative; }
  .scene__copy--end { position: absolute; left: 50%; top: 9%; translate: -50% 0; margin: 0; width: min(40rem, 60vw); z-index: 2; }
}

/* shorter laptop screens: the same scenes, with less height to spend */
@media (min-width: 48em) and (max-height: 48em) {
  .display { font-size: clamp(2rem, 4.8vw, 3.8rem); }
  .display-2 { font-size: clamp(1.6rem, 3.3vw, 2.6rem); }
  .scene__copy { padding: var(--space-3) var(--space-3); }
  .scene__copy .lead { font-size: 1rem; }
  .scene--lane .scene__copy { top: max(8vh, 5.5rem); width: min(50rem, 70vw); padding-bottom: var(--space-2); }
  .scene--family .scene__copy { top: max(12vh, 6.5rem); }
  .scene--rail .scene__stage { padding-top: max(10vh, 6.5rem); }
  .scene__family { height: 24%; }
  .cast__member img { height: 25vh; }
  .cast__label p { display: none; }
  .scene--rail .scene__copy { top: 7vh; }
  .rail__item { flex: 0 0 16rem; }
  .letter-panel { padding: var(--space-3) var(--space-4); }
  .letter-panel .lead { font-size: 1rem; }
}

/* the living, breathing bits, only for people who allow motion */
@media (prefers-reduced-motion: no-preference) {
  .cloud--1 { animation: drift 95s linear infinite; }
  .cloud--2 { animation: drift 130s linear infinite; animation-delay: -40s; }
  .cloud--3 { animation: drift 160s linear infinite; animation-delay: -90s; }
  .marquee__track { animation: marquee 48s linear infinite; }
  .scroll-cue svg { animation: bob 1.6s ease-in-out infinite; }
  .butterfly { animation: flutter 18s ease-in-out infinite; }
  .butterfly img { animation: flap 0.9s ease-in-out infinite alternate; }
  .stars span { animation: twinkle 3.2s ease-in-out infinite; }
  .stars span:nth-child(2n) { animation-delay: -1.1s; }
  .stars span:nth-child(3n) { animation-delay: -2.2s; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(170vw); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes flutter {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-14vw, 10vh) rotate(-8deg); }
  50% { transform: translate(-26vw, -4vh) rotate(6deg); }
  75% { transform: translate(-10vw, -12vh) rotate(-4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(0.72); } }
@keyframes twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* starting states, applied only when JavaScript and motion are both on; story.js brings each one in */
html.js.motion .scene:not(.scene--lane) [data-rise],
html.js.motion .cast__member,
html.js.motion [data-phrase],
html.js.motion .promise--stamps li,
html.js.motion .letter-panel,
html.js.motion .scene--end .scene__copy { visibility: hidden; }
html.js.motion [data-split] { visibility: hidden; }