/* ==========================================================================
   Guru Facility Widgets — Shared Effects System
   All animations, presets, and interaction CSS
   ========================================================================== */

/* ==========================================================================
   1. SCROLL ENTRANCE ANIMATIONS
   Elements start invisible, JS adds .gfw-visible to trigger
   ========================================================================== */

/* Base: hidden state */
[data-gfw-anim] {
    opacity: 0;
    will-change: transform, opacity;
}

/* Visible state — applied by IntersectionObserver */
[data-gfw-anim].gfw-visible {
    opacity: 1;
}

/* --- Fade In --- */
[data-gfw-anim="fade-in"] {
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="fade-in"].gfw-visible {
    opacity: 1;
}

/* --- Slide Up --- */
[data-gfw-anim="slide-up"] {
    --gfw-ty: 40px;
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out),
                transform var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="slide-up"].gfw-visible {
    --gfw-ty: 0px;
}

/* --- Slide Down --- */
[data-gfw-anim="slide-down"] {
    --gfw-ty: -40px;
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out),
                transform var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="slide-down"].gfw-visible {
    --gfw-ty: 0px;
}

/* --- Slide Left --- */
[data-gfw-anim="slide-left"] {
    --gfw-tx: 60px;
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out),
                transform var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="slide-left"].gfw-visible {
    --gfw-tx: 0px;
}

/* --- Slide Right --- */
[data-gfw-anim="slide-right"] {
    --gfw-tx: -60px;
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out),
                transform var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="slide-right"].gfw-visible {
    --gfw-tx: 0px;
}

/* --- Scale Up --- */
[data-gfw-anim="scale-up"] {
    --gfw-scale: 0.85;
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out),
                transform var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="scale-up"].gfw-visible {
    --gfw-scale: 1;
}

/* --- Flip In --- */
[data-gfw-anim="flip-in"] {
    --gfw-ry: -30deg;
    transform: perspective(800px)
               translate(var(--gfw-tx), var(--gfw-ty)) 
               scale(var(--gfw-scale)) 
               rotate(var(--gfw-rotate)) 
               rotateY(var(--gfw-ry));
    transform-style: preserve-3d;
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out),
                transform var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="flip-in"].gfw-visible {
    --gfw-ry: 0deg;
}

/* --- Rotate In --- */
[data-gfw-anim="rotate-in"] {
    --gfw-rotate: -8deg;
    --gfw-scale: 0.9;
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out),
                transform var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="rotate-in"].gfw-visible {
    --gfw-rotate: 0deg;
    --gfw-scale: 1;
}

/* --- Blur In --- */
[data-gfw-anim="blur-in"] {
    filter: blur(10px);
    transition: opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out),
                filter var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
}
[data-gfw-anim="blur-in"].gfw-visible {
    filter: blur(0);
}


/* ==========================================================================
   2. HOVER EFFECT PRESETS
   Applied via prefix_class on widget wrapper
   Using CSS variables to allow additive transforms (Rotate + Scale + Tilt)
   ========================================================================== */

/* Base setup for cards and containers to support combined transforms */
.gfw-sc-card,
.gfw-fc-card,
.gfw-ba-container {
    --gfw-tx: 0px;
    --gfw-ty: 0px;
    --gfw-scale: 1;
    --gfw-rotate: 0deg;
    
    transform: translate(var(--gfw-tx), var(--gfw-ty)) 
               scale(var(--gfw-scale)) 
               rotate(var(--gfw-rotate));
    
    transition: transform var(--gfw-hover-duration, 350ms) var(--gfw-hover-easing, ease-out),
                box-shadow var(--gfw-hover-duration, 350ms) ease,
                background var(--gfw-hover-duration, 350ms) ease,
                border var(--gfw-hover-duration, 350ms) ease,
                opacity var(--gfw-anim-duration, 600ms) var(--gfw-anim-easing, ease-out);
    
    will-change: transform, box-shadow, opacity;
}

