/* ==========================================================================
   Allma Design Shop 2.2.3 — efecte grafice: fundaluri, cadre, butoane
   --------------------------------------------------------------------------
   body.allma-fx-off   → nimic din acest fișier nu se aplică (aspect plat)
   body.allma-fx-soft  → doar decor static (fără animații)
   body.allma-fx-full  → decor + animații fine, străluciri, apariție la derulare
   Se alege din Theme Builder → Aspect → „Efecte grafice”. Animațiile se opresc
   singure când sistemul are „Reduce motion” activ.
   ========================================================================== */

body.allma-theme {
  --fx-a08: rgba(242, 100, 10, .08);
  --fx-a14: rgba(242, 100, 10, .14);
  --fx-a24: rgba(242, 100, 10, .24);
  --fx-a40: rgba(242, 100, 10, .40);
  --fx-b24: rgba(255, 138, 28, .24);
  --fx-ease: cubic-bezier(.22, .8, .3, 1);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  body.allma-theme {
    --fx-a08: color-mix(in srgb, var(--a-orange) 8%, transparent);
    --fx-a14: color-mix(in srgb, var(--a-orange) 14%, transparent);
    --fx-a24: color-mix(in srgb, var(--a-orange) 24%, transparent);
    --fx-a40: color-mix(in srgb, var(--a-orange) 40%, transparent);
    --fx-b24: color-mix(in srgb, var(--a-orange-2) 24%, transparent);
  }
}

/* ---------- 1. Fundal general: puncte fine + lumini difuze --------------- */
body.allma-theme:not(.allma-fx-off)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(640px 420px at 6% 14%, var(--fx-a08), transparent 70%),
    radial-gradient(560px 380px at 96% 58%, var(--fx-a08), transparent 70%),
    radial-gradient(circle at 1px 1px, var(--fx-a14) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .4) 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .4) 55%, transparent 100%);
}

/* ---------- 2. Hero + antet de pagină: grilă, inele, sferă luminoasă ----- */
body:not(.allma-fx-off) .a-hero,
body:not(.allma-fx-off) .a-pagehead,
body:not(.allma-fx-off) .a-posthead { position: relative; isolation: isolate; overflow: hidden; }

body:not(.allma-fx-off) .a-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 93% 20%, transparent 0 62px, var(--fx-a24) 63px 64px, transparent 65px),
    radial-gradient(circle at 93% 20%, transparent 0 104px, var(--fx-a14) 105px 106px, transparent 107px),
    radial-gradient(circle at 1px 1px, rgba(23, 23, 26, .11) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(70% 100% at 22% 45%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 82%);
  mask-image: radial-gradient(70% 100% at 22% 45%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 82%);
}
body:not(.allma-fx-off) .a-hero::after,
body:not(.allma-fx-off) .a-pagehead::after,
body:not(.allma-fx-off) .a-posthead::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 36%, var(--fx-a24), transparent 68%);
}
body:not(.allma-fx-off) .a-hero::after { width: 560px; height: 560px; right: -140px; top: -210px; }
body:not(.allma-fx-off) :is(.a-pagehead, .a-posthead)::after { width: 420px; height: 420px; right: -90px; top: -190px; opacity: .8; }
body:not(.allma-fx-off) :is(.a-pagehead, .a-posthead)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--fx-a08) 1px, transparent 1px) 0 0 / 38px 38px,
    linear-gradient(90deg, var(--fx-a08) 1px, transparent 1px) 0 0 / 38px 38px;
  -webkit-mask-image: radial-gradient(60% 140% at 85% 20%, #000, transparent 72%);
  mask-image: radial-gradient(60% 140% at 85% 20%, #000, transparent 72%);
}
/* titlul din hero: cuvântul accentuat primește gradient */
body:not(.allma-fx-off) :is(.a-hero__title, .a-pagehead__title, .a-posthead__title) em {
  background: var(--a-grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 3. Cadre: contur fin în gradient pe panourile mari ----------- */
body:not(.allma-fx-off) :is(.a-strip, .a-whybar, .a-feature, .a-form, .a-checkcard, .a-audience, .a-news, .a-richbox) {
  position: relative;
}
body:not(.allma-fx-off) :is(.a-strip, .a-whybar, .a-feature, .a-form, .a-checkcard, .a-audience, .a-news, .a-richbox)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--fx-a40) 0%, transparent 30%, transparent 70%, var(--fx-a24) 100%);
  -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);
}
/* panourile întunecate: contur alb discret + linie de lumină sus */
body:not(.allma-fx-off) .a-cta { isolation: isolate; }
body:not(.allma-fx-off) .a-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent) 0 0 / 100% 1px no-repeat,
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .13) 1px, transparent 1.6px) 0 0 / 20px 20px;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 70%);
  mask-image: linear-gradient(100deg, transparent 20%, #000 70%);
}
body:not(.allma-fx-off) .a-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

/* ---------- 4. Carduri: lumină la hover + (full) reflector după cursor --- */
body:not(.allma-fx-off) :is(.a-pcard, .a-acard, .a-catcard, .a-doccard, .a-pkcard, .a-usecase, .a-help, .allma-account-quick-card) { position: relative; }
@media (hover: hover) {
  body:not(.allma-fx-off) :is(.a-pcard, .a-acard, .a-catcard, .a-doccard, .a-pkcard, .a-usecase, .a-help):hover {
    border-color: var(--fx-a40);
    box-shadow: 0 24px 46px -16px var(--fx-a40), 0 0 0 1px var(--fx-a24);
  }
  body.allma-fx-full :is(.a-pcard, .a-acard, .a-catcard, .a-doccard, .a-pkcard, .a-usecase, .a-help, .allma-account-quick-card)::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), var(--fx-b24), transparent 62%);
  }
  body.allma-fx-full :is(.a-pcard, .a-acard, .a-catcard, .a-doccard, .a-pkcard, .a-usecase, .a-help, .allma-account-quick-card):hover::after { opacity: 1; }
}

