/**
 * ZxAcc — Professional scroll & micro-interaction layer (additive only)
 * ----------------------------------------------------------------------
 * Pairs with assets/js/theme-scroll-fx.js. Nothing here touches layout;
 * it only adds opt-in animation classes that the JS attaches to existing
 * elements, plus a couple of small fixed-position UI pieces (scroll
 * progress bar). Fully reversible: remove the two enqueue calls in
 * functions.php (or these two files) and the site behaves exactly as
 * before — main.js's own .reveal system on .feature-card/.pricing-card/
 * .cta-card keeps working untouched.
 */

/* ---------------------------------------------------------------------
   Base icon system (assets/php/inc/icon-library.php) — replaces emoji
   glyphs site-wide with inline SVGs that inherit surrounding text color.
   --------------------------------------------------------------------- */
.beiten-icon {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.beiten-icon-spin {
    animation: beitenIconSpin 0.9s linear infinite;
}
@keyframes beitenIconSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .beiten-icon-spin { animation-duration: 2.2s; }
}
.stock-icon.is-in-stock,
.stock-icon.is-out-stock ~ .stock-icon,
[class*="notif-item-icon"] .beiten-icon,
.notif-item-icon .beiten-icon { vertical-align: -0.2em; }
.stock-icon.is-in-stock { color: #16a34a; }
.stock-icon.is-out-stock { color: #dc2626; }
.ppc-status .stock-icon { margin-inline-start: 4px; }

/* ---------------------------------------------------------------------
   FAQ — cinematic: floating parallax "?" marks, staggered glow
   entrance, typewriter answer reveal, and the accordion open/close
   behavior itself (theme-scroll-fx.js wires the click handler; there
   is no other click handler for .faq-question in this theme).
   --------------------------------------------------------------------- */
.faq-section { position: relative; overflow: hidden; }
.faq-fx-orbits {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.faq-fx-q {
    position: absolute;
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
    opacity: 0.05;
    user-select: none;
    will-change: transform;
    animation: faqFxBreathe 7s ease-in-out infinite;
}
@keyframes faqFxBreathe {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.13; }
}
.faq-section .container { position: relative; z-index: 1; }

.faq-item.faq-fx-ready {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
    transition-delay: var(--faq-delay, 0s);
}
.faq-item.faq-fx-ready.faq-fx-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.faq-item.faq-fx-glow {
    animation: faqGlowPulse 1.2s ease-out;
    animation-delay: var(--faq-delay, 0s);
}
@keyframes faqGlowPulse {
    0% { box-shadow: 0 0 0 rgba(82,132,176,0); }
    45% { box-shadow: 0 0 34px rgba(82,132,176,0.32), 0 0 0 1px rgba(82,132,176,0.22) inset; }
    100% { box-shadow: 0 0 0 rgba(82,132,176,0); }
}
.faq-answer-inner p.faq-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-inline-start: 3px;
    background: var(--primary);
    vertical-align: -0.15em;
    animation: faqCaretBlink 0.8s steps(1) infinite;
}
@keyframes faqCaretBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .faq-fx-q { animation: none; opacity: 0.06; }
    .faq-item.faq-fx-ready { opacity: 1; transform: none; transition: none; }
    .faq-item.faq-fx-glow { animation: none; }
    .faq-answer-inner p.faq-typing::after { animation: none; }
}

/* ---------------------------------------------------------------------
   Blog cards (homepage grid) — cooler hover treatment: glass badge,
   gradient accent bar, image zoom + warm overlay, glowing lift.
   .blog-card already gets the generic .fx-reveal scroll-in animation
   from theme-scroll-fx.js's broad auto-discovery pass; this section is
   purely about the hover/visual polish layered on top of enhance.css.
   --------------------------------------------------------------------- */
.blog-card {
    position: relative;
    isolation: isolate;
}
.blog-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
    z-index: 2;
}
.blog-card:hover::before { transform: scaleX(1); }
.blog-card:hover {
    box-shadow: 0 26px 50px -22px rgba(53,94,136,0.38), 0 0 0 1px rgba(82,132,176,0.16);
}
.blog-card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(42,52,66,0.55) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.blog-card:hover .blog-card-thumb::after { opacity: 1; }
.blog-card-badge {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    color: var(--primary) !important;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.5)) !important;
    box-shadow: 0 4px 14px rgba(53,94,136,0.18);
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
    z-index: 2;
}
.blog-card:hover .blog-card-badge {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    transform: translateY(-2px);
}
.blog-card-more svg { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.blog-card:hover .blog-card-more svg { transform: translateX(3px); }
[dir="rtl"] .blog-card:hover .blog-card-more svg { transform: translateX(-3px) scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
    .blog-card::before,
    .blog-card-thumb::after,
    .blog-card-badge,
    .blog-card-more svg { transition: none; }
}

/* ---------------------------------------------------------------------
   Top scroll-progress bar
   --------------------------------------------------------------------- */
#beitenScrollProgress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: var(--gradient-primary);
    box-shadow: 0 0 12px rgba(82,132,176,0.55);
    z-index: 10000;
    transition: width 0.12s linear;
}
@media (max-width: 768px) {
    #beitenScrollProgress { top: 0; }
}

