/* ZPOP — animations.css
   POP interaction system (hover/press/viewport/reveal/particle canvas), reduced-motion rules, focus + skip-link + a11y patch.
   Load order on every page: animations.css > style.css > header.css > home.css > polish.css
   (order matters: later files intentionally override earlier ones). */

/* =========================================================================
   ZPOP POP SYSTEM — CSS
   Reusable tokens + base classes for the site-wide interaction language.
   Include this on every page alongside zpop-pop-system.js.
   ========================================================================= */

:root{
  /* ---- easing & timing tokens (shared with the Design System) ---- */
  --pop-ease-settle: cubic-bezier(0.22, 1, 0.36, 1);      /* no overshoot — hover/press release, viewport-react */
  --pop-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); /* small elements only, reveal-pop pulse */
  --pop-ease-linear-fast: cubic-bezier(0.4, 0, 1, 1);      /* press-down */

  --pop-scale-hover-sm: 1.04;
  --pop-scale-hover-lg: 1.02;
  --pop-scale-press: 0.97;

  --pop-magnet-max: 6px;

  --pop-dur-hover: 220ms;
  --pop-dur-press-down: 80ms;
  --pop-dur-press-up: 180ms;
  --pop-dur-reveal-pulse: 260ms;
  --pop-dur-reveal-content: 400ms;
  --pop-dur-viewport: 600ms;

  /* palette (matches the ZPOP design system — used by the particle engine) */
  --pop-color-kernel-500: #F2B705;
  --pop-color-kernel-300: #F8D766;
  --pop-color-husk-600: #C67A2E;
  --pop-color-char-500: #B23A1E;
}

/* =========================================================================
   3.1  hover-pop
   ========================================================================= */
[data-pop~="hover"]{
  will-change: transform, box-shadow;
  transition:
    transform var(--pop-dur-hover) var(--pop-ease-settle),
    box-shadow var(--pop-dur-hover) var(--pop-ease-settle);
}
[data-pop~="hover"][data-pop-size="sm"]{
  transition-timing-function: var(--pop-ease-overshoot);
}
/* transform is applied inline by JS (scale + magnetic offset combined) so it
   can respond continuously to pointer position; this class only sets the
   transition curve/duration. */

/* =========================================================================
   3.6  press-tactile  (layered on top of hover-pop)
   ========================================================================= */
[data-pop~="press"]{
  cursor: pointer;
}
[data-pop~="press"].is-pressed{
  transition: transform var(--pop-dur-press-down) var(--pop-ease-linear-fast) !important;
}

/* =========================================================================
   3.3  viewport-react (base Flow rise+fade — always on for [data-pop~="viewport"])
   ========================================================================= */
[data-pop~="viewport"]{
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--pop-dur-viewport) var(--pop-ease-settle),
    transform var(--pop-dur-viewport) var(--pop-ease-settle);
}
[data-pop~="viewport"].zpop-inview{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   3.5  reveal-pop  (settle-pulse on the trigger + staggered content flow-in)
   ========================================================================= */
[data-pop~="reveal-trigger"]{
  transition: transform var(--pop-dur-reveal-pulse) var(--pop-ease-overshoot);
}
[data-pop~="reveal-trigger"].zpop-pulse{
  transform: scale(1.015);
}

[data-pop~="reveal-content"] > *{
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--pop-dur-reveal-content) var(--pop-ease-settle),
    transform var(--pop-dur-reveal-content) var(--pop-ease-settle);
}
[data-pop~="reveal-content"].zpop-reveal-active > *{
  opacity: 1;
  transform: translateY(0);
}
/* stagger — JS assigns --pop-stagger-i per child; CSS reads it for delay */
[data-pop~="reveal-content"] > *{
  transition-delay: calc(var(--pop-stagger-i, 0) * 40ms);
}

/* =========================================================================
   Particle burst canvas (single shared instance, injected by JS)
   ========================================================================= */
#zpop-pop-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* =========================================================================
   Reduced motion: every POP degrades to a simple, immediate state change
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  [data-pop~="hover"],
  [data-pop~="press"].is-pressed,
  [data-pop~="viewport"],
  [data-pop~="reveal-trigger"],
  [data-pop~="reveal-content"] > *{
    transition-duration: 1ms !important;
    transform: none !important;
  }
  #zpop-pop-canvas{ display:none; }
}

/* =========================================================================
   ZPOP A11Y + PERF PATCH — CSS
   Include on every page, after zpop-pop-system.css.
   Fixes: missing focus states, missing skip-link, the stone-500-on-light
   contrast failure, and a loading-state treatment for the 3D scenes.
   ========================================================================= */

/* ---- corrected light-background secondary text color (was --stone-500 = 3.57:1, fails AA) ---- */
:root{
  --stone-700-fix: #4A4438; /* 8.9:1 on --paper-000 — use this instead of --stone-500 for body copy on light backgrounds */
}

/* ---- global visible focus state — every interactive element, every file ---- */
a:focus-visible,
button:focus-visible,
[data-pop~="hover"]:focus-visible,
[data-pop~="press"]:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--kernel-500, #F2B705);
  outline-offset: 3px;
  border-radius: 4px;
}
/* remove the outline only for mouse users who already have hover/press feedback */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){
  outline: none;
}

/* ---- skip-to-content link ---- */
.zpop-skip-link{
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 10000;
  background: var(--kernel-500, #F2B705);
  color: var(--ink-950, #14110C);
  font-family: var(--font-heading, sans-serif);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: top 200ms ease;
}
.zpop-skip-link:focus{
  top: 16px;
}

/* ---- visually-hidden utility (for screen-reader-only labels) ---- */
.zpop-sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- loading state shown until a 3D scene renders its first frame ---- */
.zpop-scene-loading{
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--ink-950, #14110C);
  transition: opacity 500ms ease;
}
.zpop-scene-loading.zpop-loaded{
  opacity: 0;
  pointer-events: none;
}
.zpop-scene-loading .dot{
  width: 14px; height: 18px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #F8D766, #F2B705 60%, #C67A2E);
  animation: zpop-load-pulse 1.1s ease-in-out infinite;
}
.zpop-scene-loading .label{
  font-family: var(--font-heading, sans-serif);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-500, #8C8271);
}
@keyframes zpop-load-pulse{
  0%,100%{ transform: scale(1); opacity: 0.6; }
  50%{ transform: scale(1.3); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .zpop-scene-loading .dot{ animation: none; }
}