/* ---------- 5. Butoane: lumină, strălucire, apăsare ---------------------- */
body:not(.allma-fx-off) :is(.a-btn, .a-pcard__cart, .single_add_to_cart_button, .woocommerce #place_order, .woocommerce a.checkout-button, .woocommerce a.button.alt, .woocommerce button.button.alt) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s var(--fx-ease), box-shadow .28s, filter .2s, background-color .2s, color .2s, border-color .2s;
}
body:not(.allma-fx-off):not(.allma-btn-noshadow) .a-btn--primary { box-shadow: var(--a-shadow-or), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 0 rgba(0, 0, 0, .06); }
body:not(.allma-fx-off) :is(.a-btn--outline, .a-btn--ghost):hover { box-shadow: 0 12px 26px -12px var(--fx-a40); }
body:not(.allma-fx-off) .a-btn:active { transform: translateY(1px) scale(.985); }
body:not(.allma-fx-off) :is(.a-btn, .a-pcard__cart):focus-visible { outline: 3px solid var(--fx-a40); outline-offset: 3px; }
body.allma-fx-full .a-btn:hover > svg:last-child { transform: translateX(3px); }
body.allma-fx-full .a-btn > svg { transition: transform .25s var(--fx-ease); }

/* banda de lumină care traversează butonul */
body.allma-fx-full :is(.a-btn--primary, .a-pcard__cart, .single_add_to_cart_button, .woocommerce #place_order, .woocommerce a.checkout-button, .woocommerce a.button.alt, .woocommerce button.button.alt)::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 38%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg) translateX(-190%);
}
@media (hover: hover) {
  body.allma-fx-full :is(.a-btn--primary, .a-pcard__cart, .single_add_to_cart_button, .woocommerce #place_order, .woocommerce a.checkout-button, .woocommerce a.button.alt, .woocommerce button.button.alt):hover::before {
    transform: skewX(-20deg) translateX(430%);
    transition: transform .85s var(--fx-ease);
  }
}
body.allma-fx-full :is(.a-hero, .a-cta, .a-news) .a-btn--primary::before { animation: fx-shine 6.5s var(--fx-ease) 1.8s infinite; }
@keyframes fx-shine {
  0%, 62% { transform: skewX(-20deg) translateX(-190%); }
  86%, 100% { transform: skewX(-20deg) translateX(430%); }
}

/* ---------- 6. Etichete și alte accente ---------------------------------- */
body.allma-fx-full .a-label:not(.a-label--soft) {
  background-size: 220% 100%;
  animation: fx-label 7s ease-in-out infinite alternate;
}
@keyframes fx-label { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* ---------- 7. Antet lipicios: umbră + linie de lumină la derulare ------- */
body:not(.allma-fx-off) .a-header { transition: box-shadow .3s, background-color .3s; }
body:not(.allma-fx-off) .a-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--a-orange-2), var(--a-orange), transparent);
  opacity: 0;
  transition: opacity .3s;
}
body:not(.allma-fx-off) .a-header.is-scrolled { box-shadow: 0 14px 34px -16px rgba(60, 28, 0, .28); }
body:not(.allma-fx-off) .a-header.is-scrolled::after { opacity: .75; }

/* ---------- 8. Footer: linie luminoasă, puncte, sferă ------------------- */
body:not(.allma-fx-off) .a-footer { position: relative; isolation: isolate; overflow: hidden; }
body:not(.allma-fx-off) .a-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, var(--a-orange-2) 30%, var(--a-orange) 70%, transparent) 0 0 / 100% 2px no-repeat,
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 1.6px) 0 0 / 24px 24px;
}
body:not(.allma-fx-off) .a-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -160px;
  bottom: -260px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--fx-a24), transparent 68%);
}

/* ---------- 9. Animații lente pe decor (doar „Complete”) ----------------- */
body.allma-fx-full .a-hero::after,
body.allma-fx-full .a-pagehead::after,
body.allma-fx-full .a-posthead::after { animation: fx-float 16s ease-in-out infinite alternate; }
body.allma-fx-full .a-footer::after { animation: fx-float 20s ease-in-out infinite alternate-reverse; }
@keyframes fx-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-46px, 34px, 0) scale(1.1); }
}

/* ---------- 10. Apariție la derulare (clasele le pune fx.js) ------------- */
body.allma-fx-full .fx-r {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--fx-ease) calc(var(--fx-i, 0) * 70ms), transform .7s var(--fx-ease) calc(var(--fx-i, 0) * 70ms);
}
body.allma-fx-full .fx-r.fx-in { opacity: 1; transform: none; }

/* ---------- Mobil: decor mai mic și mai ieftin --------------------------- */
@media (max-width: 720px) {
  body:not(.allma-fx-off) .a-hero::after { width: 340px; height: 340px; right: -120px; top: -140px; }
  body:not(.allma-fx-off) :is(.a-pagehead, .a-posthead)::after { width: 260px; height: 260px; right: -90px; top: -120px; }
  body:not(.allma-fx-off) .a-footer::after { width: 360px; height: 360px; left: -140px; bottom: -190px; }
}

/* ---------- Respectă „Reduce motion” ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.allma-theme *, body.allma-theme *::before, body.allma-theme *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  body.allma-fx-full .fx-r { opacity: 1; transform: none; }
}