/* =========================================================================
   animations.css — keyframes, scroll-timeline reveals, micro-interactions
   ========================================================================= */

/* hero headline split-letter reveal */
.split-text { display: inline-block; }
.split-text .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-text .word > span { display: inline-block; transform: translateY(110%); animation: splitIn 1.1s var(--ease-out) forwards; }
.split-text .word:nth-child(1) > span { animation-delay: 100ms; }
.split-text .word:nth-child(2) > span { animation-delay: 220ms; }
.split-text .word:nth-child(3) > span { animation-delay: 340ms; }
.split-text .word:nth-child(4) > span { animation-delay: 460ms; }
.split-text .word:nth-child(5) > span { animation-delay: 580ms; }
@keyframes splitIn { to { transform: translateY(0); } }

.fade-in { animation: fadeIn 1.2s var(--ease-out) backwards; }
.fade-in.delay-1 { animation-delay: 200ms; }
.fade-in.delay-2 { animation-delay: 400ms; }
.fade-in.delay-3 { animation-delay: 600ms; }
.fade-in.delay-4 { animation-delay: 800ms; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* magnetic hover target — JS sets --mx/--my */
.magnetic { transition: transform 350ms var(--ease-out); }

/* scroll-driven parallax wrapper */
.parallax { will-change: transform; }

/* card hover lift with shadow */
.hover-lift { transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-4); }

/* shimmer placeholder for skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--paper-3) 0%, var(--paper-2) 50%, var(--paper-3) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--r-2);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* gentle bobbing for mascot */
.bob { animation: bob 4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.bob-2 { animation: bob 5s ease-in-out infinite; animation-delay: -1.5s; }
.bob-3 { animation: bob 6s ease-in-out infinite; animation-delay: -3s; }

/* wave underline */
.wave-underline {
  background-image: linear-gradient(120deg, var(--accent) 0%, var(--accent) 100%);
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: 0 88%;
  padding-bottom: 2px;
}

/* spin slow */
.spin-slow { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* counter-up runs on JS */
.counter { font-variant-numeric: tabular-nums; }

/* scroll arrow */
.scroll-cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 46px; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 14px;
  display: flex; justify-content: center; padding-top: 8px;
  z-index: 3;
}
.scroll-cue::after {
  content: ""; width: 3px; height: 8px; background: rgba(255,255,255,0.9); border-radius: 2px;
  animation: scrollHint 1.4s ease-in-out infinite;
}
@keyframes scrollHint {
  0% { opacity: 1; transform: translateY(0); }
  60% { opacity: 0.2; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}

/* emoji / kawaii sticker */
.sticker {
  position: absolute; pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.18));
}

/* ribbon highlight on selected */
.ribbon {
  position: absolute; top: 12px; right: -38px;
  background: var(--accent); color: #fff;
  padding: 4px 40px; transform: rotate(35deg);
  font-size: var(--fs-100); letter-spacing: var(--tracking-wide);
  box-shadow: 0 4px 10px rgba(28,105,212,0.4);
}

/* color tint overlay for big image media */
.tint-blue { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%); }
.tint-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--accent-2) 100%); }

/* full-bleed gradient hero variant for sub-pages */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-10));
  padding-bottom: var(--s-10);
  background: var(--grad-mesh);
  color: var(--paper);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(at 50% 100%, rgba(0,0,0,0.55) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(246,245,241,0.85); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero .hero-illust { position: absolute; right: -8%; top: 10%; width: 65%; max-width: 980px; opacity: 0.5; z-index: 1; }

/* app store badges (SVG) */
.store-badges { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--ink); color: #fff;
  padding: 0.6rem 1rem; border-radius: var(--r-2);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out);
}
.store-badge:hover { background: #000; transform: translateY(-2px); }
.store-badge svg { width: 24px; height: 24px; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge-text small { font-size: 0.65rem; opacity: 0.7; }
.store-badge-text strong { font-size: 0.95rem; letter-spacing: 0.01em; }
.store-badge.light { background: #fff; color: var(--ink); border-color: var(--line); }
.store-badge.light:hover { background: var(--paper-3); }