/* File: assets/hero/css/effects.css */
/* CSS-only helpers */
.fx-shimmer{
  --shine: linear-gradient(110deg,transparent 0%,transparent 45%,#fff 50%,transparent 55%,transparent 100%);
  background-image: var(--shine); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer{to{background-position:-200% 0%}}

/* ---- Shimmer (dual-mode)
   - For text: use background-clip shimmer (default .fx-shimmer)
   - For CTAs: use a highlight sweep overlay (scoped to .preview-cta)
*/
.fx-shimmer.preview-cta{ position: relative; overflow: hidden; }
.fx-shimmer.preview-cta::after{
  content:"";
  position:absolute;
  inset:-50% -20%;
  transform:translateX(-120%) rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  animation: ctaShineSweep 2.4s infinite;
  pointer-events: none;
}
@keyframes ctaShineSweep{ 100% { transform: translateX(220%) rotate(20deg); } }


.fx-neon{ text-shadow:0 0 6px rgba(183,255,0,.5), 0 0 18px rgba(183,255,0,.35), 0 0 36px rgba(0,255,255,.2); }
.fx-glowPulse{ animation: glow 2.2s ease-in-out infinite; }
@keyframes glow{ 0%,100%{ text-shadow:0 0 0 #000 } 50%{ text-shadow:0 0 10px #00ffd0, 0 0 24px #00ffd066, 0 0 48px #00ffd033 } }

.fx-gradient{ background: linear-gradient(90deg, var(--lime), var(--cyan), var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

.fx-borderGlow{ box-shadow:0 0 18px #00ffd022 inset, 0 0 40px #61dafb17; border-radius:4px; }
.fx-cardGlow{  box-shadow:0 0 18px #00ffd022, 0 0 40px #61dafb17; border-radius:12px; }
.fx-dropShadow{ filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.fx-tilt{ transform-style:preserve-3d; will-change:transform; }

/* ---- Compatibility + additional effects (live site runtime) ---- */

/* Runtime historically used fx-neonGlow; treat it as an alias for fx-neon. */
.fx-neonGlow{
  text-shadow:
    0 0 calc(6px * var(--cta-fx-intensity, var(--fx-intensity, .6))) rgba(183,255,0,.50),
    0 0 calc(18px * var(--cta-fx-intensity, var(--fx-intensity, .6))) rgba(183,255,0,.35),
    0 0 calc(36px * var(--cta-fx-intensity, var(--fx-intensity, .6))) rgba(0,255,255,.20);
}

/* Simple glitchy nudge (CSS-only). */
.fx-glitch{
  animation: glitchy 1.2s infinite both;
  will-change: transform, filter;
}
@keyframes glitchy{
  0%{transform:translate(0)}
  20%{transform:translate(1px,-1px) skewX(-1deg)}
  40%{transform:translate(-1px,1px) skewX(1deg)}
  60%{transform:translate(1px,0) skewX(-0.5deg)}
  80%{transform:translate(-1px,0) skewX(0.5deg)}
  100%{transform:translate(0)}
}

/* ------------------------------------------------------------------
   CTA Look + FX Preset Library (shared)
   Source: migrated from editor-new.css and retargeted to .preview-cta
   ------------------------------------------------------------------ */

.cta-look--outline .preview-cta {
    background: transparent;
    border-width: 2px;
    border-style: solid;
}

.cta-look--outline .preview-cta.primary {
    border-color: var(--cta-primary-bg-color, #007bff);
    color: var(--cta-primary-bg-color, #007bff);
}

.cta-look--outline .preview-cta.ghost {
    border-color: var(--cta-secondary-bg-color, #cfd7e3);
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--soft .preview-cta {
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.cta-look--soft .preview-cta.primary {
    background-color: color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 80%, #000 20%);
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--soft .preview-cta.ghost {
    background-color: rgba(255,255,255,0.14);
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--glass .preview-cta {
    background-color: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.cta-look--glass .preview-cta.primary {
    background-color: rgba(0,0,0,0.12) !important;
    border-color: color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 60%, rgba(255,255,255,0.22) 40%);
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--neon .preview-cta {
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 8px 22px rgba(0,0,0,0.28);
    filter: drop-shadow(0 0 10px rgba(0,255,255,0.20));
}

.cta-look--neon .preview-cta.primary {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 10px 26px rgba(0,0,0,0.30),
        0 0 22px color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 70%, transparent 30%);
}

.cta-look--neon .preview-cta.ghost {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 10px 26px rgba(0,0,0,0.26),
        0 0 16px rgba(255,0,255,0.18);
}

.cta-look--pill .preview-cta {
    border-radius: 999px;
    padding-left: calc((22px * var(--_cta-scale)) + var(--cta-btn-pad, 0px));
    padding-right: calc((22px * var(--_cta-scale)) + var(--cta-btn-pad, 0px));
}

.cta-look--solid .preview-cta {
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 22px rgba(0,0,0,0.26);
}

@keyframes ctaGlowPulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50% { filter: brightness(1.08) drop-shadow(0 0 calc(18px * var(--cta-fx-intensity, 1)) rgba(255,255,255,0.22)); }
}

.cta-fx--glowPulse .preview-cta {
    animation: ctaGlowPulse calc(1.6s * var(--cta-fx-speed, 1)) ease-in-out infinite;
}

.cta-fx--lift .preview-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}

@keyframes ctaJitter {
    0%, 100% { transform: translate(0,0); }
    20% { transform: translate(-0.6px, 0.3px); }
    40% { transform: translate(0.6px, -0.3px); }
    60% { transform: translate(-0.4px, -0.2px); }
    80% { transform: translate(0.4px, 0.2px); }
}

.cta-fx--jitter .preview-cta:hover {
    animation: ctaJitter calc(0.25s * var(--cta-fx-speed, 1)) linear infinite;
}

.cta-fx--shimmer .preview-cta {
    position: relative;
    overflow: hidden;
}

.cta-fx--shimmer .preview-cta::before {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
    transform: translateX(-60%);
    transition: transform 0.2s ease;
    pointer-events: none;
}

@keyframes ctaShimmerMove {
    0% { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
}

.cta-fx--shimmer .preview-cta:hover::before {
    animation: ctaShimmerMove calc(0.9s * var(--cta-fx-speed, 1)) ease-in-out;
}

.cta-fx--neonGlow .preview-cta {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 10px 26px rgba(0,0,0,0.34),
        0 0 calc(18px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 55%, transparent 45%);
    filter: saturate(1.05);
}

.cta-fx--neonGlow .preview-cta.ghost {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 10px 26px rgba(0,0,0,0.30),
        0 0 calc(14px * var(--cta-fx-intensity, 1)) rgba(255,0,255,0.18);
}

.cta-fx--neonGlow .preview-cta:hover {
    filter: saturate(1.15) brightness(1.05);
}

@keyframes ctaNeonPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.08) inset,
            0 10px 26px rgba(0,0,0,0.34),
            0 0 calc(14px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 45%, transparent 55%);
        transform: translateY(0);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.10) inset,
            0 12px 30px rgba(0,0,0,0.36),
            0 0 calc(26px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 65%, transparent 35%);
        transform: translateY(-1px);
    }
}

.cta-fx--neonPulse .preview-cta {
    animation: ctaNeonPulse calc(1.9s * var(--cta-fx-speed, 1)) ease-in-out infinite;
    will-change: transform, box-shadow;
}

.cta-fx--chromatic .preview-cta {
    text-shadow:
        calc(0.75px * var(--cta-fx-intensity, 1)) 0 rgba(0, 255, 255, 0.55),
        calc(-0.75px * var(--cta-fx-intensity, 1)) 0 rgba(255, 0, 255, 0.50);
}

.cta-fx--chromatic .preview-cta:hover {
    text-shadow:
        calc(1.25px * var(--cta-fx-intensity, 1)) 0 rgba(0, 255, 255, 0.65),
        calc(-1.25px * var(--cta-fx-intensity, 1)) 0 rgba(255, 0, 255, 0.60);
}

.cta-fx--scanlines .preview-cta {
    position: relative;
    overflow: hidden;
}

.cta-fx--scanlines .preview-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.06) 0%,
            rgba(255,255,255,0.00) 14%,
            rgba(0,0,0,0.06) 28%,
            rgba(0,0,0,0.00) 42%,
            rgba(255,255,255,0.05) 56%,
            rgba(255,255,255,0.00) 70%,
            rgba(0,0,0,0.05) 84%,
            rgba(0,0,0,0.00) 100%
        );
    opacity: 0;
    mix-blend-mode: overlay;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.cta-fx--scanlines .preview-cta:hover::after {
    opacity: 0.35;
}

@keyframes ctaLaserSweep {
    0% { transform: translateX(-120%) skewX(-18deg); opacity: 0.0; }
    10% { opacity: 0.55; }
    60% { opacity: 0.40; }
    100% { transform: translateX(120%) skewX(-18deg); opacity: 0.0; }
}

.cta-fx--laserSweep .preview-cta {
    position: relative;
    overflow: hidden;
}

.cta-fx--laserSweep .preview-cta::before {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    width: 52%;
    left: -60%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.10) 35%,
        rgba(255,255,255,0.38) 50%,
        rgba(255,255,255,0.10) 65%,
        transparent 100%
    );
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
}

.cta-fx--laserSweep .preview-cta:hover::before {
    animation: ctaLaserSweep calc(0.9s * var(--cta-fx-speed, 1)) ease-in-out;
}

@keyframes ctaGlitchSlice {
    0%   { clip-path: inset(12% 0 78% 0); transform: translate(-1px, 0); }
    15%  { clip-path: inset(72% 0 10% 0); transform: translate(1px, -1px); }
    30%  { clip-path: inset(38% 0 40% 0); transform: translate(-2px, 1px); }
    45%  { clip-path: inset(55% 0 22% 0); transform: translate(2px, 0); }
    60%  { clip-path: inset(20% 0 58% 0); transform: translate(-1px, -1px); }
    75%  { clip-path: inset(64% 0 14% 0); transform: translate(1px, 1px); }
    100% { clip-path: inset(12% 0 78% 0); transform: translate(0, 0); }
}

.cta-fx--glitchNeon .preview-cta {
    position: relative;
    isolation: isolate;
}

.cta-fx--glitchNeon .preview-cta::before,
.cta-fx--glitchNeon .preview-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}

.cta-fx--glitchNeon .preview-cta::before {
    background: linear-gradient(90deg, rgba(0,255,255,0.25), transparent 45%, rgba(255,0,255,0.22));
    transform: translateX(-1px);
}

.cta-fx--glitchNeon .preview-cta::after {
    background: linear-gradient(90deg, rgba(255,0,255,0.20), transparent 55%, rgba(0,255,255,0.18));
    transform: translateX(1px);
}

.cta-fx--glitchNeon .preview-cta:hover {
    text-shadow:
        1px 0 rgba(0, 255, 255, 0.65),
        -1px 0 rgba(255, 0, 255, 0.60);
}

.cta-fx--glitchNeon .preview-cta:hover::before,
.cta-fx--glitchNeon .preview-cta:hover::after {
    opacity: var(--cta-fx-intensity, 0.55);
    animation: ctaGlitchSlice calc(0.55s * var(--cta-fx-speed, 1)) steps(2, end) infinite;
}

@keyframes ctaNeonFlicker {
    0%, 100% { filter: brightness(1) saturate(1.05); opacity: 1; }
    2% { filter: brightness(1.08) saturate(1.12); }
    4% { filter: brightness(0.92) saturate(1.00); opacity: 0.95; }
    6% { filter: brightness(1.12) saturate(1.18); opacity: 1; }
    8% { filter: brightness(0.96) saturate(1.02); }
    10% { filter: brightness(1.10) saturate(1.16); }
    55% { filter: brightness(1.02) saturate(1.08); }
    57% { filter: brightness(0.90) saturate(0.98); opacity: 0.94; }
    60% { filter: brightness(1.10) saturate(1.16); opacity: 1; }
    82% { filter: brightness(1.03) saturate(1.10); }
    84% { filter: brightness(0.94) saturate(1.02); opacity: 0.96; }
    86% { filter: brightness(1.08) saturate(1.14); opacity: 1; }
}

.cta-fx--neonSign .preview-cta {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 10px 26px rgba(0,0,0,0.34),
        0 0 calc(10px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 55%, transparent 45%),
        0 0 calc(22px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 35%, transparent 65%);
    text-shadow:
        0 0 calc(10px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 55%, transparent 45%),
        0 0 calc(18px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 35%, transparent 65%);
    animation: ctaNeonFlicker calc(5.4s * var(--cta-fx-speed, 1)) infinite;
}

.cta-fx--neonSign .preview-cta::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 30%, transparent 70%) 0%,
        transparent 70%);
    filter: blur(10px);
    opacity: var(--cta-fx-intensity, 0.55);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: -1;
}

.cta-fx--neonSign .preview-cta:hover {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 12px 30px rgba(0,0,0,0.36),
        0 0 calc(14px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 70%, transparent 30%),
        0 0 calc(34px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 45%, transparent 55%);
}

@keyframes ctaElectricArc {
    0%   { transform: translateX(-25%) skewX(-10deg); opacity: 0.0; }
    10%  { opacity: 0.7; }
    40%  { transform: translateX(25%) skewX(-10deg); opacity: 0.45; }
    60%  { transform: translateX(-10%) skewX(-10deg); opacity: 0.75; }
    100% { transform: translateX(35%) skewX(-10deg); opacity: 0.0; }
}

@keyframes ctaElectricJitter {
    0%, 100% { transform: translate(0,0); }
    25% { transform: translate(-1px, 0); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 1px); }
}

.cta-fx--electricGlitch .preview-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cta-fx--electricGlitch .preview-cta:hover,
.cta-fx--electricGlitch .preview-cta:focus-visible {
    animation: ctaElectricJitter calc(0.18s * var(--cta-fx-speed, 1)) linear infinite;
    text-shadow:
        1px 0 rgba(0,255,255,0.65),
        -1px 0 rgba(255,0,255,0.60);
}

.cta-fx--electricGlitch .preview-cta::before {
    content: "";
    position: absolute;
    inset: -30% -50%;
    background:
        repeating-linear-gradient(115deg,
            rgba(255,255,255,0) 0px,
            rgba(255,255,255,0) 14px,
            rgba(255,255,255,0.18) 15px,
            rgba(255,255,255,0.00) 18px
        ),
        repeating-linear-gradient(65deg,
            rgba(0,0,0,0) 0px,
            rgba(0,0,0,0) 18px,
            rgba(0,255,255,0.16) 19px,
            rgba(0,0,0,0.00) 22px
        );
    mix-blend-mode: screen;
    filter: blur(0.2px) contrast(1.2);
    opacity: 0;
    pointer-events: none;
}

.cta-fx--electricGlitch .preview-cta:hover::before,
.cta-fx--electricGlitch .preview-cta:focus-visible::before {
    opacity: 1;
    animation: ctaElectricArc calc(0.55s * var(--cta-fx-speed, 1)) steps(2, end) infinite;
}

.cta-fx--electricGlitch .preview-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80px 24px at 15% 35%, rgba(255,255,255,0.16), transparent 70%),
        radial-gradient(90px 28px at 80% 65%, rgba(255,255,255,0.12), transparent 70%);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}

