/* ──────────────────────────────────────────────
 * SV Scroll Sequence Hero for Elementor — v1.4.6 hard legacy img engine
 * ────────────────────────────────────────────── */

/* ── Base structure ── */

.sv-elementor-hero {
  position: relative;
}

.sv-elementor-hero .sv-wrapper {
  position: relative;
  height: 200vh; /* JS overrides once video duration is known */
}

.sv-elementor-hero .sv-sticky {
  position: sticky;
  top: 0;
  height: 100vh; /* Elementor responsive selector overrides this */
  overflow: hidden;
  background: #000;
}

/* JS sticky mode mirrors the working Scroll Sequence plugin: the sticky
 * layer is pinned with inline position:fixed while active and absolute
 * before/after. This avoids old Windows / weak GPU sticky-compositing issues. */
.sv-elementor-hero.sv-js-sticky .sv-wrapper {
  position: relative;
}

.sv-elementor-hero.sv-js-sticky .sv-sticky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* ── Preloader: poster background until video is ready ──
 * Must be ABOVE .sv-video so the poster covers the black
 * video element on iOS where the decoder has not yet
 * produced a frame.
 *
 * Stays visible until JS adds .sv-video-ready AND the
 * widget is NOT in use-poster fallback mode — see below. */

.sv-elementor-hero .sv-preloader {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-position: var(--sv-focal-x, 50%) var(--sv-focal-y, 50%);
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.5s ease;
}

/* Scrub / static-frame reveal: video element (or decoded
 * frame under it) is confirmed ready — fade out preloader. */
.sv-elementor-hero.sv-video-ready:not(.sv-use-poster) .sv-preloader {
  opacity: 0;
  pointer-events: none;
}

/* Poster-fallback reveal: preloader yields to the
 * .sv-mobile-poster layer (which may carry a
 * mobile-specific poster image). Prevents the
 * preloader covering the mobile-poster in z-stack. */
.sv-elementor-hero.sv-use-poster .sv-preloader {
  opacity: 0;
  pointer-events: none;
}

/* ── Video & poster layers ── */

.sv-elementor-hero .sv-video,
.sv-elementor-hero .sv-video video,
.sv-elementor-hero .sv-sequence,
.sv-elementor-hero .sv-sequence canvas,
.sv-elementor-hero .sv-sequence-img,
.sv-elementor-hero .sv-darken,
.sv-elementor-hero .sv-overlay-slot,
.sv-elementor-hero .sv-mobile-poster {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}

.sv-elementor-hero .sv-video,
.sv-elementor-hero .sv-sequence,
.sv-elementor-hero .sv-mobile-poster {
  z-index: 1;
}

.sv-elementor-hero .sv-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.sv-elementor-hero .sv-sequence {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sv-elementor-hero .sv-sequence-canvas,
.sv-elementor-hero .sv-sequence canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.sv-elementor-hero .sv-sequence-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  pointer-events: none;
}

.sv-elementor-hero.sv-engine-img .sv-sequence-img {
  display: block;
}

.sv-elementor-hero.sv-engine-img .sv-sequence-canvas {
  display: none;
}


.sv-elementor-hero .sv-mobile-poster {
  display: none;
  background-position: var(--sv-mobile-focal-x, var(--sv-focal-x, 50%)) var(--sv-mobile-focal-y, var(--sv-focal-y, 50%));
  background-repeat: no-repeat;
  background-size: cover;
}

/* ── Overlay (darkening layer) ── */

.sv-elementor-hero .sv-darken {
  z-index: 3;
  pointer-events: none;
}

/* ── Content overlay ── */

.sv-elementor-hero .sv-overlay-slot {
  z-index: 4;
  display: flex;
  width: 100%;
  max-width: 1200px; /* Elementor selector overrides */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px; /* Elementor selector overrides */
  pointer-events: none;
}

