/* ==========================================================================
   DHARMIKAM — VIDEO BAND
   Full-bleed ambient film band that sits between About and Services.

   Self-contained: this file adds the .video-band namespace and nothing else,
   so it can load last without touching any existing rule. It reuses the
   site's own decorative primitives (.blob, .ring, .particle, .float-ico) and
   motion tokens so the band reads as part of the original design.

   Layer order inside the band:
     -3  .video-band__media   the looping film (poster frame until it loads)
     -2  .video-band__scrim   deep-green scrim + gold glow
     -1  .blob / .ring        soft colour fields
      1  .video-band__inner   the copy and the play control
   ========================================================================== */

.video-band{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(110px,15vw,190px) 0;
  color:var(--cream);text-align:center;
  /* painted before the film arrives, so the band never flashes white */
  background:var(--deep);
}

/* --- the film ------------------------------------------------------------ */
.video-band__media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.video-band__media video{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  /* a hair over 1 so no edge shows if a browser rounds the cover maths */
  transform:scale(1.04);
}

/* --- scrim ---------------------------------------------------------------- */
.video-band__scrim{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,46,30,.88) 0%,rgba(15,46,30,.6) 46%,rgba(9,29,19,.92) 100%),
    radial-gradient(760px 480px at 50% 44%,rgba(192,153,63,.2),transparent 70%);
}
/* slow breathing glow behind the copy */
.video-band__glow{
  position:absolute;z-index:-2;top:50%;left:50%;
  width:min(78vw,860px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(226,200,138,.16),transparent 66%);
  animation:pulseGlow 12s ease-in-out infinite;
  pointer-events:none;
}

