/**
 * TrailCurrent Demo
 * Styles for the whole-system demo on try-trailcurrent.html. Most device
 * styling is inline in js/trailcurrent-demo.js because every screen is a
 * fixed-size canvas scaled to fit. This file holds the shared animations,
 * the hotspot dot, the button reset and the YouTube mark.
 */

.tc-demo {
  position: relative;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

@keyframes mpFlow { from { background-position: 0 0; } to { background-position: 0 24px; } }
@keyframes mpSpin { to { transform: rotate(360deg); } }
@keyframes mpAir { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .6; } 100% { transform: translateY(160%); opacity: 0; } }
@keyframes mpPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }
@keyframes mpGlow { 0%, 100% { transform: scale(.8); opacity: .45; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes mpAlarm { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
@keyframes mpCore { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes mpRipple { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes pbKen { 0% { transform: scale(1.04) translate(0, 0); } 100% { transform: scale(1.2) translate(-3%, -2%); } }
@keyframes pbEq { 0%, 100% { transform: scaleY(.18); } 50% { transform: scaleY(1); } }
@keyframes pbTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pbBlink { 50% { opacity: 0; } }
@keyframes pbFade { 0% { opacity: 0; transform: scale(.96); } 30% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pgPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes pbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tc-demo *, .tc-demo *::before, .tc-demo *::after { animation: none !important; }
}

/* Buttons keep the inline look the prototype gave them. */
.tc-demo .tcd-btn {
  margin: 0;
  font: inherit;
  font-family: inherit;
  line-height: normal;
  text-align: center;
  color: inherit;
  border: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.tc-demo .tcd-btn:focus-visible { outline: 2px solid #74fe00; outline-offset: 2px; }
.tc-demo .tcd-press:active { transform: scale(.98); }
.tc-demo .tcd-hover:hover { filter: brightness(1.25); }

/* Pulsing hotspot on each closed device. */
.tc-demo .tcd-dot {
  position: absolute;
  right: -21px;
  top: -21px;
  width: 42px;
  height: 42px;
  padding: 12px;
  margin: 0;
  border: 0;
  background: none;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 4;
}
.tc-demo .tcd-dot > span { position: absolute; border-radius: 9999px; pointer-events: none; box-sizing: border-box; }
.tc-demo .tcd-dot__halo {
  inset: -2px;
  background: radial-gradient(circle, rgba(116, 254, 0, .55) 0%, rgba(116, 254, 0, .18) 45%, rgba(116, 254, 0, 0) 70%);
  animation: mpGlow 2s ease-in-out infinite;
}
.tc-demo .tcd-dot__ring { inset: 12px; border: 2px solid #7bc96a; animation: mpPulse 2s ease-out infinite; }
.tc-demo .tcd-dot__ring--late { animation-delay: 1s; }
.tc-demo .tcd-dot__core {
  inset: 15px;
  background: #74fe00;
  box-shadow: 0 0 6px 2px rgba(116, 254, 0, .95), 0 0 18px 6px rgba(116, 254, 0, .5), 0 0 0 2px #0a0a0a;
  animation: mpCore 2s ease-in-out infinite;
}
.tc-demo .tcd-dot:focus-visible { outline: 2px solid #74fe00; outline-offset: -6px; border-radius: 9999px; }

/* YouTube mark: the site ships Font Awesome Solid only, so draw it with a mask. */
.tc-demo .fa-brands.fa-youtube::before { content: none; }
.tc-demo .fa-brands.fa-youtube {
  display: inline-block;
  width: 1.4em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M27.4 3.1A3.5 3.5 0 0 0 24.9.6C22.7 0 14 0 14 0S5.3 0 3.1.6A3.5 3.5 0 0 0 .6 3.1C0 5.3 0 10 0 10s0 4.7.6 6.9a3.5 3.5 0 0 0 2.5 2.5C5.3 20 14 20 14 20s8.7 0 10.9-.6a3.5 3.5 0 0 0 2.5-2.5c.6-2.2.6-6.9.6-6.9s0-4.7-.6-6.9zM11.2 14.3V5.7l7.3 4.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M27.4 3.1A3.5 3.5 0 0 0 24.9.6C22.7 0 14 0 14 0S5.3 0 3.1.6A3.5 3.5 0 0 0 .6 3.1C0 5.3 0 10 0 10s0 4.7.6 6.9a3.5 3.5 0 0 0 2.5 2.5C5.3 20 14 20 14 20s8.7 0 10.9-.6a3.5 3.5 0 0 0 2.5-2.5c.6-2.2.6-6.9.6-6.9s0-4.7-.6-6.9zM11.2 14.3V5.7l7.3 4.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: -0.125em;
}

/* Page header around the demo (same as try-milepost.html) */
.try-demo__header {
  max-width: 760px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.try-demo__eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--space-2);
}

.try-demo__title {
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.try-demo__lead {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

.try-demo__note,
.try-demo__noscript {
  max-width: 760px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}