/* tool/viewer/nftViewer.css — 3D NFT card viewer styles
 * Prefix: nv- (nft-viewer) to avoid collisions when embedded.
 * Mirrors the tool's card stack: artwork → foil → shine on front, back image on back.
 */

.nv-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: .6rem;
}

.nv-scene {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 560px;
  perspective: 900px;
  overflow: visible;
  cursor: pointer;
}

.nv-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.nv-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.45, 0, 0.55, 1),
              box-shadow 0.5s ease;
}
.nv-card.flipped { transform: rotateY(180deg); }

/* ── Faces ── */
.nv-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 2px;
}
.nv-front { background: var(--paper, #faf6ef); }
.nv-back  { transform: rotateY(180deg); background: #1a1714; }

/* Artwork image (z-index 1) */
.nv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}

/* Foil canvas — sits above artwork, screen blend (z-index 3) */
.nv-refraction {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.nv-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
}

.nv-foil--evolution { z-index: 3; }
.nv-foil--mutation  { z-index: 4; }

/* Shine layer — above foil (z-index 4) */
.nv-shine {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: inherit;
  mix-blend-mode: screen;
}

/* Particle canvas — extends beyond card edges, inside tilt-wrap */
.nv-particles {
  position: absolute;
  top: -32px;
  left: -32px;
  width: calc(100% + 64px);
  height: calc(100% + 64px);
  pointer-events: none;
  z-index: 0;
}

/* ── Flip hint ── */
.nv-flip-hint {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: .78rem;
  color: var(--ink-mid, #8a8278);
  text-align: center;
  margin: 0;
  opacity: .7;
}

/* ── Glow pulses (mirrors tool.css card glow) ── */
/* Color comes from --glow-color / --glow-color-dim set by applyGlowCSSVars(). */
.nv-card[data-glow="0"] { box-shadow: none; animation: none; }
.nv-card[data-glow="1"] { animation: nvGlowPulse 7.0s ease-in-out infinite; }
.nv-card[data-glow="2"] { animation: nvGlowPulse 8.0s ease-in-out infinite; }
.nv-card[data-glow="3"] { animation: nvGlowPulse 6.0s ease-in-out infinite; }
.nv-card[data-glow="4"] { animation: nvGlowPulse 5.5s ease-in-out infinite; }

@keyframes nvGlowPulse {
  0%, 100% { box-shadow: 0 0 14px 2px var(--glow-color), 0 0 38px 6px var(--glow-color-dim); }
  50%      { box-shadow: 0 0 24px 5px var(--glow-color), 0 0 56px 10px var(--glow-color-dim); }
}

@keyframes rainbowGlow {
  0%     { box-shadow: 0 0 16px 3px hsla(0,88%,65%,0.58),   0 0 42px 7px hsla(0,88%,65%,0.22); }
  12.5%  { box-shadow: 0 0 22px 5px hsla(45,90%,68%,0.65),  0 0 52px 9px hsla(45,90%,68%,0.26); }
  25%    { box-shadow: 0 0 16px 3px hsla(120,78%,58%,0.58), 0 0 42px 7px hsla(120,78%,58%,0.22); }
  37.5%  { box-shadow: 0 0 22px 5px hsla(180,82%,62%,0.65), 0 0 52px 9px hsla(180,82%,62%,0.26); }
  50%    { box-shadow: 0 0 16px 3px hsla(240,80%,70%,0.58), 0 0 42px 7px hsla(240,80%,70%,0.22); }
  62.5%  { box-shadow: 0 0 22px 5px hsla(280,80%,68%,0.65), 0 0 52px 9px hsla(280,80%,68%,0.26); }
  75%    { box-shadow: 0 0 16px 3px hsla(320,85%,65%,0.58), 0 0 42px 7px hsla(320,85%,65%,0.22); }
  87.5%  { box-shadow: 0 0 22px 5px hsla(355,88%,65%,0.65), 0 0 52px 9px hsla(355,88%,65%,0.26); }
  100%   { box-shadow: 0 0 16px 3px hsla(0,88%,65%,0.58),   0 0 42px 7px hsla(0,88%,65%,0.22); }
}

@keyframes darkLightGlow {
  0%   { box-shadow: 0 0 14px 2px hsla(270,55%,40%,0.45), 0 0 38px 6px hsla(270,55%,40%,0.18); }
  25%  { box-shadow: 0 0 24px 5px hsla(270,55%,40%,0.65), 0 0 56px 10px hsla(270,55%,40%,0.26); }
  50%  { box-shadow: 0 0 14px 2px hsla(48,85%,82%,0.45),  0 0 38px 6px hsla(48,85%,82%,0.18); }
  75%  { box-shadow: 0 0 24px 5px hsla(48,85%,82%,0.65),  0 0 56px 10px hsla(48,85%,82%,0.26); }
  100% { box-shadow: 0 0 14px 2px hsla(270,55%,40%,0.45), 0 0 38px 6px hsla(270,55%,40%,0.18); }
}

@keyframes forbiddenGlow {
  0%     { box-shadow: 0 0 14px 2px hsla(15,90%,62%,0.45),  0 0 38px 6px hsla(15,90%,62%,0.18); }
  12.5%  { box-shadow: 0 0 24px 5px hsla(15,90%,62%,0.65),  0 0 56px 10px hsla(15,90%,62%,0.26); }
  25%    { box-shadow: 0 0 14px 2px hsla(205,80%,65%,0.45), 0 0 38px 6px hsla(205,80%,65%,0.18); }
  37.5%  { box-shadow: 0 0 24px 5px hsla(205,80%,65%,0.65), 0 0 56px 10px hsla(205,80%,65%,0.26); }
  50%    { box-shadow: 0 0 14px 2px hsla(100,55%,48%,0.45), 0 0 38px 6px hsla(100,55%,48%,0.18); }
  62.5%  { box-shadow: 0 0 24px 5px hsla(100,55%,48%,0.65), 0 0 56px 10px hsla(100,55%,48%,0.26); }
  75%    { box-shadow: 0 0 14px 2px hsla(185,68%,72%,0.45), 0 0 38px 6px hsla(185,68%,72%,0.18); }
  87.5%  { box-shadow: 0 0 24px 5px hsla(185,68%,72%,0.65), 0 0 56px 10px hsla(185,68%,72%,0.26); }
  100%   { box-shadow: 0 0 14px 2px hsla(15,90%,62%,0.45),  0 0 38px 6px hsla(15,90%,62%,0.18); }
}

@keyframes eclypseGlow {
  0%   { box-shadow: 0 0 14px 2px hsla(210,40%,80%,0.45), 0 0 38px 6px hsla(210,40%,80%,0.18); }
  25%  { box-shadow: 0 0 24px 5px hsla(210,40%,80%,0.65), 0 0 56px 10px hsla(210,40%,80%,0.26); }
  50%  { box-shadow: 0 0 14px 2px hsla(35,88%,62%,0.45),  0 0 38px 6px hsla(35,88%,62%,0.18); }
  75%  { box-shadow: 0 0 24px 5px hsla(35,88%,62%,0.65),  0 0 56px 10px hsla(35,88%,62%,0.26); }
  100% { box-shadow: 0 0 14px 2px hsla(210,40%,80%,0.45), 0 0 38px 6px hsla(210,40%,80%,0.18); }
}