/* =============================================================
   ALAQAAR — HERO FILM + DOOR
   Door design: docs/demos/door-navy-confirmed.html. Markup: Pages/Shared/_Hero.cshtml + _HeroDoor.cshtml,
   behaviour: wwwroot/js/hero-film.js. The caption, overlay and dot styles
   still come from sections.css (.hero__caption*, .hero__overlay, .hero__dot).
   ============================================================= */

/* Tall scroll track; the stage inside stays pinned. overflow must stay visible
   here (sections.css sets hidden on .hero), otherwise position:sticky stops working. */
.hero.hero--film {
  display: block;
  height: 340vh;
  min-height: 0;
  overflow: visible;
  --hero-caption-inset: clamp(16px, 5.4vw, 104px);
}
.hero__stick {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #232d36;
}
.hero__poster, .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* the film fills the whole stage; no letterbox, blur or background fill */
}
.hero__video { opacity: 0; transition: opacity 0.4s; }
.hero__video.is-ready { opacity: 1; }
.hero--film .hero__captions { z-index: 1; }
.hero--film .hero__dots { z-index: 2; }

/* ---------- the door: navy double door (docs/demos/door-navy-confirmed.html) ----------
   hero-film.js writes --e (0 closed .. 1 open) on #heroDoor; sizes use container units of the stage. */
.hero__door { display: none; }
.js .hero__door {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 6;
  direction: ltr;               /* the door never flips in RTL; only the engraved words localize */
  pointer-events: none;
  container-type: inline-size;
  --e: 0;
  --door: #222e3b; --door-hi: #2e3d4e; --door-lo: #18212b;
  --panel: #222e3b; --panel-hi: #324254; --panel-lo: #121a23;
  --gold: #c9a063; --edge-dark: rgba(0, 0, 0, 0.65); --edge-light: rgba(255, 255, 255, 0.1);
  --sg: 19%;                    /* half the gap in the gold seam that hides behind the logo */
}
.hero__door .doors { position: absolute; inset: 0; perspective: 1800px; transform-style: preserve-3d; }
.hero__door .door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, var(--door-hi) 0%, var(--door) 45%, var(--door-lo) 130%);
  backface-visibility: hidden;
  will-change: transform;
}
.hero__door .door.l { left: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--e) * -108deg)); }
.hero__door .door.r { right: 0; transform-origin: 100% 50%; transform: rotateY(calc(var(--e) * 108deg)); }
.hero__door .door::before {     /* thin gold frame */
  content: "";
  position: absolute;
  inset: 4.2%;
  border: 1px solid var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.hero__door .door.l::before { border-right-width: 0; right: 0; inset-inline-end: 0; }
.hero__door .door.r::before { border-left-width: 0; left: 0; }
.hero__door .door::after {      /* gold seam, faded out behind the logo */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(50% - var(--sg) - 8%), transparent calc(50% - var(--sg)), transparent calc(50% + var(--sg)), #000 calc(50% + var(--sg) + 8%), #000 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(50% - var(--sg) - 8%), transparent calc(50% - var(--sg)), transparent calc(50% + var(--sg)), #000 calc(50% + var(--sg) + 8%), #000 100%);
}
.hero__door .door.l::after { right: 0; }
.hero__door .door.r::after { left: 0; }
.hero__door .shade { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--e) * 0.9); }
.hero__door .door.l .shade { background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 70%); }
.hero__door .door.r .shade { background: linear-gradient(270deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 70%); }

/* four soft-relief panels, sunk into the leaves, each with one engraved word */
.hero__door .panel {
  position: absolute;
  left: 12%;
  width: 76%;
  height: 18%;
  z-index: 2;
  border-radius: 1.2cqw;
  background: var(--panel);
  box-shadow: inset 0.9cqw 0.9cqw 2cqw var(--panel-lo), inset -0.9cqw -0.9cqw 2cqw var(--panel-hi);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero__door .panel.t { top: 8%; }
.hero__door .panel.b { top: 74%; }
.hero__door .pw { display: grid; justify-items: center; gap: 1cqw; color: var(--gold); font-family: var(--font-heading); }
.hero__door .pw span {
  font-weight: 600;
  font-size: 2.5cqw;
  line-height: 1;
  letter-spacing: 0.3em;
  padding-inline-start: 0.3em;
  white-space: nowrap;
  opacity: 0.92;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hero__door .pw i { display: block; width: 4.5cqw; height: 1px; background: var(--gold); opacity: 0.6; }
.hero__door--ar .pw { font-family: "IBM Plex Sans Arabic", var(--font-heading); }
.hero__door--ar .pw span { letter-spacing: 0; padding-inline-start: 0; font-weight: 700; font-size: 2.9cqw; }

/* the real logo, centred; the seam falls in the gap between its L and the second A (48.46% of its width) */
.hero__door .door-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 72cqw;
  height: auto;
  transform: translate(-48.46%, -50%);
  opacity: clamp(0, calc(1 - var(--e) * 1.7), 1);
}

/* tall screens (phones in portrait): bigger logo, smaller words, shorter seam gap */
@media (max-aspect-ratio: 20/21) {
  .js .hero__door { --sg: 9%; }
  .hero__door .door-logo { width: 88cqw; }
  .hero__door .pw span { font-size: 2.9cqw; letter-spacing: 0.2em; padding-inline-start: 0.2em; }
  .hero__door .pw i { width: 9cqw; }
  .hero__door--ar .pw span { font-size: 3.6cqw; letter-spacing: 0; padding-inline-start: 0; }
}

@media (max-width: 600px) {
  .hero.hero--film { height: 240vh; --hero-caption-inset: 1.5rem; }
  .hero--film .hero__captions { inset-block-start: 16%; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
}