/* Explore: a small scroll cue, the word "Explore" (Subtitle style) over a large pixel arrow. 71 x 44px.
   Anchor it with .explore--anchored: centred, 60px up from the bottom of the screen (or of its positioned parent).
   .explore--fixed pins it to the screen and hides it (soft fade + slide) once the page has moved on from the first slide.
   It eases in on load, and the arrow eases down on roll-over.
   <a class="explore explore--anchored" href="#next-section">
     <span class="explore__label">Explore</span>
     <svg class="explore__arrow" width="22" height="16" aria-hidden="true"><use href="#arrow-large"/></svg>
   </a> */
.explore { display: inline-flex; flex-direction: column; align-items: center; gap: 15px; color: var(--color-action); text-decoration: none; }
.explore__label { font: var(--weight-medium) var(--fs-subtitle)/var(--lh-subtitle) var(--font-text); text-box: trim-both cap alphabetic; }
.explore__arrow { display: block; fill: currentColor; transition: transform .7s var(--ease-out); }
.explore:hover .explore__arrow, .explore:focus-visible .explore__arrow { transform: translateY(6px); }
.explore:focus-visible { outline: 2px solid var(--color-action); outline-offset: 6px; }
.explore--anchored { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 5; }
.explore--fixed { position: fixed; }

/* entrance: fades in and rises a little, after a short pause */
@keyframes explore-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.explore--anchored { animation: explore-in 1.1s var(--ease-out) .5s both; }

/* fixed version: hidden (faded + slid down) after the first slide, back when you return */
.explore--fixed { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
:root[data-section]:not([data-section="0"]) .explore--fixed { opacity: 0; transform: translate(-50%, 14px); pointer-events: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
  .explore--anchored { animation: none; }
  .explore__arrow, .explore--fixed { transition: none; }
  .explore:hover .explore__arrow { transform: none; }
}