/* Night sea home page */
:root {
  --sky: #0a2236;
  --sea: #06121d;
  --abyss: #02070d;
  --frost: #00a7f5;
  --frost-dim: #0098e0;
  --ice: #eef6fb;
  --mist: #8fa8ba;
  --rim: rgba(238, 246, 251, 0.12);
  --glass: rgba(238, 246, 251, 0.04);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --r-media: 14px;
  --r-pill: 999px;
  --sticker: 84px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background-color: var(--abyss);
  background-image: linear-gradient(to bottom, var(--sky) 0%, var(--sea) 35%, var(--abyss) 100%);
  background-repeat: no-repeat;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100%;
  background: transparent;
  color: var(--ice);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--frost); }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--frost); outline-offset: 3px; }
/* Programmatic focus targets (the <main> that "Skip to content" jumps to) get no ring: focus moves on to the next real link */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
main[tabindex="-1"]:focus { outline: none; }

/* Skip link: hidden until a keyboard user tabs to it, then a frost pill above everything */
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 300;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--frost);
  color: #02131f;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 3px solid var(--ice); outline-offset: 2px; }

#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 {
  font-size: clamp(3.5rem, 11vw, 8rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 0.95;
}
h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.h2-sm { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 12px; }

.lead { color: var(--mist); max-width: 60ch; margin: 16px 0 0; }
.note { color: var(--mist); font-size: 0.9rem; max-width: 60ch; }

/* Buttons and links */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.pill--primary { background: var(--frost); color: #02131f; }
.pill--primary:hover, .pill--primary:active {
  background: var(--frost-dim);
  box-shadow: 0 0 22px rgba(0, 167, 245, 0.45);
}
.pill--outline { border-color: var(--rim); color: var(--ice); background: transparent; }
.pill--outline:hover { border-color: var(--frost); color: var(--frost); }
.pill--sm { padding: 8px 18px; font-size: 0.95rem; }

.text-link { color: var(--frost); font-weight: 600; text-decoration: none; }
.text-link:hover { color: var(--ice); text-decoration: underline; text-underline-offset: 4px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Header */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s, border-color 0.25s;
}
.top-bar.is-solid {
  background: rgba(2, 7, 13, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--rim);
}
.top-bar__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ice);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  flex: none;
}
.brand img { height: 32px; width: auto; }
.brand--sm { font-size: 1.2rem; }
.brand--sm img { height: 24px; }

/* LIVE badge (only shown while Kick says we're live): frost glass pill with a pulsing dot */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 5px 13px 5px 11px;
  border: 1px solid var(--frost);
  border-radius: var(--r-pill);
  background: rgba(0, 167, 245, 0.16);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.live-badge[hidden] { display: none; }
.live-badge:hover { background: rgba(0, 167, 245, 0.3); }
.live-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--frost);
  box-shadow: 0 0 8px 1px var(--frost);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.75); }
}
@media (prefers-reduced-motion: reduce) { .live-badge__dot { animation: none; } }
@media (max-width: 1100px) { .live-badge__long { display: none; } }

.tabs { display: flex; gap: 4px; margin-left: 12px; margin-right: auto; min-width: 0; }
.tabs a {
  position: relative;
  padding: 8px 12px;
  color: var(--mist);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  white-space: nowrap;
}
.tabs__sep { flex: none; align-self: center; width: 2px; height: 18px; margin: 0 6px; border-radius: 2px; background: linear-gradient(to bottom, transparent, rgba(0, 167, 245, 0.85), transparent); box-shadow: 0 0 6px rgba(0, 167, 245, 0.45); }
.tabs a:hover { color: var(--ice); }
.tabs a.is-active { color: var(--ice); }
.tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--frost);
}
.upc-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  background: #16252b;   /* dark fog, so the middle never reads as a black hole */
  border: 1px solid var(--rim);
  border-radius: var(--r-pill);
  flex: none;
  transition: border-color 0.2s;
}
.upc-pill:hover { border-color: var(--frost); }
.upc-pill img { height: 22px; width: auto; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.6)); }
/* Mini UPC effect (approved UPC-color exception, like the UPC band): soft teal-to-red glow plus rising embers.
   Everything is absolutely positioned inside the pill, so the pill's size never changes. */
