/* =========================================================
   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%);
}

/* The room sits between the hero and the projects, so tighten the gap before the projects */
.projects{padding-top:110px;}

/* The back-to-top arrow is hidden while the room is on screen (it would crowd the skip button) */
.to-top.is-visible.over-studio{opacity:0; pointer-events:none;}

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

/* Layout: text column on the left (intro at the top, controls at the bottom), room filling the right */
.studio__stage{
  /* same page width as the menu, so the text lines up with the SPK logo */
  position:relative; width:var(--wrap); margin:0 auto;
  min-height:calc(100vh - 80px);
  display:grid; grid-template-columns:minmax(300px, 380px) minmax(0, 1fr); grid-template-rows:1fr auto;
  column-gap:32px; outline:none !important;
}
.studio__intro{grid-column:1; grid-row:1; align-self:center; padding-left:23px;}
.studio__eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-hand); font-weight:700; font-size:26px; letter-spacing:2px; text-transform:uppercase; color:var(--lilac);
}
.studio__eyebrow::after{content:""; width:44px; height:1px; background:var(--lilac);}
.studio__headline{
  margin-top:10px;
  font-family:var(--f-hand); font-weight:700; font-size:clamp(56px, 5.6vw, 88px); line-height:1.02;
  letter-spacing:2px; text-transform:uppercase; color:#fff;
}
.studio__sub{
  margin-top:24px; max-width:360px;
  font-family:var(--f-hero-sub); font-size:18px; line-height:1.75; color:rgba(255,255,255,.85);
}

/* Room fills the right column, as tall as the screen allows (room is 1200x1000) */
.studio__room{
  grid-column:2; grid-row:1 / span 2; justify-self:center; align-self:center;
  display:block; width:min(100%, calc((100vh - 90px) * 1.2)); height:auto; overflow:visible;
}

/* Controls box, bottom left */
.studio__keys{
  grid-column:1; grid-row:2; justify-self:start; align-self:end; margin-left:23px;
  display:flex; align-items:center; gap:28px; padding:16px 22px;
  border-radius:16px; border:1px solid rgba(227,197,248,.22); background:rgba(23,13,27,.5);
  font-size:16px; color:#fff;
}
.keys__group{display:inline-flex; align-items:center; gap:6px;}
.keys__group > span{margin-left:10px;}
.studio__keys kbd{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:9px;
  background:rgba(42,26,49,.8); border:1px solid rgba(227,197,248,.5);
  font-family:var(--f-body); font-weight:700; font-size:16px; color:#fff;
}

/* Counter, top right */
.studio__hud{
  position:absolute; top:8%; right:0; z-index:2; pointer-events:none;
  display:flex; align-items:center; gap:14px; font-size:15px; font-weight:600; color:rgba(255,255,255,.85);
}
.hud__bar{width:140px; height:6px; border-radius:3px; background:rgba(227,197,248,.2); overflow:hidden;}
.hud__fill{display:block; width:0; height:100%; background:var(--lilac); transition:width .4s var(--ease);}

/* Skip link, bottom right */
.studio__skip{
  position:absolute; right:0; bottom:0; z-index:2;
  display:inline-flex; align-items:center; gap:6px; padding:12px 20px;
  border-radius:14px; border:1px solid rgba(227,197,248,.45); background:rgba(23,13,27,.5);
  font-size:16px; font-weight:600; color:#fff; transition:background .2s, border-color .2s;
}
.studio__skip > span:first-child{color:var(--lilac); font-weight:400;}
.studio__skip:hover{background:var(--accent); border-color:var(--accent);}
.studio__skip:hover > span:first-child{color:#fff;}


/* 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)}}

/* Dust drifting in the light */
.mote{fill:#F6D7A7; opacity:0; animation:mote 7s ease-in-out infinite; pointer-events:none;}
@keyframes mote{0%{opacity:0; transform:translateY(0)} 35%{opacity:.75} 100%{opacity:0; transform:translateY(-36px)}}

/* ---------- 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{visibility:hidden; animation: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;}

/* 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: one column — intro, room, controls, skip */
@media (max-width:1000px){
  .studio__stage{grid-template-columns:minmax(0, 1fr); grid-template-rows:auto; min-height:0; row-gap:20px;}
  .studio__intro, .studio__room, .studio__keys{grid-column:1; grid-row:auto;}
  .studio__room{width:100%;}
  .studio__hud, .studio__skip{position:static; transform:none; justify-self:start;}
  .studio__sub{max-width:none;}
}

/* ---------- Phones: card becomes a bottom sheet ---------- */
@media (max-width:720px){
  .studio{padding:24px 0 180px;}
  .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,.mote{animation:none !important;}
}