/*
 * The opening "Gold line": the MEDIA mark draws itself in gold, fills, the full stop lands and the mark
 * slides aside for the name (1.4 s, once per window session). It is also the loading screen: it then
 * holds on the logo with a quiet gold line until the app is ready, and fades into it (public/intro.js).
 * The geometry is the TV launcher icon's, so icon, intro and header are one family.
 * Without JavaScript it simply fades away after three seconds.
 */
#intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--bg);
  /* It covers the app while it loads, so nothing underneath can be clicked unseen. */
  cursor: progress;
  animation: intro-safety 0.3s ease 3s forwards;
}
/* intro.js is running: it decides when to leave. */
#intro.play,
#intro.still { animation: none; }
#intro.out { animation: intro-out 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: none; }
#intro.out .intro-lockup { scale: 1.03; transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
#intro[hidden] { display: none; }
.intro-lockup {
  display: flex;
  align-items: center;
  gap: 26px;
  transform: translateX(var(--intro-shift, 0px));
}
.intro-mark {
  width: 120px;
  height: 96px;
  overflow: visible;
}
.intro-bar,
.intro-m-full,
.intro-dot { opacity: 0; }
.intro-m-line {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent-hover) 75%, transparent));
}
.intro-m-full {
  fill: none;
  stroke: url(#intro-gold);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.intro-bar { transform-box: fill-box; transform-origin: center; }
.intro-dot { transform-box: fill-box; transform-origin: center; }
.intro-word {
  color: var(--text);
  font: 800 64px/1 Manrope, Arial, sans-serif;
  letter-spacing: 0.06em;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}
.intro-word span { color: var(--accent); }

/* The timeline starts when intro.js adds .play (it measures the slide first). */
#intro.play .intro-lockup { animation: intro-slide 0.35s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards; }
#intro.play .intro-m-line { animation: intro-draw 0.6s cubic-bezier(0.45, 0, 0.25, 1) 0.15s forwards, intro-line-out 0.3s ease 0.7s forwards; }
#intro.play .intro-m-full { animation: intro-fill 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards; }
#intro.play .intro-bar { animation: intro-bar 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards; }
#intro.play .intro-dot { animation: intro-dot 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s forwards; }
#intro.play .intro-word { animation: intro-word 0.35s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards; }

@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-line-out { to { opacity: 0; } }
@keyframes intro-fill {
  from { opacity: 0; stroke-width: 1.5; }
  to { opacity: 1; stroke-width: 7; }
}
@keyframes intro-bar {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}
@keyframes intro-dot {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes intro-slide { to { transform: translateX(0); } }
@keyframes intro-word {
  from { clip-path: inset(0 100% 0 0); letter-spacing: 0.12em; }
  to { clip-path: inset(0 0 0 0); letter-spacing: 0.06em; }
}
@keyframes intro-out {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}
@keyframes intro-safety { to { opacity: 0; visibility: hidden; } }

/*
 * Still (reduced motion): the finished logo for a moment, nothing moves. The app's own reduced-motion
 * rules switch every animation off, so intro.js times it and removes it.
 */
#intro.still .intro-lockup { transform: none; }
#intro.still .intro-m-line { opacity: 0; }
#intro.still .intro-m-full,
#intro.still .intro-bar,
#intro.still .intro-dot { opacity: 1; transform: none; }
#intro.still .intro-word { clip-path: none; }

/*
 * Holding: the app is still loading. Under the logo, a short gold line with a light travelling along
 * it, and one quiet line of text. Both wait a moment, so a fast start never shows them.
 */
.intro-loading {
  position: absolute;
  inset: calc(50% + 78px) 0 auto;
  display: grid;
  justify-items: center;
  gap: 18px;
  opacity: 0;
}
#intro.hold .intro-loading { animation: intro-out 0.45s ease 0.6s reverse both; }
.intro-thread {
  width: 168px;
  height: 2px;
  overflow: hidden;
  background: var(--accent-soft);
}
.intro-thread::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
  animation: intro-glint 1.6s ease-in-out infinite;
}
.intro-status { color: var(--muted); font: 600 15px Manrope, Arial, sans-serif; }
@keyframes intro-glint {
  from { translate: -100%; }
  to { translate: 250%; }
}
/* Reduced motion switches the glint off (styles.css); the text still shows. */
@media (prefers-reduced-motion: reduce) { #intro.hold .intro-loading { opacity: 1; } }