/* ============================================================================
 * HoloForge — WebGL gyroscope holo card viewer  (styles)
 * cardscloud.io · slug: holoforge-webgl-gyroscope-holo-card-view
 * Uses the site Apple Liquid-Glass tokens (--cc-glass, --cc-ease-glass, etc).
 * ========================================================================== */

/* The shell becomes a glass pedestal that holds the live canvas. */
.cc-card-image-shell.holoforge-host {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 245 / 342;
  border-radius: 18px;
  overflow: visible;
  isolation: isolate;
  --hf-shadow-x: 0px;
  --hf-shadow-y: 10px;
}

/* contact shadow that shifts as the card tilts */
.cc-card-image-shell.holoforge-host::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%;
  bottom: -22px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.42), transparent 72%);
  filter: blur(9px);
  transform: translate(var(--hf-shadow-x), 0) scaleY(.8);
  transition: transform .12s var(--cc-ease-glass, cubic-bezier(.32,.72,0,1));
  z-index: 0;
  pointer-events: none;
}

.holoforge-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  position: relative;
  z-index: 1;
  cursor: grab;
  /* specular rim — reads like a glossy plastic sleeve */
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 24px 60px -28px rgba(0,0,0,.65),
    0 8px 24px -16px rgba(0,0,0,.45);
  transition: box-shadow .3s var(--cc-ease-glass, cubic-bezier(.32,.72,0,1));
  touch-action: none;
}
.holoforge-canvas:active { cursor: grabbing; }

.holoforge-host.holoforge-ready .holoforge-canvas {
  animation: holoforge-rise .7s var(--cc-ease-glass, cubic-bezier(.32,.72,0,1)) both;
}
@keyframes holoforge-rise {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* keep the static <img> in DOM (fallback) but hidden while the canvas runs */
.holoforge-hidden-img { display: none !important; }

/* ---- control bar -------------------------------------------------------- */
.holoforge-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 26px auto 4px;
  padding: 8px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--cc-glass, rgba(255,255,255,.72));
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--cc-glass-line, rgba(0,0,0,.08));
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
}

.holoforge-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
  color: var(--cc-ink, #1d1d1f);
  background: color-mix(in oklab, var(--cc-surface-2, #f5f5f7) 80%, transparent);
  text-transform: capitalize;
}
.holoforge-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, #66d6ff, #b07bff);
  box-shadow: 0 0 8px rgba(120,180,255,.9);
}
.holoforge-badge--tier0 .holoforge-dot { background: linear-gradient(135deg,#c9c9d2,#9aa0ad); box-shadow:none; }
.holoforge-badge--tier1 .holoforge-dot { background: linear-gradient(135deg,#5ec8ff,#ffb14e); }
.holoforge-badge--tier2 .holoforge-dot { background: linear-gradient(135deg,#36d0ff,#d36bff); }
.holoforge-badge--tier3 .holoforge-dot {
  background: conic-gradient(from 0deg,#6effa8,#5ec8ff,#d36bff,#ff6ad5,#6effa8);
  box-shadow: 0 0 10px rgba(180,140,255,.95);
  animation: holoforge-spin 4s linear infinite;
}
@keyframes holoforge-spin { to { transform: rotate(360deg); } }

.holoforge-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--cc-glass-line, rgba(0,0,0,.10));
  background: color-mix(in oklab, var(--cc-surface, #fff) 70%, transparent);
  color: var(--cc-ink, #1d1d1f);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s var(--cc-ease-glass, cubic-bezier(.32,.72,0,1)),
              background .25s ease, box-shadow .25s ease, color .2s ease;
}
.holoforge-pill svg { opacity: .85; }
.holoforge-pill:hover {
  transform: translateY(-1px);
  background: var(--cc-surface, #fff);
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.5);
}
.holoforge-pill:active { transform: translateY(0) scale(.97); }
.holoforge-pill:focus-visible { outline: 2px solid var(--cc-accent, #0071e3); outline-offset: 2px; }
.holoforge-pill.is-on {
  background: var(--cc-accent, #0071e3);
  color: #fff; border-color: transparent;
}
.holoforge-pill.is-recording {
  background: var(--cc-danger, #d70015); color: #fff; border-color: transparent;
}
.holoforge-pill.is-recording::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; animation: holoforge-pulse 1s ease-in-out infinite;
}
@keyframes holoforge-pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

.holoforge-bar--degraded .holoforge-pill[data-hf="capture"],
.holoforge-bar--degraded .holoforge-pill[data-hf="clip"] {
  opacity: .4; pointer-events: none;
}

/* ---- shutter flash (capture feedback) ---------------------------------- */
.holoforge-shutter {
  position: absolute; inset: 0;
  border-radius: 16px;
  background: #fff;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}
.holoforge-shutter.go { animation: holoforge-flash .4s ease-out; }
@keyframes holoforge-flash {
  0% { opacity: 0; }
  12% { opacity: .85; }
  100% { opacity: 0; }
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 600px) {
  .cc-card-image-shell.holoforge-host { max-width: 300px; }
  .holoforge-bar { gap: 6px; padding: 6px; }
  .holoforge-pill { padding: 6px 11px; font-size: 12px; }
}

/* ---- reduced motion: freeze the shader animation, keep tilt response ---- */
@media (prefers-reduced-motion: reduce) {
  .holoforge-host.holoforge-ready .holoforge-canvas { animation: none; }
  .holoforge-badge--tier3 .holoforge-dot { animation: none; }
  .holoforge-shutter.go { animation: none; opacity: 0; }
}