/* ─────────────────────────────────────────────────────────────
   UNLOCKMYJOB — SOFT LAUNCH  |  animations.css
   All @keyframes + tint classes + btn-unlock states +
   prefers-reduced-motion overrides.
   GSAP handles slide transitions — CSS handles ambient / UI.
───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════
   LOADER
═══════════════════════════════════════════ */
@keyframes loaderIconIn {
  from { opacity: 0; transform: scale(.72) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ═══════════════════════════════════════════
   STAGE GLOW TINTS
   Applied to #stageGlow via deck.setTint()
═══════════════════════════════════════════ */
#stageGlow {
  background: radial-gradient(ellipse 70% 55% at 50% 40%,
    rgba(210,240,25,.055), transparent 72%);
}

#stageGlow.tint-red {
  background: radial-gradient(ellipse 70% 55% at 50% 40%,
    rgba(242,0,47,.11), transparent 72%);
}

#stageGlow.tint-amber {
  background: radial-gradient(ellipse 70% 55% at 50% 40%,
    rgba(250,175,64,.10), transparent 72%);
}

/* ═══════════════════════════════════════════
   BTN-UNLOCK (Early Access CTA states)
═══════════════════════════════════════════ */
.btn-unlock {
  position: relative;
  overflow: hidden;
}

.btn-unlock[data-state="loading"]::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: btnShimmer 1.1s linear infinite;
}

.btn-unlock[data-state="success"] {
  background: rgba(210,240,25,.15) !important;
  border-color: var(--Y) !important;
  color: var(--Y) !important;
}

.btn-unlock.shake {
  animation: formShake .42s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes btnShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(350%); }
}

@keyframes formShake {
  10%, 90%  { transform: translateX(-2px); }
  20%, 80%  { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60%  { transform: translateX(5px); }
  100%      { transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   HERO / NAV
═══════════════════════════════════════════ */
@keyframes heroBreathe {
  0%, 100% { opacity: .48; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.16); }
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210,240,25,.0); }
  50%      { box-shadow: 0 0 0 8px rgba(210,240,25,.07); }
}

/* Scroll hint — travelling pulse top → bottom */
@keyframes scPulse {
  0%   { top: -30%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Nav triangle pieces */
@keyframes triFly {
  from { opacity: 0; transform: translateY(-16px) scale(.6); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}

@keyframes triFlyGhost {
  from { opacity: 0; transform: translateY(12px) scale(.8); }
  to   { opacity: 0; }
}

/* ═══════════════════════════════════════════
   NEX MASCOT
═══════════════════════════════════════════ */
@keyframes nexGlow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(210,240,25,.20)); }
  50%      { filter: drop-shadow(0 0 28px rgba(210,240,25,.38)); }
}

/* ═══════════════════════════════════════════
   CURSOR (blink for text cursor elements)
═══════════════════════════════════════════ */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ═══════════════════════════════════════════
   NUDGE (button micro-bounce on interaction)
═══════════════════════════════════════════ */
@keyframes nudge {
  0%        { transform: translateX(0); }
  25%       { transform: translateX(-3px); }
  50%       { transform: translateX(4px); }
  75%       { transform: translateX(-2px); }
  100%      { transform: translateX(0); }
}

/* ═══════════════════════════════════════════
   DRIP (form success / feedback)
═══════════════════════════════════════════ */
@keyframes drip {
  0%   { transform: scaleY(0) translateY(-40%); opacity: 0; }
  60%  { transform: scaleY(1.12) translateY(0);  opacity: 1; }
  80%  { transform: scaleY(.95) translateY(2px); opacity: 1; }
  100% { transform: scaleY(1)  translateY(0);   opacity: 1; }
}

/* ═══════════════════════════════════════════
   WORD STAGGER (GSAP primes these; CSS fallback)
═══════════════════════════════════════════ */
@keyframes wordIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════
   RAIL DOT
═══════════════════════════════════════════ */
@keyframes dotPop {
  0%   { transform: scaleY(1); }
  40%  { transform: scaleY(1.3) scaleX(.7); }
  70%  { transform: scaleY(.85) scaleX(1.1); }
  100% { transform: scaleY(1)   scaleX(1); }
}
.dot.on { animation: dotPop .38s cubic-bezier(.22,1,.28,1) both; }

/* ═══════════════════════════════════════════
   THANK YOU PAGE
═══════════════════════════════════════════ */
@keyframes ty-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ty-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--Y); transform: scale(1); }
  50%      { box-shadow: 0 0 12px var(--Y); transform: scale(1.15); }
}

@keyframes ty-float1 {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-28px); }
}

@keyframes ty-float2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(22px); }
}

/* ═══════════════════════════════════════════
   REVEAL PANEL (slide 08)
═══════════════════════════════════════════ */
@keyframes stampIn {
  from { opacity: 0; transform: scale(1.5) rotate(-8deg); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1)   rotate(-6deg); filter: blur(0); }
}

@keyframes revealCardIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes unlockCodeIn {
  from { opacity: 0; letter-spacing: -.06em; }
  to   { opacity: 1; letter-spacing: .28em; }
}

/* ═══════════════════════════════════════════
   PREFERS REDUCED MOTION — kill ALL CSS motion
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep structural transitions that change layout (not just decoration) */
  .dot              { transition: background .01ms, height .01ms, border-radius .01ms; }
  .wl-inp           { transition: border-color .01ms; }
  .thank-you-panel  { transition: opacity .01ms, transform .01ms; }
  #stageGlow        { transition: background .01ms; }

  /* Loader: skip animation, show content immediately */
  #loader           { display: none !important; }
}