/* Desktop home: a full-height cover and a shared information column. */
.home-page .cover{top:0;height:100svh;width:var(--cover-size)}
.home-page .cover>img{object-fit:cover}
.home-page .cover h1{top:24px;left:24px;right:24px;font-size:1rem;line-height:1.3;white-space:nowrap}
.home-page .cover h1 em{font-size:1em}
.home-page .top-corners{top:24px}
.home-page .bottom-corners{bottom:24px}
.home-page .projects-link{left:16px;right:auto;bottom:16px;width:var(--compact-button-width,max-content);padding:8px;border:1px dotted currentColor;text-align:center;font-weight:400;line-height:1.3;transition:width var(--duration) var(--spring)}
.home-page .projects-link:hover{border-style:solid}
.home-panel-open .home-page .projects-link{width:var(--compact-button-width)}
/* A panel opening moves the cover to x=0, while the right corner controls stay put. */
.home-panel-open .home-page .cover{transform:translateX(calc(-50vw + var(--cover-size)/2))}
.info-open .home-page .home-stage,.imprint-open .home-page .home-stage{transform:none}
.info-open .home-page .corners,.imprint-open .home-page .corners,.info-open.imprint-open .home-page .corners{transform:none}
.home-page .wordmark,.home-page .footer-tools{transition:transform var(--duration) var(--spring),opacity var(--duration) var(--spring),visibility 0s}
.home-panel-open .home-page .wordmark,.home-panel-open .home-page .footer-tools{transform:translateX(-50vw);opacity:0;visibility:hidden;transition:transform var(--duration) var(--spring),opacity var(--duration) var(--spring),visibility 0s var(--duration)}
/* Both independent sections share the column to the right of the cover. */
.home-page .home-panels{position:absolute;left:calc(var(--cover-size) + 32px);right:32px;top:0;bottom:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;pointer-events:none;scrollbar-width:thin}
.home-panel-open .home-page .home-panels{pointer-events:auto}
.home-page .studio-info,.home-page .studio-imprint{position:absolute;left:0;right:0;top:var(--home-panel-center,50%);bottom:auto;margin:0;width:auto;max-height:none;overflow:visible;translate:none;opacity:0;visibility:hidden;transform:translate(calc(50vw - var(--cover-size)/2),calc(-50% + var(--home-info-y,0px)));transition:transform var(--duration) var(--spring),opacity var(--duration) var(--spring),visibility 0s var(--duration)}
.home-page .studio-imprint{transform:translate(calc(50vw - var(--cover-size)/2),calc(-50% + var(--home-imprint-y,0px)))}
.info-open .home-page .studio-info{transform:translate(0,calc(-50% + var(--home-info-y,0px)));opacity:1;visibility:visible;transition-delay:0s}
.imprint-open .home-page .studio-imprint{transform:translate(0,calc(-50% + var(--home-imprint-y,0px)));opacity:1;visibility:visible;transition-delay:0s}
.home-page .imprint-copy,.info-open .home-page .imprint-copy{width:auto;margin:0;transform:none;max-height:none;overflow:visible}
/* The picture moves between views; the shared information column stays fixed. */
.home-entering .home-page .wordmark{animation-name:home-enter-top-left}
.home-entering .home-page .info-toggle{animation-name:home-enter-top-right}
.home-entering .home-page .theme-toggle{animation-name:home-enter-bottom-left}
.home-entering .home-page .imprint-toggle{animation-name:home-enter-bottom-right}
@keyframes home-enter-top-left{from{translate:calc(-100% - 32px) calc(-100% - 24px)}to{translate:0 0}}
@keyframes home-enter-top-right{from{translate:calc(100% + 32px) calc(-100% - 24px)}to{translate:0 0}}
@keyframes home-enter-bottom-left{from{translate:calc(-100% - 32px) calc(100% + 24px)}to{translate:0 0}}
@keyframes home-enter-bottom-right{from{translate:calc(100% + 32px) calc(100% + 24px)}to{translate:0 0}}
/* Until the mobile layout is designed, preserve usable narrow-window navigation. */
@media(max-width:900px){
 .home-page{--cover-size:calc(100vw - 64px)}
 .home-page .cover h1{white-space:normal}
 .home-panel-open .home-page .cover{transform:translateX(calc(-100vw - 32px))}
 .home-page .home-panels{left:32px;right:32px}
 .home-page .studio-info,.home-page .studio-imprint{transform:translate(100vw,calc(-50% + var(--home-info-y,0px)))}
 .home-page .studio-imprint{transform:translate(100vw,calc(-50% + var(--home-imprint-y,0px)))}
 .info-open .home-page .studio-info{transform:translate(0,calc(-50% + var(--home-info-y,0px)))}
 .imprint-open .home-page .studio-imprint{transform:translate(0,calc(-50% + var(--home-imprint-y,0px)))}
}

