.pavilion-construction { display:none; }

@media (min-width:901px) {
  body:has(.desktop-pavilion) > header,
  body:has(.desktop-pavilion) > header .service-nav > a {
    color:#f5f0ed;
  }

  .architecture-hero.desktop-pavilion {
    background:#101014;
    color:#f5f0ed;
    height:calc(100svh - 52px);
    min-height:600px;
  }

  .desktop-pavilion .hero-photograph::before { display:none; }
  .desktop-pavilion .hero-photograph::after {
    background:linear-gradient(to bottom,#101014,transparent 32%);
    pointer-events:none;
  }

  .desktop-pavilion .hero-building {
    animation:none;
    transform:none;
  }

  .desktop-pavilion .hero-photograph .hero-building img {
    inset:auto 0 0;
    width:100%;
    height:auto;
    aspect-ratio:1816 / 866;
    object-fit:contain;
  }

  /* Register the wireframe render to the solid roof and facade. */
  .desktop-pavilion .hero-building::before,
  .desktop-pavilion .hero-building::after {
    transform-origin:98% 52%;
    transform:scale(1.045,1.063);
  }

  @supports (mask-image:radial-gradient(black,transparent)) or (-webkit-mask-image:radial-gradient(black,transparent)) {
    .desktop-pavilion .hero-sky-grid {
      display:block;
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      clip-path:var(--sky-outline,polygon(0 0,0 0,0 0));
      -webkit-mask-image:linear-gradient(to bottom,transparent 46px,#0004 108px,#000 220px);
      mask-image:linear-gradient(to bottom,transparent 46px,#0004 108px,#000 220px);
    }
  }

  .desktop-pavilion .point-grid.cursor-grid {
    width:100%;
    z-index:0;
    --trail-mask:radial-gradient(ellipse 150px 115px at var(--trail-x,0px) var(--trail-y,0px),#000 8%,#000b 34%,#0004 67%,transparent 100%);
    -webkit-mask-image:var(--trail-mask);
    mask-image:var(--trail-mask);
  }
  .desktop-pavilion .point-grid.cursor-grid-visible { opacity:.58; }
  @media (prefers-reduced-motion:no-preference) {
    .desktop-pavilion .point-grid.cursor-grid { transition:opacity 420ms ease; }
  }

  .architecture-hero.desktop-pavilion .hero-copy {
    width:44%;
    padding:clamp(137px,23svh,246px) 0 0 var(--pad);
  }

  .architecture-hero.desktop-pavilion h1 { font-size:clamp(34px,3.8vw,76px); }
  .desktop-pavilion .hero-glass-shine { --shine-base:#c9a6e5; }
  body:has(.desktop-pavilion) > header .media-nav-shine { --shine-base:#dcc0ef; }

  .architecture-hero.desktop-pavilion .intro {
    margin-top:clamp(24px,4.3svh,44px);
    color:#eae2e8;
    font-size:clamp(16px,1.4vw,25px);
  }

  .desktop-pavilion .actions { margin-top:clamp(43px,7.3svh,70px); }
  .desktop-pavilion .actions .link { border-color:#c9a6e577; color:inherit; }

  body:has(.desktop-pavilion) > header > .button,
  .desktop-pavilion .hero-copy .button {
    color:#fff8f5;
    border:1px solid #f5e5f24d;
    background:linear-gradient(150deg,#f5e5f24a,#e7cce513 42%,#f5e5f22d);
    box-shadow:inset 0 1px 1px #fff5,inset 0 -5px 14px #e7cced18,0 7px 24px #0005;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }

  body:has(.desktop-pavilion) > header > .button:hover,
  .desktop-pavilion .hero-copy .button:hover {
    background:linear-gradient(150deg,#f5e5f25c,#e7cce528 42%,#f5e5f246);
  }
}

@media (901px <= width <= 1240px), (901px <= width <= 1440px) and (pointer:coarse) {
  body:has(.desktop-pavilion) > header .service-nav {
    background:linear-gradient(145deg,#55505bb8,#1b1722ba 62%,#403247ad);
    border:1px solid #f5e5f250;
    -webkit-backdrop-filter:blur(22px) saturate(145%);
    backdrop-filter:blur(22px) saturate(145%);
    gap:0;
    max-height:calc(100dvh - 106px);
    overflow-y:auto;
  }
}

@media (min-width:901px) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .desktop-pavilion .pavilion-build-ready picture:first-child img {
    mask-image:linear-gradient(100deg,#000 35%,#000c 44%,#0005 56%,transparent 65%);
    mask-size:300% 100%;
    mask-repeat:no-repeat;
    mask-position:0 0;
    animation:pavilion-materials-in 1.45s 1.32s ease-in-out backwards;
  }

  .desktop-pavilion .pavilion-build-ready .pavilion-construction {
    display:block;
    position:absolute;
    inset:auto 0 0;
    width:100%;
    height:auto;
    z-index:1;
    pointer-events:none;
    fill:none;
    stroke:#ccb0f1;
    stroke-width:.64;
    stroke-linecap:round;
    animation:pavilion-drawing-away 1.32s 1.46s ease-in-out both;
  }

  .pavilion-construction .pavilion-floor { opacity:.34; stroke-width:.45; }
  .pavilion-construction .pavilion-glass { opacity:.78; stroke-width:.53; }
  .pavilion-construction .pavilion-lights { opacity:.72; stroke-width:.53; }

  .pavilion-build-ready .pavilion-construction path {
    stroke-dasharray:1;
    animation:pavilion-draw-stroke 310ms var(--draw-delay) cubic-bezier(.4,.05,.3,1) both;
  }

  .desktop-pavilion .hero-building::before,
  .desktop-pavilion .hero-building::after {
    content:"";
    position:absolute;
    inset:auto 0 0;
    width:100%;
    aspect-ratio:1816 / 866;
    z-index:1;
    pointer-events:none;
    background:url("/assets/pavilion-curved-wireframe.webp") center / 100% 100% no-repeat;
    opacity:0;
    mask-image:radial-gradient(ellipse closest-side,#000 10%,#000c 42%,#0005 73%,transparent);
    mask-size:26% 19%;
    mask-repeat:no-repeat;
    animation:pavilion-wireframe-drift 13s 1.5s ease-in-out infinite;
  }

  .desktop-pavilion .hero-building::after {
    mask-size:20% 34%;
    animation:pavilion-edge-drift 19s 2.4s ease-in-out infinite;
  }

  .desktop-pavilion::after {
    content:"";
    display:block;
    position:absolute;
    inset:17% auto auto 56%;
    width:64px;
    height:1px;
    z-index:0;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(90deg,transparent,#ccb7e96b 76%,#f4e8ffbf);
    animation:pavilion-shooting-star 29s linear infinite;
  }

  .desktop-pavilion.motion-paused::after,
  .desktop-pavilion.motion-paused .hero-building::before,
  .desktop-pavilion.motion-paused .hero-building::after { animation-play-state:paused; }
}

@keyframes pavilion-draw-stroke {
  from { stroke-dashoffset:1; opacity:0; }
  12% { opacity:.92; }
  to { stroke-dashoffset:0; opacity:.85; }
}

@keyframes pavilion-drawing-away {
  from { opacity:1; }
  to { opacity:0; visibility:hidden; }
}

@keyframes pavilion-materials-in {
  from { mask-position:100% 0; opacity:0; }
  42% { opacity:.52; }
  to { mask-position:0 0; opacity:1; }
}

@keyframes pavilion-wireframe-drift {
  0%,14% { opacity:0; mask-position:55% 45%; }
  28% { opacity:.55; }
  46%,100% { opacity:0; mask-position:89% 24%; }
}

@keyframes pavilion-edge-drift {
  0%,21% { opacity:0; mask-position:96% 54%; }
  32% { opacity:.53; }
  44%,63% { opacity:0; mask-position:95% 78%; }
  64% { opacity:0; mask-position:39% 71%; }
  73% { opacity:.42; }
  88%,100% { opacity:0; mask-position:38% 83%; }
}

@keyframes pavilion-shooting-star {
  0%,39% { opacity:0; transform:translate(0,0) rotate(16deg); }
  40% { opacity:.64; }
  44%,69% { opacity:0; transform:translate(160px,46px) rotate(16deg); }
  70% { opacity:0; transform:translate(16vw,-22px) rotate(24deg); }
  71% { opacity:.5; }
  74%,100% { opacity:0; transform:translate(calc(16vw + 125px),34px) rotate(24deg); }
}


@media (min-width:901px) and (hover:hover) and (prefers-reduced-motion:no-preference) and (forced-colors:none) {
  .desktop-pavilion .point-grid.ambient-grid {
    display:block;
    --trail-mask:radial-gradient(ellipse closest-side,#000 0%,#000d 38%,#0006 70%,transparent 100%);
    -webkit-mask-size:23% 30%;
    mask-size:23% 30%;
    mask-repeat:no-repeat;
    animation:pavilion-sky-wander 24s cubic-bezier(.45,.18,.55,.82) infinite;
  }

  .desktop-pavilion.motion-paused .ambient-grid { animation-play-state:paused; }
}

@keyframes pavilion-sky-wander {
  0%,100% { opacity:.62; -webkit-mask-position:13% 38%; mask-position:13% 38%; }
  9% { opacity:.68; -webkit-mask-position:23% 30%; mask-position:23% 30%; }
  17% { opacity:.52; -webkit-mask-position:35% 36%; mask-position:35% 36%; }
  27% { opacity:.66; -webkit-mask-position:43% 24%; mask-position:43% 24%; }
  38% { opacity:.62; -webkit-mask-position:61% 17%; mask-position:61% 17%; }
  49% { opacity:.57; -webkit-mask-position:80% 12%; mask-position:80% 12%; }
  57% { opacity:.65; -webkit-mask-position:88% 17%; mask-position:88% 17%; }
  64% { opacity:.48; -webkit-mask-position:74% 14%; mask-position:74% 14%; }
  73% { opacity:.63; -webkit-mask-position:52% 17%; mask-position:52% 17%; }
  84% { opacity:.66; -webkit-mask-position:31% 20%; mask-position:31% 20%; }
  93% { opacity:.53; -webkit-mask-position:9% 27%; mask-position:9% 27%; }
}