body { font-family: 'Zen Kaku Gothic New', sans-serif; }
  .font-display { font-family: 'Shippori Mincho', serif; }
  .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ── Drawer ──────────────────────────────── */
  .drawer-enter { transform: translateX(-100%); }
  .drawer-open  { transform: translateX(0); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); }

  /* ── Keyframes ───────────────────────────── */
  @keyframes overlayIn  { from { opacity: 0; }                                        to { opacity: 1; } }
  @keyframes pageIn     { from { opacity: 0; transform: translateY(14px); }           to { opacity: 1; transform: translateY(0); } }
  @keyframes modalIn    { from { opacity: 0; transform: scale(0.93) translateY(10px);} to { opacity: 1; transform: scale(1)    translateY(0); } }
  @keyframes sheetUp    { from { opacity: 0; transform: translateY(110%); }           to { opacity: 1; transform: translateY(0); } }
  @keyframes dropIn     { from { opacity: 0; transform: translateY(-8px) scale(0.97);} to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes panelDown  { from { opacity: 0; transform: translateY(-10px); }          to { opacity: 1; transform: translateY(0); } }
  @keyframes cardFade   { from { opacity: 0; transform: translateY(12px); }           to { opacity: 1; transform: translateY(0); } }

  /* ── Animation classes ───────────────────── */
  .overlay-enter { animation: overlayIn  0.22s ease forwards; }
  .page-enter    { animation: pageIn     0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .modal-enter   { animation: modalIn    0.3s  cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .drop-enter    { animation: dropIn     0.18s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .panel-enter   { animation: panelDown  0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .card-enter    { animation: cardFade   0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }

  /* Sheet: slides up on mobile, pops in on desktop */
  .sheet-enter { animation: sheetUp 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  @media (min-width: 640px) { .sheet-enter { animation: modalIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } }

  /* Card stagger by DOM position */
  .card-enter:nth-child(2)  { animation-delay: 0.04s; }
  .card-enter:nth-child(3)  { animation-delay: 0.08s; }
  .card-enter:nth-child(4)  { animation-delay: 0.12s; }
  .card-enter:nth-child(5)  { animation-delay: 0.16s; }
  .card-enter:nth-child(6)  { animation-delay: 0.20s; }
  .card-enter:nth-child(n+7){ animation-delay: 0.24s; }

  /* ── Lantern card hover ───────────────────── */
  .lantern-card {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
  }
  .lantern-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px -10px rgba(232,150,74,0.35); }
  .lantern-card:active { transform: translateY(-2px) scale(0.98); }

  /* ── General interactive transitions ─────── */
  .smooth-btn { transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease, opacity 0.18s ease; }
  .smooth-btn:active { transform: scale(0.93); }
  .smooth-nav { transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; }
  .smooth-nav:active { transform: scale(0.88); }

  /* ── Skeleton shimmer ───────────────────── */
  @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
  .skeleton-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.6s ease-in-out infinite;
  }

  /* ── Scroll strip ─────────────────────────── */
  @keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Sembunyikan scrollbar horizontal pada chip filter */
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  .no-scrollbar::-webkit-scrollbar { display: none; }