*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:#080604}
body{overflow:hidden}

.workshop-room{
  position:relative;
  width:100vw;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:#080604;
}

.workshop-background{
  position:absolute;
  inset:0;
  background:url("../assets/images/great-swingali-workshop.png") center center/cover no-repeat;
}

/* Consistent realm-title typography used throughout The Great Swingali site. */
.realm-title{
  position:absolute;
  z-index:5;
  top:1.5%;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  width:max-content;
  max-width:88vw;
  padding:.28rem .72rem;
  color:#ead8b8;
  background:rgba(5,4,4,.28);
  border-radius:4px;
  font:400 clamp(1.15rem,1.75vw,1.85rem)/1.05 "Rye",Georgia,serif;
  letter-spacing:.055em;
  text-align:center;
  text-shadow:
    0 3px 10px rgba(0,0,0,.98),
    0 0 12px rgba(167,99,232,.20);
  pointer-events:none;
}

/* Interactive object zones remain separate from the approved artwork. */
.workshop-hotspot{
  position:absolute;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#f1ddbc;
  border-radius:18px;
  outline:none;
  cursor:pointer;
}

.workshop-hotspot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(
    circle,
    rgba(220,171,255,.36),
    rgba(145,76,205,.12) 62%,
    transparent 80%
  );
  box-shadow:
    0 0 28px rgba(210,153,255,.62),
    inset 0 0 24px rgba(246,226,255,.18);
  transition:opacity .22s ease,transform .25s ease;
}

.workshop-hotspot span{
  position:relative;
  z-index:2;
  opacity:0;
  transform:translateY(6px);
  padding:.48rem .72rem;
  background:rgba(7,5,5,.70);
  border:1px solid rgba(227,196,157,.34);
  border-radius:4px;
  font:700 clamp(.72rem,.9vw,.98rem)/1.1 Georgia,serif;
  letter-spacing:.07em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 2px 8px #000;
  box-shadow:0 0 12px rgba(0,0,0,.42);
  transition:opacity .22s ease,transform .22s ease;
  pointer-events:none;
}

.workshop-hotspot:hover::before,
.workshop-hotspot:focus-visible::before{
  opacity:1;
  transform:scale(1.035);
}

.workshop-hotspot:hover span,
.workshop-hotspot:focus-visible span{
  opacity:1;
  transform:translateY(0);
}

.workshop-hotspot:focus-visible{
  outline:2px solid rgba(233,210,255,.88);
  outline-offset:4px;
}

/* Locked Workshop object map:
   left sign = Artwork
   creature head = Masks & FX
   STAY / logo / CREEPY banner = Props & Builds
   main workbench = DIYs & Ideas */
.artwork{
  left:1.1%;
  top:2.5%;
  width:13.5%;
  height:25%;
}

.masks-fx{
  left:1.8%;
  top:43%;
  width:18%;
  height:31%;
}

.props-builds{
  left:38.5%;
  top:3.5%;
  width:27%;
  height:47%;
}

.diy-ideas{
  left:48%;
  top:47%;
  width:38%;
  height:39%;
}

.return-link{
  position:absolute;
  left:50%;
  bottom:1.1rem;
  transform:translateX(-50%);
  z-index:7;
  padding:.48rem .8rem;
  color:rgba(239,220,185,.60);
  font:600 .72rem/1.1 Georgia,serif;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
  text-shadow:0 2px 7px #000;
  opacity:.22;
  transition:.2s;
}

.return-link:hover,
.return-link:focus-visible{
  opacity:1;
  text-shadow:0 0 12px rgba(183,117,255,.85),0 2px 7px #000;
}

@media(max-width:900px){
  .workshop-hotspot span{
    font-size:.64rem;
    padding:.35rem .45rem;
  }
}


/* ============================================================
   UNIVERSAL PORTAL MARKERS — WORKSHOP
   Applies only to the three approved feature hotspots:
   MASKS & FX, PROPS & BUILDS, DIYs & IDEAS.
   ============================================================ */
.workshop-hotspot.masks-fx::after,
.workshop-hotspot.props-builds::after,
.workshop-hotspot.diy-ideas::after{
  content:"";
  position:absolute;
  z-index:4;
  width:clamp(18px,1.35vw,24px);
  height:clamp(18px,1.35vw,24px);
  border:1px solid rgba(247,226,255,.98);
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0 7%,#efc9ff 9% 22%,#c36df2 42%,#681b8c 72%,
      rgba(77,10,107,.28) 78%,transparent 80%);
  box-shadow:
    0 0 7px rgba(246,223,255,.98),
    0 0 17px rgba(205,105,255,.98),
    0 0 31px rgba(142,43,205,.82);
  pointer-events:none;
  transform-origin:center;
  animation:workshopPortalPulse 1.8s ease-in-out infinite,
            workshopPortalTurn 4.6s linear infinite;
}

/* Quiet-corner placement within each clickable target.
   These positions do not resize or move the underlying hotspots. */
.workshop-hotspot.masks-fx::after{
  right:8%;
  top:10%;
}
.workshop-hotspot.props-builds::after{
  right:7%;
  top:8%;
}
.workshop-hotspot.diy-ideas::after{
  right:6%;
  top:8%;
}

.workshop-hotspot.masks-fx:hover::after,
.workshop-hotspot.masks-fx:focus-visible::after,
.workshop-hotspot.props-builds:hover::after,
.workshop-hotspot.props-builds:focus-visible::after,
.workshop-hotspot.diy-ideas:hover::after,
.workshop-hotspot.diy-ideas:focus-visible::after{
  filter:brightness(1.2);
  box-shadow:
    0 0 9px rgba(255,242,255,1),
    0 0 23px rgba(220,139,255,1),
    0 0 40px rgba(155,51,221,.96);
}

@keyframes workshopPortalPulse{
  0%,100%{scale:.88;opacity:.82}
  50%{scale:1.14;opacity:1}
}
@keyframes workshopPortalTurn{
  from{rotate:0deg}
  to{rotate:360deg}
}
@media(prefers-reduced-motion:reduce){
  .workshop-hotspot.masks-fx::after,
  .workshop-hotspot.props-builds::after,
  .workshop-hotspot.diy-ideas::after{
    animation:none;
  }
}