/* ==========================================================================
   Edgeway Partners — visual refresh overlay (v3: layered depth + motion)
   Loads last, after every original stylesheet, and pairs with
   theme-refresh.js. Overrides the site's shared CSS custom properties
   (colors) so the palette change cascades everywhere the original theme
   already used them. Content, structure and copy are untouched — this
   file only changes look, depth and motion.
   ========================================================================== */

/* ---- 1. Color system: warm gold + near-black "premium payout" palette --- */
:root {
  --ast-global-color-0: #B8860B !important;
  --ast-global-color-1: #92660A !important;
  --ast-global-color-2: #1A1611 !important;
  --ast-global-color-3: #4A4038 !important;
  --ast-global-color-4: #FBF3DD !important;
  --ast-global-color-5: #FFFFFF !important;
  --ast-global-color-6: #E8DFC8 !important;
  --ast-global-color-7: #0F0C08 !important;
  --ast-global-color-8: #2B2418 !important;

  --e-global-color-astglobalcolor0: #B8860B !important;
  --e-global-color-astglobalcolor1: #92660A !important;
  --e-global-color-astglobalcolor2: #1A1611 !important;
  --e-global-color-astglobalcolor3: #4A4038 !important;
  --e-global-color-astglobalcolor4: #FBF3DD !important;
  --e-global-color-astglobalcolor5: #FFFFFF !important;
  --e-global-color-astglobalcolor6: #E8DFC8 !important;
  --e-global-color-astglobalcolor7: #0F0C08 !important;
  --e-global-color-astglobalcolor8: #2B2418 !important;

  --e-global-color-primary: #B8860B !important;
  --e-global-color-secondary: #4A4038 !important;
  --e-global-color-text: #6B5D4F !important;
  --e-global-color-accent: #D4A017 !important;
  --e-global-color-f5bcb88: #FFFFFF !important;

  --gold-light: #F2C94C;
  --gold: #D4A017;
  --gold-deep: #92660A;
  --ink: #0F0C08;
  --shadow-warm: 44, 33, 12;

  /* The Advertisers/Publishers/About-Us pages embed a separate hand-coded
     "second document" (via a Custom-HTML widget) with its own complete
     design-token system (--c-*), still on the original blue/purple/green
     palette and untouched by everything above since it's a different
     :root block entirely — but :root custom properties are global, so
     overriding them here (loaded last, !important) re-themes it too
     without needing to touch that content directly. */
  --c-primary: #B8860B !important;
  --c-primary-dark: #92660A !important;
  --c-secondary: #0D9488 !important;
  --c-accent: #059669 !important;
  --c-bg: #FFFFFF !important;
  --c-dark: #0F0C08 !important;
  --c-dark-2: #1A1611 !important;
  --c-text: #1A1611 !important;
  --c-muted: #6B5D4F !important;
  --c-muted-light: #8B7D6B !important;
  --c-border: #E8DFC8 !important;
  --c-surface: #FBF6EA !important;
  --c-surface-2: #F5EFDC !important;
  --shadow-lg: 0 30px 70px rgba(184, 134, 11, 0.14) !important;
}

/* Base page background: warm ivory instead of clinical white. Targeted at
   the outer page chrome only (body / page-builder wrapper), not individual
   .e-con sections, so intentional dark/gradient/header section colors are
   left completely alone. */
body,
.ast-plain-container,
.ast-page-builder-template,
.ast-plain-container .site-content,
.ast-padded-layout.ast-plain-container .site-content {
  background-color: #FBF6EA !important;
  background-image: none !important;
}

* { scrollbar-color: var(--gold) #f2ead4; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #f2ead4; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  border-radius: 10px;
  border: 2px solid #f2ead4;
}

html { scroll-behavior: smooth; }
body {
  opacity: 0;
  animation: page-fade-in 0.5s ease 0.05s forwards;
}
@keyframes page-fade-in { to { opacity: 1; } }

