/* One Turn TILT Motion System v1
   Broadcast graphics + esports HUD + restrained sci-fi interface motion.
   All motion is enhancement-only and disabled for reduced-motion users. */

:root {
  --motion-micro: 160ms;
  --motion-fast: 220ms;
  --motion-card: 440ms;
  --motion-section: 620ms;
  --motion-hero: 900ms;
  --motion-ease: cubic-bezier(.22,.72,.2,1);
  --motion-ease-sharp: cubic-bezier(.3,.1,.2,1);
}

/* ── Global reveal system ───────────────────────────────────────── */
html.motion-enabled .motion-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-y, 22px), 0);
  filter: blur(var(--motion-blur, 0px));
  transition:
    opacity var(--motion-duration, var(--motion-section)) var(--motion-ease) var(--motion-delay, 0ms),
    transform var(--motion-duration, var(--motion-section)) var(--motion-ease) var(--motion-delay, 0ms),
    filter var(--motion-duration, var(--motion-section)) var(--motion-ease) var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

html.motion-enabled .motion-reveal.motion-from-left { --motion-y: 0px; transform: translate3d(-24px,0,0); }
html.motion-enabled .motion-reveal.motion-from-right { --motion-y: 0px; transform: translate3d(24px,0,0); }
html.motion-enabled .motion-reveal.motion-scale { --motion-y: 0px; transform: scale(.985); }

html.motion-enabled .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: none;
}

/* Section title rhythm */
.motion-title-line {
  position: relative;
}
.motion-title-line::after {
  content: "";
  display: block;
  width: min(140px, 34%);
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--red), rgba(229,57,53,0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 680ms var(--motion-ease) 140ms;
}
.motion-title-line.is-visible::after { transform: scaleX(1); }

/* ── Hero sequencing ────────────────────────────────────────────── */
html.motion-enabled #splash .motion-hero-item {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(2px);
  transition:
    opacity 700ms var(--motion-ease) var(--hero-delay, 0ms),
    transform 700ms var(--motion-ease) var(--hero-delay, 0ms),
    filter 700ms var(--motion-ease) var(--hero-delay, 0ms);
}
html.motion-enabled #splash .motion-hero-item.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
  filter: none;
}
html.motion-enabled #splash .hero-logo.motion-hero-item {
  transform: translate3d(0, 12px, 0) scale(.965);
}
html.motion-enabled #splash .hero-logo.motion-hero-item.is-visible {
  transform: translate3d(0,0,0) scale(1);
}
#splash .hero-scrim::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 74px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229,57,53,.9), transparent);
  transform: scaleX(0);
  transform-origin: center;
  opacity: .7;
  pointer-events: none;
}
html.motion-enabled #splash.hero-sequence-live .hero-scrim::after {
  animation: motionHeroLine 1100ms var(--motion-ease) 250ms both;
}
@keyframes motionHeroLine {
  0% { transform: scaleX(0); opacity: 0; }
  55% { opacity: .8; }
  100% { transform: scaleX(1); opacity: .35; }
}

/* ── Editorial / card interactions ─────────────────────────────── */
.update-card,
.home-event-mini,
.feature-card,
.media-card,
.asset-card,
.liga-link-grid .feature-card,
.coverage-card,
.wr-row {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}
.update-card:hover,
.home-event-mini:hover,
.feature-card:hover,
.media-card:hover,
.asset-card:hover,
.liga-link-grid .feature-card:hover,
.coverage-card:hover {
  transform: translate3d(0,-4px,0);
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
}
.update-card-thumb,
.home-event-feature,
.media-card,
.liga-highlight-card {
  overflow: hidden;
}
.update-card-thumb img,
.media-card img,
.home-event-feature::before {
  transition: transform 520ms var(--motion-ease);
}
.update-card:hover .update-card-thumb img,
.media-card:hover img {
  transform: scale(1.035);
}
.update-card-cta,
.home-events-list-head a,
.event-link-btn {
  transition: color var(--motion-micro) ease, transform var(--motion-micro) var(--motion-ease);
}
.update-card:hover .update-card-cta { transform: translate3d(4px,0,0); }