/* Base setup for images to support parallax variables */
.gfw-sc-image img,
.gfw-fc-image img {
    --gfw-tx: 0px;
    --gfw-ty: 0px;
    --gfw-scale: 1;
    transform: translate(var(--gfw-tx), var(--gfw-ty)) scale(var(--gfw-scale));
    will-change: transform;
}


/* --- Lift --- */
.gfw-hover-lift .gfw-sc-card:hover,
.gfw-hover-lift .gfw-fc-card:hover {
    --gfw-ty: -8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* --- Grow --- */
.gfw-hover-grow .gfw-sc-card:hover,
.gfw-hover-grow .gfw-fc-card:hover {
    --gfw-scale: 1.03;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* --- Tilt 3D (JS-enhanced, CSS variables for smooth rotation) --- */
.gfw-hover-tilt .gfw-sc-card,
.gfw-hover-tilt .gfw-fc-card {
    --gfw-rx: 0deg;
    --gfw-ry: 0deg;
    
    transform: perspective(800px)
               translate(var(--gfw-tx), var(--gfw-ty)) 
               scale(var(--gfw-scale)) 
               rotate(var(--gfw-rotate)) 
               rotateX(var(--gfw-rx)) 
               rotateY(var(--gfw-ry));
    
    transform-style: preserve-3d;
}
.gfw-hover-tilt .gfw-sc-card:hover,
.gfw-hover-tilt .gfw-fc-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* --- Glow --- */
.gfw-hover-glow .gfw-sc-card,
.gfw-hover-glow .gfw-fc-card {
    transition: box-shadow var(--gfw-hover-duration, 500ms) ease;
}
.gfw-hover-glow .gfw-sc-card:hover,
.gfw-hover-glow .gfw-fc-card:hover {
    box-shadow: 0 0 25px var(--gfw-glow-color, rgba(59, 130, 246, 0.5)),
                0 0 50px var(--gfw-glow-color, rgba(59, 130, 246, 0.25));
}

/* --- Border Reveal --- */
.gfw-hover-border-reveal .gfw-sc-card,
.gfw-hover-border-reveal .gfw-fc-card {
    position: relative;
    overflow: hidden;
}
.gfw-hover-border-reveal .gfw-sc-card::before,
.gfw-hover-border-reveal .gfw-fc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--gfw-border-reveal-color, #3b82f6);
    border-radius: inherit;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity var(--gfw-hover-duration, 350ms) ease, transform var(--gfw-hover-duration, 350ms) ease;
    pointer-events: none;
    z-index: 3;
}
.gfw-hover-border-reveal .gfw-sc-card:hover::before,
.gfw-hover-border-reveal .gfw-fc-card:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* --- Shine Sweep --- */
.gfw-hover-shine .gfw-sc-card,
.gfw-hover-shine .gfw-fc-card {
    position: relative;
    overflow: hidden;
}
.gfw-hover-shine .gfw-sc-card::after,
.gfw-hover-shine .gfw-fc-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.20),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0s 0.4s;
    pointer-events: none;
    z-index: 3;
}
.gfw-hover-shine .gfw-sc-card:hover::after,
.gfw-hover-shine .gfw-fc-card:hover::after {
    left: 130%;
    transition: left 0.6s ease-in-out;
}

/* --- Glassmorphism --- */
.gfw-hover-glass .gfw-sc-card,
.gfw-hover-glass .gfw-fc-card {
    position: relative;
    overflow: hidden;
}
.gfw-hover-glass .gfw-sc-card::before,
.gfw-hover-glass .gfw-fc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    background: rgba(255, 255, 255, 0);
    border-radius: inherit;
    transition: backdrop-filter var(--gfw-hover-duration, 400ms) ease,
                -webkit-backdrop-filter var(--gfw-hover-duration, 400ms) ease,
                background var(--gfw-hover-duration, 400ms) ease;
    pointer-events: none;
    z-index: 2;
}
.gfw-hover-glass .gfw-sc-card:hover::before,
.gfw-hover-glass .gfw-fc-card:hover::before {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.1);
}

