/* A geometric circle owns the entry and page-change curtains. */
body .quote-intro,body .quote-intro[popover]{
 position:fixed;inset:0;margin:0;border:0;width:100%;height:100%;max-width:none;max-height:none;
 padding:24px;box-sizing:border-box;display:grid;place-items:center;overflow:hidden;
 background:#1e272e;color:#fff;z-index:999;visibility:visible;pointer-events:auto;
 animation:none;transform:none;border-radius:0;will-change:clip-path;
 clip-path:circle(var(--circle-radius,150vmax) at 50% 50%);
}
body .quote-intro[hidden]{display:none}
body .quote-intro::backdrop{background:transparent}
body .quote-intro.intro-enter{animation:portfolio-circle-in .95s cubic-bezier(.65,0,.25,1) both}
body .quote-intro.intro-exit{animation:portfolio-circle-out 1.05s cubic-bezier(.65,0,.25,1) both}
@keyframes portfolio-circle-in{
 from{clip-path:circle(var(--circle-radius) at 50% calc(100% + var(--circle-radius) + 12px))}
 to{clip-path:circle(var(--circle-radius) at 50% var(--circle-enter-center))}
}
@keyframes portfolio-circle-out{
 from{clip-path:circle(var(--circle-radius) at 50% var(--circle-exit-center))}
 to{clip-path:circle(var(--circle-radius) at 50% calc(0px - var(--circle-radius) - 12px))}
}
body .quote-intro blockquote{position:relative;display:flex;flex-direction:column;align-items:center;width:max-content;max-width:88vw;text-align:center;margin:0}
body .quote-intro:not(.rams-intro) blockquote p.page-title-line{position:relative;overflow:hidden;padding:0;margin:0;white-space:nowrap;font-size:clamp(32px,7vw,110px);line-height:1.1}
body .quote-intro .load-typed{width:100%;text-align:center}
body .quote-intro.rams-intro blockquote p{font-size:clamp(20px,4.7vw,76px);line-height:1.1;margin:0}
body .quote-intro .baseline-inner{display:block;transform:translateY(120%);opacity:0;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .5s}
body .quote-intro.title-visible .page-title-line .baseline-inner,body .quote-intro.rams-intro.meta-visible cite .baseline-inner{transform:translateY(0);opacity:1}
body .quote-intro .page-title-subtitle{font-size:clamp(12px,1.15vw,18px);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .65s}
body .quote-intro.title-visible .page-title-subtitle{opacity:1;transform:none}
body .quote-intro.rams-intro cite,body .quote-intro.rams-intro.meta-visible cite{
 position:static;display:block;overflow:hidden;transform:none;margin:44px 0 0;padding:0;
 opacity:1;transition:none;font-style:normal;font-size:clamp(14px,1.05vw,18px);line-height:1.5;
}
body .quote-intro.intro-exit blockquote{opacity:0;transition:opacity .25s}
body .quote-intro .load-progress{width:clamp(160px,18vw,260px);height:1px;flex:none;margin:28px 0 0;background:rgb(255 255 255 / .2);overflow:hidden}
body .quote-intro.rams-intro cite,body .quote-intro.rams-intro.meta-visible cite{margin-top:16px}
body .quote-intro.rams-intro .load-typed:after{content:'';display:inline-block;width:2px;height:.85em;margin-left:5px;background:currentColor;vertical-align:-.02em;animation:quote-caret .7s steps(1) infinite}
@keyframes quote-caret{50%{opacity:0}}
body .quote-intro .load-progress>span{display:block;width:100%;height:100%;background:#fff;transform-origin:left;animation:transition-progress var(--progress-duration,3s) linear both;animation-delay:var(--progress-offset,0ms)}
@keyframes transition-progress{from{transform:scaleX(0)}to{transform:scaleX(.9)}}
body .quote-intro .load-progress.load-complete>span{animation:transition-finish .2s linear both}
@keyframes transition-finish{from{transform:scaleX(.9)}to{transform:scaleX(1)}}
/* Native history snapshots keep the outgoing page visible beneath the curtain. */
@view-transition{navigation:auto}
::view-transition-group(root){animation:none}
::view-transition-image-pair(root){isolation:isolate}
::view-transition-old(root){animation:none;mix-blend-mode:normal;opacity:1}
::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.history-arrival::view-transition-new(root){animation:portfolio-circle-in .95s cubic-bezier(.65,0,.25,1) both}
body.homepage [data-entry-rise]{will-change:translate}
@media(prefers-reduced-motion:reduce){
 body .quote-intro.intro-enter,body .quote-intro.intro-exit{animation:none}
 body .quote-intro .baseline-inner,body .quote-intro .page-title-subtitle{transition:none;transform:none;opacity:1}
 body.homepage [data-entry-rise]{translate:none!important}
 body .quote-intro .load-progress>span,body .quote-intro .load-progress.load-complete>span{animation:none;transform:scaleX(1)}
 body .quote-intro.rams-intro .load-typed:after{animation:none}
 ::view-transition-new(root){animation:none}
}

.quote-intro .load-subtitle{font-size:clamp(14px,1.25vw,24px);font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;margin-top:18px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .65s}.quote-intro.title-visible .load-subtitle{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.quote-intro .load-subtitle{opacity:1;transform:none;transition:none}}

body .quote-intro .load-subtitle{overflow:hidden;opacity:1;transform:none;transition:none}body .quote-intro.title-visible .load-subtitle .baseline-inner{transform:translateY(0);opacity:1}
/* Preserve the title across document replacement; only the first curtain rises. */
body .quote-intro.loader-resumed .baseline-inner{transform:none!important;opacity:1!important;transition:none!important}
html.entry-pending body>header,html.entry-pending body>main{visibility:hidden}

/* Progress remains exclusive to the first Dieter Rams quotation. */
body .quote-intro:not(.rams-intro) .load-progress{display:none}