/* Decorative route scenes. Only disposable overlays move; live controls stay put. */
html[data-sws-arrival]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: #131412;
    pointer-events: none;
    animation: sws-arrival-safety 1600ms linear forwards;
}
/* One boundary: old pixels on the left, the real destination on its right. */
html[data-sws-wipe] {
    view-transition-name: sws-signature-page;
    --sws-wipe-width: clamp(28px, 5vw, 72px);
    --sws-wipe-duration: 1100ms;
    --sws-wipe-ease: cubic-bezier(.22,.72,.18,1);
    --sws-wipe-color: #f3efe6;
}
html[data-sws-wipe='vinyl'] {
    --sws-wipe-duration: 1250ms;
    --sws-wipe-ease: cubic-bezier(.4,0,.2,1);
    --sws-wipe-color: #131412;
}
html[data-sws-wipe] .sws-nav-indicator { view-transition-name: none; }
html[data-sws-wipe]::view-transition-group(sws-signature-page) {
    animation: none;
    z-index: 0;
    overflow: hidden;
    background: var(--sws-wipe-color);
}
html[data-sws-wipe]::view-transition-image-pair(sws-signature-page) { isolation: isolate; }
html[data-sws-wipe]::view-transition-old(sws-signature-page),
html[data-sws-wipe]::view-transition-new(sws-signature-page) {
    width: 100%; height: 100%;
    object-fit: fill;
    mix-blend-mode: normal;
    opacity: 1;
    animation-duration: var(--sws-wipe-duration);
    animation-timing-function: var(--sws-wipe-ease);
    animation-fill-mode: both;
}
html[data-sws-wipe='folio']::view-transition-old(sws-signature-page) { animation-name: sws-folio-page-old; }
html[data-sws-wipe='folio']::view-transition-new(sws-signature-page) { animation-name: sws-folio-page-new; }
html[data-sws-wipe='vinyl']::view-transition-old(sws-signature-page) { animation-name: sws-vinyl-page-old; }
html[data-sws-wipe='vinyl']::view-transition-new(sws-signature-page) { animation-name: sws-vinyl-page-new; }
/* All captured layers start on the same native timeline. Source-relative
   transforms preserve the browser's captured group position without doubling it. */
html[data-sws-wipe]::view-transition-group(sws-signature-sheet),
html[data-sws-wipe]::view-transition-group(sws-signature-record),
html[data-sws-wipe]::view-transition-group(sws-signature-sleeve) {
    animation: none;
    overflow: visible;
    z-index: 5;
}
html[data-sws-wipe]::view-transition-group(sws-signature-record) {
    top: 0;
    left: 0;
    width: var(--sws-record-render-size);
    height: var(--sws-record-render-size);
    transform-origin: 50% 50%;
    animation: sws-synced-record var(--sws-wipe-duration) var(--sws-wipe-ease) both,
        sws-record-depth var(--sws-wipe-duration) linear both;
}
html[data-sws-wipe]::view-transition-group(sws-signature-sleeve) { z-index: 3; }
html[data-sws-wipe]::view-transition-old(sws-signature-sheet),
html[data-sws-wipe]::view-transition-old(sws-signature-record),
html[data-sws-wipe]::view-transition-old(sws-signature-sleeve) {
    width: 100%; height: 100%;
    object-fit: fill;
    mix-blend-mode: normal;
    opacity: 1;
    animation-duration: var(--sws-wipe-duration);
    animation-timing-function: var(--sws-wipe-ease);
    animation-fill-mode: both;
}
html[data-sws-wipe]::view-transition-old(sws-signature-sheet) { animation-name: sws-synced-sheet; transform-origin: 3% 55%; }
/* The captured source is only an anchor. Repainting the group at its final size
   avoids upsampling a 150–320px bitmap into a screen-sized record. */
