/* FAN.live Links — from Claude Design "FANlive Links v2" + the FAN.live design system tokens.
   Sizes are fluid against the content column (container units, `cqi`): they hit the design's
   exact px at the 640px desktop column and scale down smoothly to ~250px. */

:root {
  --font-nav: 'Russo One', sans-serif;
  --font-ui: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --strip-bg: #080d13;
  --glass: #0e1624;
  --cyan: #00d4ff;
  --neon-glow: #1dd4ff;
  --btn-surface: rgba(20, 26, 36, .85);
  --text-white: #fff;
  --text-body: rgba(255, 255, 255, .80);
  --text-muted: rgba(255, 255, 255, .38);

  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--strip-bg);
  color: var(--text-white);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--neon-glow); }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@keyframes flRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--strip-bg);
  overflow: hidden;
}

/* ---------- Hero backdrop ---------- */

.hero {
  position: absolute;
  inset: 0 0 auto;
  height: 720px;
  z-index: 0;
  overflow: hidden;
}
/* A light blur turns the ad boards and crowd lights into soft bokeh so they support the logo
   instead of competing with it; the oversize inset hides the blur's soft edges. */
.hero-img {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  object-position: 50% 35%;
  filter: blur(2.5px);
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 13, 19, .62) 0%, rgba(8, 13, 19, .36) 30%, rgba(8, 13, 19, .78) 62%, #080d13 100%);
}
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 35% at 50% 18%, rgba(0, 212, 255, .18), transparent 70%);
}

/* ---------- Column ---------- */

.wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 48px;
  padding-bottom: max(clamp(48px, 8vw, 72px), env(safe-area-inset-bottom));
}
.column {
  container-type: inline-size;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------- Brand ---------- */

.brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
/* Soft scrim so the logo and tagline read over the busy stadium lights and ad boards. */
.brand::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: 620px;
  height: 360px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(8, 13, 19, .78), rgba(8, 13, 19, .52) 55%, rgba(8, 13, 19, 0));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
  mask-image: radial-gradient(closest-side, #000 45%, transparent);
  z-index: -1;
  pointer-events: none;
}
.brand-logo { margin: 0; line-height: 0; }
/* Same mark and footprint as the design's 300px server icon, minus its navy square. */
.brand-logo img {
  width: clamp(150px, 48cqi, 188px);
  height: auto;
  margin: 4px 0 8px;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .55));
}
.brand-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(12px, 3.8cqi, 15px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-body);
  text-shadow: 0 1px 10px rgba(8, 13, 19, .9);
}

/* ---------- Link cards ---------- */

.links { display: flex; flex-direction: column; gap: clamp(10px, 2.2cqi, 14px); margin-top: 8px; }

.link {
  --pad: clamp(10px, 3.6cqi, 18px);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pad);
  height: clamp(76px, 25cqi, 104px);
  padding: 0 var(--pad);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg, var(--glass));
  border: 1px solid var(--border, rgba(255, 255, 255, .14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 12px 32px rgba(0, 0, 0, .45);
  color: var(--text-white);
  transition: all .18s ease;
  animation: flRise .5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}
.link:hover {
  color: var(--text-white);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 212, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .10);
  transform: translateY(-2px);
}
.link:active { transform: scale(.98); }

.link-art {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 58%;
  overflow: hidden;
}
.link-art img {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.link:hover .link-art img { transform: scale(1.04); }
.link-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--fade, rgba(14, 22, 36, 1)) 0%, rgba(0, 0, 0, 0) var(--fade-stop, 45%), rgba(0, 0, 0, .25) 100%);
}

