/* ============================================================
   ZENOS - Esports Page Styles (Light Theme)
   ============================================================ */

/* --- Hero --- */
.esports-hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  position: relative;
  padding-top: var(--nav-height);
  background: var(--white);
  overflow: hidden;
}

.esports-hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(123, 112, 251, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 80%, rgba(84, 255, 224, 0.05) 0%, transparent 40%);
  pointer-events: none;
}

.esports-hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: var(--space-xl) 0;
}

.esports-hero h1 {
  color: var(--black);
  margin-bottom: var(--space-md);
}

.esports-hero__sub {
  color: var(--grey);
  max-width: 540px;
}

/* Labels are full-purple on this page's light backgrounds
   (the default --purple-tint is too washed out on white/#f0eff8) */
.esports-hero .label,
.esports-section .label {
  color: var(--purple);
}

.esports-hero__image {
  position: absolute;
  right: 3%;
  top: 54%;
  transform: translateY(-50%);
  width: 54%;
  max-width: 720px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Double Z-chip (top-left + bottom-right) at a fixed 36px —
     larger chip to match the bigger visual weight. */
  clip-path: polygon(
    36px 0, 100% 0, 100% calc(100% - 36px),
    calc(100% - 36px) 100%, 0 100%, 0 36px
  );
  filter: drop-shadow(0 32px 60px rgba(14, 11, 22, 0.28));
  will-change: transform;
}

.esports-hero__image img,
.esports-hero__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .esports-hero {
    min-height: auto;
    padding-bottom: var(--space-xl);
  }
  .esports-hero__image {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-xl);
    border-radius: var(--radius-lg);
  }
}

/* Anchor targets sit under both the fixed nav AND the sticky sub-nav. */
.esports-section[id] { scroll-margin-top: calc(var(--nav-height) + 3.5rem - 20px); }

/* --- Anchor nav (sticky sub-nav) --- */
/* The sticky sub-nav renders in two layers so the active link's 2px
   underline overlaps the 1px divider cleanly (no hairline gap):
   - The outer .esports-nav has NO overflow and NO border. It paints the
     divider via a ::before absolutely positioned at its bottom edge.
   - .esports-nav__inner owns overflow-x for horizontal scrolling. Its
     bottom edge is flush with the nav's bottom edge (no padding-bottom
     anywhere below the links), so the link's border-bottom sits at the
     same Y as the ::before divider.
   - Links paint AFTER ::before (later in DOM order), so the purple
     active border renders over the grey divider. */
.esports-nav {
  position: sticky;
  top: var(--nav-height);
  z-index: 99;
  background: rgba(246, 246, 246, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.9rem 0 0;
}

.esports-nav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.esports-nav__inner {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.esports-nav__inner::-webkit-scrollbar { display: none; }

.esports-nav__link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--grey);
  padding: 0 0 0.55rem;
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast);
}

.esports-nav__link:hover,
.esports-nav__link--active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

/* --- Section layout --- */
.esports-section {
  padding: var(--space-xl) 0;
  background: var(--white);
  position: relative;
}

.esports-section--alt {
  background: #f0eff8;
}

.esports-section__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.esports-section__layout--reverse {
  direction: rtl;
}

.esports-section__layout--reverse > * {
  direction: ltr;
}

@media (max-width: 991px) {
  .esports-section__layout,
  .esports-section__layout--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
}

/* --- Feature list --- */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.feature-item {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}

.feature-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(123, 112, 251, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  margin-top: 2px;
}

.feature-item h4 {
  font-size: 0.9375rem;
  margin-bottom: 2px;
}

.feature-item p {
  font-size: 0.875rem;
  color: var(--grey);
  line-height: 1.5;
}

/* --- Product cards (horizontal) --- */
.product-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.product-card {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}

/* The whole card isn't clickable — only the CTA is. Pin the chip-border
   fill to its idle state so hovering the card doesn't light it up. */
