/* The den — the Cabinet page's room, doors and music button. Since 17 Oct 2026 the
   room (not the doors) is behind every host page too; see den.js. Asked for on 10 Oct 2026: "a visual large cabinet opening, with
   shmoozy jazz music playing, with the background being an old whiskey den — a pipe
   smoking on a table, a leather chair, by a fireplace, with leatherbound books."
   Everything here is drawn and composed in code: no borrowed images or recordings. */

body.den{ background:#0b0705; }
body.den .wrap{ position:relative; z-index:1; }
body.den .eyebrow, body.den h1.title, body.den .subtitle{ text-shadow:0 2px 12px rgba(0,0,0,0.9); }
/* Frosted glass, 17 Oct 2026. At 90% opaque the card hid the room completely once
   he scrolled; he asked to see the fireplace and the chair "a little more". The blur
   keeps the room soft enough that text stays readable over the fire, and the glow
   still moves behind the shelf. */
body.den .card{
  background:linear-gradient(180deg, rgba(30,20,12,0.64), rgba(40,27,15,0.72));
  border-color:rgba(232,163,61,0.16);
  -webkit-backdrop-filter:blur(6px) saturate(1.12); backdrop-filter:blur(6px) saturate(1.12);
}
/* The nav pills sit straight on the room, so they get a little glass of their own. */
body.den .hostnav a{
  background:rgba(20,13,8,0.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
body.den .hostnav a.here{ background:rgba(60,38,12,0.7); }
body.den .hostnav .nav-more{ background:rgba(20,13,8,0.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
/* Typing over the firelight: inputs get a darker well than the glass around them. */
body.den input[type=text], body.den input[type=password], body.den input[type=number], body.den textarea, body.den select{
  background:rgba(12,8,5,0.6);
}
/* The Cabinet opens on the room: a short gap under the title so the fire is in view
   when the doors swing back, before the shelf slides over it. */
body.den-cabinet .card{ margin-top:26vh; }

/* ---- the room ---- */
/* Pinned to the large viewport height (100lvh) so a phone's address bar sliding away
   doesn't resize the room mid-scroll. den.js sizes the drawing and pans it. */
#den-scene{
  position:fixed; left:0; top:0; width:100%; height:100vh; height:100lvh;
  z-index:0; pointer-events:none; overflow:hidden;
}
#den-scene svg{ position:absolute; left:0; top:0; display:block; will-change:transform; }
.den-flame{ transform-box:fill-box; transform-origin:50% 100%; animation:den-flick 1.1s ease-in-out infinite alternate; }
.den-flame.f2{ animation-duration:0.83s; animation-delay:-0.3s; }
.den-flame.f3{ animation-duration:1.37s; animation-delay:-0.7s; }
.den-flame.f4{ animation-duration:0.97s; animation-delay:-0.1s; }
@keyframes den-flick{
  0%  { transform:scale(1, 1)    skewX(0deg);  opacity:0.92; }
  35% { transform:scale(0.94,1.08) skewX(-3deg); opacity:1; }
  70% { transform:scale(1.04,0.93) skewX(2deg);  opacity:0.85; }
  100%{ transform:scale(0.97,1.05) skewX(-1deg); opacity:0.97; }
}
.den-glow{ animation:den-glow 2.3s ease-in-out infinite alternate; }
@keyframes den-glow{ 0%{opacity:0.55;} 40%{opacity:0.75;} 100%{opacity:0.6;} }
.den-smoke{ fill:none; stroke:rgba(225,215,200,0.32); stroke-width:3; stroke-linecap:round;
  animation:den-smoke 7s ease-out infinite; transform-box:fill-box; transform-origin:50% 100%; }
.den-smoke.s2{ animation-delay:-2.4s; }
.den-smoke.s3{ animation-delay:-4.7s; }
@keyframes den-smoke{
  0%  { transform:translate(0,12px) scale(0.6,0.5); opacity:0; }
  15% { opacity:0.9; }
  100%{ transform:translate(14px,-90px) scale(1.5,1.4); opacity:0; }
}

/* ---- the doors ---- */
#den-doors{
  position:fixed; inset:0; z-index:100; display:flex; cursor:pointer;
  perspective:1800px; background:#080503; transition:background 0.9s ease 0.5s;
  -webkit-tap-highlight-color:transparent;
}
#den-doors .door{
  flex:1; position:relative; overflow:hidden;
  transition:transform 1.7s cubic-bezier(0.55,0.05,0.25,1);
  background:
    linear-gradient(90deg, rgba(255,220,170,0.05), rgba(0,0,0,0.12) 60%, rgba(255,220,170,0.04)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 7px, rgba(255,230,190,0.03) 7px 9px, transparent 9px 15px),
    linear-gradient(180deg, #4a2c17, #3a2112 50%, #2c180c);
  box-shadow:inset 0 0 60px rgba(0,0,0,0.55);
}
#den-doors .door.l{ transform-origin:0 50%; border-right:1px solid #120904; }
#den-doors .door.r{ transform-origin:100% 50%; border-left:1px solid #120904; }
/* Raised panels: two per door. */
#den-doors .door::before, #den-doors .door::after{
  content:''; position:absolute; left:13%; right:13%;
  border:2px solid rgba(0,0,0,0.38); border-radius:3px;
  box-shadow:inset 0 0 0 6px rgba(255,220,170,0.035), inset 0 0 26px rgba(0,0,0,0.5), 0 1px 0 rgba(255,220,170,0.06);
}
#den-doors .door::before{ top:7%; height:38%; }
#den-doors .door::after{ bottom:7%; height:38%; }
#den-doors .knob{
  position:absolute; top:50%; width:24px; height:24px; margin-top:-12px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fbe6a8, #c99a3a 48%, #6b4a14 100%);
  box-shadow:0 3px 8px rgba(0,0,0,0.7), 0 0 0 4px rgba(0,0,0,0.25);
}
#den-doors .l .knob{ right:22px; }
#den-doors .r .knob{ left:22px; }
#den-doors .plaque{
  position:absolute; left:50%; top:24%; transform:translateX(-50%); z-index:2; text-align:center;
  pointer-events:none; transition:opacity 0.4s ease;
}
#den-doors .plaque b{
  display:block; white-space:nowrap; font-family:'Fraunces',serif; font-weight:700; font-size:15px; letter-spacing:0.24em;
  color:#2a1a08; padding:9px 18px 8px 22px; border-radius:4px;
  background:linear-gradient(180deg, #f3d891, #c7973a 55%, #a87a27);
  box-shadow:0 4px 14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
}
#den-doors .plaque span{
  display:block; margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.14em; text-transform:uppercase; color:rgba(242,232,216,0.55);
}
#den-doors.open{ background:transparent; pointer-events:none; }
#den-doors.open .plaque{ opacity:0; }
#den-doors.open .door.l{ transform:rotateY(-104deg); }
#den-doors.open .door.r{ transform:rotateY(104deg); }
@media (prefers-reduced-motion: reduce){
  #den-doors .door{ transition:opacity 0.5s ease; }
  #den-doors.open .door.l, #den-doors.open .door.r{ transform:none; opacity:0; }
  .den-flame, .den-glow, .den-smoke{ animation:none; }
}

