/* Coordinated room discovery cues.
   The photographed screens remain untouched. The room explains itself quickly:
   all four destinations appear together, then the labels get out of the way.
   The hotspot circles remain visible so the room never becomes a set of hidden links. */

.hotspot-tv .marker-label,
.hotspot-computer .marker-label,
.hotspot-board .marker-label,
.hotspot-games .marker-label{
  display:block !important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

/* Idle state: keep a quiet, recognisable button on every interactive object.
   Labels are transient, but the circles remain so a first-time visitor can tell
   immediately that the TV, computer, board and PlayStation are clickable. */
.hotspot-tv .marker-ring,
.hotspot-computer .marker-ring,
.hotspot-board .marker-ring,
.hotspot-games .marker-ring{
  opacity:.78;
  transform:scale(1);
  background:rgba(21,26,24,.10);
  border-color:rgba(244,239,219,.88);
  box-shadow:0 0 0 3px rgba(255,244,213,.05),0 0 11px rgba(255,244,213,.19);
  transition:opacity .14s ease,transform .18s ease,background .18s ease,box-shadow .18s ease;
}

.hotspot.is-cued .marker-label,
.hotspot:hover .marker-label,
.hotspot:focus-visible .marker-label,
.room-cue-overview .hotspot .marker-label{
  visibility:visible;
  opacity:1;
}

.hotspot.is-cued .marker-ring,
.hotspot:hover .marker-ring,
.hotspot:focus-visible .marker-ring,
.room-cue-overview .hotspot .marker-ring{
  opacity:1;
}

.hotspot.is-cued .interaction-marker,
.room-cue-overview .interaction-marker{
  z-index:4;
}

.hotspot.is-cued .marker-ring{
  background:#e7ba73;
  border-color:#fff0c8;
  transform:scale(1.14);
  box-shadow:0 0 0 6px rgba(231,186,115,.18),0 0 22px rgba(231,186,115,.68);
  animation:room-cue-ring .46s cubic-bezier(.2,.75,.2,1) both;
}

/* First impression: all four destinations light together immediately. */
.room-cue-overview .hotspot .marker-ring{
  opacity:.98;
  transform:scale(1.02);
  background:#e7ba73;
  border-color:#fff0c8;
  box-shadow:0 0 0 5px rgba(231,186,115,.14),0 0 18px rgba(231,186,115,.56);
  animation:room-overview-ring .5s cubic-bezier(.2,.75,.2,1) both;
}
.room-cue-overview .hotspot .marker-label{
  opacity:.98;
}

@keyframes room-cue-ring{
  0%{background:rgba(21,26,24,.13);transform:scale(.9);box-shadow:0 0 8px rgba(255,244,213,.15)}
  55%{background:#f2c879;transform:scale(1.24);box-shadow:0 0 0 4px rgba(242,200,121,.28),0 0 25px rgba(242,200,121,.82)}
  100%{background:#e7ba73;transform:scale(1.14);box-shadow:0 0 0 7px rgba(231,186,115,.10),0 0 20px rgba(231,186,115,.62)}
}

@keyframes room-overview-ring{
  0%{opacity:.78;transform:scale(1);box-shadow:0 0 11px rgba(255,244,213,.19)}
  58%{opacity:1;transform:scale(1.16);box-shadow:0 0 0 5px rgba(242,200,121,.25),0 0 25px rgba(242,200,121,.76)}
  100%{opacity:.98;transform:scale(1.02);box-shadow:0 0 0 5px rgba(231,186,115,.14),0 0 18px rgba(231,186,115,.56)}
}

/* TV and PlayStation live on the right side of the room, so their labels open
   inward. Computer and pinboard labels open to the right. */
.hotspot-tv .marker-label,
.hotspot-games .marker-label{
  left:auto;
  right:calc(100% + 9px);
  transform:translate(4px,-50%);
}
.hotspot-tv.is-cued .marker-label,
.hotspot-games.is-cued .marker-label,
.hotspot-tv:hover .marker-label,
.hotspot-games:hover .marker-label,
.hotspot-tv:focus-visible .marker-label,
.hotspot-games:focus-visible .marker-label,
.room-cue-overview .hotspot-tv .marker-label,
.room-cue-overview .hotspot-games .marker-label{
  transform:translate(0,-50%);
}

.hotspot-computer .marker-label,
.hotspot-board .marker-label{
  left:calc(100% + 9px);
  right:auto;
  top:50%;
  bottom:auto;
  transform:translate(-4px,-50%);
}
.hotspot-computer.is-cued .marker-label,
.hotspot-board.is-cued .marker-label,
.hotspot-computer:hover .marker-label,
.hotspot-board:hover .marker-label,
.hotspot-computer:focus-visible .marker-label,
.hotspot-board:focus-visible .marker-label,
.room-cue-overview .hotspot-computer .marker-label,
.room-cue-overview .hotspot-board .marker-label{
  transform:translate(0,-50%);
}

/* The existing board illumination joins the About cue. */
.room-plane:has(.hotspot-board.is-cued) .board-illumination,
.room-plane.room-cue-overview .board-illumination{
  animation:none;
  opacity:.65;
  transition:opacity .22s ease;
}

@media(max-width:760px){
  .hotspot-board .marker-label{
    opacity:0 !important;
    visibility:hidden !important;
    left:calc(100% + 8px) !important;
    right:auto !important;
    top:50% !important;
    bottom:auto !important;
    transform:translate(-3px,-50%) !important;
  }
  .hotspot-board.is-cued .marker-label,
  .hotspot-board:hover .marker-label,
  .hotspot-board:focus-visible .marker-label,
  .room-cue-overview .hotspot-board .marker-label{
    opacity:1 !important;
    visibility:visible !important;
    transform:translate(0,-50%) !important;
  }

  .marker-label{
    font-size:14px;
    line-height:1;
    padding:8px 10px;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
    background:rgba(13,18,17,.94);
    border-color:rgba(245,241,228,.28);
  }

  .hotspot-tv .marker-label,
  .hotspot-games .marker-label{
    left:auto !important;
    right:calc(100% + 8px) !important;
  }

  .hotspot-computer .marker-label{
    left:calc(100% + 8px) !important;
    right:auto !important;
  }

  /* On phones the idle buttons need a touch more presence than desktop. */
  .hotspot-tv .marker-ring,
  .hotspot-computer .marker-ring,
  .hotspot-board .marker-ring,
  .hotspot-games .marker-ring{
    opacity:.9;
  }

  .hotspot.is-cued .marker-ring{transform:scale(1.16);}
  .room-cue-overview .hotspot .marker-ring{transform:scale(1.04);}
}

@media(prefers-reduced-motion:reduce){
  .hotspot.is-cued .marker-ring,
  .room-cue-overview .hotspot .marker-ring{animation:none;}
  .marker-label{transition:none;}
}