*{box-sizing:border-box}
:root{--section-fade:clamp(220px,30dvh,340px)}
html{background:#000000;scroll-behavior:auto;overflow-anchor:none}
.restoring-position body>:is(main,.site-background){visibility:hidden}
body{margin:0;background:#000000;color:#f7f7f5;font-family:system-ui,sans-serif;overflow-x:hidden}
.site-background{position:fixed;z-index:0;inset:0;width:100%;height:100dvh;border:0;pointer-events:none;background:#000000}
main{position:relative;z-index:1}
.preview-section{position:relative;min-height:100dvh;background:#000000;isolation:isolate;overflow:clip}
.preview-section.shared-background{background:transparent}
.preview-section.fade-in{--fade-start:var(--section-fade)}
.preview-section.fade-out{--fade-end:var(--section-fade)}
.preview-section:is(.fade-in,.fade-out){
  --edge-mask:linear-gradient(to bottom,
    transparent 0,
    rgba(0,0,0,.01) calc(var(--fade-start,0px)*.1),
    rgba(0,0,0,.05) calc(var(--fade-start,0px)*.2),
    rgba(0,0,0,.16) calc(var(--fade-start,0px)*.32),
    rgba(0,0,0,.36) calc(var(--fade-start,0px)*.44),
    rgba(0,0,0,.62) calc(var(--fade-start,0px)*.56),
    rgba(0,0,0,.84) calc(var(--fade-start,0px)*.68),
    rgba(0,0,0,.96) calc(var(--fade-start,0px)*.8),
    #000 calc(var(--fade-start,0px)*.92),
    #000 calc(100% - var(--fade-end,0px)*.92),
    rgba(0,0,0,.96) calc(100% - var(--fade-end,0px)*.8),
    rgba(0,0,0,.84) calc(100% - var(--fade-end,0px)*.68),
    rgba(0,0,0,.62) calc(100% - var(--fade-end,0px)*.56),
    rgba(0,0,0,.36) calc(100% - var(--fade-end,0px)*.44),
    rgba(0,0,0,.16) calc(100% - var(--fade-end,0px)*.32),
    rgba(0,0,0,.05) calc(100% - var(--fade-end,0px)*.2),
    rgba(0,0,0,.01) calc(100% - var(--fade-end,0px)*.1),
    transparent 100%);
  -webkit-mask-image:var(--edge-mask);
  mask-image:var(--edge-mask);
}
.preview-section>iframe{position:sticky;top:0;display:block;width:100%;height:100dvh;border:0;background:transparent}
.shared-background:not(#hero)>iframe{
  transform-origin:50% 60%;
  transform:perspective(100vw) translate3d(0,calc(var(--gallery-progress,0) * -55dvh),0) rotateX(calc(var(--gallery-progress,0) * 16deg));
}
@media(max-width:700px){
  .shared-background:not(#hero)>iframe{
    transform-origin:50% 54%;
    transform:perspective(240vw) translate3d(0,calc(var(--gallery-progress,0) * -55dvh),0) rotateX(calc(var(--gallery-progress,0) * 16deg));
  }
}
/* Extend the sticky area, but keep the next section at its original scroll position. */
@media(prefers-reduced-motion:no-preference){
  /* The incoming surface turns as one card; its empty corners reveal the previous pinned section. */
  .preview-section:not(.shared-background)+.preview-section:not(.shared-background){background:transparent}
  .preview-section:not(.shared-background)+.preview-section:not(.shared-background)>iframe{
    transform-origin:0 0;
    transform:translate(calc(var(--card-turn,0) * 24vw),var(--card-lift,0px)) rotate(calc(var(--card-turn,0) * 18deg));
    box-shadow:0 -12px 36px #0005;
  }
  /* Only the visible camera card covers the last service link during its entrance. */
  #services + #kamera{pointer-events:none}
  #services + #kamera>iframe{pointer-events:auto}
}
@media(prefers-reduced-motion:no-preference){
  .preview-section:not(#hero):has(+ .preview-section:not(.shared-background)){
    --section-overlap:100dvh;
    margin-bottom:calc(-1 * var(--section-overlap));
  }
  /* The next card is only opaque once its entire entrance fade has passed the viewport top. */
  .preview-section:not(#hero):has(+ .preview-section.fade-in){
    --section-overlap:calc(100dvh + var(--section-fade));
  }
  /* Keep the previous surface still until the slower swing fully covers it. */
  .preview-section:not(#hero):not(.shared-background):has(+ .preview-section:not(.shared-background)){
    --section-overlap:240dvh;
  }
}
.preview-section.is-loading::after{content:attr(data-title);position:absolute;inset:0;display:grid;place-items:center;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#f7f7f5;background:#000000}
@media(prefers-reduced-motion:no-preference){
  /* Keep the Hero in view while the camera moves and Studio rises in front of it. */
  #hero{--section-overlap:calc(100dvh + var(--section-fade));margin-bottom:calc(-1 * var(--section-overlap))}
}
noscript{position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:24px;background:#000000;color:#f7f7f5}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shared-background:not(#hero)>iframe{transform:none}}

@media(max-width:700px){
  .site-navigation:has(.site-links>a[href="#hero"][aria-current="location"]) .menu-toggle{padding-inline:8px;gap:8px}
}

/* Reserve the overlap while embedded scenes are still measuring their height. */
.preview-section.is-loading{min-height:calc(100dvh + var(--section-overlap,0px))}

@media(max-width:700px){
  .preview-section.render-idle{visibility:hidden}
  .preview-section:is(.render-idle,.mask-flat){-webkit-mask-image:none;mask-image:none}
}