/* ===========================================================
   Iridescent card — monochromatic, perspective + holographic
   =========================================================== */
:root{
  --navy:#16273f;
  --navy-deep:#0b1626;
  --navy-edge:#1d3457;
  --gold:#c8a44a;
  --gold-soft:#e7cf8e;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  background:
    radial-gradient(120% 120% at 50% 18%, #112038 0%, #0a1322 55%, #060c16 100%);
  color:#dfe7f2;
  font-family:"Spectral","Iowan Old Style",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

#root{height:100%;}

.scene{
  position:relative;
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:var(--perspective,1500px);
  perspective-origin:50% 40%;
}

/* faint ambient pool of light behind the card following the pointer */
.scene::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(46% 46% at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),
    color-mix(in oklab, var(--glow-color,#8fb8ff) 22%, transparent) 0%, transparent 70%);
  opacity:var(--ambient,0.55);
  filter:blur(8px);
  transition:opacity .4s ease;
  pointer-events:none;
}

/* ---- 3D rig: outer tilts, inner flips ---- */
.tilt{
  position:relative;
  width:340px;
  height:476px;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)
            scale(var(--lift,1));
  will-change:transform;
  cursor:pointer;
}

.flip{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateY(var(--flip,0deg));
  transition:transform var(--flip-speed,900ms) cubic-bezier(.4,.05,.18,1);
}

.face{
  position:absolute;
  inset:0;
  border-radius:20px;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  background:#00081a;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(0,0,0,.6),
    0 40px 70px -28px rgba(0,0,0,.85),
    0 8px 24px -12px rgba(0,0,0,.7);
}
.face.back{transform:rotateY(180deg);}

/* gold double keyline frame */
.frame{
  position:absolute;
  inset:12px;
  border-radius:12px;
  border:1px solid color-mix(in oklab, var(--gold) 70%, transparent);
  box-shadow:0 0 0 5px rgba(0,0,0,0) , 0 0 14px -2px rgba(0,0,0,.5) inset;
  pointer-events:none;
}
.frame::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:9px;
  border:1px solid color-mix(in oklab, var(--gold) 24%, transparent);
}

/* corner indices — makes it read as a playing card */
.corner{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--gold-soft);
  font-family:"Spectral",Georgia,serif;
  letter-spacing:.04em;
  z-index:6;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.corner .rank{font-size:20px;font-weight:600;line-height:1;}
.corner .pip{font-size:13px;line-height:1;opacity:.85;}
.corner.tl{top:26px;left:26px;}
.corner.br{bottom:26px;right:26px;transform:rotate(180deg);}

/* ---- emblem stage: art + masked effect layers ---- */
.emblem{
  position:absolute;
  left:50%;
  top:48%;
  width:300px;
  height:302px;
  transform:translate(-50%,-50%) translateZ(18px);
  --mask:url(assets/card-art-mask.png) center/contain no-repeat;
}
.emblem .art{
  position:absolute;
  inset:0;
  background:url(assets/card-art.png) center/contain no-repeat;
  filter:saturate(1.02) contrast(1.02);
}

/* iridescence — only over bright/metallic areas via luminance mask */
.irid{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    var(--ir-angle,118deg),
    hsl(330 100% 71%) 0%,
    hsl(45 100% 66%) 16%,
    hsl(135 88% 64%) 33%,
    hsl(188 100% 70%) 50%,
    hsl(225 100% 74%) 66%,
    hsl(280 100% 75%) 82%,
    hsl(330 100% 71%) 100%);
  background-size:var(--ir-scale,150%) var(--ir-scale,150%);
  background-position:
    calc(var(--mx,.5) * var(--ir-shift,260px) * -1)
    calc(var(--my,.5) * var(--ir-shift,260px));
  filter:saturate(var(--ir-sat,1.5)) hue-rotate(calc(var(--mx,.5) * var(--ir-hue,80deg)));
  mix-blend-mode:var(--ir-blend,color-dodge);
  opacity:var(--ir-opacity,.55);
  -webkit-mask:var(--mask);mask:var(--mask);
  pointer-events:none;
}

/* specular highlight rolling across the metal (masked) */
.spec-metal{
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),
    rgba(255,255,255,var(--spec-int,.95)) 0%,
    rgba(255,255,255,.25) calc(var(--spec-size,16%) * .55),
    transparent var(--spec-size,16%));
  mix-blend-mode:screen;
  -webkit-mask:var(--mask);mask:var(--mask);
  pointer-events:none;
}

