/* ─────────────────────────────────────────────────────────────────────
   KubePass v2 — Layering, Glass, Pass palette, Motion
   Loaded AFTER tokens.css. Extends the warm earth-tone system with depth
   tokens, glass surfaces, a single warm pass palette (no tiers), and the
   keyframes used by TiltCard / PulseRing / Reward unlock.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Z-axis depth stack ─────────────────────────────────────────
     Each level pairs a tight contact shadow with a soft ambient
     shadow — the further from rest, the more separation. */
  --depth-0:        0 1px 1px rgba(40,28,18,0.04);
  --depth-1:        0 1px 2px rgba(40,28,18,0.06), 0 4px 12px -4px rgba(40,28,18,0.08);
  --depth-2:        0 2px 4px rgba(40,28,18,0.06), 0 12px 28px -10px rgba(40,28,18,0.14);
  --depth-3:        0 4px 8px rgba(40,28,18,0.08), 0 24px 48px -16px rgba(40,28,18,0.22);
  --depth-4:        0 8px 16px rgba(40,28,18,0.10), 0 36px 72px -20px rgba(40,28,18,0.30);
  --depth-hero:     0 2px 4px rgba(40,28,18,0.08), 0 18px 40px -12px rgba(40,28,18,0.32), 0 40px 80px -24px rgba(40,28,18,0.40);

  /* Inset highlight — the "lifted" sheen on dark surfaces */
  --inset-top:      inset 0 1px 0 rgba(255,255,255,0.08);
  --inset-top-strong: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.18);

  /* Hero/coupon card shadow — the canonical drop-shadow used on the
     Passport hero. Standardized across the V2 pass card, the StackedCoupons
     front card, the RedeemScreen coupon, and every gradient-ambient hero
     across the prototype. Centralized so future changes happen in one place. */
  --shadow-card-hero: 0 20px 50px -20px rgba(29,27,32,0.55);

  /* ── Glass surfaces (visionOS-ish, warm-tinted) ─────────────── */
  --glass-light:        rgba(255, 251, 244, 0.62);
  --glass-light-strong: rgba(255, 251, 244, 0.78);
  --glass-dark:         rgba(34, 30, 27, 0.55);
  --glass-dark-strong:  rgba(34, 30, 27, 0.72);
  --glass-border:       rgba(255, 255, 255, 0.45);
  --glass-border-dark:  rgba(255, 255, 255, 0.10);
  --glass-blur:         blur(22px) saturate(160%);
  --glass-blur-lg:      blur(36px) saturate(170%);

  /* ── Pass palette (single, no tiers) ────────────────────────────
     Warm-dark gradient + amber foil sheen + multi-hue holo conic.
     Distinct from --gradient-ambient (which stays on Quests/Passport
     hero cards) because the pass needs a darker uniform base so the
     foil sheen reads as a specular highlight, not a competing glow. */
  /* Match Quests / Passport hero color (--gradient-ambient in tokens.css) so
     the V2 pass card reads consistent with the rest of the warm-amber hero
     surfaces in the prototype. */
  --pass-grad: radial-gradient(135% 120% at 50% 118%, #F2A03F 0%, #C8470F 24%, #5C2E16 52%, #1C1411 100%);

  /* Onboarding backdrop — a quieter cousin of --gradient-ambient. Mostly
     the flat warm-1000 base, with a small warm accent radial in the
     bottom-right corner so the dark surface picks up some brand colour
     without competing with form content. Used across welcome / phone /
     OTP / WhatsApp / profile-fill / profile-quick so the whole sign-up
     journey shares one atmospheric backdrop. */
  --gradient-onboarding:
    radial-gradient(55% 45% at 100% 100%, rgba(230,146,84,0.32) 0%, rgba(200,71,15,0.14) 35%, rgba(29,27,32,0) 70%),
    #1D1B20;
  --pass-sheen: linear-gradient(115deg,
    transparent 0%,
    rgba(255,170,90,0.22) 45%,
    rgba(255,200,140,0.45) 50%,
    rgba(255,170,90,0.22) 55%,
    transparent 100%);
  /* Holographic overlay — applied on top of the pass on tilt. */
  --holo-sheen: conic-gradient(
    from 180deg at 50% 50%,
    rgba(255, 173, 102, 0.0) 0deg,
    rgba(255, 173, 102, 0.45) 60deg,
    rgba(255, 218, 145, 0.35) 120deg,
    rgba(168, 200, 168, 0.30) 180deg,
    rgba(180, 168, 215, 0.35) 240deg,
    rgba(220, 150, 130, 0.40) 300deg,
    rgba(255, 173, 102, 0.0) 360deg
  );

  /* ── Motion ─────────────────────────────────────────────────────
     Spring-ish easings used for entrances and the unlock burst. */
  --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);
  --ease-out-soft:  cubic-bezier(.22, .61, .36, 1);
  --ease-in-out:    cubic-bezier(.65, 0, .35, 1);
  --dur-fast:       0.18s;
  --dur-med:        0.32s;
  --dur-slow:       0.6s;
  --dur-hero:       0.9s;
}

