/* ============================================================================
   CONTACT, DGB ContactGallery layout + enter stages (no WebGL)
   ========================================================================= */
html:has(.page-contact),
.page-contact{height:100%;overflow:hidden}
.page-contact{background:var(--void)}
.page-contact .bar{
  background:transparent;border-bottom-color:transparent;backdrop-filter:none;
}
.page-contact .bar:hover,
.page-contact .bar:focus-within{
  background:rgba(8,8,8,.86);border-bottom-color:var(--edge);backdrop-filter:blur(10px);
}

/* 200svh stack: CREATE BEFORE READY → email. Starts 50% down. */
.contact-copy{
  position:fixed;left:0;top:0;z-index:3;
  width:100%;height:200svh;
  display:flex;flex-direction:column;
  pointer-events:none;
  transform:translateY(50%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.contact-copy.stage-1{transform:translateY(0)}
.contact-copy.stage-2{transform:translateY(-50%)}
.contact-panel{
  height:100svh;width:100%;
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad);text-align:center;
}

.contact-fast{
  font-family:'Oswald',var(--head);
  font-weight:600;text-transform:uppercase;
  letter-spacing:.01em;line-height:.825;
  font-size:clamp(18px,5vw,5vw);color:var(--bone);
  white-space:nowrap;
}
@media(min-width:1200px){
  .contact-fast{font-size:5vw}
}

.contact-mail{
  pointer-events:auto;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  font-family:'Oswald',var(--head);
  font-weight:500;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(22px,3.6vw,5vw);line-height:.825;
  color:var(--bone);text-decoration:none;
}
.contact-hello{position:relative;display:inline-block;padding:.06em .14em}
.contact-oval{
  position:absolute;inset:-22% -12%;
  width:124%;height:144%;
  overflow:visible;pointer-events:none;
}
.contact-oval ellipse{
  fill:none;stroke:var(--electric);stroke-width:2.2;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:640;stroke-dashoffset:640;
}
.contact-copy.stage-2 .contact-oval ellipse{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1) .15s;
}
.contact-mail:hover .contact-hello,
.contact-mail:focus-visible .contact-hello{color:var(--electric)}

.contact-stage{
  position:fixed;inset:0;z-index:1;overflow:hidden;
  perspective:1200px;
  opacity:0;transition:opacity 1s cubic-bezier(.4,0,.2,1);
}
.page-contact.is-in .contact-stage{opacity:1}

.contact-gallery{
  --gw: min(75vw, 1480px);
  --ew: min(22vw, 280px);
  --eh: calc(var(--ew) * 1.22);
  --rise: 10vh;
  --row: calc(var(--eh) + 28vh);
  position:relative;
  width:var(--gw);
  height:calc(var(--row) * 5 + var(--rise) * 2 + 20vh);
  margin-inline:auto;
  transform-style:preserve-3d;
}

.contact-fig{
  position:absolute;
  width:var(--ew);height:var(--eh);
  margin:0;overflow:hidden;
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
}
.contact-fig:nth-child(3n+1){left:0}
.contact-fig:nth-child(3n+2){left:calc(50% - var(--ew) / 2)}
.contact-fig:nth-child(3n+3){right:0;left:auto}

.contact-fig:nth-child(1){top:calc(var(--row) * 0 + var(--rise) * 2)}
.contact-fig:nth-child(2){top:calc(var(--row) * 0 + var(--rise) * 1)}
.contact-fig:nth-child(3){top:calc(var(--row) * 0 + var(--rise) * 0)}
.contact-fig:nth-child(4){top:calc(var(--row) * 1 + var(--rise) * 2)}
.contact-fig:nth-child(5){top:calc(var(--row) * 1 + var(--rise) * 1)}
.contact-fig:nth-child(6){top:calc(var(--row) * 1 + var(--rise) * 0)}
.contact-fig:nth-child(7){top:calc(var(--row) * 2 + var(--rise) * 2)}
.contact-fig:nth-child(8){top:calc(var(--row) * 2 + var(--rise) * 1)}
.contact-fig:nth-child(9){top:calc(var(--row) * 2 + var(--rise) * 0)}
.contact-fig:nth-child(10){top:calc(var(--row) * 3 + var(--rise) * 2)}
.contact-fig:nth-child(11){top:calc(var(--row) * 3 + var(--rise) * 1)}
.contact-fig:nth-child(12){top:calc(var(--row) * 3 + var(--rise) * 0)}
.contact-fig:nth-child(13){top:calc(var(--row) * 4 + var(--rise) * 2)}
.contact-fig:nth-child(14){top:calc(var(--row) * 4 + var(--rise) * 1)}
.contact-fig:nth-child(15){top:calc(var(--row) * 4 + var(--rise) * 0)}

.contact-fig img{
  width:100%;height:100%;object-fit:cover;display:block;
}

@media(max-width:799px){
  .contact-gallery{
    --gw: calc(100vw - 32px);
    --ew: min(38vw, 200px);
    --rise: 5vh;
    --row: calc(var(--eh) + 14vh);
  }
  .contact-fast{font-size:clamp(16px,7.2vw,28px);white-space:nowrap}
  .contact-mail{font-size:clamp(20px,5.4vw,28px)}
}

@media (prefers-reduced-motion:reduce){
  html:has(.page-contact),
  .page-contact{height:auto;overflow:auto}
  .contact-stage{position:relative;opacity:1}
  .contact-copy{position:relative;height:auto;transform:none}
  .contact-panel{height:auto;padding-block:20vh}
  .contact-fig{transform:none!important}
}