/* ==========================================================================
   motion-plus.css — the elevated motion layer, loaded after motion.css.
   Adds: cross-document View Transitions, a richer directional + staggered
   reveal system, gold shimmer, and refined micro-interactions.
   Everything degrades to fully-visible/no-motion under reduced-motion and
   no-JS, exactly like motion.css.
   ========================================================================== */

/* ============================ VIEW TRANSITIONS ============================ */
/* Native cross-document transitions: pages cross-fade and rise, the header
   morphs in place. Progressive — unsupported browsers just navigate. */
@view-transition { navigation: auto; }

::view-transition-group(*) { animation-timing-function: var(--ease-out); }
::view-transition-old(root) {
  animation: vt-fade-out 200ms var(--ease) both;
}
::view-transition-new(root) {
  animation: vt-rise-in 420ms var(--ease-out) both;
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(18px); } }

/* Persistent chrome morphs rather than fading. */
.header { view-transition-name: site-header; }
#main   { view-transition-name: page-main; }

/* ============================ RICHER REVEAL ============================== */
/* The base .reveal (base.css) already hides/opacity-slides. Here we deepen it:
   a longer refined tail, a touch of scale, and directional / stagger options.
   All gated on no-preference so reduced-motion keeps the base's static state. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transform: translateY(42px) scale(.985);
    transition:
      opacity var(--d-xslow) var(--ease-out),
      transform var(--d-xslow) var(--ease-out);
  }
  .reveal.is-in { transform: none; }

  /* Directional variants — set data-reveal on the element. */
  .reveal[data-reveal="left"]  { transform: translateX(-46px); }
  .reveal[data-reveal="right"] { transform: translateX(46px); }
  .reveal[data-reveal="scale"] { transform: scale(.9); }
  .reveal[data-reveal="rise"]  { transform: translateY(64px); }
  .reveal[data-reveal="spring"] { transition-timing-function: var(--ease-spring); }
  .reveal[data-reveal].is-in { transform: none; }

  /* Stagger: JS sets --si (0,1,2…) on grid children; each waits its turn.
     Combined with a per-element base delay from data-delay where present. */
  .reveal { transition-delay: calc(var(--si, 0) * 70ms); }
  .reveal[data-delay="1"] { transition-delay: calc(90ms + var(--si, 0) * 70ms); }
  .reveal[data-delay="2"] { transition-delay: calc(180ms + var(--si, 0) * 70ms); }
  .reveal[data-delay="3"] { transition-delay: calc(270ms + var(--si, 0) * 70ms); }
}

/* ============================ GOLD SHIMMER ============================== */
/* A slow sheen crossing gold accent words. Decorative; motion-gated. */
/* Only clip-to-text where supported, so the word is never invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .shimmer {
      background-image: linear-gradient(100deg,
        var(--gold) 0%, var(--gold) 38%,
        color-mix(in srgb, var(--gold) 55%, #fff) 50%,
        var(--gold) 62%, var(--gold) 100%);
      background-size: 220% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: shimmer 6s var(--ease-io) infinite;
    }
    @keyframes shimmer {
      0%, 20%   { background-position: 130% 0; }
      80%, 100% { background-position: -30% 0; }
    }
    /* On the dark image hero, the accent word uses a brighter sheen. */
    .hero__accent.shimmer { background-image: linear-gradient(100deg,
        var(--gold) 0%, var(--gold) 40%, #ffe6a8 50%, var(--gold) 60%, var(--gold) 100%); }
  }
}

/* ======================= REFINED MICRO-INTERACTIONS ===================== */
/* Nav underline draws from the left on hover / current. */
.nav__link { position: relative; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--gold-ink); transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Buttons gain a soft press + lift. */
.btn { transition: transform var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), box-shadow var(--d-base) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .btn--gold:hover, .btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .btn:active { transform: translateY(0) scale(.98); }
}

