/**
 * MIDAS — interactive 3D coin
 * ---------------------------------------------------------------------------
 * Scoped entirely to #midas-coin and .midas-coin-* classes.
 * Public surface: window.initCoin(root?) from coin.js. The coin idles, can be
 * dragged with pointer events, and tilts toward the cursor.
 *
 * prefers-reduced-motion: the float, shadow and glow animations stop, and
 * coin.js stops the idle spin / pointer animation, leaving a static 3/4 coin.
 * ---------------------------------------------------------------------------
 */

#midas-coin {
  --midas-gold: #d4af37;
  --midas-gold-hi: #f6e27a;
  --midas-gold-lo: #8a6a1f;
  --midas-ivory: #f2e8d5;
  --midas-ink: #080705;
  --midas-serif: "Instrument Serif", "Bodoni MT", Didot, Georgia, "Times New Roman", serif;
  --midas-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --midas-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;

  position: relative;
  display: block;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.midas-coin-scene {
  --midas-d: 380px;
  --midas-d: min(84vw, 470px);
  --midas-d: clamp(220px, 82cqw, 470px);
  --midas-t: calc(var(--midas-d) * 0.14);
  --midas-reed-w: calc(var(--midas-d) * 0.0347);

  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
  perspective: 300cqw;
  perspective-origin: 50% 44%;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
}

/* Warm halo behind the coin, then its contact shadow/glow on the stage. */
.midas-coin-aura {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 47%;
  width: 104%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(212, 175, 55, 0.17) 0%,
      rgba(212, 175, 55, 0.08) 28%,
      rgba(212, 175, 55, 0.03) 48%,
      rgba(212, 175, 55, 0) 70%);
}

.midas-coin-ground {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.midas-coin-ground--glow {
  z-index: 1;
  bottom: 2%;
  width: 76%;
  height: 19%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at center,
      rgba(246, 226, 122, 0.42) 0%,
      rgba(212, 175, 55, 0.17) 36%,
      rgba(212, 175, 55, 0.04) 58%,
      rgba(212, 175, 55, 0) 74%);
  filter: blur(9px);
  opacity: 0.86;
  animation: midas-coin-glow 7.4s ease-in-out infinite;
}

.midas-coin-ground--shadow {
  z-index: 2;
  bottom: 4%;
  width: 58%;
  height: 11%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at center,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.48) 40%,
      rgba(0, 0, 0, 0.14) 64%,
      rgba(0, 0, 0, 0) 76%);
  filter: blur(7px);
  opacity: 0.86;
  animation: midas-coin-shadow 7.4s ease-in-out infinite;
}

.midas-coin-float {
  position: relative;
  z-index: 3;
  width: var(--midas-d);
  height: var(--midas-d);
  transform-style: preserve-3d;
  animation: midas-coin-float 7.4s ease-in-out infinite;
}

.midas-coin-tilt {
  position: absolute;
  inset: 0;
  transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  will-change: transform;
}

.midas-coin-stage {
  position: absolute;
  inset: 0;
  transform: rotateX(-3.5deg) rotateY(30deg);
  transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
  /* Let vertical swipes scroll the page; only mouse drags spin the coin. */
  touch-action: pan-y;
}

.midas-coin-scene.is-dragging .midas-coin-stage {
  cursor: grabbing;
}

/* ---------------------------------------------------------------------------
   Edge — 96 vertical facets around the coin's Z axis. Each facet carries its
   own reeded stripe pattern and baked rim light; the whole cylinder is turned
   by the parent stage. This gives a real, visible thickness at 3/4 angles.
   --------------------------------------------------------------------------- */

