/* ==========================================================================
   wishandkyola.lol — animations.css
   --------------------------------------------------------------------------
   Every keyframe in one file, so the whole site can be quietened by
   deleting one <link>. Nothing here runs while a section is offscreen
   (.is-resting pauses it) and everything obeys prefers-reduced-motion.
   ========================================================================== */

/* ---- ambient --------------------------------------------- */
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.07); opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

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

/* ---- the sun and the moon -------------------------------- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sunPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 198, 92, 0.55), 0 0 82px rgba(255, 150, 60, 0.26), inset 0 -7px 20px rgba(122, 52, 0, 0.32); }
  50%      { box-shadow: 0 0 42px rgba(255, 214, 120, 0.72), 0 0 104px rgba(255, 160, 70, 0.34), inset 0 -7px 20px rgba(122, 52, 0, 0.32); }
}

@keyframes sunRing {
  0%   { transform: scale(0.94); opacity: 0.55; }
  70%  { transform: scale(1.34); opacity: 0; }
  100% { transform: scale(1.34); opacity: 0; }
}

@keyframes moonGlow {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

@keyframes flameFlicker {
  0%, 100% { transform: translateY(0) scale(1);     opacity: 0.85; }
  50%      { transform: translateY(-2px) scale(1.2); opacity: 1; }
}

/* ---- notifications --------------------------------------- */
@keyframes alarmPulse {
  0%, 100% { border-color: rgba(255, 120, 90, 0.5); }
  50%      { border-color: rgba(255, 160, 130, 0.9); }
}

@keyframes starPing {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

@keyframes pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes dots {
  0%   { opacity: 0.25; }
  50%  { opacity: 1; }
  100% { opacity: 0.25; }
}

/* ---- things crossing the screen -------------------------- */
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.8); }
  15%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -46dvh) scale(1.05); }
}

@keyframes rewardUp {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -34px); }
}

@keyframes crossScreen {
  0%   { opacity: 0; transform: translateX(0) scaleX(1); }
  10%  { opacity: 0.9; }
  45%  { transform: translateX(58vw) scaleX(1); }
  50%  { opacity: 0.9; }
  55%  { transform: translateX(58vw) scaleX(-1); }
  90%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(120vw) scaleX(-1); }
}

/* ---- interaction feedback -------------------------------- */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-9deg); }
  40%      { transform: rotate(8deg); }
  60%      { transform: rotate(-5deg); }
  80%      { transform: rotate(3deg); }
}

@keyframes poke {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes clockIn {
  0%   { opacity: 0.2; transform: translateY(8px) scale(0.98); letter-spacing: 0.2em; }
  100% { opacity: 1;   transform: none; letter-spacing: 0.04em; }
}

@keyframes scramble {
  0%   { opacity: 1; transform: translateX(0); }
  25%  { opacity: 0.4; transform: translateX(-2px); }
  50%  { opacity: 0.9; transform: translateX(2px); }
  75%  { opacity: 0.5; transform: translateX(-1px); }
  100% { opacity: 1; transform: none; }
}

@keyframes sparkSpread {
  0%   { box-shadow: 0 0 0 0 rgba(203, 185, 255, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(203, 185, 255, 0); }
}

.is-sparking { animation: sparkSpread 700ms ease-out; }

/* ==========================================================================
   MODES
   ========================================================================== */

/* ---- KYO MODE — she found enough. the site warms up. ----- */
body.kyo-mode {
  --glow-c: rgba(255, 186, 205, 0.62);
}

body.kyo-mode #stars { opacity: calc(var(--stars) + 0.1); }

body.kyo-mode .sun {
  box-shadow: 0 0 36px rgba(255, 210, 140, 0.7), 0 0 100px rgba(255, 170, 130, 0.36), inset 0 -7px 20px rgba(122, 52, 0, 0.32);
}

/* ---- WISH MODE — very serious, for about three seconds --- */
body.wish-mode {
  filter: contrast(1.06) saturate(0.55) brightness(0.94);
  transition: filter 500ms ease;
}

body.wish-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 200, 255, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%, rgba(90, 160, 255, 0.12), transparent 60%);
  animation: fadeIn 400ms ease both;
}

/* ==========================================================================
   REDUCED MOTION — the whole site stays readable and still
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  #glow { transition: none; }
  .reveal { opacity: 1; transform: none; }
  .orbit__rotor { animation: none; }
  .moon { transform: translate(-50%, -50%) translateX(46%) translateY(-32%); }
  .sun::before { animation: none; opacity: 0.4; }
  .sun::after { display: none; }
  .visitor { display: none; }
  .float-heart { display: none; }
  .sun { animation: none; }
}