/* Standalone overrides for the "Our Story" page. Loaded last. */

/* Header: logo only, floating top-left, no bar */
.os-nav-wrap {
  pointer-events: none;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.os-nav-brand {
  height: 52px;
  padding: 0 0 0 16px;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
  animation: none;
}
.os-nav-logo,
.os-nav-wordmark {
  text-shadow: none;
}
.os-nav-brand:hover .os-nav-logo {
  transform: scale(1.1);
}

@media (max-width: 767px) {
  .os-nav-brand {
    height: 49px;
    padding-left: 15px;
  }
}

/* No text shadows. Barely visible, and repainting the caption shadow under
   the per-word reveal stuttered chapter changes in Safari. The intro text
   matches for consistency. */
.os-chapter,
.os-hero-title,
.os-hero-body {
  text-shadow: none;
}

/* Mobile page padding. The mobile rail rule in chapters.js aligns chips to it,
   and is chosen by CONFIG.MOBILE_QUERY, so it is defined at every width. */
.os-shell {
  --os-pad-m: 17px;
}

/* Mobile layout per Design SRC/mobile (393×852 frames, viewport y = design y − 48) */
@media (max-width: 767px) {
  .os-rail {
    top: 99px;
    height: 29px;
  }
  .os-rail-chip {
    padding: 6px 10px;
  }

  .os-copy {
    top: 151px;
    left: var(--os-pad-m);
    width: 280px;
  }
  .os-chapter {
    letter-spacing: -0.01em;
  }

  .os-hero {
    top: 107px;
  }
  .os-hero-title {
    font-size: 36px;
    line-height: 32px;
  }
  .os-hero-body {
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.01em;
  }
  .os-scroll-cue {
    gap: 6px;
    margin-top: 23px;
  }
  .os-scroll-cue-badge {
    width: 21px;
    height: 21px;
    border-radius: 7px;
  }

  /* Play: not in any design; keep bottom-centre, clear the home-indicator area */
  .os-play {
    inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .os-shell {
    --os-play-gap: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* Mobile browser bars (SPEC §5.7). story.js adds .os-frozen on mobile and, once
   at load, sets --os-stage-h to the large viewport height (bars collapsed) and
   --os-view-h to the height visible at load. They change only when the width
   does (rotation). The art always fills the screen; the bars just cover or
   uncover its bottom. Play sits above the bottom of the load-time view. */
/* Fixed, not sticky: with the bars showing, the stage is taller than the
   visible screen, so a sticky stage came unstuck over the last bar-height of
   scroll and the whole page slid up at the end. The wrapper still sets the
   scroll length. */
.os-frozen .os-sticky {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--os-stage-h);
}
.os-frozen {
  overscroll-behavior: none;
}
.os-frozen .os-play {
  inset-block-end: auto;
  top: calc(var(--os-view-h) - var(--os-play-gap, 28px));
  translate: -50% -100%;
}

/* Rotate overlay: phones in landscape (mobile assets are portrait only). The
   media query matches CONFIG.LANDSCAPE_QUERY, which pauses Play. Design sizes
   (64px text, 285×161 icon, 35px gap: a 693×161 block) are shown at 75% at
   most; on smaller screens the whole block scales down further by
   --os-rotate-u. */
.os-rotate {
  display: none;
}
@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .os-rotate {
    --os-rotate-pad: max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --os-rotate-u: min(0.75px, calc((100vw - 2 * var(--os-rotate-pad)) / 693), calc((100dvh - 48px) / 161));
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(35 * var(--os-rotate-u));
    background: #000;
    touch-action: none;
  }
  .os-rotate-icon {
    flex-shrink: 0;
    width: calc(285 * var(--os-rotate-u));
    height: calc(161 * var(--os-rotate-u));
  }
  .os-rotate-text {
    margin: 0;
    color: #fff;
    font-family: var(--font-inter), "Inter", system-ui, sans-serif;
    font-size: calc(64 * var(--os-rotate-u));
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
  }
}

/* Story length: one constant, overridable from JS via --story-length */
.os-wrapper {
  height: var(--story-length, 4184vh);
}

/* Animation canvases: intro and main share an identical box (HANDOFF §4.1) */
.os-canvas-el,
.os-intro-canvas-el {
  display: block;
  width: 100%;
  height: 100%;
}

/* Intro → story handoff (SPEC §5.1, TASK-09). The intro canvas cuts instantly;
   hero and story UI opacity are written inline by ui-phase.js per frame. */
.os-intro,
.os-intro-hidden,
.os-story {
  transition: none;
}
/* The hero stays inside .os-intro: on a separate layer above it, Safari drew
   the intro canvas over the hero. So the cut hides only the intro's sky and
   canvas, and ui-phase.js fades the hero on its own. */
.os-intro-hidden {
  opacity: 1;
  visibility: visible;
  background: none;
}
.os-intro-hidden .os-intro-canvas {
  visibility: hidden;
}

/* First paint (story.js): the whole page stays hidden until the intro has
   drawn its first frame, then fades in as one. */
.os-shell {
  transition: opacity 0.3s ease-out;
}
.os-shell.os-booting {
  opacity: 0;
}
/* Behind the fade: the intro sky (same gradient, one screen tall), so the page
   appears out of blue rather than white. */
body {
  background: linear-gradient(180deg, var(--os-sky-deep) 0%, var(--os-sky-mid) 100%) top / 100% 100dvh no-repeat var(--os-sky-mid);
}
@media (prefers-reduced-motion: reduce) {
  .os-shell {
    transition-duration: 1ms;
  }
}