/* ── Glass utility classes ─────────────────────────────────────── */
.kp-glass {
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--depth-1);
}
.kp-glass-dark {
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border-dark);
  box-shadow: var(--depth-1), var(--inset-top);
}

/* ── Pass tilt 3D — perspective + tilt transform stack ─────────── */
.kp-tilt-stage {
  perspective: 1400px;
  transform-style: preserve-3d;
}
.kp-tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.18s var(--ease-out-soft);
  will-change: transform;
}

/* ── Foil sheen — moves in response to tilt (var-driven) ───────── */
.kp-foil {
  position: absolute; inset: 0;
  background: var(--pass-sheen);
  background-position: var(--sheen-x, 50%) var(--sheen-y, 50%);
  background-size: 220% 220%;
  mix-blend-mode: overlay;
  opacity: 0.85;
  pointer-events: none;
  transition: background-position 0.1s linear;
  border-radius: inherit;
}

/* ── Reward unlock burst ───────────────────────────────────────── */
@keyframes kpUnlockBurst {
  0%   { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes kpFoilSweep {
  0%   { background-position: -120% 50%; }
  100% { background-position:  220% 50%; }
}
@keyframes kpPulseRing {
  0%   { transform: scale(0.92); opacity: 0.9; }
  100% { transform: scale(1.45); opacity: 0;   }
}
@keyframes kpConfetti {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--c-dx, 0), var(--c-dy, 0)) rotate(360deg); opacity: 0; }
}

/* ── Dialog scrim + card entrance (used by LogoutConfirmDialog) ── */
@keyframes kpDialogScrim {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kpDialogIn {
  0%   { opacity: 0; transform: scale(0.92) translateY(8px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ── Loading shell — three pulsing dots (used by LoadingShell in shared.jsx). */
@keyframes kpLoadingPulse {
  0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
  40%           { transform: scale(1);    opacity: 1;    }
}
.kp-loading-dot {
  display: inline-block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-500);
  animation: kpLoadingPulse 1.2s ease-in-out infinite both;
}

/* ── Universal state entrance fade — shared by LoadingState, ErrorState, PlaceholderState. */
@keyframes kpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Reduced motion — disable interactive + ambient animations. */
@media (prefers-reduced-motion: reduce) {
  .kp-tilt-card, .kp-foil { transition: none !important; }
  @keyframes kpUnlockBurst   { 0%,100% { transform: none; opacity: 1; } }
  @keyframes kpFoilSweep     { 0%,100% { background-position: 50% 50%; } }
  @keyframes kpPulseRing     { 0%,100% { transform: scale(1); opacity: 0.5; } }
  @keyframes kpConfetti      { 0%,100% { transform: none; opacity: 0; } }
  @keyframes kpLoadingPulse  { 0%,100% { transform: scale(0.8); opacity: 0.6; } }
  @keyframes kpDialogScrim   { 0%,100% { opacity: 1; } }
  @keyframes kpDialogIn      { 0%,100% { opacity: 1; transform: none; } }
  @keyframes kpFadeIn        { 0%,100% { opacity: 1; } }
}