.upc-pill { position: relative; overflow: hidden; --spd: 1; }
.upc-pill__glow, .upc-pill__embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.upc-pill__glow {
  background:
    radial-gradient(55% 120% at 0% 50%, rgba(25, 199, 154, 0.25), transparent 70%),
    radial-gradient(55% 120% at 100% 50%, rgba(224, 50, 60, 0.25), transparent 70%),
    linear-gradient(90deg, #0a8f6c 0%, #1e3a40 50%, #a8121b 100%);   /* deep, saturated UPC colors flowing across the pill, no seam */
  opacity: 0.75;
}
.upc-pill__embers i {
  position: absolute;
  left: var(--x);
  bottom: 2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #19c79a;
  box-shadow: 0 0 4px rgba(25, 199, 154, 0.8);
  opacity: 0;
}
.upc-pill__embers i.r { background: #ff783c; box-shadow: 0 0 4px rgba(255, 140, 70, 0.8); }
.upc-pill__embers i:nth-child(odd) { width: 1px; height: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .upc-pill__glow { animation: upc-pill-breathe 4s ease-in-out infinite; animation-duration: calc(4s * var(--spd)); }
  .upc-pill__embers i { animation: upc-pill-ember var(--d) linear var(--dl) infinite; animation-duration: calc(var(--d) * var(--spd)); }
  .is-tab-hidden .upc-pill__glow, .is-tab-hidden .upc-pill__embers i { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .upc-pill__embers { display: none; }   /* static: just the soft glow */
}
@media (hover: hover) {
  .upc-pill:hover { --spd: 0.7; }
  .upc-pill:hover .upc-pill__glow { filter: brightness(1.25); }
}
@keyframes upc-pill-breathe { 0%, 100% { opacity: 0.65; } 50% { opacity: 0.8; } }
@keyframes upc-pill-ember {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 0.8; }
  100% { transform: translate3d(2px, -32px, 0); opacity: 0; }
}

/* Hero */
.hero {
  position: relative; /* no z-index, transform or filter here: the sea scene must stay below the snow */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(92px, 13svh, 150px);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.hero__logo { width: clamp(140px, 22vw, 300px); height: auto; flex: none; }
.hero__copy { min-width: 0; }
.hero__tag { font-size: 1.35rem; color: var(--mist); margin: 14px 0 22px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--rim);
  color: var(--ice);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}
.chip:hover { border-color: var(--frost); }
.chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mist); }
.chip.is-live .chip__dot { background: var(--frost); }

/* Hero scene (night sea) lives in sea.css */
@media (prefers-reduced-motion: no-preference) {
  .chip.is-live .chip__dot { animation: pulse 2s ease-in-out infinite; }
  .hero__logo, .hero h1, .hero__tag { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero h1 { animation-delay: 0.15s; }
  .hero__tag { animation-delay: 0.3s; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Sections */
.section { padding: clamp(48px, 7.3vw, 94px) 0; }
.heading-row { display: inline-flex; align-items: center; gap: 18px; flex-wrap: nowrap; max-width: 100%; }
.sticker {
  width: var(--sticker);
  height: auto;
  flex: none;
}
.sticker--l { transform: rotate(-6deg); }
.sticker--r { transform: rotate(6deg); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sticker--l:hover { animation: wiggle-l 0.6s ease-in-out 1; }
  .sticker--r:hover { animation: wiggle-r 0.6s ease-in-out 1; }
}
@keyframes wiggle-l {
  0%, 100% { transform: rotate(-6deg); } 25% { transform: rotate(-16deg); } 50% { transform: rotate(4deg); } 75% { transform: rotate(-12deg); }
}
@keyframes wiggle-r {
  0%, 100% { transform: rotate(6deg); } 25% { transform: rotate(16deg); } 50% { transform: rotate(-4deg); } 75% { transform: rotate(12deg); }
}

/* Media */
.media {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--abyss);
  border: 1px solid var(--rim);
}
.media--wide { aspect-ratio: 16 / 9; }
.media img, .media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.facade {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ice);
  font-family: var(--body);
}
.facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: var(--frost);
  display: grid;
  place-items: center;
  transition: box-shadow 0.2s, background-color 0.2s;
}
.facade__play::before {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #02131f;
}
.facade:focus-visible { outline-offset: -6px; border-radius: var(--r-media); }
.facade:hover .facade__play { background: var(--frost-dim); box-shadow: 0 0 24px rgba(0, 167, 245, 0.5); }
.facade__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
}
.kick { margin-top: 32px; background: url("images/logo-white.png") center 24% / clamp(70px, 12vw, 130px) no-repeat, linear-gradient(to bottom, var(--sea), var(--abyss)); }
.kick::before { content: ""; position: absolute; inset: 0; background: rgba(2, 7, 13, 0.82); pointer-events: none; }
.sponsor img { background: var(--ice); padding: 14px 18px; border-radius: var(--r-media); width: 156px; height: auto; }
.after-media { margin-top: 16px; }