/* The full-height home cover needs no frame. */
.home-page .cover::after{display:none}

/* With one panel open, stage its companion just above/below the stacked slot. */
.imprint-open:not(.info-open) .home-page .studio-info{transform:translate(0,calc(-50% + var(--home-info-y,0px) - 32px))}
.info-open:not(.imprint-open) .home-page .studio-imprint{transform:translate(0,calc(-50% + var(--home-imprint-y,0px) + 32px))}

/* Corner rows overlap the cover; their empty space must not block its button. */
.home-page .corners{pointer-events:none}
.home-page .corners>a,.home-page .corners>button{pointer-events:auto}

/* The image is present immediately; title and navigation enter together. */
.home-entering .home-page .cover h1{animation:home-enter-title var(--duration) var(--spring) 400ms both}
@keyframes home-enter-title{from{translate:0 calc(-100% - 24px)}to{translate:0 0}}
@media(prefers-reduced-motion:reduce){.home-entering .home-page .cover h1{animation:none}}

/* Leave invisible room for the spring's leftward overshoot inside the scrollport. */
.home-page .home-panels{left:calc(var(--cover-size) + 32px - 64px)}
.home-page .studio-info,.home-page .studio-imprint{left:64px}
@media(max-width:900px){.home-page .home-panels{left:-32px}}

/* An exact 2px dash / 2px gap frame, crossfaded to a solid hover frame. */
.home-page .projects-link{border:1px solid transparent}
.home-page .projects-link::before,.home-page .projects-link::after{content:"";position:absolute;inset:-1px;pointer-events:none;transition:opacity var(--duration) var(--spring)}
.home-page .projects-link::before{background:repeating-linear-gradient(to right,currentColor 0 2px,transparent 2px 4px) top left/100% 1px no-repeat,repeating-linear-gradient(to right,currentColor 0 2px,transparent 2px 4px) bottom left/100% 1px no-repeat,repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 4px) top left/1px 100% no-repeat,repeating-linear-gradient(to bottom,currentColor 0 2px,transparent 2px 4px) top right/1px 100% no-repeat;opacity:1}
.home-page .projects-link::after{border:1px solid currentColor;opacity:0}
.home-page .projects-link:hover{border-color:transparent}
.home-page .projects-link:hover::before{opacity:0}
.home-page .projects-link:hover::after{opacity:1}

/* Keep one live header above both surfaces during the vertical page transition. */
.home-page>.top-corners{z-index:20}
.viewing-projects .home-page>.top-corners{translate:0 0}

.viewing-single-project .home-page>.top-corners{opacity:0;visibility:hidden;transition:opacity var(--duration) var(--spring),visibility 0s var(--duration)}

.home-page .cover{transition:transform var(--duration) var(--spring),color var(--duration) var(--spring)}

/* One shared footer stays beside the shared header throughout gallery navigation. */
.home-page>.bottom-corners{z-index:20}
.viewing-projects .home-page>.bottom-corners{translate:0 0}
.viewing-single-project .home-page>.bottom-corners{opacity:0;visibility:hidden;transition:opacity var(--duration) var(--spring),visibility 0s var(--duration)}

.viewing-projects .home-page .wordmark,.viewing-projects .home-page .footer-tools{transform:none;opacity:1;visibility:visible}

/* Share the actual panel nodes across home and the embedded project gallery. */
.home-page>.home-panels{position:fixed;z-index:20}
.viewing-single-project .home-page>.home-panels{visibility:hidden;pointer-events:none}
.viewing-single-project .home-page>.home-panels>*{visibility:hidden;pointer-events:none}

/* Reserve the combined desktop layout before either section enters. */
@media(min-width:701px){
 .home-panels .info-content{gap:var(--desktop-copy-gap,16px)}
 .home-panels .large-copy,.home-panels .contact a{font-size:var(--desktop-copy-size,24px)}
 .home-panels .contact{margin-top:var(--desktop-contact-gap,24px);gap:var(--desktop-contact-label-gap,8px)}
}

/* Corner controls must win hit-testing over the full-height shared panel layer. */
.home-page>.top-corners,.home-page>.bottom-corners{z-index:30}