/* ---- Site-wide motion system ----
   The CSS half of the motion layer driven by js/motion.js. Component
   visual design is untouched: everything here is either an interaction
   state (hover/focus) or the plumbing an animated control needs.

   Entrance state — the opacity/transform an element holds before it
   reveals — is set inline by GSAP at run time, never here. If JavaScript
   fails to load, every element simply stays at its normal, fully visible
   CSS position. Nothing in this file hides content. */

/* ==========================================================================
   Buttons
   ==========================================================================
   The resting appearance of every button is exactly what it was: the
   gradient lives on a layered ::before that is fully transparent until
   hover, so nothing about the default state changes.

   On hover the gradient both fades in AND travels across the button:
   background-size is wider than the button, so animating
   background-position slides the light band through it rather than just
   cross-fading a static fill. Every stop is a darkened shade of the
   button's own colour, so the hover state is always richer, never
   lighter. On leaving, the position eases back the way it came. */

.btn {
  position: relative;
  isolation: isolate;
  transition: color 0.3s ease;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background-size: 250% 100%;
  background-position: 100% 50%;
  transition: opacity 0.25s ease,
    background-position 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.btn-teal::before {
  background-image: var(--gradient-teal-hover);
}

.btn-primary::before {
  background-image: var(--gradient-orange-hover);
}

.btn-orange::before {
  background-image: var(--gradient-orange-alt-hover);
}

/* Hover-capable pointers only — a tap on a touch device would otherwise
   leave the button stuck in its hover state after the press. */
@media (hover: hover) and (pointer: fine) {
  .btn-teal:hover::before,
  .btn-primary:hover::before,
  .btn-orange:hover::before {
    opacity: 1;
    background-position: 0% 50%;
  }
}

/* Keyboard focus gets the same colour treatment as hover — including on
   touch devices, where the hover block above never applies — but without
   the transform, so a focus ring never drifts away from its control. */
.btn-teal:focus-visible::before,
.btn-primary:focus-visible::before,
.btn-orange:focus-visible::before {
  opacity: 1;
  background-position: 0% 50%;
}

/* Flat/outline variants have no gradient asset — they deepen their own
   fill instead, which is the same "richer on hover" direction. */
.btn-secondary,
.btn-outline-teal {
  transition: background 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-outline-teal:hover,
.btn-outline-teal:focus-visible {
  background: var(--colour-grey-200);
}

/* .btn-outline sits on dark photography, where "darker" would disappear
   into the image — it picks up a faint fill instead. Border colour stays
   fixed (no accent-colour hover changes site-wide). */
.btn-outline {
  transition: background 0.3s ease;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Tab group — sliding active indicator
   ==========================================================================
   One teal pill that physically travels between the options, rather than
   a background being removed from one tab and faded in on another. The
   indicator element and its positioning are created by
   js/accordion-tabs.js; the .tab-group--sliding class is only added once
   that has happened, so without JavaScript the original per-tab
   background is still what renders. */

.tab-group {
  position: relative;
}

.tab-group__indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--space-full);
  background: var(--colour-brand-teal);
  pointer-events: none;
}

.tab {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}

/* The pill is now the indicator's job. */
.tab-group--sliding .tab--active {
  background: transparent;
}

/* ==========================================================================
   Accordions
   ========================================================================== */

/* .accordion__panel and .faq-accordion__panel are both opened/closed by
   GSAP (height auto → 0, window.NautilusMotion.toggleHeight — see
   js/motion.js), which needs a predictable starting point.
   .doc-accordion__panel (css/document-library.css) still uses the
   grid-template-rows: 0fr -> 1fr technique .faq-accordion__panel was just
   moved off of, for the same reason it failed here: an auto-height grid
   container doesn't reliably collapse a 0fr track to true zero. Not
   changed here — out of scope for this page — but likely has the same
   bug and is worth the same fix if seen misbehaving. */
.accordion__panel,
.faq-accordion__panel {
  will-change: height;
}

.accordion__trigger {
  transition: color 0.25s ease;
}

/* ==========================================================================
   Hover feedback on interactive objects
   ==========================================================================
   Background and small directional movement only — nothing lifts, scales
   or recolours its artwork. */

.product-selector__chevron,
.nav-panel-icon-link__chevron,
.article-card__arrow,
[class*="__chevron"],
[class*="__arrow"] {
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .product-selector__link:hover .product-selector__chevron,
  .nav-panel-icon-link:hover .nav-panel-icon-link__chevron,
  a:hover > [class*="__arrow"],
  a:hover [class*="__chevron"]:not(.accordion__chevron) {
    transform: translateX(4px);
  }
}

.product-selector__link:focus-visible .product-selector__chevron,
.nav-panel-icon-link:focus-visible .nav-panel-icon-link__chevron {
  transform: translateX(4px);
}

/* Clickable cards that previously had no hover feedback at all. Document
   rows/accordions (css/document-library.css) are deliberately not part
   of this — no hover-grey background there, and their own row-text
   underline (see .doc-accordion__row-link:hover) is the only feedback. */
.article-card {
  transition: background 0.35s ease;
}

.article-card:hover,
.article-card:focus-visible {
  background: var(--colour-grey-101);
}

/* Floating tags are pointer-reactive (js/motion.js) — the transform is
   driven by GSAP, so no CSS transition here would only fight it. This
   just makes sure they can never intercept a click meant for the
   composition underneath them. */
.page-hero__tag,
.promo__tag {
  user-select: none;
}

/* ==========================================================================
   Reduced motion
   ==========================================================================
   Scroll-driven entrances, counters and pointer parallax are all skipped
   in JavaScript via the same media query, so content simply appears at
   its final state. What is left to calm down here is the CSS-only
   interaction feedback: colour changes stay (useful, and essentially
   free), movement goes. */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .tab,
  .article-card,
  [class*="__chevron"],
  [class*="__arrow"] {
    transition-duration: 0.01ms;
  }

  .product-selector__link:hover .product-selector__chevron,
  .product-selector__link:focus-visible .product-selector__chevron,
  .nav-panel-icon-link:hover .nav-panel-icon-link__chevron,
  .nav-panel-icon-link:focus-visible .nav-panel-icon-link__chevron,
  a:hover > [class*="__arrow"],
  a:hover [class*="__chevron"]:not(.accordion__chevron) {
    transform: none;
  }
}