/* ---------------------------------------------------------------------
   Generic reveal-on-scroll system (class name kept distinct from the
   theme's own `.reveal` so the two IntersectionObservers never fight
   over the same element).
   --------------------------------------------------------------------- */
.fx-reveal {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1), filter 0.9s ease;
    transition-delay: var(--fx-delay, 0s);
    will-change: opacity, transform;
}
.fx-reveal[data-fx="up"]     { transform: translateY(46px); }
.fx-reveal[data-fx="down"]   { transform: translateY(-36px); }
.fx-reveal[data-fx="left"]   { transform: translateX(-48px); }
.fx-reveal[data-fx="right"]  { transform: translateX(48px); }
.fx-reveal[data-fx="zoom"]   { transform: scale(0.88); }
.fx-reveal[data-fx="blur"]   { filter: blur(10px); transform: translateY(20px); }

.fx-reveal.fx-in {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
}

/* Staggered children (JS sets --fx-i per child; this converts it to a delay) */
.fx-stagger > * { --fx-delay: calc(var(--fx-i, 0) * 90ms); }

/* ---------------------------------------------------------------------
   Cursor-reactive glow used on cards (desktop / fine pointer only —
   the JS only ever attaches the listener under the same media query).
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .fx-glow { position: relative; isolation: isolate; overflow: hidden; }
    .fx-glow::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        opacity: 0;
        background: radial-gradient(220px circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(82,132,176,0.18), transparent 70%);
        transition: opacity 0.35s ease;
        pointer-events: none;
    }
    .fx-glow:hover::before { opacity: 1; }
    .fx-glow > * { position: relative; z-index: 1; }
}

/* ---------------------------------------------------------------------
   Magnetic buttons (desktop only — JS nudges transform: translate())
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .fx-magnetic { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
}

/* ---------------------------------------------------------------------
   Animated brand-gradient text (opt-in utility, JS applies it to the
   hero heading's accent word only)
   --------------------------------------------------------------------- */
.fx-gradient-text {
    background: linear-gradient(100deg, var(--primary) 0%, var(--accent) 45%, var(--primary) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fxGradientMove 6s ease-in-out infinite;
}
@keyframes fxGradientMove {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---------------------------------------------------------------------
   Liquid drift for decorative blobs (header/footer/hero) — CSS-only,
   no JS cost. Applied via class so any section can opt in.
   --------------------------------------------------------------------- */
.fx-drift-a { animation: fxDriftA 16s ease-in-out infinite; }
.fx-drift-b { animation: fxDriftB 19s ease-in-out infinite; }
@keyframes fxDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(26px, -18px) scale(1.08); }
}
@keyframes fxDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-22px, 20px) scale(0.94); }
}

/* ---------------------------------------------------------------------
   Reduced motion: collapse every custom animation added above to an
   instant, non-jarring state — on top of the theme's own blanket rule
   in pro.css, so this layer explicitly respects it too.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fx-reveal { transition-duration: 0.01ms !important; transform: none !important; filter: none !important; opacity: 1 !important; }
    .fx-drift-a, .fx-drift-b, .fx-gradient-text { animation: none !important; }
    #beitenScrollProgress { transition: none !important; }
}

/* ---------------------------------------------------------------------
   BUGFIX (2026-09): hard CSS safety net for mobile/tablet.
   The reveal system above depends on JS (IntersectionObserver) running
   to completion to ever flip .fx-reveal / .faq-fx-ready to visible. On
   slower phones/tablets, on a page as script-heavy as this one, or on
   a bfcache "back" restore (DOMContentLoaded does not fire again), that
   JS can lag or never re-run — leaving already-rendered content stuck
   at opacity:0, which reads as "the page went blank". Below 1024px the
   entrance animation is a nice-to-have, not worth that risk, so it is
   turned off unconditionally at the CSS level — content is always
   visible on phones/tablets regardless of what the JS does or when it
   runs. Desktop keeps the animation, now backed by the JS-side
   failsafe in theme-scroll-fx.js (forces a reveal after a short
   timeout and again on every bfcache restore).
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .fx-reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition-duration: 0.01ms !important;
    }
    .faq-item.faq-fx-ready {
        opacity: 1 !important;
        transform: none !important;
        transition-duration: 0.01ms !important;
    }
}