/* ============================================================
   Paksa IT Solutions — Animations
   ============================================================ */

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

@keyframes pk-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pk-scale-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pk-slide-right {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pk-slide-left {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pk-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

@keyframes pk-pulse-ring {
    0%   { transform: scale(1);    opacity: 0.6; }
    100% { transform: scale(1.6);  opacity: 0; }
}

@keyframes pk-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes pk-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes pk-bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes pk-count-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pk-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pk-mesh-move {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-20px, 15px) scale(0.97); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes pk-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@keyframes pk-node-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,181,216,0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(0,181,216,0); }
}

/* --- Scroll-reveal base states --- */
.js .pk-animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
                transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.js .pk-animate-on-scroll[data-anim="fade-in"] {
    transform: none;
}

.js .pk-animate-on-scroll[data-anim="fade-down"] {
    transform: translateY(-20px);
}

.js .pk-animate-on-scroll[data-anim="slide-right"] {
    transform: translateX(-24px);
}

.js .pk-animate-on-scroll[data-anim="slide-left"] {
    transform: translateX(24px);
}

.js .pk-animate-on-scroll[data-anim="fade-left"] {
    transform: translateX(-24px);
}

.js .pk-animate-on-scroll[data-anim="fade-right"] {
    transform: translateX(24px);
}

.js .pk-animate-on-scroll[data-anim="scale-in"] {
    transform: scale(0.94);
}

.js .pk-animate-on-scroll[data-anim="reveal"] {
    clip-path: inset(0 0 100% 0);
    transform: none;
    transition: clip-path 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}

/* Revealed state */
.js .pk-animate-on-scroll.is-visible {
    opacity: 1;
    transform: none !important;
}

.js .pk-animate-on-scroll[data-anim="reveal"].is-visible {
    clip-path: inset(0 0 0 0);
}

/* Stagger delays */
.js .pk-animate-on-scroll[data-delay="50"]  { transition-delay: 50ms; }
.js .pk-animate-on-scroll[data-delay="100"] { transition-delay: 100ms; }
.js .pk-animate-on-scroll[data-delay="150"] { transition-delay: 150ms; }
.js .pk-animate-on-scroll[data-delay="200"] { transition-delay: 200ms; }
.js .pk-animate-on-scroll[data-delay="250"] { transition-delay: 250ms; }
.js .pk-animate-on-scroll[data-delay="300"] { transition-delay: 300ms; }
.js .pk-animate-on-scroll[data-delay="400"] { transition-delay: 400ms; }
.js .pk-animate-on-scroll[data-delay="500"] { transition-delay: 500ms; }

/* pk-hover-lift and pk-hover-glow are defined in blocks.css.
   Utility animation classes below are additive. */

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

.pk-shimmer-text {
    background: linear-gradient(90deg, var(--pk-text) 0%, var(--pk-accent) 40%, var(--pk-text) 80%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pk-shimmer 3s linear infinite;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .js .pk-animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pk-float { animation: none; }
    .pk-shimmer-text {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--pk-text);
    }
}

/* ── Above the fold: hero content is never hidden waiting for JS ──
   Elements inside a page's hero banner render immediately (they are usually the
   Largest Contentful Paint). They keep a short CSS-only rise-in that never sets
   opacity to 0, so the motion stays but the first paint is not delayed. */
.js :is(section, header)[class*="hero"] .pk-animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
    animation: pk-hero-rise .6s cubic-bezier(.22, .61, .36, 1) both;
}
.js :is(section, header)[class*="hero"] .pk-animate-on-scroll[data-delay="100"],
.js :is(section, header)[class*="hero"] .pk-animate-on-scroll[data-delay="150"] { animation-delay: .1s; }
.js :is(section, header)[class*="hero"] .pk-animate-on-scroll[data-delay="200"],
.js :is(section, header)[class*="hero"] .pk-animate-on-scroll[data-delay="300"],
.js :is(section, header)[class*="hero"] .pk-animate-on-scroll[data-delay="400"] { animation-delay: .2s; }
@keyframes pk-hero-rise {
    from { transform: translateY(14px); }
    to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .js :is(section, header)[class*="hero"] .pk-animate-on-scroll { animation: none; }
}