/* ============================================================
   THE DOOR  ·  1 Sep 2026
   The signed-out front of the Studio: a compact disc you sign in
   under, then fly through the hole of.

   One prefix, `dr-`, checked against every class in tokens.css,
   app.css, theme.css and nav.css before it was chosen. The .gs-row
   lesson in CLAUDE.md is why: at equal specificity a later rule wins
   for BOTH owners and nothing fails loudly.

   Everything here is light on glass, per the theme rules. The disc's
   own motion is the exception the door is allowed, because the door
   runs once per session and the Studio behind it never moves.
   ============================================================ */

/* THE GATE IS THE WHOLE PAGE (1 Sep 2026). Mounted inside the pane it
   left the sidebar showing beside the disc, which reads as a widget in
   a page rather than a door to one. Fixed and above the shell instead.
   z-index clears nav.css's 60. */
.dr.dr-gate{
  position:fixed; inset:0; z-index:70;
  border-radius:0;
  min-height:0; max-height:none;
  /* an opaque ground of its own: the renderer runs with alpha, so
     without this the shell behind simply shows through the disc */
  background:var(--env,#050607);
}
.dr{
  position:relative;
  /* the door owns the column: the shell's header and the pane padding
     are what the subtraction is for. A short box shrinks the disc,
     because the camera frames it by vertical field of view, and the
     card then lands on top of it. */
  min-height:calc(100vh - 132px);
  max-height:900px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  border-radius:var(--r-lg,18px);
}

/* the canvas fills the pane and sits under everything */
.dr-gl{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  /* the disc is texture, not a control: the drag handler adds its own
     cursor only while a pointer is actually over it */
  cursor:grab;
}
.dr.is-drag .dr-gl{cursor:grabbing}

/* no WebGL, or the context died: the card carries the page alone */
.dr.dr-flat .dr-gl{display:none}
.dr.dr-flat{
  min-height:min(52vh,440px);
  align-items:center;
  background:
    radial-gradient(70% 90% at 50% 0%,rgba(53,201,214,.05),transparent 70%);
}

/* ---- the gate card ------------------------------------------------
   Sits low so the disc has the air above it. Clamped in px: a bare vh
   put the card into the disc on a short window, because the disc is
   sized to the viewport and the card is not. */
.dr-card{
  position:relative; z-index:2;
  width:min(320px,86vw);
  margin-bottom:clamp(26px,4.5vh,58px);
  padding:22px 22px 20px;
  border-radius:18px;
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  transition:opacity .45s var(--ease,ease),transform .45s var(--ease,ease);
}
.dr-card::before,
.dr-pill::before,
.dr-panel::before,
.dr-field::before,
.dr-google::before{
  content:""; position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.07) 45%,rgba(255,255,255,.02));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.dr-card::before{border-radius:18px}

