/* ============================================================
   NEKRO ZOMBIE DESIGN — animations.css
   Safari-compatible: -webkit- prefixes everywhere
   ============================================================ */

/* ---------- SCROLL REVEAL BASE ---------- */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  -webkit-transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1),
                      -webkit-transform 0.75s cubic-bezier(0.4,0,0.2,1);
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1),
              transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal-up    { -webkit-transform: translateY(44px);   transform: translateY(44px); }
.reveal-left  { -webkit-transform: translateX(-52px);  transform: translateX(-52px); }
.reveal-right { -webkit-transform: translateX(52px);   transform: translateX(52px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}

/* Stagger delays */
.delay-1 { -webkit-transition-delay: 0.08s; transition-delay: 0.08s; }
.delay-2 { -webkit-transition-delay: 0.18s; transition-delay: 0.18s; }
.delay-3 { -webkit-transition-delay: 0.28s; transition-delay: 0.28s; }
.delay-4 { -webkit-transition-delay: 0.38s; transition-delay: 0.38s; }
.delay-5 { -webkit-transition-delay: 0.48s; transition-delay: 0.48s; }

/* ---------- HERO ENTRANCE KEYFRAMES ---------- */
@-webkit-keyframes heroSlideUp {
  from { opacity: 0; -webkit-transform: translateY(32px); transform: translateY(32px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero animation classes */
.hero-a1 { -webkit-animation: heroSlideUp 0.8s 0.15s cubic-bezier(0.4,0,0.2,1) both; animation: heroSlideUp 0.8s 0.15s cubic-bezier(0.4,0,0.2,1) both; }
.hero-a2 { -webkit-animation: heroSlideUp 0.9s 0.30s cubic-bezier(0.4,0,0.2,1) both; animation: heroSlideUp 0.9s 0.30s cubic-bezier(0.4,0,0.2,1) both; }
.hero-a3 { -webkit-animation: heroSlideUp 0.8s 0.50s cubic-bezier(0.4,0,0.2,1) both; animation: heroSlideUp 0.8s 0.50s cubic-bezier(0.4,0,0.2,1) both; }
.hero-a4 { -webkit-animation: heroSlideUp 0.8s 0.65s cubic-bezier(0.4,0,0.2,1) both; animation: heroSlideUp 0.8s 0.65s cubic-bezier(0.4,0,0.2,1) both; }
.hero-a5 { -webkit-animation: heroFadeIn  0.8s 0.85s cubic-bezier(0.4,0,0.2,1) both; animation: heroFadeIn  0.8s 0.85s cubic-bezier(0.4,0,0.2,1) both; }

/* ---------- TITLE GHOST SHIMMER ---------- */
@-webkit-keyframes ghostShimmer {
  0%,100% { opacity: 0.18; }
  50%     { opacity: 0.30; }
}
@keyframes ghostShimmer {
  0%,100% { opacity: 0.18; }
  50%     { opacity: 0.30; }
}
.title-ghost {
  opacity: 0.22;
}

/* ---------- SECTION LABEL LINE GROW ---------- */
@-webkit-keyframes lineGrow {
  from { -webkit-transform: scaleX(0); transform: scaleX(0); }
  to   { -webkit-transform: scaleX(1); transform: scaleX(1); }
}
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.section-label.visible .accent-line {
  -webkit-animation: lineGrow 0.5s 0.1s cubic-bezier(0.4,0,0.2,1) both;
  animation: lineGrow 0.5s 0.1s cubic-bezier(0.4,0,0.2,1) both;
  -webkit-transform-origin: left;
  transform-origin: left;
}

/* ---------- STAT COUNTER POP ---------- */
@-webkit-keyframes statPop {
  0%   { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  75%  { -webkit-transform: scale(1.08); transform: scale(1.08); }
  100% { -webkit-transform: scale(1);   transform: scale(1);   opacity: 1; }
}
@keyframes statPop {
  0%   { transform: scale(0.6); opacity: 0; }
  75%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.stat-num.counted {
  -webkit-animation: statPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
  animation: statPop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ---------- PHOTO CORNER SLIDE IN ---------- */
@-webkit-keyframes cornerTL { from { width:0; height:0; } to { width:22px; height:22px; } }
@-webkit-keyframes cornerBR { from { width:0; height:0; } to { width:22px; height:22px; } }
@keyframes cornerTL { from { width:0; height:0; } to { width:22px; height:22px; } }
@keyframes cornerBR { from { width:0; height:0; } to { width:22px; height:22px; } }

.about-photo.visible .pc-tl,
.about-photo.visible .pc-tr {
  -webkit-animation: cornerTL 0.4s 0.5s cubic-bezier(0.4,0,0.2,1) both;
  animation: cornerTL 0.4s 0.5s cubic-bezier(0.4,0,0.2,1) both;
}
.about-photo.visible .pc-bl,
.about-photo.visible .pc-br {
  -webkit-animation: cornerBR 0.4s 0.65s cubic-bezier(0.4,0,0.2,1) both;
  animation: cornerBR 0.4s 0.65s cubic-bezier(0.4,0,0.2,1) both;
}

/* ---------- SERVICE CARD PULSE (highlight) ---------- */
@-webkit-keyframes cardGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,100,0,0.3); }
  50%     { box-shadow: 0 0 28px 6px rgba(255,100,0,0.1); }
}
@keyframes cardGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,100,0,0.3); }
  50%     { box-shadow: 0 0 28px 6px rgba(255,100,0,0.1); }
}
.service-card.service-highlight {
  box-shadow: 0 0 20px 4px rgba(255,100,0,0.08);
}

/* ---------- FILTER BTN ACTIVE SCALE ---------- */
@-webkit-keyframes filterPop {
  0%   { -webkit-transform: scale(0.92); transform: scale(0.92); }
  60%  { -webkit-transform: scale(1.04); transform: scale(1.04); }
  100% { -webkit-transform: scale(1);    transform: scale(1); }
}
@keyframes filterPop {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.filter-btn.active {
  -webkit-animation: filterPop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
  animation: filterPop 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ---------- PORTFOLIO ITEM HOVER LIFT ---------- */
.portfolio-item {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform;
}

/* ---------- BUTTON SHIMMER ---------- */
.btn-primary {
  will-change: transform, box-shadow;
}

/* ---------- FORM SUBMIT LOADING STATE ---------- */
@-webkit-keyframes btnLoading {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.6; }
}
@keyframes btnLoading {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.6; }
}
.btn-submit.loading {
  -webkit-animation: btnLoading 1s ease-in-out infinite;
  animation: btnLoading 1s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- NAVBAR LOGO SPIN ON HOVER ---------- */
.logo-img-wrap {
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.logo-img-wrap:hover {
  -webkit-transform: rotate(8deg) scale(1.08);
  transform: rotate(8deg) scale(1.08);
}

/* ---------- HERO TAGS STAGGER (done via JS) ---------- */
.hero-tags span {
  display: inline-block;
  -webkit-transition: color 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, transform 0.3s;
}

/* ---------- ABOUT TAG HOVER ---------- */
.about-tags span {
  -webkit-transition: background 0.25s, color 0.25s, -webkit-transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  transition: background 0.25s, color 0.25s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.about-tags span:hover {
  -webkit-transform: translateY(-2px) scale(1.04);
  transform: translateY(-2px) scale(1.04);
}

/* ---------- CI ICON HOVER ---------- */
.ci-icon {
  -webkit-transition: background 0.25s, border-color 0.25s, -webkit-transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  transition: background 0.25s, border-color 0.25s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.contact-item:hover .ci-icon {
  background: rgba(255,100,0,0.1);
  border-color: rgba(255,100,0,0.3);
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

/* ---------- REDUCED MOTION OVERRIDES ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right {
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
  .hero-a1, .hero-a2, .hero-a3, .hero-a4, .hero-a5,
  .title-ghost, .logo-accent,
  .service-card.service-highlight {
    -webkit-animation: none !important;
    animation: none !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
  .ticker-track { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; }
}