.cta-fx--electricGlitch .preview-cta:hover::after,
.cta-fx--electricGlitch .preview-cta:focus-visible::after {
    opacity: 0.75;
}

@keyframes ctaTvShift {
    0%   { transform: translateX(0) skewX(0deg); }
    20%  { transform: translateX(-1px) skewX(-0.6deg); }
    40%  { transform: translateX(1px) skewX(0.6deg); }
    60%  { transform: translateX(-2px) skewX(-0.4deg); }
    80%  { transform: translateX(1px) skewX(0.4deg); }
    100% { transform: translateX(0) skewX(0deg); }
}

@keyframes ctaTvNoise {
    0% { background-position: 0 0, 0 0; opacity: 0.0; }
    10% { opacity: 0.35; }
    55% { background-position: 40px 20px, -20px -10px; opacity: 0.25; }
    100% { background-position: -30px 10px, 30px -20px; opacity: 0.0; }
}

.cta-fx--tvGlitch .preview-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cta-fx--tvGlitch .preview-cta:hover,
.cta-fx--tvGlitch .preview-cta:focus-visible {
    animation: ctaTvShift calc(0.35s * var(--cta-fx-speed, 1)) steps(2, end) infinite;
    text-shadow:
        1.25px 0 rgba(0,255,255,0.65),
        -1.25px 0 rgba(255,0,255,0.60);
}

