/* =========================================================================
   M/s Anupam Sharma & Co. — Animations
   -------------------------------------------------------------------------
   SECTIONS
   01. Timing tokens (extended)
   02. Base reveal system (scroll-triggered)
   03. Variants: up / left / right / scale / image
   04. Image reveal (clip-path + zoom + parallax)
   05. Hero entrance sequence
   06. Hero scroll cue pulse
   07. Chip dot pulse
   08. Dropdown fade + translate
   09. Mobile menu open / close
   10. Button shimmer + arrow
   11. Card hover polish (services, updates)
   12. Industry panel crossfade
   13. Counter / number tick
   14. Footer / header polish
   15. Page fade-in on load
   16. Reduced motion
   ========================================================================= */


/* -------------------------------------------------------------------------
   01. TIMING TOKENS (extended)
   Duration tokens in style.css are reused. Here we add named easings
   for reveal + hero so the whole site feels like one choreography.
   ------------------------------------------------------------------------- */
:root {
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
}


/* -------------------------------------------------------------------------
   02. BASE REVEAL SYSTEM
   JS (animations.js) adds `.is-visible` when the element intersects.
   Everything below is the *before* state — the *after* state lives in
   each variant. The base rule below intentionally sets NO transform so
   each variant controls its own motion.
   ------------------------------------------------------------------------- */
.js .reveal,
.js .reveal-up,
.js .reveal-left,
.js .reveal-right,
.js .reveal-scale,
.js .reveal-image {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 700ms var(--ease-out-quart),
    transform 900ms var(--ease-out-expo),
    clip-path 1100ms var(--ease-out-expo),
    filter 900ms var(--ease-out-quart);
  transition-delay: var(--delay, 0ms);
}

.js .reveal.is-visible,
.js .reveal-up.is-visible,
.js .reveal-left.is-visible,
.js .reveal-right.is-visible,
.js .reveal-scale.is-visible,
.js .reveal-image.is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  filter: none;
}


/* -------------------------------------------------------------------------
   03. REVEAL VARIANTS
   ------------------------------------------------------------------------- */

/* Simple fade */
.js .reveal {
  /* opacity only — no transform */
}

/* Slide up */
.js .reveal-up {
  transform: translate3d(0, 40px, 0);
}

/* Slide from left */
.js .reveal-left {
  transform: translate3d(-40px, 0, 0);
}

/* Slide from right */
.js .reveal-right {
  transform: translate3d(40px, 0, 0);
}

/* Scale up softly */
.js .reveal-scale {
  transform: scale(0.96);
  opacity: 0;
}

/* Image reveal: clip-path wipe + inner zoom */
.js .reveal-image {
  opacity: 1;                        /* the wrapper is visible, but … */
  clip-path: inset(0 0 100% 0);      /* … clipped to nothing at first  */
  transform: none;
}

.js .reveal-image.is-visible {
  clip-path: inset(0 0 0 0);         /* … and wipes down to full height */
}

/* Inner image gets a subtle scale that settles when visible */
.js .reveal-image img {
  transform: scale(1.08);
  transition: transform 1400ms var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}

.js .reveal-image.is-visible img {
  transform: scale(1);
}


