/**
 * INSIDE PHARAON - Cinematic manufacturing film section
 * ------------------------------------------------------------------
 * Phase: PHARAON-HOME-VIDEO-02  (narrative + polish: 02.1)
 * Scope: homepage only (body.home). Never affects other templates.
 *
 * TYPOGRAPHY
 * No font is imported and no family is hard-coded. The display face comes
 * from the theme's own Redux variable and everything else simply inherits
 * the body face, so this section follows the site if its fonts are ever
 * changed:
 *   --themeht-typography-secondary-font-family   headings  (TASA Orbiter)
 *   --themeht-typography-body-font-family        body      (Google Sans Flex)
 *
 * PALETTE - sampled from the live site, not invented:
 *   #273791  brand primary (buttons, badges)
 *   #E3AD0B  logo accent, used sparingly
 *
 * The reveal states are armed by .is-ready, which pharaon-home-video.js adds.
 * Without the script nothing is ever hidden - the section renders flat.
 */

body.home .ph-video {
  --phv-navy-deep: #070d26;
  --phv-navy-mid: #101a45;
  --phv-brand: #273791;
  --phv-accent: #e3ad0b;
  --phv-ink: #ffffff;
  --phv-ink-soft: rgba(255, 255, 255, 0.66);
  --phv-ink-mid: rgba(255, 255, 255, 0.5);
  --phv-ink-faint: rgba(255, 255, 255, 0.34);
  --phv-line: rgba(255, 255, 255, 0.14);
  --phv-ease: cubic-bezier(0.16, 0.84, 0.28, 1);

  /* Display face follows the theme; body face is inherited, never declared. */
  --phv-display: var(--themeht-typography-secondary-font-family, inherit);

  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 78% 4%, rgba(39, 55, 145, 0.46) 0%, rgba(39, 55, 145, 0) 58%),
    linear-gradient(180deg, #070d26 0%, #101a45 50%, #070d26 100%);
  color: var(--phv-ink);
  padding: clamp(64px, 7.5vw, 132px) clamp(20px, 3.6vw, 84px);
  overflow: hidden;
}

/* A single hairline of brand colour at the top edge - the only chrome. */
body.home .ph-video::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227, 173, 11, 0.5), transparent);
}

body.home .ph-video__inner {
  max-width: 1560px;
  margin: 0 auto;
}

/* ============================================================
   HEAD ROW - eyebrow left, editorial index right
   ============================================================ */
body.home .ph-video__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(20px, 2.6vw, 34px);
  border-bottom: 1px solid var(--phv-line);
}

body.home .ph-video__eyebrow,
body.home .ph-video__tag {
  margin: 0;
  font-size: clamp(11px, 0.86vw, 14px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}

body.home .ph-video__eyebrow { color: var(--phv-accent); }
body.home .ph-video__tag { color: var(--phv-ink-mid); }
body.home .ph-video__tag .ph-video__num {
  color: var(--phv-ink-faint);
  margin-right: 0.5em;
}

/* ============================================================
   HEADLINE - masked line reveal, theme display face
   ============================================================ */
body.home .ph-video__title {
  margin: clamp(26px, 3.4vw, 48px) 0 0;
  font-family: var(--phv-display);
  font-weight: 600;
  font-size: clamp(38px, 6.2vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--phv-ink);
}

body.home .ph-video__line {
  display: block;
  overflow: hidden;
  /* Descender guard - the mask would otherwise clip g/y/p. */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

body.home .ph-video__line > span { display: block; }

body.home .ph-video__title .ph-video__accent { color: var(--phv-accent); }

body.home .ph-video__lead {
  max-width: 52ch;
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.65;
  color: var(--phv-ink-soft);
}

/* ============================================================
   VIDEO FRAME - the centrepiece
   aspect-ratio reserves the box up front, so the film can never
   introduce layout shift while it buffers.
   ============================================================ */
body.home .ph-video__frame {
  position: relative;
  margin: clamp(32px, 4.2vw, 64px) 0 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #05091c;
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.48);
}

body.home .ph-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Poster is frame 0 of the film, so playback starts without a jump. */
}

/* ============================================================
   PLAY / PAUSE CONTROL
   ============================================================ */
