/* ==========================================================================
   THE LIVE EXPLORE PANELS - index.html §Explore

   Explore ships four screenshots. Each one upgrades itself into the first
   coded chapter from the matching feature page once the reader is near enough
   to be about to see it. explore-demo.js does the fetching, script loading and
   mounting; this file gives those chapters the homepage frame they sit in.

   EVERYTHING HERE IS SPECIFICITY 0,2,0 OR MORE, on purpose. The sheets it
   overrides - wall-demo.css and the four per-tab kits - are fetched at runtime
   and so land AFTER this one in the cascade, where a rule of equal weight
   would win. `.explore-visual .explore-live` beats `.ct-stage` whatever order
   they arrive in; `.explore-live` alone would not.
   ========================================================================== */

/* ── the live layer ─────────────────────────────────────────────────────── */
/* The screenshot is not replaced, it is covered. It is what the markup
   carries, so it is what Googlebot reads, what a phone keeps, what
   prefers-reduced-motion keeps, and what is still on screen if a fetch fails - see the head of explore-demo.js. Two layers in the one screen, crossfaded.

   The live feature wrapper is mounted on the Explore frame, not inside the
   screen, so its own .ct-frame and .ct-caps keep the same relationship they
   have on the feature pages. */
.explore-visual .explore-frame {
  position: relative;
}

.explore-visual .explore-live {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 380ms ease;
  pointer-events: none;
  z-index: 2;
}

.explore-visual.is-live .explore-live { opacity: 1; }
.explore-visual.is-live .explore-screenshot { opacity: 0; transition: opacity 380ms ease; }

.explore-visual .explore-feature-live {
  display: block;
}

.explore-visual .explore-feature-live .ct-frame {
  width: 100%;
  max-width: none;
  box-shadow: none;
}

.explore-visual .explore-feature-live .ct-stage {
  width: 100%;
  max-width: none;
}

/* An idle panel's tab is still a document. The chore cards carry thirty-six
   drifting hearts apiece and the other tabs have loops of their own, and
   `visibility: hidden` does not stop a single one of them - three panels'
   worth would go on animating behind the one being read for as long as the
   reader stayed.

   The engine pauses the camera when a gate closes; this pauses what the tab
   animates for itself. !important because the engine writes the play-state
   inline, and an inline style outranks a class. The two never disagree - a
   gate that is shut has stopped the stage - but a rule that depends on that is
   a rule that breaks when it stops being true. */
.explore-visual .explore-live.is-idle,
.explore-visual .explore-live.is-idle * { animation-play-state: paused !important; }

/* ── the one place four kits tread on each other ────────────────────────── */
/* `.ct-` means two things on this site. wall-demo.css uses it for the shared
   stage vocabulary - .ct-stage, .ct-cam, .ct-frame - and chores-demo.css uses
   it for the Chores TAB, .ct-card and .ct-row and the rest. calendar-demo.css
   then took it for its event dialog, and `.ct-card` there is a 512px-wide
   floating card.
 
   Nothing noticed, because until now no page loaded both kits: a feature page
   brings its own and at most one other. This section is the first thing on the
   site to put all four in one document, and the first thing it did was lay the
   Chores meters out at 512px instead of 404 - three cards and a gap running
   1568px through a 1244px grid, with the third child out past the bezel.
 
   Only `width` leaks. Every other property the two rules disagree about is
   declared by both, so the cascade settles it. This restores what
   chores-demo.css never says because it never had to: the card is a grid item
   and takes its track's width. Specificity 0,3,0, so it does not depend on
   which of the two stylesheets happens to arrive second.
 
   The real fix is for the calendar kit to stop squatting on another tab's
   prefix, which is a rename across calendar-demo.css, tools/cal-build-tab.py,
   /family-calendar/ and /add/ - worth doing, and not worth doing from here.
   tools/explore-probe.js checks that nothing overflows a panel sideways, which
   is the symptom this produced and the one the next collision would too. */
.explore-visual .explore-live .ct-card { width: auto; }

/* ── reduced motion ─────────────────────────────────────────────────────── */
/* explore-demo.js does not upgrade a panel at all with motion reduced, so the
   screenshot is what is on screen and there is nothing here to still. This
   block exists for the case the JS check and this one ever disagree: a live
   layer that arrived anyway must not sit there scrolling. */
@media (prefers-reduced-motion: reduce) {
  .explore-visual .explore-live,
  .explore-visual .explore-live * { animation: none !important; }
  .explore-visual.is-live .explore-screenshot { opacity: 1; }
  .explore-visual .explore-live { opacity: 0; }
}