/* ---- the music button ---- */
#den-music{
  position:fixed; right:16px; bottom:16px; z-index:60; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(232,163,61,0.45); background:rgba(28,19,12,0.82); color:var(--honey);
  font-size:19px; line-height:1; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
#den-music.off{ color:var(--muted); border-color:var(--rule); }
#den-music.off::after{
  content:''; position:absolute; left:11px; right:11px; top:50%; height:2px; background:var(--muted);
  transform:rotate(-40deg);
}
#den-music:focus-visible{ outline:2px solid var(--honey); outline-offset:3px; }
/* The tune's name, for a few seconds when it starts. */
#den-song{
  position:fixed; right:70px; bottom:25px; z-index:60; pointer-events:none; white-space:nowrap;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.05em; color:var(--honey);
  background:rgba(28,19,12,0.85); border:1px solid rgba(232,163,61,0.35); border-radius:14px;
  padding:6px 11px; opacity:0; transform:translateX(8px);
  transition:opacity 0.6s ease, transform 0.6s ease;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
#den-song.show{ opacity:1; transform:none; }

/* ---- print ----
   Blind Night prints guest cards; the room, the button and the glass stay off paper. */
@media print{
  #den-scene, #den-music, #den-doors, #den-song{ display:none !important; }
  body.den{ background:#fff !important; }
  body.den .card{ background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; margin-top:0 !important; }
}