/* Storefront effects shared by every theme (loaded by resources/views/frontend/fx.blade.php).
   Turned on per theme in Admin → Theme Settings → Animations:
     html[data-fx-btn]    = lift | ripple | glow | shake | bounce | neon | gradient (cart / buy / checkout, .fx-btn)
     html[data-fx-card]   = zoom | zoom_out | zoom_rotate | zoom_pan | parallax | color_pop |
                            swap | slide_swap | blur_swap | flip | slideshow     (card image on hover)
     html[data-fx-motion] = lift | scale | float | tilt | glow | border_draw | shadow_pop (whole card)
     html[data-fx-reveal] = fade_up | zoom_in | slide | slide_alt | flip_up | blur_in | pop (on scroll)
   fx.js tags the elements; nothing here applies until it does. */

/* ---------- buttons ----------
   Idle (always running, staggered per button by --fx-d): a light sweep every few seconds;
   glow adds a breathing ring. Hover swaps that for a different motion: lift + shadow, a quick
   sweep and the icon nudging forward. Press: squeeze, ripple, then a small pop. */
html[data-fx-btn] .fx-btn {
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, filter .22s ease;
  -webkit-tap-highlight-color: transparent;
}
html[data-fx-btn] .fx-rel { position: relative; }
html[data-fx-btn] .fx-clip { overflow: hidden; isolation: isolate; }

/* light sweep: idle loop, replaced by one fast sweep on hover */
.fx-shine {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .42) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: fx-sweep 4.2s cubic-bezier(.4, 0, .2, 1) var(--fx-d, 0s) infinite;
}
@keyframes fx-sweep { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }

/* <input type="submit"> can't hold the sweep layer: it breathes instead */
html:is([data-fx-btn="lift"], [data-fx-btn="ripple"]) input.fx-btn:not(:disabled):not(.is-loading):not(.is-added) { animation: fx-breathe 3.2s ease-in-out var(--fx-d, 0s) infinite; }
@keyframes fx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* glow: every button breathes a soft ring, the main buy / confirm one a stronger one */
html[data-fx-btn="glow"] .fx-btn:not(:disabled):not(.is-loading):not(.is-added) { animation: fx-glow 3s ease-out var(--fx-d, 0s) infinite; }
html[data-fx-btn="glow"] .fx-cta:not(:disabled):not(.is-loading):not(.is-added) { animation: fx-glow-strong 2.4s ease-out var(--fx-d, 0s) infinite; }
@keyframes fx-glow { 0% { box-shadow: 0 0 0 0 var(--fx-c, rgb(242 92 5 / .45)); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes fx-glow-strong { 0% { box-shadow: 0 0 0 0 var(--fx-c, rgb(242 92 5 / .6)); } 60%, 100% { box-shadow: 0 0 0 13px transparent; } }

@media (hover: hover) {
  html[data-fx-btn] .fx-btn:hover:not(:disabled):not(.is-added) {
    animation: none;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -8px var(--fx-c, rgb(0 0 0 / .45));
    filter: brightness(1.05) saturate(1.08);
  }
  html[data-fx-btn] .fx-btn:hover .fx-shine { animation: fx-sweep-once .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  html[data-fx-btn] .fx-btn:hover:not(:disabled):not(.is-loading) > svg,
  html[data-fx-btn] .fx-btn:hover:not(:disabled):not(.is-loading) > i { animation: fx-nudge .55s ease-in-out infinite alternate; }
}
@keyframes fx-sweep-once { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes fx-nudge { from { transform: translateX(0) rotate(0); } to { transform: translateX(3px) rotate(-8deg); } }
html[data-fx-btn] .fx-btn:active:not(:disabled) { animation: none; transform: translateY(0) scale(.96); box-shadow: none; transition-duration: .08s; }

/* shake / bounce: an attention nudge every few seconds */
html[data-fx-btn="shake"] .fx-btn:not(:disabled):not(.is-loading):not(.is-added) { animation: fx-shake 4s ease-in-out var(--fx-d, 0s) infinite; }
@keyframes fx-shake { 0%, 84%, 100% { transform: none; } 86% { transform: rotate(-3deg) scale(1.03); } 89% { transform: rotate(3deg) scale(1.03); } 92% { transform: rotate(-2deg); } 95% { transform: rotate(1.5deg); } }
html[data-fx-btn="bounce"] .fx-btn:not(:disabled):not(.is-loading):not(.is-added) { animation: fx-bounce 3.4s cubic-bezier(.3, 1.4, .5, 1) var(--fx-d, 0s) infinite; }
@keyframes fx-bounce { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-6px); } 86% { transform: translateY(0); } 91% { transform: translateY(-2px); } }

/* neon: a coloured glow that breathes */
html[data-fx-btn="neon"] .fx-btn:not(:disabled):not(.is-loading):not(.is-added) { animation: fx-neon 2.6s ease-in-out var(--fx-d, 0s) infinite; }
@keyframes fx-neon {
  0%, 100% { box-shadow: 0 0 0 1px var(--fx-c, rgb(242 92 5 / .5)), 0 0 6px 0 var(--fx-c, rgb(242 92 5 / .5)); }
  50% { box-shadow: 0 0 0 1px var(--fx-c, rgb(242 92 5 / .5)), 0 0 22px 4px var(--fx-c, rgb(242 92 5 / .5)); }
}

/* gradient: a soft colour band keeps flowing across the button */
html[data-fx-btn="gradient"] .fx-shine {
  background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / .28) 25%, transparent 50%, rgb(255 255 255 / .18) 75%, transparent 100%);
  background-size: 200% 100%; transform: none;
  animation: fx-flow 2.8s linear infinite;
}
@keyframes fx-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (hover: hover) { html[data-fx-btn="gradient"] .fx-btn:hover .fx-shine { animation: fx-flow .9s linear infinite; } }

