/* Support page: OcuClaw's glasses character (issue #105) and the door layout it needs. */

/* The rig is positioned inside <main>, in main's own coordinates. */
main{position:relative}

/* Headroom above each door so he can rise from behind its top edge. */
.doors{margin-top:124px}
@media(max-width:860px){.doors{row-gap:86px;margin-top:84px}}

/* The door he stands on must not move under him: keep the glow, drop the lift. */
.door:hover{transform:none}
.door:focus-within,.door.is-on{border-color:rgba(77,213,138,0.4)}
.door:focus-within::before,.door:focus-within::after,.door.is-on::before,.door.is-on::after{opacity:1}

/* The middle door's two buttons wrap onto their own rows when the card is narrow. */
.door .act--split{flex-wrap:wrap}
.door .act--split .btn{flex:1 1 auto}

/* Keep the H1 clear of him beside it on wide screens. */
@media(min-width:861px){.hero h1{max-width:min(18ch,calc(100% - 330px))}}

/* Rig: its bottom edge is the line he stands behind; overflow clips below it. */
.speck-rig{position:absolute;left:0;top:0;z-index:5;overflow:hidden;pointer-events:none;will-change:transform;
  transition:transform .38s cubic-bezier(.22,.8,.32,1)}
.speck-rig.is-snap{transition:none}
.speck-rig__bob{transform:translateY(0);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.speck-rig.is-travel .speck-rig__bob{transform:translateY(52%);transition:transform .16s ease-in}
.speck-rig__bob.is-hidden{transform:translateY(101%);transition:none}

/* Reduced motion: still frames, nothing travels. */
html.speck-reduced .speck-rig,html.speck-reduced .speck-rig__bob{transition:none}
html.speck-reduced .speck-rig.is-travel .speck-rig__bob,html.speck-reduced .speck-rig__bob.is-hidden{transform:none}