/* ---- 2. Gradient text on emphasis spans / rotating text ------------------ */
.wpr-anim-text-inner b,
span[style*="color:#104efc" i],
span[style*="color: #104efc" i] {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 45%, var(--gold-light) 70%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-deep);
}

/* ---- 2b. Homepage-only background + text treatment -----------------------
   Scoped to body.home (WordPress adds this class only on the homepage) so
   it doesn't touch the other 4 pages. Gives the light/cream sections some
   depth via a subtle dot-grid + soft gold glow instead of a flat fill, and
   gives section headlines a stronger, more premium visual hierarchy. */
body.home {
  background-color: #FBF6EA !important;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(212, 160, 23, 0.10), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(212, 160, 23, 0.08), transparent 42%),
    radial-gradient(rgba(184, 134, 11, 0.16) 1.1px, transparent 1.1px) !important;
  background-size: auto, auto, 26px 26px !important;
  background-attachment: fixed, fixed, fixed !important;
}

/* Second heading of an adjacent "label + emphasis" pair (e.g. "Who Is" /
   "EdgeWay Partners", "Why is EdgeWay Partners" / "your best choice")
   reads as the payoff line design-wise — give it the gold treatment. */
body.home .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title {
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 45%, var(--gold-light) 70%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-deep);
}

/* Standalone section headings get a small gold accent mark and a touch
   more letter-spacing for a more considered, premium hierarchy. */
body.home .elementor-widget-heading .elementor-heading-title {
  letter-spacing: 0.01em;
}
body.home .elementor-widget-heading .elementor-heading-title::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
}
/* ...except the second of an adjacent pair, which gets the gradient-text
   treatment above instead — skip the bar there to avoid double emphasis.
   (":not(A + B)" isn't valid CSS, so this has to be a separate override
   rather than folded into the selector above.) */
body.home .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title::before {
  display: none;
}

/* ---- 3. Buttons: gold gradient + shine-sweep + magnetic hover ------------ */
.elementor-button,
.ha-creative-btn.ha-stl--hermosa {
  background-image: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%) !important;
  color: #201705 !important;
  border-color: transparent !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transition: transform 0.18s ease-out, box-shadow 0.28s ease !important;
}
.elementor-button *,
.ha-creative-btn.ha-stl--hermosa * { position: relative; z-index: 1; }
.elementor-button::before,
.ha-creative-btn.ha-stl--hermosa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform 0.65s ease;
}
.elementor-button:hover::before,
.ha-creative-btn.ha-stl--hermosa:hover::before { transform: translateX(120%); }
.elementor-button:hover,
.ha-creative-btn.ha-stl--hermosa:hover {
  box-shadow: 0 16px 34px -10px rgba(var(--shadow-warm), 0.55), 0 4px 10px -4px rgba(var(--shadow-warm), 0.35);
}
.elementor-button:focus-visible,
.ha-creative-btn.ha-stl--hermosa:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

a.elementor-button.elementor-size-sm {
  background-image: none !important;
  transition: transform 0.18s ease-out, box-shadow 0.25s ease !important;
}
a.elementor-button.elementor-size-sm:hover {
  box-shadow: 0 12px 24px -10px rgba(var(--shadow-warm), 0.35);
}

/* ---- 4. Cards: colorful borders/tint + layered shadows + hover lift ------
   theme-refresh.js assigns each card (icon-box, testimonial, image-card,
   icon-list item) a color from a curated jewel-tone palette via
   --icon-accent on the widget wrapper, in document order — so cards read
   as visually distinct instead of every card/icon on the site being the
   same gold, while staying in the same premium register (no neon tones).
   Falls back to gold wherever JS hasn't run yet or a card wasn't matched. */
