/* =========================================================
   3D Viewer — Clean stylesheet (replace file contents)
   ========================================================= */

/* ---------- Viewer container (in-section) ---------- */
.three-wrap {
  position: relative;
  width: 100%;
}

.three-container {
  position: relative;
  width: 100%;
  height: 70vh;              /* adjust to taste */
  border-radius: 16px;
  overflow: hidden;
}

/* Loading overlay */
.three-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.three-bar {
  width: 0%; height: 4px; border-radius: 999px;
  background: #fff; opacity: .8; transition: width .2s ease;
}
#three-label {
  margin-top: 10px; color: #ddd;
  font: 500 12px/1.2 system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ---------- Model grid + neon hover ---------- */
.model-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.model-card{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #0a0f18;
  border: 1px solid rgba(120,200,255,.14);
  box-shadow: 0 8px 22px rgba(0,0,0,.55);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease;
}
.model-thumb{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:#000; }
.model-meta{ padding:.65rem .75rem; color:#cfeaff; font-weight:600; font-size:.98rem; text-shadow:0 0 6px rgba(0,200,255,.25); }

/* Halo (revealed on hover/focus) */
.model-card::after{
  content:"";
  position:absolute; inset:-14px; border-radius:inherit;
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(0,255,255,.42), transparent 60%),
    radial-gradient(80% 120% at 50% 120%, rgba(0,180,255,.32), transparent 60%);
  filter: blur(16px);
  opacity: 0; transition: opacity .25s ease, filter .25s ease;
}
.model-card:hover,
.model-card:focus-visible{
  transform: translateY(-6px);
  filter: saturate(1.05);
  border-color: rgba(0,240,255,.45);
  box-shadow:
    0 0 0 1px rgba(0,255,255,.10) inset,
    0 0 18px rgba(0,240,255,.35),
    0 0 44px rgba(0,180,255,.28),
    0 0 84px rgba(0,120,255,.22);
  animation: cardBreath 2.6s ease-in-out infinite;
}
.model-card:hover::after,
.model-card:focus-visible::after{ opacity:.95; filter: blur(18px); }
@keyframes cardBreath{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(0,255,255,.10) inset,
      0 0 18px rgba(0,240,255,.35),
      0 0 44px rgba(0,180,255,.28),
      0 0 84px rgba(0,120,255,.22);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(0,255,255,.16) inset,
      0 0 28px rgba(0,255,255,.55),
      0 0 64px rgba(0,200,255,.45),
      0 0 110px rgba(0,160,255,.36);
  }
}

/* ---------- Modal (centered, viewport-safe, backdrop-click closes) ---------- */
:root { --modal-top: clamp(48px, 9vh, 140px); }

.model-modal{
  position: fixed; inset: 0; z-index: 5000;
  display: flex; justify-content: center; align-items: flex-start;
  /* top offset for comfort + safe-area support */
  padding-top: max(env(safe-area-inset-top, 0px), var(--modal-top));
}
.model-modal[aria-hidden="true"]{ display: none; }

/* Backdrop is the clickable element with [data-close-modal] (do not style parent) */
.model-modal__backdrop{
  position: fixed; inset: 0; z-index: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}

/* Dialog (outer box): solid interior, animated outer glow, no scrollbars */
.model-modal__dialog {
  position: relative; z-index: 1; margin: 0 auto;
  width: min(1100px, 96vw);
  max-height: min(90dvh, 90vh);    /* keep it on-screen */
  overflow: hidden;                 /* ✅ no scrollbars, hides halo bleed */
  border-radius: 18px;
  border: 1px solid rgba(0,240,255,0.3);
  background: #0b121a;      
  display:flex;
  flex-direction:colum;        /* ✅ opaque so no background gradients show */
  box-shadow:
    0 0 18px rgba(0,240,255,0.35),
    0 0 44px rgba(0,180,255,0.28),
    0 0 84px rgba(0,120,255,0.22);
  animation: dialogPulse 3s ease-in-out infinite;
}

/* Outer neon halo (sits behind dialog; won't create scrollbars now) */
.model-modal__dialog::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(0,255,255,.45), transparent 60%),
    radial-gradient(80% 120% at 50% 120%, rgba(0,180,255,.35), transparent 60%);
  filter: blur(18px);
  opacity: .95;
}

/* Title bar stays visible; use same solid background as dialog */
.model-modal__title{
  position: sticky; top: 0; z-index: 1;
  padding: .8rem 1rem;
  font-weight: 700; color: #dff9ff;
  background: #0b121a;             /* ✅ no inherited transparency */
  border-bottom: 1px solid rgba(120,200,255,.18);
}

/* Viewer space fills the rest */
#modal-three-container.three-container{
  height: clamp(360px, 58dvh, 720px);
  min-height: 320px;
  flex: 1 1 auto;
}
#three-canvas{ width: 100%; height: 100%; display: block; background: transparent; }

@keyframes modalFadeIn{ from{opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);} }

/* ---------- Red neon close button ---------- */
.model-modal__close{
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-sizing: border-box; padding: 0;
  line-height: 1; text-align: center; cursor: pointer;

  font-size: 1.6rem; font-weight: 900; color: #fff;

  background: radial-gradient(circle at 50% 30%, rgba(255,70,70,.6), rgba(160,0,0,.35));
  border: 1px solid rgba(255,120,120,.5);
  box-shadow:
    0 0 10px rgba(255,70,70,.7),
    0 0 28px rgba(200,40,40,.5),
    inset 0 0 8px rgba(255,255,255,.15);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: closePulse 2.5s ease-in-out infinite;
}
.model-modal__close:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 0 16px rgba(255,90,90,.9),
    0 0 40px rgba(255,60,60,.7),
    inset 0 0 10px rgba(255,255,255,.2);
}
.model-modal__close:active{ transform: scale(.95); }
/* Animations (unique names to avoid collisions) */
@keyframes dialogPulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(0,240,255,0.35),
      0 0 44px rgba(0,180,255,0.28),
      0 0 84px rgba(0,120,255,0.22);
  }
  50% {
    box-shadow:
      0 0 26px rgba(0,255,255,0.55),
      0 0 60px rgba(0,200,255,0.45),
      0 0 110px rgba(0,160,255,0.35);
  }
}
@keyframes closePulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.4) saturate(1.3); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .model-modal__dialog,
  .model-modal__close { animation: none; }
}