/* ── HERO MODULE ── */
.hds-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--charcoal);
}
.hds-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hds-hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hds-hero--overlay .hds-hero__bg-img,
.hds-hero--overlay .hds-hero__bg-video {
  filter: brightness(0.68);
}
.hds-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-lg) var(--gutter);
  max-width: 820px;
  width: 100%;
}
.hds-hero__eyebrow {
  font-family: var(--font-utility);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sage);
  font-weight: var(--fw-regular);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: hdsHeroFadeUp 1s 0.3s var(--ease) forwards;
}
.hds-hero__heading {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  color: var(--white);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: hdsHeroFadeUp 1s 0.5s var(--ease) forwards;
}
.hds-hero__heading em { color: var(--sage); font-style: italic; }
.hds-hero__sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255,255,255,.78);
  max-width: 560px;
  margin: 0 auto var(--space-lg);
  line-height: var(--lh-body);
  opacity: 0;
  animation: hdsHeroFadeUp 1s 0.7s var(--ease) forwards;
}
.hds-hero__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: hdsHeroFadeUp 1s 0.9s var(--ease) forwards;
}
@keyframes hdsHeroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .hds-hero { min-height: 460px; }
  .hds-hero__actions { flex-direction: column; align-items: center; }
  .hds-hero__actions .btn { width: 100%; max-width: 300px; text-align: center; }
}


/* ============================================================
   HERO — CSS ANIMATION BACKGROUNDS
   Three selectable animated backgrounds for hero sections.
   All use only CSS + inline SVG data URIs — no images needed.

   Shared base:
     .hds-hero__bg-anim      — fills the hero exactly like a
                                background image (position:absolute, inset:0)
     .hds-hero__bg-anim--*   — sets the background gradient +
                                positions child elements

   The existing .hds-hero--overlay class darkens the animation
   for text legibility exactly as it does for image/video heroes.
   ============================================================ */

/* ── Shared animation container ──────────────────────────────── */