.elementor-widget-icon-box,
.wpr-testimonial-wrap {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.elementor-widget-icon-box .elementor-widget-container {
  border-radius: 16px !important;
  border: 1px solid color-mix(in srgb, var(--icon-accent, var(--gold)) 30%, transparent) !important;
  background: color-mix(in srgb, var(--icon-accent, var(--gold)) 6%, #fff) !important;
  box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--icon-accent, var(--gold)) 55%, transparent) !important;
  padding: 26px 22px !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.elementor-widget-icon-box:hover .elementor-widget-container {
  border-color: var(--icon-accent, var(--gold)) !important;
  box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--icon-accent, var(--gold)) 65%, transparent) !important;
}
.wpr-testimonial-wrap {
  border-top: 3px solid var(--icon-accent, var(--gold)) !important;
  box-shadow: 0 1px 2px rgba(var(--shadow-warm), 0.06), 0 8px 24px -12px color-mix(in srgb, var(--icon-accent, var(--gold)) 40%, transparent) !important;
}
.image-card-2,
.ha-image-card,
.wpr-icon-box-wrap {
  transition: border-color 0.35s ease, box-shadow 0.35s ease !important;
  border-top: 3px solid var(--icon-accent, var(--gold)) !important;
}
.elementor-widget-icon-box .elementor-icon-box-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.elementor-widget-icon-box:hover .elementor-icon-box-icon {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--icon-accent, var(--gold)) 60%, transparent);
}

/* The embedded custom-HTML widget's own .card / .icon-tile components
   (Advertisers/Publishers/About-Us pages) — same colorful-card treatment
   as the rest of the site, using its own tokens as the fallback so it
   still looks right even where JS hasn't tagged a specific card. */
.card {
  border-color: color-mix(in srgb, var(--icon-accent, var(--c-primary, var(--gold))) 35%, var(--c-border, transparent)) !important;
  transition: transform 0.35s var(--ease, ease), box-shadow 0.35s var(--ease, ease), border-color 0.35s var(--ease, ease) !important;
}
.card:hover {
  border-color: var(--icon-accent, var(--c-primary, var(--gold))) !important;
  box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--icon-accent, var(--c-primary, var(--gold))) 55%, transparent) !important;
}
.icon-tile {
  background: color-mix(in srgb, var(--icon-accent, var(--c-primary, var(--gold))) 12%, #fff) !important;
  color: var(--icon-accent, var(--c-primary, var(--gold))) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.icon-tile svg,
.icon-tile svg * {
  /* These ship as outline/stroke icons (fill:none, stroke:currentColor) —
     only recolor the stroke, or they'd turn into solid filled blobs. */
  stroke: currentColor !important;
}
.card:hover .icon-tile {
  transform: translateY(-3px) scale(1.08);
}

.elementor-icon-box-icon,
.elementor-icon-box-icon svg,
.elementor-icon-box-icon svg *,
.elementor-icon-box-icon i {
  fill: var(--icon-accent, var(--gold)) !important;
  color: var(--icon-accent, var(--gold)) !important;
}
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg,
.elementor-icon-list-icon svg * {
  color: var(--icon-accent, var(--gold)) !important;
  fill: var(--icon-accent, var(--gold)) !important;
}
.wpr-testimonial-wrap:hover {
  transform: translateY(-8px);
  box-shadow: 0 2px 4px rgba(var(--shadow-warm), 0.08), 0 28px 50px -20px rgba(var(--shadow-warm), 0.4) !important;
}

.elementor-icon-list-icon i,
.elementor-icon-list-icon svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.elementor-icon-list-item:hover .elementor-icon-list-icon i,
.elementor-icon-list-item:hover .elementor-icon-list-icon svg {
  /* Intensify the icon's OWN assigned accent color on hover rather than
     always flashing to gold — keeps each icon visually consistent. */
  transform: scale(1.18);
  filter: brightness(1.15) saturate(1.2);
}

/* ---- 4c. Tabs, content-switcher, form fields ------------------------------
   Rounds out the card audit: the "verticals" nested-tabs (Jobs/career,
   Health & Beauty, Finance, Survey...), the "Our Stats / GEOs / Business
   Model" content-switcher, and the contact form were all still on the
   theme's original default (plain gray/blue) styling. */
.e-n-tab-title {
  border-radius: 999px !important;
  transition: color 0.25s ease, background-color 0.25s ease !important;
}
.e-n-tab-title[aria-selected="true"] {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%) !important;
  color: #201705 !important;
}
.e-n-tab-title:hover:not([aria-selected="true"]) {
  color: var(--gold-deep) !important;
}

.ha-cs-button {
  border-radius: 999px !important;
  transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
}
.ha-cs-button.active {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%) !important;
  color: #201705 !important;
  box-shadow: 0 6px 16px -6px rgba(var(--shadow-warm), 0.45) !important;
}
.ha-cs-button:hover:not(.active) {
  color: var(--gold-deep) !important;
}