/* synapse canvas sits above art, below noise */
.synapse{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* sparkle glints sit on the bright points */
.sparkle{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:2;
}

/* ---- full-face overlays ---- */
.glow{
  position:absolute;
  inset:0;
  background:radial-gradient(
    40% 40% at calc(var(--mx,.5)*100%) calc(var(--my,.5)*100%),
    color-mix(in oklab, var(--glow-color,#9cc0ff) 60%, transparent) 0%,
    transparent 72%);
  mix-blend-mode:soft-light;
  opacity:var(--glow-int,.7);
  pointer-events:none;
  z-index:7;
}
.glow.back-glow{
  background:radial-gradient(
    40% 40% at calc((1 - var(--mx,.5))*100%) calc(var(--my,.5)*100%),
    color-mix(in oklab, var(--glow-color,#9cc0ff) 60%, transparent) 0%,
    transparent 72%);
}

.sheen{
  position:absolute;
  inset:0;
  background:linear-gradient(
    105deg,
    transparent 38%,
    rgba(255,255,255,.16) calc(var(--mx,.5)*100%),
    transparent 62%);
  mix-blend-mode:screen;
  opacity:var(--sheen-int,.5);
  pointer-events:none;
  z-index:7;
}

.noise{
  position:absolute;
  inset:0;
  background-image:var(--noise-url);
  background-size:var(--noise-scale,170px) var(--noise-scale,170px);
  mix-blend-mode:var(--noise-blend,overlay);
  opacity:var(--noise-int,.5);
  pointer-events:none;
  z-index:8;
}

/* ---------- BACK FACE ---------- */
.back-deco{
  position:absolute;
  inset:0;
  /* guilloché-ish concentric weave in monochrome navy */
  background:
    repeating-radial-gradient(circle at 50% 50%,
      color-mix(in oklab, var(--gold) 14%, transparent) 0 1px,
      transparent 1px 11px),
    repeating-radial-gradient(circle at 50% 50%,
      color-mix(in oklab, var(--navy-edge) 60%, transparent) 0 1px,
      transparent 1px 5px);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 60%, transparent 74%);
          mask:radial-gradient(circle at 50% 50%, #000 60%, transparent 74%);
  opacity:.9;
}
.back-center{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:118px;height:118px;
  display:flex;align-items:center;justify-content:center;
}
.lozenge{
  position:absolute;
  width:78px;height:78px;
  transform:rotate(45deg);
  border:1px solid color-mix(in oklab, var(--gold) 75%, transparent);
  background:linear-gradient(135deg, var(--navy-edge), var(--navy-deep));
  box-shadow:0 0 22px -6px rgba(0,0,0,.7) inset;
}
.lozenge.holo{
  background:repeating-linear-gradient(118deg,
    hsl(330 100% 71%),hsl(45 100% 66%),hsl(188 100% 70%),
    hsl(265 100% 75%),hsl(330 100% 71%));
  background-size:200% 200%;
  background-position:calc(var(--mx,.5)*-200px) calc(var(--my,.5)*200px);
  filter:hue-rotate(calc(var(--mx,.5)*70deg));
  mix-blend-mode:color-dodge;
  opacity:var(--ir-opacity,.55);
  border:none;
}
.back-mark{
  position:relative;
  z-index:2;
  font-size:26px;
  color:var(--gold-soft);
  letter-spacing:.06em;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.back-arc{
  position:absolute;
  inset:30px;
  border-radius:50%;
  border:1px solid color-mix(in oklab, var(--gold) 40%, transparent);
}
.back-arc.inner{inset:54px;border-color:color-mix(in oklab, var(--gold) 18%, transparent);}

/* back-face motto + CTA */
.back-motto{
  position:absolute;
  top:74px;
  left:0;right:0;
  text-align:center;
  font-family:"Spectral","Iowan Old Style",Georgia,serif;
  font-size:11px;
  letter-spacing:.42em;
  color:color-mix(in oklab, var(--gold-soft) 80%, transparent);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  z-index:6;
  pointer-events:none;
}
.back-cta{
  position:absolute;
  bottom:64px;
  left:50%;
  transform:translateX(-50%) translateZ(28px);
  z-index:9;
  font-family:"Spectral","Iowan Old Style",Georgia,serif;
  font-size:12px;
  letter-spacing:.32em;
  color:var(--gold-soft);
  text-decoration:none;
  padding:9px 18px;
  border:1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  border-radius:2px;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--navy-edge) 70%, transparent),
    color-mix(in oklab, var(--navy-deep) 70%, transparent));
  box-shadow:0 0 18px -6px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, transform .25s ease, box-shadow .25s ease;
}
.back-cta:hover{
  color:#fff;
  border-color:var(--gold);
  transform:translateX(-50%) translateZ(36px) scale(1.03);
  box-shadow:0 0 22px -2px color-mix(in oklab, var(--gold) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,.1);
}

/* hint text */
.hint{
  position:absolute;
  bottom:26px;
  left:0;right:0;
  text-align:center;
  font-family:"Spectral",Georgia,serif;
  font-size:12.5px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(190,205,228,.42);
  pointer-events:none;
  transition:opacity .4s ease;
}