/* =========================================================
   Kian Hock — UI enhancement layer (additive, non-destructive)
   Drop-in: <link rel="stylesheet" href="/enhance.css">
   Revert: delete this file + the two script tags + this link.
   No original CSS / JS / markup is overridden.
   ========================================================= */

:root {
  --kh-ease: cubic-bezier(.22, .61, .36, 1);
  --kh-ease-out: cubic-bezier(.16, 1, .3, 1);
  --kh-soft: 0 14px 40px -16px rgba(15, 23, 42, 0.35);
  --kh-soft-amber: 0 14px 40px -16px rgba(245, 158, 11, 0.35);
}

/* ---------- Horizontal-overflow guard ----------
   `clip` (not `hidden`) so the fixed-position back-to-top /
   contact float buttons are not constrained by a stacking context. */
html { overflow-x: clip; overflow-y: auto; }

/* ---------- Hero ambient glow (CSS-only) ---------- */
.hero-grid, .hero {
  position: relative;
  isolation: isolate;
}
.hero-grid::before, .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 30%, rgba(59, 130, 246, 0.18), transparent 70%),
    radial-gradient(50% 60% at 90% 80%, rgba(245, 158, 11, 0.10), transparent 70%);
  filter: blur(34px);
  z-index: 0;
  pointer-events: none;
  animation: kh-breathe 9s ease-in-out infinite;
}
@keyframes kh-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.04); opacity: 1; }
}
.hero-grid > *:not(.hero-glow-dot),
.hero > * {
  position: relative;
  z-index: 1;
}

/* ---------- Scroll reveal ----------
   IMPORTANT: animate from a class added by JS (`.kh-reveal` →
   `.kh-reveal.is-in`). Default state is visible, so users with JS
   disabled or interrupted loading see real content immediately. */
.kh-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--kh-ease-out), transform .75s var(--kh-ease-out);
  will-change: opacity, transform;
}
.kh-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Stagger — apply to any list/grid of enriched cards */
.kh-stagger > * { transition-delay: 0ms; }
.kh-stagger > *:nth-child(1){ transition-delay: 60ms; }
.kh-stagger > *:nth-child(2){ transition-delay: 130ms; }
.kh-stagger > *:nth-child(3){ transition-delay: 200ms; }
.kh-stagger > *:nth-child(4){ transition-delay: 270ms; }
.kh-stagger > *:nth-child(5){ transition-delay: 340ms; }
.kh-stagger > *:nth-child(6){ transition-delay: 410ms; }
.kh-stagger > *:nth-child(7){ transition-delay: 480ms; }
.kh-stagger > *:nth-child(8){ transition-delay: 550ms; }

/* ---------- Hero word-by-word fade ---------- */
.kh-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: kh-word-in .7s var(--kh-ease-out) forwards;
  word-break: keep-all;
}
@keyframes kh-word-in {
  to { opacity: 1; transform: none; }
}

/* ---------- Cards lift on hover ---------- */
.kh-lift {
  transition:
    transform .35s var(--kh-ease-out),
    border-color .35s var(--kh-ease-out),
    box-shadow .35s var(--kh-ease-out);
}
.kh-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--kh-soft);
  border-color: rgba(59, 130, 246, 0.45);
}

/* ---------- Buttons micro-lift ---------- */
a, button {
  backface-visibility: hidden;
}
[class*="btn-"]:hover {
  transform: translateY(-1px);
  transition: transform .2s var(--kh-ease-out);
}

/* ---------- Form inputs focus polish ---------- */
.kh-input {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.kh-input:focus,
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* ---------- Contact float button breathing ---------- */
.contact-float a,
#waFloatBtn, #callFloatBtn {
  transition: transform .25s var(--kh-ease-out), box-shadow .25s var(--kh-ease-out);
}
.contact-float a:hover,
#waFloatBtn:hover, #callFloatBtn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: var(--kh-soft-amber);
}

/* ---------- Stats counters gentle entrance ----------
   The hero stats are 4 stat tiles in a grid — keep them visible
   by default; just animate numbers up if a data-target hint exists. */
.stat-tile, .hero-stats > * {
  transition: transform .3s var(--kh-ease-out);
}
.stat-tile:hover, .hero-stats > *:hover {
  transform: translateY(-2px);
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .kh-reveal,
  .kh-lift,
  .kh-word,
  .hero-grid::before,
  .hero::before,
  [class*="btn-"],
  .contact-float a,
  #waFloatBtn, #callFloatBtn,
  .stat-tile, .hero-stats > *,
  .kh-input,
  input, textarea, select {
    animation: none !important;
    transition: none !important;
  }
  .kh-reveal { opacity: 1; transform: none; }
}

/* ---------- Phone niceties ---------- */
@media (max-width: 640px) {
  .hero-grid::before, .hero::before { filter: blur(28px); }
}