.elementor-field-textual {
  border-radius: 10px !important;
  border-color: var(--ast-global-color-6, #E8DFC8) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.elementor-field-textual:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18) !important;
  outline: none !important;
}

/* ---- 5. Header: dark ink background, light nav, gold accents ------------ */
.elementor-element-f4b5c16 {
  background: linear-gradient(115deg, #1A1611 0%, #0F0C08 100%) !important;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.45) !important;
}
.elementor-element-f4b5c16::before {
  background-color: transparent !important;
}

/* Logo ships blue/purple in the source file; a clean reversed (white)
   treatment reads far better against the new dark header than trying to
   force-match its original hue via filter. */
img[src*="Edgeway-Partners.png"] {
  filter: brightness(0) invert(1);
}
/* The logo's own widget-container ships a hardcoded white background
   (invisible on the original white header, but a stark box now that the
   header is dark) — drop it so the white-filtered logo sits directly on
   the dark gradient instead of inside a white tile. */
.elementor-element-6ec169be > .elementor-widget-container,
.elementor-element-fdafb80 > .elementor-widget-container {
  background-color: transparent !important;
}

/* Desktop nav links: cream by default, gold on hover/active with an
   animated underline instead of a flat color swap */
.elementor-element-2b6e4b3 .elementor-nav-menu--main .elementor-item {
  color: #EFE6CE !important;
  fill: #EFE6CE !important;
  position: relative;
  transition: color 0.25s ease;
}
.elementor-element-2b6e4b3 .elementor-nav-menu--main .elementor-item::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.elementor-element-2b6e4b3 .elementor-nav-menu--main .elementor-item:hover,
.elementor-element-2b6e4b3 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-element-2b6e4b3 .elementor-nav-menu--main .elementor-item.highlighted {
  color: var(--gold-light) !important;
  fill: var(--gold-light) !important;
}
.elementor-element-2b6e4b3 .elementor-nav-menu--main .elementor-item:hover::after,
.elementor-element-2b6e4b3 .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  transform: scaleX(1);
}

/* Sign Up: promote to the primary gold CTA (new-user conversion action).
   Note: this button also carries .elementor-size-sm (same as the outline
   "Join As Affiliate" buttons elsewhere), which the size-sm rule above
   forces to background-image:none !important at higher specificity —
   so this override needs to out-specify THAT rule, not just the
   original post-676.css one. */
.elementor-element-22816508 a.elementor-button.elementor-size-sm {
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%) !important;
  color: #201705 !important;
  fill: #201705 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Login: secondary ghost/outline button so Sign Up reads as the priority */
.elementor-element-27fa9a47 .elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  color: #EFE6CE !important;
  border: 2px solid rgba(239, 230, 206, 0.55) !important;
  box-shadow: none !important;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease !important;
}
.elementor-element-27fa9a47 .elementor-button:hover {
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  background-color: rgba(212, 160, 23, 0.08) !important;
}

/* Mobile menu toggle (hamburger) picks up the gold accent too */
.elementor-element-bf0b57f .wpr-mobile-toggle-line {
  background-color: var(--gold) !important;
}

/* ---- 5b. Glassmorphic sticky header (scrolled state) ---------------------
   Dark tinted blur instead of white now that the base header is dark. */
