/* ============================================================
   ANIMATION LAYER — mockup v1 for chanhvu.com
   Pure CSS + tiny JS. No libraries. Respects reduced-motion.
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes fadeUp   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes popIn    { 0% { opacity:0; transform:scale(.82) translateY(14px); } 70% { transform:scale(1.03) translateY(-2px); } 100% { opacity:1; transform:scale(1) translateY(0); } }
@keyframes gradShift{ 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes orbFloat { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(46px,-34px) scale(1.12); } 66% { transform:translate(-30px,22px) scale(.94); } }
@keyframes kenBurns { from { transform:scale(1) translateY(0); } to { transform:scale(1.14) translateY(-10px); } }
@keyframes shine    { from { left:-80%; } to { left:130%; } }
@keyframes marquee  { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes pulseGold{ 0%,100% { box-shadow:0 0 0 0 rgba(183,121,31,.45); } 50% { box-shadow:0 0 0 12px rgba(183,121,31,0); } }
@keyframes floatY   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes spinSlow { to { transform:rotate(360deg); } }
@keyframes barGrow  { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* ---------- Scroll reveal (JS adds .in) ---------- */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.22,.8,.3,1), transform .8s cubic-bezier(.22,.8,.3,1); }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-stagger > * { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal-stagger.in > * { opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s} .reveal-stagger.in > *:nth-child(2){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.27s} .reveal-stagger.in > *:nth-child(4){transition-delay:.38s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.49s} .reveal-stagger.in > *:nth-child(6){transition-delay:.60s}

/* ---------- Hero: animated navy gradient + drifting glow orbs ---------- */
.page-hero {
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(120deg,#10253c,#16324f,#1f4a73,#96620f,#16324f);
  background-size:280% 280%; animation:gradShift 16s ease infinite;
  padding:72px 0 62px; border-bottom:none;
}
.page-hero h1 { color:#fff; font-size:2.5rem; line-height:1.18; animation:fadeUp .9s ease both .1s; }
.page-hero p  { color:#e3ecf4; animation:fadeUp .9s ease both .32s; }
.page-hero .orb { position:absolute; border-radius:50%; filter:blur(52px); opacity:.55; pointer-events:none; }
.page-hero .orb.a { width:340px;height:340px; background:#b7791f; top:-110px; right:-70px;  animation:orbFloat 11s ease-in-out infinite; }
.page-hero .orb.b { width:260px;height:260px; background:#3d7dc2; bottom:-120px; left:-50px; animation:orbFloat 14s ease-in-out infinite reverse; }
.page-hero .container { position:relative; z-index:2; }
.page-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,#b7791f,#ffd97a,#b7791f); transform-origin:left; animation:barGrow 1.4s ease both .5s; }

/* ---------- Buttons: lift + shine sweep + gentle pulse on hero CTA ---------- */
.btn-anim, .page-hero a[href="#contact"], form button[type="submit"], .card .cta {
  position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-anim:hover, .page-hero a[href="#contact"]:hover, form button[type="submit"]:hover, .card .cta:hover {
  transform:translateY(-3px) scale(1.02); box-shadow:0 12px 26px rgba(16,37,60,.35);
}
.btn-anim::after, .page-hero a[href="#contact"]::after, form button[type="submit"]::after {
  content:""; position:absolute; top:0; bottom:0; width:45%; left:-80%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);
}
.btn-anim:hover::after, .page-hero a[href="#contact"]:hover::after, form button[type="submit"]:hover::after { animation:shine .8s ease; }
.page-hero a[href="#contact"] { animation:fadeUp .9s ease both .55s, pulseGold 2.6s ease-in-out infinite 1.6s; }

/* ---------- Header: shadow grows on scroll, logo spins, nav underline slides ---------- */
.site-header { transition:box-shadow .3s ease; }
.site-header.scrolled { box-shadow:0 8px 26px rgba(0,0,0,.35); }
.logo-mark { transition:transform .6s cubic-bezier(.22,.8,.3,1); }
.logo:hover .logo-mark { transform:rotate(360deg) scale(1.12); }
.main-nav a { position:relative; }
.main-nav a::after { content:""; position:absolute; left:11px; right:11px; bottom:4px; height:2px; border-radius:2px;
  background:#ffd97a; transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.main-nav a:hover::after { transform:scaleX(1); }

/* ---------- Photo banner: slow Ken Burns zoom ---------- */
.photo-banner { overflow:hidden; border-radius:16px; }
.photo-banner img { animation:kenBurns 18s ease-in-out infinite alternate; will-change:transform; }

/* ---------- Logo tiles: pop-in stagger + hover lift & icon float ---------- */
.logo-tile { transition:transform .3s ease, box-shadow .3s ease; }
.logo-tile:hover { transform:translateY(-6px); box-shadow:0 14px 28px rgba(16,37,60,.16); }
.logo-grid.in .logo-tile { animation:popIn .6s cubic-bezier(.22,.8,.3,1) both; }
.logo-grid.in .logo-tile:nth-child(3n+2){ animation-delay:.08s } .logo-grid.in .logo-tile:nth-child(3n){ animation-delay:.16s }
.logo-tile:hover img { animation:floatY 1.6s ease-in-out infinite; }

/* ---------- Section headings: gold underline grows in ---------- */
section h2 { position:relative; display:inline-block; padding-bottom:8px; }
section h2::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; border-radius:3px;
  background:linear-gradient(90deg,#b7791f,#ffd97a); transform:scaleX(0); transform-origin:left; transition:transform .9s ease .2s; }
section.in-view h2::after { transform:scaleX(1); }

/* ---------- Stats band: count-up numbers ---------- */
.stats-band { background:var(--navy-dark); color:#fff; padding:38px 0; overflow:hidden; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px; text-align:center; }
.stat .num { font-size:2.5rem; font-weight:800; color:#ffd97a; line-height:1.1; }
.stat .lbl { color:#c8d6e2; font-size:.95rem; margin-top:4px; }
.stats-band .stat { opacity:0; transform:translateY(20px); transition:all .7s ease; }
.stats-band.in .stat { opacity:1; transform:translateY(0); }
.stats-band.in .stat:nth-child(2){transition-delay:.12s} .stats-band.in .stat:nth-child(3){transition-delay:.24s} .stats-band.in .stat:nth-child(4){transition-delay:.36s}

/* ---------- Tech marquee: infinite scrolling strip ---------- */
.marquee { overflow:hidden; background:var(--bg-soft); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 0; }
.marquee-track { display:flex; gap:52px; width:max-content; animation:marquee 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { font-weight:700; color:var(--navy); white-space:nowrap; font-size:1.02rem; }
.marquee-track span i { color:#b7791f; font-style:normal; margin-right:52px; }

/* ---------- Pricing cards (pricing.html): raise + popular pulses ---------- */
.card { transition:transform .3s ease, box-shadow .3s ease; }
.card:hover { transform:translateY(-8px); box-shadow:0 20px 38px rgba(16,37,60,.18); }
.card.hot { animation:pulseGold 3s ease-in-out infinite; }

/* ---------- Form fields: focus glow ---------- */
form input, form select, form textarea { transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
form input:focus, form select:focus, form textarea:focus { outline:none; border-color:#b7791f !important; box-shadow:0 0 0 4px rgba(183,121,31,.18); transform:scale(1.01); }

/* ---------- Reduced motion: respect the visitor ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .reveal, .reveal-stagger > *, .stats-band .stat { opacity:1 !important; transform:none !important; }
}