/* ==========================================================================
   Prodaff — modern video hero
   --------------------------------------------------------------------------
   Scope:   the home page hero only. Everything is namespaced `pd-` so it
            cannot collide with the metize theme, Bootstrap, or Elementor.
   Assets:  the poster is an <img class="pd-hero__poster"> in the markup.
            Video sources are set in hero.js (they must not preload).
   Fonts:   Plus Jakarta Sans is already enqueued site-wide by the theme.
   ========================================================================== */

.pd-hero {
  /* ---- brand tokens (carried over from the existing site palette) ---- */
  --pd-blue:        #034ff4;
  --pd-blue-lift:   #2f6bff;
  --pd-indigo:      #325be1;
  --pd-navy:        #2c3371;
  --pd-ink:         #070b1c;

  --pd-text:        #ffffff;
  --pd-text-soft:   rgba(255, 255, 255, 0.76);
  --pd-text-faint:  rgba(255, 255, 255, 0.58);
  --pd-hairline:    rgba(255, 255, 255, 0.14);
  --pd-glass:       rgba(255, 255, 255, 0.08);

  --pd-shell:       1200px;
  --pd-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(7rem, 13vh, 10.5rem) 1.5rem clamp(4rem, 8vh, 7rem);
  background-color: var(--pd-ink); /* paints before poster/video arrive */
  color: var(--pd-text);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   1. Media layer — poster, video, scrim, glow
   ========================================================================== */

.pd-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pd-ink);
}

/* The poster is a real <img>, not a CSS background. A background-image
   referenced through a custom property is resolved against the STYLESHEET's
   URL, not the document's — so a relative path silently 404s wherever the CSS
   does not sit beside the assets. An <img> resolves against the document,
   works unchanged from the media library or the child theme, and can carry
   fetchpriority so it paints immediately. */
.pd-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fades in only once the video is genuinely playing (class added in JS),
     so there is never a black box or a poster/video pop. */
  opacity: 0;
  transition: opacity 0.9s ease;
}

.pd-hero.is-video-playing .pd-hero__video { opacity: 1; }

/* Scrim. Shaped rather than uniform: a dark elliptical pool sits behind the
   text column so copy stays legible against the brightest frame of the loop,
   while the edges stay light enough that the hexagon motion is actually
   visible. A flat overlay heavy enough to protect the text would hide the
   video entirely and defeat the point of having one. */
.pd-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(95% 68% at 50% 40%,
      rgba(7, 11, 28, 0.84) 0%,
      rgba(7, 11, 28, 0.62) 42%,
      rgba(7, 11, 28, 0.22) 100%),
    linear-gradient(180deg,
      rgba(7, 11, 28, 0.70) 0%,     /* under the sticky nav */
      rgba(7, 11, 28, 0.24) 20%,
      rgba(7, 11, 28, 0.24) 52%,
      rgba(7, 11, 28, 0.72) 84%,
      var(--pd-ink) 100%);
}

/* Brand-coloured bloom so the hero reads as Prodaff blue, not generic purple. */
.pd-hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(48% 40% at 50% 26%, rgba(3, 79, 244, 0.32) 0%, transparent 70%),
    radial-gradient(38% 34% at 84% 76%, rgba(50, 91, 225, 0.22) 0%, transparent 72%);
  mix-blend-mode: screen;
}

/* The hero ends on a crisp edge against the white section below. A soft
   dark-to-white fade was tried first and read as a grey haze under the
   dashboard — the scrim's own bottom stop already settles to solid ink, so
   the clean boundary is both tidier and cheaper. */

/* ==========================================================================
   2. Content
   ========================================================================== */

.pd-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--pd-shell);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- eyebrow pill ---- */
.pd-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem 0.4rem 0.85rem;
  border: 1px solid var(--pd-hairline);
  border-radius: 100px;
  background: var(--pd-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--pd-text-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: border-color 0.25s var(--pd-ease), background 0.25s var(--pd-ease);
}

.pd-hero__eyebrow:hover,
.pd-hero__eyebrow:focus-visible {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.13);
  color: var(--pd-text);
}

