/* Greybox Watch CTA — ONE centralized playback-button system.
 *
 * Every button that starts movie/TV playback uses .watch-cta (with
 * .watch-cta--hero / .watch-cta--compact where the size demands it):
 *   #hero-play  (hero Watch Now — navigates to the title)
 *   #m-watch    (detail modal Watch Now — starts playback)
 * Playback LOGIC is untouched (js/app.js, js/stream.js, js/hero.js): this
 * file is pure visual + interaction. Old .gx-btn classes stay on the
 * markup for compatibility; these rules win by source order (this sheet
 * loads last) on every tied specificity.
 *
 * Design (from the reference): premium light pill — warm-white surface,
 * near-black text, thin dark precision outline, soft outer shadow, inner
 * top highlight — plus a SLOW, SUBTLE chromatic edge: two short color arcs
 * (cyan→indigo, magenta→amber) traveling the perimeter over ~6s. Most of
 * the border reads dark at any moment. No full rainbow, no neon, no flash.
 *
 * Technique: a masked conic-gradient ring on ::after, rotated via an
 * @property angle (GPU-cheap: one small repaint, no layout, no JS).
 * Without @property support the arcs park statically — still a polished
 * button, animation simply doesn't travel.
 */

/* Animatable gradient angle (progressive enhancement). */
@property --watch-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.watch-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 24px;
  border: 1px solid var(--watch-border);
  border-radius: var(--gx-radius-pill);
  background: linear-gradient(180deg, var(--watch-surface-top), var(--watch-surface) 55%, var(--watch-surface-bottom));
  color: var(--watch-text);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  font-variant-emoji: text; /* ▶ stays a text glyph, never an emoji */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(12, 12, 17, 0.07),
    var(--watch-shadow);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

/* Chromatic perimeter: two short arcs on an otherwise transparent ring,
 * floating just outside the dark outline so the outline always reads. */
.watch-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--watch-angle),
    transparent 0deg,
    var(--watch-chroma-1) 28deg,
    var(--watch-chroma-2) 58deg,
    transparent 92deg,
    transparent 178deg,
    var(--watch-chroma-3) 208deg,
    var(--watch-chroma-4) 238deg,
    transparent 272deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--watch-chroma-rest);
  pointer-events: none;
  transition: opacity 180ms ease;
  animation: watch-chroma-orbit var(--watch-cycle) linear infinite;
}

@keyframes watch-chroma-orbit {
  to { --watch-angle: 360deg; }
}

/* Hover: 1px lift, brighter surface, more present edge. No scale, no flash. */
.watch-cta:hover {
  transform: translateY(-1px);
  border-color: #000;
  background: linear-gradient(180deg, #ffffff, var(--watch-surface) 60%, #f3f1ea);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(12, 12, 17, 0.06),
    var(--watch-shadow-hover);
}

.watch-cta:hover::after {
  opacity: var(--watch-chroma-hover);
}

/* Press: physically pressed — sinks 1px, shadow collapses. No layout shift
 * (transform only). */
.watch-cta:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 2px 5px rgba(12, 12, 17, 0.12),
    var(--watch-shadow-pressed);
}

/* Intentional keyboard focus: bright outer ring. The dual selector outranks
 * the generic .gx-detail .gx-btn rule on the modal button. */
.watch-cta:focus-visible,
.gx-detail .watch-cta:focus-visible {
  outline: 2px solid var(--watch-focus-ring);
  outline-offset: 3px;
}

/* Variants share the base language — size only. */
.watch-cta--hero {
  min-height: 50px;
  padding: 14px 30px;
  font-size: 15.5px;
}

.watch-cta--compact {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 13.5px;
}

/* Small screens: protect the 44px touch floor, tighten padding. */
@media (max-width: 640px) {
  .watch-cta {
    min-height: 44px;
    padding: 11px 22px;
    font-size: 14px;
  }
  .watch-cta--hero {
    min-height: 46px;
    padding: 12px 26px;
    font-size: 14.5px;
  }
}

/* Reduced motion: parked arcs (still polished), no travel, no lift/press
 * movement. Function, hover tint and focus ring are unchanged. */
@media (prefers-reduced-motion: reduce) {
  .watch-cta::after {
    animation: none;
  }
  .watch-cta:hover,
  .watch-cta:active {
    transform: none;
  }
}