/* A touch halo around the ruby. Instructions stay close to the artwork. */
.sg-gate,.entry-veil {
  --keepsake-size: min(60vw,34svh,330px);
  --keepsake-floor: 78svh;
  --keepsake-center: calc(var(--keepsake-floor) - var(--keepsake-size) * .296875);
  /* The single rise-and-approach path finishes safely above the open lid. */
  --ring-clearance: clamp(14px,2.4svh,24px);
  --ring-rise-y: calc(var(--keepsake-size) * -.916845 - var(--ring-clearance));
  /* Projected diamond table after the final modeled turn, at ring scale 1.9. */
  --sg-light-x: calc(50vw - var(--keepsake-size) * .10150118);
  --sg-light-y: calc(var(--keepsake-floor) - var(--keepsake-size) * 1.69075019 - var(--ring-clearance));
}
.sg-gate .sg-object { top: var(--keepsake-center); width: var(--keepsake-size); }
.sg-gate .sg-world { transform-origin: 50% 39svh; }
.sg-pull-guide {
  position: absolute; z-index: 7; left: 44%; top: 33.3%;
  width: 24%; aspect-ratio: 1.5; border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-16deg);
  pointer-events: none; opacity: 1;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.sg-ruby-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,244,205,.94);
  box-shadow: 0 0 0 .6px rgba(126,83,30,.5); opacity: 0;
  animation: sg-ruby-touch 2800ms cubic-bezier(.2,.6,.3,1) infinite;
}
.sg-ruby-pulse + .sg-ruby-pulse { animation-delay: 1400ms; }
.sg-object:focus-visible .sg-pull-guide {
  outline: 1px solid rgba(255,244,205,.9); outline-offset: 0;
}
@keyframes sg-ruby-touch {
  0% { opacity: 0; transform: scale(.8); }
  18% { opacity: .9; }
  75%,100% { opacity: 0; transform: scale(1.7); }
}
.sg-gate .sg-actions {
  top: calc(var(--keepsake-floor) + clamp(12px,2svh,20px));
  bottom: auto; left: 20px; right: 20px; color: #704b27; pointer-events: none;
}
.sg-pull-arrow {
  display: block; width: max-content; margin: 0 auto 9px;
  font: 27px/1 'Cormorant Garamond',Georgia,serif; color: #976d35;
  animation: sg-lift-cue 2600ms ease-in-out infinite;
}
.sg-prompt {
  margin: 0;
  font: italic 500 clamp(22px,2.8svh,27px)/1.2 'Cormorant Garamond',Georgia,serif;
  letter-spacing: .005em; text-shadow: 0 1px 7px rgba(255,249,231,.65);
}
.sg-gate .sg-hint {
  margin: 8px 0 0; font: 400 11px/1.45 'Jost',sans-serif;
  letter-spacing: .035em; text-transform: none; color: #735a43;
}
.sg-gate .sg-status { margin-top: 8px; min-height: 16px; }
.sg-object.sg-dragging .sg-pull-guide,
.sg-gate.sg-opening .sg-pull-guide,
.sg-object[aria-disabled='true'] .sg-pull-guide {
  opacity: 0; visibility: hidden; transition-duration: 100ms;
}
.sg-gate:has(.sg-dragging) .sg-pull-arrow,
.sg-gate.sg-opening .sg-pull-arrow { animation-play-state: paused; visibility: hidden; }
.sg-object.sg-dragging .sg-ruby-pulse,
.sg-gate.sg-opening .sg-ruby-pulse { animation-play-state: paused; }
@keyframes sg-lift-cue {
  0%,100% { transform: translateY(2px); opacity: .45; }
  55% { transform: translateY(-6px); opacity: .95; }
}
@media (max-height:680px) and (orientation:portrait) {
  .sg-gate,.entry-veil { --keepsake-floor: 75svh; }
  .sg-gate .sg-actions { top: calc(var(--keepsake-floor) + 12px); }
  .sg-pull-arrow { font-size: 23px; margin-bottom: 6px; }
  .sg-prompt { font-size: 21px; }
  .sg-gate .sg-hint { font-size: 10px; margin-top: 6px; }
}
@media (max-height:600px) and (orientation:landscape) {
  .sg-gate,.entry-veil { --keepsake-floor: 73svh; --keepsake-size: min(34vw,32svh,260px); }
  .sg-gate .sg-actions { top: calc(var(--keepsake-floor) + 8px); }
  .sg-pull-arrow { font-size: 19px; margin-bottom: 3px; }
  .sg-prompt { font-size: 19px; }
  .sg-gate .sg-hint { font-size: 9px; margin-top: 4px; }
  .sg-gate .sg-status { margin-top: 3px; }
}
@media (max-height:540px) and (orientation:portrait) {
  .sg-gate,.entry-veil { --keepsake-floor: 71svh; }
}
@media (max-height:360px) and (orientation:landscape) {
  .sg-gate,.entry-veil { --keepsake-floor: 69svh; }
}
@media (prefers-reduced-motion:reduce) {
  .sg-pull-guide,.sg-ruby-pulse,.sg-pull-arrow { animation: none; transition: none; }
  .sg-ruby-pulse:first-child { opacity: .65; }
  .sg-ruby-pulse + .sg-ruby-pulse { display: none; }
}