/* mobile.css — the phone layout for y2kplayer.app
 *
 * A SEPARATE LAYOUT, not a set of overrides.
 *
 * Everything in site.css that makes the desktop composition work — the two
 * column splits, the negative margins that let the device leave the frame, the
 * directional scrim, the oversized ghosted mark, the raked overlaps — is built
 * for a wide, short viewport. Squeezing those numbers into one narrow column
 * does not shrink the design, it breaks it: the device rode up over the App
 * Store badge, the ghost sat behind the copy, and the carousels ran taller than
 * the screen.
 *
 * So this file assumes nothing from that arrangement. It re-states the hero,
 * the sections, the objects and the rails for a tall narrow screen held in one
 * hand, and it is loaded after site.css so it wins cleanly rather than fighting.
 *
 * THE QUERY. Anything under 900px gets this layout, in ANY orientation. An
 * earlier version also required portrait, which left a hole: a phone held
 * sideways (844x390) matched neither this file nor the >=900px desktop rules,
 * so it fell through to the base CSS running desktop numbers in one column.
 * A short landscape block further down handles the extra squeeze.
 */

@media (max-width: 899px) {

  /* ---------------------------------------------------------------- rhythm */

  :root {
    --bleed: 20px;
    --gap: 22px;
    /* One hand, one column: the measure is the column, not 62ch. */
    --measure: 100%;
  }

  /* Type comes down harder than a fluid clamp does on its own. A 38px headline
     is fine on a 390px screen; the LEDE at desktop weight is what makes the
     page feel shouted at. */
  h1 { font-size: clamp(34px, 10.5vw, 44px); line-height: 0.98; }
  h2 { font-size: clamp(26px, 7.6vw, 34px); }
  h3 { font-size: clamp(18px, 5vw, 21px); }
  .lede { font-size: clamp(16px, 4.4vw, 18px); line-height: 1.42; }
  body { font-size: 16px; line-height: 1.58; }

  .wrap, .wrap--tight, .wrap--wide { width: calc(100% - var(--bleed) * 2); }

  /* Sections must fit the screen they are read on. Tall bands on a phone mean
     the reader never sees a whole idea at once. */
  .section { padding: 46px 0; }
  .band-full { padding: 52px 0 40px; }

  /* ------------------------------------------------------------------ hero */

  /* Stacked and deliberate: copy, then actions, then the device with real space
     above it. No negative margins — that is what put the phone on top of the
     badge. */
  .hero {
    min-height: 0;
    padding: 26px 0 0;
    display: block;
  }
  .split--far { display: block; }
  .hero .stack { gap: 17px; }

  .hero__device {
    margin: 30px 0 0;
    display: flex;
    justify-content: center;
    /* The device runs off the BOTTOM of the hero, which on a phone is the one
       bleed that still reads as intentional. */
    margin-bottom: -70px;
  }
  .hero__device .dev3d__body {
    width: min(70vw, 300px);
    /* Flat on. A raked device inside a narrow column just loses width. */
    transform: rotateY(-4deg) rotateX(2deg) rotateZ(-0.6deg);
  }
  .dev3d { perspective: 900px; }

  /* The ghost mark moves behind the headline and drops right back. At desktop
     size on a narrow screen it sat directly under the copy. */
  .hero__ghost {
    left: auto; right: -34%;
    top: 2%;
    height: 44svh;
    opacity: .07;
    transform: rotate(-8deg);
  }

  /* Actions stack full width and are thumb-sized. The badge keeps Apple's
     clear space; only the hit area changes. */
  .cta { width: 100%; gap: 12px; }
  .cta .btn { width: 100%; justify-content: center; padding: 17px 24px; font-size: 17px; }
  .badge { align-self: flex-start; padding: 10px; }
  .badge img { height: 44px; }

  /* Sits under the actions here too, so the whole call to action is one block. */
  .rating { position: static; transform: none; flex-direction: row; gap: 9px; margin-top: 2px; }
  .rating__stars { flex-direction: row; gap: 4px; }
  .rating__stars svg { width: 15px; height: 15px; }
  .rating__say { writing-mode: horizontal-tb; font-size: 11px; letter-spacing: .1em; }
  .revs { grid-template-columns: 1fr; }

  .pills { gap: 8px; }
  .pill { font-size: 13px; padding: 7px 13px; }

  /* --------------------------------------------------------------- splits */

  /* One column, copy first, object after — and the object never gets a
     negative margin here. */
  .split, .split--flip, .split--far { display: block; }
  .split > * + *, .split--flip > * + * { margin-top: 26px; }
  .split--flip > :first-child { order: 0; }
  .bleed-r, .bleed-l { margin-right: 0; margin-left: 0; }
  .overlap, .overlap--deep { margin-top: 0; }
  .tilt, .tilt--b, .tilt--hard { transform: none; }

  /* Drawn panels go full width and stay legible. */
  .fx, .vx { max-width: 100%; }
  .fx__key, .vx__label { min-width: 0; }
  .fx__eq { height: 42px; }
  .fx__eq i { width: 10px; }
  .vx__stage[data-ratio="9-16"] { max-height: 260px; }

  /* Objects in a shell sit centred at a readable size. */
  .split .dev3d__body, .split--flip .dev3d__body { width: min(66vw, 280px); margin-inline: auto; }
  .spill::before { inset: -8% -12%; }

  /* ----------------------------------------------------------- the rails */

  /* Shorter tiles, so a carousel is a band on the page rather than the whole
     screen. Two rows of a phone-height tile is taller than the device reading
     it. */
  .marquee { --mg: 10px; }
  .marquee img { width: 132px; height: auto; }
  .marquee--scenes img { width: 112px; }
  .marquee picture { padding: 3px; border-radius: 17px; }
  .marquee picture::after { inset: 3px; border-radius: 14px; }
  .marquee img { border-radius: 14px; }
  /* The shared grid cell that makes copy and rail parallel on desktop would
     stack them on top of each other here, so on a phone the band goes back to
     being two rows in flow. */
  .band { display: block; }
  .band > * { grid-area: auto; }
  .band__copy { width: 100%; margin: 0 0 22px; }
  .band__rail { margin: 0; }
  .band-full .panel { padding: 18px; }
  .marquee img { height: 232px; width: auto; }
  .marquee--scenes img { height: 196px; }

  /* --------------------------------------------------------------- tiers */

  .tiers { grid-template-columns: 1fr; }
  .beats { grid-template-columns: 1fr; gap: 18px; }
  .beat { padding-top: 16px; }

  /* -------------------------------------------------------------- chrome */

  .hdr { padding: 9px 0; }
  .hdr__in { gap: 12px; }
  .brand { font-size: 17px; gap: 9px; }
  .brand img { height: 32px; }
  .hdr .btn { padding: 9px 16px; font-size: 14px; }

  .ftr { padding: 46px 0 38px; }
  .ftr__cols { grid-template-columns: 1fr 1fr; gap: 26px; }



  /* Character-based measures are a desktop idea. 56ch at phone type size is
     545px, which is wider than the phone — the band panels were running off
     both edges. !important because these are authored as inline style
     attributes, which is the one case it is the correct tool. */
  .stack[style*="max-width"],
  .panel[style*="max-width"],
  .band__copy > * { max-width: 100% !important; }

  /* ------------------------------------------------------------- the dock
   *
   * A phone visitor decides in seconds and should never have to scroll back to
   * find the download. This sits in the thumb zone for the whole page after the
   * hero, and carries the two objections worth answering in four words.
   *
   * It appears only once the hero's own button is gone, so there are never two
   * competing calls to action on screen — the one-primary-action rule still
   * holds, it just travels.
   */
  .dock {
    display: block;            /* site.css hides it everywhere but here */
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px var(--bleed) calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--ground) 62%, rgb(from var(--ground) r g b / 0));
    transform: translateY(120%);
    transition: transform .34s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
  }
  .dock.is-up { transform: none; pointer-events: auto; }
  .dock__btn {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 13px 20px; border-radius: 999px; text-decoration: none;
    color: #150A20;
    font-family: var(--display); font-weight: 900; font-size: 17px;
    letter-spacing: -0.015em;
    background: linear-gradient(120deg, oklch(0.86 0.14 var(--hue)),
                                        oklch(0.80 0.16 calc(var(--hue) + 48)));
    box-shadow: 0 12px 34px -12px oklch(0.62 0.19 var(--hue) / .9);
  }
  .dock__btn em { font-style: normal; font-size: 11px; font-weight: 800; opacity: .72; }
  /* the dock covers the footer's last line otherwise */
  .ftr { padding-bottom: 104px; }

  /* --------------------------------------------------------- the order
   *
   * Proof moves up. On a phone the reader is deciding before they have read any
   * feature copy, so the five stars and the real reviews come straight after
   * the hero instead of eight sections later. DOM order is left alone so the
   * document still reads sensibly to a crawler. */
  main { display: flex; flex-direction: column; }
  main > section { order: 2; }
  .hero      { order: 0; }   /* first, always */
  #reviews   { order: 1; }   /* proof straight after it, before any feature copy */

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

  /* Scroll-scrubbed arrivals travel less on a short viewport: 96px of movement
     is a third of the screen here, which reads as jolting rather than alive. */
  .enter, .enter-h, .enter--object { animation-range: entry 6% cover 30%; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes enterUp {
        from { opacity: 0; transform: translate3d(0, 42px, 0) scale(.97); }
        to   { opacity: 1; transform: none; }
      }
      @keyframes enterTurn {
        from { opacity: 0; transform: translate3d(0, 52px, 0) rotate(2deg) scale(.95); }
        to   { opacity: 1; transform: none; }
      }
      @keyframes enterHead {
        from { opacity: 0; transform: translate3d(0, 30px, 0); }
        to   { opacity: 1; transform: none; }
      }
      /* Parallax off. On a touch screen the scroll is already kinetic and the
         two fight each other. */
      .drift { animation: none !important; }
    }
  }

  /* The headline ripple gets smaller amplitude; at phone type size the desktop
     travel makes the line look unstable. */
  @keyframes waveGlyph {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    28%      { transform: translate3d(0, -2.2px, 0) rotate(-0.6deg); }
    62%      { transform: translate3d(0, 2px, 0) rotate(0.5deg); }
  }
}