.hds-hero__bg-anim {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Apply the same brightness filter the overlay toggle uses for
   image/video, so animated heroes get consistent text legibility. */
.hds-hero--overlay .hds-hero__bg-anim {
  /* Overlay is built into the gradient rather than a filter here;
     individual animations handle their own darkness level. */
}

/* ============================================================
   ANIMATION 1 — BOTANICAL (SAGE)
   Dark forest-green gradient with silhouetted tropical leaves
   and palm fronds drifting slowly — like being in a jungle
   clearing on the North Shore.
   ============================================================ */

.hds-hero__bg-anim--botanical {
  background:
    radial-gradient(ellipse 80% 60% at 30% 70%, rgba(60, 100, 70, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(40, 75, 50, 0.45) 0%, transparent 65%),
    linear-gradient(165deg, #1a3528 0%, #243e30 35%, #1e3a2c 65%, #162e22 100%);
}

/* ── Leaf element base ───────────────────────────────────────── */

.anim-leaf {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  will-change: transform;
}

/* Tropical leaf silhouette — elongated teardrop with centre vein */
.anim-leaf--1,
.anim-leaf--3,
.anim-leaf--5 {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 165'><path d='M50,4 C76,8 92,36 88,76 C84,112 70,138 50,148 C30,138 16,112 12,76 C8,36 24,8 50,4 Z' fill='%23c3d3b9' fill-opacity='0.22'/><line x1='50' y1='4' x2='50' y2='148' stroke='%23c3d3b9' stroke-width='1.2' stroke-opacity='0.14'/></svg>");
}

/* Broader monstera-inspired leaf — wider, rounder */
.anim-leaf--2,
.anim-leaf--4,
.anim-leaf--6 {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 130'><path d='M80,6 C122,10 150,40 146,78 C142,110 118,124 80,122 C42,124 18,110 14,78 C10,40 38,10 80,6 Z' fill='%23c3d3b9' fill-opacity='0.18'/><path d='M80,6 C80,6 76,50 68,80 C60,110 54,122 54,122' stroke='%23c3d3b9' stroke-width='1' stroke-opacity='0.1' fill='none'/><path d='M80,6 C80,6 84,50 92,80 C100,110 106,122 106,122' stroke='%23c3d3b9' stroke-width='1' stroke-opacity='0.1' fill='none'/></svg>");
}

/* Positions and sizes — each leaf unique */
.anim-leaf--1 { width: 180px; height: 295px; top: -8%; left:  8%; transform: rotate(-20deg); animation: leafSway 22s ease-in-out infinite; }
.anim-leaf--2 { width: 240px; height: 195px; top: 55%; left: -4%; transform: rotate(12deg);  animation: leafSway 28s ease-in-out infinite 3s; }
.anim-leaf--3 { width: 130px; height: 213px; top: 15%; left: 72%; transform: rotate(35deg);  animation: leafSway 25s ease-in-out infinite 6s; }
.anim-leaf--4 { width: 200px; height: 163px; top: 68%; left: 60%; transform: rotate(-8deg);  animation: leafSway 32s ease-in-out infinite 1s; }
.anim-leaf--5 { width: 100px; height: 164px; top:  5%; left: 42%; transform: rotate(50deg);  animation: leafSway 19s ease-in-out infinite 9s; }
.anim-leaf--6 { width: 160px; height: 130px; top: 30%; left: 85%; transform: rotate(-28deg); animation: leafSway 24s ease-in-out infinite 4s; }

/* ── Palm frond ──────────────────────────────────────────────── */

.anim-frond {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  will-change: transform;
  /* Frond: a cluster of long narrow blades radiating from a stem tip */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 320'><g transform='translate(100,310)' fill='none' stroke='%23c3d3b9' stroke-opacity='0.2'><path d='M0,0 Q-30,-80 -70,-160 Q-50,-130 -30,-90 L0,0' fill='%23c3d3b9' fill-opacity='0.12'/><path d='M0,0 Q30,-80 70,-160 Q50,-130 30,-90 L0,0' fill='%23c3d3b9' fill-opacity='0.12'/><path d='M0,0 Q-60,-60 -120,-100 Q-90,-70 -60,-50 L0,0' fill='%23c3d3b9' fill-opacity='0.1'/><path d='M0,0 Q60,-60 120,-100 Q90,-70 60,-50 L0,0' fill='%23c3d3b9' fill-opacity='0.1'/><path d='M0,0 Q-10,-90 -20,-200' stroke-width='1.5'/><line x1='0' y1='0' x2='0' y2='-200' stroke-width='1'/></g></svg>");
}

.anim-frond--1 { width: 320px; height: 420px; bottom: -60px; left:  -50px; transform: rotate(-10deg); animation: frondSway 18s ease-in-out infinite; }
.anim-frond--2 { width: 260px; height: 340px; bottom: -40px; right: -30px; transform: rotate(15deg) scaleX(-1); animation: frondSway 23s ease-in-out infinite 5s; }

/* ── Keyframes — botanical ───────────────────────────────────── */

@keyframes leafSway {
  0%   { transform: var(--leaf-base, rotate(0deg)) translate(0, 0); }
  25%  { transform: var(--leaf-base, rotate(0deg)) translate(6px, -12px) rotate(4deg); }
  50%  { transform: var(--leaf-base, rotate(0deg)) translate(-4px, -8px) rotate(-3deg); }
  75%  { transform: var(--leaf-base, rotate(0deg)) translate(8px, -16px) rotate(5deg); }
  100% { transform: var(--leaf-base, rotate(0deg)) translate(0, 0); }
}

@keyframes frondSway {
  0%, 100% { transform: var(--frond-base, rotate(0deg)); }
  40%       { transform: var(--frond-base, rotate(0deg)) rotate(4deg); }
  70%       { transform: var(--frond-base, rotate(0deg)) rotate(-3deg); }
}


/* ============================================================
   ANIMATION 2 — OCEAN (BLUE)
   Deep-sea gradient with four layered sine-wave shapes
   scrolling at staggered speeds + a caustic light layer.

   Each wave is an SVG path with a true sine-curve top edge
   rather than a border-radius blob — so they read as actual
   waves. Progressive blur on higher layers creates depth
   recession: the nearest wave is sharpest, the farthest
   (highest) is the softest wash of foam.

   Background-size: 50% on a 200%-wide element means the SVG
   fills exactly one viewport width. background-repeat: repeat-x
   tiles it into the second half, making translateX(-50%)
   loop seamlessly.
   ============================================================ */

.hds-hero__bg-anim--ocean {
  background: linear-gradient(
    180deg,
    #071e2e 0%,
    #0c3050 20%,
    #104268 50%,
    #0c3050 80%,
    #071e2e 100%
  );
}

/* ── Wave elements ─────────────────────────────────────────── */

.anim-wave {
  position: absolute;
  width: 200%;
  left: 0;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  will-change: transform;
}

/* Wave 1 — deep swell, slowest, heaviest */
.anim-wave--1 {
  height: 90px;
  bottom: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90' preserveAspectRatio='none'><path d='M0,40 C33,0 67,80 100,40 C133,0 167,80 200,40 L200,90 L0,90 Z' fill='rgb(26,110,148)' fill-opacity='0.62'/></svg>");
  filter: blur(4px);
  animation: waveScroll 26s linear infinite;
}

/* Wave 2 — mid swell, scrolls the other way */
.anim-wave--2 {
  height: 58px;
  bottom: 62px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 58' preserveAspectRatio='none'><path d='M0,26 C25,4 75,50 100,26 C125,4 175,50 200,26 L200,58 L0,58 Z' fill='rgb(40,135,175)' fill-opacity='0.44'/></svg>");
  filter: blur(5px);
  animation: waveScrollR 19s linear infinite;
}

/* Wave 3 — lighter chop, shorter period */
.anim-wave--3 {
  height: 40px;
  bottom: 100px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><path d='M0,18 C25,3 75,35 100,18 C125,3 175,35 200,18 L200,40 L0,40 Z' fill='rgb(62,168,205)' fill-opacity='0.28'/></svg>");
  filter: blur(6px);
  animation: waveScroll 14s linear infinite 1.5s;
}

/* Wave 4 — sea-foam, sage-tinted, the softest layer */
.anim-wave--4 {
  height: 28px;
  bottom: 132px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'><path d='M0,14 C25,2 75,25 100,14 C125,2 175,25 200,14 L200,28 L0,28 Z' fill='rgb(195,211,185)' fill-opacity='0.18'/></svg>");
  filter: blur(8px);
  animation: waveScrollR 10s linear infinite 3s;
}

/* ── Depth and light ───────────────────────────────────────── */

/* Sky reflected on still deep water */
.hds-hero__bg-anim--ocean::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 12%, rgba(80, 175, 220, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 78% 65%, rgba(16, 84, 130, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 18% 52%, rgba(20, 100, 145, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Caustic shimmer — sunlight rippling on the water surface */
.hds-hero__bg-anim--ocean::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 28% 14% at 38% 38%, rgba(120, 210, 240, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 18% 10% at 68% 55%, rgba(120, 210, 240, 0.05) 0%, transparent 60%);
  animation: causticDrift 13s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes causticDrift {
  0%   { opacity: 0.5; transform: translate(0, 0)   scale(1); }
  50%  { opacity: 1;   transform: translate(3%, -2%) scale(1.06); }
  100% { opacity: 0.6; transform: translate(-2%, 3%) scale(0.96); }
}

/* ── Keyframes — ocean ─────────────────────────────────────── */

@keyframes waveScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes waveScrollR {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}


/* ============================================================
   ANIMATION 3 — FLORAL (PLUM)
   Deep plum-to-aubergine gradient scattered with slowly
   rotating hibiscus-inspired flowers — evoking Hawaii's
   state flower, the pua aloalo.
   ============================================================ */

.hds-hero__bg-anim--floral {
  background:
    radial-gradient(ellipse 65% 55% at 25% 35%, rgba(118, 52, 140, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 80% 75%, rgba(80, 30, 100, 0.40) 0%, transparent 60%),
    linear-gradient(145deg, #1e1030 0%, #2e1845 35%, #3a2055 60%, #1e1030 100%);
}

/* ── Flower elements ──────────────────────────────────────────── */

.anim-flower {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  will-change: transform;
  /* 5-petal hibiscus silhouette: ellipse petals + sage centre dot */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g transform='translate(50 50)'><ellipse rx='9' ry='24' cy='-22' fill='%23765285' fill-opacity='0.38'/><ellipse rx='9' ry='24' cy='-22' fill='%23765285' fill-opacity='0.38' transform='rotate(72)'/><ellipse rx='9' ry='24' cy='-22' fill='%23765285' fill-opacity='0.38' transform='rotate(144)'/><ellipse rx='9' ry='24' cy='-22' fill='%23765285' fill-opacity='0.38' transform='rotate(216)'/><ellipse rx='9' ry='24' cy='-22' fill='%23765285' fill-opacity='0.38' transform='rotate(288)'/><circle r='7' fill='%23c3d3b9' fill-opacity='0.50'/></g></svg>");
}

/* Scattered positions, sizes and staggered animations */
.anim-flower--1 { width: 180px; height: 180px; top:  8%; left: 12%; opacity: 0.75; animation: flowerSpin 60s linear infinite,       flowerPulse 8s  ease-in-out infinite; }
.anim-flower--2 { width: 110px; height: 110px; top: 55%; left: 78%; opacity: 0.60; animation: flowerSpin 80s linear infinite reverse, flowerPulse 11s ease-in-out infinite 2s; }
.anim-flower--3 { width: 240px; height: 240px; top: 62%; left: 18%; opacity: 0.45; animation: flowerSpin 95s linear infinite,       flowerPulse 14s ease-in-out infinite 4s; }
.anim-flower--4 { width:  80px; height:  80px; top: 10%; left: 68%; opacity: 0.70; animation: flowerSpin 50s linear infinite reverse, flowerPulse 7s  ease-in-out infinite 1s; }
.anim-flower--5 { width: 140px; height: 140px; top: 32%; left: 88%; opacity: 0.55; animation: flowerSpin 70s linear infinite,       flowerPulse 10s ease-in-out infinite 6s; }
.anim-flower--6 { width: 200px; height: 200px; top: 20%; left: 40%; opacity: 0.35; animation: flowerSpin 110s linear infinite reverse, flowerPulse 16s ease-in-out infinite 3s; }

/* ── Keyframes — floral ──────────────────────────────────────── */

@keyframes flowerSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes flowerPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

/* Combined spin + pulse: stack transforms */
.anim-flower--1 { animation: flowerSpinPulse1 60s linear infinite; }
.anim-flower--2 { animation: flowerSpinPulse2 80s linear infinite; }
.anim-flower--3 { animation: flowerSpinPulse3 95s linear infinite; }
.anim-flower--4 { animation: flowerSpinPulse4 50s linear infinite; }
.anim-flower--5 { animation: flowerSpinPulse5 70s linear infinite; }
.anim-flower--6 { animation: flowerSpinPulse6 110s linear infinite; }

@keyframes flowerSpinPulse1  { 0%,100%{transform:rotate(0deg)   scale(1)}   50%{transform:rotate(180deg)  scale(1.08)} }
@keyframes flowerSpinPulse2  { 0%,100%{transform:rotate(360deg) scale(1)}   50%{transform:rotate(180deg)  scale(1.06)} }
@keyframes flowerSpinPulse3  { 0%,100%{transform:rotate(0deg)   scale(1)}   50%{transform:rotate(180deg)  scale(1.1)}  }
@keyframes flowerSpinPulse4  { 0%,100%{transform:rotate(360deg) scale(1)}   50%{transform:rotate(180deg)  scale(1.07)} }
@keyframes flowerSpinPulse5  { 0%,100%{transform:rotate(0deg)   scale(1)}   50%{transform:rotate(180deg)  scale(1.05)} }
@keyframes flowerSpinPulse6  { 0%,100%{transform:rotate(360deg) scale(1)}   50%{transform:rotate(180deg)  scale(1.09)} }


/* ============================================================
   SHARED — REDUCED MOTION
   Users with vestibular disorders or motion sensitivity get
   the gradient backgrounds without any animation.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .anim-leaf,
  .anim-frond,
  .anim-wave,
  .anim-flower {
    animation: none !important;
  }
}