.cta-fx--tvGlitch .preview-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.05) 0px,
        rgba(255,255,255,0.05) 1px,
        rgba(0,0,0,0.00) 2px,
        rgba(0,0,0,0.00) 4px
    );
    opacity: 0.0;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.cta-fx--tvGlitch .preview-cta::after {
    content: "";
    position: absolute;
    inset: -10% -20%;
    background:
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.05) 0px,
            rgba(255,255,255,0.05) 1px,
            rgba(0,0,0,0.00) 2px,
            rgba(0,0,0,0.00) 6px
        ),
        radial-gradient(120px 60px at 40% 40%, rgba(255,255,255,0.08), transparent 70%);
    opacity: 0.0;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.cta-fx--tvGlitch .preview-cta:hover::before,
.cta-fx--tvGlitch .preview-cta:focus-visible::before {
    opacity: 0.30;
}

.cta-fx--tvGlitch .preview-cta:hover::after,
.cta-fx--tvGlitch .preview-cta:focus-visible::after {
    animation: ctaTvNoise calc(0.55s * var(--cta-fx-speed, 1)) steps(2, end) infinite;
}

@keyframes ctaGlowStrobe {
    0%, 10% {
        filter: brightness(1.10) saturate(1.15);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.10) inset,
            0 12px 30px rgba(0,0,0,0.36),
            0 0 calc(26px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 60%, transparent 40%);
    }
    11%, 100% {
        filter: brightness(1.0) saturate(1.05);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.06) inset,
            0 10px 26px rgba(0,0,0,0.34),
            0 0 calc(10px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 35%, transparent 65%);
    }
}

