/* ==================================================
   HOME HERO (HOME PAGE ONLY) — FIXED HEIGHT MODEL
   File: assets/css/home-hero.css
   ================================================== */

/* Core height variables (JS may override these on :root for accuracy) */
:root {
  /* If you already set --nav-h in JS, we reuse it as a fallback */
  --msf-navbar-h: var(--nav-h, 80px);

  /* Topbar default (your topbar is 34px desktop); JS can update this */
  --msf-topbar-h: 34px;

  /* WP admin bar (JS can set this when logged in) */
  --msf-adminbar-h: 0px;

  /* Mobile minimum requirement */
  --msf-hero-min-h: 520px;

  /* If navbar is overlaying (fixed), JS can set this to navbar height */
  --msf-hero-offset: 0px;

  /* Default hero height fallback (JS can set --msf-hero-h to a px value) */
  --msf-hero-h: calc(100svh - var(--msf-adminbar-h) - var(--msf-topbar-h) - var(--msf-navbar-h));
}

/* UI layout knobs (kept global for convenience; feel free to scope to .home-hero) */
:root {
  --hero-ui-left: 28px;
  --hero-ui-right: 28px;
  --hero-ui-size: 56px;
  --hero-ui-gap: 0px;

  --hero-accent: #ffbf06;

  --flower-top: 56%;
  --flower-width: min(380, 28vw);
  --flower-gap-to-arrows: 18px;
  --flower-duration: 1.2s;
}

/* Base hero container */
.home-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  margin: 0 !important;

  /* If navbar overlaps hero (fixed/out-of-flow), this prevents hiding behind it */
  padding-top: var(--msf-hero-offset);

  /* Height model */
  height: var(--msf-hero-h);
  min-height: var(--msf-hero-min-h);
}

/* Swiper height must match hero height */
.home-hero .swiper,
.home-hero .swiper-wrapper,
.home-hero .swiper-slide {
  height: 100%;
}

.home-hero .hero-swiper {
  display: block;
  width: 100%;
}

/* Slide base */
.home-hero .hero-slide {
  position: relative;
  overflow: hidden;
}

/* Media layer (image fills slide) */
.home-hero .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
}

/* Overlay (premium vignette + gradient for readability) */
.home-hero .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 30% 35%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.75)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15));
}

/* Layout */
.home-hero .hero-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}

.home-hero .hero-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
  max-width: 760px;
  padding-top: clamp(16px, 4vh, 72px);
}

/* Typography */
.home-hero .hero-eyebrow {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.home-hero .hero-title {
  font-family: 'Averia Sans Libre', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: #feeddb;
}

.home-hero .hero-subtitle {
  font-size: 1.1rem;
  max-width: 560px;
  line-height: 1.6;
  opacity: 0.95;
}

/* CTA spacing */
.home-hero .hero-cta .btn {
  margin-right: 0.75rem;
}

/* ==================================================
   SWIPER UI — MATCH SCREENSHOT
   Dots: left (vertical)
   Arrows: right (vertical stack)
   ================================================== */

/* Make UI wrapper non-layout affecting and ensure clickability */
.home-hero .hero-ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.home-hero .swiper-pagination {
  position: absolute !important;
  left: var(--hero-ui-left) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;

  width: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  z-index: 4 !important;
  pointer-events: auto;
}

.home-hero .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 191, 6, 0.4);
  opacity: 1;
}

.home-hero .swiper-pagination-bullet-active {
  width: 12px;
  height: 12px;
  background: var(--hero-accent);
}

.home-hero .swiper-button-prev,
.home-hero .swiper-button-next {
  position: absolute !important;
  right: var(--hero-ui-right) !important;
  left: auto !important;

  width: var(--hero-ui-size) !important;
  height: var(--hero-ui-size) !important;

  border-radius: 999px !important;
  background: transparent !important;
  border: 2px solid rgba(255, 191, 6, 0.7) !important;

  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  pointer-events: auto;
}

.home-hero .swiper-button-prev {
  top: calc(50% - (var(--hero-ui-size) / 2) - (var(--hero-ui-gap) / 2)) !important;
  transform: translateY(-100%) !important;
}

