/* =========================================================================
   cb-home10.css -- "THE HOUSE", filmed (Home 10 preview)

   POLARITY, as in Home 9: the FLAT layout is the default and every fixed-stage
   rule is nested under html.cb10-on, which home10.js only adds once the stage
   is built. So no-JS, reduced-motion and an outright failure all land on a
   perfectly ordinary stacked page instead of on eight panels piled on top of
   each other at opacity 0.
   ========================================================================= */

:root {
  --cb10-navy: #1f3055;
  --cb10-ink: #f4f1ea;
  --cb10-gold: #c9a84c;
  --cb10-cream: #f0ebe0;
}

/* ---- flat fallback (the default) ---------------------------------------- */

/* The field the FLAT page sits on, mirroring cb-home9.css's
   body.cb-page--home9-preview rule.
   Not optional and easy to miss: .cb10-on sets a background, but the flat
   fallback is what phones, tablets, reduced-motion and no-JS all get, and
   without this it inherits the theme default. The cards are dark glass with
   cream text, so on a light body the copy between them -- the scroll cue, the
   credits -- goes unreadable. The harness masks this by setting its own body
   background inline; the WordPress page has no such thing. */
body.cb-page--home10-preview {
  background: radial-gradient(130% 115% at 50% -8%,
                #1B3C55 0%, #12283f 34%, #0A1730 62%, #060d1c 100%) fixed;
  color: var(--cb10-ink);
}

.cb10-stage { display: none; }
#cb10-spacer { display: none; }

.cb10-page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.cb10-page__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 2rem;
}

/* ---- the walk ------------------------------------------------------------ */
.cb10-on body { background: #0a1730; }

/* The spacer is the ONLY thing making the document tall. Its height is set in
   JS from the same constant the clock divides by, so the two can never drift --
   a spacer sized in CSS and a clock sized in JS is how a walk ends up finishing
   before, or after, the page does. */
.cb10-on #cb10-spacer {
  display: block;
  width: 100%;
  pointer-events: none;
}

.cb10-on .cb10-stage {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #0a1730;
  overflow: hidden;
}

.cb10-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover, so the 16:9 plates fill any viewport without letterboxing. The rooms
     are framed with enough air that cropping the sides costs nothing. */
  object-fit: cover;
  opacity: 0;
  /* Only ONE property is animated here and only between sections. The frame
     underneath is identical (end_image pinning), so this fade exists purely to
     cover the instant where one <video> element hands over to the next. */
  transition: opacity .28s linear;
  will-change: opacity;
}
.cb10-frame.is-on { opacity: 1; }

/* A vignette + floor scrim, so white page text always has something to sit on
   regardless of which room is behind it. Sits above the video, below the pages. */
.cb10-on .cb10-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(4,10,24,0) 42%, rgba(4,10,24,.55) 100%),
    linear-gradient(to bottom, rgba(4,10,24,.30) 0%, rgba(4,10,24,0) 26%, rgba(4,10,24,0) 55%, rgba(4,10,24,.62) 100%);
}

/* ---- the pages ----------------------------------------------------------- */
.cb10-on .cb10-pages {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cb10-on .cb10-page {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 60rem);
  /* dvh, with a vh fallback for anything that lacks it.
     On mobile 100vh is the LARGEST viewport -- the height with the address bar
     collapsed -- so a vh-sized panel is taller than the screen whenever the bar
     is showing, and its last line hides behind browser chrome. dvh tracks the
     viewport as the bar moves. Both declared: the vh line is the fallback,
     the dvh line wins wherever it parses. */
  max-height: 82vh;
  max-height: 82dvh;
  margin: 0;
  padding: 0;
  opacity: 0;
  /* home10.js is the only writer of opacity. No transition here on purpose --
     the fade is driven per-frame from the same clock as the picture, so a CSS
     transition on top would fight it and lag the text behind the walk. */
  will-change: opacity;
}

/* Home 9 hangs a photo behind every panel (.cb9-page__plate, one of the Home 2
   plates). Home 10 already HAS a picture -- the room the reader is standing in
   -- so the panel must not carry a second one. Without this the plate showed
   straight through the translucent skin: a stone cottage hanging in the middle
   of the entry hall, a lake in the middle of the corridor.
   .cb10-page__shot is Home 10's own name for the same slot, kept for when a
   panel is authored here rather than lifted. */
.cb10-on .cb10-page__shot,
.cb10-on .cb10-page .cb9-page__plate { display: none; }

/* The panel markup is lifted verbatim from Home 9, so the inner wrapper is
   still .cb9-page__skin. Both selectors are listed rather than renaming the
   markup: cb-home9.css styles everything INSIDE that wrapper, and renaming
   would mean re-authoring all of it here for no gain. */
