/* ==========================================================================
   DISNEY ACADEMY — animations.css
   Keyframes, decorative motion, micro-interactions, reduced-motion guards
   ========================================================================== */

/* --------------------------------------------------------------- KEYFRAMES */
@keyframes float-y     { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-16px); } }
@keyframes float-y-sm  { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-8px); } }
@keyframes drift {
  0%   { transform: translate(0,0) rotate(0deg); }
  33%  { transform: translate(12px,-14px) rotate(6deg); }
  66%  { transform: translate(-10px,8px) rotate(-4deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes twinkle   { 0%,100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes star-pop  { 0%,100% { transform: scale(1) translateY(0); } 45% { transform: scale(1.35) translateY(-8px); } }
@keyframes ring-pulse{ 0% { transform: scale(1); opacity: .75; } 70%,100% { transform: scale(1.45); opacity: 0; } }
@keyframes ripple-out{ to { transform: scale(3.2); opacity: 0; } }
@keyframes pop-in    { 0% { transform: scale(.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes drawer-in { to { opacity: 1; transform: translateX(0); } }
@keyframes toast-in  { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateY(16px); opacity: 0; } }
@keyframes draw-circle { to { stroke-dashoffset: 0; } }
@keyframes draw-tick   { to { stroke-dashoffset: 0; } }
@keyframes shine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes scroll-cue {
  0%   { transform: translateY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}
@keyframes banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------- DECORATIVE MOTION */
.anim-float     { animation: float-y 6.5s ease-in-out infinite; }
.anim-float-sm  { animation: float-y-sm 4.5s ease-in-out infinite; }
.anim-drift     { animation: drift 15s ease-in-out infinite; }
.anim-twinkle   { animation: twinkle 3.2s ease-in-out infinite; }
.anim-spin-slow { animation: spin-slow 40s linear infinite; }

.d1 { animation-delay: .4s; } .d2 { animation-delay: .9s; }
.d3 { animation-delay: 1.4s; } .d4 { animation-delay: 2s; } .d5 { animation-delay: 2.6s; }

/* Gold shimmer sweeping across a heading word */
.shine {
  background: linear-gradient(100deg, var(--gold-500), #FFF3C4 45%, var(--gold-500) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s ease-in-out infinite;
}

/* Scroll cue under the hero */
.scroll-cue {
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 14px;
  position: relative;
  margin-inline: auto;
}
.scroll-cue::after {
  content: "";
  position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; margin-left: -2px;
  border-radius: 3px;
  background: var(--gold-400);
  animation: scroll-cue 1.9s ease-in-out infinite;
}

/* ------------------------------------------------- MICRO-INTERACTIONS */
.hover-pop:hover i, .hover-pop:focus-visible i { animation: star-pop .6s var(--spring); }

/* Image wipe reveal — JS toggles .is-revealed */
.reveal { position: relative; overflow: hidden; }
.reveal::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--purple-700);
  transform-origin: right;
  transform: scaleX(0);
  z-index: 3;
}
.reveal.is-armed::after { transform: scaleX(1); transform-origin: left; }
.reveal.is-revealed::after {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .95s var(--ease);
}

/* Scrolling word banner */
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track { display: flex; gap: 2.6rem; width: max-content; animation: banner-scroll 34s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  color: #D9CCF7;
  white-space: nowrap;
}
.ticker__item i { color: var(--gold-400); font-size: .62em; }

/* Page transition curtain */
.curtain {
  position: fixed; inset: 0; z-index: 1050;
  background: var(--grad-dusk);
  transform: translateY(100%);
  pointer-events: none;
}
.curtain.is-leaving { transform: translateY(0); transition: transform .55s var(--ease); }

/* NOTE: no blanket will-change. Promoting every animated element to its own
   GPU layer costs more memory than it saves, especially on phones. */

/* ------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  #starfield { display: none; }
  .reveal::after { display: none; }
}

/* Field shake used by form validation */
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}