/* ═══════════════════════════════════════════════════════════════════════════
   ITALK homepage — motion layer (Ink & Amber v2). Loaded after shared.css;
   polish.js adds it if a page forgot the <link>. Tokens only, no Tailwind.
   ═══════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

/* ── scroll reveal (elements get .itk-reveal from polish.js) ──
   CSS FAILSAFE: an animation force-reveals every .itk-reveal after 2s no matter
   what — so if the IntersectionObserver never fires (in-app WebViews like
   KakaoTalk), content can't stay stuck at opacity:0 and blank the page. The
   observer's .itk-in still reveals earlier for the nice scroll effect. */
.itk-reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); animation: itk-failsafe 0.01s linear 2s forwards; }
.itk-reveal.itk-in { opacity: 1; transform: none; }
@keyframes itk-failsafe { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .itk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .reveal { animation: none !important; }
  .lift, .btn, a, button { transition: none !important; }
  .lift:hover { transform: none; }
  html { scroll-behavior: auto; }
}