body.home .ph-video__control {
  position: absolute;
  right: clamp(12px, 1.4vw, 22px);
  bottom: clamp(12px, 1.4vw, 22px);
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  min-height: 44px;              /* touch target */
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(7, 13, 38, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  color: var(--phv-ink);
  font-family: inherit;          /* theme body face */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;

  transition:
    background-color 220ms var(--phv-ease),
    border-color 220ms var(--phv-ease);
}

body.home .ph-video__control:hover {
  background: rgba(39, 55, 145, 0.75);
  border-color: rgba(255, 255, 255, 0.38);
}

body.home .ph-video__control:focus-visible {
  outline: 2px solid var(--phv-accent);
  outline-offset: 3px;
}

/* Two bars (playing) / triangle (paused), drawn in CSS - no icon font. */
body.home .ph-video__icon {
  position: relative;
  width: 10px;
  height: 12px;
  flex: 0 0 auto;
}
body.home .ph-video__icon::before,
body.home .ph-video__icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 12px;
  background: currentColor;
  transition: all 200ms var(--phv-ease);
}
body.home .ph-video__icon::before { left: 0; }
body.home .ph-video__icon::after { right: 0; }

body.home .ph-video__control[data-state="paused"] .ph-video__icon::before {
  left: 1px;
  width: 0;
  height: 0;
  background: transparent;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid currentColor;
}
body.home .ph-video__control[data-state="paused"] .ph-video__icon::after { opacity: 0; }

/* ============================================================
   CHAPTER INDEX + PROGRESS
   The chapters mirror the film's own acts; the active one and the
   progress line are both driven by the video's currentTime, not by
   a separate timer.
   ============================================================ */
body.home .ph-video__track {
  margin: clamp(22px, 2.6vw, 36px) 0 0;
}

body.home .ph-video__progress {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.11);
  overflow: hidden;
}

body.home .ph-video__progress-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--phv-brand), var(--phv-accent));
  will-change: transform;
}

body.home .ph-video__steps {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.5vw, 30px);
  align-items: center;

  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}

body.home .ph-video__step {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 30px);

  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--phv-ink-mid);
  transition: color 420ms var(--phv-ease);
}

body.home .ph-video__step::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
body.home .ph-video__step:last-child::after { display: none; }

body.home .ph-video__step.is-active { color: var(--phv-accent); }
body.home .ph-video__step.is-done { color: var(--phv-ink-faint); }

/* ============================================================
   REVEAL
   Hidden states only exist once JS has stamped .is-ready, so a
   missing or blocked script can never strand this section blank.
   ============================================================ */
body.home .ph-video.is-ready .ph-video__line > span {
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition:
    transform 1s var(--phv-ease),
    opacity 1s var(--phv-ease);
}
body.home .ph-video.is-ready .ph-video__eyebrow,
body.home .ph-video.is-ready .ph-video__tag,
body.home .ph-video.is-ready .ph-video__lead,
body.home .ph-video.is-ready .ph-video__track {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.8s var(--phv-ease),
    transform 0.8s var(--phv-ease);
}
body.home .ph-video.is-ready .ph-video__frame {
  clip-path: inset(0 0 100% 0 round 14px);
  -webkit-clip-path: inset(0 0 100% 0 round 14px);
  transition:
    clip-path 1.1s var(--phv-ease),
    -webkit-clip-path 1.1s var(--phv-ease);
}
body.home .ph-video.is-ready .ph-video__el {
  transform: scale(1.03);
  transition: transform 1.6s var(--phv-ease);
}

/* Revealed --------------------------------------------------- */
body.home .ph-video.is-revealed .ph-video__eyebrow { transition-delay: 60ms; }
body.home .ph-video.is-revealed .ph-video__tag { transition-delay: 140ms; }

body.home .ph-video.is-revealed .ph-video__eyebrow,
body.home .ph-video.is-revealed .ph-video__tag,
body.home .ph-video.is-revealed .ph-video__lead,
body.home .ph-video.is-revealed .ph-video__track {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.home .ph-video.is-revealed .ph-video__line > span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
body.home .ph-video.is-revealed .ph-video__line:nth-child(1) > span { transition-delay: 200ms; }
body.home .ph-video.is-revealed .ph-video__line:nth-child(2) > span { transition-delay: 310ms; }
body.home .ph-video.is-revealed .ph-video__line:nth-child(3) > span { transition-delay: 420ms; }

body.home .ph-video.is-revealed .ph-video__lead { transition-delay: 540ms; }

body.home .ph-video.is-revealed .ph-video__frame {
  clip-path: inset(0 0 0% 0 round 14px);
  -webkit-clip-path: inset(0 0 0% 0 round 14px);
  transition-delay: 420ms;
}
body.home .ph-video.is-revealed .ph-video__el {
  transform: scale(1);
  transition-delay: 480ms;
}
body.home .ph-video.is-revealed .ph-video__track { transition-delay: 900ms; }

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1024px) {
  body.home .ph-video__title { font-size: clamp(34px, 7vw, 62px); }
  body.home .ph-video__frame { border-radius: 12px; }
  body.home .ph-video.is-ready .ph-video__frame { --phv-clip: 100%; }
  body.home .ph-video.is-revealed .ph-video__frame { --phv-clip: 0%; }
  body.home .ph-video.is-ready .ph-video__frame,
  body.home .ph-video.is-revealed .ph-video__frame {
    clip-path: inset(0 0 var(--phv-clip, 0%) 0 round 12px);
    -webkit-clip-path: inset(0 0 var(--phv-clip, 0%) 0 round 12px);
  }
  body.home .ph-video.is-ready .ph-video__el { transform: scale(1.02); }
}

