/* ============================================
   Animations — Scroll reveals, Logo draw, Timeline, 3D cards
   ============================================ */

/* ---- SCROLL REVEAL ---- */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Delay utilities */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ---- LOGO SVG DRAW ANIMATION ---- */
.logo-animated {
    /* JS setta stroke-dasharray e stroke-dashoffset via data attributes */
}

.logo-animated path,
.logo-animated circle {
    fill-opacity: 0;
    stroke-width: 2;
    transition: fill-opacity 0.4s ease;
}

.logo-animated.drawing-complete path,
.logo-animated.drawing-complete circle {
    fill-opacity: 1;
}

/* ---- HERO TEXT REVEAL ---- */
@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.hero-text-reveal {
    animation: heroTextIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero-text-reveal:nth-child(1) { animation-delay: 0.1s; }
.hero-text-reveal:nth-child(2) { animation-delay: 0.25s; }
.hero-text-reveal:nth-child(3) { animation-delay: 0.4s; }
.hero-text-reveal:nth-child(4) { animation-delay: 0.55s; }

/* ---- TIMELINE LINE DRAW ---- */
.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom, var(--color-green), var(--color-charcoal));
    top: 0;
    height: 0; /* JS aggiorna questo */
    transition: height 0.1s linear;
}

.timeline-node {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-node.active {
    opacity: 1;
    transform: scale(1);
}

.timeline-card {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-card.left {
    transform: translateX(-20px);
}

.timeline-card.active {
    opacity: 1;
    transform: translateX(0);
}

/* ---- PORTFOLIO CARD 3D TILT ---- */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform var(--transition), box-shadow var(--transition);
}

/* JS controlla il transform inline */
.card-3d:hover {
    box-shadow: var(--shadow-lg);
}

.card-3d__inner {
    transform-style: preserve-3d;
    transition: transform var(--transition);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* ---- FLOATING / PULSE (per elementi decorativi) ---- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(89,176,49,0.4); }
    50%       { box-shadow: 0 0 0 12px rgba(89,176,49,0); }
}

.float {
    animation: float 4s ease-in-out infinite;
}

/* ---- COUNTER ANIMATE ---- */
.counter-value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ---- PAGE TRANSITION ---- */
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body {
    animation: pageFadeIn 0.4s ease;
}

/* ---- GEOMETRIC BACKGROUND DECORATION ---- */
.geo-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.geo-bg::before {
    content: '';
    position: absolute;
    right: -120px;
    top: -80px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(89,176,49,0.1);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    transform: rotate(-15deg);
    animation: float 8s ease-in-out infinite;
}

.geo-bg::after {
    content: '';
    position: absolute;
    left: -80px;
    bottom: -100px;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 30% 70% 50% 50% / 60% 40% 60% 40%;
    animation: float 10s ease-in-out infinite reverse;
}