.sv-elementor-hero .sv-overlay-inner {
  width: 100%;
  max-width: 640px; /* Elementor selector overrides */
  pointer-events: auto;
  transition: opacity 0.05s linear, transform 0.05s linear;
}

/* ── Typography defaults ──
 * Wrapped in :where() so specificity = 0.
 * Any Elementor global typography / panel override wins automatically. */

:where(.sv-elementor-hero) .sv-heading {
  margin: 0 0 18px;
  color: #fff;
  font-size: 64px;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

:where(.sv-elementor-hero) .sv-text,
:where(.sv-elementor-hero) .sv-text p,
:where(.sv-elementor-hero) .sv-text li {
  color: #fff;
  font-size: 18px;
  line-height: 1.65;
}

:where(.sv-elementor-hero) .sv-text p:first-child {
  margin-top: 0;
}

:where(.sv-elementor-hero) .sv-text p:last-child {
  margin-bottom: 0;
}

/* ── Button ── */

.sv-elementor-hero .sv-button-wrap {
  margin-top: 26px;
}

:where(.sv-elementor-hero) .sv-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 999px;
  text-decoration: none;
  color: #111;
  background: #f2c94c;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.sv-elementor-hero .sv-button-static {
  cursor: default;
}

/* Hover animations — only on <a> links */
.sv-elementor-hero a.sv-button.sv-hover-lift:hover,
.sv-elementor-hero a.sv-button.sv-hover-lift:focus-visible {
  transform: translateY(-2px);
}

.sv-elementor-hero a.sv-button.sv-hover-scale:hover,
.sv-elementor-hero a.sv-button.sv-hover-scale:focus-visible {
  transform: scale(1.05);
}

.sv-elementor-hero a.sv-button.sv-hover-glow:hover,
.sv-elementor-hero a.sv-button.sv-hover-glow:focus-visible {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.25), 0 0 40px rgba(255, 255, 255, 0.1);
}

.sv-elementor-hero a.sv-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

/* ── Layout presets ── */

/* Horizontal alignment */
.sv-elementor-hero.sv-preset-custom.sv-align-left .sv-overlay-slot,
.sv-elementor-hero.sv-preset-left-focus .sv-overlay-slot,
.sv-elementor-hero.sv-preset-bottom-left .sv-overlay-slot,
.sv-elementor-hero.sv-preset-glass-card .sv-overlay-slot {
  justify-content: flex-start;
  text-align: left;
}

.sv-elementor-hero.sv-preset-custom.sv-align-center .sv-overlay-slot,
.sv-elementor-hero.sv-preset-centered .sv-overlay-slot {
  justify-content: center;
  text-align: center;
}

.sv-elementor-hero.sv-preset-custom.sv-align-right .sv-overlay-slot,
.sv-elementor-hero.sv-preset-right-focus .sv-overlay-slot {
  justify-content: flex-end;
  text-align: right;
}

/* Vertical alignment */
.sv-elementor-hero.sv-preset-custom.sv-valign-start .sv-overlay-slot {
  align-items: flex-start;
}

.sv-elementor-hero.sv-preset-custom.sv-valign-center .sv-overlay-slot,
.sv-elementor-hero.sv-preset-centered .sv-overlay-slot,
.sv-elementor-hero.sv-preset-left-focus .sv-overlay-slot,
.sv-elementor-hero.sv-preset-right-focus .sv-overlay-slot,
.sv-elementor-hero.sv-preset-glass-card .sv-overlay-slot {
  align-items: center;
}

.sv-elementor-hero.sv-preset-custom.sv-valign-end .sv-overlay-slot,
.sv-elementor-hero.sv-preset-bottom-left .sv-overlay-slot {
  align-items: flex-end;
}

/* ── Glass card defaults (Elementor selectors override via panel) ── */

