/* Angler — 30 · use cases. Tabs over one flipping card. Tokens only. */

.uc { background: var(--paper); }
.uc__wrap { max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); }
.uc__head { text-align: center; }
.uc__eyebrow {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  color: var(--dawn-deep); margin-bottom: 10px;
}
.uc__h {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}

.uc__sub { margin-top: 14px; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.45; color: var(--muted); }

/* Single-demo state: no frame, no title; tabs return above the stage later. */
.uc__stage { margin-top: 40px; }

/* The stage keeps a 16:9 footprint so the flip has depth to rotate in. The video ships its
   own backdrop, so no border; --r-screen because this depicts a screen. */
.uc__stage { position: relative; aspect-ratio: 16 / 9; perspective: 1600px; border-radius: var(--r-screen); overflow: hidden; }
.uc__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transform: rotateY(70deg); backface-visibility: hidden;
  transition: transform .55s var(--ease-house), opacity .4s var(--ease-house), visibility .55s;
}
.uc__slide.is-on  { opacity: 1; visibility: visible; transform: none; }
.uc__slide.is-out { transform: rotateY(-70deg); opacity: 0; visibility: hidden; }
.uc__slide[hidden] { display: block; } /* hidden attr is for AT; the flip owns visibility */

.uc__vid { position: relative; aspect-ratio: 16 / 9; background: var(--parchment); display: grid; place-items: center; }
.uc__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.uc__vid.has-video .uc__video { display: block; }
.uc__vid.has-video .uc__ph { display: none; }
.uc__ph { display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.uc__play { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--ink-soft); display: grid; place-items: center; font-size: 20px; color: var(--ink); }

/* Progress bar: width transition over --len while .is-playing. Cleared and restarted by
   the script on every play so it never carries a stale width. */
.uc__pb { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--line); }
.uc__pb i { display: block; height: 100%; width: 0; background: var(--ink); }
.uc__slide.is-on .uc__pb i { transition: width var(--len, 8000ms) linear; }
.uc__slide.is-on.is-playing .uc__pb i { width: 100%; }

.uc__dots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.uc__dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); transition: background .3s var(--ease-nav); }
.uc__dots i.is-on { background: var(--ink); }