.pd-hero__eyebrow-tag {
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  background: var(--pd-blue);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- headline ---- */
.pd-hero__title {
  margin: 1.75rem 0 0;
  max-width: 26ch;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  /* Insurance for the brightest frames of the loop — invisible on dark. */
  text-shadow: 0 2px 30px rgba(4, 7, 20, 0.55);
}

/* Accent one word only. Spanning the gradient across a whole phrase dropped
   its opening words to a washed-out grey that read as lower contrast rather
   than as emphasis. */
.pd-hero__title em {
  font-style: normal;
  background: linear-gradient(96deg, #d6e4ff 0%, #6f9dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pd-hero__sub {
  margin: 1.5rem 0 0;
  max-width: 56ch;
  color: var(--pd-text-soft);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
  text-shadow: 0 1px 18px rgba(4, 7, 20, 0.75);
}

/* ---- calls to action ---- */
.pd-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

/* Button rules are scoped to .pd-hero on purpose. The brand tokens they use
   are declared on .pd-hero, so an unscoped `.pd-btn` would resolve them to
   nothing elsewhere on the page — the gradient becomes invalid and `color:#fff`
   leaves white text on a white button. Scoping also keeps this file from
   restyling the theme's own buttons once it ships to WordPress. */
.pd-hero .pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.85rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--pd-ease), box-shadow 0.25s var(--pd-ease),
              background 0.25s var(--pd-ease), border-color 0.25s var(--pd-ease);
}

.pd-hero .pd-btn:hover { transform: translateY(-2px); }
.pd-hero .pd-btn:active { transform: translateY(0); }

.pd-hero .pd-btn--primary {
  background: linear-gradient(180deg, var(--pd-blue-lift) 0%, var(--pd-blue) 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
              0 10px 26px -8px rgba(3, 79, 244, 0.9);
}

.pd-hero .pd-btn--primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
              0 18px 38px -10px rgba(3, 79, 244, 1);
}

.pd-hero .pd-btn--ghost {
  border-color: var(--pd-hairline);
  background: var(--pd-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--pd-text);
}

.pd-hero .pd-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.14);
}

.pd-hero .pd-btn__play {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex: none;
}

.pd-hero .pd-btn__play svg { width: 9px; height: 9px; fill: currentColor; }

.pd-hero__note {
  margin: 1.25rem 0 0;
  color: var(--pd-text-faint);
  font-size: 0.875rem;
  font-weight: 400;
  text-shadow: 0 1px 14px rgba(4, 7, 20, 0.85);
}

/* ==========================================================================
   3. Dashboard screenshot
   ========================================================================== */

.pd-hero__shot {
  width: min(100%, 1060px);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  perspective: 1800px;
}

.pd-hero__frame {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
              0 50px 100px -30px rgba(0, 0, 0, 0.85),
              0 20px 50px -25px rgba(3, 79, 244, 0.55);
  /* Straightened by .is-in on reveal — see hero.js */
  transform: rotateX(9deg) scale(0.97);
  transform-origin: 50% 0;
  transition: transform 1.1s var(--pd-ease);
}

.pd-hero__shot.is-in .pd-hero__frame { transform: rotateX(0deg) scale(1); }

.pd-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Specular sheen across the glass frame. */
.pd-hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%);
  pointer-events: none;
}

/* ==========================================================================
   4. Reveal choreography
   Replaces the theme's WOW.js fadeInLeft/fadeInRight classes.
   ========================================================================== */

.pd-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--pd-ease), transform 0.8s var(--pd-ease);
  transition-delay: var(--pd-delay, 0ms);
}

.pd-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* No-JS: never leave content invisible. */
.no-js .pd-reveal { opacity: 1; transform: none; }

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .pd-hero { padding-top: clamp(5rem, 11vh, 7rem); }
  .pd-hero__title { max-width: 20ch; }
  .pd-hero__frame { transform: none; }
}

@media (max-width: 560px) {
  .pd-hero { padding-inline: 1.25rem; }
  .pd-hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .pd-hero .pd-btn { justify-content: center; width: 100%; }
  .pd-hero__eyebrow { font-size: 0.75rem; }
  .pd-hero__frame { padding: 5px; border-radius: 12px; }
  .pd-hero__frame, .pd-hero__frame::before { border-radius: 12px; }
  .pd-hero::after { height: 110px; }
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pd-hero__video { display: none; }         /* hero.js also skips loading it */
  .pd-reveal { opacity: 1; transform: none; transition: none; }
  .pd-hero__frame { transform: none; transition: none; }
  .pd-hero .pd-btn { transition: none; }
  .pd-hero .pd-btn:hover { transform: none; }
}

/* ==========================================================================
   7. Focus visibility — the theme does not provide a usable focus ring on dark
   ========================================================================== */

.pd-hero a:focus-visible,
.pd-hero button:focus-visible {
  outline: 2px solid #9dbcff;
  outline-offset: 3px;
}