/* ------------------------------------------------- phone held sideways
 *
 * A landscape phone is ~844x390: plenty of width, almost no height. Stacking
 * the hero here is the wrong instinct — a single column needs 889px of height
 * to say what it has to say and the call to action ends up 75px below the fold.
 *
 * So this case goes back to TWO columns. It is the same reasoning as the
 * desktop layout, applied for the same reason: when a viewport has width to
 * spare and no height, columns are how you buy vertical room. The type and the
 * device shrink to match, and the secondary paragraph steps out since the lede
 * already carries the definition.
 */
@media (max-height: 540px) and (min-width: 640px) {
  .hero { min-height: 0; padding: 14px 0 0; display: flex; align-items: center; }
  .split--far {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(18px, 3vw, 40px);
    align-items: center;
  }
  h1 { font-size: clamp(26px, 4.4vw, 38px); line-height: 1.0; }
  .lede { font-size: clamp(14px, 1.9vw, 16px); line-height: 1.34; }
  .hero p:not(.lede) { display: none; }
  .hero .stack { gap: 10px; }

  .cta { flex-direction: row; align-items: center; gap: 10px; width: auto; }
  .cta .btn { width: auto; padding: 11px 20px; font-size: 15px; }
  .badge { padding: 7px; }
  .badge img { height: 34px; }
  .pills { gap: 6px; }
  .pill { font-size: 11.5px; padding: 5px 10px; }

  .hero__device { margin: 0; display: block; margin-bottom: -60px; }
  .hero__device .dev3d__body { width: min(150px, 20vw, 62svh); }
  .hero__ghost { display: none; }
  .rating { position: static; transform: none; flex-direction: row; gap: 7px; }
  .rating__stars { flex-direction: row; gap: 3px; }
  .rating__stars svg { width: 12px; height: 12px; }
  .rating__say { writing-mode: horizontal-tb; font-size: 10px; letter-spacing: .08em; }

  .section { padding: 30px 0; }
  .marquee img { height: 190px; }
  .marquee--scenes img { height: 160px; }
}