/* ============================================================
   Tock's slide deck — David's introduction, on the phone (or mirrored
   to a projector).

   Six full-screen slides (mascot, two QR-standee concepts, two logo
   lockups, taglines) that open on top of the hub and hand back to it
   when closed.

   Pinned dark on purpose, independent of the visitor's OS theme —
   this runs on a projector where a consistent, deliberate look matters
   more than following whatever theme happens to be set on the phone
   that day, and dark reads better projected. The one exception is
   slide 6: its heading is dark text baked into a transparent PNG,
   drawn assuming a light backing, so it gets its own light card
   (.slides-frame.is-light below) rather than dragging the whole deck
   back to light for one slide.

   The trigger is deliberately not a labelled button — see hub.js,
   where it's wired to the masthead clock-tower mark. That same mark
   is also where the open/close iris below is centred, so the deck
   quite literally comes out of, and goes back into, the clock.
   ============================================================ */

.slides-root {
  --paper: #16130f;
  --paper-2: #201b16;
  --paper-3: #2b241d;
  --ink: #f3ece1;
  --ink-2: #c4b8a8;
  --ink-3: #91856f;
  --line: #3a3128;
  --brass: #d4ab6a;
  --brass-bright: #ecc98d;
  --brass-deep: #b08d57;
  color-scheme: dark;

  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  /* The open/close motion below. JS drives the actual x/y/radius (it needs
     the clock mark's live screen position), this just declares how a
     change to clip-path gets there — quick and gathering-in on the way
     closed, a touch slower and more deliberate on the way open. Swapped by
     toggling .is-closing, see tock-slides.js. */
  clip-path: circle(0px at 50% 50%);
  transition: clip-path .58s cubic-bezier(.32, .72, 0, 1);
}
.slides-root.is-open { display: block; }
.slides-root.is-closing {
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.55, 0, 1, .45);
}

.slides-backdrop {
  position: absolute;
  inset: 0;
  background: var(--paper);
}

.slides-frame.is-light {
  background: #f7f2e8;
  padding: 30px 24px;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  max-width: 92%;
  max-height: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slides-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12px + var(--safe-top)) max(12px, var(--safe-right)) 10px max(12px, var(--safe-left));
}

.slides-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.slides-close {
  position: absolute;
  top: calc(8px + var(--safe-top));
  right: max(8px, var(--safe-right));
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper-2);
  transition: background-color .18s ease;
}
.slides-close:active { background: var(--paper-3); }
.slides-close svg { width: 20px; height: 20px; }

.slides-stage {
  position: absolute;
  top: calc(52px + var(--safe-top));
  bottom: calc(96px + var(--safe-bottom));
  left: 0; right: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.slides-track {
  display: flex;
  height: 100%;
  transition: transform .36s cubic-bezier(.32, .72, 0, 1);
}
.slides-track.is-dragging { transition: none; }

.slides-slide {
  flex: none;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 8px 20px;
}

/* Wraps every slide's image. Bare (no background) for the five that read
   fine on the dark stage; .is-light adds the paper card slide 6 needs —
   see the comment at the top of this file. */
.slides-frame {
  max-width: 100%;
  max-height: 100%;
}
.slides-frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  -webkit-user-drag: none;
  user-select: none;
}
.slides-frame.is-light img {
  border-radius: var(--radius-sm);
}

.slides-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px max(16px, var(--safe-left)) calc(14px + var(--safe-bottom)) max(16px, var(--safe-right));
}

.slides-dots {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.slides-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .2s ease, transform .2s ease;
}
.slides-dots i.active {
  background: var(--brass);
  transform: scale(1.35);
}

.slides-nav {
  flex: none;
  min-width: 96px;
  min-height: var(--tap);
  padding: 10px 18px;
}
.slides-nav.slides-back {
  visibility: visible;
}
.slides-nav.slides-back[hidden] {
  visibility: hidden;
  display: inline-flex; /* keep the layout slot so Next doesn't jump around */
}

@media (max-width: 360px) {
  .slides-nav { min-width: 78px; padding: 10px 14px; }
}