/* ===========================================================================
   ARC — A Random Web · Device 3D experience  (websites.html ONLY)
   ---------------------------------------------------------------------------
   Isolated module. Pairs with assets/js/websites-device-3d/ (ES modules,
   Three.js via the import map in websites.html). Loaded right after
   websites-scroll.css.

   What it styles:
     • The full-viewport 3D layer that lives inside .arc-hero-stage and hosts
       the WebGL canvas (transparent) where the iPhone from the source project
       "Apple-iphone-3d-landing-page-starter-Code-main" is rendered.
     • The dark cinematic backdrop that swallows the compressed hero.
     • The phase captions (Source Sans Pro — extracted from the source project
       into assets/brand/fonts/source-sans-pro/ and registered below).

   FAIL-SAFE: everything here is hidden by default (opacity/visibility). Only
   the JS module reveals it after Three.js + the GLTF model actually loaded.
   No-JS / reduced-motion / no-WebGL / CDN-failure → this layer simply never
   shows and websites-scroll.js keeps the classic hero compression.
   ========================================================================= */

/* ---- Source Sans Pro — integrated from the source 3D landing project ----- */
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../brand/fonts/source-sans-pro/SourceSansPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../brand/fonts/source-sans-pro/SourceSansPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../brand/fonts/source-sans-pro/SourceSansPro-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../brand/fonts/source-sans-pro/SourceSansPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Layer ---------------------------------------------------------------
   Sits inside .arc-hero-stage, above the hero (z 60) but under the sticky nav
   (z 200/300) and the language fab. pointer-events:none — it is a purely
   visual layer; scroll keeps driving everything. */
.arc-device-3d {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  contain: strict;
}

/* Dark cinematic backdrop that fades in around / over the compressed hero as
   the phone emerges. Subtle vermillion-warm glow low in the frame, echoing the
   hero art. */
.arc-device-3d__backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(212, 56, 40, 0.14) 0%, rgba(212, 56, 40, 0) 55%),
    radial-gradient(80% 60% at 50% 42%, #101118 0%, #050506 78%);
}

.arc-device-3d__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Soft edge vignette over the 3D render for depth. */
.arc-device-3d__vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(130% 130% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.5) 100%);
}

/* ---- Phase captions ------------------------------------------------------
   Editorial labels that accompany the device showcase. They use Source Sans
   Pro (the source project's typeface) so the sequence carries its look. */
.arc-device-3d__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(48px, 9vh, 96px);
  transform: translateX(-50%);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  text-align: center;
  white-space: nowrap;
  font-family: 'Source Sans Pro', var(--arc-font-sans), system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 238, 242, 0.92);
}
.arc-device-3d__caption em {
  font-style: normal;
  font-weight: 600;
  color: var(--arc-vermillion);
}

/* The 3D experience is desktop-only (≥992px, pointer devices). Below that,
   websites-scroll.js keeps the classic compression, so hide the layer hard. */
@media (max-width: 991.98px) {
  .arc-device-3d { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-device-3d { display: none !important; }
}