.link-tile {
  position: relative;
  z-index: 1;
  width: clamp(44px, 15cqi, 64px);
  height: clamp(44px, 15cqi, 64px);
  border-radius: clamp(9px, 2cqi, 12px);
  background: var(--tile, #1a2030);
  color: var(--icon, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.link-tile svg { width: 50%; height: 50%; }
.link-tile .yt { width: 53%; height: 53%; }
.link-tile .xl { width: 41%; height: 41%; }
.link-tile .play {
  width: 0;
  height: 0;
  border-top: clamp(9px, 2cqi, 13px) solid transparent;
  border-bottom: clamp(9px, 2cqi, 13px) solid transparent;
  border-left: clamp(15px, 3.4cqi, 22px) solid var(--cyan);
  margin-left: 5px;
  filter: drop-shadow(0 0 6px var(--cyan));
}

.link-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.link-label,
.link-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-label { font-size: clamp(17px, 6cqi, 24px); font-weight: 700; line-height: 1.1; }
.link-sub { font-size: clamp(12px, 4cqi, 15px); color: var(--text-body); }

.link-go {
  position: relative;
  z-index: 1;
  width: clamp(36px, 13cqi, 56px);
  height: clamp(36px, 13cqi, 56px);
  border-radius: 50%;
  background: var(--btn-surface);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: transform .18s ease;
}
.link-go svg { width: 40%; height: 40%; }
.link:hover .link-go { transform: translateX(2px); }

.link-plain { display: block; padding: 18px; border-radius: 14px; background: var(--glass); color: #fff; }

/* Featured card: the one link the page funnels to. Bigger, photo, solid cyan "go" button. */
.link.is-featured {
  --pad: clamp(14px, 4.2cqi, 24px);
  height: clamp(120px, 27cqi, 172px);
  border-color: rgba(0, 212, 255, .55);
  box-shadow: 0 0 28px rgba(0, 212, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 40px rgba(0, 0, 0, .5);
}
.link.is-featured:hover { box-shadow: 0 0 32px rgba(0, 212, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .12); }
.is-featured .link-art { width: 66%; }
.is-featured .link-tile {
  width: clamp(52px, 17cqi, 76px);
  height: clamp(52px, 17cqi, 76px);
  border-radius: clamp(10px, 2.4cqi, 14px);
}
.is-featured .link-tile .play {
  border-top-width: clamp(11px, 2.6cqi, 16px);
  border-bottom-width: clamp(11px, 2.6cqi, 16px);
  border-left-width: clamp(18px, 4.2cqi, 27px);
}
.is-featured .link-label { font-size: clamp(22px, 7.4cqi, 32px); }
.is-featured .link-sub { font-size: clamp(13px, 4.2cqi, 16px); }
.is-featured .link-go {
  width: clamp(44px, 14cqi, 64px);
  height: clamp(44px, 14cqi, 64px);
  background: var(--cyan);
  border-color: transparent;
  color: #04121a;
  box-shadow: 0 0 20px rgba(0, 212, 255, .55);
}

/* Divider between the featured link and the socials. */
.links-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(8px, 2cqi, 12px) 0 clamp(0px, .6cqi, 4px);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(10px, 3cqi, 12px);
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 1px 8px rgba(8, 13, 19, .9);
  animation: flRise .5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}
.links-divider::before,
.links-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4));
  box-shadow: 0 0 6px rgba(8, 13, 19, .8);
}
.links-divider::after { background: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); }

/* Socials: compact rows, no photos, quieter than the featured card. */
.links-social { display: flex; flex-direction: column; gap: 8px; }
.links-social .link {
  --pad: clamp(10px, 3cqi, 16px);
  height: clamp(60px, 13cqi, 72px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .35);
}
.links-social .link:hover { box-shadow: 0 0 12px rgba(0, 212, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .08); }
.links-social .link-tile {
  width: clamp(38px, 9cqi, 46px);
  height: clamp(38px, 9cqi, 46px);
  border-radius: clamp(8px, 1.6cqi, 10px);
}
.links-social .link-text { gap: 2px; text-shadow: none; }
.links-social .link-label { font-size: clamp(15px, 4cqi, 18px); font-weight: 600; }
.links-social .link-sub { font-size: clamp(12px, 3cqi, 13px); color: rgba(255, 255, 255, .6); }
.links-social .link-go {
  width: clamp(30px, 7.5cqi, 36px);
  height: clamp(30px, 7.5cqi, 36px);
  background: transparent;
  border-color: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Narrow columns ---------- */

@media (max-width: 520px) {
  .wrap { padding-top: 22px; }
  .column { gap: 24px; }
}

@container (max-width: 480px) {
  /* The title reaches almost to the go button here, so fade the art in later and slide the
     crop to put the catch in the gap between the title and the button. */
  .link { --fade-stop: 75%; }
  .link-art img { object-position: 40% 50%; }
  .brand-logo img { margin: 2px 0 6px; }
}

@container (max-width: 279px) {
  .link-go { display: none; }
  .is-featured .link-tile { width: 44px; height: 44px; }
  .is-featured .link-label { font-size: 20px; }
}

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