/* bird page styles. Owned by the bird page (src/pages/bird.js, bird-play.js); uses the tokens defined in index.html */
  /* ---------- the Light Bird page: a project page built around the bird ---------- */
  .pg.pg-bird { padding-top: 0; }
  .lb-dim { opacity: .62; }

  /* the bar reads light while a night band is under it (main.js keeps on-night for home and cases; this page says it here) */
  html.on-page:not(.menu-open):has(.pg-bird.is-night) .bar { color: var(--star); }
  html.on-page:not(.menu-open):has(.pg-bird.is-night) .bar::before { opacity: 0; }
  html.on-page:not(.menu-open):has(.pg-bird.is-night) .bar::after { opacity: 1; }

  /* (00) opening: the bird full bleed under the title */
  .lb-open { position: relative; height: 210vh; height: 210svh; margin: 0 calc(var(--m) * -1); }
  .is-calm .lb-open { height: 100vh; height: 100svh; }
  .lb-open__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--star); }
  .lb-open__media { position: absolute; inset: 0; overflow: hidden; background: var(--night) url(../assets/story-hd.jpg) center / cover no-repeat; will-change: clip-path; }
  .lb-open__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.1); will-change: transform; }
  .lb-open__shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(5,6,26,.5) 0, rgba(5,6,26,0) 22%), linear-gradient(to top, rgba(5,6,26,.66) 0, rgba(5,6,26,.2) 46%, rgba(5,6,26,0) 66%), linear-gradient(to right, rgba(5,6,26,.5) 0, rgba(5,6,26,0) 55%); }
  .lb-open__top { position: absolute; left: var(--m); right: var(--m); top: calc(92px + env(safe-area-inset-top, 0px)); display: flex; justify-content: space-between; gap: 16px; color: rgba(243,242,251,.86); }
  .pg-bird .lb-open__title { position: absolute; left: var(--m); right: var(--m); bottom: calc(var(--m) + 8vh); margin: 0; color: var(--star);
    font: 300 clamp(4.4rem, 14.6vw, 17.5rem)/.86 var(--display); letter-spacing: -.045em; text-wrap: nowrap; }
  .lb-open__a, .lb-open__b { display: block; will-change: transform, opacity; }
  .lb-open__b { padding-left: 24vw; }
  .lb-open__b em { font-size: 1.04em; }
  .lb-open__cue { position: absolute; right: var(--m); bottom: var(--m); display: flex; align-items: center; gap: 12px; color: rgba(243,242,251,.8); }
  .lb-open__cue span { display: block; width: 44px; height: 1px; background: currentColor; transform-origin: left; animation: lbCue 3.2s var(--slow) infinite; }
  @keyframes lbCue { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); transform-origin: left; } 56% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
  .is-calm .lb-open__cue span { animation: none; }

  /* (01) the piece */
  .lb-intro { margin-top: clamp(80px, 14vh, 160px); }
  .lb-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
  .lb-meta { grid-column: 10 / span 3; margin: 0; display: grid; gap: 22px; align-content: start; padding-top: .45em; }
  .lb-meta div { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 12px; }
  .lb-meta dt { color: var(--soft); }
  .lb-meta dd { margin: 0; font-size: 1rem; }

  /* (02) the live bird */
  .lb-live { margin-top: clamp(100px, 18vh, 200px); }
  .lb-live__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .lb-live__frame { position: relative; height: 86vh; height: 86svh; border-radius: 24px; overflow: hidden; background: var(--night); display: grid; place-items: center; cursor: pointer; isolation: isolate; }
  .lb-live__frame.live { cursor: auto; }
  .lb-live__frame picture { position: absolute; inset: 0; }
  .lb-enter__pic picture { display: contents; }
  .lb-live__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.8s var(--ease), opacity .9s var(--ease); }
  .lb-live__frame:hover .lb-live__poster { scale: 1.035; }
  .lb-live__frame.live .lb-live__poster { opacity: 0; }
  .lb-live__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
  .lb-live__on { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 16px 26px; border: 1px solid rgba(243,242,251,.5); border-radius: 999px; color: var(--star); background: rgba(5,6,26,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 .9375rem/1 var(--text); cursor: pointer; transition: background-color .6s var(--ease), color .6s var(--ease); }
  .lb-live__on:hover { background: var(--star); color: var(--ink); }
  .lb-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #ffd49a; box-shadow: 0 0 12px 2px rgba(255,212,154,.7); }
  .lb-live__frame.live .lb-live__on { display: none; }
  .lb-live__off { position: absolute; z-index: 2; right: 16px; top: 16px; min-height: 40px; padding: 10px 18px; border: 1px solid rgba(243,242,251,.5); border-radius: 999px; color: var(--star); background: rgba(5,6,26,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 .8125rem/1 var(--text); cursor: pointer; }
  .lb-live__off:hover { background: var(--star); color: var(--ink); }

  /* (03) in numbers */
  .lb-facts { margin-top: clamp(100px, 18vh, 200px); }
  .lb-facts ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--m); }
  .lb-facts li { border-top: 1px solid var(--ink); padding-top: 16px; display: grid; gap: 12px; align-content: start; }
  .lb-facts__n { font: 300 clamp(3.4rem, 8.4vw, 9.5rem)/.9 var(--display); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; opacity: 0; translate: 0 40px; transition: opacity 1.2s var(--ease), translate 1.4s var(--ease); }
  .lb-facts__n.in { opacity: 1; translate: 0 0; }
  .lb-facts li:nth-child(2) .lb-facts__n { transition-delay: .16s; }
  .lb-facts li:nth-child(3) .lb-facts__n { transition-delay: .32s; }
  .lb-facts li:nth-child(4) .lb-facts__n { transition-delay: .48s; }

  /* (04) inside the story: the chapters */
  .lb-chap { position: relative; margin: clamp(100px, 18vh, 200px) calc(var(--m) * -1) 0; }
  .lb-chap__pin { padding: 0 var(--m); }
  .lb-chap.is-pinned .lb-chap__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: calc(96px + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--m) + 8px); }
  .lb-chap__head { display: flex; justify-content: space-between; gap: 16px; }
  .lb-chap__count { font-variant-numeric: tabular-nums; }
  .lb-chap__track { min-width: 0; display: flex; gap: var(--m); user-select: none; -webkit-user-select: none; }
  .lb-chap.is-pinned .lb-chap__track { align-items: center; will-change: transform; cursor: grab; }
  .lb-chap.is-pinned .lb-chap__track.dragging { cursor: grabbing; }
  .lb-chap__card { flex: 0 0 auto; width: min(62vw, calc((100svh - 270px) * 1.538)); margin: 0; }
  .lb-chap__pic { aspect-ratio: 960 / 624; border-radius: 20px; overflow: hidden; background: var(--night); }
  .lb-chap__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.16); will-change: transform; }
  .lb-chap__card figcaption { margin-top: 14px; font: 300 clamp(1.3rem, 2vw, 2.1rem)/1.1 var(--display); letter-spacing: -.01em; }
  .lb-chap__card figcaption .lbl { margin-right: .5em; vertical-align: .3em; }
  .lb-chap__bar { height: 1px; background: var(--rule); margin-top: 22px; }
  .lb-chap.is-pinned .lb-chap__bar { margin-top: 0; }
  .lb-chap__bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.08); }
  .lb-chap:not(.is-pinned) .lb-chap__head { margin-bottom: 22px; }
  .lb-chap:not(.is-pinned) .lb-chap__track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--m); margin: 0 calc(var(--m) * -1); padding: 0 var(--m) 6px; scrollbar-width: none; }
  .lb-chap:not(.is-pinned) .lb-chap__track::-webkit-scrollbar { display: none; }
  .lb-chap:not(.is-pinned) .lb-chap__card { width: min(82vw, 720px); scroll-snap-align: start; }
  .lb-chap:not(.is-pinned) .lb-chap__pic img { transform: none; }

  /* (05) play: a thousand points of light in the bird's glide pose */
  .lb-play { position: relative; height: 100vh; height: 100svh; min-height: 560px; margin: clamp(100px, 18vh, 200px) calc(var(--m) * -1) 0; background: var(--night); color: var(--star); overflow: hidden; touch-action: pan-y; }
  .lb-play__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.8s var(--ease); }
  .lb-play.ready .lb-play__gl { opacity: 1; }
  .lb-play.no-gl { background: var(--night) url(../assets/story-hd.jpg) center / cover no-repeat; }
  .lb-play__words { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px var(--m); padding: calc(96px + env(safe-area-inset-top, 0px)) var(--m) 0; pointer-events: none; }
  .lb-play__words .lbl { grid-column: 1 / span 3; padding-top: .5em; color: rgba(243,242,251,.7); }
  .lb-play__words .state { grid-column: 4 / span 6; }
  .lb-play__words em { color: #ffd49a; }
  .lb-play__hint { position: absolute; z-index: 1; left: var(--m); right: var(--m); bottom: var(--m); color: rgba(243,242,251,.62); pointer-events: none; }
  .lb-play__touch { display: none; }
  @media (pointer: coarse) { .lb-play__fine { display: none; } .lb-play__touch { display: inline; } }

  /* (06) how it was made: the night carries on from the play area */
  .lb-made { margin: 0 calc(var(--m) * -1); padding: clamp(60px, 10vh, 120px) var(--m) clamp(70px, 12vh, 140px); background: var(--night); color: var(--star); }
  .lb-made .row > .lbl { color: rgba(243,242,251,.7); }
  .lb-made__body { margin: 1.2em 0 0; max-width: 34em; color: rgba(243,242,251,.74); font-size: 1.0625rem; }
  .lb-cycle { margin: clamp(60px, 11vh, 130px) 0 0; }
  .lb-cycle__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 var(--m); }
  .lb-cycle__pose { display: block; aspect-ratio: 420 / 404; background: url(../assets/lightbird/cycle.png) no-repeat; background-size: 600% 100%; background-position: calc(var(--i) * 20%) 0; opacity: 0; filter: drop-shadow(0 0 22px rgba(155,125,255,.45)); will-change: transform, opacity; }
  .lb-cycle__line { height: 1px; margin-top: 26px; background: rgba(243,242,251,.16); }
  .lb-cycle__line i { display: block; height: 100%; background: rgba(243,242,251,.8); transform-origin: left; transform: scaleX(0); }
  .lb-cycle figcaption { margin-top: 16px; color: rgba(243,242,251,.66); }

  /* (07) in your pocket */
  .lb-phone { margin-top: clamp(100px, 18vh, 200px); }
  .lb-phone .lb-phone__row { grid-column: 4 / span 8; }
  .lb-phone__row { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
  .lb-phone__device { width: min(46vw, 290px); aspect-ratio: 9 / 19.5; border-radius: 42px; overflow: hidden; background: #000; border: 8px solid #111; box-shadow: 0 50px 90px -34px rgba(11,14,42,.55); will-change: transform; }
  .lb-phone__device video { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* the way in */
  .lb-enter { margin: clamp(100px, 18vh, 200px) calc(var(--m) * -1) 0; padding: clamp(70px, 12vh, 130px) var(--m) clamp(40px, 7vh, 80px); background: var(--night); color: var(--star); }
  .lb-enter__go { display: grid; gap: 18px; color: inherit; text-decoration: none; }
  .lb-enter__go .lbl { color: rgba(243,242,251,.7); }
  .lb-enter__t { font: 300 clamp(3.4rem, 11vw, 12.5rem)/.9 var(--display); letter-spacing: -.04em; }
  .lb-enter__t em { font-size: 1.04em; }
  .lb-enter__go:hover .lb-enter__t { font-style: italic; }
  .lb-enter__pic { display: block; margin-top: clamp(16px, 3vh, 36px); aspect-ratio: 16 / 7.5; border-radius: 24px; overflow: hidden; transform-origin: 50% 100%; will-change: transform, opacity; }
  .lb-enter__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 1.8s var(--ease); }
  .lb-enter__go:hover .lb-enter__pic img { scale: 1.04; }
  .lb-enter__alt { margin: 26px 0 0; }
  .lb-enter + .pg__foot { border-top: 1px solid rgba(243,242,251,.12); }

@media (max-width: 1100px) {
  .lb-meta { grid-column: 4 / span 6; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pg-bird .lb-open__title { font-size: clamp(3.6rem, 19vw, 6rem); top: calc(124px + env(safe-area-inset-top, 0px)); bottom: auto; }
  .lb-open__b { padding-left: 14vw; }
  .lb-open__live { display: none; }
  .lb-meta { grid-column: 1 / -1; }
  .lb-live__head { flex-direction: column; gap: 6px; }
  .lb-live__frame { height: 72svh; border-radius: 18px; }
  .lb-live__on { align-self: start; margin-top: 18svh; }
  .lb-facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .lb-play__words { grid-template-columns: minmax(0, 1fr); }
  .lb-play__words .lbl, .lb-play__words .state { grid-column: 1; }
  .lb-cycle__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .lb-phone .lb-phone__row { grid-column: 1 / -1; grid-template-columns: 1fr; justify-items: center; }
  .lb-enter__pic { aspect-ratio: 3 / 4; }
  .lb-enter__pic img { object-position: 50% 52%; }
}