/* ============================================
   PREMIUM EASING SYSTEM — TechMind B2B
   ============================================ */
:root {
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ============================================
   PAGE TRANSITIONS — View Transitions API
   ============================================ */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: pt-fade-out 350ms var(--ease-smooth) forwards;
}

::view-transition-new(root) {
    animation: pt-fade-in 500ms var(--ease-premium) forwards;
}

@keyframes pt-fade-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.98); }
}

@keyframes pt-fade-in {
    from { opacity: 0; transform: scale(1.01) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Fallback for browsers without View Transitions API */
body.pt-exit {
    animation: pt-fade-out 350ms var(--ease-smooth) forwards;
}

body.pt-enter {
    animation: pt-fade-in 500ms var(--ease-premium) forwards;
}

/* ============================================
   SVG DRAW ANIMATION
   ============================================ */
.svg-draw path,
.svg-draw line,
.svg-draw circle,
.svg-draw rect,
.svg-draw polyline {
    stroke-dasharray: var(--path-length, 200);
    stroke-dashoffset: var(--path-length, 200);
    fill-opacity: 0;
    transition: stroke-dashoffset 1.5s var(--ease-smooth),
                fill-opacity 0.6s ease 1.2s;
}

.svg-draw.drawn path,
.svg-draw.drawn line,
.svg-draw.drawn circle,
.svg-draw.drawn rect,
.svg-draw.drawn polyline {
    stroke-dashoffset: 0;
    fill-opacity: 1;
}

/* Stagger each child shape */
.svg-draw.drawn :nth-child(2) { transition-delay: 0.15s; }
.svg-draw.drawn :nth-child(3) { transition-delay: 0.3s; }
.svg-draw.drawn :nth-child(4) { transition-delay: 0.45s; }
.svg-draw.drawn :nth-child(5) { transition-delay: 0.6s; }
.svg-draw.drawn :nth-child(6) { transition-delay: 0.75s; }
.svg-draw.drawn :nth-child(7) { transition-delay: 0.9s; }
.svg-draw.drawn :nth-child(8) { transition-delay: 1.05s; }

/* ============================================
   STAGGER CHILDREN ON SCROLL REVEAL
   ============================================ */
.stagger-children > .g-reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children > .g-reveal:nth-child(2) { transition-delay: 80ms; }
.stagger-children > .g-reveal:nth-child(3) { transition-delay: 160ms; }
.stagger-children > .g-reveal:nth-child(4) { transition-delay: 240ms; }
.stagger-children > .g-reveal:nth-child(5) { transition-delay: 320ms; }
.stagger-children > .g-reveal:nth-child(6) { transition-delay: 400ms; }

/* ============================================
   SVG DRAW ON LOAD (hero — no IntersectionObserver)
   ============================================ */
.svg-draw-onload path,
.svg-draw-onload line,
.svg-draw-onload circle,
.svg-draw-onload rect,
.svg-draw-onload polyline {
    stroke-dasharray: var(--path-length, 200);
    stroke-dashoffset: var(--path-length, 200);
    fill-opacity: 0;
    animation: svg-draw-in 1.8s var(--ease-smooth) forwards;
}

.svg-draw-onload :nth-child(1) { animation-delay: 2s; }
.svg-draw-onload :nth-child(2) { animation-delay: 2.15s; }
.svg-draw-onload :nth-child(3) { animation-delay: 2.3s; }
.svg-draw-onload :nth-child(4) { animation-delay: 2.45s; }
.svg-draw-onload :nth-child(5) { animation-delay: 2.6s; }
.svg-draw-onload :nth-child(6) { animation-delay: 2.75s; }
.svg-draw-onload :nth-child(7) { animation-delay: 2.9s; }
.svg-draw-onload :nth-child(8) { animation-delay: 3.05s; }
.svg-draw-onload :nth-child(9) { animation-delay: 3.2s; }
.svg-draw-onload :nth-child(10) { animation-delay: 3.35s; }
.svg-draw-onload :nth-child(11) { animation-delay: 3.5s; }
.svg-draw-onload :nth-child(12) { animation-delay: 3.65s; }
.svg-draw-onload :nth-child(13) { animation-delay: 3.8s; }
.svg-draw-onload :nth-child(14) { animation-delay: 3.95s; }
.svg-draw-onload :nth-child(15) { animation-delay: 4.1s; }

@keyframes svg-draw-in {
    to {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }

    body.pt-exit,
    body.pt-enter {
        animation: none;
        opacity: 1;
    }

    .svg-draw path,
    .svg-draw line,
    .svg-draw circle,
    .svg-draw rect,
    .svg-draw polyline {
        stroke-dashoffset: 0 !important;
        fill-opacity: 1 !important;
        transition: none !important;
    }
}