/* =========================================================
   Studio experiment: a room floating in space, right after the hero.
   Loaded after site/css/main.css, so it only adds and overrides.
   ========================================================= */

:root{
  --space:#170D1B;
}

/* Hero stays dark all the way down so it runs straight into the studio */
@media (min-width:821px){ .hero{height:860px;} }
.hero__particles{
  height:100% !important;
  background:linear-gradient(180deg, var(--night) 10%, var(--space) 100%);
}
/* The photo was cut to fade into white; fade it out instead on the dark background */
.hero__photo{
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 92%);
          mask-image:linear-gradient(180deg, #000 55%, transparent 92%);
}

/* ---------- STUDIO ---------- */
.studio{
  position:relative; overflow:hidden; isolation:isolate;
  padding:40px 0 260px;
  background:linear-gradient(180deg, var(--space) 0%, var(--space) 84%, #fff 100%);
}
.studio__stars{position:absolute; inset:0; z-index:-1;}
.studio__stars canvas{display:block;}

.studio__head{
  text-align:center; width:min(720px, calc(100% - 32px)); margin:0 auto;
  pointer-events:none;
}
.studio__title{
  font-family:var(--f-hand); font-weight:700; font-size:48px; line-height:1.2;
  letter-spacing:2.4px; color:var(--lilac);
}
.studio__sub{
  margin-top:12px; font-family:var(--f-hero-sub); font-size:18px; line-height:32px; color:#fff;
}

.studio__stage{
  /* Three columns: controls | room | empty. The room is never taller than the screen (1200x1000 → width = height x 1.2) */
  position:relative; width:100%; margin:0 auto;
  display:grid; align-items:center;
  grid-template-columns:1fr minmax(0, min(1320px, calc(100% - 640px), calc((100vh - 64px) * 1.2))) 1fr;
  border-radius:24px; outline:none !important;
}
.studio__room{grid-column:2; grid-row:1; display:block; width:100%; height:auto; overflow:visible;}

/* The whole room drifts slowly, like it's hanging in space */
.room-float{animation:drift 7s ease-in-out infinite;}
.room-glow{animation:glow 7s ease-in-out infinite; transform-origin:607px 962px;}
@keyframes drift{0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}}
@keyframes glow{0%,100%{opacity:.9; transform:scale(1)} 50%{opacity:.6; transform:scale(.92)}}

/* ---------- Interactive objects ---------- */
.obj{cursor:pointer; outline:none;}
.obj .obj__art{transition:filter .25s var(--ease);}
.obj:hover .obj__art,
.obj:focus-visible .obj__art,
.obj.is-near .obj__art,
.obj.is-open .obj__art{
  filter:drop-shadow(0 0 6px rgba(227,197,248,.9)) drop-shadow(0 0 18px rgba(165,102,182,.7));
}
.obj:focus-visible .obj__art{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 0 16px rgba(227,197,248,.9));}

/* Small beacon above each object until it has been opened */
.beacon{fill:var(--lilac); pointer-events:none;}
.beacon__ring{fill:none; stroke:var(--lilac); stroke-width:1.5; transform-box:fill-box; transform-origin:center;
  animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(.4); opacity:.9} 100%{transform:scale(2.2); opacity:0}}
.obj.is-seen .beacon,
.obj.is-seen .beacon__ring{display:none;}

/* Neon beaver: a faint hum, like a real tube */
.neon,.neon-spill{animation:hum 7s ease-in-out infinite;}
@keyframes hum{0%,100%{opacity:1} 44%{opacity:.95} 46%{opacity:.7} 47%{opacity:.98} 49%{opacity:.82} 51%{opacity:1}}

/* BUSY / NOT BUSY: the word that is off fades out, the next one stutters on */
.sign-word{opacity:0;}
.sign-word.is-on{opacity:1; animation:flick-on 1.5s linear;}
.sign-word.is-off{opacity:0; animation:flick-off .7s linear;}
@keyframes flick-on{
  0%{opacity:0} 6%{opacity:.55} 9%{opacity:.05} 15%{opacity:.8} 18%{opacity:.2}
  27%{opacity:1} 55%{opacity:.88} 100%{opacity:1}
}
@keyframes flick-off{0%{opacity:1} 25%{opacity:.4} 32%{opacity:.75} 70%{opacity:.12} 100%{opacity:0}}

/* Hover label */
.studio__label{
  position:absolute; z-index:3; pointer-events:none;
  transform:translate(-50%, calc(-100% - 10px));
  padding:6px 14px; border-radius:999px;
  background:var(--night); border:1px solid var(--accent);
  font-family:var(--f-body); font-weight:700; font-size:14px; color:#fff; white-space:nowrap;
  opacity:0; transition:opacity .2s;
}
.studio__label.is-visible{opacity:1;}

