/* YOBS interaction vocabulary: ink fills, moving arrows, quiet editorial lines. */
:root{--hover-ease:cubic-bezier(.16,1,.3,1);--hover-fast:180ms;--hover-sweep:380ms}
button:disabled{cursor:default;opacity:.35}
.skip:focus{top:16px;left:16px;padding:14px 20px;background:var(--paper);color:var(--black);text-decoration:none}

/* The reveal owns the outer CTA. Its inner ink responds without the reveal delay. */
.cta,.product-link{isolation:isolate;overflow:hidden;--action-fill:var(--paper);--action-idle-ink:var(--paper);--action-hover-ink:var(--black)}
.cta::before,.product-link::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--action-fill);transform:scaleX(0);transform-origin:right center;transition:transform var(--hover-sweep) var(--hover-ease)}
.action-label,.action-arrow{position:relative;z-index:1}
.action-label{color:var(--action-idle-ink);transition:color var(--hover-fast) ease,transform var(--hover-fast) ease}
/* Centre Geniral's capital strokes optically, independently of press motion. */
.cta .action-label{top:.1em}
.action-arrow{transition:filter var(--hover-fast) ease,color var(--hover-fast) ease,transform var(--hover-sweep) var(--hover-ease)}
.cta .action-arrow{transform:translateX(0);filter:brightness(1)}
.product-link{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--paper);--action-fill:var(--black);--action-idle-ink:var(--black);--action-hover-ink:var(--paper)}
.product-link .action-arrow{font-size:22px;line-height:1;color:var(--action-idle-ink)}
.cta:focus-visible::before,.product-link:focus-visible::before,.cta:active::before,.product-link:active::before{transform:scaleX(1);transform-origin:left center}
.cta:focus-visible .action-label,.product-link:focus-visible .action-label,.product-link:focus-visible .action-arrow,.cta:active .action-label,.product-link:active .action-label,.product-link:active .action-arrow{color:var(--action-hover-ink)}
.cta:focus-visible .action-arrow,.cta:active .action-arrow{filter:brightness(0)}
.cta:active .action-label,.product-link:active .action-label{transform:translateY(1px)}

.header nav button{position:relative}
.header nav button::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 280ms var(--hover-ease);pointer-events:none}
.header nav button:focus-visible::after{transform:scaleX(1);transform-origin:left}
.header .brand::before{content:'';position:absolute;inset:4px;border:1px solid currentColor;opacity:0;transform:scale(.9);transition:opacity var(--hover-fast) ease,transform 280ms var(--hover-ease);pointer-events:none}
.header .brand:focus-visible::before,.header.menu-open .brand::before{opacity:1;transform:scale(1)}

/* Keep card hit areas and typography still; only the photograph and its label move. */
.cards button{transform:none;transition:none}
.card-photo{position:relative;isolation:isolate}
.card-photo img{transform:scale(1);transition:transform 750ms var(--hover-ease)}
.card-hover{position:absolute;z-index:1;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px 12px;background:var(--black);color:var(--paper);font:400 36px/1 Geniral;transform:translateY(101%);transition:transform var(--hover-sweep) var(--hover-ease);pointer-events:none}
.card-hover i{font:300 25px/1 Plex,monospace;transform:translateX(-8px);transition:transform 450ms var(--hover-ease)}
.cards button:focus-visible .card-photo img{transform:scale(1.055)}
.cards button:focus-visible .card-hover,.cards button:focus-visible .card-hover i{transform:translate(0)}
.cards button:active .card-photo img{filter:brightness(.92)}

/* The existing scene frame responds to both photographs without moving their crops. */
.character > button.photo,.character > button.detail{appearance:none;padding:0;margin:0;border:0;line-height:0;text-align:inherit;cursor:pointer}
/* Buttons centre their contents; anchor the image to the original frame origin. */
.character > button.photo > img,.character > button.detail > img{top:0}
.character > button.detail{pointer-events:auto}
.character > button.photo:focus-visible{outline:none}
.character > .outline{border:0;--frame-growth:clamp(8px,calc(10 * var(--u)),14px)}
.character > .outline::before{content:'';position:absolute;inset:0;border:1px solid var(--paper);pointer-events:none;transition:inset 500ms var(--hover-ease)}
.character:has(> button.photo:focus-visible,> button.detail:focus-visible) > .outline::before{inset:calc(-1 * var(--frame-growth))}