/* -------------------------------------------------------------------------
   04. IMAGE PARALLAX (very subtle, CSS only)
   Applied via `.parallax-img` wrapper where the markup opts in.
   Disabled on reduced motion.
   ------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  .parallax-img img {
    animation: subtle-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@keyframes subtle-parallax {
  from { transform: translateY(-3%) scale(1.06); }
  to   { transform: translateY(3%)  scale(1.06); }
}


/* -------------------------------------------------------------------------
   05. HERO ENTRANCE SEQUENCE
   Fires only on `.page-home` once the DOM is parsed.
   Each child has its own keyframe; delays are staged so the eye travels
   from eyebrow → title → tagline → text → CTAs → meta → visual → chip.
   ------------------------------------------------------------------------- */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hero-visual-in {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hero-chip-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes hero-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes hero-frame-line-in {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Staged animations — apply to hero children.
   We use `both` fill-mode so the end state is guaranteed. */
.page-home .hero__eyebrow {
  animation: hero-fade-up 700ms var(--ease-out-expo) 120ms both;
  transform-origin: left;
}

.page-home .hero__title {
  animation: hero-fade-up 900ms var(--ease-out-expo) 240ms both;
}

.page-home .hero__tagline {
  animation: hero-fade-up 800ms var(--ease-out-expo) 420ms both;
}

.page-home .hero__text {
  animation: hero-fade-up 800ms var(--ease-out-expo) 540ms both;
}

.page-home .hero__actions {
  animation: hero-fade-up 700ms var(--ease-out-expo) 680ms both;
}

.page-home .hero__meta {
  animation: hero-fade 700ms var(--ease-out-quart) 820ms both;
}

.page-home .hero__visual {
  animation: hero-visual-in 1100ms var(--ease-out-expo) 300ms both;
}

.page-home .hero__frame::before {
  animation: hero-frame-line-in 600ms var(--ease-out-expo) 1100ms both;
  transform-origin: top right;
}

.page-home .hero__chip {
  animation: hero-chip-in 600ms var(--ease-out-expo) 1250ms both;
}

.page-home .hero__scroll {
  animation: hero-fade 600ms var(--ease-out-quart) 1500ms both;
}

/* Hero background — subtle “breathing” glow behind the content */
.page-home .hero__bg {
  animation: hero-bg-breathe 18s ease-in-out infinite alternate;
}

@keyframes hero-bg-breathe {
  from { filter: brightness(1); }
  to   { filter: brightness(1.06); }
}


/* -------------------------------------------------------------------------
   06. HERO SCROLL CUE
   ------------------------------------------------------------------------- */
.hero__scroll-line {
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  animation: scroll-cue-swipe 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-cue-swipe {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}


/* -------------------------------------------------------------------------
   07. CHIP DOT PULSE
   ------------------------------------------------------------------------- */
.hero__chip-dot {
  animation: chip-dot-pulse 2.2s ease-in-out infinite;
}

@keyframes chip-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(212, 167, 44, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 167, 44, 0.05); }
}


/* -------------------------------------------------------------------------
   08. DROPDOWN FADE + TRANSLATE
   style.css handles the hover/show state; we only add a spring-ish
   translate so the reveal feels intentional.
   ------------------------------------------------------------------------- */
.nav__dropdown {
  transition:
    opacity 280ms var(--ease-out-quart),
    transform 320ms var(--ease-out-expo),
    visibility 280ms var(--ease-out-quart);
}

.nav__dropdown a {
  transition:
    background 180ms var(--ease-out-quart),
    color 180ms var(--ease-out-quart),
    padding-left 220ms var(--ease-out-expo);
}

.nav__dropdown a:hover,
.nav__dropdown a:focus-visible {
  padding-left: 1.15rem;
}


/* -------------------------------------------------------------------------
   09. MOBILE MENU OPEN / CLOSE
   navigation.js toggles `.is-open` on `.site-header` (and `body.nav-open`).
   We drive the mobile nav panel opacity/translate here.
   The panel itself is styled in responsive.css; here we only handle motion.
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .nav {
    transition:
      opacity 320ms var(--ease-out-quart),
      transform 420ms var(--ease-out-expo),
      visibility 320ms var(--ease-out-quart);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
  }

  .site-header.is-open .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Stagger the nav items when the menu opens */
  .site-header.is-open .nav__item {
    animation: mobile-item-in 480ms var(--ease-out-expo) both;
  }

  .site-header.is-open .nav__item:nth-child(1) { animation-delay:  60ms; }
  .site-header.is-open .nav__item:nth-child(2) { animation-delay: 110ms; }
  .site-header.is-open .nav__item:nth-child(3) { animation-delay: 160ms; }
  .site-header.is-open .nav__item:nth-child(4) { animation-delay: 210ms; }
  .site-header.is-open .nav__item:nth-child(5) { animation-delay: 260ms; }
  .site-header.is-open .nav__item:nth-child(6) { animation-delay: 310ms; }
  .site-header.is-open .nav__item:nth-child(7) { animation-delay: 360ms; }

  @keyframes mobile-item-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Sub-menu (dropdown) accordion motion — height is animated by JS
     using a measured value; we handle the opacity + icon rotation here. */
  .nav__dropdown {
    transform: none;
    opacity: 0;
    transition:
      opacity 260ms var(--ease-out-quart),
      max-height 380ms var(--ease-out-expo);
    max-height: 0;
    overflow: hidden;
  }

  .nav__item--has-dropdown.is-expanded > .nav__dropdown {
    opacity: 1;
    max-height: 480px;
  }

  .nav__item--has-dropdown > .nav__link::before {
    transition: transform 300ms var(--ease-out-expo);
  }

  .nav__item--has-dropdown.is-expanded > .nav__link::before {
    transform: rotate(225deg) translateY(-1px);
  }
}


