/* The countdown leader on the home player: the "Please Stand By" test card, the 3-2-1 count
   and the sweep that hands over to the first film. Carried over from the TV site unchanged;
   only the rules for the old TV / GAME looks are gone. Driven by js/ident-card.js. */
.ident-card { --body: "Inter", "Helvetica Neue", Arial, sans-serif; }
.ident-card {
  --ic-on: 1.6s;
  --ic-loop: 18s;
  overflow: hidden;
  background: #050505;
}
.ident-card__art {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: ic-switch-on var(--ic-on) cubic-bezier(0.2, 0.7, 0.2, 1) both;
  will-change: transform, filter;
}
@keyframes ic-switch-on {
  0%, 16% { opacity: 0; transform: scale(0.004, 0.003); filter: brightness(12) saturate(0); }
  17%     { opacity: 1; transform: scale(0.004, 0.003); filter: brightness(12) saturate(0); }
  24%     { opacity: 1; transform: scale(0.006, 0.004); filter: brightness(12) saturate(0); }
  38%     { transform: scale(1, 0.004); filter: brightness(10) saturate(0); }
  46%     { transform: scale(1, 0.004); filter: brightness(10) saturate(0); }
  58%     { transform: scale(1.04, 1.07); filter: brightness(2.6) blur(9px) saturate(0); }
  70%     { transform: translateY(-2.2%) scale(1.02, 1.03); filter: brightness(1.5) blur(4px); }
  78%     { transform: translateY(1.2%) scale(1.008, 1.012); filter: brightness(1.2) blur(2px); }
  88%     { transform: translateY(-0.3%) scale(1.002); filter: brightness(1.06) blur(0.6px); }
  100%    { opacity: 1; transform: none; filter: none; }
}

.ic-sweep {
  transform-box: view-box;
  transform-origin: 1376px 769px;
  animation: ic-sweep 7s linear infinite;
  animation-delay: var(--ic-on);
  opacity: 0;
}
.ic-sweep path { fill: #14213d; }
.ic-sweep line { stroke: #14213d; stroke-width: 5; opacity: 0.55; }
@keyframes ic-sweep {
  0%   { transform: rotate(-90deg); opacity: 1; }
  100% { transform: rotate(270deg); opacity: 1; }
}

.ic-ping {
  fill: none;
  stroke: #14213d;
  stroke-width: 7;
  opacity: 0;
  transform-box: view-box;
  transform-origin: var(--o);
  animation: ic-ping 6s ease-out infinite;
  animation-delay: calc(var(--ic-on) + var(--d));
}
@keyframes ic-ping {
  0%   { transform: scale(0.12); opacity: 0; }
  8%   { opacity: 0.75; }
  55%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.ic-dot {
  opacity: 0;
  animation: ic-dot 6s ease-out infinite;
  animation-delay: calc(var(--ic-on) + var(--d));
}
@keyframes ic-dot {
  0%, 100% { opacity: 0; }
  6%       { opacity: 1; }
  40%      { opacity: 0; }
}

.ic-screen { mix-blend-mode: screen; }
.ic-multiply { mix-blend-mode: multiply; }
.ic-pop {
  opacity: 0;
  animation: ic-pop var(--ic-loop) ease-in-out infinite;
  animation-delay: calc(var(--ic-on) + 4s + var(--d));
}
@keyframes ic-pop {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  7%   { opacity: 0.7; }
  9%   { opacity: 1; }
  48%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}

.ident-card__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.07) 55%, transparent);
  transform: translateY(-110%);
  animation: ic-band 9s linear infinite;
  animation-delay: var(--ic-on);
}
@keyframes ic-band {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(560%); }
}

.hero-set[data-tuned] .ident-card *,
.ident-card[hidden] * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.ident-card__art,
  .ic-sweep,
  .ic-ping,
  .ic-dot,
  .ic-pop,
  .ident-card__band { animation: none; }
.ic-sweep, .ident-card__band { opacity: 0; }
}

.ic-leader { animation: ic-leader-clear 4s steps(1, end) var(--ic-on) both; }
.ic-leader-hand { transform-origin: 1376px 769px; animation: ic-leader-turn 1s linear var(--ic-on) 4; }
.ic-leader-hand.is-finished { visibility: hidden; }
.ic-leader-hand > path { animation: ic-leader-clear 4s steps(1, end) var(--ic-on) forwards; }
@keyframes ic-leader-clear { from { opacity: 1; } to { opacity: 0; } }