.dr-eyebrow{
  margin:0 0 10px;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--t3);
}
.dr-tag{margin:0 0 16px;font-size:15px;color:var(--t1);letter-spacing:-.01em}
.dr-go{
  width:100%; padding:12px 18px; border:0; border-radius:var(--r-pill);
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:#062227; cursor:pointer;
  background:linear-gradient(180deg,#8FDCE6,#4FC3D2);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:filter var(--t-fast);
}
.dr-go:hover{filter:brightness(1.08)}
.dr-go svg{width:15px;height:15px}
.dr-alt{margin:12px 0 0;font-size:11.5px;color:var(--t3)}
.dr-alt a{color:var(--t2);text-decoration:none}
.dr-alt a:hover{color:var(--t1)}

/* ---- the sign-in, variant D --------------------------------------
   No satellite circles: the title pill names the programme, Google
   leads the card, and back / continue are two quiet verbs underneath,
   the way a dialog carries its actions. */
.dr-signin{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(340px,88vw);
  z-index:3;
}
.dr-signin[hidden]{display:none}
.dr-head{display:flex;justify-content:center;margin-bottom:12px}
.dr-pill,.dr-panel,.dr-field,.dr-google{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.dr-pill{
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--t1);
  padding:14px 18px; border-radius:var(--r-pill); white-space:nowrap;
}
.dr-panel{padding:12px;border-radius:22px}
.dr-google{
  width:100%; padding:13px 16px; border:0; border-radius:14px;
  cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--t1);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  margin-bottom:10px;
  transition:background var(--t-fast);
}
.dr-google:hover{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04))}
.dr-field{border-radius:14px}
.dr-in{
  width:100%; padding:14px 16px; border:0; border-radius:14px;
  background:none; font-family:inherit; font-size:15px; color:var(--t1);
}
.dr-in:focus{outline:0}
.dr-in::placeholder{color:var(--t3)}
.dr-field:focus-within{
  background:
    radial-gradient(120% 170% at 50% 0%,rgba(53,201,214,.10),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}
.dr-field:focus-within::before{
  background:linear-gradient(180deg,rgba(111,220,230,.5),rgba(53,201,214,.12) 50%,rgba(255,255,255,.02));
}
.dr-verbs{display:flex;justify-content:space-between;margin-top:14px;padding:0 8px}
.dr-verb{
  border:0; background:none; cursor:pointer;
  font-family:"SST Typewriter",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); padding:8px 12px; border-radius:var(--r-pill);
  transition:color var(--t-fast),background var(--t-fast);
}
.dr-verb:hover{color:var(--t1)}
.dr-verb.dr-goverb{color:#7FBCCB}
.dr-verb.dr-goverb:hover,.dr-signin.dr-filled .dr-verb.dr-goverb{color:#6FDCE6}
.dr-verb.dr-goverb:hover{
  background:radial-gradient(120% 150% at 50% 0%,rgba(53,201,214,.12),transparent 70%);
}
.dr-err{
  margin:10px 2px 0; font-size:11.5px; color:#C77B7B; line-height:1.5;
}

/* the pop Ramz picked out of desktop.fm, in three beats */
.dr-signin .dr-head,
.dr-signin .dr-panel,
.dr-signin .dr-verbs{opacity:0;transform:translateY(26px) scale(.86)}
.dr-signin.dr-on .dr-head {animation:dr-pop .55s cubic-bezier(.34,1.56,.64,1) forwards}
.dr-signin.dr-on .dr-panel{animation:dr-pop .55s cubic-bezier(.34,1.56,.64,1) .07s forwards}
.dr-signin.dr-on .dr-verbs{animation:dr-pop .55s cubic-bezier(.34,1.56,.64,1) .13s forwards}
.dr-signin.dr-off .dr-head {animation:dr-drop .3s ease forwards}
.dr-signin.dr-off .dr-panel{animation:dr-drop .3s ease .04s forwards}
.dr-signin.dr-off .dr-verbs{animation:dr-drop .3s ease .07s forwards}
@keyframes dr-pop {to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dr-drop{to{opacity:0;transform:translateY(18px) scale(.92)}}

/* the disc dims and softens so the form is the only thing to read */
.dr.dr-open .dr-gl{filter:brightness(.3) blur(3px);transition:filter .4s ease}
.dr.dr-open .dr-card{
  opacity:0; transform:translateY(14px); pointer-events:none;
}

/* ---- the arrival ---------------------------------------------------
   Coming back from a sign-in, the door plays over the whole viewport
   and the Studio is revealed behind it. Fixed, because by then the
   pane below is the real Studio. */
.dr-over{
  /* above the gate (70) and above nav.css's own 60: an arrival plays
     over the finished Studio and must never slide under any of it */
  position:fixed; inset:0; z-index:80;
  background:var(--env,#050607);
  display:block;
  transition:opacity .5s ease;
}
.dr-over.dr-gone{opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .dr-signin.dr-on .dr-head,
  .dr-signin.dr-on .dr-panel,
  .dr-signin.dr-on .dr-verbs{animation:none;opacity:1;transform:none}
  .dr-card{transition:none}
}

@media(max-width:720px){
  .dr{min-height:min(66vh,560px)}
  .dr-card{margin-bottom:24px}
}