.sv-elementor-hero.sv-preset-glass-card .sv-overlay-inner {
  background: rgba(16, 16, 16, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 36px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
}

/* ── Static / reduced motion ── */

.sv-elementor-hero.sv-no-motion .sv-wrapper {
  height: auto !important;
}

.sv-elementor-hero.sv-no-motion .sv-sticky {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}

.sv-elementor-hero.sv-no-motion.sv-use-poster .sv-video,
.sv-elementor-hero.sv-no-motion.sv-use-poster .sv-sequence {
  display: none;
}

.sv-elementor-hero.sv-no-motion.sv-use-poster .sv-mobile-poster {
  display: block;
}

/* ── Entrance animations (scoped to widget) ── */

.sv-elementor-hero [data-sv-anim] {
  opacity: 0;
  will-change: opacity, transform;
  animation-duration: var(--sv-anim-duration, 1s);
  animation-fill-mode: both;
  animation-timing-function: var(--sv-anim-easing, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ── Editor mode: show content immediately ──
 * Elementor adds .elementor-editor-active to <body> in the editor.
 * Without this, content stays at opacity:0 because the
 * IntersectionObserver may not fire inside the editor iframe. */
.elementor-editor-active .sv-elementor-hero [data-sv-anim] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* Animation triggers — only fire after .sv-anim-active is added by JS */
.sv-elementor-hero [data-sv-anim].sv-anim-active[data-sv-anim="fade-in"]     { animation-name: svFadeIn; }
.sv-elementor-hero [data-sv-anim].sv-anim-active[data-sv-anim="fade-up"]     { animation-name: svFadeUp; }
.sv-elementor-hero [data-sv-anim].sv-anim-active[data-sv-anim="fade-down"]   { animation-name: svFadeDown; }
.sv-elementor-hero [data-sv-anim].sv-anim-active[data-sv-anim="slide-left"]  { animation-name: svSlideLeft; }
.sv-elementor-hero [data-sv-anim].sv-anim-active[data-sv-anim="slide-right"] { animation-name: svSlideRight; }
.sv-elementor-hero [data-sv-anim].sv-anim-active[data-sv-anim="zoom-in"]     { animation-name: svZoomIn; }
.sv-elementor-hero [data-sv-anim].sv-anim-active[data-sv-anim="blur-in"]     { animation-name: svBlurIn; }

@keyframes svFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes svFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes svFadeDown {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes svSlideLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes svSlideRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes svZoomIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes svBlurIn {
  from { opacity: 0; filter: blur(12px); }
  to   { opacity: 1; filter: blur(0); }
}

/* ── Scroll indicator ── */

.sv-elementor-hero .sv-scroll-indicator {
  position: absolute;
  z-index: 5;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  animation: svBounce 2s ease-in-out infinite;
  transition: opacity 0.55s ease, visibility 0.55s ease;
  will-change: opacity;
}

.sv-elementor-hero .sv-scroll-indicator.sv-indicator-hidden {
  opacity: 0;
  visibility: hidden;
}

.sv-elementor-hero .sv-scroll-indicator svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  display: block;
}

.sv-elementor-hero .sv-scroll-indicator-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

@keyframes svBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}


.sv-elementor-hero .sv-sequence-loading {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  width: min(320px, calc(100% - 48px));
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(12, 12, 12, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.sv-elementor-hero .sv-sequence-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sv-elementor-hero .sv-sequence-loading-bar {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.sv-elementor-hero .sv-sequence-loading-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.92);
  transition: width 0.12s ease;
}

.sv-elementor-hero .sv-sequence-loading-text {
  margin-top: 8px;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.04em;
}


/* Legacy note: do not force GPU compositing on the frame layer.
 * Older Windows/weak remote GPUs can freeze a translated canvas layer.
 * The JS engine now chooses canvas or a simple <img> renderer at runtime. */

.sv-elementor-hero .sv-sequence-loading:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
}

/* ── Admin/editor placeholders ── */
.sv-sequence-placeholder {
  box-sizing: border-box;
  width: 100%;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  border: 1px dashed rgba(0, 0, 0, 0.22);
  border-radius: 16px;
  background: rgba(250, 250, 250, 0.94);
  color: #1d2327;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sv-sequence-placeholder strong {
  font-size: 16px;
  line-height: 1.3;
}

.sv-sequence-placeholder p {
  margin: 0;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.5;
}

.sv-sequence-placeholder.sv-placeholder-error {
  border-color: rgba(179, 45, 46, 0.4);
  background: #fff8f8;
}

.sv-sequence-placeholder.sv-placeholder-warning {
  border-color: rgba(153, 104, 0, 0.35);
  background: #fffaf0;
}

/* ──────────────────────────────────────────────────────────
 * Heading scroll effects (added in 1.4.10)
 * Driven by JS that sets --sv-heading-progress (0..1) on .sv-heading.
 * Completely independent of the frame-sequence engine — these
 * rules only apply when [data-sv-heading-effect] is present.
 * ────────────────────────────────────────────────────────── */

.sv-heading[data-sv-heading-effect] {
  --sv-heading-progress: 0;
  --sv-heading-fill-color: currentColor;
  --sv-heading-base-color: rgba(255, 255, 255, 0.25);
}

/* Effect: fill-ltr — color wipes the text from left to right with scroll */
.sv-heading[data-sv-heading-effect="fill-ltr"] {
  background-image: linear-gradient(
    90deg,
    var(--sv-heading-fill-color) 0,
    var(--sv-heading-fill-color) calc(var(--sv-heading-progress) * 100%),
    var(--sv-heading-base-color) calc(var(--sv-heading-progress) * 100%),
    var(--sv-heading-base-color) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Effect: fill-word — each word has its own LTR gradient driven by --sv-word-progress.
 * Words activate sequentially as scroll progresses (set in JS). */
.sv-heading[data-sv-heading-effect="fill-word"] .sv-word {
  display: inline-block;
  background-image: linear-gradient(
    90deg,
    var(--sv-heading-fill-color) 0,
    var(--sv-heading-fill-color) calc(var(--sv-word-progress, 0) * 100%),
    var(--sv-heading-base-color) calc(var(--sv-word-progress, 0) * 100%),
    var(--sv-heading-base-color) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Effect: fill-letter — typewriter-style hard step.
 * JS toggles .sv-letter-on on each character when its threshold is crossed. */
.sv-heading[data-sv-heading-effect="fill-letter"] .sv-letter {
  color: var(--sv-heading-base-color);
  -webkit-text-fill-color: var(--sv-heading-base-color);
  transition: color 60ms linear, -webkit-text-fill-color 60ms linear;
}
.sv-heading[data-sv-heading-effect="fill-letter"] .sv-letter.sv-letter-on {
  color: var(--sv-heading-fill-color);
  -webkit-text-fill-color: var(--sv-heading-fill-color);
}

/* Effect: word-fade — JS wraps every word in .sv-word and sets --sv-word-opacity */
.sv-heading[data-sv-heading-effect="word-fade"] .sv-word {
  display: inline-block;
  opacity: var(--sv-word-opacity, 0);
  will-change: opacity;
}

/* ──────────────────────────────────────────────────────────
 * Button icon support (added in 1.4.13)
 * Only applies when the button has the .sv-button-has-icon class,
 * so buttons without an icon render exactly like before.
 * ────────────────────────────────────────────────────────── */

.sv-elementor-hero .sv-button-has-icon {
  /* Inherits display:inline-flex / align-items:center from .sv-button.
     We just establish the gap between text and icon. */
  gap: 8px;
}

.sv-elementor-hero .sv-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.sv-elementor-hero .sv-button-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.sv-elementor-hero .sv-button-icon i {
  font-size: inherit;
  line-height: 1;
}

.sv-elementor-hero .sv-button-text {
  display: inline-block;
}