/* Walking hint, sits under the room */
/* Controls, in the empty corner above the side wall */
.studio__keys{
  grid-column:1; grid-row:1; justify-self:end; margin-right:32px;
  display:flex; flex-direction:column; gap:12px;
  padding:16px 18px; border-radius:16px;
  background:rgba(23,13,27,.75); border:1px solid rgba(227,197,248,.3);
  color:#fff; font-size:15px; line-height:1.3;
  transition:border-color .2s, color .2s;
}
.studio__stage:focus-within .studio__keys{border-color:var(--accent);}
.keys__title{font-family:var(--f-hand); font-weight:700; font-size:24px; line-height:1; color:var(--lilac);}
.keys__row{display:flex; align-items:center; gap:12px; white-space:nowrap;}
.keys__arrows{display:grid; grid-template-columns:repeat(3,30px); grid-template-rows:repeat(2,30px); gap:4px;}
.keys__arrows .k-up{grid-area:1/2;} .keys__arrows .k-left{grid-area:2/1;}
.keys__arrows .k-down{grid-area:2/2;} .keys__arrows .k-right{grid-area:2/3;}
.studio__keys kbd{
  display:grid; place-items:center; min-width:30px; height:30px; padding:0 6px; border-radius:7px;
  background:#2A1A31; border:1px solid rgba(227,197,248,.35); border-bottom-width:3px;
  font-family:var(--f-body); font-weight:700; font-size:14px; color:#fff;
}
.keys__note{font-size:13px; color:#fff; max-width:220px;}

/* On-screen controls for touch screens */
.studio__pad{display:none;}
@media (pointer:coarse){
  .studio__pad{
    position:absolute; right:8px; bottom:56px; z-index:3;
    display:grid; grid-template-columns:repeat(3,46px); grid-template-rows:repeat(3,46px); gap:4px;
  }
  .pad{
    border:1px solid rgba(227,197,248,.4); border-radius:12px;
    background:rgba(23,13,27,.85); color:#fff; font-size:20px; font-family:var(--f-body);
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .pad:active{background:var(--accent);}
  .pad--up{grid-area:1/2;} .pad--left{grid-area:2/1;} .pad--open{grid-area:2/2; font-size:12px; font-weight:700;}
  .pad--right{grid-area:2/3;} .pad--down{grid-area:3/2;}
  .studio__keys{display:none;}
}

/* ---------- Summary card ---------- */
.studio__card{
  position:absolute; z-index:4; width:min(340px, calc(100% - 32px));
  padding:28px 26px 26px; border-radius:22px;
  background:#fff; color:var(--plum);
  box-shadow:0 24px 60px rgba(17,11,17,.55);
  animation:card-in .22s var(--ease);
}
.studio__card[hidden]{display:none;}
@keyframes card-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.studio__close{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%;
  background:#F1E8F6; color:var(--plum); font-size:22px; line-height:1; cursor:pointer;
}
.studio__close:hover{background:var(--lilac);}
.studio__object{
  font-family:var(--f-hand); font-weight:700; font-size:24px; line-height:1; color:var(--accent);
}
.studio__card-title{
  margin-top:6px; font-weight:800; font-size:26px; line-height:1.2; color:var(--plum);
}
.studio__card-desc{
  margin-top:10px; font-size:16px; line-height:1.6; color:var(--plum-soft);
}
.studio__cta{
  display:inline-block; margin-top:20px; padding:12px 22px; border-radius:999px;
  background:var(--plum); color:#fff; font-weight:700; font-size:15px;
  transition:background .2s;
}
.studio__cta:hover{background:var(--accent);}
.studio__cta[aria-disabled="true"]{background:#E9E1EE; color:var(--plum-soft); pointer-events:none;}

/* Narrower screens: controls go under the room */
@media (max-width:1000px){
  .studio__stage{grid-template-columns:minmax(0, min(100% - 32px, (100vh - 64px) * 1.2)); justify-content:center;}
  .studio__room{grid-column:1;}
  .studio__keys{grid-column:1; grid-row:2; justify-self:center; margin:8px 0 0;}
}

/* ---------- Phones: card becomes a bottom sheet ---------- */
@media (max-width:720px){
  .studio{padding:24px 0 180px;}
  .studio__title{font-size:40px;}
  .studio__sub{font-size:16px; line-height:28px;}
  .studio__stage{width:calc(100% - 16px);}
  .studio__card{
    position:fixed; left:12px !important; right:12px; top:auto !important; bottom:12px;
    width:auto; z-index:60;
  }
  .studio__label{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .room-float,.room-glow,.beacon__ring,.studio__card,.neon,.neon-spill,.sign-word{animation:none !important;}
}