/* Watch */
.watch-feature {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.watch-feature__title { font-size: clamp(1.6rem, 2.8vw, 2rem); line-height: 1.1; }
.watch-feature__line { color: var(--mist); margin: 10px 0 0; }
.watch-feature .btn-row { margin-top: 22px; }

.more-head {
  margin-top: clamp(56px, 8vw, 88px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.video-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.video-list a { color: var(--ice); text-decoration: none; display: block; }
.video-list .media { display: block; transition: border-color 0.2s; }
.video-list__t {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.35;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .video-list a:hover .media { border-color: var(--frost); }
}
.shorts-note { margin: 20px 0 0; color: var(--mist); font-size: 0.9rem; }
.shorts-note a { color: var(--mist); text-underline-offset: 3px; }
.shorts-note a:hover { color: var(--frost); }

/* Live */
.days {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
}
.day {
  position: relative;
  padding: 22px clamp(14px, 2.5vw, 28px) 18px;
  background: var(--glass);
  border: 1px solid var(--rim);
  border-radius: var(--r-media);
  min-height: 132px;
  display: flex;
  flex-direction: column;
}
.day__name { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; }
.day__time { color: var(--mist); margin-top: 4px; }
.day__flag { margin-top: auto; padding-top: 10px; color: var(--frost); font-weight: 600; font-size: 0.95rem; min-height: 1.6em; }
.day.is-next { border-color: var(--frost); }
.countdown { margin: 20px 0 0; color: var(--mist); }

/* Bands */
.band { padding: 28px 0; }
.panel {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--rim);
  border-radius: var(--r-media);
  padding: clamp(24px, 4vw, 40px);
}
.panel p { max-width: 50ch; }
/* Merch band: text on the left, cycling product cards on the right */
.panel--merch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 19vw, 240px);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  overflow: hidden;
  /* same size as the UPC band below it (same padding and min-height) */
  min-height: 280px;
  padding: clamp(40px, 6vw, 56px) clamp(20px, 4vw, 40px);
}
.panel--merch p { margin-bottom: 20px; text-wrap: balance; }
/* The showcase is taller than the space left by the panel padding, so it borrows some of that padding
   (negative margin) and the panel stays the same height as the UPC band. */
.showcase { min-width: 0; padding: 0 8px; margin-block: calc(-1 * (clamp(40px, 6vw, 56px) - 14px)); position: relative; z-index: 1; }
.merch__copy { position: relative; z-index: 1; text-align: center; }
.panel--merch .merch__copy p { margin-inline: auto; }

