/**
 * landing.css — Marq II ROI Landing Page
 *
 * Supplemental styles loaded on the Landing Page (ROI) template only.
 * The main style.css (Tailwind v4 build) is already enqueued first.
 * This file handles landing-specific components that cannot be expressed
 * with existing Tailwind utility classes alone.
 *
 * All CSS custom properties (--font-sans, --font-serif, --color-bronze, etc.)
 * are defined in the main Tailwind @theme directive and are available here.
 *
 * Figma reference (frame 639:1115):
 *   — Hero video container: fullscreen, fills the viewport height
 *   — Page background: light cream/textured (NOT dark) — body bg colour shows through
 *   — Only the video itself is dark (sunset/ocean footage)
 *   — Header: 1440×100px. Desktop: hidden on load, slides down once the
 *     hero section has scrolled past. Mobile (<1024px): always visible.
 *     `position: fixed`, so it never reserves flow space — the hero
 *     video always starts flush at the very top (see page-templates/landing.php)
 */

/* ============================================================
   LANDING HEADER
   Hidden on load via translateY(-100%).
   Slides into view when JS adds .is-active.
   ============================================================ */

.landing-header {
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.landing-header.is-active {
  transform: translateY(0);
}

/* Mobile: header is always visible, regardless of scroll position */
@media (max-width: 1023px) {
  .landing-header {
    transform: translateY(0) !important;
    transition: none;
  }
}

/* ============================================================
   LANDING HERO SECTION
   Dark background visible around the constrained video container.
   Section is a flex column, centred — the video block sits inside it.
   ============================================================ */

.landing-hero {
  /* Page background is light cream/textured — NOT dark. Only the video is dark.
     Use the same background as the rest of the page (body background).
     A small amount of top/bottom padding is used so the video block sits
     inset from the top (matching Figma: ~20px above, ~70px below). */
  background-color: transparent;
  cursor: none;
}

/* ============================================================
   VIDEO CONTAINER (fullscreen)
   Fills the viewport height, edge-to-edge — no .wrapper padding.
   ============================================================ */

.landing-video-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--wp-adminbar));
  overflow: hidden;
  /* Dark background ensures the cream wordmark is legible before/if video fails to load */
  background-color: #2a2420;
}

/* ============================================================
   SCROLL-TO-NEXT ARROW — overlaid on the video, bottom-centre.
   ============================================================ */

.landing-scroll-arrow {
  display: inline-flex;
  padding: 8px;
  cursor: pointer;
}

/* ============================================================
   WORDMARK
   Inside the video container, absolute centred overlay.
   ============================================================ */

.landing-wordmark {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   BOUNCE CHEVRON
   ============================================================ */

@keyframes landing-bounce {

  0%,
  100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(7px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.landing-chevron {
  animation: landing-bounce 1.8s ease-in-out infinite;
  will-change: transform;
}

/* ============================================================
   CUSTOM CURSOR — desktop only
   ============================================================ */

.landing-cursor {
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* ============================================================
   LANDING BODY — editorial description paragraph
   ============================================================ */

.landing-body p {
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   ACCESSIBILITY — reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .landing-header {
    transition: none;
  }

  .landing-chevron {
    animation: none;
  }

  .landing-cursor {
    display: none !important;
  }

  .landing-wordmark {
    will-change: auto !important;
    opacity: 1 !important;
  }
}