/* ════════════════════════════════════════════════════════════════════
   VOCES JÓVENES · FX LIBRARY v1.0
   100+ vanilla CSS/JS effects for any project.
   Inspired by shadcn, motion-react, framer patterns — without the deps.
   Usage: <link rel="stylesheet" href="/assets/fx/fx.css">
          <script src="/assets/fx/fx.js"></script>
   ════════════════════════════════════════════════════════════════════ */

:root{
  --fx-orange:#E64722;
  --fx-orange-soft:#FF6A47;
  --fx-navy:#0D1B3E;
  --fx-cream:#F6F1E8;
  --fx-ink:#0D1B3E;
  --fx-glow:rgba(230,71,34,0.5);
  --fx-ease-spring:cubic-bezier(.2,.8,.3,1.2);
  --fx-ease-out:cubic-bezier(.2,.8,.3,1);
  --fx-ease-in:cubic-bezier(.5,0,.85,.15);
}

/* ══════════════════════════════════════════════
   01-15 · BACKGROUNDS & AMBIENT
══════════════════════════════════════════════ */

/* 01 · Stripe BG Guides */
.fx-stripes{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-columns:repeat(var(--fx-cols,5),1fr);overflow:hidden;z-index:0}
.fx-stripes::before,.fx-stripes::after,.fx-stripes>span{content:"";border-left:1px dashed rgba(255,255,255,0.06)}
.fx-stripes>span{position:relative;display:block;height:100%}
.fx-stripes>span::after{content:"";position:absolute;top:-50%;left:-1px;width:1px;height:30vh;background:linear-gradient(to bottom,transparent,var(--fx-orange) 50%,transparent);opacity:.55;animation:fx-trace 12s ease-in-out infinite;animation-delay:calc(var(--fx-i,0) * -1.5s)}
@keyframes fx-trace{0%{top:-30vh}100%{top:130%}}

/* 02 · Aurora Gradient */
.fx-aurora{position:absolute;inset:-30%;filter:blur(80px);pointer-events:none;background:conic-gradient(from 0deg at 50% 50%,#FF6A47,#0D1B3E,#1A2B52,#E64722,#FF6A47);opacity:.35;animation:fx-spin 24s linear infinite;z-index:0}
@keyframes fx-spin{to{transform:rotate(360deg)}}

/* 03 · Mesh Gradient */
.fx-mesh{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 60% 50% at 80% 0%, rgba(230,71,34,0.30) 0%, transparent 60%),
  radial-gradient(ellipse 50% 40% at 20% 100%, rgba(13,27,62,0.45) 0%, transparent 60%),
  radial-gradient(ellipse 40% 50% at 100% 100%, rgba(255,106,71,0.18) 0%, transparent 60%);}

/* 04 · Particle Field */
.fx-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.fx-particles span{position:absolute;width:3px;height:3px;background:var(--fx-orange);border-radius:50%;opacity:0;animation:fx-drift 18s linear infinite}
@keyframes fx-drift{0%{transform:translateY(110vh) scale(.4);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) scale(1.4);opacity:0}}

/* 05 · Grid Beam */
.fx-grid-beam{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 70%)}

/* 06 · Noise Texture */
.fx-noise::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.5'/></svg>");opacity:.05;mix-blend-mode:overlay}

/* 07 · Glow Orbs */
.fx-orb{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none;animation:fx-orb-drift 14s ease-in-out infinite alternate}
.fx-orb.o1{background:var(--fx-orange);top:10%;left:5%}
.fx-orb.o2{background:var(--fx-navy);bottom:10%;right:5%;animation-delay:-4s}
.fx-orb.o3{background:var(--fx-orange-soft);top:50%;left:60%;animation-delay:-8s}
@keyframes fx-orb-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,-30px) scale(1.15)}}

/* 08 · Cosmic Spin Border (pure CSS) */
.fx-cosmic{position:relative;display:inline-flex;padding:3px;border-radius:14px;overflow:hidden;isolation:isolate}
.fx-cosmic::before{content:"";position:absolute;inset:-200%;background:conic-gradient(from 0deg,#FF6A47,#0D1B3E,#E64722,#FF6A47);animation:fx-spin 4s linear infinite;z-index:-1}
.fx-cosmic>*{background:var(--fx-navy);border-radius:11px;padding:11px 22px;color:#fff;font-weight:600}

/* 09 · Star field */
.fx-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 60% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 90% 10%,#fff,transparent),radial-gradient(1px 1px at 33% 90%,#fff,transparent),radial-gradient(2px 2px at 75% 45%,#fff,transparent);background-size:200px 200px;animation:fx-twinkle 4s ease-in-out infinite alternate;opacity:.4}
@keyframes fx-twinkle{0%{opacity:.3}100%{opacity:.7}}

/* 10 · Wave Pattern */
.fx-wave{position:absolute;left:0;right:0;height:80px;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 80' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 40 Q300 0 600 40 T1200 40 V80 H0 Z' fill='%23E64722' opacity='.15'/></svg>") center/cover}

/* 11 · Dot Matrix */
.fx-dots-bg{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.10) 1.4px, transparent 1.4px);background-size:22px 22px;mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 80%)}

/* 12 · Conic Orbit */
.fx-orbit{position:absolute;width:600px;height:600px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0% 80%,var(--fx-orange) 90% 100%);filter:blur(40px);opacity:.4;pointer-events:none;animation:fx-spin 20s linear infinite}