html[data-sws-wipe]::view-transition-old(sws-signature-record) { animation: none; opacity: 0; }
html[data-sws-wipe]::view-transition-old(sws-signature-sleeve) { animation-name: sws-synced-sleeve; transform-origin: 3% 55%; }
@keyframes sws-synced-sheet {
    0% { transform: perspective(1500px) translate3d(0,0,0) rotateY(0deg) rotate(0deg); }
    23% { transform: perspective(1500px) translate3d(0,-15px,45px) rotateY(-5deg) rotate(-1deg); }
    64% { transform: perspective(1500px) translate3d(var(--sws-sheet-mid-x),-24px,60px) rotateY(-48deg) rotate(-4deg); }
    100% { transform: perspective(1500px) translate3d(var(--sws-sheet-exit-x),-40px,0) rotateY(-78deg) rotate(-7deg); }
}
@keyframes sws-synced-record {
    0% { transform: translate3d(var(--sws-record-origin-x),var(--sws-record-origin-y),0) scale(var(--sws-record-origin-scale)) rotate(-12deg); }
    32% { transform: translate3d(calc(var(--sws-record-origin-x) + var(--sws-record-extract-x)),calc(var(--sws-record-origin-y) - 12px),0) scale(calc(var(--sws-record-origin-scale) * 1.04)) rotate(25deg); }
    47% { transform: translate3d(calc(var(--sws-record-origin-x) + var(--sws-record-right-x)),calc(var(--sws-record-origin-y) + var(--sws-record-travel-y)),0) scale(1) rotate(-65deg); }
    78% { transform: translate3d(calc(var(--sws-record-origin-x) + var(--sws-record-mid-x)),calc(var(--sws-record-origin-y) + var(--sws-record-travel-y)),0) scale(1) rotate(-280deg); }
    100% { transform: translate3d(calc(var(--sws-record-origin-x) + var(--sws-record-end-x)),calc(var(--sws-record-origin-y) + var(--sws-record-travel-y)),0) scale(1) rotate(-400deg); }
}
@keyframes sws-record-depth { 0%, 32% { z-index: 2; } 47%, 100% { z-index: 5; } }
@keyframes sws-synced-sleeve {
    0% { transform: translate3d(0,0,0) rotate(0); opacity: 1; }
    35% { transform: translate3d(-16px,3px,0) rotate(-2deg); opacity: 1; }
    72%, 100% { transform: translate3d(-30px,7px,0) rotate(-3deg); opacity: 0; }
}
/* The edge shares the source object's beats and easing, including its initial
   lift/extraction. Polygons avoid the inset() clamp that changed the edge width. */
@keyframes sws-folio-page-old {
    0%, 23% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
    64% { clip-path: polygon(0 0,var(--sws-sheet-edge-mid) 0,var(--sws-sheet-edge-mid) 100%,0 100%); }
    100% { clip-path: polygon(0 0,calc(0px - var(--sws-wipe-width)) 0,calc(0px - var(--sws-wipe-width)) 100%,0 100%); }
}
@keyframes sws-folio-page-new {
    0%, 23% { clip-path: polygon(calc(100% + var(--sws-wipe-width)) 0,100% 0,100% 100%,calc(100% + var(--sws-wipe-width)) 100%); }
    64% { clip-path: polygon(calc(var(--sws-sheet-edge-mid) + var(--sws-wipe-width)) 0,100% 0,100% 100%,calc(var(--sws-sheet-edge-mid) + var(--sws-wipe-width)) 100%); }
    100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
}
@keyframes sws-vinyl-page-old {
    0%, 32%, 47% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
    78% { clip-path: polygon(0 0,var(--sws-record-edge-mid) 0,var(--sws-record-edge-mid) 100%,0 100%); }
    100% { clip-path: polygon(0 0,var(--sws-record-edge-end) 0,var(--sws-record-edge-end) 100%,0 100%); }
}
@keyframes sws-vinyl-page-new {
    0%, 32%, 47% { clip-path: polygon(calc(100% + var(--sws-wipe-width)) 0,100% 0,100% 100%,calc(100% + var(--sws-wipe-width)) 100%); }
    78% { clip-path: polygon(calc(var(--sws-record-edge-mid) + var(--sws-wipe-width)) 0,100% 0,100% 100%,calc(var(--sws-record-edge-mid) + var(--sws-wipe-width)) 100%); }
    100% { clip-path: polygon(calc(var(--sws-record-edge-end) + var(--sws-wipe-width)) 0,100% 0,100% 100%,calc(var(--sws-record-edge-end) + var(--sws-wipe-width)) 100%); }
}
/* Redirects, skipped captures and unsupported destinations reveal directly. */
::view-transition-old(sws-signature-page):only-child { animation: none !important; opacity: 0 !important; }
::view-transition-new(sws-signature-page):only-child { animation: none !important; clip-path: none !important; }
@keyframes sws-arrival-safety {
    0%, 75% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}
