/* ==========================================================================
   WIZKET — animations.css
   Shared motion primitives. GSAP handles sequencing in js/animations.js;
   the rules here are CSS-only pieces and safe fallbacks.
   ========================================================================== */

/* Hide the pill until the intro runs (removed by JS; also auto-removed after 4s) */
html.is-loading .nav__pill {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Text roll — label slides up and is replaced by a copy of itself.
   Markup: <span class="roll" data-text="Label"><span>Label</span></span>
   -------------------------------------------------------------------------- */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.3;
}

.roll > span {
  display: block;
  transition: transform 0.7s var(--ease-out);
}

.roll::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  white-space: nowrap;
  transition: transform 0.7s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover .roll > span,
  .cta:hover .roll > span {
    transform: translateY(-100%);
  }

  .nav__link:hover .roll::after,
  .cta:hover .roll::after {
    transform: translateY(-100%);
  }
}

/* --------------------------------------------------------------------------
   Theme change
   1) Browsers with View Transitions: a circular reveal from the toggle
      (JS drives the clip-path; we only neutralise the default cross-fade).
   2) Everything else: a short colour cross-fade on all elements.
   -------------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
}

html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
  transition:
    background-color 0.6s var(--ease-io),
    color 0.6s var(--ease-io),
    border-color 0.6s var(--ease-io),
    fill 0.6s var(--ease-io),
    stroke 0.6s var(--ease-io),
    box-shadow 0.6s var(--ease-io) !important;
}

/* --------------------------------------------------------------------------
   Reduced motion — keep function, drop movement
   -------------------------------------------------------------------------- */
/* pages with html.wz-full-motion (see website.html) always animate */
@media (prefers-reduced-motion: reduce) {
  html:not(.wz-full-motion) {
    scroll-behavior: auto;
  }

  html:not(.wz-full-motion) *,
  html:not(.wz-full-motion) *::before,
  html:not(.wz-full-motion) *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  html:not(.wz-full-motion).is-loading .nav__pill {
    opacity: 1;
  }

  /* No text roll in reduced motion: the incoming copy is hidden, so the label
     must also stay put — otherwise it slides out of its clipped box on hover
     and the button looks empty. */
  html:not(.wz-full-motion) .roll::after {
    display: none;
  }
  html:not(.wz-full-motion) .roll > span,
  html:not(.wz-full-motion) .nav__link:hover .roll > span,
  html:not(.wz-full-motion) .cta:hover .roll > span,
  html:not(.wz-full-motion) .cta:focus-visible .roll > span {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   CTA label safety: the label sits above the orange fill and its colour only
   flips once the fill has mostly covered the button, so it is never
   white-on-light or dark-on-orange while it grows. Tap/press shows the same
   state on touch devices (which have no hover).
   -------------------------------------------------------------------------- */
.cta { transition: color 0.12s ease 0.14s, background-color 0.6s var(--ease-io); }
.cta:not(:hover):not(:focus-visible):not(:active) { transition-delay: 0s, 0s; }
.cta .roll { position: relative; z-index: 1; color: inherit; }
.cta .roll::after { color: inherit; }
.cta__fill { transition: transform 0.5s var(--ease-out); }
.cta:active { color: var(--on-accent); }
.cta:active .cta__fill { transform: translate(-50%, -50%) scale(1); }

/* --------------------------------------------------------------------------
   CTA label contrast (final word): the button itself turns orange on hover /
   press / focus, so the white label is ALWAYS on orange — even on touch
   screens, or while the ripple fill is still growing. Dark & light mode.
   -------------------------------------------------------------------------- */
.cta { transition: color 0.01s linear 0.14s, background-color 0.24s ease; }
.cta:not(:hover):not(:focus-visible):not(:active) { transition-delay: 0s, 0s; }
.cta:active,
.cta:focus-visible { background-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background-color: var(--accent); color: var(--on-accent); }
}
.cta .roll, .cta .roll::after { color: inherit; }