/* ============================================================
   Betterwork Art Gallery — Animations & Keyframes
   ============================================================ */

/* ── KEYFRAMES ── */

/* Wave text gradient sweep */
@keyframes waveTxt {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Header gradient shift */
@keyframes gradShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Pulsing badge dot */
@keyframes pulseDot {
  0%, 100% { opacity:1; transform:scale(1); }
  50%       { opacity:.55; transform:scale(1.4); }
}

/* Hero content entrance */
@keyframes heroIn {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Floating art badge */
@keyframes floatBadge {
  0%, 100% { transform:translateY(0); }
  50%       { transform:translateY(-9px); }
}

/* Floating art frame decor */
@keyframes floatFrame {
  0%, 100% { transform:translateY(0) rotate(0deg); }
  50%       { transform:translateY(-14px) rotate(2deg); }
}

/* Marquee scroll */
@keyframes marqueeScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* Testimonial fade slide */
@keyframes fadeSlide {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Modal entrance */
@keyframes modalIn {
  from { opacity:0; transform:translateY(-18px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* WhatsApp pulse ring */
@keyframes pulseWA {
  0%, 100% { box-shadow:0 4px 20px rgba(37,211,102,.4); }
  50%       { box-shadow:0 4px 28px rgba(37,211,102,.7), 0 0 0 10px rgba(37,211,102,.08); }
}

/* Counter number count-up */
@keyframes countUp {
  from { opacity:0; }
  to   { opacity:1; }
}

/* Scroll reveal from bottom */
@keyframes revealUp {
  from { opacity:0; transform:translateY(36px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Shimmer skeleton loader */
@keyframes shimmer {
  0%   { background-position:-1000px 0; }
  100% { background-position:1000px 0; }
}

/* Animated border glow */
@keyframes borderPulse {
  0%, 100% { opacity:.5; }
  50%       { opacity:1; }
}

/* ── SCROLL INDICATOR ── */
.scroll-indicator {
  position:absolute; bottom:96px; left:50%; transform:translateX(-50%);
  z-index:10; display:flex; flex-direction:column; align-items:center;
  gap:6px; animation:heroIn 1s ease 1.2s both;
}
.si-wheel {
  width:24px; height:38px; border:2px solid rgba(255,255,255,.28); border-radius:12px;
  display:flex; justify-content:center; padding-top:5px;
}
.si-dot {
  width:4px; height:8px; background:rgba(255,255,255,.65); border-radius:2px;
  animation:siDot 2s ease-in-out infinite;
}
@keyframes siDot {
  0%   { transform:translateY(0); opacity:1; }
  100% { transform:translateY(12px); opacity:0; }
}

/* ── UTILITY ANIMATION CLASSES ── */

/* Lazy-reveal: applied by JS observer */
.reveal-on-scroll {
  opacity:0; transform:translateY(32px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.visible {
  opacity:1; transform:translateY(0);
}

/* Stagger delays */
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }
.delay-3 { transition-delay:.24s; }
.delay-4 { transition-delay:.32s; }
.delay-5 { transition-delay:.4s; }
.delay-6 { transition-delay:.48s; }

/* Float utility */
.float-anim {
  animation:floatBadge 4s ease-in-out infinite;
}
.float-anim-slow {
  animation:floatBadge 6s ease-in-out infinite reverse;
}

/* Hover lift */
.hover-lift { transition:transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform:translateY(-5px); box-shadow:0 12px 32px rgba(26,58,106,.16); }

/* Skeleton loading */
.skeleton {
  background:linear-gradient(90deg,#f0f4ff 25%,#e0e9ff 50%,#f0f4ff 75%);
  background-size:1000px 100%;
  animation:shimmer 2s infinite;
  border-radius:8px;
}

/* Active nav indicator */
.nav-lnk.nav-active {
  color:var(--navy-700);
  background:rgba(37,99,235,.06);
}
.nav-lnk.nav-active::after {
  width:55%;
}

/* Score circle animate-in */
.score-circle.animate svg circle:last-child {
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}

/* Blog card image scale */
.blog-img { will-change:transform; }

/* Service card pulse on focus */
.svc-card:focus-within {
  outline:2px solid var(--blue-500);
  outline-offset:2px;
}

/* Pricing card glow on popular */
.price-popular {
  box-shadow:0 0 0 1px rgba(200,164,94,.3), 0 20px 50px rgba(200,164,94,.12);
}

/* Tech tab indicator underline */
.ttab { position:relative; overflow:hidden; }
.ttab::after {
  content:''; position:absolute; bottom:0; left:0;
  width:100%; height:3px;
  background:var(--blue-500);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.ttab.active::after { transform:scaleX(1); }

/* Glassmorphism card helper */
.glass-card {
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.2);
}

/* Glow effects */
.glow-blue  { box-shadow:0 0 28px rgba(37,99,235,.2); }
.glow-gold  { box-shadow:0 0 28px rgba(200,164,94,.28); }
.glow-green { box-shadow:0 0 28px rgba(34,197,94,.2); }

/* Page load fade */
body { animation:pageLoad .5s ease; }
@keyframes pageLoad {
  from { opacity:.6; }
  to   { opacity:1; }
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   ENGAGING HEADING & TEXT ANIMATIONS — v2
   ============================================================ */

/* ── WORD-BY-WORD SLIDE UP ── */
.word-wr {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  line-height: 1.25;
}
.word-in {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  will-change: transform, opacity;
}
.word-in.play {
  animation: wordRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wordRise {
  0%   { transform: translateY(105%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Gradient span inside headings animates as a unit */
.word-in-el {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
}
.word-in-el.play {
  animation: wordRise 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── SECTION TAG BOUNCE ── */
.sec-tag, .prcv2-tag, .pv2-tag, .proc-tag, .why3-tag,
.hbv2-free-badge, .svc-v3-tag, .hbv2-form-badge {
  opacity: 0;
  transform: scale(0.7) translateY(8px);
}
.sec-tag.tag-visible, .prcv2-tag.tag-visible, .pv2-tag.tag-visible,
.proc-tag.tag-visible, .why3-tag.tag-visible, .hbv2-free-badge.tag-visible,
.svc-v3-tag.tag-visible, .hbv2-form-badge.tag-visible {
  animation: tagPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes tagPop {
  0%   { transform: scale(0.7) translateY(8px); opacity: 0; }
  70%  { transform: scale(1.06) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── PARAGRAPH BLUR-FADE UP ── */
.p-blur-fade {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(18px);
}
.p-blur-fade.p-visible {
  animation: blurFadeUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes blurFadeUp {
  0%   { opacity: 0; filter: blur(5px);  transform: translateY(18px); }
  40%  { opacity: .8; }
  100% { opacity: 1;  filter: blur(0);   transform: translateY(0); }
}

/* ── FEATURE LIST ITEM STAGGER ── */
.feat-stagger {
  opacity: 0;
  transform: translateX(-20px);
}
.feat-stagger.feat-visible {
  animation: featSlideIn 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes featSlideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── SECTION HEADING UNDERLINE DRAW ── */
.hdr-underline-wrap {
  position: relative;
  display: inline-block;
}
.hdr-underline-wrap::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, #6366f1, #7c3aed, #06b6d4);
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hdr-underline-wrap.underline-draw::after { width: 100%; }

/* ── CARD FLOAT UP (STAGGERED) ── */
.card-float-up {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
}
.card-float-up.cfloat-visible {
  animation: cardFloat 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cardFloat {
  0%   { opacity: 0; transform: translateY(36px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── GRADIENT SHIMMER (enhanced) ── */
.wave-hdg,
.wave-txt,
.hv2-purple, .hv2-teal, .hv2-amber,
.prcv2-blue, .svc-blue, .svc-gold,
.svc-v3-blue, .svc-v3-gold,
.hbv2-blue, .why3-blue, .pv2-title-blue {
  background-size: 250% auto !important;
  animation: shimmerGlow 4s linear infinite !important;
}
@keyframes shimmerGlow {
  0%   { background-position: 0% center; }
  50%  { background-position: 125% center; }
  100% { background-position: 250% center; }
}

/* ── COUNTER SCALE PULSE (on complete) ── */
@keyframes counterPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.counter-done { animation: counterPulse 0.5s ease forwards; }

/* ── HERO STATS COUNT UP GLOW ── */
.hv2-sn { transition: text-shadow .3s; }
.hv2-sn.counting { text-shadow: 0 0 20px rgba(129,140,248,.5); }

/* ── SECTION DIVIDER LINE DRAW ── */
@keyframes lineDraw {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}
.sec-wave svg path {
  animation: none; /* no jank on wave separator */
}

/* ── FLOATING SPARKLE (for selected accents) ── */
@keyframes sparkleFloat {
  0%,100% { transform: translateY(0) rotate(0deg); opacity: .5; }
  33%      { transform: translateY(-8px) rotate(12deg); opacity: .9; }
  66%      { transform: translateY(4px) rotate(-8deg); opacity: .6; }
}
.hbv2-sp { animation: sparkleFloat 3s ease-in-out infinite; }
.sp1 { animation-delay: 0s; }
.sp2 { animation-delay: 1s; }
.sp3 { animation-delay: 2s; }

/* ── PRICING CARD HOVER LIFT ── */
.prcv2-card {
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s ease;
}
.prcv2-card:hover { transform: translateY(-6px) scale(1.01); }
.prcv2-popular:hover { transform: translateY(-8px) scale(1.015) !important; }

/* ── SCROLL-TRIGGERED BG GLOW FOR SECTIONS ── */
.sec-hdr[data-aos].aos-animate .sec-tag,
.prcv2-hdr[data-aos].aos-animate .prcv2-tag {
  animation: tagPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

/* ── REDUCED MOTION RESPECT ── */
@media (prefers-reduced-motion: reduce) {
  .word-in, .word-in-el, .p-blur-fade, .feat-stagger,
  .card-float-up, .sec-tag, .prcv2-tag {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}