/* Merch "frost spotlight": frost blue only. Layers sit at z-index 0 inside the panel, content at z-index 1. */
.panel--merch {
  border-color: rgba(0, 167, 245, 0.25);
  background:
    radial-gradient(ellipse 42% 75% at 82% 50%, rgba(0, 167, 245, 0.22), transparent 72%),
    linear-gradient(100deg, #0a2236 0%, #06121d 100%);
}
.merch-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
/* keeps the text side calm and readable */
.merch-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 18, 29, 0.6) 0%, rgba(6, 18, 29, 0.25) 45%, transparent 70%);
}
.merch-fx__logos {
  position: absolute;
  inset: -240px;
  background: url("images/logo-white.png") 0 0 / 48px 48px repeat;
  opacity: 0.04;
  transform: rotate(-12deg);
}
.merch-fx__rays {
  position: absolute;
  top: 50%;
  right: -110px;
  width: 560px;
  height: 560px;
  margin-top: -280px;
  background: repeating-conic-gradient(from 0deg, rgba(0, 167, 245, 0.1) 0deg 7deg, transparent 7deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.5) 40%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.5) 40%, transparent 68%);
}
.merch-fx__sparkles { position: absolute; inset: 0; }
.merch-fx__sparkles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: #cfeeff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0.55;
}
.merch-fx__shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 28%;
  background: linear-gradient(100deg, transparent 0%, rgba(190, 230, 255, 0.09) 50%, transparent 100%);
  transform: translate3d(-160%, 0, 0) skewX(-18deg);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .panel--merch.is-live .merch-fx__logos { animation: merch-drift 60s linear infinite; }
  .panel--merch.is-live .merch-fx__rays { animation: merch-spin 40s linear infinite; }
  .panel--merch.is-live .merch-fx__sparkles i { animation: merch-sparkle var(--d) ease-in-out var(--dl) infinite; }
  .panel--merch.is-live .merch-fx__shine { animation: merch-shine 6s ease-in-out infinite; }
}
@keyframes merch-drift {
  from { transform: rotate(-12deg) translate3d(0, 0, 0); }
  to { transform: rotate(-12deg) translate3d(96px, 96px, 0); }   /* two tiles, so the loop is seamless */
}
@keyframes merch-spin { to { transform: rotate(360deg); } }
@keyframes merch-sparkle {
  0% { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  25% { opacity: 0.9; transform: translate3d(0, -14px, 0) scale(1); }
  60% { opacity: 0.4; }
  100% { transform: translate3d(0, -52px, 0) scale(0.5); opacity: 0; }
}
@keyframes merch-shine {
  0% { transform: translate3d(-160%, 0, 0) skewX(-18deg); opacity: 0; }
  3% { opacity: 1; }
  18% { transform: translate3d(480%, 0, 0) skewX(-18deg); opacity: 1; }
  20%, 100% { transform: translate3d(480%, 0, 0) skewX(-18deg); opacity: 0; }
}
@media (min-width: 821px) {
  /* text left, a bigger product stack anchored toward the right edge (with breathing room). The glow and
     rays are centered on the showcase: --sw = showcase width, --mr = its gap to the right padding. */
  .panel--merch {
    --pad-x: clamp(20px, 4vw, 40px);
    --gap: clamp(24px, 5vw, 64px);
    --sw: clamp(220px, 24vw, 300px);
    --mr: clamp(8px, 2.5vw, 40px);
    --show-x: calc(100% - var(--pad-x) - var(--mr) - var(--sw) / 2);
    /* the right column is exactly the showcase (plus its edge gap), so the text block is centered
       between the panel's left edge and where the showcase starts */
    grid-template-columns: minmax(0, 1fr) calc(var(--sw) + var(--mr));
    gap: 0;
    padding-inline: var(--pad-x);
    background:
      radial-gradient(ellipse 42% 75% at var(--show-x) 50%, rgba(0, 167, 245, 0.22), transparent 72%),
      linear-gradient(100deg, #0a2236 0%, #06121d 100%);
  }
  .panel--merch .showcase { justify-self: end; width: var(--sw); margin-right: var(--mr); }
  .panel--merch .showcase__stage { width: min(100%, 196px); }
  .panel--merch .showcase__card[data-pos="1"] { transform: translate(30px, 10px) rotate(7deg); }
  .merch-fx__rays { right: auto; left: var(--show-x); margin-left: -280px; }
}
@media (max-width: 820px) {
  /* stacked layout: the product cards sit centered near the bottom */
  .merch-fx__rays { right: 50%; margin-right: -280px; top: auto; bottom: -150px; margin-top: 0; }
}
.showcase__stage { position: relative; aspect-ratio: 3 / 4; width: min(100%, 180px); margin: 0 auto; }
.showcase__card {
  position: absolute;
  inset: 0;
  display: block;
  padding: 10px;
  background: var(--ice);
  border-radius: var(--r-media);
  box-shadow: 0 0 36px rgba(0, 167, 245, 0.22);
  transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.7s ease;
  will-change: transform, opacity;
}
.showcase__card img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.showcase__card img.showcase__emote { padding: 12%; }
.showcase__card[data-pos="0"] { z-index: 3; opacity: 1; transform: rotate(-2deg); }
.showcase__card[data-pos="1"] { z-index: 2; opacity: 0.9; transform: translate(14px, 8px) rotate(5deg); }
.showcase__card[data-pos="prev"] { z-index: 4; opacity: 0; transform: translate(-34px, -6px) rotate(-10deg); pointer-events: none; }
.showcase__card[data-pos="far"] { z-index: 1; opacity: 0; transform: translate(10px, 12px) rotate(8deg); pointer-events: none; }
.showcase__name { margin: 10px 0 0; text-align: center; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.showcase__dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
.showcase__dots[hidden] { display: none; }
.showcase__dots button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.showcase__dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mist);
  opacity: 0.5;
  transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
}
.showcase__dots button[aria-current="true"]::before { background: var(--frost); opacity: 1; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .showcase__card, .showcase__dots button::before { transition: none; } }

/* UPC band: a mini version of the UPC page hero. UPC's own art and colors live in this band only. */
.panel--upc {
  --upc-stone: #eadfc4;
  --upc-teal: #0a8f6c;
  overflow: hidden;
  min-height: 280px;
  padding: clamp(40px, 6vw, 56px) clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-color: rgba(234, 223, 196, 0.16);
  background:
    linear-gradient(90deg, rgba(8, 16, 19, 0.12) 0%, rgba(8, 16, 19, 0.78) 30%, rgba(8, 16, 19, 0.78) 70%, rgba(8, 16, 19, 0.12) 100%),
    url("images/upc-bg.jpg") center / cover no-repeat,
    #081013;
}
.upc-fx { position: absolute; z-index: 0; pointer-events: none; }
.upc-fx--smoke-l, .upc-fx--smoke-r { top: -25%; width: 62%; height: 150%; }
.upc-fx--smoke-l { left: -14%; background: radial-gradient(ellipse at center, rgba(25, 199, 154, 0.34), transparent 66%); }
.upc-fx--smoke-r { right: -14%; background: radial-gradient(ellipse at center, rgba(224, 50, 60, 0.3), transparent 66%); }
.upc-fx--seam {
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, transparent, rgba(234, 223, 196, 0.8) 50%, transparent);
  box-shadow: 0 0 18px 4px rgba(234, 223, 196, 0.2);
  opacity: 0.45;
}
.upc-fx--embers { inset: 0; width: 100%; height: 100%; }
.upc-band__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.upc-mark { height: clamp(64px, 10vw, 110px); width: auto; }
.panel--upc p { margin: 0; max-width: 46ch; color: var(--upc-stone); font-family: var(--body); font-size: 1.15rem; text-shadow: 0 1px 12px rgba(8, 16, 19, 0.8); }
.upc-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 13px 34px;
  background: var(--upc-teal);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.1;
  text-decoration: none;
  border-radius: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 4px solid #066a50;
  transform: skewX(-8deg);
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.upc-btn span { display: inline-block; transform: skewX(8deg); }
.upc-btn:focus-visible { outline-color: var(--upc-stone); }
@media (hover: hover) {
  .upc-btn:hover { background: #0fa67c; transform: translateY(-2px) skewX(-8deg); box-shadow: 0 8px 20px rgba(10, 143, 108, 0.4); }
}
@media (prefers-reduced-motion: no-preference) {
  .upc-fx--smoke-l { animation: upc-drift-l 38s ease-in-out infinite alternate; }
  .upc-fx--smoke-r { animation: upc-drift-r 44s ease-in-out infinite alternate; }
  .upc-fx--seam { animation: upc-seam 6s ease-in-out infinite; }
}
@keyframes upc-drift-l { from { transform: translateX(0); } to { transform: translateX(26%); } }
@keyframes upc-drift-r { from { transform: translateX(0); } to { transform: translateX(-26%); } }
@keyframes upc-seam { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.65; } }

