/* One shared artboard for the October check-in scene. */
.checkin-scene,
.checkin-scene.is-suitcase-open {
  background: #211923;
}
.checkin-scene .checkin-stage {
  width: min(100vw, calc(100svh * 1672 / 941));
  height: min(100svh, calc(100vw * 941 / 1672));
  container-type: size;
  overflow: hidden;
}
.checkin-scene .checkin-topbar {
  height: 74px;
  border: 0;
  background: linear-gradient(#17132380, transparent);
  box-shadow: none;
  pointer-events: none;
}
.checkin-scene .checkin-logo { width: 140px; }
.checkin-scene .exit-checkin-button { pointer-events: auto; }
.checkin-scene-frame,
.checkin-frame-open,
.checkin-arrival-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.checkin-frame-open { opacity: 0; transform: scale(1); transform-origin: 50% 65%; transition: opacity 450ms ease, transform 650ms ease; }
.is-suitcase-open .checkin-frame-open { opacity: 1; transform: scale(1.17); }
.checkin-arrival-video { z-index: 2; transform-origin: 50% 65%; transition: transform 650ms ease; }
.is-arrival-frozen .checkin-frame-open { opacity: 0; }
.is-arrival-frozen .checkin-arrival-video { transform: scale(1.17); }
.checkin-starlight {
  position: absolute;
  z-index: 3;
  inset: 10% 22% 33%;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 85%, #ffcf7928, #fbeac611 36%, transparent 70%);
  transition: opacity 450ms ease;
}
.is-suitcase-open .checkin-starlight { opacity: 1; }
.checkin-scene .checkin-arrival {
  inset: 0;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}
.checkin-scene .checkin-arrival p {
  position: absolute;
  top: 17%;
  left: 27%;
  width: 46%;
  padding: 15px 12px;
  color: #fff3d6;
  font: 600 clamp(17px, 1.5cqw, 26px)/1.6 var(--title-font);
  text-shadow: 0 2px 8px #151020, 0 0 24px #151020;
}
.checkin-scene .suitcase-lock-hotspot {
  position: absolute;
  top: 56%;
  left: 36%;
  width: 28%;
  height: 19%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}
.suitcase-lock-hotspot span {
  position: absolute;
  bottom: 1%;
  left: 50%;
  width: max-content;
  padding: 7px 15px;
  border-bottom: 1px solid #e8c38e;
  color: #fff4d7;
  background: transparent;
  font-size: clamp(16px, 1.35cqw, 23px);
  text-shadow: 0 1px 4px #251821;
  transform: translateX(-50%);
}
.checkin-scene .fast-checkin-card {
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transform: none;
  pointer-events: none;
}
.checkin-scene .fast-checkin-kicker,
.checkin-scene .fast-checkin-progress,
.checkin-scene .fast-checkin-question,
.checkin-scene .fast-checkin-hint { position: absolute; left: 25%; width: 50%; text-align: center; }
.checkin-scene .fast-checkin-kicker { top: 9%; color: #eed6ac; font-size: clamp(11px, .85cqw, 15px); letter-spacing: .2em; }
.checkin-scene .fast-checkin-progress { top: 12%; display: flex; justify-content: center; gap: 12px; margin: 0; }
.checkin-scene .fast-checkin-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2c314c;
  box-shadow: 0 0 0 3px #1c172b44;
}
.checkin-scene .fast-checkin-mark.is-current,
.checkin-scene .fast-checkin-mark.is-complete { background: #ffe1a5; box-shadow: 0 0 12px #ffdb8c88; }
.checkin-scene .fast-checkin-question {
  top: 14%;
  margin: 0;
  color: #fff6e3;
  font-size: clamp(21px, 2cqw, 34px);
  text-shadow: 0 2px 7px #141223, 0 0 20px #141223;
}
.checkin-scene .fast-checkin-hint { top: 20%; margin: 0; color: #ffe9c4; font-size: clamp(12px, 1cqw, 17px); text-shadow: 0 1px 8px #141223; }
.checkin-scene .fast-checkin-choices {
  position: absolute;
  top: 26%;
  left: 34%;
  width: 32%;
  height: 32%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  column-gap: 6%;
  row-gap: 3%;
  pointer-events: none;
}
.checkin-scene .fast-checkin-choices::before {
  content: "";
  position: absolute;
  inset: -9% -10%;
  border-radius: 40%;
  background: radial-gradient(ellipse, #17243eab 10%, #1c2e4880 48%, #edd1a815 66%, transparent 75%);
  pointer-events: none;
}
.checkin-scene .fast-checkin-choice {
  --arc-rise: 0px;
  --lift: 0px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  gap: 3px;
  border: 0;
  border-radius: 22px;
  background: none;
  box-shadow: none;
  pointer-events: auto;
  transform: translateY(calc(var(--arc-rise) + var(--lift)));
  animation: checkin-object-emerge 600ms both cubic-bezier(.2,.75,.3,1);
  cursor: pointer;
}
.checkin-scene .fast-checkin-choice:nth-child(even) { --arc-rise: -4px; }
.checkin-scene .fast-checkin-choices[data-count="3"] .fast-checkin-choice:last-child { grid-column: 1 / -1; justify-self: center; width: 50%; }
.checkin-scene .fast-checkin-choice::before {
  content: "";
  position: absolute;
  inset: -10% -15%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffe7a942, #b5cef626 35%, transparent 69%);
  pointer-events: none;
}
.checkin-scene .fast-checkin-choice::after {
  content: "✧";
  position: absolute;
  top: 6%;
  right: 8%;
  color: #ffe7a8;
  font-size: clamp(14px, 1.35cqw, 22px);
  text-shadow: 0 0 9px #ffe7a8;
  pointer-events: none;
}
.checkin-scene .fast-checkin-choice:hover,
.checkin-scene .fast-checkin-choice:focus-visible,
.checkin-scene .fast-checkin-choice.is-picked { --lift: -5px; background: none; box-shadow: none; }
.checkin-scene .suitcase-object {
  width: clamp(58px, 6.3cqw, 106px);
  height: clamp(58px, 6.3cqw, 106px);
  filter: drop-shadow(0 0 11px #ffe4ad85) drop-shadow(0 7px 8px #16142677);
}
.checkin-scene .suitcase-object-label {
  width: max-content;
  max-width: 100%;
  min-height: 0;
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px solid #d8b47f99;
  border-radius: 3px;
  background: #f4e7ca;
  box-shadow: none;
  color: #523e2d;
  font-size: clamp(13px, 1.05cqw, 18px);
  line-height: 1.4;
}
.checkin-scene .fast-checkin-actions { position: absolute; left: 31%; bottom: 16%; margin: 0; pointer-events: auto; }
.checkin-scene .checkin-luggage-tag {
  min-height: 44px;
  padding: 8px 22px 8px 28px;
  border: 1px solid #d4b98d;
  border-radius: 4px 13px 13px 4px;
  background: #f5e5c4;
  color: #624b37;
  box-shadow: 0 4px 10px #17132155;
  font-size: clamp(14px, 1.05cqw, 18px);
}
.checkin-luggage-tag::before { content: ""; position: absolute; left: 10px; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: #a18869; }
.checkin-scene .fast-checkin-detail {
  position: absolute;
  top: 29%;
  left: 22%;
  width: 39%;
  height: auto;
  aspect-ratio: 1312 / 1199;
  max-height: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: visible;
  background: none;
  border-radius: 0;
  pointer-events: auto;
}
.hotel-notepad-art { display: block; width: 100%; height: auto; cursor: text; }
.hotel-notepad-writing {
  position: absolute;
  left: 22%;
  top: 33%;
  width: 52%;
  height: 42%;
  transform: rotate(-17deg);
  display: flex;
  flex-direction: column;
}
.checkin-scene .hotel-notepad-writing label { color: #56402d; font-size: clamp(16px, 1.25cqw, 21px); }
.checkin-scene .hotel-notepad-writing label span { margin-left: 8px; font-size: 12px; color: #826b54; }
.checkin-scene .hotel-notepad-writing textarea {
  flex: 1;
  width: 100%;
  min-height: 64px;
  margin-top: 8px;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #4e3d30;
  resize: none;
  font: 400 clamp(16px, 1.2cqw, 20px)/1.6 var(--title-font);
}
.hotel-notepad-writing textarea::placeholder { color: #947e69; }
.checkin-scene .hotel-notepad-writing textarea:focus-visible { outline: none; box-shadow: none; }
.hotel-notepad-writing:focus-within label { text-decoration: underline; text-underline-offset: 5px; }
.checkin-scene .fast-checkin-input-hint { margin: 3px 0 0; color: #826b54; font-size: clamp(11px, .85cqw, 14px); line-height: 1.5; }
.checkin-scene .fast-checkin-review {
  position: absolute;
  top: 29%;
  left: 72%;
  width: 24%;
  max-height: 22%;
  margin: 0;
  padding: 12px 15px;
  background: #201b2cd9;
  color: #fff0d3;
  border: 1px solid #dfba7740;
  border-radius: 3px;
  overflow: auto;
  pointer-events: auto;
  font-size: clamp(12px, 1cqw, 17px);
}
.checkin-scene .fast-checkin-review ul { padding: 0; list-style: none; }
.checkin-scene .fast-checkin-review-note { color: #dcc7a6; font-size: clamp(11px, .85cqw, 14px); }
.checkin-scene .room-key-offer {
  position: absolute;
  z-index: 8;
  top: 53%;
  /* Keep the sleeve's cut edge outside the scene even while the offer tilts. */
  right: -2%;
  width: 44%;
  aspect-ratio: 1672 / 941;
  pointer-events: none;
  animation: checkin-key-offer 650ms both ease-out;
}
.room-key-presentation {
  position: absolute;
  inset: 0;
  transform-origin: 100% 48%;
  transform: translateY(0) rotate(0deg);
  transition: transform 260ms ease;
}
.room-key-presentation > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 16px #1b142955); }
@media (hover: hover) and (pointer: fine) {
  .room-key-offer:has(.complete-checkin-button:hover) .room-key-presentation,
  .room-key-offer:focus-within .room-key-presentation { transform: translateY(4px) rotate(-3deg); }
}
.checkin-scene .room-key-offer .complete-checkin-button {
  position: absolute;
  inset: 28% auto auto 23%;
  width: 39%;
  height: 35%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  color: #624a30;
  filter: none;
  transform: rotate(2deg);
  pointer-events: auto;
  font: 700 clamp(16px, 1.55cqw, 25px)/1.5 var(--title-font);
  cursor: pointer;
}
.complete-checkin-button small { display: block; margin-top: 4px; font-size: .6em; font-weight: 500; }
.checkin-scene .room-key-offer .complete-checkin-button:hover { color: #8a5527; filter: none; transform: rotate(2deg); }
.checkin-scene button:focus-visible { outline: 2px solid #ffde99; outline-offset: 5px; }
.checkin-scene textarea:focus-visible { outline: 2px solid #99723d; outline-offset: 4px; }
.is-ready-for-key .checkin-starlight { opacity: 0; }
.is-ready-for-key .checkin-art::after { content: ""; position: absolute; z-index: 3; inset: 0; background: #16122440; }
.is-ready-for-key .fast-checkin-actions { left: 20%; bottom: 12%; }
@keyframes checkin-object-emerge {
  from { opacity: 0; transform: translateY(65px) scale(.7); }
  to { opacity: 1; transform: translateY(calc(var(--arc-rise) + var(--lift))) scale(1); }
}
@keyframes checkin-key-offer {
  from { opacity: 1; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}
@media (max-width: 700px) {
  .checkin-scene .checkin-stage { width: 100vw; height: 100svh; }
  .checkin-scene .checkin-topbar { height: 65px; padding: 10px 14px; }
  .checkin-scene .checkin-logo { width: 104px; }
  .checkin-scene .exit-checkin-button { top: 12px; right: 12px; padding: 5px 10px; font-size: 13px; }
  .checkin-scene .checkin-arrival p { left: 10%; top: 19%; width: 80%; font-size: 20px; }
  .checkin-scene .suitcase-lock-hotspot { top: 55%; left: 17%; width: 66%; height: 22%; }
  .checkin-scene .fast-checkin-kicker { top: 11%; left: 8%; width: 84%; font-size: 11px; }
  .checkin-scene .fast-checkin-progress { top: 15%; left: 8%; width: 84%; }
  .checkin-scene .fast-checkin-question { top: 18%; left: 6%; width: 88%; font-size: 24px; }
  .checkin-scene .fast-checkin-hint { top: 24%; left: 10%; width: 80%; font-size: 13px; }
  .is-suitcase-open .checkin-frame-open { transform: scale(1.06); transform-origin: 50% 75%; }
  .is-arrival-frozen .checkin-arrival-video { transform: scale(1.06); transform-origin: 50% 75%; }
  .checkin-scene .fast-checkin-choices { top: 31%; left: 14%; width: 72%; height: 29%; column-gap: 6%; row-gap: 3%; }
  .checkin-scene .suitcase-object { width: 80px; height: 80px; }
  .checkin-scene .suitcase-object-label { font-size: 14px; padding: 3px 7px; }
  .checkin-scene .fast-checkin-actions { left: 10%; bottom: 12%; }
  .checkin-scene .checkin-luggage-tag { font-size: 14px; }
  .checkin-scene .fast-checkin-detail { top: 29%; left: 2%; width: 82%; }
  .checkin-scene .hotel-notepad-writing label { font-size: 17px; }
  .checkin-scene .hotel-notepad-writing textarea { font-size: 16px; }
  .checkin-scene .fast-checkin-input-hint { font-size: 11px; }
  .checkin-scene .fast-checkin-review { top: 67%; left: 8%; width: 58%; max-height: 12%; padding: 7px 10px; font-size: 12px; }
  .checkin-scene .fast-checkin-review > p,
  .checkin-scene .fast-checkin-review-note { display: none; }
  .checkin-scene .fast-checkin-review ul { margin: 0; }
  .checkin-scene .room-key-offer { top: 78%; width: 88%; }
  .checkin-scene .room-key-offer .complete-checkin-button { font-size: 18px; }
  .is-ready-for-key .fast-checkin-actions { left: 8%; bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .checkin-scene *, .checkin-scene *::before, .checkin-scene *::after { animation: none !important; transition: none !important; }
}