/* -------------------------------------------------------------------------
   10. BUTTON SHIMMER + ARROW
   The arrow slide lives in style.css. Here we add a light “shine”
   sweep that runs on hover across `.btn--primary` and `.btn--gold`.
   ------------------------------------------------------------------------- */
.btn--primary::after,
.btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 45%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out-expo);
  pointer-events: none;
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after,
.btn--gold:hover::after,
.btn--gold:focus-visible::after {
  transform: translateX(120%);
}


/* -------------------------------------------------------------------------
   11. CARD HOVER POLISH
   Services + update cards already lift in style.css. We add a soft
   gold gradient wash that fades in on hover for that "premium paper"
   effect — nothing flashy.
   ------------------------------------------------------------------------- */
.service-card::after,
.update-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(212, 167, 44, 0.05), transparent 55%);
  opacity: 0;
  transition: opacity 400ms var(--ease-out-quart);
  pointer-events: none;
}

.service-card:hover::after,
.service-card:focus-visible::after,
.update-card:hover::after,
.update-card:focus-visible::after {
  opacity: 1;
}


/* -------------------------------------------------------------------------
   12. INDUSTRY PANEL CROSSFADE
   interactions.js swaps `src`, `textContent` and `alt`. We fade the
   media + body out and in on every change by toggling `.is-swapping`.
   ------------------------------------------------------------------------- */
.industry-panel__media img,
.industry-panel__title,
.industry-panel__text {
  transition: opacity 320ms var(--ease-out-quart);
}

.industry-panel.is-swapping .industry-panel__media img,
.industry-panel.is-swapping .industry-panel__title,
.industry-panel.is-swapping .industry-panel__text {
  opacity: 0;
}


/* -------------------------------------------------------------------------
   13. COUNTER / NUMBER TICK
   Used by `.counter[data-target]` when present (no fake numbers on the
   home page — the API is ready for future use e.g. Facts / About pages).
   JS updates `textContent`; we only provide a subtle settle animation.
   ------------------------------------------------------------------------- */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.counter.is-counting {
  animation: counter-settle 2400ms var(--ease-out-expo) both;
}

@keyframes counter-settle {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}


/* -------------------------------------------------------------------------
   14. HEADER / FOOTER POLISH
   The header height/background is animated in style.css. Here we add
   a fade on the injected brand + nav so the first paint never “pops”.
   ------------------------------------------------------------------------- */
.site-header .brand,
.site-header .nav {
  animation: header-fade-in 500ms var(--ease-out-quart) both;
}

.site-header .nav {
  animation-delay: 80ms;
}

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

.site-footer {
  animation: none; /* keep footer calm — no entrance animation */
}


/* -------------------------------------------------------------------------
   15. PAGE FADE-IN ON LOAD
   Prevents a hard "flash" when a page is first painted.
   ------------------------------------------------------------------------- */
.page-home main,
body:not(.page-home) main {
  animation: page-fade-in 480ms var(--ease-out-quart) both;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* During internal navigation, main.js can add `.is-leaving` for a soft
   fade-out before the new page loads. */
main.is-leaving {
  opacity: 0;
  transition: opacity 180ms var(--ease-out-quart);
}


/* -------------------------------------------------------------------------
   16. REDUCED MOTION
   Users who ask for less motion get a still, readable, fully-visible site.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .reveal-up,
  .js .reveal-left,
  .js .reveal-right,
  .js .reveal-scale,
  .js .reveal-image {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  .js .reveal-image img {
    transform: none !important;
  }

  .page-home .hero__eyebrow,
  .page-home .hero__title,
  .page-home .hero__tagline,
  .page-home .hero__text,
  .page-home .hero__actions,
  .page-home .hero__meta,
  .page-home .hero__visual,
  .page-home .hero__chip,
  .page-home .hero__scroll,
  .page-home .hero__frame::before,
  .hero__bg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .btn--primary::after,
  .btn--gold::after,
  .service-card::after,
  .update-card::after {
    display: none !important;
  }

  .hero__scroll-line::after {
    animation: none !important;
  }

  .hero__chip-dot {
    animation: none !important;
  }

  .parallax-img img {
    animation: none !important;
  }
}