/* ==========================================================================
   IDMR · spin360 — single-project 360° turntable viewer
   Self-contained. Namespaced .spin360-*. Uses CSS var fallbacks so it works
   on any project page regardless of which tokens its stylesheet defines.
   Pairs with /assets/fx/spin360.js
   ========================================================================== */

.spin360-section{
  padding:96px 24px;
  position:relative;
  overflow:hidden;
}
.spin360-head{
  max-width:1400px;margin:0 auto 40px;
  display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:24px;
}
.spin360-head-left{max-width:640px}
.spin360-eyebrow{
  font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:11px;color:var(--accent,#d70814);
  letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:16px;display:flex;align-items:center;gap:12px;
}
.spin360-eyebrow::before{content:"";width:32px;height:1px;background:var(--accent,#d70814)}
.spin360-h2{
  font-family:var(--display,'Manrope',sans-serif);font-weight:700;
  font-size:clamp(28px,4vw,44px);line-height:1.05;margin:0 0 14px;
  color:var(--ink,#f4f1ea);
}
.spin360-h2 em{font-style:italic;color:var(--accent,#d70814)}
.spin360-lead{color:var(--ink-dim,#9a968d);font-size:15px;line-height:1.6;max-width:52ch;margin:0}
.spin360-status{
  font-family:var(--mono,monospace);font-size:11px;color:var(--ink-dim,#9a968d);
  letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:12px;align-self:end;
}
.spin360-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent,#d70814);
  box-shadow:0 0 0 4px rgba(215,8,20,.18);animation:spin360pulse 2s infinite;
}
@keyframes spin360pulse{0%,100%{box-shadow:0 0 0 4px rgba(215,8,20,.18)}50%{box-shadow:0 0 0 7px rgba(215,8,20,.04)}}

.spin360-wrap{
  max-width:1400px;margin:0 auto;position:relative;
  background:radial-gradient(ellipse 60% 80% at 50% 60%, #1a1a1d 0%, #0a0a0b 70%);
  border:1px solid var(--line,#26262b);border-radius:4px;
  aspect-ratio:16/9;overflow:hidden;cursor:grab;user-select:none;touch-action:none;
}
.spin360-wrap.grabbing{cursor:grabbing}
.spin360-frame{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:none;pointer-events:none;
}
.spin360-frame.active{display:block}

/* Corner brackets */
.spin360-corner{position:absolute;width:22px;height:22px;border:1.5px solid var(--accent,#d70814);pointer-events:none;z-index:5}
.spin360-corner.tl{top:16px;left:16px;border-right:none;border-bottom:none}
.spin360-corner.tr{top:16px;right:16px;border-left:none;border-bottom:none}
.spin360-corner.bl{bottom:16px;left:16px;border-right:none;border-top:none}
.spin360-corner.br{bottom:16px;right:16px;border-left:none;border-top:none}

/* HUD */
.spin360-hud{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:space-between;
  padding:36px;pointer-events:none;
  font-family:var(--mono,monospace);font-size:10px;color:var(--ink-dim,#9a968d);
  letter-spacing:.14em;text-transform:uppercase;
}
.spin360-hud-top,.spin360-hud-bot{display:flex;justify-content:space-between;align-items:center}
.spin360-hud-bot{align-items:end}
.spin360-model{font-family:var(--display,'Manrope',sans-serif);font-size:14px;font-weight:600;color:var(--ink,#f4f1ea);letter-spacing:.2em}
.spin360-deg{font-family:'Rajdhani',var(--mono,monospace);font-weight:600;color:var(--accent,#d70814);font-size:14px;letter-spacing:.1em}
.spin360-hint{
  display:flex;align-items:center;gap:10px;
  background:rgba(10,10,11,.6);backdrop-filter:blur(8px);
  padding:10px 16px;border-radius:999px;border:1px solid var(--line,#26262b);transition:opacity .5s;
}
.spin360-wrap.touched .spin360-hint{opacity:0}
.spin360-hint svg{width:14px;height:14px}

/* Loader */
.spin360-loader{
  position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;background:#0a0a0b;
}
.spin360-loader.hidden{display:none}
.spin360-loader-bar{width:240px;height:2px;background:var(--line,#26262b);overflow:hidden;position:relative}
.spin360-loader-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--accent,#d70814);transition:width .2s ease}
.spin360-loader-text{font-family:var(--mono,monospace);font-size:11px;color:var(--ink-dim,#9a968d);letter-spacing:.18em;text-transform:uppercase}
.spin360-loader-text span{color:var(--accent,#d70814)}

/* Rotation bar */
.spin360-rot{position:absolute;left:36px;right:36px;bottom:36px;height:2px;background:var(--line,#26262b);z-index:4;pointer-events:none}
.spin360-rot-fill{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--accent,#d70814);transition:width .1s linear}

@media(max-width:820px){
  .spin360-section{padding:64px 16px}
  .spin360-head{margin-bottom:28px}
  .spin360-corner{width:14px;height:14px}
  .spin360-corner.tl{top:10px;left:10px}
  .spin360-corner.tr{top:10px;right:10px}
  .spin360-corner.bl{bottom:10px;left:10px}
  .spin360-corner.br{bottom:10px;right:10px}
  .spin360-hud{padding:20px}
  .spin360-rot{left:20px;right:20px;bottom:20px}
}
@media(prefers-reduced-motion:reduce){.spin360-dot{animation:none}}