/* =========================================================
   SIP Digital — work showcase 3D devices
   Styles for <div class="reel3d" id="work-3d">, drawn by assets/js/work3d.js.
   The stage stays [hidden] until the scene is ready; until then (or forever,
   if WebGL is unavailable) the flat .reel__screen / .reel__phone show instead.
   Everything added here is prefixed reel3d.
   ========================================================= */

/* Reserves exactly the box the flat screenshot frame used. */
.reel3d {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  background:
    radial-gradient(78% 70% at 50% 46%, var(--ink-3) 0%, var(--ink-2) 52%, var(--ink) 100%);
  cursor: grab;
  touch-action: pan-y;               /* vertical swipes still scroll the page */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@supports not (aspect-ratio: 1 / 1) {
  .reel3d::before { content: ""; display: block; padding-top: 62.5%; }
}
.reel3d.reel3d--grabbing { cursor: grabbing; }

.reel3d__canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* "Drag to rotate" — sits on the floor in front of the laptop, fades away after the first drag. */
.reel3d__hint {
  position: absolute;
  z-index: 1;
  left: 16px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(245, 239, 228, .16);
  border-radius: 999px;
  background: rgba(12, 11, 16, .55);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: .9;
  transition: opacity .6s var(--ease);
}
.reel3d__hint::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}
.reel3d.reel3d--dragged .reel3d__hint { opacity: 0; }

/* Once 3D is live the flat images leave the layout but stay in the
   accessibility tree: they carry the alt text for the screenshots. */
.reel.has-3d .reel__screen,
.reel.has-3d .reel__phone {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  aspect-ratio: auto;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  transform: none;
  box-shadow: none;
  transition: none;
  pointer-events: none;
}

@media (max-width: 720px) {
  .reel3d__hint { left: 10px; bottom: 5px; padding: 4px 8px; font-size: 9px; }
  .reel3d__hint::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reel3d__hint { transition: none; }
}