/* =====================================================================
   Misuy Prisha — Rich Animations Stylesheet
   v1.0.0 — Apr 2026
   Self-contained, opt-in via [data-animate], .animate-*, .is-visible.
   Honors prefers-reduced-motion: reduce as a hard kill-switch.
   ===================================================================== */

/* ---------- CSS variables (available for tuning by main.css) ---------- */
:root {
  --anim-dur-fast: 320ms;
  --anim-dur: 600ms;
  --anim-dur-slow: 900ms;
  --anim-ease: cubic-bezier(.22, .61, .36, 1);
  --anim-stagger-step: 90ms;
  --anim-translate: 28px;
  --anim-gold: #C9A24D;
}

/* ---------- Keyframes ---------- */
@keyframes msuFadeUp {
  from { opacity: 0; transform: translate3d(0, var(--anim-translate), 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes msuFadeRight {
  from { opacity: 0; transform: translate3d(var(--anim-translate), 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes msuFadeLeft {
  from { opacity: 0; transform: translate3d(calc(var(--anim-translate) * -1), 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes msuFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes msuZoomIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes msuPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201,162,77,.55); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(201,162,77,0); }
}
@keyframes msuBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes msuFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes msuDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-12px, 6px, 0); }
}
@keyframes msuDrawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes msuSpinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes msuRingFill {
  from { stroke-dashoffset: var(--ring-circ, 283); }
  to   { stroke-dashoffset: var(--ring-target, 0); }
}
@keyframes msuCheckDraw {
  from { stroke-dashoffset: 48; }
  to   { stroke-dashoffset: 0; }
}
@keyframes msuShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---------- Initial state for opt-in elements ---------- */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--anim-dur) var(--anim-ease),
              transform var(--anim-dur) var(--anim-ease);
}
[data-animate="fade-up"]    { transform: translate3d(0, var(--anim-translate), 0); }
[data-animate="fade-right"] { transform: translate3d(var(--anim-translate), 0, 0); }
[data-animate="fade-left"]  { transform: translate3d(calc(var(--anim-translate) * -1), 0, 0); }
[data-animate="fade-in"]    { transform: none; }
[data-animate="zoom-in"]    { transform: scale(.92); }

[data-animate].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger via inline custom property (set by JS): --i = index */
[data-animate][style*="--i"] { transition-delay: calc(var(--i, 0) * var(--anim-stagger-step)); }

/* ---------- Utility / hook classes ---------- */
.animate-fade-up { animation: msuFadeUp var(--anim-dur) var(--anim-ease) both; }
.animate-fade-right { animation: msuFadeRight var(--anim-dur) var(--anim-ease) both; }
.animate-fade-in { animation: msuFadeIn var(--anim-dur) var(--anim-ease) both; }
.animate-zoom-in { animation: msuZoomIn var(--anim-dur) var(--anim-ease) both; }

/* Stagger children — applied to a parent container; JS sets --i on children */
.animate-stagger > * { opacity: 0; }
.animate-stagger.is-visible > * {
  animation: msuFadeUp var(--anim-dur) var(--anim-ease) both;
  animation-delay: calc(var(--i, 0) * var(--anim-stagger-step));
}

/* ---------- Hero entrance (page load) ---------- */
.msu-hero-enter > * { opacity: 0; transform: translateY(18px); }
.msu-hero-enter.is-ready > * {
  animation: msuFadeUp var(--anim-dur) var(--anim-ease) both;
}
.msu-hero-enter.is-ready > *:nth-child(1) { animation-delay: 60ms; }
.msu-hero-enter.is-ready > *:nth-child(2) { animation-delay: 160ms; }
.msu-hero-enter.is-ready > *:nth-child(3) { animation-delay: 260ms; }
.msu-hero-enter.is-ready > *:nth-child(4) { animation-delay: 360ms; }
.msu-hero-enter.is-ready > *:nth-child(5) { animation-delay: 460ms; }

/* Word-by-word reveal for hero h1 (JS wraps each word in span.msu-word) */
.msu-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  animation: msuFadeUp 520ms var(--anim-ease) both;
}

/* ---------- Scroll progress bar ---------- */
.msu-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 9998;
  pointer-events: none;
}
.msu-scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C9A24D 0%, #E0BD6A 50%, #C9A24D 100%);
  background-size: 200% 100%;
  box-shadow: 0 1px 6px rgba(201, 162, 77, .55);
  transition: width 80ms linear;
  animation: msuShimmer 4s linear infinite;
}

/* ---------- Hover micro-interactions ---------- */
.btn-lift, .cta-button, .hero-form-submit, .lead-form-submit {
  transition: transform .18s var(--anim-ease), box-shadow .22s var(--anim-ease), filter .2s ease;
}
.btn-lift:hover, .cta-button:hover, .hero-form-submit:hover, .lead-form-submit:hover {
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 10px 22px rgba(11, 46, 74, .18), 0 0 0 1px rgba(201,162,77,.35);
}

