/**
 * home-lite.css — lightweight ("lite mode") homepage styling.
 *
 * Loaded on the homepage in both modes; every rule below is scoped to
 * `html.kixx-lite`, which the pre-paint bootstrap in templates/home.php stamps
 * when the page is on the lite URL (/?lite=1). Lite mode is URL-driven so WP
 * Engine caches the full / and lite /?lite=1 homepages under separate keys.
 *
 * Lite mode ships no GSAP and no main.js, so this stylesheet has two jobs:
 *   1. Hide the preloader and the entrance-only hero layers.
 *   2. Reveal the hero resting state + the below-the-fold content statically,
 *      since the ScrollTrigger reveals that main.js would have run never fire.
 *
 * The only un-scoped rule is #skip-intro (the preloader button, which lives on
 * the FULL page) — everything else keys off .kixx-lite.
 */

/* ── Skip button (full preloader — NOT lite) ───────────────────────────── */

#skip-intro {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 110; /* above #loader (z-index 100) */
  padding: 0.9rem 1.6rem;
  min-height: 3rem; /* comfortable tap target */
  border-radius: 9999px;
  background: #000;
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
}

#skip-intro:hover {
  background: #1a1a1a;
}

#skip-intro:focus-visible {
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55);
}

/* Pressed state — locked while the lite page loads. */
#skip-intro.is-loading,
#skip-intro:disabled {
  cursor: progress;
  opacity: 0.85;
}

/* Once lite engages the loader is gone, so the button goes with it. */
.kixx-lite #skip-intro {
  display: none !important;
}

/* ── Preloader & entrance-only hero layers ─────────────────────────────── */

.kixx-lite #loader {
  display: none !important;
}

/* Layers that exist purely for the GSAP intro — never part of the rest state. */
.kixx-lite #hero > h1,
.kixx-lite #wipe-panel,
.kixx-lite #growth-photo-cycler,
.kixx-lite #word-growth,
.kixx-lite .growth-outline,
.kixx-lite #closing-statement {
  display: none !important;
}

/* ── Hero resting state ────────────────────────────────────────────────── */

/* The dark gradient is animated to opacity:1 at the end of the intro; show it
   straight away so the CTA text stays legible over the still. */
.kixx-lite #video-overlay {
  opacity: 1;
}

/* Static poster fills the hero. In the clean server path this is
   <img id="hero-still">; in the cached-full fallback the <video> simply shows
   its own poster (main.js never calls load()/play(), so no .mp4 request). */
.kixx-lite #hero-still {
  z-index: 30;
}

/* The CTA, #main-nav, booking form, social proof and scroll indicator are all
   visible by default — main.js hides them via gsap.set(), which never runs in
   lite mode — so they need no rules here. */

/* ── Below-the-fold: reveal statically (no ScrollTrigger in lite) ──────── */

/* Brand-intro: the full version is a pinned, full-bleed scroll story that
   reveals six "stanzas" one at a time over heavy imagery. Lite can't pin or
   animate, so we redesign it as a calm, static editorial column: tamed
   headline, constrained measure, an orange rule between each story beat. The
   heavy imagery is omitted server-side; the display:none rules below only
   matter in the cached-full fallback (full HTML served to a lite client). */
.kixx-lite .brand-block--hero {
  height: auto !important;
  max-height: none !important;
  min-height: auto;
  overflow: visible;
  background: #0a0a0a;
  padding: clamp(4rem, 9vw, 7rem) 1.25rem;
}

.kixx-lite .brand-img-strip,
.kixx-lite .brand-desktop-panels,
.kixx-lite .brand-bg-overlay {
  display: none !important;
}

/* Readable centred column instead of the full-bleed pinned layout. */
.kixx-lite .brand-block--hero .brand-text {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

/* Tame the entrance-scaled headline down to a calm, legible size. */
.kixx-lite .brand-block--hero .brand-text h2 {
  font-size: clamp(2.25rem, 6.5vw, 4rem) !important;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

/* Un-stack the six grid-stacked steps into a spaced vertical story. */
.kixx-lite .brand-subtitle-area {
  display: block;
  margin-top: 0;
}

.kixx-lite .brand-subtitle {
  grid-area: auto;
  position: static;
  opacity: 1;
  transform: none;
  max-width: 36rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.6;
}

/* Short orange rule above each stanza after the first — rhythm + brand colour. */
.kixx-lite .brand-subtitle + .brand-subtitle {
  margin-top: 2.75rem;
}

.kixx-lite .brand-subtitle + .brand-subtitle::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0 auto 2.75rem;
  border-radius: 2px;
  background: var(--color-kixx-orange, #FF7500);
}

/* Lead line a touch larger and full-white for emphasis. */
.kixx-lite .brand-subtitle[data-step="0"] {
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  color: #fff;
}

/* Keep the brushed display lines ("I CAN DO THIS.", #TEAMORANGE) full white. */
.kixx-lite .brand-subtitle .font-display {
  color: #fff;
}

/* Cap + centre the closing CTA so it doesn't span the whole column. */
.kixx-lite .brand-subtitle .booking-form__cta {
  max-width: 24rem;
  margin: 2rem auto 0;
}

/* ── "Full version" escape hatch ───────────────────────────────────────── */

/* Rendered in both modes but only shown under .kixx-lite. */
#kixx-full-link {
  display: none;
}

.kixx-lite #kixx-full-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 200;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 0.8rem;
  line-height: 1;
  text-decoration: none;
}

.kixx-lite #kixx-full-link:hover {
  background: rgba(0, 0, 0, 0.85);
}