/* Suriyavaan motion layer v7: restrained, dependency-free.
   Rules: transform and opacity only; no content hidden by CSS alone; no layout shift;
   every effect has a prefers-reduced-motion path. Builds on the r3 tokens in the site CSS. */
:root {
  --mv-ease: cubic-bezier(.22, 1, .36, 1);
  --mv-t1: 160ms;   /* hover, focus, press */
  --mv-t2: 320ms;   /* state changes */
  --mv-t3: 640ms;   /* entrances */
}

/* 1. Hero entrance: CSS only, text stays readable throughout (starts at 55% opacity, 10px low). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mv-rise { from { opacity: .55; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .mh-eyebrow, .mh h1, .mh-sub, .mh-actions,
  :is(.page-hero, .upgrade-hero, .directory-hero) :is(.eyebrow, h1, .lead, .actions) {
    animation: mv-rise var(--mv-t3) var(--mv-ease) both;
  }
  .mh h1, :is(.page-hero, .upgrade-hero, .directory-hero) h1 { animation-delay: 60ms; }
  .mh-sub, :is(.page-hero, .upgrade-hero, .directory-hero) .lead { animation-delay: 140ms; }
  .mh-actions, :is(.page-hero, .upgrade-hero, .directory-hero) .actions { animation-delay: 220ms; }
}

/* 2. Section headings join the existing once-per-visit reveal (script marks them data-reveal). */
html.motion-ready [data-reveal="heading"] { transition: opacity var(--mv-t3) var(--mv-ease), transform var(--mv-t3) var(--mv-ease); }
html.motion-ready [data-reveal="heading"]:not(.is-visible) { opacity: 0; transform: translateY(12px); }

/* 3. Buttons and links: one timing for hover, press and focus. */
.button, .button-secondary, .contact-button, .menu-toggle, .theme-toggle, .mh-tab, .mh-pause {
  transition: transform var(--mv-t1) var(--mv-ease), box-shadow var(--mv-t1) var(--mv-ease),
              background-color var(--mv-t1) ease, border-color var(--mv-t1) ease, color var(--mv-t1) ease;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover, .contact-button:hover, .mh-tab:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(11, 26, 42, .45); }
}
.button:active, .contact-button:active, .mh-tab:active, .mh-pause:active { transform: translateY(0) scale(.985); box-shadow: none; }
#site-nav > a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size var(--mv-t2) var(--mv-ease), color var(--mv-t1) ease; }
@media (hover: hover) and (pointer: fine) {
  #site-nav > a:hover { background-size: 100% 1px; }
}
#site-nav > a[aria-current="page"] { background-size: 100% 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { transition: outline-offset var(--mv-t1) var(--mv-ease); }

/* 4. Header gains a soft edge once the page has scrolled (shadow only, so nothing shifts). */
.site-header { transition: box-shadow var(--mv-t2) var(--mv-ease); }
.site-header.is-scrolled { box-shadow: 0 10px 24px -20px rgba(11, 26, 42, .55); }

/* 5. Hero wireframe drift: JS writes --mv-drift (0 to 1) while the hero is on screen. Max 14px. */
.mh-arts { transform: translate3d(0, calc(var(--mv-drift, 0) * 14px), 0); will-change: auto; }



@media (prefers-reduced-motion: reduce) {
  .mh-eyebrow, .mh h1, .mh-sub, .mh-actions, :is(.page-hero, .upgrade-hero, .directory-hero) :is(.eyebrow, h1, .lead, .actions) { animation: none !important; }
  html.motion-ready [data-reveal="heading"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mh-arts { transform: none !important; }
  .button:hover, .contact-button:hover, .mh-tab:hover, .button:active, .contact-button:active, .mh-tab:active, .mh-pause:active { transform: none !important; }
  #site-nav > a, .site-header { transition: none !important; }
}