/* --- Color Shift --- */
.gfw-hover-color-shift .gfw-sc-card,
.gfw-hover-color-shift .gfw-fc-card {
    position: relative;
    overflow: hidden;
}
.gfw-hover-color-shift .gfw-sc-card::before,
.gfw-hover-color-shift .gfw-fc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        var(--gfw-shift-color-1, rgba(59, 130, 246, 0.3)),
        var(--gfw-shift-color-2, rgba(139, 92, 246, 0.3))
    );
    opacity: 0;
    transition: opacity var(--gfw-hover-duration, 500ms) ease;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
}
.gfw-hover-color-shift .gfw-sc-card:hover::before,
.gfw-hover-color-shift .gfw-fc-card:hover::before {
    opacity: 1;
}

/* --- Float --- */
@keyframes gfw-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.gfw-hover-float .gfw-sc-card:hover,
.gfw-hover-float .gfw-fc-card:hover {
    animation: gfw-float 2s ease-in-out infinite;
}


/* ==========================================================================
   3. BOX SHADOW PRESETS
   Applied via prefix_class on widget wrapper
   ========================================================================== */

.gfw-shadow-none .gfw-sc-card,
.gfw-shadow-none .gfw-fc-card,
.gfw-shadow-none .gfw-ba-container { box-shadow: none; }