.card-lift {
  transition: transform .25s var(--anim-ease), box-shadow .3s var(--anim-ease);
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(11, 46, 74, .14);
}

/* Service cards on hub pages — hover lift even without explicit class */
.igtax-service-card,
.service-card,
.pillar-card,
.guide-card,
.tool-card {
  transition: transform .28s var(--anim-ease), box-shadow .3s var(--anim-ease), border-color .25s ease;
}
.igtax-service-card:hover,
.service-card:hover,
.pillar-card:hover,
.guide-card:hover,
.tool-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(11, 46, 74, .15);
}

/* Photo of Ilanit — gentle zoom on hover */
.ilanit-photo-wrap, .hero-image .photo-frame, .hero-image img {
  overflow: hidden;
}
.ilanit-photo-wrap img,
.hero-image img {
  transition: transform .6s var(--anim-ease), filter .4s ease;
}
.ilanit-photo-wrap:hover img,
.hero-image:hover img {
  transform: scale(1.04);
}

/* Floating Ilanit hero photo (subtle) */
.msu-float { animation: msuFloat 5s ease-in-out infinite; }

/* ---------- Decorative ---------- */
.hero-bg-svg {
  will-change: transform;
}
.hero-bg-svg.msu-drift { animation: msuDrift 14s ease-in-out infinite; }

/* Section title underline draw — applied via JS or .msu-underline-draw class */
.msu-underline-draw { position: relative; display: inline-block; }
.msu-underline-draw::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -6px;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #C9A24D, #E0BD6A);
  transform-origin: right; /* RTL */
  transform: scaleX(0);
  transition: transform .6s var(--anim-ease);
  border-radius: 2px;
}
.msu-underline-draw.is-visible::after { transform: scaleX(1); }

/* Sticky CTA bar pulse — every 8s when not interacted */
.misuy-sticky-mobile-cta .msmc-cta {
  transition: transform .25s var(--anim-ease), box-shadow .25s var(--anim-ease);
}
.misuy-sticky-mobile-cta.msu-pulse .msmc-cta {
  animation: msuPulse 1.4s var(--anim-ease) 1;
}

/* Floating WhatsApp / phone bob */
.misuy-sticky-mobile-cta .msmc-wa { animation: msuBob 3.4s ease-in-out infinite; }
.misuy-sticky-mobile-cta .msmc-tel { animation: msuBob 3.4s ease-in-out infinite .6s; }

/* ---------- Number counters / progress rings ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

.msu-progress-ring {
  display: inline-block;
  position: relative;
  width: 96px;
  height: 96px;
}
.msu-progress-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.msu-progress-ring__track { fill: none; stroke: rgba(11, 46, 74, .08); stroke-width: 8; }
.msu-progress-ring__bar {
  fill: none;
  stroke: var(--anim-gold);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-circ, 283);
  stroke-dashoffset: var(--ring-circ, 283);
  transition: stroke-dashoffset 1.4s var(--anim-ease);
}
.msu-progress-ring.is-visible .msu-progress-ring__bar {
  stroke-dashoffset: var(--ring-target, 0);
}
.msu-progress-ring__label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.1rem; color: #0B2E4A;
}

/* Lead form success state — drawn checkmark */
.msu-form-success {
  display: inline-flex; align-items: center; gap: 8px;
  color: #15803D; font-weight: 600;
}
.msu-form-success svg path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: msuCheckDraw 600ms var(--anim-ease) forwards;
}

/* Form focus pulse */
.hero-lead-form input:focus,
.lead-form input:focus,
.hero-lead-form select:focus,
.lead-form select:focus,
.hero-lead-form textarea:focus,
.lead-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 77, .28);
  transition: box-shadow .2s ease;
}

/* Tikun-190 calculator accent pulse */
.tikun-190-accent { animation: msuPulse 3.2s var(--anim-ease) infinite; transform-origin: center; }

/* ---------- Reduced motion — HARD kill-switch ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
    transition-property: opacity !important;
    scroll-behavior: auto !important;
  }
  [data-animate],
  [data-animate].is-visible,
  .animate-stagger > *,
  .msu-hero-enter > *,
  .msu-word {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .msu-scroll-progress { display: none !important; }
  .misuy-sticky-mobile-cta .msmc-wa,
  .misuy-sticky-mobile-cta .msmc-tel,
  .msu-float,
  .hero-bg-svg.msu-drift,
  .tikun-190-accent { animation: none !important; }
  .msu-progress-ring__bar { transition: none !important; stroke-dashoffset: var(--ring-target, 0) !important; }
}