/* ============================================================================
   ANIMATIONS
   ----------------------------------------------------------------------------
   Subtle, purposeful motion only. Section entry uses AOS (fade-up). This file
   holds the loader, keyframes, ripple, icon-rotate and micro-interactions.
   ============================================================================ */

/* ---------- Keyframes ---------- */
@keyframes pci-spin {
    to { transform: rotate(360deg); }
}

@keyframes pci-ripple {
    to { transform: scale(2.6); opacity: 0; }
}

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

@keyframes pci-loader-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Page-load fade-in (fallback for non-AOS first paint) ---------- */
.page-fade {
    animation: pci-fade-up 0.6s var(--ease-out) both;
}

/* ----------------------------------------------------------------------------
   INITIAL LOADER — company logo + rotating ring, max 1.5s
   -------------------------------------------------------------------------- */
.pci-loader {
    position: fixed;
    inset: 0;
    z-index: var(--z-loader);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.pci-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.pci-loader__ring {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pci-loader__ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-right-color: var(--color-accent);
    animation: pci-loader-spin 0.9s linear infinite;
}

.pci-loader__logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

/* ----------------------------------------------------------------------------
   AOS fallback — if AOS fails to load, reveal content (no permanently hidden UI)
   -------------------------------------------------------------------------- */
.no-aos [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

/* ----------------------------------------------------------------------------
   MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
/* Icons rotate 5° on hover. */
.hover-rotate-icon i,
.icon-circle i {
    transition: transform var(--transition-base);
}
.hover-rotate-icon:hover i,
.pci-card:hover .icon-circle i {
    transform: rotate(5deg);
}

/* Hover-lift utility for any element. */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

/* Reveal helper used by the IntersectionObserver in main.js (counters etc.). */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}