/* Ticks retain their centres and the progress line never changes its geometry. */
.progress .track button{width:40px;height:44px}
.progress .track button::after{left:calc(50% - 1px);top:calc(50% - 4.5px);height:9px;transform:scaleY(1);transition:transform 220ms var(--hover-ease),opacity 220ms ease;opacity:.65}
.progress .track button::before{content:attr(data-step);position:absolute;left:50%;bottom:calc(50% + 13px);font:300 14px/1 Plex,monospace;transform:translate(-50%,4px);opacity:0;transition:opacity var(--hover-fast) ease,transform 220ms var(--hover-ease);pointer-events:none}
.progress .track button[aria-current="step"]::after{transform:scaleY(1.65);opacity:1}
.progress .track button:focus-visible::after{transform:scaleY(2.3);opacity:1}
.progress .track button:focus-visible::before{opacity:1;transform:translate(-50%,0)}
.progress #next,.progress #previous{position:relative}
.progress #next::after,.text-arrow::after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 280ms var(--hover-ease)}
.progress #next:focus-visible::after,.text-arrow:focus-visible::after{transform:scaleX(1);transform-origin:left}
.progress-arrow{display:inline-block;transition:transform 280ms var(--hover-ease)}
.progress #next:focus-visible .progress-arrow{transform:translateX(4px)}
.text-arrow{position:relative}

.company a[href]{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:left bottom;background-size:0 2px;transition:background-size 320ms var(--hover-ease),color 200ms ease}
.company a[href]:hover{text-decoration:none}
.company-socials a{justify-self:start}
.company a[href]:focus-visible{background-size:100% 2px;color:var(--paper)}

dialog .close{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--paper);transition:background var(--hover-fast) ease,color var(--hover-fast) ease}
.close-glyph{display:block;transition:transform 320ms var(--hover-ease)}
dialog .close:focus-visible{background:var(--paper);color:var(--black)}
dialog .close:active .close-glyph{transform:scale(.85)}

@media(hover:hover) and (pointer:fine){
 .character:has(> button.photo:hover,> button.detail:hover) > .outline::before{inset:calc(-1 * var(--frame-growth))}
 .cta:hover::before,.product-link:hover::before{transform:scaleX(1);transform-origin:left center}
 .cta:hover .action-label,.product-link:hover .action-label,.product-link:hover .action-arrow{color:var(--action-hover-ink)}
 .cta:hover .action-arrow{filter:brightness(0);animation:arrow-pass 440ms var(--hover-ease)}
 .product-link:hover .action-arrow{transform:translate(3px,-3px)}
 .header nav button:hover::after{transform:scaleX(1);transform-origin:left}
 .header .brand:hover::before{opacity:1;transform:scale(1)}
 .cards button:hover .card-photo img{transform:scale(1.055)}
 .cards button:hover .card-hover,.cards button:hover .card-hover i{transform:translate(0)}
 .progress .track button:hover::after{transform:scaleY(2.3);opacity:1}
 .progress .track button:hover::before{opacity:1;transform:translate(-50%,0)}
 .progress #next:hover::after,.text-arrow:hover::after{transform:scaleX(1);transform-origin:left}
 .progress #next:hover .progress-arrow{transform:translateX(4px)}
 .progress #previous:not(:disabled):hover{color:var(--muted)}
 .company a[href]:hover{background-size:100% 2px;color:var(--paper)}
 dialog .close:hover{background:var(--paper);color:var(--black)}
 dialog .close:hover .close-glyph{transform:rotate(90deg)}
}
@keyframes arrow-pass{0%{transform:translateX(0);opacity:1}42%{transform:translateX(18px);opacity:0}43%{transform:translateX(-18px);opacity:0}100%{transform:translateX(0);opacity:1}}
@media(max-width:700px){
 /* Keep the existing vertical clearance on short touch screens. */
 .character:has(> button.photo:focus-visible,> button.detail:focus-visible) > .outline::before{inset:0 calc(-1 * var(--frame-growth))}
 .header nav button::after{bottom:0}
 .progress .track button{width:24px;height:36px}
 .card-hover{padding:12px;font-size:32px}
 .card-hover i{font-size:21px}
}
@media(max-width:700px) and (hover:hover) and (pointer:fine){
 .character:has(> button.photo:hover,> button.detail:hover) > .outline::before{inset:0 calc(-1 * var(--frame-growth))}
}
@media(prefers-reduced-motion:reduce){
 .character > .outline::before{transition:none}
 .cards button:hover .card-photo img,.cards button:focus-visible .card-photo img{transform:none}
 .cta .action-arrow,.product-link .action-arrow,.progress-arrow,.close-glyph,.action-label{animation:none!important;transform:none!important}
}