/* Partners */
/* Work with me teaser: a short pitch, the current partner and two buttons */
.teaser {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.partner-card {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(18px, 3vw, 28px);
}
.partner-card__logo { flex: none; width: clamp(104px, 14vw, 140px); height: auto; background: var(--ice); padding: 12px 16px; border-radius: var(--r-media); }
.partner-card__tag { margin: 0 0 4px; color: var(--frost); font-weight: 600; font-size: 0.95rem; }
.partner-card h3 { margin-bottom: 6px; }
.partner-card p { margin: 0 0 8px; max-width: 40ch; }
.partner-card .text-link { font-weight: 600; }
.teaser__cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.teaser__cta .pill { justify-content: center; text-align: center; }
.sponsor img { width: 120px; height: auto; margin-bottom: 18px; }
.sponsor h3 { margin-bottom: 8px; }
.sponsor p { max-width: 44ch; }
.sponsor .pill { margin-top: 6px; }
/* Footer */
.foot { margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--rim); padding: 36px 0 48px; color: var(--mist); font-size: 0.95rem; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 20px; flex: 1 1 320px; }
.foot a { color: var(--mist); text-decoration: none; }
.foot a:hover { color: var(--frost); }
.foot .brand { color: var(--ice); }

/* Responsive */
@media (max-width: 820px) {
  .top-bar__inner { flex-wrap: wrap; gap: 6px 12px; padding-top: 8px; padding-bottom: 6px; }
  .top-bar__sub { margin-left: auto; }
  .tabs {
    order: 3;
    flex: 0 0 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: 8px 12px; }
  .tabs a:first-child { padding-left: 0; }
  .tabs a:first-child.is-active::after { left: 0; }
  .brand { font-size: 1.3rem; }
  .brand img { height: 28px; }

  .watch-feature { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .video-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .teaser { grid-template-columns: minmax(0, 1fr); }
  .teaser__cta { flex-direction: row; flex-wrap: wrap; }
  .panel--merch { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .showcase { width: min(180px, 56vw); margin: 0 auto; }   /* stacked: no borrowed padding */
}

@media (max-width: 760px) {
  :root { --sticker: 64px; }
  .heading-row { gap: 12px; }
  .day { min-height: 116px; }
}

@media (max-width: 480px) {
  /* while live, the badge takes the brand name's spot on the top row (the logo stays) */
  .kick-live .top-bar .brand span { display: none; }
  .live-badge { padding: 4px 10px 4px 9px; font-size: 0.8rem; gap: 6px; }
  .top-bar__sub { padding: 6px 12px; font-size: 0.85rem; }
  .upc-pill { padding: 6px 12px; }
  .upc-pill img { height: 18px; }
  .day__flag { font-size: 0.85rem; }

  /* all six tabs fit on one row at 375px: tighter type and padding, still 40px tall to tap */
  .tabs a { padding: 11px 7px; font-size: 0.86rem; line-height: 1.2; min-height: 40px; display: inline-flex; align-items: center; }
  .tabs a:first-child { padding-left: 0; }
  .tabs a.is-active::after, .tabs a[aria-current="page"]::after { left: 7px; right: 7px; bottom: 5px; }
  .tabs a:first-child.is-active::after { left: 0; }
  .tabs__sep { margin: 0 3px; }
}
@media (max-width: 380px) {
  .tabs a { padding: 11px 5px; font-size: 0.8rem; }
  .tabs a.is-active::after, .tabs a[aria-current="page"]::after { left: 5px; right: 5px; }
  .tabs__sep { margin: 0 2px; }
  .brand { font-size: 1.15rem; gap: 8px; }
  .brand img { height: 24px; }
  .upc-pill { padding: 5px 10px; }
  .upc-pill img { height: 16px; }
}
@media (max-width: 340px) {
  /* if it still can't fit, it scrolls sideways and a soft fade on the right edge says there is more */
  .tabs {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    padding-right: 20px;
  }
}

@media (max-width: 760px) {
  .kick { background: linear-gradient(to bottom, var(--sea), var(--abyss)); }
}

/* ---------- "Going deeper" page background ---------- */
/* Fixed layer behind everything: below the hero scene (-2) and the snow (-1). Nothing between it and the root
   creates a stacking context. home.js moves the layers at different speeds as you scroll. */
.deep { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.deep__pools, .deep__contours {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + var(--extra, 0px));   /* the page script sets --extra so the layer never runs out */
  will-change: transform;
}
.deep__pools {
  background:
    radial-gradient(circle 60vmax at 12% 18%, rgba(0, 167, 245, 0.06), transparent 70%),
    radial-gradient(circle 55vmax at 92% 40%, rgba(0, 167, 245, 0.07), transparent 70%),
    radial-gradient(circle 65vmax at 25% 68%, rgba(0, 167, 245, 0.05), transparent 70%),
    radial-gradient(circle 50vmax at 85% 92%, rgba(0, 167, 245, 0.06), transparent 70%);
}
.deep__contours path { fill: none; stroke: rgba(0, 167, 245, 0.085); stroke-width: 1; }
.deep__contours text { font-family: var(--display); font-weight: 700; font-size: 11px; fill: rgba(143, 168, 186, 0.15); text-anchor: middle; }
/* Sea life: faint flat silhouettes, created by home.js one at a time. Every drawing's head points LEFT. */
.deep__life { position: absolute; inset: 0; }
.creature { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; --a: 0.06; }
.creature svg { display: block; width: 100%; height: auto; fill: rgba(143, 168, 186, var(--a)); }
.creature__sway, .creature__flip { width: 100%; }
.creature--whale { width: clamp(180px, 24vw, 340px); --a: 0.05; }
.creature--shark { width: clamp(150px, 19vw, 270px); --a: 0.06; }
.creature--turtle { width: clamp(70px, 8vw, 115px); --a: 0.065; }
.creature--jellyfish { --a: 0.06; }   /* width is set in the script (40 to 70px) */
.creature--fish { width: clamp(150px, 16vw, 230px); height: clamp(70px, 7vw, 100px); --a: 0.07; }
.creature--fish .creature__sway, .creature--fish .creature__flip { height: 100%; position: relative; }
.fish { position: absolute; display: block; animation: fish-bob var(--bd, 1.6s) ease-in-out var(--dl, 0s) infinite alternate; }
.fish .tail { transform-box: fill-box; transform-origin: 0% 50%; animation: fish-tail var(--td, 0.6s) ease-in-out var(--dl, 0s) infinite alternate; }
.jf-bell { transform-box: fill-box; transform-origin: 50% 0; animation: jf-pulse 2.4s ease-in-out infinite; }
.jf-t { fill: none; stroke: rgba(143, 168, 186, 0.07); stroke-width: 1.6; stroke-linecap: round; }
.tt-fl { transform-box: fill-box; transform-origin: 100% 50%; animation: tt-row 3s ease-in-out infinite alternate; }
.tt-fl--b { animation-direction: alternate-reverse; }
.deep.is-paused * { animation-play-state: paused; }
@keyframes fish-bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@keyframes fish-tail { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes jf-pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.78); } }
@keyframes tt-row { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .deep__life { display: none; } }

/* Reduced motion safety net: no sliding or fading transitions anywhere, no smooth scrolling */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* merch and UPC bands are the same size on desktop (UPC content sets the height) */
@media (min-width: 821px) { .panel--merch, .panel--upc { min-height: 380px; } }

/* merch band: bigger, bolder type so the centered text block fills the left side */
.panel--merch .h2-sm { font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 0.95; margin-bottom: 16px; }
.panel--merch .merch__copy p { font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 30ch; margin-bottom: 26px; }
.panel--merch .merch__copy .pill { font-size: 1.05rem; padding: 14px 30px; }

/* mid-size windows: when the LIVE badge shows, the brand name steps aside so the tabs never run into Subscribe */
@media (min-width: 821px) and (max-width: 1180px) {
  .kick-live .top-bar .brand span { display: none; }
  .tabs { gap: 0; margin-left: 8px; }
}
/* narrow desktop / tablet landscape (821-1000px): compact tabs, logo only */
@media (min-width: 821px) and (max-width: 1000px) {
  .top-bar .brand span { display: none; }
  .tabs a { padding: 8px 8px; font-size: 0.92rem; }
  .tabs__sep { margin: 0 3px; }
}