/* --- decor --------------------------------------------------------------- */
.video-band .blob--film-a{
  width:min(52vw,620px);aspect-ratio:1;top:-18%;left:-12%;
  background:radial-gradient(circle,rgba(45,106,79,.6),transparent 66%);
  opacity:.55;
}
.video-band .blob--film-b{
  width:min(44vw,520px);aspect-ratio:1;bottom:-20%;right:-10%;
  background:radial-gradient(circle,rgba(192,153,63,.38),transparent 66%);
  opacity:.5;
}
.video-band .float-ico{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
  color:var(--gold-soft);
  box-shadow:none;
}
.video-band .fi-1{top:15%;left:9%;right:auto;--s:60px}
.video-band .fi-2{top:26%;right:11%;--s:48px}
.video-band .fi-3{bottom:17%;left:17%;--s:46px}
.video-band .fi-4{bottom:24%;right:15%;left:auto;--s:56px}
.video-band .particle{background:radial-gradient(circle at 32% 32%,#fff,var(--gold-soft))}
.video-band .particle:nth-of-type(1){width:8px;height:8px;top:32%;left:28%;animation:driftUp 17s linear infinite}
.video-band .particle:nth-of-type(2){width:6px;height:6px;bottom:24%;right:30%;animation:driftUp 21s linear 4s infinite}
.video-band .particle:nth-of-type(3){width:10px;height:10px;top:58%;left:72%;animation:driftUp 19s linear 7s infinite}

/* --- copy ---------------------------------------------------------------- */
.video-band__inner{position:relative;z-index:1;max-width:760px;margin-inline:auto}
.video-band h2{color:var(--cream);max-width:20ch;margin-inline:auto}
.video-band .lead-text{color:rgba(236,244,239,.82);max-width:58ch;margin-inline:auto}

/* --- play control -------------------------------------------------------- */
/* The orbit carries the drift so the button itself keeps its transform free
   for the hover scale — an animation would otherwise win over :hover. */
.video-band__orbit{
  position:relative;display:inline-grid;place-items:center;
  margin-top:clamp(2.4rem,4vw,3.2rem);
  animation:floatSlow 7.5s ease-in-out infinite;
}
.video-band__orbit .ring--film{
  position:absolute;width:230%;aspect-ratio:1;
  border-color:rgba(226,200,138,.22);
}

.video-play{
  position:relative;z-index:1;display:grid;place-items:center;
  width:clamp(84px,9vw,112px);aspect-ratio:1;
  padding:0;border:0;border-radius:50%;
  background:linear-gradient(145deg,var(--gold-soft),var(--gold));
  color:var(--deep);cursor:pointer;
  box-shadow:0 22px 48px -18px rgba(6,20,13,.9),0 0 0 1px rgba(226,200,138,.45);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.video-play i{
  font-size:clamp(1.9rem,2.6vw,2.5rem);line-height:1;
  /* nudge the triangle so it reads optically centred in the disc */
  margin-left:.1em;
}
.video-play:hover,.video-play:focus-visible{
  transform:scale(1.07);
  box-shadow:0 28px 60px -18px rgba(6,20,13,.95),0 0 0 1px rgba(226,200,138,.75);
}
.video-play:focus-visible{outline:2px solid var(--gold-soft);outline-offset:6px}

/* expanding rings — the pulse/ripple */
.video-play__ripple{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(226,200,138,.6);
  animation:videoRipple 3.2s var(--ease-out) infinite;
}
.video-play__ripple:nth-of-type(2){animation-delay:1.05s}
.video-play__ripple:nth-of-type(3){animation-delay:2.1s}

@keyframes videoRipple{
  0%{transform:scale(1);opacity:.7}
  70%{opacity:0}
  100%{transform:scale(2.2);opacity:0}
}

.video-play__label{
  display:block;margin-top:1.7rem;
  font-size:.74rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-soft);
}

/* --- lightbox ------------------------------------------------------------ */
.video-modal{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.video-modal .modal-dialog{max-width:min(1060px,94vw)}
.video-modal .modal-content{background:transparent;border:0;box-shadow:none}
.video-modal .video-modal__frame{
  position:relative;overflow:hidden;
  border-radius:var(--r-md);
  background:#000;
  box-shadow:var(--sh-lg),0 0 0 1px rgba(226,200,138,.28);
}
.video-modal video{width:100%;height:100%;display:block;background:#000}
.video-modal .btn-close{
  position:absolute;top:-3rem;right:0;
  width:2.6rem;height:2.6rem;opacity:1;
  border-radius:50%;
  background-color:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  /* Bootstrap's close glyph is near-black; recolour it for the dark lightbox */
  filter:invert(1) grayscale(1) brightness(2.2);
  transition:background-color .35s var(--ease),transform .35s var(--ease-out);
}
.video-modal .btn-close:hover{background-color:rgba(255,255,255,.24);transform:rotate(90deg)}


/* --- the same film, inside the hero frame -------------------------------- */
/* .hero__frame keeps its own morph, float, shadow and ::after gradient; the
   film only needs the band's cover treatment underneath all of that. The
   control is the band's .video-play untouched — a wrapper does the centring
   so the button's own transform stays free for the hover scale. */
.hero__frame-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__frame-media video{
  width:100%;height:100%;display:block;
  /* object-position is the framing the hero photograph used */
  object-fit:cover;object-position:52% 46%;
  transform:scale(1.04);
}
.hero__frame-play{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;
  /* the frame's ::after gradient paints over the film, so the control needs a
     layer above it — but only the disc itself should take a click */
  pointer-events:none;
}
.hero__frame-play .video-play{pointer-events:auto}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:991.98px){
  .video-band{padding:clamp(88px,13vw,130px) 0}
  .video-band .fi-2{right:2%}
  .video-band .fi-3{left:6%}
  .video-band .fi-4{right:4%}
}

@media (max-width:767.98px){
  .video-band__inner{padding-inline:.4rem}
  .video-band h2{max-width:16ch}
  /* the floating botanicals crowd the copy once the band narrows */
  .video-band .float-ico,
  .video-band .particle{display:none}
  .video-band__orbit .ring--film{width:190%}
}

@media (max-width:575.98px){
  .video-band{padding:76px 0}
  .video-play{width:76px}
  .video-play__label{letter-spacing:.18em}
  .video-modal .btn-close{top:-2.7rem;width:2.3rem;height:2.3rem}
}

/* ==========================================================================
   REDUCED MOTION
   The global reduced-motion block already flattens durations; this stops the
   film itself as well, since a looping background is the point of the band.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .video-band__media video{display:none}
  .video-band__media{
    background-image:url("../images/video-poster.jpg");
    background-size:cover;background-position:center;
  }
  /* the hero frame falls back to the photograph it carried before */
  .hero__frame-media video{display:none}
  .hero__frame-media{
    background-image:url("../images/hero-head-massage.jpg");
    background-size:cover;background-position:52% 46%;
  }
  .video-play__ripple{display:none}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  .video-band{padding:1.5rem 0;background:#fff;color:#000}
  .video-band__media,.video-band__scrim,.video-band__glow,
  .video-band__orbit,.video-band .blob,.video-band .particle,
  .video-band .float-ico{display:none!important}
  .video-band h2,.video-band .lead-text{color:#000}
}