/* ============================================================
   ACME shared animation system
   Site-wide scroll reveals, entrance motion, and micro-interactions.
   Loaded on every page via a root-relative <link> (see animations.js
   for the same convention) so it survives an S3/CloudFront migration
   with no path rework.
   ============================================================ */

:root{
  --av-ease: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out: crisp, premium deceleration */
  --av-ease-in: cubic-bezier(0.7, 0, 0.84, 0);    /* for things leaving the screen */
  --av-dur-micro: 200ms;   /* clicks, toggles, small state changes */
  --av-dur-section: 500ms; /* section/card/image reveals */
  --av-dur-entrance: 480ms;/* page-load stagger */
}

/* ── Reduced motion: hard override, wins over everything below ── */
@media (prefers-reduced-motion: reduce){
  .av-parallax{ transform: none !important; }
  #av-scroll-progress{ transition: none !important; }
  .av-skeleton{ animation: none !important; opacity: .6; }
  .av-spin{ animation: none !important; }
}

/* Scroll-reveal and page-load entrance fades were removed —
   all sections render in their final state immediately, no
   hidden-until-scrolled/loaded state. animations.js no longer
   calls initReveal()/initEntrance(); .av-reveal/.av-enter classes
   may still be present on some elements from that JS but carry
   no styling here, so they're inert. */

/* ── Mobile nav open/close (replaces abrupt display swap) ──────
   IMPORTANT: never animate opacity on .nav-links itself — it has
   a solid background (set per-page, e.g. background: var(--white))
   and animating the container's opacity fades that background too,
   letting the hero content behind it bleed through mid-transition.
   Only max-height/transform animate on the container; the opacity
   fade is applied to the child <li> items instead, so the menu's
   background stays fully opaque throughout. */
@media (max-width: 1100px){
  .nav-links{
    display: flex !important;
    max-height: 0;
    transform: translateY(-6px);
    overflow: hidden auto;
    pointer-events: none;
    transition: max-height 320ms var(--av-ease),
                transform 260ms var(--av-ease);
  }
  .nav-links.open{
    max-height: 80vh;
    transform: none;
    pointer-events: auto;
  }
  .nav-links > li{
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .nav-links.open > li{
    opacity: 1;
    transition-delay: 80ms;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1100px){
  .nav-links, .nav-links > li{ transition: none; }
}

/* ── Button press / click feedback (non-hover) ───────────────── */
.btn-wine, .btn-ghost-white, .btn-submit, .role-card, .exec-mgmt-toggle,
button, input[type="submit"]{
  transition: transform var(--av-dur-micro) var(--av-ease),
              box-shadow var(--av-dur-micro) var(--av-ease),
              background var(--av-dur-micro) var(--av-ease),
              opacity var(--av-dur-micro) var(--av-ease);
}
.av-pressable:active{ transform: scale(0.97); }

/* ── Form submit → success cross-fade (used by animations.js) ── */
.av-fade-swap{
  transition: opacity var(--av-dur-section) var(--av-ease),
              transform var(--av-dur-section) var(--av-ease);
}
.av-fade-out{ opacity: 0; transform: translateY(-6px); }
.av-fade-in-start{ opacity: 0; transform: translateY(10px); }
.av-fade-in-end{ opacity: 1; transform: none; }

/* ── Inline button spinner: soft conic gradient, not a flat ring */
.av-spin{
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 9px;
  vertical-align: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, transparent 30%, currentColor 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: av-spin 800ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes av-spin{ to{ transform: rotate(360deg); } }

/* ── Skeleton loader (careers job list, or any async block) ──── */
.av-skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(21,32,56,0.06);
  border-radius: 10px;
}
.av-skeleton::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: av-shimmer 1.4s ease-in-out infinite;
}
@keyframes av-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}

/* ── Scroll progress bar ─────────────────────────────────────── */
#av-scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--wine, #822E50), var(--wine-dark, #5e1f38));
  box-shadow: 0 0 8px 0 rgba(130,46,80,0.45);
  z-index: 3000;
  transition: width 120ms var(--av-ease);
  pointer-events: none;
}

/* ── Subtle parallax (opt-in via .av-parallax, hero imagery only) */
.av-parallax{ will-change: transform; }

/* ── Modal open/close: glassy backdrop + spring-like pop-in ──── */
.modal-overlay{
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity var(--av-dur-section) var(--av-ease),
              backdrop-filter var(--av-dur-section) var(--av-ease),
              -webkit-backdrop-filter var(--av-dur-section) var(--av-ease);
}
.modal-overlay.open{
  opacity: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-overlay .modal{
  transform: translateY(22px) scale(0.96);
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot: springy, modern */
}
.modal-overlay.open .modal{ transform: none; }
@media (prefers-reduced-motion: reduce){
  .modal-overlay, .modal-overlay .modal{ transition: none !important; transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ── Horizontal tab/filter strip scroll affordance ─────────────
   Applied by animations.js (.av-has-more-scroll) only while a strip
   genuinely has more content to scroll to — a soft fade over the
   last ~40px on the trailing edge, not a permanent decoration. */
.filter-inner, .aws-tabs-inner{
  position: relative;
}
/* service-tabs/about-tabs/careers-tabs/beyond-tabs/partner-tabs are already
   position:sticky in their own page's CSS — sticky already establishes a
   containing block for the ::after fade below, and since this stylesheet
   loads after each page's inline <style>, setting position:relative here
   would silently override their sticky positioning instead of layering on
   top of it. */
.service-tabs.av-has-more-scroll::after,
.about-tabs.av-has-more-scroll::after,
.careers-tabs.av-has-more-scroll::after,
.beyond-tabs.av-has-more-scroll::after,
.partner-tabs.av-has-more-scroll::after,
.filter-inner.av-has-more-scroll::after,
.aws-tabs-inner.av-has-more-scroll::after{
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.94));
  pointer-events: none;
  z-index: 2;
}