/* =========================================================
   POLISH — 3D stages, scroll progress, focus, skip link,
   magnetic buttons
   ========================================================= */

/* ---------- 3D stages ---------- */
.j3d { position: absolute; inset: 0; }
.j3d__canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; outline: none; }
.j3d.is-dragging .j3d__canvas { cursor: grabbing; }
.j3d { animation: j3dIn 1s var(--ease) both; }
@keyframes j3dIn { from { opacity: 0; } }

/* quick view viewer (3D loads only when "View in 3D" is tapped) */
.modal__art.is-3d > svg, .modal__art.is-3d > img { opacity: 0; transition: opacity 0.4s; }
.j3d__hint {
  position: absolute; bottom: 16px; left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(18, 15, 11, 0.8); border: 1px solid var(--line);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lt);
  pointer-events: none; white-space: nowrap;
  transition: opacity 0.6s;
  z-index: 3;
}
:lang(ar) .j3d__hint { letter-spacing: 0; font-size: 0.82rem; }
.j3d__hint::before { content: "⟲"; font-size: 1rem; letter-spacing: 0; }
.j3d.is-touched > .j3d__hint { opacity: 0; }
.modal__3d {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 3;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(18, 15, 11, 0.65); border: 1px solid var(--gold);
  color: var(--gold-lt); font-size: 0.8rem; letter-spacing: 0.08em;
  transition: background 0.3s, color 0.3s;
}
.modal__3d:hover { background: var(--gold); color: var(--ink); }
.modal__3d-off, .modal__3d.is-on .modal__3d-on { display: none; }
.modal__3d.is-on .modal__3d-off { display: inline; }
.modal__3d[hidden] { display: none; }
.modal__3d.is-loading { opacity: 0.6; pointer-events: none; }
.modal__3d.is-loading .modal__3d-on::after { content: "…"; }
@media (max-width: 820px) { .modal__art { min-height: 320px; } }

/* ---------- scroll progress ---------- */
.progress {
  position: absolute; inset-inline: 0; bottom: -1px; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--gold-dk), var(--gold-lt), var(--gold));
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
[dir="rtl"] .progress { transform-origin: right; }

/* ---------- keyboard focus + skip link ---------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .chip:focus-visible, .pill:focus-visible { border-radius: 999px; }
.skip-link {
  position: fixed; top: 10px; inset-inline-start: 10px; z-index: 1001;
  padding: 10px 18px; border-radius: 999px;
  background: var(--gold); color: var(--ink); font-weight: 500;
  transform: translateY(-150%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- hero glitter (lightweight: opacity + transform only) ---------- */
.hero__glitter { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hero__glitter span {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(16px * var(--s)); height: calc(16px * var(--s));
  margin: calc(-8px * var(--s));
  background: radial-gradient(circle, #fff7e0 0 7%, rgba(240, 210, 140, 0.8) 16%, rgba(236, 205, 140, 0.25) 34%, rgba(236, 205, 140, 0) 62%);
  border-radius: 50%;
  opacity: 0;
  animation: glint var(--d) ease-in-out var(--delay) infinite;
  will-change: opacity, transform;
}
/* a few become four-point sparkles */
.hero__glitter span.is-star { width: calc(30px * var(--s)); height: calc(30px * var(--s)); margin: calc(-15px * var(--s)); border-radius: 0; }
.hero__glitter span.is-star {
  background:
    radial-gradient(circle, #fffaf0 0 5%, rgba(240, 210, 140, 0.7) 12%, rgba(236, 205, 140, 0) 34%),
    linear-gradient(90deg, transparent 0 20%, rgba(255, 246, 220, 0.9) 50%, transparent 80% 100%) center / 100% 1.5px no-repeat,
    linear-gradient(0deg, transparent 0 20%, rgba(255, 246, 220, 0.9) 50%, transparent 80% 100%) center / 1.5px 100% no-repeat;
}
@keyframes glint {
  0%, 100% { opacity: 0; transform: translateY(6px) scale(0.3) rotate(0deg); }
  45% { opacity: 1; transform: translateY(-6px) scale(1) rotate(25deg); }
  65% { opacity: 0.7; }
}
.hero__glitter.is-paused span, html.is-intro .hero__glitter span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero__glitter span { animation: none; opacity: 0.6; transform: none; } }