.product-card.chip-border--light:hover::before {
  background: rgba(123, 112, 251, 0.2);
}
.product-card.chip-border--light:hover::after {
  background: linear-gradient(135deg, #F6F6F6, #EDE8FF);
}

.product-card__cta {
  align-self: flex-start;
  margin-top: var(--space-md);
}

/* Media column wrapper: stacks an illustration/video with a Contact Us CTA
   below it so the second grid column reads as a unit. */
.esports-media-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/* Center the CTA under the graphic (parent has align-items: flex-start to
   keep the video/chips left-aligned). */
.esports-media-col__cta,
.viewer-media__cta {
  align-self: center;
}

/* Extra breathing room between the chips row and the viewer CTA so it
   matches the tighter spectating-column feel. */
.viewer-media__cta {
  margin-top: var(--space-sm);
}

/* Fixed-pixel double chip on the media CTAs so the corners stay
   proportional instead of scaling with button size. */
.esports-media-col__cta.btn--primary.btn--clip,
.viewer-media__cta.btn--primary.btn--clip {
  clip-path: polygon(
    14px 0, 100% 0, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 0 100%, 0 14px
  );
}

/* CTAs inside product cards are a bit smaller than headline CTAs */
.product-card__cta.btn {
  padding: 0.65rem 1.25rem;
  font-size: 0.8125rem;
}

/* Fixed-pixel double chip so the corners stay proportional on small buttons
   (percentage clip-paths chop too much of a short CTA's inner padding). */
.product-card__cta.btn--primary.btn--clip {
  clip-path: polygon(
    10px 0, 100% 0, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 0 100%, 0 10px
  );
}

/* Outline chipped button for light sections (double-chip border, transparent
   fill, purple stroke). Two-layer clip-path approach: ::before paints a full
   purple shape, ::after sits 1.5px inset with the card's fill gradient to
   leave only a 1.5px purple ring visible. On hover, ::after fills purple. */
.btn--outline {
  position: relative;
  color: var(--purple);
  background: transparent !important;
  isolation: isolate;
  overflow: visible;
  border-radius: 0;
}

.btn--outline::before,
.btn--outline::after {
  content: '';
  position: absolute;
  transition: background var(--duration-mid) var(--ease-out);
}

/* Border (outer) */
.btn--outline::before {
  inset: 0;
  z-index: -2;
  background: var(--purple);
  clip-path: polygon(
    10px 0, 100% 0, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 0 100%, 0 10px
  );
}

/* Fill (inner, inset 1.5px). Matches the card's chip-border-double--light
   fill so the button reads as a clean outline, not a chunky purple block. */
.btn--outline::after {
  inset: 1.5px;
  z-index: -1;
  background: linear-gradient(135deg, #F6F6F6, #EDE8FF);
  clip-path: polygon(
    8.5px 0, 100% 0, 100% calc(100% - 8.5px),
    calc(100% - 8.5px) 100%, 0 100%, 0 8.5px
  );
}

.btn--outline:hover { color: var(--white); }
.btn--outline:hover::after { background: var(--purple); }

.product-card__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: var(--space-xs);
}

.product-card__tagline {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.product-card__desc {
  font-size: 0.9375rem;
  color: var(--grey);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .product-cards {
    grid-template-columns: 1fr;
  }
}

/* --- SVG animation containers --- */
.svg-illustration {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.svg-illustration svg {
  width: 100%;
  height: auto;
}

/* ============================================================
   Hybrid illustrations: SVG wires layer + HTML overlay.
   Each illustration shares a fixed viewBox-matching coord
   space; HTML uses % positioning so it scales with container.
   ============================================================ */
.esports-illo {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--font-body);
}

.esports-illo__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.esports-illo__layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.esports-illo__node,
.esports-illo__tag,
.esports-illo__output,
.esports-illo__callout,
.esports-illo__cam,
.esports-illo__device,
.esports-illo__timeline,
.esports-illo__panel {
  position: absolute;
  box-sizing: border-box;
}

/* Shared tokens for overlay text */
.illo-eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}

.illo-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.15rem;
  color: var(--purple);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.illo-mono {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--purple);
}