/* 13 · Spotlight follow */
.fx-spotlight{position:relative;overflow:hidden}
.fx-spotlight::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(230,71,34,0.20),transparent 70%);left:var(--fx-mx,-100%);top:var(--fx-my,-100%);transform:translate(-50%,-50%);pointer-events:none;transition:opacity .25s;opacity:0}
.fx-spotlight:hover::before{opacity:1}

/* 14 · Animated gradient bg */
.fx-gradient-bg{background:linear-gradient(45deg,#0D1B3E,#1A2B52,#E64722,#FF6A47);background-size:400% 400%;animation:fx-grad 15s ease infinite}
@keyframes fx-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* 15 · Ripple pulse (background) */
.fx-pulse-bg{position:relative}
.fx-pulse-bg::before,.fx-pulse-bg::after{content:"";position:absolute;inset:50%;width:0;height:0;border-radius:50%;border:2px solid var(--fx-orange);transform:translate(-50%,-50%);animation:fx-pulse 3s ease-out infinite;opacity:0;pointer-events:none}
.fx-pulse-bg::after{animation-delay:1.5s}
@keyframes fx-pulse{0%{width:0;height:0;opacity:.6}100%{width:600px;height:600px;opacity:0}}

/* ══════════════════════════════════════════════
   16-30 · TEXT EFFECTS
══════════════════════════════════════════════ */

/* 16 · Text whip-in (per char) */
.fx-text-whip span{display:inline-block;opacity:0;transform:translateY(0.35em);transition:opacity .45s,transform .45s cubic-bezier(.85,.1,.9,1.2)}
.fx-text-whip.in span{opacity:1;transform:translateY(0)}

/* 17 · Text calm in up */
.fx-text-calm span{display:inline-block;transform:translateY(200%);transition:transform .85s cubic-bezier(.125,.92,.69,.975)}
.fx-text-calm.in span{transform:translateY(0)}

/* 18 · Text shift in up */
.fx-text-shift{overflow:hidden;display:inline-flex}
.fx-text-shift span{display:inline-block;transform:translateY(100%);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.fx-text-shift.in span{transform:translateY(0)}

/* 19 · Text gradient fill */
.fx-text-grad{background:linear-gradient(135deg,var(--fx-orange),var(--fx-orange-soft),var(--fx-navy));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* 20 · Text shimmer */
.fx-text-shimmer{background:linear-gradient(90deg,#999,#fff,#999);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shine 3s linear infinite}
@keyframes fx-shine{to{background-position:200% center}}

/* 21 · Text reveal on scroll */
.fx-text-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s var(--fx-ease-out)}
.fx-text-reveal.in{opacity:1;transform:translateY(0)}

/* 22 · Text scramble (initial state) */
.fx-text-scramble{font-family:'Space Mono',monospace}

/* 23 · Text typewriter */
.fx-text-type{display:inline-block;border-right:2px solid var(--fx-orange);white-space:nowrap;overflow:hidden;width:0;animation:fx-type 3.5s steps(40,end) forwards,fx-blink .75s step-end infinite}
@keyframes fx-type{to{width:100%}}
@keyframes fx-blink{from,to{border-color:transparent}50%{border-color:var(--fx-orange)}}

/* 24 · Text outline */
.fx-text-outline{color:transparent;-webkit-text-stroke:2px var(--fx-ink);font-weight:700}
.fx-text-outline.dark{-webkit-text-stroke-color:#fff}

/* 25 · Glitch text */
.fx-text-glitch{position:relative;color:var(--fx-ink)}
.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:var(--fx-orange);clip-path:polygon(0 0,100% 0,100% 45%,0 45%);transform:translate(-1px)}
.fx-text-glitch::after{color:var(--fx-navy);clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%);transform:translate(1px)}
.fx-text-glitch:hover::before{animation:fx-glitch1 .3s linear infinite}
.fx-text-glitch:hover::after{animation:fx-glitch2 .3s linear infinite}
@keyframes fx-glitch1{0%,100%{transform:translate(-1px)}50%{transform:translate(-3px,-2px)}}
@keyframes fx-glitch2{0%,100%{transform:translate(1px)}50%{transform:translate(3px,2px)}}

/* 26 · Word-by-word slide */
.fx-text-words .word{display:inline-block;opacity:0;transform:translateY(20px);transition:all .5s ease;transition-delay:calc(var(--fx-wi,0) * .08s)}
.fx-text-words.in .word{opacity:1;transform:translateY(0)}

/* 27 · Text underline reveal */
.fx-text-underline{position:relative;display:inline-block}
.fx-text-underline::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:var(--fx-orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--fx-ease-out)}
.fx-text-underline:hover::after,.fx-text-underline.in::after{transform:scaleX(1)}

/* 28 · Text marquee */
.fx-marquee{overflow:hidden;display:flex;gap:60px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fx-marquee>div{display:flex;gap:60px;animation:fx-marquee 20s linear infinite;flex-shrink:0}
@keyframes fx-marquee{to{transform:translateX(-50%)}}

/* 29 · Text 3d shadow */
.fx-text-3d{color:var(--fx-cream);text-shadow:1px 1px 0 var(--fx-orange),2px 2px 0 var(--fx-orange),3px 3px 0 var(--fx-navy),4px 4px 0 var(--fx-navy);font-weight:900}

/* 30 · Italic accent (Voces Jóvenes signature) */
.fx-italic-accent{font-family:'Fraunces',serif;font-style:italic;color:var(--fx-orange);font-weight:400}

/* ══════════════════════════════════════════════
   31-45 · BUTTONS
══════════════════════════════════════════════ */

/* 31 · Magnetic button (JS-enhanced) */
.fx-btn-mag{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--fx-orange);color:#fff;border-radius:30px;font-weight:600;cursor:pointer;border:none;transition:transform .25s var(--fx-ease-spring);font-family:inherit}

/* 32 · Ripple button (JS) */
.fx-btn-ripple{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--fx-navy);color:#fff;border-radius:10px;font-weight:600;cursor:pointer;border:none;font-family:inherit}
.fx-btn-ripple .fx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.4);transform:scale(0);animation:fx-ripple .6s linear;pointer-events:none}
@keyframes fx-ripple{to{transform:scale(4);opacity:0}}

/* 33 · Shine button */
.fx-btn-shine{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--fx-orange);color:#fff;border-radius:10px;font-weight:600;cursor:pointer;border:none;font-family:inherit}
.fx-btn-shine::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);transition:left .5s}
.fx-btn-shine:hover::before{left:100%}

