/* ============================================
   ANIGA LLC — Animations & Scroll Reveal
   GPU-accelerated transforms for performance
   ============================================ */

/* --------------------------------------------
   SCROLL REVEAL BASE
   Uses transform + opacity for GPU compositing
   -------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

/* Staggered delays for sequential reveals */
.reveal--delay {
    transition-delay: 0.15s;
}

.reveal--delay-2 {
    transition-delay: 0.3s;
}

/* --------------------------------------------
   COUNTER ANIMATION (Why Us stats)
   -------------------------------------------- */
.why-us__number {
    transition: color var(--transition-base);
}

.why-us__stat.reveal--visible .why-us__number {
    animation: counter-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes counter-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* --------------------------------------------
   SERVICE CARD INTERACTION
   -------------------------------------------- */
.services__details {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition:
        max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease,
        padding 0.3s ease,
        margin 0.3s ease;
    padding-top: 0;
    margin-top: 0;
    border-top: 1px solid transparent;
}

.services__details--open {
    max-height: 400px;
    opacity: 1;
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-lg);
    border-top-color: var(--color-border-light);
}

/* --------------------------------------------
   HERO ENTRY ANIMATIONS
   -------------------------------------------- */
.hero__eyebrow {
    animation: fade-in-up 0.8s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Title lines use hero-line-reveal from main.css */

.hero__subtitle {
    animation: fade-in-up 0.8s 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__actions {
    animation: fade-in-up 0.8s 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------
   VALUE CARD HOVER GLOW
   -------------------------------------------- */
.about__value-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--transition-base);
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(201, 168, 76, 0.06),
        transparent 60%
    );
    pointer-events: none;
}

.about__value-card {
    position: relative;
    overflow: hidden;
}

.about__value-card:hover::before {
    opacity: 1;
}

/* --------------------------------------------
   NAV LINK UNDERLINE
   -------------------------------------------- */
.nav__link::after {
    will-change: width;
}

/* --------------------------------------------
   TICKER PAUSE ON HOVER
   -------------------------------------------- */
.ticker:hover .ticker__track {
    animation-play-state: paused;
}

/* --------------------------------------------
   FORM INPUT FOCUS TRANSITION
   -------------------------------------------- */
.form__input {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.form__input:focus {
    background-color: #fff;
}

/* Form success check animation */
.form__success svg circle {
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: draw-circle 0.8s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.form__success svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: draw-check 0.5s 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes draw-circle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

/* --------------------------------------------
   BUTTON PRESS EFFECT
   -------------------------------------------- */
.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

/* --------------------------------------------
   STAT NUMBER GLOW ON HOVER
   -------------------------------------------- */
.why-us__stat:hover .why-us__number {
    text-shadow: 0 0 20px rgba(201, 168, 76, 0.3);
}

/* --------------------------------------------
   SKELETON / LOADING SHIMMER (utility)
   -------------------------------------------- */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.loading-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-bg-card) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        var(--color-bg-card) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}