.illo-mono--muted { opacity: 0.5; }

/* ---------- Data Services illustration (inline vertical stack) ----------
   Each row is a self-contained horizontal band. No absolute positioning
   across rows — children can't drift out of their siblings.
   Only PRISM is 2-layer (stream SVG behind, text overlay in front). */
.esports-illo--data {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 360px;
  margin: 0 auto;
}

.esports-illo--data .illo-card {
  padding: 14px 18px 16px;
  text-align: left;
}

/* PRISM row: animated stream SVG background + centred text overlay */
.esports-illo--data .illo-prism {
  position: relative;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.esports-illo--data .illo-prism__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.esports-illo--data .illo-prism__content {
  position: relative;
  z-index: 1;
}
.esports-illo--data .illo-prism .illo-title { font-size: 1rem; }

/* Fan-out SVG: fixed height row; endpoints at x=80/240/400 of 480 viewBox
   (= 16.67% / 50% / 83.33% of container width) */
.esports-illo--data .illo-fanout {
  display: block;
  width: 100%;
  height: 72px;
}

/* Outputs row: 3 equal columns — chip centres land at 16.67/50/83.33%,
   exactly matching the fan-out SVG endpoints above */
.esports-illo--data .illo-outputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: start;
}

.esports-illo--data .illo-output-item {
  min-width: 88px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--purple);
  padding: 7px 14px;
  background: rgba(123, 112, 251, 0.1);
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 0 100%, 0 8px
  );
}

/* Callout: inline row, centred below outputs */
.esports-illo--data .illo-cyan-callout {
  align-self: center;
  margin-top: 24px;
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--black);
  background: transparent;
  position: relative;
  white-space: nowrap;
  isolation: isolate;
}

.esports-illo--data .illo-cyan-callout::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--cyan);
  clip-path: polygon(
    10px 0, 100% 0, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 0 100%, 0 10px
  );
}

.esports-illo--data .illo-cyan-callout::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  background: var(--cyan-tint);
  clip-path: polygon(
    8.5px 0, 100% 0, 100% calc(100% - 8.5px),
    calc(100% - 8.5px) 100%, 0 100%, 0 8.5px
  );
}

/* ---------- Spectating Tools illustration ---------- */
.esports-illo--spec { aspect-ratio: 4 / 3; }

.esports-illo--spec .main-viewport {
  left: 3%; top: 5%; width: 70%; height: 58%;
  background: rgba(123, 112, 251, 0.04);
  border: 1px solid rgba(123, 112, 251, 0.4);
  border-radius: 6px;
  overflow: hidden;
}

.esports-illo--spec .cam-label {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 8px;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  border-radius: 3px;
}

.esports-illo--spec .rec-badge {
  position: absolute;
  top: 8px; right: 8px;
  display: flex; align-items: center; gap: 4px;
  font-size: 0.5rem;
  font-weight: 700;
  color: #FF4444;
  letter-spacing: 0.1em;
}

.esports-illo--spec .rec-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: #FF4444;
  border-radius: 50%;
  animation: rec-pulse 1.5s infinite;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.esports-illo--spec .mini-cam {
  left: 76%; width: 21%;
  padding: 8px;
  background: rgba(123, 112, 251, 0.04);
  border: 1px solid rgba(123, 112, 251, 0.3);
  border-radius: 4px;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: 0.06em;
}

.esports-illo--spec .mini-cam--1 { top: 5%; height: 18%; }
.esports-illo--spec .mini-cam--2 { top: 25%; height: 18%; }
.esports-illo--spec .mini-cam--add {
  top: 45%; height: 18%;
  border-style: dashed;
  border-color: rgba(84, 255, 224, 0.6);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 0.6rem;
}

.esports-illo--spec .timeline-bar {
  left: 3%; right: 3%; bottom: 18%;
  height: 14%;
  background: rgba(123, 112, 251, 0.05);
  border: 1px solid rgba(123, 112, 251, 0.25);
  border-radius: 5px;
  padding: 8px 12px;
  display: flex; flex-direction: column; justify-content: center;
}

