/* assets/css/wax.css */

:root {
  --wax-weight: 700;
}

/* All display + heading + CTA type reads --wax-weight when using variable Clash Display */
.display, .heading, .nav-logo,
.hero-title,
.hero-cta, .nav-cta, .stage-title, .about-headline,
.dl-submit, .submit-btn,
[data-wax~="scratch"], [data-wax~="drop"] {
  font-family: 'Clash Display', sans-serif;
  font-variation-settings: 'wght' var(--wax-weight);
  font-weight: normal;
}

/* Word wrapping spans are inline-block so transforms work */
.wax-word {
  display: inline-block;
  will-change: transform, opacity, font-variation-settings;
}

/* Drop reveal */
.wax-drop-pending .wax-word {
  opacity: 0;
  transform: translateY(18px);
  font-variation-settings: 'wght' 800;
}

.wax-drop-active .wax-word {
  opacity: 1;
  transform: translateY(0);
  font-variation-settings: 'wght' var(--wax-weight, 700);
  transition:
    opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    font-variation-settings 480ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--wax-drop-delay, 0ms);
}

/* Scratch — visual shuffle via CSS animation on a pseudo overlay */
[data-wax~="scratch"] .wax-word {
  position: relative;
}

@keyframes waxScratch {
  0%   { transform: translateX(0)   skewX(0deg); filter: none; }
  20%  { transform: translateX(-1px) skewX(-2deg); filter: blur(0.4px); }
  40%  { transform: translateX(1px)  skewX(2deg);  filter: blur(0.6px); }
  60%  { transform: translateX(-0.5px) skewX(-1deg); filter: blur(0.3px); }
  80%  { transform: translateX(0.5px)  skewX(1deg);  filter: blur(0.2px); }
  100% { transform: translateX(0)   skewX(0deg); filter: none; }
}

.wax-word.wax-scratching {
  animation: waxScratch 240ms steps(6, end);
}

@keyframes waxScratchRMPulse {
  0%   { font-variation-settings: 'wght' var(--wax-weight, 700); }
  50%  { font-variation-settings: 'wght' 750; }
  100% { font-variation-settings: 'wght' var(--wax-weight, 700); }
}

.wax-word.wax-scratch-rm-pulse {
  animation: waxScratchRMPulse 200ms ease-out;
}

/* Rule scrub */
.wax-rule {
  position: relative;
  display: block;
  height: 12px;
  margin: 32px 0;
}

.wax-rule-line {
  position: absolute;
  left: 0;
  width: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

.wax-rule-line--thin {
  top: 0;
  height: 1px;
}

.wax-rule-line--thick {
  bottom: 0;
  height: 4px;
}

.wax-rule-active .wax-rule-line--thin {
  animation: waxRuleScrub 240ms cubic-bezier(0.5, 1, 0.89, 1) forwards;
  animation-delay: 0ms;
}

.wax-rule-active .wax-rule-line--thick {
  animation: waxRuleScrub 320ms cubic-bezier(0.5, 1, 0.89, 1) forwards;
  animation-delay: 320ms;
}

.wax-rule-active.wax-rule-rm .wax-rule-line {
  animation: none;
  transform: scaleX(1);
  background: rgba(255, 255, 255, 0.25);
}

@keyframes waxRuleScrub {
  0%   { transform: scaleX(0); background: var(--accent); }
  85%  { transform: scaleX(1); background: var(--accent); }
  100% { transform: scaleX(1); background: rgba(255, 255, 255, 0.25); }
}

/* Reduced motion master fallbacks */
@media (prefers-reduced-motion: reduce) {
  .wax-drop-pending .wax-word,
  .wax-drop-active .wax-word {
    opacity: 1;
    transform: none;
    transition: none;
    font-variation-settings: 'wght' 700;
  }

  .wax-word.wax-scratching {
    animation: none;
  }
}