/* The invitation: Tahoe glass, MacBook keys. Depicted-world values. */

.summon {
  position: absolute; left: 50%; top: 612px;
  translate: -50% 0;
  z-index: 40;
}
.sm-hit {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  padding: 16px 30px 16px 16px;
  border: 0; border-radius: 34px;
  font: inherit; color: rgba(0,0,0,0.86); text-align: left;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.46));
  -webkit-backdrop-filter: blur(26px) saturate(1.7);
  backdrop-filter: blur(26px) saturate(1.7);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.9),
    inset 0 -0.5px 0 rgba(255,255,255,0.4),
    0 0 0 0.5px rgba(0,0,0,0.1),
    0 18px 50px -14px rgba(0,0,0,0.38),
    0 4px 12px -4px rgba(0,0,0,0.12);
  transition: scale 180ms cubic-bezier(.3,0,.2,1), box-shadow 180ms;
}
.sm-hit:hover { scale: 1.012; }
.sm-hit:active { scale: 0.99; }
.sm-hit:focus-visible { outline: 3px solid rgba(10,108,245,0.55); outline-offset: 3px; }

.sm-keys { display: flex; align-items: center; gap: 10px; }
.sm-plus { font-size: 17px; font-weight: 500; color: rgba(0,0,0,0.38); }

/* MacBook keys: dark anodised caps, a lit top edge, legends in two corners */
.sm-key {
  position: relative; display: block;
  width: 84px; height: 60px; box-sizing: border-box;
  border-radius: 9px;
  background: linear-gradient(180deg, #2a2a2c 0%, #1b1b1d 60%, #161618 100%);
  box-shadow:
    inset 0 0.8px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 0 0 0.5px rgba(0,0,0,0.55),
    0 2.5px 0 #0b0b0c,
    0 5px 12px -3px rgba(0,0,0,0.45);
  color: #d8d8da;
  transition: translate 90ms cubic-bezier(.3,0,.2,1), box-shadow 90ms cubic-bezier(.3,0,.2,1), background 90ms;
}
.sm-sym { position: absolute; top: 7px; font-size: 14px; line-height: 1; font-weight: 400; }
.sm-word { position: absolute; bottom: 8px; font-size: 10.5px; line-height: 1; font-weight: 400; letter-spacing: 0.1px; }
.sm-l .sm-sym { right: 9px; } .sm-l .sm-word { left: 9px; }
.sm-r .sm-sym { left: 9px; } .sm-r .sm-word { right: 9px; }
.sm-key.is-down {
  translate: 0 2px;
  background: linear-gradient(180deg, #232325 0%, #19191b 100%);
  box-shadow:
    inset 0 0.8px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 0 0 0.5px rgba(0,0,0,0.55),
    0 0.5px 0 #0b0b0c,
    0 2px 5px -2px rgba(0,0,0,0.5);
}

.sm-copy { display: grid; gap: 3px; }
.sm-copy b { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.sm-sub { font-size: 13px; color: rgba(0,0,0,0.55); }
.sm-touch { display: none; }
@media (hover: none) { .sm-touch { display: inline; } }

/* hold progress: a hairline that runs around the panel while both keys are down */
.sm-ring {
  position: absolute; inset: -3px; border-radius: 37px; pointer-events: none;
  --p: 0;
  background: conic-gradient(from -90deg, rgba(10,108,245,0.9) calc(var(--p) * 1turn), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding: 2px; opacity: 0;
}
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.summon.is-holding .sm-ring { opacity: 1; --p: 1; transition: --p 380ms linear, opacity 80ms; }
.summon.is-fired .sm-hit { transition: opacity 260ms ease-out, scale 260ms ease-out; opacity: 0; scale: 0.96; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sm-hit, .sm-key { transition: none; }
  .summon.is-holding .sm-ring { transition: opacity 80ms; }
}