/* ============================================================================
   DR SOPHIA · CINEMATIC VIDEO MODAL  +  "Watch our story" hero trigger
   - Modal: dark-green cinema depth, volumetric light spill, rounded frame,
     rim-lit shadow, X + scrim dismiss, contained by default, native fullscreen.
   - Trigger: styled as .link-arrow, plain play glyph (turns copper on hover).
   Loads after home.css. Scoped to .vmodal / .vid-cta so it is inert elsewhere.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 · TRIGGER BUTTON  ·  plain play glyph, turns copper on hover
   --------------------------------------------------------------------------- */
button.vid-cta.link-arrow{
  -webkit-appearance:none; appearance:none;
  background:none; border:0; border-bottom:2px solid transparent;
  padding:0; margin:0; cursor:pointer;
  font-size:16px; /* slightly larger than the base .link-arrow 15px */
}
.vid-cta .vid-cta__ico{
  position:relative; display:inline-flex; width:auto; min-width:15px; height:1em;
  align-items:center; justify-content:center; overflow:visible;
}
.vid-cta .vid-cta__ico .vid-cta__play{
  position:relative; z-index:2; flex:none; display:block;
  width:.72em; height:.86em;
  -webkit-clip-path:polygon(12% 6%, 92% 50%, 12% 94%);
          clip-path:polygon(12% 6%, 92% 50%, 12% 94%);
  background:currentColor; /* plain solid glyph, follows the link colour */
  transition:background-color var(--ds-dur-fast,.2s) var(--ease,ease), transform var(--ds-dur-fast,.2s) var(--ease,ease);
}
/* on hover the whole link turns copper; the glyph fills with the signature
   brand copper and nudges forward. */
.vid-cta.link-arrow:hover .vid-cta__play{ background:var(--ds-color-copper); transform:translateX(2px); }

/* ----------------------------------------------------------------------------
   2 · MODAL OVERLAY  ·  the cinema
   --------------------------------------------------------------------------- */
.vmodal{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,60px);
  /* dark-green room with a soft pool of light where the screen sits */
  background:
    radial-gradient(130% 100% at 50% 44%,
      rgba(8,58,39,.55) 0%, rgba(4,36,24,.86) 42%, rgba(1,16,10,.96) 100%),
    rgba(1,12,8,.6);
  -webkit-backdrop-filter:blur(6px) saturate(.9);
          backdrop-filter:blur(6px) saturate(.9);
  opacity:0; transition:opacity .38s ease;
}
.vmodal[hidden]{ display:none; }
.vmodal.is-open{ opacity:1; }

/* faint volumetric light streaks raking across the room */
.vmodal::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(118deg, transparent 38%, rgba(233,166,107,.05) 50%, transparent 62%),
    radial-gradient(60% 42% at 50% 42%, rgba(213,105,27,.10), transparent 70%);
  mix-blend-mode:screen;
}

.vmodal__scrim{ position:absolute; inset:0; z-index:1; cursor:pointer; }

.vmodal__stage{
  position:relative; z-index:2;
  width:min(1120px, 94vw);
  transform:scale(.94); opacity:.6;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.vmodal.is-open .vmodal__stage{ transform:scale(1); opacity:1; }

/* the screen: rounded, black, rim-lit, deep cinematic shadow + light spill */
.vmodal__frame{
  position:relative;
  width:100%; aspect-ratio:16 / 9;
  border-radius:clamp(12px,1.5vw,18px);
  overflow:hidden; background:#000;
  box-shadow:
    0 48px 130px -24px rgba(0,0,0,.85),
    0 0 0 1px rgba(233,166,107,.20),
    0 0 70px -6px rgba(213,105,27,.28),
    0 0 160px 10px rgba(0,99,60,.22);
}
/* light bleeding out from the screen into the dark room */
.vmodal__frame::before{
  content:""; position:absolute; inset:-9% -7%; z-index:-1;
  background:radial-gradient(58% 58% at 50% 48%, rgba(213,105,27,.20), transparent 72%);
  filter:blur(46px); pointer-events:none;
}
.vmodal__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; object-fit:contain; background:#000;
  border-radius:inherit;
}

/* close control — sits just off the top-right corner of the screen */
.vmodal__close{
  position:absolute; top:-14px; right:-14px; z-index:3;
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  color:var(--ds-color-bone,#FFF5E9);
  background:rgba(3,28,19,.72);
  border:1px solid rgba(255,245,233,.22);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 6px 22px -6px rgba(0,0,0,.7);
  transition:color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.vmodal__close svg{ width:20px; height:20px; }
.vmodal__close:hover,
.vmodal__close:focus-visible{
  color:var(--ds-color-copper-light,#E9A66B);
  border-color:rgba(233,166,107,.6);
  background:rgba(3,28,19,.92);
  transform:scale(1.06);
  outline:none;
}

@media (max-width:560px){
  .vmodal__close{ top:-12px; right:-6px; width:40px; height:40px; }
}

/* ----------------------------------------------------------------------------
   3 · REDUCED MOTION  ·  no beam, no scale-in, straight cut
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .vmodal, .vmodal__stage{ transition:none; }
  .vmodal__stage{ transform:none; }
}