/* ============================================================
   PuniCodex — Motion & Micro-interactions
   Requires punicodex-tokens.css. All animations respect
   prefers-reduced-motion.
   ============================================================ */

/* Gold shimmer sweep for display text (apply to .pc-display) */
@keyframes pc-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.pc-shimmer {
  background: linear-gradient(100deg,
    #8C6A22 0%, #C9A23F 35%, #F5E3A8 50%, #C9A23F 65%, #8C6A22 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pc-shimmer 5.5s ease-in-out infinite;
}

/* Scroll / load reveal — fade up with a breath of gold */
@keyframes pc-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pc-reveal {
  opacity: 0;
  animation: pc-reveal .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.pc-reveal[data-delay="1"] { animation-delay: .15s; }
.pc-reveal[data-delay="2"] { animation-delay: .3s; }
.pc-reveal[data-delay="3"] { animation-delay: .45s; }
.pc-reveal[data-delay="4"] { animation-delay: .6s; }

/* Medallion aura — slow breathing glow for portraits & seals */
@keyframes pc-aura {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212,175,55,.22), 0 0 26px rgba(212,175,55,.10); }
  50%      { box-shadow: 0 0 0 1px rgba(212,175,55,.45), 0 0 52px rgba(212,175,55,.22); }
}
.pc-aura { animation: pc-aura 4.2s ease-in-out infinite; }

/* Diamond divider pulse — the restored mark breathes */
@keyframes pc-mark-pulse {
  0%, 100% { transform: rotate(45deg) scale(1);    opacity: .85; }
  50%      { transform: rotate(45deg) scale(1.18); opacity: 1; }
}
.pc-divider span { animation: pc-mark-pulse 3.6s ease-in-out infinite; }

/* Card lift already in tokens; add gold-sheen sweep on hover */
.pc-card { position: relative; overflow: hidden; }
.pc-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(245,227,168,.06) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.pc-card:hover::after { transform: translateX(100%); }

/* The loader overlay — fullscreen obsidian with centered mark.
   Usage:
   <div class="pc-loader"><img src="/assets/brand/10-motion/punicodex-loader.svg" alt=""></div>
   then remove .is-loading on window load. */
.pc-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--pc-obsidian);
  transition: opacity .5s ease, visibility .5s;
}
.pc-loader img { width: 120px; height: 120px; }
.pc-loader.is-done { opacity: 0; visibility: hidden; }

/* Reduced motion — the archive respects its visitors */
@media (prefers-reduced-motion: reduce) {
  .pc-shimmer, .pc-aura, .pc-divider span { animation: none; }
  .pc-reveal { opacity: 1; animation: none; }
  .pc-card::after { display: none; }
}