.esports-illo--spec .timeline-time {
  display: flex; justify-content: space-between;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.5rem;
  color: var(--grey);
}
.esports-illo--spec .timeline-time .cur { color: var(--purple); font-weight: 700; }

.esports-illo--spec .caption {
  left: 0; right: 0; bottom: 3%;
  text-align: center;
}

/* ---------- Viewer Experiences media (video + device strip) ---------- */
.viewer-media {
  width: 100%;
  max-width: 460px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.viewer-media__video {
  width: 100%;
  aspect-ratio: 600 / 338;
  clip-path: polygon(5% 0%, 100% 0%, 100% 92%, 95% 100%, 0% 100%, 0% 8%);
  background: #0E0B16;
}

.viewer-media__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.viewer-media__devices {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.viewer-media__devices-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--grey);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.viewer-media__devices-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.viewer-media .device-chip {
  padding: 5px 10px;
  font-family: var(--font-heading);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(123, 112, 251, 0.08);
  clip-path: polygon(
    6px 0, 100% 0, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 0 100%, 0 6px
  );
}

/* --- Image with glow --- */
.image-showcase {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.image-showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(123, 112, 251, 0.15);
  pointer-events: none;
}

.image-showcase img {
  width: 100%;
  display: block;
}

/* --- Virtual Production stacked carousel --- */
.vp-carousel {
  width: 100%;
}

.vp-carousel__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.vp-carousel__slide {
  position: absolute;
  inset: 0;
  clip-path: polygon(5% 0%, 100% 0%, 100% 92%, 95% 100%, 0% 100%, 0% 8%);
  cursor: pointer;
  transition:
    transform 700ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 700ms ease;
  will-change: transform, opacity;
}

.vp-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vp-carousel__slide.is-active {
  z-index: 3;
  transform: translate(0, 0) scale(1);
  opacity: 1;
}

.vp-carousel__slide.is-behind {
  z-index: 2;
  transform: translate(3%, 4%) scale(0.96);
  opacity: 0.55;
}

.vp-carousel__slide.is-further {
  z-index: 1;
  transform: translate(6%, 8%) scale(0.92);
  opacity: 0.28;
}

.vp-carousel__dots {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: center;
}

.vp-carousel__dot {
  width: 36px;
  height: 3px;
  background: rgba(123, 112, 251, 0.2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.vp-carousel__dot:hover {
  background: rgba(123, 112, 251, 0.45);
}

.vp-carousel__dot.is-active {
  background: var(--purple);
  transform: scaleY(1.6);
}

/* --- Stat row (chipped frame on light bg) --- */
.stat-row {
  display: flex;
  gap: var(--space-xl);
  justify-content: space-around;
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
}

.stat-row .stat {
  position: relative;
}

.stat-row .stat + .stat::before {
  content: '';
  position: absolute;
  left: calc(var(--space-xl) * -0.5);
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: var(--border-light);
}

.stat-row .stat__number {
  color: var(--purple);
}

.stat-row .stat__label {
  color: var(--grey);
  opacity: 1;
}

@media (max-width: 640px) {
  .stat-row {
    flex-direction: column;
    gap: var(--space-md);
  }
}

/* --- Venue grid --- */
.venue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.venue-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
}

.venue-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.venue-card:hover img {
  transform: scale(1.05);
}

.venue-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  color: var(--white);
}

.venue-card__overlay h4 {
  font-size: 1rem;
}

.venue-card__overlay p {
  font-size: 0.8125rem;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .venue-grid {
    grid-template-columns: 1fr;
  }
}

/* --- CTA section --- */
.esports-cta {
  padding: var(--space-2xl) 0;
  background: var(--black);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.esports-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(123, 112, 251, 0.15) 0%, transparent 60%);
  pointer-events: none;
}

.esports-cta h2 {
  margin-bottom: var(--space-md);
}

.esports-cta p {
  opacity: 0.6;
  max-width: 480px;
  margin: 0 auto var(--space-lg);
}