.midas-coin-edge {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.midas-coin-reed {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--midas-reed-w);
  height: var(--midas-t);
  margin-left: calc(var(--midas-reed-w) * -0.5);
  margin-top: calc(var(--midas-t) * -0.5);
  transform-origin: 50% 50%;
  transform:
    rotateZ(var(--midas-reed-a, 0deg))
    translateY(calc(var(--midas-d) * -0.498))
    rotateX(90deg);
  background-image:
    linear-gradient(180deg,
      rgba(255, 243, 176, var(--midas-spec, 0.03)),
      rgba(255, 243, 176, var(--midas-spec, 0.03))),
    linear-gradient(180deg,
      rgba(26, 17, 4, var(--midas-shade, 0.18)),
      rgba(26, 17, 4, var(--midas-shade, 0.18))),
    repeating-linear-gradient(90deg,
      rgba(255, 248, 208, 0.32) 0%,
      rgba(255, 248, 208, 0.10) 2%,
      rgba(255, 248, 208, 0) 7%,
      rgba(52, 35, 7, 0.34) 9%,
      rgba(52, 35, 7, 0.05) 13%,
      rgba(52, 35, 7, 0) 19%,
      rgba(255, 248, 208, 0.20) 21%,
      rgba(255, 248, 208, 0.04) 24%,
      rgba(255, 248, 208, 0) 29%,
      rgba(44, 30, 6, 0.30) 31%,
      rgba(44, 30, 6, 0.04) 35%,
      rgba(44, 30, 6, 0) 41%,
      rgba(255, 248, 208, 0.24) 43%,
      rgba(255, 248, 208, 0.02) 48%,
      rgba(40, 27, 5, 0.28) 49%,
      rgba(40, 27, 5, 0.02) 50%),
    linear-gradient(180deg,
      #3a2908 0%,
      #6b4d12 3%,
      #a37d25 10%,
      #d4af37 24%,
      #b8912d 38%,
      #e0bc4d 56%,
      #f6e27a 74%,
      #fff3b0 90%,
      #fff8d2 100%);
}

/* ---------------------------------------------------------------------------
   Faces
   --------------------------------------------------------------------------- */

.midas-coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    radial-gradient(circle at 34% 25%,
      #f6df86 0%,
      #eaca62 20%,
      #d4af37 52%,
      #ae8528 78%,
      #85641c 100%);
  box-shadow:
    0 0 0 0.5px rgba(54, 37, 9, 0.65),
    inset 0 0 0 1px rgba(255, 243, 176, 0.18);
  transform-style: flat;
}

.midas-coin-face--front {
  transform: translateZ(calc(var(--midas-t) * 0.5));
}

.midas-coin-face--back {
  transform: rotateY(180deg) translateZ(calc(var(--midas-t) * 0.5));
}

.midas-coin-svg {
  display: block;
  width: 100%;
  height: 100%;
  text-rendering: geometricPrecision;
}

.midas-coin-serif {
  font-family: var(--midas-serif);
  font-weight: 400;
}

.midas-coin-mono {
  font-family: var(--midas-mono);
  font-variant-numeric: tabular-nums;
}

.midas-coin-monogram {
  font-kerning: normal;
}

/* A fine diagonal grain and a dished-in rim. */
.midas-coin-face::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%,
      rgba(255, 243, 176, 0) 47%,
      rgba(70, 48, 10, 0.045) 62%,
      rgba(44, 30, 6, 0.20) 82%,
      rgba(24, 16, 4, 0.50) 99%),
    repeating-linear-gradient(48deg,
      rgba(255, 255, 255, 0.045) 0 1px,
      rgba(0, 0, 0, 0) 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.9;
}

/* Specular bloom, kept up and left to match the edge light. */
.midas-coin-gloss {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 48% at 28% 16%,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 248, 214, 0.10) 28%,
      rgba(255, 248, 214, 0) 60%),
    linear-gradient(116deg,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0.10) 36%,
      rgba(255, 255, 255, 0.02) 44%,
      rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 74% 82%,
      rgba(255, 226, 130, 0.10) 0%,
      rgba(255, 226, 130, 0) 42%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------------- */

@keyframes midas-coin-float {
  0%, 100% {
    transform: translate3d(0, calc(var(--midas-d) * 0.012), 0);
  }
  50% {
    transform: translate3d(0, calc(var(--midas-d) * -0.02), 0);
  }
}

@keyframes midas-coin-shadow {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.86;
  }
  50% {
    transform: translateX(-50%) scale(0.93);
    opacity: 0.66;
  }
}

@keyframes midas-coin-glow {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.86;
  }
  50% {
    transform: translateX(-50%) scale(0.94);
    opacity: 0.64;
  }
}

/* ---------------------------------------------------------------------------
   Reduced motion: static 3/4 view, no idle spin, no float, no pulse.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .midas-coin-float,
  .midas-coin-ground--glow,
  .midas-coin-ground--shadow {
    animation: none;
  }

  .midas-coin-float {
    transform: none;
  }

  .midas-coin-ground--glow,
  .midas-coin-ground--shadow {
    transform: translateX(-50%);
    opacity: 0.8;
  }

  .midas-coin-tilt,
  .midas-coin-stage {
    will-change: auto;
  }

  .midas-coin-stage,
  .midas-coin-scene.is-dragging .midas-coin-stage {
    cursor: default;
  }
}