.home-hero .swiper-button-next {
  top: calc(50% + (var(--hero-ui-size) / 2) + (var(--hero-ui-gap) / 2)) !important;
  transform: translateY(0) !important;
}

.home-hero .swiper-button-prev::after,
.home-hero .swiper-button-next::after {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--hero-accent) !important;
}

.home-hero .swiper-button-prev:hover,
.home-hero .swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.18) !important;
  border-color: var(--hero-accent) !important;
}

/* Optional: hide arrows on very small screens */
@media (max-width: 480px) {
  .home-hero .swiper-button-prev,
  .home-hero .swiper-button-next {
    display: none !important;
  }
}

/* Text reveal (FIX: no padding-top on each child) */
.home-hero .hero-content > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.home-hero .swiper-slide-active .hero-content > * {
  opacity: 1;
  transform: translateY(0);
}

.home-hero .swiper-slide-active .hero-content > *:nth-child(1) {
  transition-delay: 0.05s;
}
.home-hero .swiper-slide-active .hero-content > *:nth-child(2) {
  transition-delay: 0.12s;
}
.home-hero .swiper-slide-active .hero-content > *:nth-child(3) {
  transition-delay: 0.2s;
}
.home-hero .swiper-slide-active .hero-content > *:nth-child(4) {
  transition-delay: 0.28s;
}

/* Cinematic zoom */
.home-hero .swiper-slide-active .hero-media img {
  transition: transform 6.5s ease;
  transform: scale(1.08);
}

/* ==================================================
   FLOWER FX (Slide 2)
   ================================================== */

.home-hero .hero-fx--flower {
  position: absolute;
  inset: 0;
  z-index: 2; /* above overlay (1), below text (3/4) */
  pointer-events: none;
  overflow: hidden;
}

.home-hero .hero-fx--flower .hero-fx-img {
  position: absolute;
  top: var(--flower-top);
  right: calc(
    var(--hero-ui-right, 28px) + var(--hero-ui-size, 56px) + var(--flower-gap-to-arrows, 18px)
  );

  width: var(--flower-width);
  height: auto;

  opacity: 0;
  transform: translate(-120%, -50%);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.25));
}

.home-hero .hero-fx--flower.fx-run .hero-fx-img {
  animation: flowerSlideStop var(--flower-duration) ease-out forwards;
}

@keyframes flowerSlideStop {
  0% {
    opacity: 0;
    transform: translate(-120%, -50%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-hero * {
    transition: none !important;
    animation: none !important;
  }
  .home-hero .hero-media img {
    transform: none !important;
  }
}

/* Mobile: bring controls inward */
@media (max-width: 768px) {
  :root {
    --hero-ui-left: 18px;
    --hero-ui-right: 18px;
    --hero-ui-size: 50px;
    --hero-ui-gap: 0px;
  }

  .home-hero .hero-inner {
    align-items: flex-end;
  }

  .home-hero .hero-content {
    padding: 2.25rem 0 4.5rem;
  }
}

/* Reduce hero height on tablets/phones */
@media (max-width: 991.98px) {
  :root {
    --hero-vh: 90vh;
  } /* was 110vh */
}

@media (max-width: 575.98px) {
  :root {
    --hero-vh: 80vh;
  } /* smaller phones */
  .home-hero {
    min-height: 420px;
  } /* was effectively too tall */
}

/* DESKTOP: force a shorter hero (override your min-height) */
@media (min-width: 992px) {
  .home-hero {
    height: 460px !important; /* change 680px */
    min-height: 0 !important;
  }
}

/* MOBILE: force a shorter hero */
@media (max-width: 991.98px) {
  .home-hero {
    height: calc(62vh - var(--nav-h, 0px)) !important; /* adjust 62vh */
    min-height: 360px !important; /* adjust 420px */
  }
}

@media (max-width: 575.98px) {
  .home-hero {
    height: calc(55vh - var(--nav-h, 0px)) !important; /* smaller phones */
    min-height: 320 !important;
  }
}