.cb10-on .cb10-page__skin,
.cb10-on .cb10-page .cb9-page__skin {
  overflow: auto;
  /* The inner scroller is what actually clips, so it needs the same dvh
     treatment as the panel above -- see the note there. */
  max-height: 82vh;
  max-height: 82dvh;
  /* Momentum scrolling inside the panel on iOS.
     Deliberately NOT overscroll-behavior: contain. Scroll CHAINING is the
     navigation model: a gesture inside a tall panel scrolls the panel, and once
     it bottoms out it chains to the document and walks on to the next room.
     Containing it traps the reader in the panel with no way forward -- on a
     phone, where the panel is nearly the whole screen and there is no nav rail
     to escape with, that is a dead end. */
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border-radius: 14px;
  background: rgba(10, 20, 42, .72);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  border: 1px solid rgba(240, 235, 224, .14);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
  color: var(--cb10-ink);
}

/* ---- nav ----------------------------------------------------------------- */
.cb10-nav {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: none;
  flex-direction: column;
  gap: .55rem;
}
.cb10-on .cb10-nav { display: flex; }

.cb10-nav__dot {
  width: 10px; height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(240, 235, 224, .5);
  background: transparent;
  cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s;
}
.cb10-nav__dot:hover { transform: scale(1.25); }
.cb10-nav__dot.is-active {
  background: var(--cb10-gold);
  border-color: var(--cb10-gold);
  transform: scale(1.3);
}

/* ---- phones and tablets -------------------------------------------------- */
/*
   The walk runs on touch devices too, so these are real layout rules, not a
   fallback. Two things break without them.

   1. THE NAV RAIL COLLIDES WITH THE PANEL. The rail is pinned to the right edge
      and the panel is 92vw wide and centred, so below roughly 900px they occupy
      the same pixels -- the dots sit ON the panel, unreadable and untappable.
      Narrowing the panel to make room would cost reading width on the device
      that has least of it, so on phones the rail goes and scrolling navigates.
      Tablets keep it, with the panel pulled in far enough to clear it.

   2. TAP TARGETS. A 10px dot is well under the ~44px minimum for a finger. On
      the sizes that keep the rail the dot grows a transparent pseudo-element
      padded out to 44px, so the hit area is finger-sized while the dot still
      looks like a dot.
*/
@media (max-width: 900px) {
  /* Clear of the rail (removed below 700px, still present 700-900). */
  .cb10-on .cb10-page { width: min(88vw, 60rem); }
}

@media (hover: none) and (pointer: coarse) {
  .cb10-nav__dot { position: relative; }
  .cb10-nav__dot::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
  }
  /* :hover on a touch device sticks after a tap -- the dot stays enlarged until
     something else is tapped, which reads as the wrong section being active. */
  .cb10-nav__dot:hover { transform: none; }
  .cb10-nav__dot.is-active:hover { transform: scale(1.3); }
}

@media (max-width: 700px) {
  .cb10-on .cb10-nav { display: none; }
  .cb10-on .cb10-page { width: min(94vw, 60rem); }
  /* Give the reading panel more of a short screen, and tighten the padding so
     the gain goes to the words rather than the margin. */
  .cb10-on .cb10-page,
  .cb10-on .cb10-page__skin,
  .cb10-on .cb10-page .cb9-page__skin {
    max-height: 88vh;
    max-height: 88dvh;
  }
  .cb10-on .cb10-page__skin,
  .cb10-on .cb10-page .cb9-page__skin { padding: 1.15rem 1.1rem; }
}

/* Landscape phone: almost no vertical room, so the panel takes nearly all of it
   and the walk plays behind. Keyed on height, not width -- a 740x360 phone on
   its side and a 360x740 phone upright are the same device with the same
   problem in different axes. */
@media (max-height: 460px) {
  .cb10-on .cb10-nav { display: none; }
  .cb10-on .cb10-page,
  .cb10-on .cb10-page__skin,
  .cb10-on .cb10-page .cb9-page__skin {
    max-height: 94vh;
    max-height: 94dvh;
  }
  .cb10-on .cb10-page__skin,
  .cb10-on .cb10-page .cb9-page__skin { padding: .9rem 1rem; }
}

/* ---- reduced motion ------------------------------------------------------ */
/* Not an override of the walk -- the walk is never switched on. cb10-static is
   set instead of cb10-on, so this is just the flat page with the stills shown
   at a comfortable size. */
.cb10-static .cb10-stage,
.cb10-static #cb10-spacer,
.cb10-static .cb10-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cb10-frame { transition: none; }
}