/* Cards lift and lift their shadow as a whole (composited). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cc, .card, .ecard { transition: box-shadow var(--d-base) var(--ease-out), transform 500ms var(--ease-out); }
  .cc:hover, .card:hover { box-shadow: var(--shadow-3); }
  .ecard:hover { box-shadow: var(--shadow-2); }
  /* Country-card name nudges toward the reader on hover. */
  .cc__name { transition: transform var(--d-base) var(--ease-out); }
  .cc:hover .cc__name { transform: translateX(6px); }
}

/* Theme dots gently pulse when their section is in view. */
@media (prefers-reduced-motion: no-preference) {
  .exp.is-in .exp__dot { animation: dot-pulse 2.6s var(--ease-io) infinite; }
  @keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--track, var(--gold)) 45%, transparent); }
    50%      { box-shadow: 0 0 0 8px transparent; }
  }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .shimmer { animation: none !important; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-ink); }
  .hero__accent.shimmer { color: var(--gold); }
  .nav__link::after { transition: none; }
}

/* ================================ NO JS ================================ */
.no-js .reveal { opacity: 1 !important; transform: none !important; }

/* ======================= SCROLL-PINNED HERO ======================= */
/* On desktop, the hero pins for a beat while its text recedes and fades,
   then releases into the kente band. --hp (0→1) is written by main.js.
   Mobile / reduced-motion / no-JS: no pin, no extra scroll. */
.hero-pin { --hp: 0; position: relative; }
@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  .hero-pin { height: 152vh; }
  .hero-pin > .hero { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .hero-pin .hero__inner {
    transform: translateY(calc(var(--hp) * -7vh)) scale(calc(1 - var(--hp) * 0.05));
    opacity: clamp(0, calc(1 - var(--hp) * 1.4), 1);
    will-change: transform, opacity;
  }
  .hero-pin .hero__dots { opacity: calc(1 - var(--hp) * 2); }
}

/* ======================= KINETIC WEAVE DIVIDERS ======================= */
/* Loom threads that draw across when scrolled into view, then flow gently —
   the site's weaving motif as a section separator. */
.weave { position: relative; display: flex; flex-direction: column; gap: 7px; padding-block: var(--s-7); }
.weave__t {
  height: 2px; width: 100%; border-radius: 2px;
  background: var(--line-firm);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-xslow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.weave__t:nth-child(even) { transform-origin: right; }
.weave.is-in .weave__t { transform: scaleX(1); }
.weave__t:nth-child(1) { background: var(--gold); }
.weave__t:nth-child(2) { background: var(--clay); opacity: .8; }
.weave__t:nth-child(3) { background: var(--jade); }
.weave__t:nth-child(4) { background: var(--earth-line); opacity: .6; }
.weave__t:nth-child(5) { background: var(--gold); opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  /* After the draw-in, the gold threads flow like a loom shuttle passing. */
  .weave.is-in .weave__t:nth-child(1),
  .weave.is-in .weave__t:nth-child(3) {
    background-image: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 55%, transparent), transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    animation: weave-flow 4.5s var(--ease-io) 1s infinite;
  }
  .weave.is-in .weave__t:nth-child(3) { animation-delay: 2.2s; }
  @keyframes weave-flow {
    0%   { background-position: -40% 0; }
    60%, 100% { background-position: 140% 0; }
  }
}

/* ======================= ANIMATED MAP REVEAL ======================= */
/* Country reference maps weave open (clip wipe up) and settle in scale when
   their card enters view — a beat after the card itself appears. */
@media (prefers-reduced-motion: no-preference) {
  .cc__map {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.09);
    transition:
      clip-path 1200ms var(--ease-out) 160ms,
      transform 1400ms var(--ease-out) 160ms,
      opacity 700ms var(--ease) 160ms;
  }
  .cc.is-in .cc__map { clip-path: inset(0 0 0 0); transform: scale(1); }
}
.no-js .cc__map, .no-js .weave__t { clip-path: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .cc__map { clip-path: none !important; transform: none !important; }
  .weave__t { transform: scaleX(1) !important; animation: none !important; }
}

/* Reversed divider draws from the opposite side, for rhythm between sections. */
.weave--rev .weave__t { transform-origin: right; }
.weave--rev .weave__t:nth-child(even) { transform-origin: left; }