/* Buttons: small, consistent interaction only */
.button,
.btn,
.event-filter,
.view-toggle,
.event-ics-btn,
.event-link-btn,
.tool-btn {
  transition:
    transform var(--motion-micro) var(--motion-ease),
    border-color var(--motion-micro) ease,
    background-color var(--motion-micro) ease,
    color var(--motion-micro) ease,
    box-shadow var(--motion-micro) ease;
}
.button:active,
.btn:active,
.event-filter:active,
.view-toggle:active,
.event-ics-btn:active,
.event-link-btn:active,
.tool-btn:active { transform: translateY(1px) scale(.99); }

/* ── Filter / content swap transitions ─────────────────────────── */
.motion-swap-target {
  transition: opacity 150ms ease, transform 220ms var(--motion-ease);
}
.motion-swap-target.motion-swap-out {
  opacity: 0;
  transform: translate3d(0,8px,0);
}
.motion-swap-target.motion-swap-in {
  animation: motionSwapIn 360ms var(--motion-ease) both;
}
@keyframes motionSwapIn {
  from { opacity: 0; transform: translate3d(0,12px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

/* Calendar month direction */
.motion-calendar-next { animation: motionCalendarNext 320ms var(--motion-ease) both; }
.motion-calendar-prev { animation: motionCalendarPrev 320ms var(--motion-ease) both; }
@keyframes motionCalendarNext {
  from { opacity: 0; transform: translate3d(16px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes motionCalendarPrev {
  from { opacity: 0; transform: translate3d(-16px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
.cal-event .cal-dot { animation: motionDotPop 300ms var(--motion-ease) both; }
.cal-event .cal-dot:nth-child(2) { animation-delay: 45ms; }
.cal-event .cal-dot:nth-child(3) { animation-delay: 90ms; }
@keyframes motionDotPop {
  from { opacity: 0; transform: scale(.3); }
  to { opacity: 1; transform: scale(1); }
}
.cal-today { position: relative; }
.cal-today::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(229,57,53,.75);
  pointer-events: none;
  animation: motionTodayRing 640ms var(--motion-ease) both;
}
@keyframes motionTodayRing {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Roster motion ─────────────────────────────────────────────── */
.card-slot {
  transition:
    left 450ms cubic-bezier(.4,0,.2,1),
    transform 220ms var(--motion-ease),
    filter 220ms ease;
  transform-origin: center bottom;
}
.card-slot:hover {
  transform: translate3d(0,-4px,0) rotateX(1deg);
}
.card-slot.motion-selected {
  transform: translate3d(0,-7px,0);
}
.active-wrap.visible.motion-roster-switch {
  animation: motionRosterSwitch 520ms var(--motion-ease) both;
}
@keyframes motionRosterSwitch {
  0% { opacity: 0; transform: translate3d(12px,8px,0) scale(.985); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
.active-label { transition: opacity 220ms ease, transform 220ms var(--motion-ease); }
.active-wrap.visible .active-label { animation: motionLabelIn 420ms var(--motion-ease) 160ms both; }
@keyframes motionLabelIn {
  from { opacity: 0; transform: translate3d(0,6px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

/* ── Featured stream: broadcast entrance ───────────────────────── */
.featured-stream-layout { position: relative; overflow: hidden; }
.featured-stream-layout::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: -28%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(229,57,53,.28), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
  opacity: 0;
}
.featured-stream-live .featured-stream-layout::before {
  animation: motionBroadcastSweep 1100ms var(--motion-ease) 150ms both;
}
.featured-stream-live .featured-stream-player-shell {
  animation: motionBroadcastPlayer 600ms var(--motion-ease) both;
}
.featured-stream-live .featured-stream-info {
  animation: motionBroadcastInfo 620ms var(--motion-ease) 100ms both;
}
@keyframes motionBroadcastSweep {
  0% { left: -28%; opacity: 0; }
  18% { opacity: .9; }
  100% { left: 115%; opacity: 0; }
}
@keyframes motionBroadcastPlayer {
  from { opacity: 0; transform: translate3d(-14px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes motionBroadcastInfo {
  from { opacity: 0; transform: translate3d(14px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

/* ── Data animation ────────────────────────────────────────────── */
.motion-bar-width {
  width: 0 !important;
  transition: width 850ms var(--motion-ease) var(--motion-delay, 0ms) !important;
}
.motion-bar-width.is-visible {
  width: var(--motion-target-width) !important;
}
.motion-bar-height {
  height: 0 !important;
  transition: height 760ms var(--motion-ease) var(--motion-delay, 0ms) !important;
}
.motion-bar-height.is-visible {
  height: var(--motion-target-height) !important;
}

/* Meta matrix reveals as a broadcast data package */
.matrix-table tbody tr.motion-matrix-row {
  opacity: 0;
  transform: translate3d(-10px,0,0);
  transition: opacity 420ms var(--motion-ease) var(--motion-delay,0ms), transform 420ms var(--motion-ease) var(--motion-delay,0ms);
}
.matrix-table tbody tr.motion-matrix-row.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.matrix-cell {
  transition: filter var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease), outline-color var(--motion-fast) ease;
}
.matrix-cell:hover {
  position: relative;
  z-index: 2;
  transform: scale(1.045);
  filter: brightness(1.14);
  outline: 1px solid rgba(255,255,255,.18);
}

/* ── Tournament reports ────────────────────────────────────────── */
.stat {
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(229,57,53,0));
  transition: right 620ms var(--motion-ease) var(--motion-delay,0ms);
}
.stat.is-visible::after { right: 0; }

.report-section.motion-reveal summary,
.section.motion-report-section .section-head {
  position: relative;
}
.report-section.motion-reveal summary::after,
.section.motion-report-section .section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--red), transparent 72%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--motion-ease) 120ms;
}
.report-section.motion-reveal.is-visible summary::after,
.section.motion-report-section.is-visible .section-head::after { transform: scaleX(1); }

/* Round-by-round tournament story package */
.round.motion-round {
  position: relative;
  overflow: hidden;
}
.round.motion-round::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 100%;
  width: 3px;
  background: linear-gradient(180deg, var(--red), rgba(229,57,53,.08));
  transition: bottom 700ms var(--motion-ease) var(--motion-delay,0ms);
}
.round.motion-round.is-visible::before { bottom: 0; }
.round.motion-round .match {
  opacity: .48;
  transform: translate3d(-6px,0,0);
  transition: opacity 360ms ease var(--match-delay,0ms), transform 360ms var(--motion-ease) var(--match-delay,0ms);
}
.round.motion-round.is-visible .match {
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Prize pools: row underline + first-place emphasis */
#prize-pool tbody tr {
  position: relative;
  transition: background-color 260ms ease, transform 260ms var(--motion-ease);
}
#prize-pool tbody tr:hover { background: rgba(255,255,255,.025); }
#prize-pool tbody tr:first-child.is-visible td {
  animation: motionPrizeChampion 800ms var(--motion-ease) 220ms both;
}
@keyframes motionPrizeChampion {
  0% { background-color: rgba(229,57,53,0); }
  45% { background-color: rgba(229,57,53,.12); }
  100% { background-color: rgba(229,57,53,.035); }
}

/* ── Navigation motion ─────────────────────────────────────────── */
@media (min-width: 901px) {
  .nav-links a:not(.nav-cta) {
    position: relative;
    border-bottom: 0 !important;
  }
  .nav-links a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -4px;
    height: 2px;
    background: var(--red);
    transition: left var(--motion-fast) var(--motion-ease), right var(--motion-fast) var(--motion-ease);
  }
  .nav-links a:not(.nav-cta):hover::after,
  .nav-links a:not(.nav-cta).active::after { left: 0; right: 0; }
}

@media (max-width: 900px) {
  html.motion-enabled .nav-links {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(18px,-6px,0) scale(.985);
    transform-origin: top right;
    transition: opacity 180ms ease, transform 260ms var(--motion-ease), visibility 0s linear 260ms;
  }
  html.motion-enabled .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0,0,0) scale(1);
    transition: opacity 180ms ease, transform 260ms var(--motion-ease), visibility 0s;
  }
  html.motion-enabled .nav-links a {
    opacity: 0;
    transform: translate3d(10px,0,0);
    transition: opacity 250ms ease var(--nav-delay,0ms), transform 300ms var(--motion-ease) var(--nav-delay,0ms), color 150ms ease;
  }
  html.motion-enabled .nav-links.open a { opacity: 1; transform: translate3d(0,0,0); }
  body.motion-nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(2px);
    animation: motionNavBackdrop 180ms ease both;
  }
  @keyframes motionNavBackdrop { from { opacity:0; } to { opacity:1; } }
}

/* ── Focus-visible quality ─────────────────────────────────────── */
.motion-enabled :focus-visible {
  outline: 2px solid var(--red2);
  outline-offset: 3px;
}

/* ── Reduced motion: accessibility is non-negotiable ─────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  html.motion-enabled .motion-reveal,
  html.motion-enabled #splash .motion-hero-item,
  .matrix-table tbody tr.motion-matrix-row,
  .round.motion-round .match {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .motion-bar-width { width: var(--motion-target-width) !important; }
  .motion-bar-height { height: var(--motion-target-height) !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width:900px) {
  html.motion-enabled .nav-links { display:none; opacity:1; visibility:visible; transform:none; }
  html.motion-enabled .nav-links.open { display:flex; }
  html.motion-enabled .nav-links a { opacity:1; transform:none; }
}

/* ── Selective pointer depth / countdown state changes ─────────── */
.motion-enabled .splash-content.reveal-on-load { animation: none; }
#splash .hero-carousel {
  transform: translate3d(var(--hero-parallax-x,0px), var(--hero-parallax-y,0px), 0) scale(1.025);
  transition: transform 320ms ease-out;
  will-change: transform;
}
.active-scene {
  transform: perspective(1000px) rotateX(var(--roster-tilt-x,0deg)) rotateY(var(--roster-tilt-y,0deg));
  transition: transform 180ms ease-out, filter 220ms ease;
  will-change: transform;
}
.motion-countdown-tick { animation: motionCountdownTick 420ms var(--motion-ease) both; }
@keyframes motionCountdownTick {
  from { opacity: 0; transform: translate3d(0,-5px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  #splash .hero-carousel,
  .active-scene { transform: none !important; transition: none !important; }
}

/* ── Rolling countdown digits ──────────────────────────────────── */
.event-countdown,
.hero-event-countdown {
  font-variant-numeric: tabular-nums;
}
.motion-digit-window {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  vertical-align: -.12em;
  min-width: .62em;
}
.motion-digit-track {
  display: flex;
  flex-direction: column;
  line-height: 1.15em;
  animation: motionDigitRoll 460ms var(--motion-ease) var(--digit-delay,0ms) both;
}
.motion-digit-track > span { display: block; height: 1.15em; }
.motion-digit-enter {
  display: inline-block;
  animation: motionDigitEnter 360ms var(--motion-ease) var(--digit-delay,0ms) both;
}
@keyframes motionDigitRoll {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0,-1.15em,0); }
}
@keyframes motionDigitEnter {
  from { opacity:0; transform: translate3d(0,-4px,0); }
  to { opacity:1; transform: translate3d(0,0,0); }
}
.meta-inline-number {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}