/* 34 · Liquid button */
.fx-btn-liquid{position:relative;padding:12px 24px;background:var(--fx-navy);color:#fff;border-radius:30px;font-weight:600;cursor:pointer;border:none;overflow:hidden;font-family:inherit;transition:color .3s}
.fx-btn-liquid::before{content:"";position:absolute;width:0;height:300%;background:var(--fx-orange);left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);transition:width .5s var(--fx-ease-out);z-index:-1;border-radius:50%}
.fx-btn-liquid:hover::before{width:300%}
.fx-btn-liquid>*{position:relative;z-index:1}

/* 35 · Glow button */
.fx-btn-glow{padding:12px 24px;background:var(--fx-orange);color:#fff;border-radius:10px;font-weight:600;cursor:pointer;border:none;box-shadow:0 0 0 0 var(--fx-glow);transition:box-shadow .3s,transform .15s;font-family:inherit}
.fx-btn-glow:hover{box-shadow:0 0 20px 4px var(--fx-glow);transform:translateY(-2px)}

/* 36 · Border beam button */
.fx-btn-beam{position:relative;padding:12px 24px;background:var(--fx-navy);color:#fff;border-radius:10px;font-weight:600;cursor:pointer;border:none;overflow:hidden;font-family:inherit}
.fx-btn-beam::before{content:"";position:absolute;inset:-2px;background:conic-gradient(from var(--fx-a,0deg),transparent 0deg,var(--fx-orange) 60deg,transparent 120deg,transparent 360deg);animation:fx-beam 3s linear infinite;z-index:-1;border-radius:inherit}
.fx-btn-beam::after{content:"";position:absolute;inset:1.5px;background:var(--fx-navy);border-radius:9px;z-index:-1}
.fx-btn-beam>*{position:relative;z-index:1}
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fx-beam{to{--fx-a:360deg}}

/* 37 · Lift button */
.fx-btn-lift{padding:12px 24px;background:var(--fx-orange);color:#fff;border-radius:10px;font-weight:600;cursor:pointer;border:none;box-shadow:0 4px 0 #B83619;transition:all .12s var(--fx-ease-out);font-family:inherit}
.fx-btn-lift:hover{transform:translateY(-2px);box-shadow:0 6px 0 #B83619}
.fx-btn-lift:active{transform:translateY(2px);box-shadow:0 2px 0 #B83619}

/* 38 · Pulse button */
.fx-btn-pulse{padding:12px 24px;background:var(--fx-orange);color:#fff;border-radius:30px;font-weight:600;cursor:pointer;border:none;animation:fx-pulse-btn 2s ease infinite;font-family:inherit}
@keyframes fx-pulse-btn{0%,100%{box-shadow:0 0 0 0 rgba(230,71,34,0.6)}50%{box-shadow:0 0 0 14px rgba(230,71,34,0)}}

/* 39 · Outlined hover fill */
.fx-btn-outline{padding:12px 24px;background:transparent;color:var(--fx-orange);border:2px solid var(--fx-orange);border-radius:10px;font-weight:600;cursor:pointer;position:relative;overflow:hidden;font-family:inherit;z-index:0;transition:color .3s}
.fx-btn-outline::before{content:"";position:absolute;inset:0;background:var(--fx-orange);transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--fx-ease-out);z-index:-1}
.fx-btn-outline:hover{color:#fff}
.fx-btn-outline:hover::before{transform:scaleY(1)}

/* 40 · Underline reveal nav */
.fx-btn-link{position:relative;background:transparent;border:none;color:inherit;cursor:pointer;padding:6px 0;font-weight:500;font-family:inherit}
.fx-btn-link::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--fx-orange);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--fx-ease-out)}
.fx-btn-link:hover::after{transform:scaleX(1);transform-origin:left}

/* 41 · Icon slide button */
.fx-btn-icon{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--fx-navy);color:#fff;border-radius:10px;font-weight:600;cursor:pointer;border:none;overflow:hidden;font-family:inherit}
.fx-btn-icon span{display:inline-block;transition:transform .3s var(--fx-ease-out)}
.fx-btn-icon:hover span{transform:translateX(4px)}

/* 42 · 3D push button */
.fx-btn-3d{padding:12px 24px;background:linear-gradient(180deg,var(--fx-orange-soft),var(--fx-orange));color:#fff;border-radius:10px;font-weight:600;cursor:pointer;border:none;box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -3px 0 rgba(0,0,0,0.2),0 4px 8px rgba(0,0,0,0.2);transition:all .1s;font-family:inherit}
.fx-btn-3d:active{box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.2),0 1px 2px rgba(0,0,0,0.2);transform:translateY(2px)}

/* 43 · Toggle pill */
.fx-toggle{display:inline-flex;background:rgba(255,255,255,0.06);padding:4px;border-radius:30px;gap:2px;border:1px solid rgba(255,255,255,0.10)}
.fx-toggle button{padding:8px 16px;background:transparent;border:none;color:rgba(255,255,255,0.6);font-weight:600;cursor:pointer;border-radius:26px;transition:all .2s;font-family:inherit;font-size:13px}
.fx-toggle button.active{background:var(--fx-orange);color:#fff}

/* 44 · Floating action button (FAB) */
.fx-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--fx-orange);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(230,71,34,0.4);transition:all .25s var(--fx-ease-spring);z-index:100}
.fx-fab:hover{transform:scale(1.1) rotate(8deg)}

/* 45 · Skeumorphic button (Apple-style) */
.fx-btn-skeu{padding:12px 24px;background:linear-gradient(180deg,#fff,#f0f0f0);color:var(--fx-ink);border:1px solid rgba(0,0,0,0.15);border-radius:10px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0 1px 0 #fff;transition:all .12s;font-family:inherit}
.fx-btn-skeu:active{background:linear-gradient(180deg,#e5e5e5,#f0f0f0);box-shadow:inset 0 1px 3px rgba(0,0,0,0.1)}

/* ══════════════════════════════════════════════
   46-60 · CARDS
══════════════════════════════════════════════ */

/* 46 · Glassmorphism card */
.fx-card-glass{background:rgba(255,255,255,0.06);backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(255,255,255,0.10);border-radius:18px;padding:28px;box-shadow:0 12px 40px rgba(0,0,0,0.15)}

/* 47 · 3D tilt card (JS) */
.fx-card-tilt{transition:transform .25s var(--fx-ease-out);transform-style:preserve-3d;will-change:transform}

/* 48 · Border highlight card */
.fx-card-highlight{position:relative;background:#fff;border-radius:18px;padding:28px;border:1px solid rgba(0,0,0,0.06);overflow:hidden;transition:transform .25s,box-shadow .25s}
.fx-card-highlight::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(135deg,var(--fx-orange),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.fx-card-highlight:hover{transform:translateY(-4px);box-shadow:0 30px 60px -20px rgba(13,27,62,0.20)}
.fx-card-highlight:hover::before{opacity:1}

/* 49 · Spotlight card (JS — mouse follow) */
.fx-card-spot{position:relative;overflow:hidden;background:var(--fx-navy);color:#fff;border-radius:18px;padding:32px;border:1px solid rgba(255,255,255,0.10)}
.fx-card-spot::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(230,71,34,0.30),transparent 70%);left:var(--fx-mx,-100%);top:var(--fx-my,-100%);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .25s}
.fx-card-spot:hover::before{opacity:1}
.fx-card-spot>*{position:relative;z-index:1}

/* 50 · Hover expand card (Shift Card) */
.fx-card-shift{position:relative;background:var(--fx-cream);border-radius:14px;padding:24px;cursor:pointer;overflow:hidden;transition:transform .25s var(--fx-ease-spring);min-height:280px;display:flex;flex-direction:column;justify-content:flex-start}
.fx-card-shift:hover{transform:translateY(-4px) scale(1.02)}
.fx-card-shift .fx-shift-bottom{max-height:38px;overflow:hidden;transition:max-height .3s var(--fx-ease-out);margin-top:auto}
.fx-card-shift:hover .fx-shift-bottom{max-height:200px}

/* 51 · Texture card (layered borders) */
.fx-card-tex{padding:4px;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#f5f5f5 100%);border:1px solid rgba(0,0,0,0.10)}
.fx-card-tex-inner{padding:24px;background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(0,0,0,0.04)}

/* 52 · Cutout card (corner notches) */
.fx-card-cutout{position:relative;background:#fff;border-radius:24px;padding:28px;overflow:hidden}
.fx-card-cutout::before,.fx-card-cutout::after{content:"";position:absolute;width:32px;height:32px;background:var(--fx-orange);border-radius:24px}
.fx-card-cutout::before{top:0;right:0;clip-path:path("M0 32C18 32 32 18 32 0V32H0Z")}
.fx-card-cutout::after{bottom:0;left:0;clip-path:path("M32 0C14 0 0 14 0 32V0H32Z")}

/* 53 · Image hover zoom card */
.fx-card-zoom{border-radius:18px;overflow:hidden;cursor:pointer;background:var(--fx-navy)}
.fx-card-zoom .fx-img{aspect-ratio:16/10;overflow:hidden}
.fx-card-zoom img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--fx-ease-out)}
.fx-card-zoom:hover img{transform:scale(1.08)}
.fx-card-zoom .fx-body{padding:20px;color:#fff}

/* 54 · Pricing card with glow */
.fx-card-price{background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:18px;padding:32px;text-align:center;transition:all .3s}
.fx-card-price.featured{background:var(--fx-navy);color:#fff;border-color:var(--fx-orange);box-shadow:0 0 40px -10px var(--fx-glow);transform:scale(1.05)}

/* 55 · Bento card */
.fx-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:140px;gap:14px}
.fx-bento>*{background:#fff;border-radius:16px;padding:22px;border:1px solid rgba(0,0,0,0.05);overflow:hidden}
.fx-bento>.x2{grid-column:span 2}
.fx-bento>.y2{grid-row:span 2}
.fx-bento>.x3{grid-column:span 3}

/* 56 · Caption slide card */
.fx-card-caption{position:relative;border-radius:14px;overflow:hidden;cursor:pointer}
.fx-card-caption img{width:100%;display:block;transition:transform .5s var(--fx-ease-out)}
.fx-card-caption .fx-cap{position:absolute;left:0;right:0;bottom:-100%;padding:18px;background:linear-gradient(to top,rgba(13,27,62,0.95),transparent);color:#fff;transition:bottom .35s var(--fx-ease-out)}
.fx-card-caption:hover img{transform:scale(1.05)}
.fx-card-caption:hover .fx-cap{bottom:0}

/* 57 · Feature card with badge */
.fx-card-feature{position:relative;background:#fff;border:1px solid rgba(0,0,0,0.06);border-radius:14px;padding:24px}
.fx-card-feature .fx-badge{position:absolute;top:12px;right:12px;background:var(--fx-orange);color:#fff;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:20px;font-weight:700}

/* 58 · Stacked cards */
.fx-stack{position:relative;width:300px;height:200px}
.fx-stack>*{position:absolute;inset:0;background:#fff;border-radius:14px;border:1px solid rgba(0,0,0,0.08);box-shadow:0 4px 12px rgba(0,0,0,0.06);transition:all .3s var(--fx-ease-out)}
.fx-stack>*:nth-child(1){transform:rotate(-3deg) translateX(-4px)}
.fx-stack>*:nth-child(2){transform:rotate(2deg) translateX(2px)}
.fx-stack>*:nth-child(3){transform:rotate(0deg)}
.fx-stack:hover>*:nth-child(1){transform:rotate(-8deg) translateX(-20px)}
.fx-stack:hover>*:nth-child(2){transform:rotate(6deg) translateX(20px)}

/* 59 · Reveal-on-hover overlay card */
.fx-card-reveal{position:relative;border-radius:14px;overflow:hidden;cursor:pointer}
.fx-card-reveal img{width:100%;display:block}
.fx-card-reveal .fx-overlay{position:absolute;inset:0;background:rgba(13,27,62,0.92);color:#fff;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .35s}
.fx-card-reveal:hover .fx-overlay{opacity:1}

/* 60 · Hero panel (gradient mesh BG) */
.fx-hero-panel{position:relative;background:linear-gradient(135deg,var(--fx-navy),var(--fx-orange));border-radius:24px;padding:60px 40px;overflow:hidden;color:#fff;isolation:isolate}
.fx-hero-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 80% 0%,rgba(255,255,255,0.15),transparent 60%);z-index:-1}

/* ══════════════════════════════════════════════
   61-72 · MODALS / POPOVERS
══════════════════════════════════════════════ */

/* 61 · Modal with backdrop blur */
.fx-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;z-index:9999;padding:24px}
.fx-modal-overlay.show{display:flex;animation:fx-fadein .25s ease}
.fx-modal{background:linear-gradient(165deg,rgba(35,53,108,0.88),rgba(13,27,62,0.94));backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,0.12);border-radius:24px;padding:32px;max-width:520px;width:100%;color:#fff;animation:fx-modal-in .35s var(--fx-ease-spring)}
@keyframes fx-fadein{from{opacity:0}to{opacity:1}}
@keyframes fx-modal-in{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* 62 · Bottom sheet (mobile) */
.fx-sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:32px 24px;transform:translateY(100%);transition:transform .35s var(--fx-ease-spring);box-shadow:0 -10px 40px rgba(0,0,0,0.2);z-index:9999;max-height:80vh;overflow-y:auto}
.fx-sheet.show{transform:translateY(0)}
.fx-sheet::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;background:rgba(0,0,0,0.2);border-radius:2px;transform:translateX(-50%)}

/* 63 · Toast morph */
.fx-toast{position:fixed;bottom:24px;right:24px;background:rgba(20,38,84,0.95);backdrop-filter:blur(20px);color:#fff;padding:14px 22px;border-radius:12px;border:1px solid rgba(255,255,255,0.10);box-shadow:0 12px 30px rgba(0,0,0,0.3);animation:fx-toast-in .3s var(--fx-ease-spring);z-index:99999;border-left:3px solid var(--fx-orange);font-weight:500}
@keyframes fx-toast-in{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}

/* 64 · Dropdown with tail */
.fx-dropdown{position:absolute;background:#fff;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,0.15);padding:6px;min-width:160px;animation:fx-drop .15s ease;border:1px solid rgba(0,0,0,0.08)}
.fx-dropdown::before{content:"";position:absolute;top:-6px;left:20px;width:12px;height:12px;background:#fff;transform:rotate(45deg);border-top:1px solid rgba(0,0,0,0.08);border-left:1px solid rgba(0,0,0,0.08)}
.fx-dropdown .item{padding:9px 14px;cursor:pointer;border-radius:7px;font-size:14px;transition:background .12s}
.fx-dropdown .item:hover{background:rgba(230,71,34,0.08);color:var(--fx-orange)}
@keyframes fx-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* 65 · Tooltip animated */
.fx-tooltip{position:relative;display:inline-block}
.fx-tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--fx-navy);color:#fff;padding:6px 12px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s}
.fx-tooltip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* 66 · Command palette */
.fx-cmd{background:rgba(13,27,62,0.95);backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:6px;color:#fff;max-width:560px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,0.4)}
.fx-cmd input{width:100%;background:transparent;border:none;padding:14px;color:#fff;font-size:15px;outline:none;border-bottom:1px solid rgba(255,255,255,0.10);font-family:inherit}
.fx-cmd .item{padding:10px 14px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px}
.fx-cmd .item:hover,.fx-cmd .item[aria-selected="true"]{background:rgba(255,255,255,0.06)}

/* 67 · Drawer slide (left) */
.fx-drawer{position:fixed;top:0;left:0;bottom:0;width:320px;background:#fff;box-shadow:6px 0 30px rgba(0,0,0,0.15);transform:translateX(-100%);transition:transform .35s var(--fx-ease-out);z-index:999;padding:24px}
.fx-drawer.show{transform:translateX(0)}

/* 68 · Floating panel */
.fx-floatpanel{background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,0.15);overflow:hidden;animation:fx-floatpanel-in .35s var(--fx-ease-spring);border:1px solid rgba(0,0,0,0.06)}
@keyframes fx-floatpanel-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}

/* 69 · Morph surface (collapsed → expanded) */
.fx-morph{background:#fff;border-radius:30px;padding:8px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all .35s var(--fx-ease-spring);border:1px solid rgba(0,0,0,0.08);font-weight:600;color:var(--fx-ink)}
.fx-morph.expanded{border-radius:14px;padding:18px;width:360px;height:200px;align-items:flex-start;flex-direction:column;background:rgba(20,38,84,0.95);color:#fff}

/* 70 · Confirmation dialog (success) */
.fx-confirm-success{background:#fff;border:2px solid var(--fx-orange);border-radius:16px;padding:24px;text-align:center;animation:fx-modal-in .4s var(--fx-ease-spring)}
.fx-confirm-success .check{width:60px;height:60px;border-radius:50%;background:rgba(34,197,94,0.15);color:#22c55e;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 14px}

/* 71 · Notification banner */
.fx-banner{background:linear-gradient(135deg,var(--fx-navy),var(--fx-orange));color:#fff;padding:14px 24px;text-align:center;font-weight:500;display:flex;justify-content:center;align-items:center;gap:14px;font-size:14px}
.fx-banner button{background:rgba(255,255,255,0.2);border:none;color:#fff;padding:6px 14px;border-radius:20px;cursor:pointer;font-weight:600;font-family:inherit}

/* 72 · Picker (slot) */
.fx-picker{background:#fff;border-radius:12px;padding:14px;box-shadow:0 12px 30px rgba(0,0,0,0.10);border:1px solid rgba(0,0,0,0.06);display:inline-flex;gap:6px;flex-wrap:wrap}
.fx-picker .swatch{width:28px;height:28px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all .15s}
.fx-picker .swatch.active{border-color:var(--fx-orange);transform:scale(1.1)}

/* ══════════════════════════════════════════════
   73-82 · LOADERS
══════════════════════════════════════════════ */

/* 73 · Spinner ring */
.fx-spinner{display:inline-block;width:24px;height:24px;border:3px solid rgba(255,255,255,0.2);border-top-color:var(--fx-orange);border-radius:50%;animation:fx-spin 1s linear infinite}

/* 74 · Dots pulse */
.fx-dots{display:inline-flex;gap:6px}
.fx-dots span{width:10px;height:10px;background:var(--fx-orange);border-radius:50%;animation:fx-bounce 1.4s ease infinite}
.fx-dots span:nth-child(2){animation-delay:.16s}
.fx-dots span:nth-child(3){animation-delay:.32s}
@keyframes fx-bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

/* 75 · Skeleton shimmer */
.fx-skel{background:linear-gradient(90deg,#e5e7eb 0%,#f3f4f6 50%,#e5e7eb 100%);background-size:200% 100%;animation:fx-skel 1.5s ease-in-out infinite;border-radius:6px}
@keyframes fx-skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 76 · Progress bar gradient */
.fx-progress{background:rgba(0,0,0,0.08);height:6px;border-radius:3px;overflow:hidden}
.fx-progress .bar{height:100%;background:linear-gradient(90deg,var(--fx-orange),var(--fx-orange-soft));border-radius:3px;transition:width .3s var(--fx-ease-out);position:relative}
.fx-progress .bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:fx-shimmer 2s linear infinite}
@keyframes fx-shimmer{to{transform:translateX(100%)}}

/* 77 · Step loader */
.fx-steps{display:inline-flex;gap:8px}
.fx-steps span{width:24px;height:4px;background:rgba(0,0,0,0.1);border-radius:2px;transition:background .2s}
.fx-steps span.active{background:var(--fx-orange)}

/* 78 · Circular progress */
.fx-circle{width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--fx-orange) calc(var(--fx-p,0) * 1%),rgba(0,0,0,0.08) 0);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--fx-orange);font-size:14px;font-family:'Space Mono',monospace}
.fx-circle::before{content:"";position:absolute;width:48px;height:48px;background:#fff;border-radius:50%;z-index:0}
.fx-circle{position:relative}
.fx-circle>span{position:relative;z-index:1}

/* 79 · Wave loader */
.fx-wave-load{display:inline-flex;gap:3px;align-items:center;height:24px}
.fx-wave-load span{width:3px;height:100%;background:var(--fx-orange);border-radius:2px;animation:fx-wave 1.2s ease infinite}
.fx-wave-load span:nth-child(2){animation-delay:.1s}
.fx-wave-load span:nth-child(3){animation-delay:.2s}
.fx-wave-load span:nth-child(4){animation-delay:.3s}
.fx-wave-load span:nth-child(5){animation-delay:.4s}
@keyframes fx-wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* 80 · Bars loader */
.fx-bars{display:inline-flex;gap:4px}
.fx-bars span{width:6px;height:30px;background:var(--fx-orange);border-radius:2px;animation:fx-bars 1s ease infinite}
.fx-bars span:nth-child(2){animation-delay:.1s}
.fx-bars span:nth-child(3){animation-delay:.2s}
.fx-bars span:nth-child(4){animation-delay:.3s}
@keyframes fx-bars{0%,100%{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* 81 · Loading text */
.fx-load-text{display:inline-flex;align-items:center;gap:8px;color:var(--fx-orange);font-weight:600;font-family:'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.fx-load-text::after{content:"...";display:inline-block;animation:fx-ellipsis 1.4s steps(4) infinite;width:20px;text-align:left}
@keyframes fx-ellipsis{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* 82 · Page transition fade */
.fx-page-trans{opacity:0;animation:fx-page-fade .5s var(--fx-ease-out) forwards}
@keyframes fx-page-fade{to{opacity:1}}

/* ══════════════════════════════════════════════
   83-92 · NAVIGATION
══════════════════════════════════════════════ */

/* 83 · Floating nav with blur */
.fx-nav-float{position:sticky;top:18px;background:rgba(255,255,255,0.85);backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(0,0,0,0.08);border-radius:30px;padding:10px 24px;display:inline-flex;align-items:center;gap:24px;box-shadow:0 12px 30px rgba(0,0,0,0.08);z-index:100}

/* 84 · Tab indicator slide */
.fx-tabs{display:inline-flex;background:rgba(0,0,0,0.04);padding:4px;border-radius:10px;position:relative}
.fx-tabs button{padding:8px 18px;background:transparent;border:none;cursor:pointer;font-weight:600;font-size:13px;color:var(--fx-ink);font-family:inherit;border-radius:7px;transition:color .2s;position:relative;z-index:1}
.fx-tabs button.active{color:#fff}
.fx-tabs .indicator{position:absolute;background:var(--fx-orange);border-radius:7px;transition:all .35s var(--fx-ease-spring);z-index:0}

/* 85 · Sticky nav with progress */
.fx-nav-progress{position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);padding:14px 24px;border-bottom:1px solid rgba(0,0,0,0.06);z-index:100}
.fx-nav-progress .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--fx-orange);width:var(--fx-scroll,0%);transition:width .1s}

/* 86 · Sidebar with sections */
.fx-side{padding:18px;background:var(--fx-navy);color:#fff;width:240px;height:100vh}
.fx-side .sec{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,0.4);margin:18px 0 8px;font-weight:700}
.fx-side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:7px;font-size:13px;color:rgba(255,255,255,0.7);transition:all .15s}
.fx-side a:hover{background:rgba(255,255,255,0.06);color:#fff}
.fx-side a.active{background:var(--fx-orange);color:#fff;font-weight:600}

/* 87 · Bottom nav (mobile) */
.fx-bottomnav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid rgba(0,0,0,0.06);display:flex;justify-content:space-around;padding:10px 0 14px;padding-bottom:max(14px,env(safe-area-inset-bottom));z-index:100}
.fx-bottomnav a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--fx-ink);opacity:.5;transition:opacity .2s;padding:6px 12px;border-radius:8px}
.fx-bottomnav a.active{opacity:1;color:var(--fx-orange)}
.fx-bottomnav svg{width:22px;height:22px}

/* 88 · Breadcrumb morph */
.fx-crumbs{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fx-ink)}
.fx-crumbs a{opacity:.6;transition:opacity .15s}
.fx-crumbs a:hover{opacity:1;color:var(--fx-orange)}
.fx-crumbs .sep{opacity:.3}

/* 89 · Stepper */
.fx-stepper{display:flex;align-items:center;gap:8px}
.fx-stepper .step{display:flex;align-items:center;gap:8px}
.fx-stepper .num{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,0.08);color:var(--fx-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;transition:all .25s}
.fx-stepper .step.active .num{background:var(--fx-orange);color:#fff}
.fx-stepper .step.done .num{background:#22c55e;color:#fff}
.fx-stepper .line{width:30px;height:2px;background:rgba(0,0,0,0.08)}

/* 90 · Gradient button group (well/recessed) */
.fx-btn-group{display:inline-flex;background:linear-gradient(180deg,#1c1c1f,#131316);border-radius:24px;padding:6px;gap:3px;box-shadow:inset 0 2px 6px rgba(0,0,0,0.6),inset 0 1px 2px rgba(0,0,0,0.4)}
.fx-btn-group button{width:60px;height:60px;background:transparent;border:none;border-radius:18px;color:rgba(255,255,255,0.4);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:color .2s}
.fx-btn-group button.active{background:linear-gradient(180deg,#0a0a0c 0%,#0e0e10 50%,#0c0c0e 100%);box-shadow:inset 0 2px 6px rgba(0,0,0,0.9);color:#fff}
.fx-btn-group button:hover:not(.active){color:rgba(255,255,255,0.7)}

/* 91 · Pill nav */
.fx-pill-nav{display:inline-flex;background:rgba(0,0,0,0.04);padding:4px;border-radius:30px;gap:4px}
.fx-pill-nav a{padding:8px 18px;border-radius:30px;font-size:13px;font-weight:600;color:var(--fx-ink);transition:all .2s;opacity:.6}
.fx-pill-nav a.active,.fx-pill-nav a:hover{background:#fff;opacity:1;box-shadow:0 2px 8px rgba(0,0,0,0.06)}

/* 92 · Scroll-snap nav */
.fx-snapnav{display:flex;overflow-x:auto;gap:14px;padding:6px 0;scroll-snap-type:x mandatory;scrollbar-width:none}
.fx-snapnav::-webkit-scrollbar{display:none}
.fx-snapnav>a{scroll-snap-align:start;flex-shrink:0;padding:8px 18px;background:rgba(0,0,0,0.06);border-radius:30px;font-size:13px;font-weight:600;color:var(--fx-ink);white-space:nowrap}

/* ══════════════════════════════════════════════
   93-100 · MEDIA / VISUAL
══════════════════════════════════════════════ */

/* 93 · Browser window mockup */
.fx-browser{border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,0.10);background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,0.25)}
.fx-browser .bar{padding:12px 16px;border-bottom:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#fafafa,#f0f0f0)}
.fx-browser .dots{display:flex;gap:6px}
.fx-browser .dots span{width:12px;height:12px;border-radius:50%;background:#ddd}
.fx-browser .dots span:nth-child(1){background:#ff5f56}
.fx-browser .dots span:nth-child(2){background:#ffbd2e}
.fx-browser .dots span:nth-child(3){background:#27c93f}
.fx-browser .url{flex:1;background:#fff;padding:6px 14px;border-radius:14px;font-size:12px;color:#666;font-family:'Space Mono',monospace;text-align:center;border:1px solid rgba(0,0,0,0.06)}

/* 94 · iPhone frame */
.fx-iphone{width:380px;background:linear-gradient(180deg,#1a1a1a,#0a0a0a);border-radius:54px;padding:14px;box-shadow:0 50px 120px -30px rgba(0,0,0,0.8),0 0 0 2px #333 inset}
.fx-iphone-screen{background:#000;border-radius:42px;overflow:hidden;position:relative;min-height:600px}
.fx-iphone-screen::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:108px;height:32px;background:#000;border-radius:18px;z-index:5;box-shadow:0 0 0 .5px #1a1a1a}

/* 95 · Image marquee */
.fx-img-marquee{overflow:hidden;display:flex;gap:14px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.fx-img-marquee>div{display:flex;gap:14px;animation:fx-marquee 30s linear infinite;flex-shrink:0}

/* 96 · Lightbox */
.fx-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:none;align-items:center;justify-content:center;padding:30px;cursor:zoom-out;z-index:99999}
.fx-lightbox.show{display:flex;animation:fx-fadein .3s ease}
.fx-lightbox img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:8px}

/* 97 · Image compare slider (JS) */
.fx-compare{position:relative;overflow:hidden;border-radius:14px;cursor:ew-resize}
.fx-compare .after{position:absolute;inset:0;clip-path:polygon(var(--fx-pos,50%) 0,100% 0,100% 100%,var(--fx-pos,50%) 100%)}
.fx-compare .handle{position:absolute;top:0;bottom:0;left:var(--fx-pos,50%);width:3px;background:var(--fx-orange);transform:translateX(-50%)}
.fx-compare .handle::before{content:"⇔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--fx-orange);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}

/* 98 · Polaroid stack */
.fx-polaroid{display:inline-block;background:#fff;padding:14px 14px 32px;border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,0.12);transform:rotate(-2deg);transition:transform .35s var(--fx-ease-spring)}
.fx-polaroid:hover{transform:rotate(0deg) scale(1.05)}
.fx-polaroid img{width:240px;height:240px;object-fit:cover;display:block}
.fx-polaroid .caption{padding-top:14px;font-family:'Caveat',cursive;text-align:center;color:#444}

/* 99 · Avatar group */
.fx-avatars{display:inline-flex}
.fx-avatars .av{width:36px;height:36px;border-radius:50%;border:2px solid #fff;background:var(--fx-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;margin-left:-10px;overflow:hidden;transition:transform .2s}
.fx-avatars .av:first-child{margin-left:0}
.fx-avatars .av:hover{transform:translateY(-3px) scale(1.1);z-index:10}
.fx-avatars .av img{width:100%;height:100%;object-fit:cover}

/* 100 · Logo cycle (JS auto-rotate) */
.fx-logo-cycle{height:80px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
.fx-logo-cycle img{position:absolute;height:60px;opacity:0;animation:fx-logo-fade 12s linear infinite;filter:grayscale(1)}
.fx-logo-cycle img:nth-child(1){animation-delay:0s}
.fx-logo-cycle img:nth-child(2){animation-delay:3s}
.fx-logo-cycle img:nth-child(3){animation-delay:6s}
.fx-logo-cycle img:nth-child(4){animation-delay:9s}
@keyframes fx-logo-fade{0%,8%,100%{opacity:0;transform:translateY(20px)}10%,23%{opacity:1;transform:translateY(0)}25%,33%{opacity:0;transform:translateY(-20px)}}

/* ══════════════════════════════════════════════
   UTILITY: reveal on scroll trigger
══════════════════════════════════════════════ */
.fx-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--fx-ease-out),transform .8s var(--fx-ease-out)}
.fx-reveal.in{opacity:1;transform:translateY(0)}
.fx-reveal.delay-1{transition-delay:.1s}
.fx-reveal.delay-2{transition-delay:.2s}
.fx-reveal.delay-3{transition-delay:.3s}
.fx-reveal.delay-4{transition-delay:.4s}

/* Reduce motion respects */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}