/* WebForge Pro - signature-effect styles (auto-generated per persona). */

/* --- tilt: 3D pointer tilt on cards --- */
body.wf-persona--cinematic_creator .wf-tilt { transform-style: preserve-3d; will-change: transform; }

/* --- magnetic / skew: transform hints --- */
body.wf-persona--cinematic_creator .wf-magnetic { will-change: transform; }
body.wf-persona--cinematic_creator .wf-skew { will-change: transform; }

/* --- marquee: infinite horizontal strip --- */
body.wf-persona--cinematic_creator .wf-marquee { display: flex; overflow: hidden; width: 100%; }
body.wf-persona--cinematic_creator .wf-marquee__track {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  white-space: nowrap; will-change: transform;
}

/* --- odometer: rolling digit reels --- */
body.wf-persona--cinematic_creator .wf-odometer {
  display: inline-flex; overflow: hidden; height: 1em; line-height: 1;
  vertical-align: baseline;
}
body.wf-persona--cinematic_creator .wf-odometer__reel {
  display: inline-block; height: 1em; overflow: hidden;
}
body.wf-persona--cinematic_creator .wf-odometer__strip {
  display: flex; flex-direction: column; will-change: transform;
}
body.wf-persona--cinematic_creator .wf-odometer__digit {
  height: 1em; display: flex; align-items: center; justify-content: center;
}

/* --- stacking: sticky stacking cards --- */
body.wf-persona--cinematic_creator .wf-stack { position: relative; }
body.wf-persona--cinematic_creator .wf-stack__card { position: sticky; top: 8vh; will-change: transform; }

/* --- glitch: RGB-split accent (base is static) --- */
body.wf-persona--cinematic_creator .wf-glitch { position: relative; }

/* Motion-dependent rules: only for visitors who allow motion. Anything that hides
   content until JS reveals it (clip-reveal) lives here too, so reduced-motion users
   always see the full, static layout. */
@media (prefers-reduced-motion: no-preference) {
  /* clip_reveal: start clipped, JS adds .is-revealed on scroll-in. */
  body.wf-persona--cinematic_creator .wf-clip-reveal,
  body.wf-persona--cinematic_creator .wf-clip {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .9s cubic-bezier(.2, .7, .2, 1);
  }
  body.wf-persona--cinematic_creator .wf-clip-reveal.is-revealed,
  body.wf-persona--cinematic_creator .wf-clip.is-revealed { clip-path: inset(0 0 0 0); }

  /* pulse: beat-like pulsing (JS adds .wf-pulse-on). */
  body.wf-persona--cinematic_creator .wf-pulse-on { animation: wf-pulse 1.6s ease-in-out infinite; }

  /* float: slow breathing motion (JS adds .wf-float-on). */
  body.wf-persona--cinematic_creator .wf-float-on { animation: wf-float 6s ease-in-out infinite; }

  /* glitch: RGB-split burst while .is-glitching is set by JS. */
  body.wf-persona--cinematic_creator .wf-glitch.is-glitching { animation: wf-glitch 0.24s steps(2) 1; }
  body.wf-persona--cinematic_creator .wf-glitch.is-glitching::before,
  body.wf-persona--cinematic_creator .wf-glitch.is-glitching::after {
    content: attr(data-text); position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; overflow: hidden; pointer-events: none;
  }
  body.wf-persona--cinematic_creator .wf-glitch.is-glitching::before {
    color: var(--wf-accent, #ff2e9a); transform: translate(2px, 0);
    clip-path: inset(0 0 55% 0);
  }
  body.wf-persona--cinematic_creator .wf-glitch.is-glitching::after {
    color: var(--wf-secondary, #00e5ff); transform: translate(-2px, 0);
    clip-path: inset(55% 0 0 0);
  }
}

@keyframes wf-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .82; }
}
@keyframes wf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes wf-glitch {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 0); }
  100% { transform: translate(0, 0); }
}

/* --- hero_parallax: reveal-on-load rise (scroll parallax is JS) --- */
@media (prefers-reduced-motion: no-preference) {
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .elementor-widget-heading,
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .elementor-widget-text-editor,
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .elementor-widget-button,
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .wf-btn,
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .elementor-widget-image,
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .wf-hero-logo-wrap {
    animation: wf-hero-rise 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
  }
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .elementor-widget-text-editor {
    animation-delay: 0.12s;
  }
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .elementor-widget-button,
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .wf-btn {
    animation-delay: 0.24s;
  }
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .elementor-widget-image,
  body.wf-persona--cinematic_creator .wf-landing .elementor-top-section:first-child .wf-hero-logo-wrap {
    animation-delay: 0.36s;
  }
  body.wf-persona--cinematic_creator .wf-hero-video { will-change: transform; }
}
@keyframes wf-hero-rise {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: none; }
}

/* --- hero_depth: layered 3D hero (scroll depth + mouse tilt are JS) --- */
@media (prefers-reduced-motion: no-preference) {
  body.wf-persona--cinematic_creator .wf-hero-depth > .elementor-container {
    transform-style: preserve-3d;
    will-change: transform;
  }
  body.wf-persona--cinematic_creator .wf-hero-video { will-change: transform; }
}

/* --- mask_reveal: clip-path text-mask on section headings (JS-armed) --- */
@media (prefers-reduced-motion: no-preference) {
  body.wf-persona--cinematic_creator .wf-mask-el {
    clip-path: inset(0 0 105% 0);
    transform: translate3d(0, 0.12em, 0);
    will-change: clip-path, transform;
    transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.wf-persona--cinematic_creator .wf-mask-el.is-revealed {
    clip-path: inset(-10% 0 -10% 0);
    transform: none;
  }
}

/* --- text_3d: 3D flip-up heading reveal (JS-armed via .wf-text3d-el) --- */
@media (prefers-reduced-motion: no-preference) {
  body.wf-persona--cinematic_creator .wf-text3d-el {
    opacity: 0;
    transform: perspective(900px) rotateX(-80deg);
    transform-origin: 50% 100%;
    will-change: transform, opacity;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.6s ease;
  }
  body.wf-persona--cinematic_creator .wf-text3d-el.is-revealed {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg);
  }
}