.cta-fx--glowStrobe .preview-cta {
    animation: ctaGlowStrobe calc(1.0s * var(--cta-fx-speed, 1)) linear infinite;
    will-change: filter, box-shadow;
}

@keyframes ctaFastStrobe {
    0%, 12% {
        filter: brightness(1.16) saturate(1.22);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.12) inset,
            0 12px 30px rgba(0,0,0,0.36),
            0 0 calc(30px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 70%, transparent 30%);
    }
    13%, 100% {
        filter: brightness(1.0) saturate(1.06);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.06) inset,
            0 10px 26px rgba(0,0,0,0.34),
            0 0 calc(10px * var(--cta-fx-intensity, 1)) color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 35%, transparent 65%);
    }
}

.cta-fx--fastStrobe .preview-cta {
    animation: ctaFastStrobe calc(0.38s * var(--cta-fx-speed, 1)) linear infinite;
    will-change: filter, box-shadow;
}

@keyframes ctaTypingReveal {
    0%   { clip-path: inset(0 100% 0 0); }
    42%  { clip-path: inset(0 0 0 0); }
    78%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
}

@keyframes ctaCursorBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.cta-fx--typing .preview-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: transparent !important; /* keep real text for SR, hide visually */
}

.cta-fx--typing .preview-cta::after {
    content: attr(data-txt);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cta-primary-text-color, #fff);
    text-shadow:
        0 0 10px color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 45%, transparent 55%),
        0 0 18px color-mix(in srgb, var(--cta-primary-bg-color, #00d0ff) 30%, transparent 70%);
    clip-path: inset(0 100% 0 0);
    animation: ctaTypingReveal calc(3.2s * var(--cta-fx-speed, 1)) steps(14, end) infinite;
    pointer-events: none;
}

.cta-fx--typing .preview-cta::before {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    width: 2px;
    right: 14px;
    background: var(--cta-primary-text-color, #fff);
    opacity: 0.9;
    animation: ctaCursorBlink calc(0.8s * var(--cta-fx-speed, 1)) steps(1, end) infinite;
    pointer-events: none;
}

@keyframes ctaShimmerLoop {
    0%   { transform: translateX(-80%); opacity: 0.0; }
    8%   { opacity: 0.55; }
    45%  { opacity: 0.40; }
    100% { transform: translateX(80%); opacity: 0.0; }
}

.cta-fx--shimmer .preview-cta::before {
    animation: ctaShimmerLoop calc(2.6s * var(--cta-fx-speed, 1)) ease-in-out infinite !important;
    opacity: 0.6;
}

.cta-fx--shimmer .preview-cta:hover::before {
    animation-duration: calc(1.0s * var(--cta-fx-speed, 1)) !important;
    opacity: 0.85;
}

@keyframes ctaBounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-4px); }
    55%  { transform: translateY(0); }
    72%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