.ic-count { font: 600 437px/1 var(--body); fill: #202c3a; opacity: 0; animation: ic-count 1s steps(1, end) forwards, ic-projector-weave .666667s steps(1, end) 1.5 both; }
.ic-count--3 { animation-delay: var(--ic-on); }
.ic-count--2 { animation-delay: calc(var(--ic-on) + 1s); }
.ic-count--1 { animation-delay: calc(var(--ic-on) + 2s); }
@keyframes ic-leader-turn { to { transform: rotate(360deg); } }

@keyframes ic-count { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }

@keyframes ic-projector-weave {
  0%, 100% { transform: translate(0, 0); }
  14% { transform: translate(.85px, -.7px); }
  28% { transform: translate(-.6px, .3px); }
  43% { transform: translate(.25px, .9px); }
  57% { transform: translate(-1.2px, -.3px); }
  71% { transform: translate(.7px, -.65px); }
  86% { transform: translate(-.4px, .45px); }
}

.ic-logo-reveal { animation: ic-logo-wipe 1s linear calc(var(--ic-on) + 3s) both; }
@keyframes ic-logo-wipe {
  from { stroke-dashoffset: 5026.548246; }
  to { stroke-dashoffset: 0; }
}

.ic-pixel-mark { display: none; }
.ident-card.is-motion-paused * { animation-play-state: paused !important; }
.ident-card.is-restarting * { animation: none !important; }
.hero-set.is-arcade-playing .ident-card * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.ic-leader, .ic-leader-hand, .ic-count { animation: none; }
.ic-leader { display: none; }
}

.ic-film-texture { pointer-events: none; }
.ic-film-grain {
  opacity: .085;
  mix-blend-mode: multiply;
  animation: ic-grain-drift .85s steps(1, end) infinite;
}
@keyframes ic-grain-drift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-43px, 27px); }
  40% { transform: translate(61px, -39px); }
  60% { transform: translate(-17px, -71px); }
  80% { transform: translate(37px, 53px); }
}

.ic-film-dust {
  fill: #20242a;
  color: #20242a;
  opacity: 0;
  animation: ic-dust-pop 2.9s steps(1, end) infinite;
  animation-delay: var(--ic-on);
}
.ic-film-dust--2 { animation-duration: 3.7s; animation-delay: calc(var(--ic-on) + .21s); }
.ic-film-dust--3 { animation-duration: 4.3s; animation-delay: calc(var(--ic-on) + .53s); }
.ic-film-dust--4 { animation-duration: 3.3s; animation-delay: calc(var(--ic-on) + .87s); }
.ic-film-dust--5 { animation-duration: 5.1s; animation-delay: calc(var(--ic-on) + 1.19s); fill: #f7f4e9; color: #f7f4e9; }
@keyframes ic-dust-pop {
  0%, 38%, 100% { opacity: 0; }
  3% { opacity: .38; transform: translate(0, 0); }
  8% { opacity: 0; }
  33% { opacity: .25; transform: translate(-29px, 16px); }
}

@media (prefers-reduced-motion: reduce) {
.ic-film-grain { animation: none; }
.ic-film-dust { display: none; }
}

@media (prefers-reduced-motion: reduce) {
.ic-logo-reveal { animation: none; stroke-dashoffset: 0; }
.ic-leader-hand { display: none; }
}

.ic-zap {
  opacity: 0;
  pointer-events: none;
  animation: ic-zap-flash .22s steps(1, end) var(--ic-zap-delay) forwards;
}
.ic-zap--first {
  --ic-zap-delay: calc(var(--ic-on) + 4s + var(--ic-zap-first, .5s));
  --ic-zap-shift: var(--ic-zap-first-shift, 20px);
  --ic-zap-rebound: var(--ic-zap-first-rebound, -12px);
  --ic-zap-settle: var(--ic-zap-first-settle, 4px);
}
.ic-zap--second {
  --ic-zap-delay: calc(var(--ic-on) + 4s + var(--ic-zap-second, 1.8s));
  --ic-zap-shift: var(--ic-zap-second-shift, -18px);
  --ic-zap-rebound: var(--ic-zap-second-rebound, 11px);
  --ic-zap-settle: var(--ic-zap-second-settle, -4px);
}
.ic-zap-shift { animation: ic-zap-tear .22s steps(1, end) var(--ic-zap-delay) both; }
@keyframes ic-zap-flash {
  0%, 65% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes ic-zap-tear {
  0% { transform: translateX(var(--ic-zap-shift)); }
  30% { transform: translateX(var(--ic-zap-rebound)); }
  55% { transform: translateX(var(--ic-zap-settle)); }
  75%, 100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
.ic-zap { display: none; animation: none; }
.ic-zap-shift { animation: none; }
}

.is-signal-ready .ic-monogram,
.is-signal-ready .ic-final-background { mask: none; }
.ic-arcade-linework { display: none; }
@property --ic-player-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hero-set[data-intro-preload] [data-tv-frame] { visibility: visible; }
.hero-set[data-intro-preload] .ic-leader-hand { animation-iteration-count: 5; }
.hero-set[data-intro-preload] .ic-leader-hand > path { animation: none; }
.ident-card.is-video-revealing {
  -webkit-mask-image: conic-gradient(from 0deg at 50% 50.065%, transparent 0deg var(--ic-player-angle), #000 var(--ic-player-angle) 360deg);
  mask-image: conic-gradient(from 0deg at 50% 50.065%, transparent 0deg var(--ic-player-angle), #000 var(--ic-player-angle) 360deg);
  animation: ic-player-reveal 1s linear both;
}
@keyframes ic-player-reveal {
  from { --ic-player-angle: 0deg; }
  to { --ic-player-angle: 360deg; }
}

.ident-card.is-motion-paused { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
.ident-card.is-video-revealing { animation: none; }
}