/* ============================================================
   MOBILE - headline, then film, then supporting copy
   ============================================================ */
@media (max-width: 768px) {
  body.home .ph-video { padding-left: 20px; padding-right: 20px; }
  body.home .ph-video__head { padding-bottom: 16px; }
  body.home .ph-video__lead { max-width: none; }

  /* Copy reads better underneath the film on a phone. */
  body.home .ph-video__inner { display: flex; flex-direction: column; }
  body.home .ph-video__head { order: 1; }
  body.home .ph-video__title { order: 2; }
  body.home .ph-video__frame { order: 3; }
  body.home .ph-video__lead { order: 4; margin-top: clamp(20px, 5vw, 28px); }
  body.home .ph-video__track { order: 5; }

  body.home .ph-video__steps { gap: 8px 14px; }
  body.home .ph-video__step { gap: 8px 14px; font-size: 10px; letter-spacing: 0.12em; }
  body.home .ph-video__control { right: 10px; bottom: 10px; padding: 0 13px; min-width: 44px; justify-content: center; }
  body.home .ph-video__control-text { display: none; }
}

/* ============================================================
   REDUCED MOTION
   Poster stays, nothing animates, nothing autoplays. The control
   remains so the visitor can start the film deliberately.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.home .ph-video.is-ready .ph-video__line > span,
  body.home .ph-video.is-ready .ph-video__eyebrow,
  body.home .ph-video.is-ready .ph-video__tag,
  body.home .ph-video.is-ready .ph-video__lead,
  body.home .ph-video.is-ready .ph-video__track,
  body.home .ph-video.is-revealed .ph-video__line > span,
  body.home .ph-video.is-revealed .ph-video__eyebrow,
  body.home .ph-video.is-revealed .ph-video__tag,
  body.home .ph-video.is-revealed .ph-video__lead,
  body.home .ph-video.is-revealed .ph-video__track {
    opacity: 1 !important;       /* [override-important] a11y */
    transform: none !important;  /* [override-important] a11y */
    transition: none !important; /* [override-important] a11y */
  }
  body.home .ph-video.is-ready .ph-video__frame,
  body.home .ph-video.is-revealed .ph-video__frame {
    clip-path: none !important;         /* [override-important] a11y */
    -webkit-clip-path: none !important; /* [override-important] a11y */
    transition: none !important;        /* [override-important] a11y */
  }
  body.home .ph-video.is-ready .ph-video__el,
  body.home .ph-video.is-revealed .ph-video__el {
    transform: none !important;  /* [override-important] a11y */
    transition: none !important; /* [override-important] a11y */
  }
}

/* ============================================================
   ELEMENTOR EDITOR
   The section must stay fully visible and editable.
   ============================================================ */
body.elementor-editor-active .ph-video__line > span,
body.elementor-editor-preview .ph-video__line > span,
body.elementor-editor-active .ph-video__eyebrow,
body.elementor-editor-preview .ph-video__eyebrow,
body.elementor-editor-active .ph-video__tag,
body.elementor-editor-preview .ph-video__tag,
body.elementor-editor-active .ph-video__lead,
body.elementor-editor-preview .ph-video__lead,
body.elementor-editor-active .ph-video__track,
body.elementor-editor-preview .ph-video__track,
body.elementor-editor-active .ph-video__el,
body.elementor-editor-preview .ph-video__el {
  opacity: 1 !important;       /* [override-important] editor safety */
  transform: none !important;  /* [override-important] editor safety */
  transition: none !important; /* [override-important] editor safety */
}
body.elementor-editor-active .ph-video__frame,
body.elementor-editor-preview .ph-video__frame {
  clip-path: none !important;         /* [override-important] editor safety */
  -webkit-clip-path: none !important; /* [override-important] editor safety */
}