/**
 * Playverse px rhythm — loaded LAST to beat legacy + ux-ui-system.
 * Reference: https://playversegames.gr/
 *
 * Homepage layout uses main[data-site-route="home"] (set in app/(site)/layout.tsx).
 * Do not rely on body.home — it can desync during hydration and breaks spacing/typography.
 */

:root {
  /* Layout — Playverse: 100px vertical, 5% horizontal (~351px content at 390vw) */
  --pv-section-y: 100px;
  --pv-section-x: 5%;
  --pv-hero-bottom: 60px;
  --pv-content-max: 900px;
  --pv-desc-max: 600px;
  --pv-hero-desc-max: 580px;
  --pv-section-inner-max: min(1040px, 100%);
  --pv-heading-max: 100%;
  --pv-intro-max: 100%;

  /* Type scale — mobile/base px (Playverse @ 390px) */
  --pv-hero-brand-size: 46px;
  --pv-eyebrow-size: 12px;
  --pv-eyebrow-weight: 600;
  --pv-eyebrow-letter-spacing: 3.6px;
  --pv-eyebrow-margin-bottom: 16px;

  --pv-heading-size: 28.8px;
  --pv-heading-line-height: 1.2;
  --pv-heading-margin-bottom: 16px;

  --pv-body-size: 16.8px;
  --pv-body-line-height: 1.7;
  --pv-body-margin-bottom: 20px;

  --pv-hero-desc-size: 16px;
  --pv-hero-desc-line-height: 27.2px;
  --pv-hero-desc-margin-bottom: 40px;
  --pv-hero-brand-margin-bottom: 8px;
  --pv-hero-title-margin-bottom: 16px;

  --pv-card-title-size: 17.6px;
  --pv-card-title-margin-bottom: 14px;
  --pv-card-text-size: 15.2px;
  --pv-card-text-line-height: 1.7;

  --pv-scroll-label-size: 11.2px;
  --pv-scroll-label-letter-spacing: 2.24px;
  --pv-scroll-line-height: 40px;

  --pv-seam-width: min(120px, 36vw);
}

@media (max-width: 767px) {
  :root {
    --pv-hero-brand-size: 34px;
    --pv-eyebrow-size: 10px;
    --pv-eyebrow-letter-spacing: 2.2px;
    --pv-eyebrow-margin-bottom: 10px;
    --pv-heading-size: 21px;
    --pv-heading-line-height: 1.05;
    --pv-heading-margin-bottom: 10px;
    --pv-body-size: 14px;
    --pv-body-line-height: 1.55;
    --pv-body-margin-bottom: 14px;
    --pv-hero-desc-size: 14px;
    --pv-hero-desc-line-height: 1.5;
    --pv-hero-desc-margin-bottom: 24px;
    --pv-hero-title-margin-bottom: 10px;
    --pv-card-title-size: 15px;
    --pv-card-text-size: 13px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --pv-hero-brand-size: 72px;
    --pv-heading-size: 36px;
    --pv-hero-desc-size: 17.2px;
    --pv-hero-desc-line-height: 29.24px;
    --pv-body-size: 16.8px;
    --pv-desc-max: 480px;
    --pv-hero-desc-max: 480px;
    --pv-heading-max: 480px;
    --pv-intro-max: 460px;
    --pv-section-y: 88px;
    --pv-section-inner-max: min(920px, 100%);
  }
}

@media (min-width: 1024px) {
  :root {
    --pv-hero-brand-size: 96px;
    --pv-heading-size: 48px;
    --pv-hero-desc-size: 18.4px;
    --pv-hero-desc-line-height: 31.28px;
    --pv-desc-max: 560px;
    --pv-hero-desc-max: 540px;
    --pv-heading-max: 620px;
    --pv-intro-max: 560px;
    --pv-section-inner-max: min(1040px, 100%);
  }
}

