/* ================================================================
   ZEEVRON — UI Polish Layer
   Loaded after main.css. Pure refinement: motion, depth, micro-
   interactions. No structural or content changes.
   ================================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --shadow-soft:
    0 1px 2px rgba(44, 20, 72, 0.05),
    0 6px 18px -8px rgba(91, 47, 135, 0.16),
    0 14px 40px -18px rgba(91, 47, 135, 0.14);
  --shadow-card:
    0 1px 2px rgba(44, 20, 72, 0.05),
    0 8px 24px -10px rgba(91, 47, 135, 0.18),
    0 20px 48px -20px rgba(91, 47, 135, 0.16);
  --shadow-hover:
    0 2px 4px rgba(44, 20, 72, 0.06),
    0 14px 34px -12px rgba(91, 47, 135, 0.26),
    0 30px 70px -24px rgba(63, 30, 100, 0.24);
}

/* ===== Selection & scrollbar ===== */
::selection { background: var(--purple-200); color: var(--purple-900); }
html { scrollbar-color: var(--purple-300) transparent; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--purple-200);
  border-radius: 8px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--purple-300); }

/* ===== Scroll progress bar ===== */
.zvp-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 999;
  pointer-events: none;
  background: transparent;
}
.zvp-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--purple-600), var(--pink-500));
  border-radius: 0 2px 2px 0;
}

/* ===== Header refinement ===== */
.site-header {
  transition: border-color 0.25s, box-shadow 0.35s var(--ease-out), background 0.25s;
}
.site-header.scrolled {
  box-shadow: 0 8px 30px -18px rgba(63, 30, 100, 0.28);
}
.nav-links a:not(.btn) {
  transition: color 0.2s, background 0.25s var(--ease-out);
}

/* ===== Buttons: sheen + smoother lift ===== */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s var(--ease-out),
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.btn-primary::after,
.btn-pink::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-pink:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary:hover { box-shadow: 0 10px 32px -8px rgba(91, 47, 135, 0.55); }
.btn-pink:hover { box-shadow: 0 10px 32px -8px rgba(201, 59, 151, 0.5); }

/* Visible keyboard focus everywhere */
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--pink-500);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { border-radius: 999px; }

/* ===== Cards: unified, gentle lift ===== */
.problem-card,
.service-card,
.zv-svc-card,
.zv-incl-card,
.essay-card,
.gs-lesson-card,
.testimonial-card,
.card {
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    border-color 0.3s;
  will-change: transform;
}
.problem-card:hover,
.service-card:hover,
.zv-svc-card:hover,
.zv-incl-card:hover,
.essay-card:hover,
.gs-lesson-card:hover,
a.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--purple-300);
}

/* Card arrows nudge forward on hover */
.problem-card .arrow,
.service-card .arrow,
.essay-card .arrow {
  display: inline-flex;
  transition: transform 0.3s var(--ease-out), color 0.2s;
}
.problem-card:hover .arrow,
.service-card:hover .arrow,
.essay-card:hover .arrow {
  transform: translateX(5px);
  color: var(--pink-500);
}

/* Icons inside cards get a soft pop */
.problem-card .ico,
.service-card .ico {
  transition: transform 0.35s var(--ease-spring);
}
.problem-card:hover .ico,
.service-card:hover .ico {
  transform: translateY(-3px) scale(1.05);
}
.ico-img { border-radius: 12px; }

/* ===== Hero: quiet ambient glow + staggered entrance ===== */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(236, 133, 189, 0.14), transparent 70%),
    radial-gradient(42% 46% at 84% 72%, rgba(168, 120, 196, 0.18), transparent 70%),
    radial-gradient(30% 34% at 60% 10%, rgba(212, 255, 79, 0.06), transparent 70%);
  animation: zvpAurora 22s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
@keyframes zvpAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* Hero entrance: children stagger up on load.
   Override the generic data-reveal on hero columns so this owns it. */
.hero [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
.hero .eyebrow,
.hero h1,
.hero .lead,
.hero .pill-callout,
.hero .hero-cta,
.hero .mini-stats {
  opacity: 0;
  animation: zvpRise 0.85s var(--ease-out) forwards;
}
.hero .eyebrow      { animation-delay: 0.05s; }
.hero h1            { animation-delay: 0.14s; }
.hero .lead         { animation-delay: 0.26s; }
.hero .pill-callout { animation-delay: 0.38s; }
.hero .hero-cta     { animation-delay: 0.48s; }
.hero .mini-stats   { animation-delay: 0.6s; }
.hero .zv-india-journey {
  opacity: 0;
  animation: zvpFade 1.1s var(--ease-out) 0.35s forwards;
}
@keyframes zvpRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zvpFade {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Reveal-on-scroll refinement ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.75s var(--ease-out);
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* Auto-tagged reveals (added by zv-polish.js) */
.zvp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  transition-delay: var(--zvp-delay, 0s);
}
.zvp-reveal.zvp-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Tabs: smoother switching ===== */
.tab-bar button {
  transition: background 0.25s var(--ease-out), color 0.2s, box-shadow 0.25s;
}
.tab-panel.active {
  animation: zvpFade 0.5s var(--ease-out);
}

/* ===== Stats band: numbers settle in ===== */
.stats-band .stat .num {
  transition: transform 0.3s var(--ease-out);
}
.stats-band .stat:hover .num {
  transform: translateY(-2px);
}

/* ===== Testimonials & images ===== */
.testimonial-card img,
.zv-svc-card__thumb img {
  transition: transform 0.45s var(--ease-out);
}
.testimonial-card:hover img,
.zv-svc-card:hover .zv-svc-card__thumb img {
  transform: scale(1.03);
}

/* ===== Footer links: slide on hover ===== */
.site-footer a:not(.btn) {
  transition: color 0.2s, transform 0.25s var(--ease-out);
  display: inline-block;
}
.site-footer a:not(.btn):hover {
  transform: translateX(3px);
}

/* ===== Sticky CTA: gentle attention ===== */
.sticky-cta {
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.sticky-cta:hover {
  transform: translateY(-3px) scale(1.03);
}

/* ===== Inputs: calmer focus ===== */
input:focus, textarea:focus, select:focus {
  transition: border-color 0.2s, box-shadow 0.25s var(--ease-out);
}

/* ===== Reduced motion: switch everything off ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero .eyebrow, .hero h1, .hero .lead, .hero .pill-callout,
  .hero .hero-cta, .hero .mini-stats, .hero .zv-india-journey {
    opacity: 1;
    animation: none;
  }
  [data-reveal], .zvp-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .zvp-progress { display: none; }
}