/* ripple from the press point (every style except lift) */
.fx-ripple {
  position: absolute; z-index: 1; pointer-events: none; border-radius: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: rgb(255 255 255 / .5);
  animation: fx-ripple .6s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes fx-ripple { from { transform: scale(0); opacity: .9; } to { transform: scale(var(--fx-r, 30)); opacity: 0; } }

/* confirmation pop after a press */
html[data-fx-btn] .fx-btn.fx-pop:not(:disabled):not(.fx-x) { animation: fx-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fx-pop { 0% { transform: scale(.94); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ---------- product card images ---------- */
html[data-fx-card] .fx-media { overflow: hidden; }
html[data-fx-card] .fx-media.fx-rel { position: relative; }
html[data-fx-card] .fx-media.fx-blk { display: block; }
html[data-fx-card] .fx-media img.fx-base { transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; transform-origin: center; }

html[data-fx-card="zoom"] .fx-card:hover .fx-media img,
html[data-fx-card="swap"] .fx-card.fx-single:hover .fx-media img,
html[data-fx-card="slideshow"] .fx-card.fx-single:hover .fx-media img { transform: scale(1.09); }
html[data-fx-card="zoom_rotate"] .fx-card:hover .fx-media img { transform: scale(1.12) rotate(2.5deg); }

/* swap / slideshow: extra images stacked over the main one */
.fx-alt {
  position: absolute; z-index: 1; margin: 0; pointer-events: none;
  opacity: 0; transform: scale(1.04);
  transition: opacity .45s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.fx-alt.is-on { opacity: 1; transform: scale(1); }
html[data-fx-card] .fx-card.fx-swapping .fx-media img.fx-base { opacity: 0; transform: scale(1.04); }

.fx-dots {
  position: absolute; z-index: 2; left: 50%; bottom: 8px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px 6px; border-radius: 999px; background: rgb(0 0 0 / .35);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.fx-card:hover .fx-dots { opacity: 1; }
.fx-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / .55); transition: width .25s ease, background .25s ease; }
.fx-dots i.is-on { width: 14px; border-radius: 3px; background: #fff; }

html[data-fx-card="zoom_pan"] .fx-card:hover .fx-media img { transform: scale(1.7); transition: transform .35s ease-out; }

/* flip: the card image turns over to show the next one */
html[data-fx-card="flip"] .fx-media { perspective: 900px; }
html[data-fx-card="flip"] .fx-media img.fx-base, html[data-fx-card="flip"] .fx-alt { backface-visibility: hidden; transition: transform .7s cubic-bezier(.4, .2, .2, 1), opacity 0s linear .35s; }
html[data-fx-card="flip"] .fx-alt { opacity: 0; transform: rotateY(-180deg); }
html[data-fx-card="flip"] .fx-alt.is-on { opacity: 1; transform: rotateY(0); transition-delay: 0s; }
html[data-fx-card="flip"] .fx-card.fx-swapping .fx-media img.fx-base { opacity: 1; transform: rotateY(180deg); }
html[data-fx-card="flip"] .fx-card.fx-single:hover .fx-media img { transform: scale(1.09); }

/* ---------- whole card on hover ---------- */
html[data-fx-motion] .fx-mcard { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
html[data-fx-motion="lift"] .fx-mcard:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -16px rgb(15 23 42 / .35); z-index: 2; }
html[data-fx-motion="glow"] .fx-mcard:hover { transform: translateY(-4px); z-index: 2;
  box-shadow: 0 0 0 2px var(--fx-accent, #F25C05), 0 14px 34px -10px color-mix(in srgb, var(--fx-accent, #F25C05) 55%, transparent); }
html[data-fx-motion="tilt"] .fx-mcard { transition: transform .18s ease-out, box-shadow .35s ease; transform-style: preserve-3d; will-change: transform; }
html[data-fx-motion="tilt"] .fx-mcard:hover { box-shadow: 0 22px 40px -18px rgb(15 23 42 / .4); z-index: 2; }
.fx-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--fx-gx, 50%) var(--fx-gy, 0%), rgb(255 255 255 / .35), transparent 55%);
  transition: opacity .3s ease;
}
.fx-mcard:hover .fx-glare { opacity: 1; }

/* ---------- scroll reveal ---------- */
html[data-fx-reveal] .fx-reveal { opacity: 0; transition: opacity .6s ease var(--fx-rd, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--fx-rd, 0ms); }
html[data-fx-reveal="fade_up"] .fx-reveal { transform: translateY(28px); }
html[data-fx-reveal="zoom_in"] .fx-reveal { transform: scale(.92); }
html[data-fx-reveal="slide"] .fx-reveal { transform: translateX(-24px) rotate(-1deg); }
html[data-fx-reveal] .fx-reveal.is-in { opacity: 1; transform: none; }

/* ---------- more image hovers ---------- */
html[data-fx-card="zoom_out"] .fx-media img.fx-base { transform: scale(1.12); }
html[data-fx-card="zoom_out"] .fx-card:hover .fx-media img.fx-base { transform: scale(1); }
html[data-fx-card="parallax"] .fx-media img.fx-base { transition: transform .25s ease-out; }
html[data-fx-card="color_pop"] .fx-card:hover .fx-media img { transform: scale(1.06); filter: saturate(1.4) contrast(1.08) brightness(1.04); }
html[data-fx-card="color_pop"] .fx-media img.fx-base { transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s ease; }
html[data-fx-card="slide_swap"] .fx-alt { opacity: 1; transform: translateX(100%); }
html[data-fx-card="slide_swap"] .fx-alt.is-on { transform: none; }
html[data-fx-card="slide_swap"] .fx-card.fx-swapping .fx-media img.fx-base { opacity: 1; transform: translateX(-35%); }
html[data-fx-card="blur_swap"] .fx-alt { filter: blur(10px); transform: scale(1.1); transition: opacity .5s ease, transform .7s ease, filter .6s ease; }
html[data-fx-card="blur_swap"] .fx-alt.is-on { filter: none; transform: none; }
html[data-fx-card="blur_swap"] .fx-card.fx-swapping .fx-media img.fx-base { filter: blur(8px); }
html[data-fx-card="slide_swap"] .fx-card.fx-single:hover .fx-media img,
html[data-fx-card="blur_swap"] .fx-card.fx-single:hover .fx-media img { transform: scale(1.09); }

/* ---------- more card motions ---------- */
html[data-fx-motion="scale"] .fx-mcard:hover { transform: scale(1.035); box-shadow: 0 16px 32px -18px rgb(15 23 42 / .35); z-index: 2; }
html[data-fx-motion="float"] .fx-mcard:hover { animation: fx-float 2.2s ease-in-out infinite; box-shadow: 0 20px 34px -20px rgb(15 23 42 / .4); z-index: 2; }
@keyframes fx-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-10px); } }
html[data-fx-motion="shadow_pop"] .fx-mcard:hover { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 0 var(--fx-accent, #F25C05); z-index: 2; }
@property --fx-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fx-ring {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 2px; opacity: 0;
  background: conic-gradient(from var(--fx-a), var(--fx-accent, #F25C05), transparent 25%, transparent 50%, var(--fx-accent, #F25C05) 75%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .3s ease;
}
html[data-fx-motion="border_draw"] .fx-mcard:hover { transform: translateY(-3px); z-index: 2; }
html[data-fx-motion="border_draw"] .fx-mcard:hover .fx-ring { opacity: 1; animation: fx-spin 2.4s linear infinite; }
@keyframes fx-spin { to { --fx-a: 360deg; } }

/* ---------- more scroll reveals ---------- */
html[data-fx-reveal="slide_alt"] .fx-reveal { transform: translateX(var(--fx-sx, -32px)); }
html[data-fx-reveal="flip_up"] .fx-reveal { transform: perspective(800px) rotateX(-28deg) translateY(30px); transform-origin: 50% 100%; }
html[data-fx-reveal="blur_in"] .fx-reveal { filter: blur(10px); transform: scale(1.03); transition: opacity .6s ease var(--fx-rd, 0ms), transform .7s ease var(--fx-rd, 0ms), filter .6s ease var(--fx-rd, 0ms); }
html[data-fx-reveal="blur_in"] .fx-reveal.is-in { filter: none; }
html[data-fx-reveal="pop"] .fx-reveal { transform: scale(.8); transition: opacity .4s ease var(--fx-rd, 0ms), transform .65s cubic-bezier(.3, 1.6, .5, 1) var(--fx-rd, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html[data-fx-btn] .fx-btn, html[data-fx-card] .fx-media img, .fx-alt { transition-duration: .01s !important; }
  html[data-fx-btn] .fx-btn:hover:not(:disabled) { transform: none; }
  html[data-fx-btn] .fx-btn, html[data-fx-btn] .fx-btn > svg, html[data-fx-btn] .fx-btn > i, .fx-ripple { animation: none !important; }
  .fx-shine { display: none; }
  html[data-fx-card] .fx-card:hover .fx-media img { transform: none !important; }
  html[data-fx-motion] .fx-mcard:hover { transform: none !important; }
  .fx-glare, .fx-ring { display: none; }
  html[data-fx-motion] .fx-mcard:hover { animation: none !important; }
}