/* ----- Section shell (Playverse: padding 100px 5%) ----- */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] :is(
  .site-section-block,
  .programs-section,
  .membership-section,
  .partnerships-section,
  .booking-section,
  .about-section,
  .gym-gallery-section,
  .bmi-section,
  .strength-section,
  .location-section,
  .faq-section,
  .get-in-touch-section
) {
  padding: var(--pv-section-y) var(--pv-section-x) !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] section.hero-section.hero-section--neon {
  padding: var(--pv-section-y) var(--pv-section-x) var(--pv-hero-bottom) !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block > .container,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block :is(
  .programs-container,
  .membership-container,
  .partnerships-container,
  .booking-section-intro,
  .about-container,
  .gym-gallery-container,
  .bmi-container,
  .strength-container,
  .location-container,
  .faq-container,
  .get-in-touch-container
) {
  width: 100% !important;
  max-width: var(--pv-section-inner-max) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-container.hero-container--neon {
  max-width: var(--pv-section-inner-max) !important;
  width: 100% !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-content.hero-content--neon {
  max-width: min(100%, var(--pv-content-max)) !important;
}

/* ----- Eyebrows ----- */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block :is(
  [class*="-eyebrow"],
  .booking-section-intro-eyebrow
) {
  font-size: var(--pv-eyebrow-size) !important;
  font-weight: var(--pv-eyebrow-weight) !important;
  line-height: 1 !important;
  letter-spacing: var(--pv-eyebrow-letter-spacing) !important;
  margin: 0 0 var(--pv-eyebrow-margin-bottom) !important;
}

/* ----- Section headings (h2) ----- */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block :is(
  .programs-title,
  .membership-title,
  .partnerships-title,
  .booking-section-intro-title,
  .about-title,
  .gym-gallery-title,
  .bmi-title,
  .strength-title,
  .location-title,
  .faq-title,
  .get-in-touch-title
) {
  font-size: var(--pv-heading-size) !important;
  line-height: var(--pv-heading-line-height) !important;
  margin: 0 auto var(--pv-heading-margin-bottom) !important;
  max-width: var(--pv-heading-max) !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block :is(
  .programs-intro-head,
  .membership-heading,
  .partnerships-heading,
  .booking-section-intro,
  .about-home-spotlight__content,
  .gym-gallery-heading,
  .bmi-heading,
  .strength-heading,
  .location-heading,
  .faq-heading,
  .get-in-touch-heading
) {
  max-width: var(--pv-intro-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ----- Section body copy ----- */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block :is(
  .programs-description,
  .membership-text,
  .partnerships-text,
  .about-text,
  .gym-gallery-text,
  .bmi-text,
  .strength-intro,
  .location-text,
  .faq-intro,
  .get-in-touch-intro
) {
  font-size: var(--pv-body-size) !important;
  line-height: var(--pv-body-line-height) !important;
  max-width: var(--pv-desc-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--pv-body-margin-bottom) !important;
}

/* ----- Hero (keep fonts, Playverse px) ----- */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-neon-brand-title,
html[lang="el"] body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-neon-brand-title,
html[lang="en"] body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-neon-brand-title {
  font-size: var(--pv-hero-brand-size) !important;
  line-height: 1.02 !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] section.hero-section.hero-section--neon .hero-neon-brand-wrap {
  margin-bottom: var(--pv-hero-brand-margin-bottom) !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] section.hero-section.hero-section--neon .hero-title {
  font-size: var(--pv-heading-size) !important;
  line-height: var(--pv-heading-line-height) !important;
  letter-spacing: normal !important;
  margin: 0 auto var(--pv-hero-title-margin-bottom) !important;
  max-width: min(100%, var(--pv-heading-max)) !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] section.hero-section.hero-section--neon .hero-text {
  font-size: var(--pv-hero-desc-size) !important;
  line-height: var(--pv-hero-desc-line-height) !important;
  max-width: var(--pv-hero-desc-max) !important;
  margin: 0 auto var(--pv-hero-desc-margin-bottom) !important;
}

/* ----- Cards ----- */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block :is(
  .program-card-title,
  .membership-card-title
) {
  font-size: var(--pv-card-title-size) !important;
  margin-bottom: var(--pv-card-title-margin-bottom) !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block :is(
  .program-card-text,
  .membership-card-text
) {
  font-size: var(--pv-card-text-size) !important;
  line-height: var(--pv-card-text-line-height) !important;
}

/* ----- Transparent sections (background continuity) ----- */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .programs-membership-flow .programs-section,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .programs-membership-flow .membership-section,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .programs-membership-flow .partnerships-section,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .programs-membership-flow .booking-section,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .about-gallery-bmi-flow > section,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .location-faq-flow > section {
  background: transparent !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] :is(.programs-bg, .membership-bg, .partnerships-bg) {
  display: none !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .partnerships-section .partner-logo-scroll,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .booking-section .booking-panel-shell {
  width: 100% !important;
  max-width: var(--pv-section-inner-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Legacy seam rails only — markers live in section-dividers.css */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-divider__rail,
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-divider__gem {
  display: none !important;
  content: none !important;
}

/* Eyebrow flanking lines — removed site-wide */
html body:not(.dashboard-app-body) [class*="-eyebrow"]::before,
html body:not(.dashboard-app-body) [class*="-eyebrow"]::after,
html body:not(.dashboard-app-body) .booking-section-intro-eyebrow::before,
html body:not(.dashboard-app-body) .booking-section-intro-eyebrow::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block [class*="-eyebrow"],
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .site-section-block .booking-section-intro-eyebrow {
  display: block;
  gap: 0;
}

/* ----- Hero scroll — SCROLL label + top-to-bottom glow line ----- */
html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-scroll-hint__line.scroll-line {
  position: relative;
  width: 1px !important;
  height: var(--pv-scroll-line-height) !important;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(222, 36, 47, 0.38) 0%,
    rgba(222, 36, 47, 0.14) 62%,
    transparent 100%
  ) !important;
  transform-origin: center top;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-scroll-hint__line.scroll-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(222, 36, 47, 0.08) 0%,
    transparent 100%
  );
  opacity: 0.8;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-scroll-hint__line.scroll-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -130%;
  width: 4px;
  height: 58%;
  margin-left: -2px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(222, 36, 47, 0.4) 16%,
    rgba(255, 130, 138, 1) 50%,
    rgba(222, 36, 47, 0.4) 84%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(222, 36, 47, 0.75),
    0 0 24px rgba(222, 36, 47, 0.42),
    0 0 40px rgba(222, 36, 47, 0.18);
  animation: pv-scroll-glow-down 1.15s cubic-bezier(0.42, 0, 0.22, 1) infinite;
}

html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-scroll-hint__label {
  font-size: var(--pv-scroll-label-size) !important;
  letter-spacing: var(--pv-scroll-label-letter-spacing) !important;
  text-transform: uppercase !important;
}

@keyframes pv-scroll-glow-down {
  0% {
    top: -120%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    top: 130%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.dashboard-app-body) main.site-main[data-site-route="home"] .hero-scroll-hint__line.scroll-line::after {
    animation: none;
    top: 35%;
    opacity: 0.75;
  }
}