.cta-fx--bounce .preview-cta:hover,
.cta-fx--bounce .preview-cta:focus-visible {
    animation: ctaBounce calc(0.62s * var(--cta-fx-speed, 1)) ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .cta-fx--neonPulse .preview-cta,
    .cta-fx--glowPulse .preview-cta,
    .cta-fx--jitter .preview-cta:hover,
    .cta-fx--glitchNeon .preview-cta:hover::before,
    .cta-fx--glitchNeon .preview-cta:hover::after,

    .cta-fx--neonSign .preview-cta,
    .cta-fx--electricGlitch .preview-cta:hover,
    .cta-fx--electricGlitch .preview-cta:focus-visible,
    .cta-fx--electricGlitch .preview-cta:hover::before,
    .cta-fx--electricGlitch .preview-cta:focus-visible::before,
    .cta-fx--tvGlitch .preview-cta:hover,
    .cta-fx--tvGlitch .preview-cta:focus-visible,
    .cta-fx--tvGlitch .preview-cta:hover::after,
    .cta-fx--tvGlitch .preview-cta:focus-visible::after,
    .cta-fx--glowStrobe .preview-cta,
    .cta-fx--fastStrobe .preview-cta,
    .cta-fx--typing .preview-cta::after,
    .cta-fx--typing .preview-cta::before,
    .cta-fx--shimmer .preview-cta::before,
    .cta-fx--bounce .preview-cta:hover,
    .cta-fx--bounce .preview-cta:focus-visible {
        animation: none !important;
    }

    /* Also suppress overlays that "spark" */
    .cta-fx--electricGlitch .preview-cta::before,
    .cta-fx--electricGlitch .preview-cta::after,
    .cta-fx--tvGlitch .preview-cta::before,
    .cta-fx--tvGlitch .preview-cta::after {
        opacity: 0 !important;
    }
}

