/* ==========================================================================
   DR. SMITH KIIZA INTERNATIONAL CIVIL AND CRIMINAL ATTORNEYS
   Motion system — keyframes, choreography, and animation utilities
   ==========================================================================
   INDEX
   01. Motion tokens
   02. Page loader choreography
   03. Hero entrance sequence
   04. Reveal primitives (used by [data-reveal])
   05. Line & rule drawing
   06. Gold shimmer & accent loops
   07. Navigation & menu motion
   08. Card & link micro-interactions
   09. Button motion
   10. Form field motion
   11. Testimonial & modal motion
   12. Timeline choreography
   13. Floating action button motion
   14. Decorative ambient motion (slow, restrained)
   15. AI assistant motion (chat UI)
   16. Status & feedback motion
   17. Utility animation classes
   18. Reduced-motion overrides (extended)
   ========================================================================== */


/* ==========================================================================
   01. MOTION TOKENS
   ========================================================================== */
:root{
  /* Easing curves ---------------------------------------------------------- */
  --ease-linear:      linear;
  --ease-soft:         cubic-bezier(.25,.46,.45,.94);      /* easeOutQuad */
  --ease-smooth:       cubic-bezier(.4,0,.2,1);             /* material std */
  --ease-out-soft:     cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:     cubic-bezier(.16,1,.3,1);
  --ease-in-out-soft:  cubic-bezier(.65,.05,.36,1);
  --ease-anticipate:   cubic-bezier(.68,-0.55,.27,1.55);
  --ease-glide:        cubic-bezier(.4,.14,.3,1);

  /* Durations -------------------------------------------------------------- */
  --t-instant:  120ms;
  --t-fast:     220ms;
  --t-mid:      380ms;
  --t-slow:     620ms;
  --t-reveal:   900ms;
  --t-cinema:   1400ms;
  --t-ambient:  6000ms;

  /* Stagger steps ---------------------------------------------------------- */
  --stagger-xs: 40ms;
  --stagger-sm: 70ms;
  --stagger-md: 110ms;
  --stagger-lg: 160ms;
}


/* ==========================================================================
   02. PAGE LOADER CHOREOGRAPHY
   ========================================================================== */
@keyframes loaderSpin{
  0%   { transform: rotate(0deg);   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0; }
}

@keyframes loaderBar{
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(.72); }
  100% { transform: scaleX(1); }
}

@keyframes loaderPulse{
  0%,100% { opacity:.35 }
  50%     { opacity:.85 }
}

.loader-mark{
  animation: loaderSpin 2.4s var(--ease-in-out-soft) infinite;
  transform-origin: 50% 50%;
}

.loader-label{
  animation: loaderPulse 2.2s var(--ease-soft) infinite;
}


/* ==========================================================================
   03. HERO ENTRANCE SEQUENCE
   ---------------------------------------------------------------------------
   Choreographed in style.css using inline animation-delays on:
   .hero-media img, .hero-eyebrow, .hero-title .word, .hero-sub,
   .hero-ctas, .hero-accent, .hero-aside, .hero-scroll.
   The keyframes live here.
   ========================================================================== */

@keyframes heroImageZoom{
  0%   { opacity:0; transform: scale(1.18); filter: blur(6px) grayscale(.15) brightness(.5); }
  45%  { opacity:.7; filter: blur(2px) grayscale(.12) brightness(.65); }
  100% { opacity:1; transform: scale(1.08); filter: blur(0) grayscale(.08) brightness(.72); }
}

