/* Glow Button (Showcase Primitive #3) */
.glow-btn {
    padding: 20px 48px; 
    background: transparent; 
    border: 1px solid var(--orange); 
    color: var(--orange); 
    font-family: 'DM Sans', sans-serif; 
    font-weight: 700; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    border-radius: 4px; 
    cursor: pointer; 
    position: relative; 
    overflow: hidden; 
    transition: color 0.3s, transform 0.2s, box-shadow 0.3s, border-color 0.3s; 
    box-shadow: 0 0 0px var(--orange);
    display: inline-block;
    z-index: 10;
} 
.glow-btn::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: var(--orange); 
    z-index: -1; 
    transform: scaleX(0); 
    transform-origin: left; 
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); 
} 
.glow-btn:hover::before { 
    transform: scaleX(1); 
} 
.glow-btn:hover { 
    color: #fff; 
    border-color: var(--orange); 
    box-shadow: 0 0 25px rgba(237, 123, 48, 0.6); 
    transform: scale(1.03); 
}

/* Core utilities */

/* 3D Tilt Card & Spotlight */
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }
.translate-z-10 { transform: translateZ(30px); }
.translate-z-20 { transform: translateZ(60px); }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }

.tilt-card { transition: transform 0.1s ease-out; }
.tilt-card:hover .spotlight-overlay { opacity: 1; }

/* Flip Container */
.flip-container {
    perspective: 1000px;
}
.flip-inner {
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    transform-style: preserve-3d;
}
.flip-container:hover .flip-inner { 
    transform: rotateY(180deg); 
}

/* Liquid Link */
.liquid-link { position: relative; overflow: hidden; padding-bottom: 2px; }
.liquid-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--orange); transform-origin: right; transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
.liquid-link:hover .liquid-line { transform-origin: left; transform: scaleX(1); }
.liquid-link:hover { color: var(--orange); transition: color 0.3s; }

/* Shimmer Animation */
@keyframes shimmer {
    100% { transform: translateX(100%); }
}

/* Perfect Outline Fill Masking */
.outline-stroke {
    -webkit-text-stroke: 1px rgba(255,255,255,0.2);
    color: transparent;
    transition: -webkit-text-stroke 0.5s ease;
}
.outline-fill-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.outline-text-wrapper:hover .outline-stroke {
    -webkit-text-stroke: 1px var(--orange);
}
.outline-text-wrapper:hover .outline-fill-reveal {
    clip-path: inset(0 0 0 0);
}

/* Cube Layers for Interactive SVG */
.cube-layer {
    transition: transform 0.15s ease-out, stroke 0.3s ease;
}

/* Linear Isometric Animations */
.linear-layer {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.8s ease, fill 0.8s ease, opacity 0.8s ease;
}
.linear-stroke {
    fill: rgba(255,255,255,0.01);
    stroke: rgba(255,255,255,0.1);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.linear-stroke-dark {
    fill: rgba(0,0,0,0.3);
    stroke: rgba(255,255,255,0.05);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: all 0.8s ease;
}
.linear-stroke-light {
    fill: none;
    stroke: rgba(255,255,255,0.05);
    stroke-width: 1;
    transition: all 0.8s ease;
}
.linear-stroke-accent {
    fill: rgba(237, 123, 48, 0.02);
    stroke: rgba(237, 123, 48, 0.3);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: all 0.8s ease;
}
.linear-fill-accent {
    fill: rgba(237, 123, 48, 0.1);
    transition: all 0.8s ease;
}

/* Hover States for SVGs */
.group:hover .linear-stroke {
    stroke: rgba(255,255,255,0.9);
    fill: rgba(255,255,255,0.05);
}
.group:hover .linear-stroke-dark {
    stroke: rgba(255,255,255,0.4);
    fill: rgba(0,0,0,0.5);
}
.group:hover .linear-stroke-light {
    stroke: rgba(255,255,255,0.3);
}
.group:hover .linear-stroke-accent {
    stroke: var(--orange);
    fill: rgba(237, 123, 48, 0.15);
    filter: drop-shadow(0 0 10px rgba(237,123,48,0.5));
}
.group:hover .linear-fill-accent {
    fill: var(--orange);
    filter: drop-shadow(0 0 8px var(--orange));
}

/* Specific Layer Translates */
/* Card 1: Stacking Grids */
.group:hover .c1-l1 { transform: translateY(40px) !important; }
.group:hover .c1-l2 { transform: translateY(0px) !important; }
.group:hover .c1-l3 { transform: translateY(-40px) !important; }

/* Card 2: Concentric Radar */
.group:hover .c2-l1 { transform: translateY(20px) !important; }
.group:hover .c2-l2 { transform: translateY(5px) !important; }
.group:hover .c2-l3 { transform: translateY(-10px) !important; }
.group:hover .c2-l4 { transform: translateY(-30px) !important; }
.group:hover .c2-laser { opacity: 1 !important; stroke: var(--orange); }

/* Card 3: Equalizer Cubes */
.group:hover .c3-c1 { transform: translateY(-30px) !important; }
.group:hover .c3-c2 { transform: translateY(10px) !important; }
.group:hover .c3-c3 { transform: translateY(-10px) !important; }
.group:hover .c3-c4 { transform: translateY(30px) !important; }

/* Card 4: Fanning Folders */
.group:hover .c4-f1 { transform: translate(-30px, -15px) !important; }
.group:hover .c4-f2 { transform: translate(-10px, -5px) !important; }
.group:hover .c4-f3 { transform: translate(10px, 5px) !important; }
.group:hover .c4-f4 { transform: translate(30px, 15px) !important; }

/* Specific Layer Translates */
/* Card 1: Stacking Grids */
.group:hover .c1-l1 { transform: translateY(40px) !important; }
.group:hover .c1-l2 { transform: translateY(0px) !important; }
.group:hover .c1-l3 { transform: translateY(-40px) !important; }

/* Card 2: Offer Creation (Assembling Slabs) */
.group:hover .c2-slab1 { transform: translate(0px, 20px) !important; }
.group:hover .c2-slab2 { transform: translate(0px, 0px) !important; }
.group:hover .c2-slab3 { transform: translate(0px, -20px) !important; }

/* Card 3: AI Follow-Up (Staggered Chat Bubbles) */
.group:hover .c3-msg1 { transform: translateY(0px) !important; }
.group:hover .c3-msg2 { transform: translateY(0px) !important; opacity: 1 !important; transition-delay: 0.15s !important; }
.group:hover .c3-msg3 { transform: translateY(0px) !important; opacity: 1 !important; transition-delay: 0.3s !important; }

/* Card 4: Conversions API (Data Packets) */
.group:hover .c4-track { stroke: rgba(237, 123, 48, 0.4); transition: stroke 0.8s ease; }
.group:hover .c4-packet1 { animation: packet-shoot1 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.group:hover .c4-packet2 { animation: packet-shoot2 2s cubic-bezier(0.16, 1, 0.3, 1) infinite 1s; }

@keyframes packet-shoot1 {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 1; }
    40% { transform: translate(140px, -70px); opacity: 1; }
    50% { opacity: 0; transform: translate(140px, -70px); }
    100% { opacity: 0; }
}

@keyframes packet-shoot2 {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 1; }
    40% { transform: translate(-140px, 70px); opacity: 1; }
    50% { opacity: 0; transform: translate(-140px, 70px); }
    100% { opacity: 0; }
}