/* ============================================================
   VIDEO FEATURE — kwizzbit/video-feature
   Large featured 16:9 video in a sharp-cornered frame on cream,
   wrapped in the same animated gradient border as the Pro
   pricing card (coral with a rotating yellow streak).
   ============================================================ */
.video-feature {
  background: var(--wp--preset--color--cream);   /* matches the how-it-works segment below */
  padding-block: clamp(3rem, 7vw, 6rem);
  text-align: center;
}

/* Content lifts into view on page load — STAGGERED per child so the video
   frame rises a beat after the headline & lead, rather than the whole block
   arriving at once. Applied to each element (not __inner) so each carries its
   own delay; the frame is deliberately last. */
.video-feature__badge,
.video-feature__title,
.video-feature__lead,
.video-feature__toggle,
.video-feature__frame {
  animation: vf-rise 0.7s var(--wp--custom--motion--ease-out) both;
}
.video-feature__title  { animation-delay: 0.08s; }
.video-feature__lead   { animation-delay: 0.16s; }
.video-feature__toggle { animation-delay: 0.30s; }
.video-feature__frame  { animation-delay: 0.42s; }  /* clearly after the headline & lead */

/* JS holds the rise paused (at frame 0) until the page-loader clears, so it
   never plays behind the fading loader. Released on kwb:loaded by
   video-feature.js. No-JS users have no loader, so the rise just plays.
   The hold now pauses each staggered child. */
.video-feature__inner.vf-hold .video-feature__badge,
.video-feature__inner.vf-hold .video-feature__title,
.video-feature__inner.vf-hold .video-feature__lead,
.video-feature__inner.vf-hold .video-feature__toggle,
.video-feature__inner.vf-hold .video-feature__frame {
  animation-play-state: paused;
}
@keyframes vf-rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .video-feature__badge,
  .video-feature__title,
  .video-feature__lead,
  .video-feature__toggle,
  .video-feature__frame { animation: none; }
}
.video-feature__inner {
  /* Wider than the video so the big two-line headline can hold its breaks;
     the video frame itself is capped back to 1120px below. */
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
}

/* ── Trustpilot badge (homepage-hero counter style) ──────── */
.video-feature__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(26, 26, 26, 0.18);
  border-radius: 0;
  background: transparent;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wp--preset--color--ink-soft);
  margin: 0 0 0.5rem;
}
.video-feature__badge-value {
  font-weight: 700;
  color: var(--wp--preset--color--coral);
}

/* ── Page title — homepage-hero treatment ────────────────── */
.video-feature__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  /* Fluid so the 2 lines always hold; tops out at the hero's 5.5rem on wide screens */
  font-size: clamp(2.5rem, 6.3vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.10764em;
  color: var(--wp--preset--color--ink);
  margin: 0 auto 1.75rem;
}
/* ── Typewriter (impact "This." technique) ───────────────────
   The chars reserve their space (JS toggles visibility) so "anywhere"
   never shifts. A coral cursor flashes during the suspense beat, then
   hides as the word types in; the final period rests as a flashing
   cursor. The cursor is width:0 so it adds no layout of its own. */
.video-feature__cursor {
  display: inline-block;
  width: 0;
  color: var(--wp--preset--color--coral);
  visibility: hidden;                 /* shown by JS during suspense */
  animation: vf-cursor-blink 1.1s step-end infinite;
}
.video-feature__char.is-flashing {
  color: var(--wp--preset--color--coral);
  animation: vf-cursor-blink 1.1s step-end infinite;
}
@keyframes vf-cursor-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .video-feature__cursor { animation: none; }
  .video-feature__char.is-flashing { animation: none; }
}

/* ── Lead — centred, homepage-hero lead style ────────────── */
.video-feature__lead {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--md);
  line-height: 1.412;
  color: #473531;
  max-width: 480px;
  margin: 1.25rem auto 2.5rem;
}

/* ── Host / Play toggle — pricing billing-switch style, both
      labels stay full colour (no greyed-out state) ─────────── */
.video-feature__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
}
.video-feature__toggle-label {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--wp--preset--color--ink);   /* always full colour */
}
.video-feature__toggle-label.is-active { font-weight: 700; }

.video-feature__switch {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.video-feature__switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.video-feature__switch-track {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: linear-gradient(to right, #FF6F5F, #FF3623);  /* coral in both states */
}
.video-feature__switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 0;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.video-feature__switch-input:checked ~ .video-feature__switch-thumb { transform: translateX(20px); }
.video-feature__switch-input:focus-visible ~ .video-feature__switch-track {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 2px;
}
.video-feature__frame {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 960px;           /* video stays its own width; title can be wider */
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--wp--preset--color--ink);
  /* sharp corners — no border-radius, no overflow clip (the ring sits outside) */
}

/* --- Animated gradient border (mirrors .plan-card--featured) --- */
@property --vf-border-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}
@keyframes vf-border-spin {
  to { --vf-border-angle: -360deg; }
}
.video-feature__frame::before {
  content: '';
  position: absolute;
  inset: -3px;                 /* border thickness */
  z-index: -1;
  background: conic-gradient(
    from var(--vf-border-angle),
    #FD4631 0%,
    #FD4631 60%,
    #FFCB2B 75%,
    #FD4631 90%,
    #FD4631 100%
  );
  animation: vf-border-spin 5s linear infinite;
  /* coral glow under the whole frame, matching the site's media containers */
  box-shadow: 0 20px 50px rgba(255, 54, 35, 0.10);
}
.video-feature__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wp--preset--color--ink);   /* masks the inner, leaving the ring */
}
@media (prefers-reduced-motion: reduce) {
  .video-feature__frame::before { animation: none; }
}

.video-feature__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mobile/desktop headline span variants — hide the non-applicable span */
.vf-title--mobile { display: none; }
@media (max-width: 640px) {
  .vf-title--desktop { display: none; }
  .vf-title--mobile  { display: inline; }
}

/* Lead matches the homepage hero lead size on mobile (16px); 17px above. */
@media (max-width: 640px) {
  .video-feature__lead { font-size: 1rem; max-width: min(270px, 88vw); }
}