/* The approved photograph is masked, never redrawn or anatomically warped. */
.dw-intro {
  display: block !important;
  height: 100svh;
  position: relative;
  background: #000;
  isolation: isolate;
}
.dw-intro.dw-cinema-ready { height: 400svh; }
/* The hero enters beneath the final fade, eliminating the empty viewport
   after the sticky frame releases. Scroll and layout remain native. */
.dw-intro.dw-cinema-ready { margin-bottom: -100svh; }
.dw-intro.dw-cinema-ready + .hero { position: relative; z-index: 1; opacity: 0; }
.dw-intro-frame {
  display: block;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #000;
}
.dw-intro-frame::before, .dw-intro-frame::after { content: none; }
.dw-art {
  position: absolute;
  left: 50%;
  top: 44%;
  width: max(110vw, 210svh);
  aspect-ratio: 1672 / 941;
  transform: translate(-50.83732%, -40.38257%);
  transform-origin: 50.83732% 40.38257%;
  pointer-events: none;
}
.dw-hand { position: absolute; inset: 0; mix-blend-mode: screen; will-change: transform, opacity; }
.dw-hand.dw-cached { mix-blend-mode: normal; }
.dw-hand img { display: block; width: 100%; height: 100%; max-width: none; }
/* The polygons run through the black negative space, excluding the baked-in name.
   Each hand keeps its original pixels, proportions and surrounding filaments. */
.dw-hand-left img {
  mask-image: url('assets/cinema/left-mask.svg');
  -webkit-mask-image: url('assets/cinema/left-mask.svg');
}
.dw-hand-right img {
  mask-image: url('assets/cinema/right-mask.svg');
  -webkit-mask-image: url('assets/cinema/right-mask.svg');
}
.dw-hand img { mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
.dw-hand img.dw-texture { mask-image: none; -webkit-mask-image: none; }
#dw-particles { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; pointer-events: none; }
.dw-connection {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 160px;
  aspect-ratio: 1;
  background: radial-gradient(circle, #fff 0, #eee9 2%, #ddd3 12%, #ddd1 29%, transparent 64%);
  transform: translate(-50%, -50%);
  opacity: 0 !important;
  display: none !important;
  pointer-events: none;
}
.dw-intro-name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 18px;
  text-align: center;
  pointer-events: none;
}
.dw-intro-name h2 {
  margin: 0;
  color: #eeeeec;
  font-family: Baskerville, 'Times New Roman', serif;
  font-size: clamp(26px, 3.3vw, 58px);
  font-weight: 400;
  letter-spacing: .28em;
  line-height: 1.35;
  text-indent: .28em;
  white-space: nowrap;
}
.dw-cinema-ready .dw-hand, .dw-cinema-ready .dw-intro-name, .dw-cinema-ready .dw-connection { opacity: 0; }
body.dw-cinema-visible .site-header,
body.dw-cinema-visible > .progress { visibility: hidden; pointer-events: none; }
body.dw-cinema-visible .skip-dw:focus { background: #fff; color: #000; }
/* Cancel the site's 82px root scroll padding for this one native skip target,
   so keyboard/hash navigation lands after the final fade, not inside it. */
.dw-intro + .hero { scroll-margin-top: -82px; }
@media (max-aspect-ratio: 4/5) {
  .dw-art {
    width: max(235vw, 110svh);
    transform: translate(-50.83732%, -40.38257%) rotate(-24deg);
  }
  .dw-intro.dw-cinema-ready { height: 390svh; }
  .dw-intro-name { inset: 0; }
  .dw-intro-name h2 { font-size: clamp(20px, 5.6vw, 43px); letter-spacing: .17em; text-indent: .17em; }
  .dw-connection { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .dw-intro.dw-cinema-ready { height: 100svh; }
  .dw-intro.dw-cinema-ready { margin-bottom: 0; }
  .dw-intro.dw-cinema-ready + .hero { opacity: 1 !important; }
  .dw-cinema-ready .dw-hand { opacity: .16 !important; }
  .dw-cinema-ready .dw-intro-name { opacity: 1 !important; transform: none !important; }
  .dw-cinema-ready .dw-connection { opacity: 0 !important; display: none !important; }
  #dw-particles { display: none; }
}

/* Local image-space canvas inherits the art's responsive scale and mobile rotation. */
.dw-hand-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .dw-hand-particles { display: none; } }


/* Contour-preserving particle atlas, generated directly from approved hand textures.
   Each atlas moves with the identical transform/origin as its photographic hand. */
.dw-v7-dot-layer { position: absolute; inset: 0; pointer-events: none;
  will-change: transform, opacity; opacity: 0; mix-blend-mode: screen; }
.dw-v7-dot-layer img { display: block; width: 100%; height: 100%;
  object-fit: fill; max-width: none; }
@media(prefers-reduced-motion:reduce) { .dw-v7-dot-layer { display: none !important; } }


/* V8 filaments derived from original artwork, aligned pixel-for-pixel. */
.dw-v8-filament-layer { position:absolute; inset:0; pointer-events:none;
  opacity:0; will-change:transform,opacity; mix-blend-mode:screen; }
.dw-v8-filament-layer img { display:block; width:100%; height:100%;
  max-width:none; object-fit:fill; }
@media (prefers-reduced-motion:reduce) { .dw-v8-filament-layer{display:none!important;} }


/* The derived atlases already have alpha transparency: normal blending
   avoids costly full-frame screen compositing on lower-powered hardware. */
.dw-v7-dot-layer, .dw-v8-filament-layer { mix-blend-mode: normal; }