@keyframes heroMediaReveal{
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes wordReveal{
  0%   { transform: translateY(105%) rotate(2deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}

@keyframes fadeUp{
  from { opacity:0; transform: translateY(22px); }
  to   { opacity:1; transform: translateY(0); }
}

@keyframes fadeDown{
  from { opacity:0; transform: translateY(-16px); }
  to   { opacity:1; transform: translateY(0); }
}

@keyframes fadeIn{
  from { opacity:0; }
  to   { opacity:1; }
}

@keyframes fadeOut{
  from { opacity:1; }
  to   { opacity:0; }
}

@keyframes subtleFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

@keyframes heroGridDrift{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 90px 90px, 90px 90px; }
}


/* ==========================================================================
   04. REVEAL PRIMITIVES
   ---------------------------------------------------------------------------
   These keyframes feed utility classes (.anim-*) and are also referenced by
   animation short-hands triggered via JS class toggles.
   ========================================================================== */

@keyframes revealUp{
  from { opacity:0; transform: translate3d(0, 34px, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}

@keyframes revealDown{
  from { opacity:0; transform: translate3d(0, -28px, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}

@keyframes revealLeft{
  from { opacity:0; transform: translate3d(-36px, 0, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}

@keyframes revealRight{
  from { opacity:0; transform: translate3d(36px, 0, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}

@keyframes revealScale{
  from { opacity:0; transform: scale(.94); }
  to   { opacity:1; transform: scale(1); }
}

@keyframes revealMask{
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes revealMaskLeft{
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes revealBlur{
  0%   { opacity:0; filter: blur(10px); transform: translateY(16px); }
  60%  { opacity:1; }
  100% { opacity:1; filter: blur(0); transform: translateY(0); }
}

@keyframes revealCurtain{
  from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}


/* ==========================================================================
   05. LINE & RULE DRAWING
   ========================================================================== */
@keyframes drawLine{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes drawLineVertical{
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes drawLineBoth{
  from { transform: scaleX(0); transform-origin: center; }
  to   { transform: scaleX(1); transform-origin: center; }
}

@keyframes lineSweep{
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@keyframes lineGlow{
  0%,100% { box-shadow: 0 0 0 0 rgba(182,154,99,0); }
  50%     { box-shadow: 0 0 18px 2px rgba(182,154,99,.32); }
}

@keyframes scrollLine{
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}


/* ==========================================================================
   06. GOLD SHIMMER & ACCENT LOOPS
   ========================================================================== */
@keyframes shimmer{
  0%   { transform: translateX(-120%); }
  45%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@keyframes goldPulse{
  0%,100% {
    box-shadow: 0 0 0 0 rgba(182,154,99,.28),
                0 0 0 0 rgba(182,154,99,.14);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(182,154,99,0),
                0 0 0 16px rgba(182,154,99,0);
  }
}

@keyframes goldRing{
  0%   { box-shadow: 0 0 0 0 rgba(182,154,99,.42); }
  70%  { box-shadow: 0 0 0 14px rgba(182,154,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(182,154,99,0); }
}

@keyframes gradientShift{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes textShimmer{
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes caretBlink{
  0%,49%   { opacity:1; }
  50%,100% { opacity:0; }
}


/* ==========================================================================
   07. NAVIGATION & MENU MOTION
   ========================================================================== */
@keyframes navSlideDown{
  from { transform: translateY(-100%); opacity:0; }
  to   { transform: translateY(0); opacity:1; }
}

@keyframes navSlideUp{
  from { transform: translateY(0); opacity:1; }
  to   { transform: translateY(-100%); opacity:0; }
}

@keyframes menuReveal{
  0%   { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes menuItemIn{
  0%   { opacity:0; transform: translateY(18px); }
  100% { opacity:1; transform: translateY(0); }
}

@keyframes indicatorFadeIn{
  from { opacity:0; transform: scaleX(.4); transform-origin:left center; }
  to   { opacity:1; transform: scaleX(1); transform-origin:left center; }
}

.navbar{ animation: navSlideDown .6s var(--ease-out-expo) both; }

.mobile-menu.is-open{ animation: menuReveal .6s var(--ease-out-expo) both; }


/* ==========================================================================
   08. CARD & LINK MICRO-INTERACTIONS
   ========================================================================== */
@keyframes cardLift{
  from { transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0); }
  to   { transform: translateY(-4px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); }
}

@keyframes arrowSlide{
  0%   { transform: translateX(0); }
  50%  { transform: translateX(6px); }
  100% { transform: translateX(4px); }
}

@keyframes arrowBounceRight{
  0%   { transform: translateX(0); }
  60%  { transform: translateX(6px); }
  100% { transform: translateX(4px); }
}

@keyframes underlineGrow{
  from { transform: scaleX(0); transform-origin:left center; }
  to   { transform: scaleX(1); transform-origin:left center; }
}

@keyframes dotPulse{
  0%   { transform: scale(.85); opacity:.5; }
  60%  { transform: scale(1.25); opacity:1; }
  100% { transform: scale(1); opacity:1; }
}

@keyframes indexFadeIn{
  0%   { opacity:0; transform: translateY(-6px); }
  100% { opacity:1; transform: translateY(0); }
}


/* ==========================================================================
   09. BUTTON MOTION
   ========================================================================== */
@keyframes btnSheen{
  0%   { transform: translateX(-110%) skewX(-12deg); }
  100% { transform: translateX(220%) skewX(-12deg); }
}

@keyframes btnPulseRing{
  0%   { box-shadow: 0 0 0 0 rgba(182,154,99,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(182,154,99,0); }
  100% { box-shadow: 0 0 0 0 rgba(182,154,99,0); }
}

.btn-gold{
  position:relative;
  overflow:hidden;
}
.btn-gold::after{
  content:"";
  position:absolute;
  inset:0;
  top:0;
  left:-40%;
  width:40%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,.32) 40%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.32) 60%,
    transparent 100%
  );
  transform: translateX(-110%) skewX(-12deg);
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.btn-gold:hover::after{
  opacity:1;
  animation: btnSheen 900ms var(--ease-glide);
}


/* ==========================================================================
   10. FORM FIELD MOTION
   ========================================================================== */
@keyframes fieldFocusGlow{
  from { box-shadow: 0 1px 0 0 var(--gold); }
  to   { box-shadow: 0 1px 0 0 var(--gold), 0 6px 20px -8px rgba(182,154,99,.45); }
}

@keyframes labelRise{
  from { transform: translateY(6px); opacity:0; }
  to   { transform: translateY(0); opacity:1; }
}

@keyframes errorShake{
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(2px); }
}

@keyframes errorFadeIn{
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: translateY(0); }
}

@keyframes successPop{
  0%   { transform: scale(.85); opacity:0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity:1; }
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  animation: errorShake .42s var(--ease-in-out-soft);
}
.field .err[data-err]:not(:empty){
  animation: errorFadeIn .3s var(--ease-out-soft);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  animation: fieldFocusGlow .4s var(--ease-out-soft) forwards;
}

.form-status.is-success{
  animation: successPop .5s var(--ease-anticipate) both;
  color: var(--success);
}


/* ==========================================================================
   11. TESTIMONIAL & MODAL MOTION
   ========================================================================== */
@keyframes tslideIn{
  from { opacity:0; transform: translateY(18px); }
  to   { opacity:1; transform: translateY(0); }
}

@keyframes tslideOut{
  from { opacity:1; transform: translateY(0); }
  to   { opacity:0; transform: translateY(-12px); }
}

@keyframes quoteFloat{
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-4px) rotate(-.5deg); }
}

@keyframes modalIn{
  0%   { opacity:0; transform: translateY(24px) scale(.97); filter: blur(6px); }
  100% { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes modalOut{
  0%   { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity:0; transform: translateY(14px) scale(.98); filter: blur(4px); }
}

@keyframes backdropIn{
  from { opacity:0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to   { opacity:1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}

@keyframes modalMediaReveal{
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.modal.is-open .modal-panel{
  animation: modalIn .55s var(--ease-out-expo) both;
}
.modal.is-open .modal-backdrop{
  animation: backdropIn .4s var(--ease-out-soft) both;
}
.modal.is-open .modal-media img{
  animation: modalMediaReveal .8s var(--ease-out-expo) .1s both;
}
.tquote-mark{
  animation: quoteFloat 6s var(--ease-in-out-soft) infinite;
}


/* ==========================================================================
   12. TIMELINE CHOREOGRAPHY
   ========================================================================== */
@keyframes timelineDraw{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes timelineDrawVertical{
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes dotPop{
  0%   { transform: scale(0); opacity:0; }
  60%  { transform: scale(1.15); opacity:1; }
  100% { transform: scale(1); opacity:1; }
}

@keyframes dotRing{
  0%   { box-shadow: 0 0 0 0 rgba(182,154,99,.42); }
  100% { box-shadow: 0 0 0 14px rgba(182,154,99,0); }
}

@keyframes stepIn{
  0%   { opacity:0; transform: translateY(20px); }
  100% { opacity:1; transform: translateY(0); }
}


/* ==========================================================================
   13. FLOATING ACTION BUTTON MOTION
   ========================================================================== */
@keyframes fabEntrance{
  0%   { opacity:0; transform: translateY(24px) scale(.9); }
  70%  { opacity:1; transform: translateY(-4px) scale(1.02); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

@keyframes fabIdlePulse{
  0%,100% {
    box-shadow:
      0 12px 30px -10px rgba(0,0,0,.5),
      0 0 0 0 rgba(182,154,99,.24);
  }
  50% {
    box-shadow:
      0 12px 30px -10px rgba(0,0,0,.5),
      0 0 0 12px rgba(182,154,99,0);
  }
}

@keyframes fabTooltipIn{
  from { opacity:0; transform: translateY(-50%) translateX(6px); }
  to   { opacity:1; transform: translateY(-50%) translateX(0); }
}

@keyframes waPulse{
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.42); }
  50%     { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
}

.fab-btn:nth-child(1){ animation: fabEntrance .6s var(--ease-out-expo) .9s both; }
.fab-btn:nth-child(2){ animation: fabEntrance .6s var(--ease-out-expo) 1s both; }
.fab-btn:nth-child(3){ animation: fabEntrance .6s var(--ease-out-expo) 1.1s both; }

.fab-ai::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  animation: fabIdlePulse 3.6s var(--ease-in-out-soft) infinite;
  z-index:-1;
}


/* ==========================================================================
   14. DECORATIVE AMBIENT MOTION
   ---------------------------------------------------------------------------
   Subtle, long-duration movements. Never distracting. Disabled entirely under
   prefers-reduced-motion.
   ========================================================================== */
@keyframes orbDriftA{
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.16; }
  50%     { transform: translate3d(-30px, 24px, 0) scale(1.06); opacity:.22; }
}

@keyframes orbDriftB{
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity:.12; }
  50%     { transform: translate3d(28px, -20px, 0) scale(1.08); opacity:.18; }
}

@keyframes gridDrift{
  0%   { background-position: 0 0; }
  100% { background-position: 90px 90px; }
}

@keyframes heroCornerBlink{
  0%,100% { opacity:.45; }
  50%     { opacity:.85; }
}

@keyframes softRotation{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes verticalFloatSlow{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

.practice-orb-1{ animation: orbDriftA 14s var(--ease-in-out-soft) infinite; }
.practice-orb-2{ animation: orbDriftB 18s var(--ease-in-out-soft) infinite; }
.mm-orb-1    { animation: orbDriftA 16s var(--ease-in-out-soft) infinite; }
.mm-orb-2    { animation: orbDriftB 20s var(--ease-in-out-soft) infinite; }
.final-cta-orb{ animation: orbDriftA 20s var(--ease-in-out-soft) infinite; }

.hero-grid{
  animation: gridDrift 40s linear infinite;
}

.hero-corner-tl,
.hero-corner-br{
  animation: heroCornerBlink 4.2s var(--ease-in-out-soft) infinite;
}
.hero-corner-br{ animation-delay: 2.1s; }

.brand-mark:hover svg{
  animation: softRotation 1.4s var(--ease-out-expo);
}


/* ==========================================================================
   15. AI ASSISTANT MOTION
   ---------------------------------------------------------------------------
   Chat bubble entrances, typing indicator, message slide.
   ========================================================================== */
@keyframes msgSlideIn{
  from { opacity:0; transform: translateY(10px) scale(.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

@keyframes msgUserSlideIn{
  from { opacity:0; transform: translateX(12px); }
  to   { opacity:1; transform: translateX(0); }
}

@keyframes typingDot{
  0%,60%,100% { transform: translateY(0); opacity:.5; }
  30%         { transform: translateY(-4px); opacity:1; }
}

@keyframes chatScrollHint{
  0%,100% { transform: translateY(0); opacity:.6; }
  50%     { transform: translateY(3px); opacity:1; }
}

@keyframes suggestIn{
  from { opacity:0; transform: translateY(8px); }
  to   { opacity:1; transform: translateY(0); }
}

.msg{
  animation: msgSlideIn .4s var(--ease-out-expo) both;
}
.msg-user{
  animation-name: msgUserSlideIn;
}
.msg.typing .bubble span{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background: currentColor;
  margin-right:4px;
  animation: typingDot 1.2s var(--ease-in-out-soft) infinite;
}
.msg.typing .bubble span:nth-child(2){ animation-delay:.15s; }
.msg.typing .bubble span:nth-child(3){ animation-delay:.30s; }

.quick-q button{
  animation: suggestIn .45s var(--ease-out-expo) both;
}
.quick-q button:nth-child(1){ animation-delay:.08s; }
.quick-q button:nth-child(2){ animation-delay:.14s; }
.quick-q button:nth-child(3){ animation-delay:.20s; }
.quick-q button:nth-child(4){ animation-delay:.26s; }
.quick-q button:nth-child(5){ animation-delay:.32s; }


/* ==========================================================================
   16. STATUS & FEEDBACK MOTION
   ========================================================================== */
@keyframes spinnerRotate{
  to { transform: rotate(360deg); }
}

@keyframes checkmark{
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

@keyframes successRing{
  0%   { transform: scale(.6); opacity:0; }
  60%  { transform: scale(1.05); opacity:1; }
  100% { transform: scale(1); opacity:1; }
}

.spinner{
  display:inline-block;
  width:14px; height:14px;
  border:1.5px solid currentColor;
  border-top-color: transparent;
  border-radius:50%;
  animation: spinnerRotate .7s linear infinite;
}

.checkmark{
  stroke: currentColor;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: checkmark .5s var(--ease-out-expo) forwards;
}


/* ==========================================================================
   17. UTILITY ANIMATION CLASSES
   ---------------------------------------------------------------------------
   Apply these to any element for one-shot or looping motion.
   ========================================================================== */
.anim-fade-in{ animation: fadeIn var(--t-slow) var(--ease-out-soft) both; }
.anim-fade-up{ animation: fadeUp var(--t-slow) var(--ease-out-soft) both; }
.anim-fade-down{ animation: fadeDown var(--t-slow) var(--ease-out-soft) both; }
.anim-reveal-left{ animation: revealLeft var(--t-reveal) var(--ease-out-expo) both; }
.anim-reveal-right{ animation: revealRight var(--t-reveal) var(--ease-out-expo) both; }
.anim-reveal-scale{ animation: revealScale var(--t-slow) var(--ease-out-expo) both; }
.anim-reveal-blur{ animation: revealBlur var(--t-reveal) var(--ease-out-expo) both; }
.anim-reveal-mask{ animation: revealMask 1.1s var(--ease-out-expo) both; }
.anim-reveal-curtain{ animation: revealCurtain 1.1s var(--ease-out-expo) both; }

.anim-delay-xs{ animation-delay: var(--stagger-xs); }
.anim-delay-sm{ animation-delay: var(--stagger-sm); }
.anim-delay-md{ animation-delay: var(--stagger-md); }
.anim-delay-lg{ animation-delay: var(--stagger-lg); }
.anim-delay-1{ animation-delay: 100ms; }
.anim-delay-2{ animation-delay: 200ms; }
.anim-delay-3{ animation-delay: 300ms; }
.anim-delay-4{ animation-delay: 400ms; }
.anim-delay-5{ animation-delay: 500ms; }

.anim-loop-float{ animation: subtleFloat 5s var(--ease-in-out-soft) infinite; }
.anim-loop-pulse{ animation: goldPulse 3.6s var(--ease-in-out-soft) infinite; }
.anim-loop-shimmer{
  background: linear-gradient(
    100deg,
    currentColor 0%,
    currentColor 40%,
    rgba(255,255,255,.7) 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShimmer 4s linear infinite;
}

.anim-arrow-hover:hover svg{ animation: arrowBounceRight .55s var(--ease-out-expo) both; }


/* ==========================================================================
   18. REDUCED-MOTION OVERRIDES (EXTENDED)
   ---------------------------------------------------------------------------
   This block is intentionally exhaustive. When the user prefers reduced
   motion, every animation and transition collapses to its final state, and
   all content is immediately visible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){

  *,*::before,*::after{
    animation-duration: .001ms !important;
    animation-delay:    0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay:    0ms !important;
    scroll-behavior: auto !important;
  }

  html{scroll-behavior:auto}

  /* Loader — hide instantly */
  .loader{
    transition:none;
    opacity:0;
    visibility:hidden;
  }
  .loader-mark,
  .loader-bar span,
  .loader-label{animation:none}
  .loader-bar span{transform:scaleX(1)}

  /* Hero — static, fully visible */
  .hero-media img{
    animation:none;
    transform: scale(1.02);
    filter: grayscale(.08) brightness(.7);
    opacity:1;
  }
  .hero-title .word{
    transform:none;
    opacity:1;
    animation:none;
  }
  .hero-eyebrow,
  .hero-sub,
  .hero-ctas,
  .hero-accent,
  .hero-aside,
  .hero-scroll{
    opacity:1;
    animation:none;
    transform:none;
  }
  .hero-accent-line{
    transform:scaleX(1);
    animation:none;
  }

  /* Navbar */
  .navbar{animation:none}
  .mobile-menu{animation:none}
  .mobile-menu.is-open{animation:none}
  .nav-indicator{transition:none}

  /* Decorative / ambient */
  .practice-orb-1,
  .practice-orb-2,
  .mm-orb-1,
  .mm-orb-2,
  .final-cta-orb,
  .hero-grid,
  .hero-corner-tl,
  .hero-corner-br,
  .tquote-mark{
    animation:none !important;
  }
  .gold-line::after{display:none}
  .hero-scroll-line::after{display:none}

  /* Reveals — reveal everything instantly */
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }
  [data-reveal="line"]{ transform: scaleX(1) !important; }

  /* Timeline — completed state */
  .timeline-line::after{ transform: scaleX(1) !important; transition:none !important; }
  .tl-dot::after{ transform: scale(1) !important; transition:none !important; }
  .tl-dot{ box-shadow: 0 0 0 6px rgba(182,154,99,.14) !important; }

  /* Buttons */
  .btn-gold::after{ display:none; }

  /* FABs — final state, no pulse */
  .fab-btn{ animation:none; opacity:1; transform:none; }
  .fab-ai::before{ animation:none; opacity:0; }
  .fab-btn:hover{ transform:none; }

  /* Modals */
  .modal.is-open .modal-panel{ animation:none; }
  .modal.is-open .modal-backdrop{ animation:none; }
  .modal.is-open .modal-media img{ animation:none; }

  /* Chat */
  .msg,
  .msg-user,
  .msg.typing .bubble span,
  .quick-q button{
    animation:none !important;
  }

  /* Form feedback */
  .field.has-error input,
  .field.has-error select,
  .field.has-error textarea,
  .field .err[data-err]:not(:empty),
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    animation:none !important;
  }
  .form-status.is-success{ animation:none; }
  .spinner{ animation-duration: 1.4s !important; }

  /* Utility loops */
  .anim-loop-float,
  .anim-loop-pulse,
  .anim-loop-shimmer,
  .anim-arrow-hover:hover svg{
    animation:none !important;
  }
}


/* ==========================================================================
   19. PRINT
   ========================================================================== */
@media print{
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }
  .loader,
  .scroll-progress,
  .navbar,
  .mobile-menu,
  .fab,
  .modal,
  .hero-scroll{
    display:none !important;
  }
  .hero-media img{
    filter: none;
    transform:none;
  }
  body{background:#fff; color:#000}
}