/*
 * LEVEL 8 — Effects library.
 * A showcase kit: buttons, tables, animations, tabs, cards, text effects.
 * Palette pulled from theme.json tokens; behaviours live in effects.js.
 */
:root{
  --fx-ink:#111111; --fx-base:#ffffff; --fx-primary:#ff6a3a; --fx-peach:#f9e6dc;
  --fx-muted:#6b6f76; --fx-line:#e7e2db;
}
.fx-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.fx-grid{display:grid;gap:1.25rem}
.fx-grid--2{grid-template-columns:repeat(2,1fr)}
.fx-grid--3{grid-template-columns:repeat(3,1fr)}
.fx-grid--4{grid-template-columns:repeat(4,1fr)}
.fx-label{font:600 .72rem/1 var(--wp--preset--font-family--body,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--fx-muted);margin:0 0 .9rem}
.fx-demo{border:1px solid var(--fx-line);border-radius:16px;padding:1.75rem;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;background:#fff}
.fx-demo--center{align-items:center;justify-content:center;text-align:center;min-height:150px}
@media(max-width:900px){.fx-grid--3,.fx-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fx-grid--2,.fx-grid--3,.fx-grid--4{grid-template-columns:1fr}}

/* ===================== BUTTONS ===================== */
.fx-btn{--c:var(--fx-primary);position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font:600 1rem/1 var(--wp--preset--font-family--body,sans-serif);border:none;cursor:pointer;
  padding:.9em 1.8em;border-radius:999px;text-decoration:none;background:var(--fx-ink);color:#fff;
  transition:transform .2s ease,background .25s ease,color .25s ease,box-shadow .25s ease;overflow:hidden}
.fx-btn:focus-visible{outline:2px solid var(--fx-primary);outline-offset:3px}
.fx-btn--solid:hover{background:var(--fx-primary);transform:translateY(-2px)}
.fx-btn--outline{background:transparent;color:var(--fx-ink);box-shadow:inset 0 0 0 2px var(--fx-ink)}
.fx-btn--outline:hover{background:var(--fx-ink);color:#fff}
.fx-btn--gradient{background:linear-gradient(90deg,#ff6a3a,#ff2d78,#7c5cff);background-size:200% 100%;transition:background-position .5s ease,transform .2s}
.fx-btn--gradient:hover{background-position:100% 0;transform:translateY(-2px)}
.fx-btn--glow{background:var(--fx-primary)}
.fx-btn--glow:hover{box-shadow:0 0 0 2px #fff,0 0 24px 4px rgba(255,106,58,.7);transform:translateY(-2px)}
.fx-btn--fill{background:transparent;color:var(--fx-ink);box-shadow:inset 0 0 0 2px var(--fx-primary);z-index:0}
.fx-btn--fill::after{content:"";position:absolute;inset:0;background:var(--fx-primary);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:-1}
.fx-btn--fill:hover{color:#fff}.fx-btn--fill:hover::after{transform:scaleX(1)}
.fx-btn--arrow .fx-ar{transition:transform .25s ease}
.fx-btn--arrow:hover .fx-ar{transform:translateX(5px)}
.fx-btn--arrow:hover{background:var(--fx-primary)}
.fx-btn--underline{background:transparent;color:var(--fx-ink);border-radius:0;padding:.4em .1em}
.fx-btn--underline::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--fx-primary);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
.fx-btn--underline:hover::after{transform:scaleX(1);transform-origin:left}
.fx-btn--3d{background:var(--fx-primary);box-shadow:0 6px 0 #b8431f}
.fx-btn--3d:active{transform:translateY(4px);box-shadow:0 2px 0 #b8431f}
.fx-btn--shine{background:var(--fx-ink)}
.fx-btn--shine::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s ease}
.fx-btn--shine:hover::before{left:130%}
.fx-btn--ghost{background:rgba(255,106,58,.12);color:var(--fx-primary)}
.fx-btn--ghost:hover{background:rgba(255,106,58,.22)}
.fx-btn--border-draw{background:transparent;color:var(--fx-ink);border-radius:12px}
.fx-btn--border-draw::before,.fx-btn--border-draw::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none}
.fx-btn--border-draw::before{border-top:2px solid var(--fx-primary);border-left:2px solid var(--fx-primary);clip-path:inset(0 100% 100% 0);transition:clip-path .3s ease}
.fx-btn--border-draw::after{border-bottom:2px solid var(--fx-primary);border-right:2px solid var(--fx-primary);clip-path:inset(100% 0 0 100%);transition:clip-path .3s ease .05s}
.fx-btn--border-draw:hover::before,.fx-btn--border-draw:hover::after{clip-path:inset(0)}
.fx-btn--ripple{background:var(--fx-ink)}
.fx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:fx-ripple .6s linear;pointer-events:none}
@keyframes fx-ripple{to{transform:scale(4);opacity:0}}
.fx-btn--magnetic{background:var(--fx-primary);transition:transform .15s ease,box-shadow .2s}
.fx-btn--pulse{background:var(--fx-primary);animation:fx-pulse 2s infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(255,106,58,.6)}70%{box-shadow:0 0 0 14px rgba(255,106,58,0)}100%{box-shadow:0 0 0 0 rgba(255,106,58,0)}}

/* ===================== PRICING / COMPARISON TABLES ===================== */
.fx-toggle{display:inline-flex;align-items:center;gap:.75rem;font-weight:600}
.fx-toggle__sw{width:52px;height:28px;border-radius:999px;background:var(--fx-ink);position:relative;border:none;cursor:pointer}
.fx-toggle__sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .25s ease}
.fx-toggle.is-annual .fx-toggle__sw{background:var(--fx-primary)}
.fx-toggle.is-annual .fx-toggle__sw::after{left:27px}
.fx-price__num::before{content:attr(data-monthly)}
.fx-toggle-scope.is-annual .fx-price__num::before{content:attr(data-annual)}
.fx-plan{border:1px solid var(--fx-line);border-radius:20px;padding:2rem;background:#fff;display:flex;flex-direction:column;gap:.5rem;transition:transform .25s ease,box-shadow .25s ease}
.fx-plan:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(17,17,17,.35)}
.fx-plan--featured{background:var(--fx-ink);color:#fff;border-color:var(--fx-ink);position:relative}
.fx-plan--featured .fx-price__num{color:var(--fx-primary)}
.fx-plan__tag{position:absolute;top:-12px;right:20px;background:var(--fx-primary);color:#fff;font:700 .7rem/1 sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:.4em .8em;border-radius:999px}
.fx-price{font-family:var(--wp--preset--font-family--display);font-size:3.25rem;line-height:1;display:flex;align-items:baseline;gap:.15em}
.fx-price small{font-size:1rem;color:var(--fx-muted);font-family:sans-serif}
.fx-plan ul{list-style:none;padding:0;margin:.5rem 0 1.25rem;display:grid;gap:.55rem}
.fx-plan li{display:flex;gap:.55rem;align-items:center}
.fx-plan li::before{content:"✓";color:var(--fx-primary);font-weight:800}
.fx-compare{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 0 var(--fx-line)}
.fx-compare th,.fx-compare td{padding:1rem 1.25rem;text-align:left;border-bottom:1px solid var(--fx-line)}
.fx-compare thead th{background:var(--fx-ink);color:#fff;font-family:var(--wp--preset--font-family--display);text-transform:uppercase;letter-spacing:.02em}
.fx-compare tbody tr{transition:background .2s}
.fx-compare tbody tr:hover{background:var(--fx-peach)}
.fx-compare .yes{color:#16a34a;font-weight:800}.fx-compare .no{color:#cbd5e1;font-weight:800}

/* ===================== ANIMATIONS ===================== */
.fx-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.fx-reveal.fx-reveal--left{transform:translateX(-30px)}.fx-reveal.fx-reveal--right{transform:translateX(30px)}
.fx-reveal.fx-reveal--scale{transform:scale(.9)}
.fx-reveal.is-in{opacity:1;transform:none}
.fx-float{animation:fx-float 4s ease-in-out infinite}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.fx-spin{animation:fx-spin 6s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.fx-bounce{animation:fx-bounce 1.6s infinite}
@keyframes fx-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.fx-gradient-bg{background:linear-gradient(120deg,#ff6a3a,#ff2d78,#7c5cff,#ff6a3a);background-size:300% 300%;animation:fx-grad 8s ease infinite;color:#fff}
@keyframes fx-grad{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.fx-blob{background:var(--fx-primary);animation:fx-blob 8s ease-in-out infinite}
@keyframes fx-blob{0%,100%{border-radius:42% 58% 63% 37%/42% 43% 57% 58%}50%{border-radius:70% 30% 39% 61%/38% 66% 34% 62%}}
.fx-count{font-family:var(--wp--preset--font-family--display);font-size:clamp(2.5rem,6vw,4.5rem);line-height:1;color:var(--fx-primary)}
.fx-marquee{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marquee__t{display:inline-block;animation:fx-marq 24s linear infinite;font-family:var(--wp--preset--font-family--display);text-transform:uppercase}
.fx-marquee__t span{padding:0 1.25rem}
@keyframes fx-marq{to{transform:translateX(-50%)}}
.fx-type{font-family:var(--wp--preset--font-family--display);text-transform:uppercase;display:inline-block;overflow:hidden;white-space:nowrap;border-right:.1em solid var(--fx-primary);width:0;animation:fx-type 3.5s steps(24) infinite alternate,fx-caret .7s step-end infinite}
@keyframes fx-type{to{width:11ch}}@keyframes fx-caret{50%{border-color:transparent}}

/* ===================== TABS + ACCORDION ===================== */
.fx-tabs__nav{display:flex;gap:.4rem;flex-wrap:wrap;border-bottom:1px solid var(--fx-line);margin-bottom:1.5rem}
.fx-tab{border:none;background:none;padding:.75rem 1.1rem;font:600 1rem/1 sans-serif;color:var(--fx-muted);cursor:pointer;position:relative}
.fx-tab.is-active{color:var(--fx-ink)}
.fx-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fx-primary)}
.fx-panel{display:none;animation:fx-fade .35s ease}
.fx-panel.is-active{display:block}
@keyframes fx-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fx-tabs--pills .fx-tabs__nav{border:none;background:var(--fx-peach);padding:.35rem;border-radius:999px;position:relative;display:inline-flex}
.fx-tabs--pills .fx-tab{border-radius:999px;z-index:1}
.fx-tabs--pills .fx-tab.is-active{color:#fff}
.fx-tabs--pills .fx-tab.is-active::after{display:none}
.fx-pill-ind{position:absolute;top:.35rem;bottom:.35rem;background:var(--fx-primary);border-radius:999px;transition:left .3s cubic-bezier(.22,1,.36,1),width .3s cubic-bezier(.22,1,.36,1);z-index:0}
.fx-acc-item{border-bottom:1px solid var(--fx-line)}
.fx-acc-head{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.15rem 0;font:600 1.15rem/1.3 var(--wp--preset--font-family--display,sans-serif);text-transform:uppercase;text-align:left;color:var(--fx-ink)}
.fx-acc-head .fx-acc-ico{transition:transform .3s ease;color:var(--fx-primary);font-size:1.5rem;flex:none}
.fx-acc-item.is-open .fx-acc-ico{transform:rotate(45deg)}
.fx-acc-body{overflow:hidden;height:0;transition:height .35s ease}
.fx-acc-body>div{color:var(--fx-muted)}
.fx-acc-body>div>p{margin:0 0 1.15rem}

/* ===================== CARDS + HOVERS ===================== */
.fx-card{position:relative;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--fx-line)}
.fx-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.fx-card--zoom img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.fx-card--zoom:hover img{transform:scale(1.08)}
.fx-card__cap{padding:1rem 1.15rem;font-family:var(--wp--preset--font-family--display);text-transform:uppercase}
.fx-card--overlay .fx-card__ov{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.25rem;color:#fff;
  background:linear-gradient(0deg,rgba(17,17,17,.85),transparent 60%);transform:translateY(30%);opacity:0;transition:transform .4s ease,opacity .4s ease}
.fx-card--overlay:hover .fx-card__ov{transform:none;opacity:1}
.fx-card--tilt{transition:transform .1s ease;transform-style:preserve-3d;will-change:transform}
.fx-card--glow{transition:box-shadow .3s,border-color .3s}
.fx-card--glow:hover{border-color:var(--fx-primary);box-shadow:0 0 30px -6px rgba(255,106,58,.6)}
.fx-flip{background:transparent;border:none;perspective:1000px;min-height:220px}
.fx-flip__in{position:relative;width:100%;height:100%;min-height:220px;transition:transform .6s;transform-style:preserve-3d}
.fx-flip:hover .fx-flip__in{transform:rotateY(180deg)}
.fx-flip__f,.fx-flip__b{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;text-align:center}
.fx-flip__f{background:var(--fx-peach);color:var(--fx-ink)}
.fx-flip__b{background:var(--fx-ink);color:#fff;transform:rotateY(180deg)}
.fx-spot{position:relative;overflow:hidden;background:var(--fx-ink);color:#fff;border-radius:16px;padding:2rem;min-height:180px}
.fx-spot::before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,106,58,.35),transparent 60%);transition:opacity .3s;opacity:0}
.fx-spot:hover::before{opacity:1}

/* ===================== TEXT EFFECTS ===================== */
.fx-h{font-family:var(--wp--preset--font-family--display);text-transform:uppercase;font-size:clamp(2rem,5vw,3.5rem);line-height:1;margin:0}
.fx-text--gradient{background:linear-gradient(90deg,#ff6a3a,#ff2d78,#7c5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-text--stroke{color:transparent;-webkit-text-stroke:2px var(--fx-ink)}
.fx-text--shimmer{background:linear-gradient(90deg,#111 0,#111 40%,#ff6a3a 50%,#111 60%,#111 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shim 3s linear infinite}
@keyframes fx-shim{to{background-position:-200% 0}}
.fx-text--glitch{position:relative}
.fx-text--glitch::before,.fx-text--glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.fx-text--glitch::before{color:#ff2d78;animation:fx-gl1 2.5s infinite linear alternate}
.fx-text--glitch::after{color:#7c5cff;animation:fx-gl2 2s infinite linear alternate}
@keyframes fx-gl1{0%{clip-path:inset(0 0 80% 0);transform:translateX(-2px)}50%{clip-path:inset(40% 0 20% 0);transform:translateX(2px)}100%{clip-path:inset(70% 0 5% 0);transform:translateX(-1px)}}
@keyframes fx-gl2{0%{clip-path:inset(60% 0 10% 0);transform:translateX(2px)}50%{clip-path:inset(10% 0 60% 0);transform:translateX(-2px)}100%{clip-path:inset(30% 0 40% 0);transform:translateX(1px)}}
.fx-wave span{display:inline-block;animation:fx-wave 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*.06s)}
@keyframes fx-wave{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px)}}
.fx-hl{background:linear-gradient(transparent 60%,rgba(255,106,58,.55) 0);background-size:0 100%;background-repeat:no-repeat;transition:background-size .5s ease}
.fx-hl:hover{background-size:100% 100%}
.fx-split span{display:inline-block;transition:transform .3s ease,color .3s}
.fx-split:hover span{color:var(--fx-primary)}
.fx-split span:hover{transform:translateY(-8px)}

@media(prefers-reduced-motion:reduce){
  .fx-float,.fx-spin,.fx-bounce,.fx-gradient-bg,.fx-blob,.fx-marquee__t,.fx-type,.fx-text--shimmer,
  .fx-text--glitch::before,.fx-text--glitch::after,.fx-wave span,.fx-btn--pulse{animation:none!important}
  .fx-reveal{opacity:1!important;transform:none!important}
  .fx-type{width:11ch;border-right:none}
}