.wpr-sticky-section-yes {
  transition: box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease, backdrop-filter 0.35s ease !important;
}
body.is-scrolled .wpr-sticky-section-yes {
  background: rgba(15, 12, 8, 0.82) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.45) !important;
  border-bottom: 2px solid var(--gold) !important;
}

/* ---- 6. Ambient depth for dark sections -----------------------------------
   theme-refresh.js measures each major section's background luminance at
   runtime and adds .is-dark-section where it's genuinely dark — no need
   to hand-map container IDs per page. Floating soft-focus gold/amber glow
   orbs drift slowly behind the content for real depth instead of a flat
   fill, and a cursor-tracked spotlight adds interactivity on desktop. */
.is-dark-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.is-dark-section::before,
.is-dark-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  animation: drift-orb 16s ease-in-out infinite alternate;
}
.is-dark-section::before {
  width: 34vw;
  height: 34vw;
  max-width: 460px;
  max-height: 460px;
  top: -8%;
  left: -6%;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
}
.is-dark-section::after {
  width: 28vw;
  height: 28vw;
  max-width: 380px;
  max-height: 380px;
  bottom: -10%;
  right: -4%;
  background: radial-gradient(circle, var(--gold-light) 0%, transparent 70%);
  animation-delay: -8s;
}
@keyframes drift-orb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4%, 6%) scale(1.12); }
}
.is-dark-section > .spotlight-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(212, 160, 23, 0.16), transparent 65%);
  pointer-events: none;
}
.is-dark-section:hover > .spotlight-layer { opacity: 1; }
.is-dark-section > *:not(.spotlight-layer) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .is-dark-section::before,
  .is-dark-section::after { animation: none; }
}

/* ---- 6b. Page-transition loader --------------------------------------------
   This is a real multi-page site (each nav click is a full reload), so a
   branded overlay bridges that gap instead of a blank flash: visible by
   default (masks the instant of first paint too), faded out by JS once
   the page is ready, and faded back in by JS right before navigating to
   another internal page. */
#ewp-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1A1611 0%, #0F0C08 70%);
  opacity: 1;
  visibility: visible;
  /* Re-showing (before navigating away) should feel instant, not a slow
     fade — a slow fade-IN here means the overlay sits semi-transparent
     for a stretch, letting the page underneath blend/show through, which
     reads as a flash/blink rather than a clean cut to the loader. */
  transition: opacity 0.12s ease, visibility 0s linear 0s;
}
#ewp-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  /* Fading OUT (revealing the now-ready page) is the one direction that
     should be gentle. */
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.ewp-loader-inner {
  position: relative;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ewp-loader-logo {
  width: 52px;
  height: auto;
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
  animation: ewp-logo-pulse 1.4s ease-in-out infinite;
}
.ewp-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(212, 160, 23, 0.18);
  border-top-color: var(--gold);
  animation: ewp-ring-spin 0.9s linear infinite;
}
@keyframes ewp-logo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes ewp-ring-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #ewp-loader { transition: opacity 0.15s linear, visibility 0s linear 0s !important; }
  #ewp-loader.is-hidden { transition: opacity 0.15s linear, visibility 0s linear 0.15s !important; }
  .ewp-loader-logo, .ewp-loader-ring { animation: none !important; }
}

/* Native cross-document View Transitions (Chrome/Edge 126+): the browser
   itself smoothly cross-fades the outgoing page into the incoming one on
   same-origin navigation, instead of the default blank-flash swap. This
   is what actually fixes the flash at the browser level; the loader
   overlay above handles the perceived wait on top of it. Ignored
   harmlessly by browsers that don't support it yet (Firefox/Safari). */
@view-transition {
  navigation: auto;
}

/* ---- 7. Scroll-reveal animation system ------------------------------------ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0) scale(1); }

.elementor-invisible { visibility: visible !important; }
.elementor-invisible:not(.is-revealed) { opacity: 0; transform: translateY(32px) scale(0.98); }
.elementor-invisible.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .elementor-invisible,
  body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}