/* A circular paper annulus: a quiet opening holds the stationary gold keycap. */
.cover{--ring-size:min(92vw,86svh,840px);isolation:isolate;min-height:320px;background:#d4cbb9}
.cover-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 44%,#f6f0e4 0%,#e7dfd0 47%,#c4b8a3 100%)}
.cover-backdrop:after{content:'';position:absolute;inset:0;opacity:.13;background-image:url('./art/cover.webp');background-size:cover;filter:blur(32px);transform:scale(1.1)}
.paper-stage{position:absolute;left:50%;top:50%;width:var(--ring-size);height:var(--ring-size);transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 10px 12px #493b2526)}
.paper-stage:before{content:'';position:absolute;inset:24.7%;border-radius:50%;background:radial-gradient(circle,#f6f0e4,#e8decd);box-shadow:inset 0 2px 12px #4b3c2112}
.paper-ring{position:absolute;inset:0;border-radius:50%;mask-image:radial-gradient(circle closest-side,transparent 51%,#000 51.6%,#000 98.7%,transparent 99.3%);-webkit-mask-image:radial-gradient(circle closest-side,transparent 51%,#000 51.6%,#000 98.7%,transparent 99.3%)}
.paper-rotor,.paper-bank{position:absolute;inset:0;transform-origin:center}
.paper-bank{z-index:0}.paper-bank.is-current{z-index:1}
.paper-sheet{position:absolute;left:50%;top:50%;width:40%;height:28%;z-index:var(--layer);padding:3px;background:#f3eddf;border:1px solid #fff8e8ad;box-shadow:1px 2px 0 #a99c8170,3px 5px 10px #33271d30;opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--angle) - 24deg)) translateY(calc(var(--ring-size) * -.39)) scale(1.07);transition:transform 900ms cubic-bezier(.22,.72,.22,1),opacity 650ms ease}
.paper-sheet.is-placed{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(var(--ring-size) * -.365)) scale(1)}
.paper-face{position:relative;width:100%;height:100%;overflow:hidden;background:#e7dfd0}
.paper-face img{display:block;height:100%;width:230%;max-width:none;object-fit:cover;object-position:left center}
.paper-face:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #fff8e842;background:linear-gradient(125deg,#ffffff0d,transparent 50%,#37271709)}
.cover-shade{z-index:20;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,#30251d09 100%)}
.cover .cover-button{z-index:21}
.cover .cover-button{
  top:50%;left:50%;bottom:auto;transform:translate(-50%,-50%);
  width:354px;min-width:0;min-height:86px;padding:23px 25px 25px 29px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border:1px solid #b9ad796b;border-radius:17px;isolation:isolate;
  background:linear-gradient(164deg,#426456 0%,#284f40 30%,#163d30 70%,#214b3a 100%);
  box-shadow:inset 0 1px 0 #e3e5bf70,inset 1px 0 0 #b6c7ac24,inset 0 -2px 2px #071e1a8c,0 5px 0 #102b23,0 6px 0 #b4a37770,0 10px 14px #11241c33,0 20px 36px #12261d33;
  color:#ecd79a;font:600 25px/1.25 Georgia,'Times New Roman',serif;letter-spacing:.15px;text-shadow:none;
  transition:transform .22s ease,box-shadow .22s ease;
}
.cover .cover-button:before{content:'';position:absolute;inset:5px;border:1px solid #e1ca8b26;border-radius:12px;pointer-events:none;box-shadow:inset 0 1px 0 #d6e3c70a}
.cover .cover-button:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,#ffffff08,transparent 42%,#e4c88807 70%,transparent);opacity:.8}
.cover .cover-button-label{
  position:relative;z-index:1;white-space:nowrap;font:inherit;color:#ecd79a;
  background:linear-gradient(172deg,#e8ce8a 0%,#fff1bf 22%,#c59d52 40%,#e4c376 49%,#fff0b0 54%,#dfbd73 65%,#bc9148 82%,#e9ce8c 100%);
  background-size:100% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px .25px #fff3bd66) drop-shadow(0 1px .3px #624616) drop-shadow(0 2px .3px #0c261ce6);
}
.cover .cover-button-icon{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:28px;height:30px;border:0;border-radius:0;background:none;color:#e4c884;filter:drop-shadow(0 -1px .3px #fff1b85c) drop-shadow(0 2px .4px #091f17);transition:transform .22s ease}
.cover .cover-button-icon svg{display:block;width:25px;height:25px}
@media(hover:hover){
  .cover .cover-button:hover{transform:translate(-50%,calc(-50% - 2px));background:linear-gradient(164deg,#4b6f5e 0%,#305846 30%,#1b4434 70%,#2c5441 100%);box-shadow:inset 0 1px 0 #e3e5bf80,inset 0 -2px 2px #071e1a8c,0 6px 0 #102b23,0 7px 0 #b4a37770,0 14px 20px #11241c33,0 24px 40px #12261d33}
  .cover .cover-button:hover .cover-button-icon{transform:translateX(2px)}
}
.cover .cover-button:active{transform:translate(-50%,calc(-50% + 4px));box-shadow:inset 0 1px 0 #e3e5bf60,inset 0 -1px 2px #071e1a8c,0 1px 0 #102b23,0 2px 0 #b4a37770,0 6px 14px #12261d33}
.cover .cover-button:focus-visible{outline:2px solid #fff0bf;outline-offset:6px}

/* Fit the complete keycap inside the empty centre at every viewport size. */
.cover .cover-button{width:calc(var(--ring-size) * .445);min-height:clamp(50px,calc(var(--ring-size) * .115),86px);padding:clamp(9px,1.7vw,21px) clamp(10px,1.8vw,25px);gap:clamp(6px,1vw,14px);font-size:clamp(12px,calc(var(--ring-size) * .033),25px);border-radius:clamp(10px,1.4vw,17px)}
.cover .cover-button-icon{width:clamp(16px,2.2vw,28px);height:clamp(20px,2.6vw,30px)}
.cover .cover-button-icon svg{width:100%;height:auto}
.cover .cover-button:before{inset:4px;border-radius:inherit}
.paper-stage.is-static .paper-sheet,.paper-bank.is-rewinding .paper-sheet{transition:none}
@media(max-width:640px){.cover{--ring-size:min(96vw,84svh)}.cover .cover-button{padding:10px;letter-spacing:0}.paper-sheet{padding:2px}}
@media(prefers-reduced-motion:reduce){.paper-sheet,.cover .cover-button,.cover .cover-button-icon{transition:none}.cover .cover-button:hover,.cover .cover-button:active{transform:translate(-50%,-50%)}}
@media(forced-colors:active){.cover .cover-button{border:2px solid ButtonText;background:ButtonFace;box-shadow:none}.cover .cover-button-label{background:none;-webkit-text-fill-color:ButtonText;color:ButtonText;filter:none}.cover .cover-button-icon{color:ButtonText;filter:none}}
.paper-sheet:nth-child(1){--angle:0deg;--layer:0}
.paper-sheet:nth-child(2){--angle:30deg;--layer:1}
.paper-sheet:nth-child(3){--angle:60deg;--layer:2}
.paper-sheet:nth-child(4){--angle:90deg;--layer:3}
.paper-sheet:nth-child(5){--angle:120deg;--layer:4}
.paper-sheet:nth-child(6){--angle:150deg;--layer:5}
.paper-sheet:nth-child(7){--angle:180deg;--layer:6}
.paper-sheet:nth-child(8){--angle:210deg;--layer:7}
.paper-sheet:nth-child(9){--angle:240deg;--layer:8}
.paper-sheet:nth-child(10){--angle:270deg;--layer:9}
.paper-sheet:nth-child(11){--angle:300deg;--layer:10}
.paper-sheet:nth-child(12){--angle:330deg;--layer:11}