.sws-signature-scene {
    --scene-ink: #131412;
    --scene-paper: #f3efe6;
    --scene-gold: #d6be94;
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    isolation: isolate;
    contain: layout paint style;
    perspective: 1500px;
    pointer-events: none !important;
    user-select: none;
}
.sws-signature-scene *,
.sws-signature-scene *::before,
.sws-signature-scene *::after { box-sizing: border-box; pointer-events: none !important; }
.sws-signature__veil,
.sws-signature__paper,
.sws-signature__ink {
    position: absolute;
    inset: -2px;
    margin: 0;
    will-change: transform, opacity;
}
.sws-signature__veil { background: var(--scene-ink); opacity: 0; }
.sws-signature__paper { background: var(--scene-paper); box-shadow: -14px 0 32px rgb(0 0 0 / 14%); }
.sws-signature__paper--under { background: #d6cbb7; }
.sws-signature__paper::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(#aa8860, #f3e1bf 45%, #aa8860);
}
.sws-signature__ink { background: var(--scene-ink); border-left: 2px solid #aa8e64; }
.sws-signature__ribbon {
    inset: -2px auto -2px 0;
    width: clamp(28px, 8vw, 110px);
    will-change: transform;
}
.sws-signature__snapshot {
    position: absolute;
    margin: 0;
    overflow: hidden;
    transform-origin: 3% 55%;
    backface-visibility: hidden;
    will-change: transform, opacity;
}
.sws-signature__sheet { background: var(--scene-paper); border-radius: 5px; box-shadow: 16px 20px 48px rgb(0 0 0 / 28%); }
.sws-signature__sleeve { border-radius: 6px; box-shadow: 6px 12px 24px rgb(0 0 0 / 15%); }
.sws-signature__needle {
    position: absolute;
    margin: 0;
    max-width: none;
    transform-origin: 50% 90%;
    will-change: transform, opacity;
}
.sws-signature__needle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #8a5f26 46%, #e6c68a 49%, #fff0c6 50%, #bd965a 52%, #795526 54%);
    clip-path: polygon(50% 2.7%, 52.5% 89%, 52% 94%, 48% 94%, 47.5% 89%);
}
.sws-signature__needle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 90%;
    width: 7%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #fff0c6, #d6b279 40%, #98703c 72%, #bd965a);
    transform: translate(-50%, -50%);
}
.sws-signature__iris {
    position: absolute;
    width: 240px;
    height: 240px;
    margin: 0;
    border: 1px solid var(--scene-gold);
    border-radius: 50%;
    background: var(--scene-ink);
    box-shadow: 0 0 0 1px rgb(214 190 148 / 15%);
    will-change: transform;
}
.sws-signature__iris::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background: repeating-conic-gradient(from -52deg, #d6be94 0deg 1deg, transparent 1deg 12deg);
    mask-image: radial-gradient(transparent 66%, #000 67%, #000 70%, transparent 71%);
    opacity: .55;
}
.sws-signature__record-carrier { position: absolute; left: 0; top: 0; will-change: transform; }
.sws-signature__record {
    position: absolute;
    inset: 0;
}
/* Keep the exact original artwork. Paint the full-resolution asset directly at
   the final diameter instead of enlarging its card-sized navigation snapshot. */
.sws-signature__record,
html[data-sws-wipe]::view-transition-group(sws-signature-record) {
    border-radius: 50%;
    background: #131412 url('../img/suite/project-vinyl.png') center / contain no-repeat;
    box-shadow: 0 8px 26px rgb(0 0 0 / 28%);
    will-change: transform;
}
.sws-signature__record { overflow: hidden; }
.sws-signature__record img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
    html[data-sws-arrival]::before,
    .sws-signature-scene { display: none !important; }
}