/* ═══ Page Builder Section Animations ═══ */
/* Lightweight animation library for entrance effects */

/* Base: hidden until triggered (frontend only) */
[data-pb-animate]:not(.pb-animated) {
    opacity: 0;
    /* Promote to own compositing layer up front — prevents background/image
       repaint flash when opacity/transform animate and the layer is created mid-flight */
    backface-visibility: hidden;
}
[data-pb-animate].pb-animated {
    animation-fill-mode: both;
    backface-visibility: hidden;
}
/* In admin preview, sections start visible — .pb-animated is added on load
   and removed+re-added during replay to re-trigger the animation */

/* ── fadeIn ── */
@keyframes pbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pb-animated.pb-anim-fadeIn { animation-name: pbFadeIn; }

/* ── fadeInUp ── */
@keyframes pbFadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pb-animated.pb-anim-fadeInUp { animation-name: pbFadeInUp; }

/* ── fadeInDown ── */
@keyframes pbFadeInDown {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pb-animated.pb-anim-fadeInDown { animation-name: pbFadeInDown; }

/* ── fadeInLeft ── */
@keyframes pbFadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.pb-animated.pb-anim-fadeInLeft { animation-name: pbFadeInLeft; }

/* ── fadeInRight ── */
@keyframes pbFadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.pb-animated.pb-anim-fadeInRight { animation-name: pbFadeInRight; }

/* ── zoomIn ── */
@keyframes pbZoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.pb-animated.pb-anim-zoomIn { animation-name: pbZoomIn; }

/* ── slideInUp ── */
@keyframes pbSlideInUp {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pb-animated.pb-anim-slideInUp { animation-name: pbSlideInUp; }

/* ── bounceIn ── */
@keyframes pbBounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
.pb-animated.pb-anim-bounceIn { animation-name: pbBounceIn; }

/* ── flipInX ── */
@keyframes pbFlipInX {
    from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    40%  { transform: perspective(400px) rotateX(-10deg); }
    70%  { transform: perspective(400px) rotateX(10deg); }
    to   { opacity: 1; transform: perspective(400px) rotateX(0); }
}
.pb-animated.pb-anim-flipInX { animation-name: pbFlipInX; }

/* ── scaleUp ── */
@keyframes pbScaleUp {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}
.pb-animated.pb-anim-scaleUp { animation-name: pbScaleUp; }

/* ═══ Page Builder Style Utilities ═══ */

/* Force text color inheritance when section has a custom text color.
   Overrides hardcoded colors in widget templates so the section-level
   text_color prop applies to all content inside. */
.pb-custom-text-color h1,
.pb-custom-text-color h2,
.pb-custom-text-color h3,
.pb-custom-text-color h4,
.pb-custom-text-color h5,
.pb-custom-text-color h6,
.pb-custom-text-color p,
.pb-custom-text-color span,
.pb-custom-text-color div,
.pb-custom-text-color a,
.pb-custom-text-color li,
.pb-custom-text-color td,
.pb-custom-text-color th,
.pb-custom-text-color label,
.pb-custom-text-color small {
    color: inherit !important;
}

/* Full-width sections: edge-to-edge — outer wrapper has no border-radius.
   NOTE: do NOT redefine --border-radius here, it would cascade into buttons/cards
   inside the section and strip site design settings from them. Apply 0-radius
   only to direct outer panels, not inner controls. */
.pb-full-width,
.pb-full-width > .hero,
.pb-full-width > .hbn-section,
.pb-full-width > .hbc-section,
.pb-full-width > .hbv-section,
.pb-full-width .pcm-section,
.pb-full-width .pcs-wrapper,
.pb-full-width .pcsr-section,
.pb-full-width .pcc-section,
.pb-full-width .pce-section,
.pb-full-width .pcr-section,
.pb-full-width .faq-item,
.pb-full-width .nwl-card {
    border-radius: 0 !important;
}

/* Remove widget background — modern/minimal look.
   Neutralizes the default white panel + shadow + thick borders that widget
   templates hardcode, so the section-level bg_color/gradient shows through.
   Also auto-applied (.pb-has-bg) when the section already specifies a custom
   background, so the inner widget chrome doesn't cover it. */
.pb-no-widget-bg .pcm-section,
.pb-no-widget-bg .pcs-wrapper,
.pb-no-widget-bg .pcsr-section,
.pb-no-widget-bg .pcc-section,
.pb-no-widget-bg .pce-section,
.pb-no-widget-bg .pcr-section,
.pb-no-widget-bg .faq-item,
.pb-has-bg .pcm-section,
.pb-has-bg .pcs-wrapper,
.pb-has-bg .pcsr-section,
.pb-has-bg .pcc-section,
.pb-has-bg .pce-section,
.pb-has-bg .pcr-section,
.pb-has-bg .faq-item {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.pb-no-widget-bg .pcs-wrapper,
.pb-has-bg .pcs-wrapper {
    border: 0 !important;
}