/* One 20-second workshop sequence: table, lift, shared pile, themes, vote.
   CSS anchors follow the real board geometry at each responsive size.
   https://developer.chrome.com/docs/css-ui/anchor-positioning-api */
#workshops .ws2-photo { anchor-name:--ws-table; }
body.ha-message-hierarchy #workshops .gm-panel {
  margin-top:clamp(-64px,-5vw,-24px);
}
.ws-room-anchor { position:absolute; z-index:2; width:70px; height:70px; }
.ws-room-anchor1 { anchor-name:--ws-room-1; --arrival-delay:0s; }
.ws-room-anchor2 { anchor-name:--ws-room-2; --arrival-delay:.35s; }
.ws-room-anchor3 { anchor-name:--ws-room-3; --arrival-delay:.7s; }
#workshops .xr-n:not(.xr-under) {
  color:var(--ha-ink);
  font-family:var(--ha-font-note);
}
.ws-room-note { display:none; }
#workshops .ipad .xr-n:not(.ws-room-paper) { animation-name:wsBoardNote; }
@keyframes wsBoardNote {
  0%,6% { opacity:0; transform:translate(var(--sx),var(--sy)) rotate(var(--sr)); }
  12%,26% { opacity:1; transform:translate(var(--sx),var(--sy)) rotate(var(--sr)); }
  38%,88% { opacity:1; transform:rotate(var(--r)); }
  92%,100% { opacity:0; transform:rotate(var(--r)); }
}

@supports (top:anchor(--ws-table top)) and (width:anchor-size(--ws-room-1 width)) {
  #workshops .ws-room-anchor {
    animation:wsRoomPosition 20s cubic-bezier(.45,0,.2,1) infinite both;
    animation-delay:var(--arrival-delay);
  }
  #workshops .ipad .ws-room-paper {
    animation:wsRoomPaper 20s cubic-bezier(.45,0,.2,1) infinite both;
    animation-delay:var(--arrival-delay);
  }
  #workshops .ws-room-note {
    display:block;
    position:absolute;
    position-anchor:var(--board-note);
    position-visibility:always;
    z-index:20;
    pointer-events:none;
    box-sizing:border-box;
    width:anchor-size(var(--board-note) width);
    height:anchor-size(var(--board-note) height);
    padding:0;
    background:var(--bg);
    color:var(--ha-ink);
    container-type:inline-size;
    font-family:var(--ha-font-note);
    font-weight:700;
    line-height:1.02;
    transform-origin:center;
    animation:wsRoomFlight 20s cubic-bezier(.45,0,.2,1) infinite both;
    animation-delay:var(--arrival-delay);
    box-shadow:0 1px 1px rgba(0,0,0,.08),0 7px 10px -7px rgba(0,0,0,.4);
  }
  #workshops .ws-room-note::before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:14%;
    background:rgba(0,0,0,.035);
  }
  #workshops .ws-room-note > span {
    display:block;
    padding:8.571% 10%;
    font-size:20cqw !important;
  }
  .ws-room-note1 { --board-note:--ws-room-1; --table-x:10%; --table-y:76%; --sr:5.5deg; --arrival-delay:0s; }
  .ws-room-note2 { --board-note:--ws-room-2; --table-x:22%; --table-y:78%; --sr:-5.6deg; --arrival-delay:.35s; }
  .ws-room-note3 { --board-note:--ws-room-3; --table-x:32%; --table-y:80%; --sr:-5.0deg; --arrival-delay:.7s; }

  @keyframes wsRoomFlight {
    0%,10% {
      left:anchor(--ws-table var(--table-x));
      top:anchor(--ws-table var(--table-y));
      opacity:1;
      transform:translate(-50%,-50%) perspective(600px) rotateZ(20deg) rotateX(55deg) skewX(-16deg) scale(var(--table-scale,.78));
      box-shadow:0 1px 2px rgba(var(--ha-ink-rgb),.22);
    }
    14% {
      left:anchor(--ws-table var(--table-x));
      top:calc(anchor(--ws-table var(--table-y)) - 30px);
      opacity:1;
      transform:translate(-50%,-50%) rotate(var(--sr));
      box-shadow:0 1px 1px rgba(0,0,0,.08),0 7px 10px -7px rgba(0,0,0,.4);
    }
    20%,21.99% {
      left:anchor(var(--board-note) left);
      top:anchor(var(--board-note) top);
      opacity:1;
      transform:rotate(var(--sr));
    }
    22%,100% {
      left:anchor(var(--board-note) left);
      top:anchor(var(--board-note) top);
      opacity:0;
      transform:rotate(var(--sr));
    }
  }
  @keyframes wsRoomPosition {
    0%,26% { transform:translate(var(--sx),var(--sy)); }
    38%,100% { transform:translate(0,0); }
  }
  @keyframes wsRoomPaper {
    0%,21.99% { opacity:0; transform:rotate(var(--sr)); }
    22%,26% { opacity:1; transform:rotate(var(--sr)); }
    38%,88% { opacity:1; transform:rotate(var(--r)); }
    92%,100% { opacity:0; transform:rotate(var(--r)); }
  }
}

@media (min-width:1300px) {
  body.ha-message-hierarchy #workshops .gm-panel { margin-top:0; }
}
@media (max-width:900px) {
  /* The incoming pile stays in the visible first board column before sorting.
     Theme columns retain native horizontal swiping. */
  #workshops .ws-room-anchor1 { --sx:10px !important; --sy:80px !important; }
  #workshops .ws-room-anchor2 { --sx:-582px !important; --sy:30px !important; }
  #workshops .ws-room-anchor3 { --sx:-630px !important; --sy:120px !important; }
  #workshops .ws-room-note { --table-scale:.48; }
  #workshops .ws-one { overflow-x:clip !important; }
  #workshops .ws2-photo > img { object-position:20% 25% !important; }
}
@media (prefers-reduced-motion:reduce) {
  #workshops .ws-room-note { display:none; }
  #workshops .ws-room-anchor { animation:none !important; transform:none; }
  #workshops .ipad .ws-room-paper { animation:none !important; opacity:1; transform:rotate(var(--r)); }
}