.cta-look--ghost .preview-cta {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: none;
    backdrop-filter: blur(6px) saturate(120%);
}

.cta-look--ghost .preview-cta.primary {
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--ghost .preview-cta.ghost {
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--ghost .preview-cta:hover {
    border-color: rgba(255,255,255,.60);
    background: rgba(255,255,255,.06) !important;
}

.cta-look--link .preview-cta {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-inline: 0.25rem !important;
    padding-block: 0.25rem !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.cta-look--link .preview-cta.primary {
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--link .preview-cta.ghost {
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--link .preview-cta:hover {
    opacity: .92;
}

.cta-look--link .preview-cta:active {
    transform: translateY(1px);
}

.cta-look--frosted .preview-cta {
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    backdrop-filter: blur(14px) saturate(140%);
}

.cta-look--frosted .preview-cta.primary {
    background:
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
        color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 55%, rgba(0,0,0,.25));
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--frosted .preview-cta.ghost {
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
        rgba(0,0,0,.18);
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--frosted .preview-cta:hover {
    border-color: rgba(255,255,255,.40);
    filter: brightness(1.03);
}

.cta-look--glassOutline .preview-cta {
    border: 1px solid rgba(255,255,255,.40);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 12px 32px rgba(0,0,0,.25);
    backdrop-filter: blur(10px) saturate(130%);
}

.cta-look--glassOutline .preview-cta.primary {
    background: rgba(0,0,0,.16);
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--glassOutline .preview-cta.ghost {
    background: rgba(0,0,0,.10);
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--glassOutline .preview-cta:hover {
    border-color: rgba(255,255,255,.60);
    background: rgba(0,0,0,.08);
}

.cta-look--neonOutline .preview-cta {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.12),
        0 0 18px rgba(0, 255, 255, .18),
        0 0 28px rgba(255, 0, 255, .12);
}

.cta-look--neonOutline .preview-cta.primary {
    border-color: color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 80%, rgba(255,255,255,.45));
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--neonOutline .preview-cta.ghost {
    border-color: rgba(255,255,255,.55);
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--neonOutline .preview-cta:hover {
    border-color: rgba(255,255,255,.80);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.16),
        0 0 22px rgba(0, 255, 255, .22),
        0 0 34px rgba(255, 0, 255, .16);
}

.cta-look--gradient .preview-cta {
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
}

.cta-look--gradient .preview-cta.primary {
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
        linear-gradient(135deg,
            var(--cta-primary-bg-color, rgba(255,0,255,.55)),
            rgba(0,255,255,.45)
        );
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--gradient .preview-cta.ghost {
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
        linear-gradient(135deg,
            color-mix(in srgb, var(--cta-secondary-bg-color, rgba(0,0,0,.22)) 70%, rgba(255,0,255,.22)),
            rgba(0,255,255,.18)
        );
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--gradient .preview-cta:hover {
    filter: brightness(1.06);
}

.cta-look--holo .preview-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 14px 40px rgba(0,0,0,.30);
}

.cta-look--holo .preview-cta.primary {
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(255,0,255,.40), rgba(0,255,255,.35));
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--holo .preview-cta.ghost {
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(0,255,255,.20), rgba(255,0,255,.16));
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--holo .preview-cta::before {
    content: "";
    position: absolute;
    inset: -60% -30%;
    background:
        linear-gradient(90deg,
          rgba(255,255,255,0) 0%,
          rgba(255,255,255,.18) 35%,
          rgba(255,255,255,0) 70%
        );
    transform: rotate(18deg) translateX(-30%);
    opacity: .9;
    pointer-events: none;
}

.cta-look--holo .preview-cta:hover::before {
    transform: rotate(18deg) translateX(30%);
    transition: transform .55s ease;
}

@media (prefers-reduced-motion: reduce) {
    .cta-look--holo .preview-cta:hover::before { transition: none; }
}

.cta-look--cyber .preview-cta {
    position: relative;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.38);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),
        0 14px 34px rgba(0,0,0,.30);
}

.cta-look--cyber .preview-cta.primary {
    background: color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 45%, rgba(0,0,0,.35));
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--cyber .preview-cta.ghost {
    background: color-mix(in srgb, var(--cta-secondary-bg-color, rgba(0,0,0,.22)) 60%, rgba(0,0,0,.35));
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--cyber .preview-cta:hover {
    border-color: rgba(255,255,255,.62);
    filter: brightness(1.03);
}

.cta-look--plasma .preview-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 44px rgba(0,0,0,.32);
}

.cta-look--plasma .preview-cta.primary {
    background:
        radial-gradient(120% 140% at 10% 20%, rgba(255,0,255,.45), rgba(0,0,0,0) 60%),
        radial-gradient(120% 140% at 90% 80%, rgba(0,255,255,.38), rgba(0,0,0,0) 60%),
        color-mix(in srgb, var(--cta-primary-bg-color, #007bff) 25%, rgba(0,0,0,.30));
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--plasma .preview-cta.ghost {
    background:
        radial-gradient(120% 140% at 10% 20%, rgba(0,255,255,.22), rgba(0,0,0,0) 60%),
        radial-gradient(120% 140% at 90% 80%, rgba(255,0,255,.18), rgba(0,0,0,0) 60%),
        rgba(0,0,0,.22);
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--plasma .preview-cta:hover {
    filter: brightness(1.05);
}

.cta-look--threed .preview-cta {
    border: 1px solid rgba(255,255,255,.10);
}

.cta-look--threed .preview-cta.primary {
    background: var(--cta-primary-bg-color, rgba(255,0,255,.55));
    color: var(--cta-primary-text-color, #fff);
    box-shadow:
        0 10px 0 rgba(0,0,0,.28),
        0 18px 36px rgba(0,0,0,.30);
}

.cta-look--threed .preview-cta.ghost {
    background: var(--cta-secondary-bg-color, rgba(0,0,0,.22));
    color: var(--cta-secondary-text-color, #111);
    box-shadow:
        0 10px 0 rgba(0,0,0,.22),
        0 18px 34px rgba(0,0,0,.26);
}

.cta-look--threed .preview-cta.primary:active {
    transform: translateY(6px);
    box-shadow:
        0 4px 0 rgba(0,0,0,.28),
        0 12px 28px rgba(0,0,0,.28);
}

.cta-look--threed .preview-cta.ghost:active {
    transform: translateY(6px);
    box-shadow:
        0 4px 0 rgba(0,0,0,.22),
        0 12px 26px rgba(0,0,0,.26);
}

.cta-look--brutal .preview-cta {
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 6px 6px 0 rgba(0,0,0,.55);
}

.cta-look--brutal .preview-cta.primary {
    background: var(--cta-primary-bg-color, rgba(0,0,0,.35));
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--brutal .preview-cta.ghost {
    background: var(--cta-secondary-bg-color, rgba(0,0,0,.22));
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--brutal .preview-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(0,0,0,.55);
}

.cta-look--brutal .preview-cta:active {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0 rgba(0,0,0,.55);
}

.cta-look--pixel .preview-cta {
    border: 1px solid rgba(255,255,255,.35);
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.10) 0px,
            rgba(255,255,255,.10) 3px,
            rgba(0,0,0,0) 3px,
            rgba(0,0,0,0) 7px
        ),
        rgba(0,0,0,.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.30);
}

.cta-look--pixel .preview-cta.primary { color: var(--cta-primary-text-color, #fff); }

.cta-look--pixel .preview-cta.ghost { color: var(--cta-secondary-text-color, #111); }

.cta-look--pixel .preview-cta:hover {
    border-color: rgba(255,255,255,.60);
    filter: brightness(1.04);
}

.cta-look--duotone .preview-cta {
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        0 14px 40px rgba(0,0,0,.30);
}

.cta-look--duotone .preview-cta.primary {
    background:
        linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,0)),
        var(--cta-primary-bg-color, rgba(255,0,255,.50));
    color: var(--cta-primary-text-color, #fff);
}

.cta-look--duotone .preview-cta.ghost {
    background:
        linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,0)),
        var(--cta-secondary-bg-color, rgba(0,0,0,.22));
    color: var(--cta-secondary-text-color, #111);
}

.cta-look--duotone .preview-cta:hover {
    filter: brightness(1.05);
}