.gfw-shadow-subtle .gfw-sc-card,
.gfw-shadow-subtle .gfw-fc-card,
.gfw-shadow-subtle .gfw-ba-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.gfw-shadow-soft .gfw-sc-card,
.gfw-shadow-soft .gfw-fc-card,
.gfw-shadow-soft .gfw-ba-container {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.gfw-shadow-medium .gfw-sc-card,
.gfw-shadow-medium .gfw-fc-card,
.gfw-shadow-medium .gfw-ba-container {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.gfw-shadow-heavy .gfw-sc-card,
.gfw-shadow-heavy .gfw-fc-card,
.gfw-shadow-heavy .gfw-ba-container {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.gfw-shadow-sharp .gfw-sc-card,
.gfw-shadow-sharp .gfw-fc-card,
.gfw-shadow-sharp .gfw-ba-container {
    box-shadow: 4px 4px 0 var(--gfw-shadow-color, #0b2239);
}

.gfw-shadow-neon .gfw-sc-card,
.gfw-shadow-neon .gfw-fc-card,
.gfw-shadow-neon .gfw-ba-container {
    box-shadow: 0 0 20px var(--gfw-shadow-color, rgba(59, 130, 246, 0.5)),
                0 0 40px var(--gfw-shadow-color, rgba(59, 130, 246, 0.2));
}

.gfw-shadow-warm .gfw-sc-card,
.gfw-shadow-warm .gfw-fc-card,
.gfw-shadow-warm .gfw-ba-container {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4),
                0 0 40px rgba(245, 158, 11, 0.15);
}

.gfw-shadow-inner .gfw-sc-card,
.gfw-shadow-inner .gfw-fc-card,
.gfw-shadow-inner .gfw-ba-container {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gfw-shadow-layered .gfw-sc-card,
.gfw-shadow-layered .gfw-fc-card,
.gfw-shadow-layered .gfw-ba-container {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07),
                0 4px 8px rgba(0, 0, 0, 0.07),
                0 16px 32px rgba(0, 0, 0, 0.07);
}

/* Hover shadow presets */
.gfw-shadow-h-lift .gfw-sc-card:hover,
.gfw-shadow-h-lift .gfw-fc-card:hover,
.gfw-shadow-h-lift .gfw-ba-container:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.gfw-shadow-h-glow .gfw-sc-card:hover,
.gfw-shadow-h-glow .gfw-fc-card:hover,
.gfw-shadow-h-glow .gfw-ba-container:hover {
    box-shadow: 0 0 30px var(--gfw-shadow-color, rgba(59, 130, 246, 0.5));
}

.gfw-shadow-h-sharp .gfw-sc-card:hover,
.gfw-shadow-h-sharp .gfw-fc-card:hover,
.gfw-shadow-h-sharp .gfw-ba-container:hover {
    box-shadow: 6px 6px 0 var(--gfw-shadow-color, #0b2239);
}

.gfw-shadow-h-none .gfw-sc-card:hover,
.gfw-shadow-h-none .gfw-fc-card:hover,
.gfw-shadow-h-none .gfw-ba-container:hover {
    box-shadow: none;
}


/* ==========================================================================
   6. TEXT EFFECTS
   ========================================================================== */

/* --- Text Gradient --- */
.gfw-text-gradient .gfw-sc-title,
.gfw-text-gradient .gfw-fc-title {
    background: var(--gfw-text-gradient, linear-gradient(135deg, #667eea, #764ba2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Text Shadow Presets --- */
.gfw-textshadow-subtle .gfw-sc-title,
.gfw-textshadow-subtle .gfw-fc-title {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.gfw-textshadow-glow .gfw-sc-title,
.gfw-textshadow-glow .gfw-fc-title {
    text-shadow: 0 0 10px var(--gfw-text-glow-color, rgba(255, 255, 255, 0.6)),
                 0 0 20px var(--gfw-text-glow-color, rgba(255, 255, 255, 0.3));
}
.gfw-textshadow-hard .gfw-sc-title,
.gfw-textshadow-hard .gfw-fc-title {
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.gfw-textshadow-neon .gfw-sc-title,
.gfw-textshadow-neon .gfw-fc-title {
    text-shadow: 0 0 7px var(--gfw-text-glow-color, #3b82f6),
                 0 0 10px var(--gfw-text-glow-color, #3b82f6),
                 0 0 21px var(--gfw-text-glow-color, #3b82f6);
}

/* --- Underline Animation --- */
.gfw-text-underline .gfw-sc-title,
.gfw-text-underline .gfw-fc-title {
    position: relative;
    display: inline-block;
}
.gfw-text-underline .gfw-sc-title::after,
.gfw-text-underline .gfw-fc-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gfw-underline-color, currentColor);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gfw-text-underline .gfw-sc-card:hover .gfw-sc-title::after,
.gfw-text-underline .gfw-fc-card:hover .gfw-fc-title::after {
    width: 100%;
}

/* --- Text Stroke --- */
.gfw-text-stroke .gfw-sc-title,
.gfw-text-stroke .gfw-fc-title {
    -webkit-text-stroke: var(--gfw-stroke-width, 1px) var(--gfw-stroke-color, currentColor);
    -webkit-text-fill-color: transparent;
}

/* --- Letter Spacing Animation --- */
.gfw-text-spread .gfw-sc-title,
.gfw-text-spread .gfw-fc-title {
    transition: letter-spacing 0.4s ease;
}
.gfw-text-spread .gfw-sc-card:hover .gfw-sc-title,
.gfw-text-spread .gfw-fc-card:hover .gfw-fc-title {
    letter-spacing: var(--gfw-spread-amount, 3px);
}


/* ==========================================================================
   8. BORDER EFFECTS
   ========================================================================== */

/* --- Accent Left --- */
.gfw-border-accent .gfw-sc-card,
.gfw-border-accent .gfw-fc-card {
    border-left: 4px solid var(--gfw-border-accent-color, #3b82f6);
}

/* --- Accent Bottom --- */
.gfw-border-accent-bottom .gfw-sc-card,
.gfw-border-accent-bottom .gfw-fc-card {
    border-bottom: 4px solid var(--gfw-border-accent-color, #3b82f6);
}

/* --- Border Draw --- */
.gfw-border-draw .gfw-sc-card,
.gfw-border-draw .gfw-fc-card {
    position: relative;
}
.gfw-border-draw .gfw-sc-card::before,
.gfw-border-draw .gfw-sc-card::after,
.gfw-border-draw .gfw-fc-card::before,
.gfw-border-draw .gfw-fc-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 3;
}
/* Top + Bottom horizontal lines */
.gfw-border-draw .gfw-sc-card::before,
.gfw-border-draw .gfw-fc-card::before {
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gfw-border-draw-color, #3b82f6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.gfw-border-draw .gfw-sc-card::after,
.gfw-border-draw .gfw-fc-card::after {
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gfw-border-draw-color, #3b82f6);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease 0.1s;
}
.gfw-border-draw .gfw-sc-card:hover::before,
.gfw-border-draw .gfw-sc-card:hover::after,
.gfw-border-draw .gfw-fc-card:hover::before,
.gfw-border-draw .gfw-fc-card:hover::after {
    transform: scaleX(1);
}

/* --- Gradient Border --- */
.gfw-border-gradient .gfw-sc-card,
.gfw-border-gradient .gfw-fc-card {
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}
.gfw-border-gradient .gfw-sc-card::before,
.gfw-border-gradient .gfw-fc-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--gfw-border-gradient, linear-gradient(135deg, #3b82f6, #8b5cf6));
    z-index: -1;
}

/* --- Glow Border --- */
.gfw-border-glow .gfw-sc-card,
.gfw-border-glow .gfw-fc-card {
    transition: box-shadow 0.4s ease;
}
.gfw-border-glow .gfw-sc-card:hover,
.gfw-border-glow .gfw-fc-card:hover {
    box-shadow: 0 0 0 2px var(--gfw-border-glow-color, #3b82f6),
                0 0 15px var(--gfw-border-glow-color, rgba(59, 130, 246, 0.4));
}


/* ==========================================================================
   9. BACKGROUND EFFECTS (Widget 1 — Service Cards)
   ========================================================================== */

/* --- Ken Burns --- */
@keyframes gfw-kenburns {
    0%   { transform: scale(1) translate(0, 0); }
    50%  { transform: scale(1.12) translate(-1%, -1%); }
    100% { transform: scale(1) translate(0, 0); }
}
.gfw-bg-kenburns .gfw-sc-image {
    animation: gfw-kenburns 20s ease-in-out infinite;
}

/* --- Grayscale to Color --- */
.gfw-bg-grayscale .gfw-sc-image {
    filter: grayscale(100%);
    transition: filter 0.6s ease;
}
.gfw-bg-grayscale .gfw-sc-card:hover .gfw-sc-image {
    filter: grayscale(0%);
}

/* --- Blur on Hover (background blurs, content stays sharp) --- */
.gfw-bg-blur .gfw-sc-image {
    transition: filter 0.5s ease;
}
.gfw-bg-blur .gfw-sc-card:hover .gfw-sc-image {
    filter: blur(4px);
}

/* --- Duotone Filters --- */
.gfw-bg-duotone-blue .gfw-sc-image {
    filter: sepia(100%) hue-rotate(190deg) saturate(300%);
}
.gfw-bg-duotone-amber .gfw-sc-image {
    filter: sepia(100%) hue-rotate(10deg) saturate(250%);
}
.gfw-bg-duotone-teal .gfw-sc-image {
    filter: sepia(100%) hue-rotate(140deg) saturate(250%);
}
.gfw-bg-duotone-purple .gfw-sc-image {
    filter: sepia(100%) hue-rotate(240deg) saturate(250%);
}

/* --- Parallax (handled via JS, CSS just sets will-change) --- */
.gfw-bg-parallax .gfw-sc-image {
    will-change: transform;
    transition: none;
}


/* ==========================================================================
   5. GRADIENT OVERLAY PRESETS (Widget 1)
   ========================================================================== */

.gfw-overlay-dark-vignette .gfw-sc-overlay {
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.7) 100%) !important;
}
.gfw-overlay-sunset .gfw-sc-overlay {
    background: linear-gradient(to top, rgba(236,72,153,0.5), rgba(251,146,60,0.3), transparent) !important;
}
.gfw-overlay-ocean .gfw-sc-overlay {
    background: linear-gradient(to top, rgba(6,78,140,0.7), rgba(20,184,166,0.3), transparent) !important;
}
.gfw-overlay-midnight .gfw-sc-overlay {
    background: linear-gradient(to top, rgba(15,23,42,0.9), rgba(30,58,138,0.4), transparent) !important;
}
.gfw-overlay-forest .gfw-sc-overlay {
    background: linear-gradient(to top, rgba(5,46,22,0.8), rgba(34,197,94,0.2), transparent) !important;
}


/* ==========================================================================
   7. CARD INTERACTION MODES (Widget 2)
   ========================================================================== */

/* --- Flip Card --- */
.gfw-mode-flip .gfw-fc-card {
    perspective: 1000px;
    position: relative;
    cursor: pointer;
}
.gfw-mode-flip .gfw-fc-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
}
.gfw-mode-flip .gfw-fc-card:hover .gfw-fc-card-inner,
.gfw-mode-flip .gfw-fc-card.gfw-flipped .gfw-fc-card-inner {
    transform: rotateY(180deg);
}
.gfw-mode-flip .gfw-fc-card-front,
.gfw-mode-flip .gfw-fc-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    padding: inherit;
}
.gfw-mode-flip .gfw-fc-card-back {
    transform: rotateY(180deg);
    justify-content: center;
    align-items: center;
}

/* --- Slide Reveal --- */
.gfw-mode-slide-reveal .gfw-fc-card {
    overflow: hidden;
}
.gfw-mode-slide-reveal .gfw-fc-bullets {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.3s ease 0.1s;
}
.gfw-mode-slide-reveal .gfw-fc-card:hover .gfw-fc-bullets {
    max-height: 300px;
    opacity: 1;
}

/* --- Expandable (click-based, needs JS) --- */
.gfw-mode-expand .gfw-fc-card {
    cursor: pointer;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.gfw-mode-expand .gfw-fc-card .gfw-fc-expand-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.3s ease 0.1s;
}
.gfw-mode-expand .gfw-fc-card.gfw-expanded .gfw-fc-expand-content {
    max-height: 500px;
    opacity: 1;
}


/* ==========================================================================
   10. BEFORE/AFTER MICRO-INTERACTIONS
   ========================================================================== */

/* --- Handle Pulse --- */
@keyframes gfw-handle-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
    50% { transform: scale(1.15); box-shadow: 0 4px 25px rgba(0,0,0,0.3); }
}
.gfw-ba-pulse .gfw-ba-handle {
    animation: gfw-handle-pulse 2s ease-in-out infinite;
}
.gfw-ba-pulse .gfw-ba-container.gfw-ba-dragging .gfw-ba-handle {
    animation: none;
}

/* --- Auto-play slide demo (JS triggers this class) --- */
@keyframes gfw-autoplay {
    0%   { left: 50%; }
    25%  { left: 25%; }
    50%  { left: 50%; }
    75%  { left: 75%; }
    100% { left: 50%; }
}

/* --- Vertical Mode --- */
.gfw-ba-vertical .gfw-ba-before-wrap {
    clip-path: inset(0 0 50% 0);
}
.gfw-ba-vertical .gfw-ba-divider-wrap {
    top: 50%;
    left: 0 !important;
    right: 0;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: row;
    width: 100%;
    height: auto;
}
.gfw-ba-vertical .gfw-ba-divider {
    width: 100%;
    height: 3px;
    top: auto;
    bottom: auto;
}
.gfw-ba-vertical .gfw-ba-handle {
    cursor: ns-resize;
}
.gfw-ba-vertical .gfw-ba-label--before {
    top: 20px;
    bottom: auto;
    left: 20px;
}
.gfw-ba-vertical .gfw-ba-label--after {
    bottom: 20px;
    right: 20px;
}

/* --- Crossfade Mode --- */
.gfw-ba-crossfade .gfw-ba-before-wrap {
    clip-path: none !important;
    opacity: 0.5;
    transition: opacity 0.1s ease;
}
.gfw-ba-crossfade .gfw-ba-divider-wrap {
    display: none;
}


/* ==========================================================================
   11. WIDGET 3 LAYOUT OPTIONS
   ========================================================================== */

/* --- Card Wrapper --- */
.gfw-ba-card-wrap .gfw-ba-container {
    border: 1px solid var(--gfw-ba-card-border-color, #e5e7eb);
    padding: var(--gfw-ba-card-padding, 0px);
    background: var(--gfw-ba-card-bg, #ffffff);
    border-radius: var(--gfw-ba-card-radius, 12px);
    overflow: hidden;
}

/* --- Caption --- */
.gfw-ba-caption {
    padding: 16px 20px 8px;
    font-size: 18px;
    font-weight: 700;
    color: #0b2239;
    line-height: 1.3;
}
.gfw-ba-caption-desc {
    padding: 0 20px 16px;
    font-size: 14px;
    color: #54595f;
    line-height: 1.5;
}

/* Caption positions */
.gfw-ba-caption-below .gfw-ba-caption { order: 2; }
.gfw-ba-caption-below .gfw-ba-caption-desc { order: 3; }
.gfw-ba-caption-below .gfw-ba-container { order: 1; }

/* Overlay caption */
.gfw-ba-caption-overlay-top .gfw-ba-caption-wrap,
.gfw-ba-caption-overlay-bottom .gfw-ba-caption-wrap {
    position: absolute;
    left: 0; right: 0;
    z-index: 5;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.gfw-ba-caption-overlay-top .gfw-ba-caption-wrap { top: 0; }
.gfw-ba-caption-overlay-bottom .gfw-ba-caption-wrap { bottom: 0; }

.gfw-ba-caption-overlay-top .gfw-ba-caption,
.gfw-ba-caption-overlay-bottom .gfw-ba-caption,
.gfw-ba-caption-overlay-top .gfw-ba-caption-desc,
.gfw-ba-caption-overlay-bottom .gfw-ba-caption-desc {
    color: #ffffff;
    padding: 0;
}
.gfw-ba-caption-overlay-top .gfw-ba-caption-desc,
.gfw-ba-caption-overlay-bottom .gfw-ba-caption-desc {
    margin-top: 4px;
    opacity: 0.85;
}

/* --- Badge --- */
.gfw-ba-badge {
    position: absolute;
    top: 16px;
    z-index: 5;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    pointer-events: none;
}
.gfw-ba-badge--before {
    left: 16px;
    background: var(--gfw-badge-before-bg, rgba(239, 68, 68, 0.85));
    color: var(--gfw-badge-before-color, #fff);
}
.gfw-ba-badge--after {
    right: 16px;
    background: var(--gfw-badge-after-bg, rgba(34, 197, 94, 0.85));
    color: var(--gfw-badge-after-color, #fff);
}

/* --- Grid Mode (multiple comparisons) --- */
.gfw-ba-grid {
    display: grid;
    gap: var(--gfw-ba-grid-gap, 24px);
}
.gfw-ba-grid-1 { grid-template-columns: 1fr; }
.gfw-ba-grid-2 { grid-template-columns: repeat(2, 1fr); }
.gfw-ba-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
    .gfw-ba-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .gfw-ba-grid-2,
    .gfw-ba-grid-3 { grid-template-columns: 1fr; }
}

/* Grid item wrapper */
.gfw-ba-grid-item {
    display: flex;
    flex-direction: column;
    position: relative;
}


/* ==========================================================================
   UTILITY: Reduce motion for accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    [data-gfw-anim] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .gfw-bg-kenburns .gfw-sc-image {
        animation: none !important;
    }
    .gfw-ba-pulse .gfw-ba-handle {
        animation: none !important;
    }
    .gfw-hover-float .gfw-sc-card:hover,
    .gfw-hover-float .gfw-fc-card:hover {
        animation: none !important;
    }
}