/* bunny.quest — a luxurious neon-lit grotto */

:root{
  --crypt-violet:#0b0410;
  --cream:#f4ecdc;
  --cream-dim:#e8dcc4;
  --magenta:#ff2bd6;
  --lime:#caff3a;
  --cyan:#3affe7;
  --bronze:#b59264;
  --vein-grey:#3a2f3d;
  --white:#ffffff;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  background:var(--crypt-violet);
  color:var(--cream);
  font-family:"Cormorant Garamond",serif;
  font-size:1.0625rem;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 18% 8%, rgba(255,43,214,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 82% 92%, rgba(58,255,231,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(11,4,16,0) 0%, var(--crypt-violet) 80%);
}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;
  left:0;top:0;
  width:320px;height:100vh;
  background:var(--crypt-violet);
  border-right:1px solid var(--vein-grey);
  overflow-y:auto;
  z-index:40;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.sidebar::-webkit-scrollbar{width:5px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--vein-grey);}

/* veined marble strip at left:312px, width 8px */
.marble-strip{
  position:absolute;
  left:312px;top:0;
  width:8px;height:100%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.30) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='400'><path d='M2 0 C5 60 1 120 4 180 C6 240 2 300 5 400' stroke='%23b59264' stroke-width='1.2' fill='none' opacity='0.6'/><path d='M6 0 C3 90 7 200 4 320 C2 380 5 400 5 400' stroke='%233a2f3d' stroke-width='0.9' fill='none' opacity='0.7'/></svg>"),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-dim) 100%);
  background-repeat:no-repeat,repeat-y,no-repeat;
  background-size:100% 100%, 8px 200px, 100% 100%;
  animation:marble-drift 60s linear infinite;
  opacity:0.95;
}
@keyframes marble-drift{
  from{background-position:0 0, 0 0, 0 0;}
  to{background-position:0 0, 0 8px, 0 0;}
}

.sidebar-head{
  padding:1.6rem 1.4rem 1.1rem 1.4rem;
  border-bottom:1px solid var(--vein-grey);
}
.wordmark{
  font-family:"JetBrains Mono",monospace;
  font-size:0.95rem;
  letter-spacing:0.04em;
  text-transform:lowercase;
  color:var(--cream);
  display:inline-block;
  position:relative;
  cursor:default;
}
.wordmark::after{
  content:"";
  position:absolute;left:0;bottom:-3px;
  width:100%;height:1px;
  background:var(--magenta);
}
.wordmark .dot{
  transition:color .2s ease, text-shadow .2s ease;
}
.wordmark:hover .dot{
  color:var(--magenta);
  text-shadow:0 0 6px var(--magenta);
}
.sub-mono{
  font-family:"JetBrains Mono",monospace;
  font-size:0.66rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bronze);
  margin:.65rem 0 0 0;
  line-height:1.5;
}

.index-nav{padding:1.1rem 0 2rem 0;}

.bestiary{
  list-style:none;
  margin:0;padding:0;
}
.rabbit{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem 1.4rem;
  cursor:pointer;
  color:var(--cream);
  transition:background .3s ease;
}
.rabbit:hover{background:rgba(255,43,214,0.06);}

.rabbit-art{
  flex:0 0 auto;
  width:54px;height:38px;
  display:block;
}
.rabbit-art svg{
  width:100%;height:100%;
  color:var(--cream);
  transition:filter .4s ease, transform .4s ease, color .4s ease;
  animation:breathe 4s ease-in-out infinite alternate;
}
.rabbit:nth-child(1) .rabbit-art svg{animation-delay:-0.5s;}
.rabbit:nth-child(2) .rabbit-art svg{animation-delay:-1.0s;}
.rabbit:nth-child(3) .rabbit-art svg{animation-delay:-1.5s;}
.rabbit:nth-child(4) .rabbit-art svg{animation-delay:-2.0s;}
.rabbit:nth-child(5) .rabbit-art svg{animation-delay:-2.5s;}
.rabbit:nth-child(6) .rabbit-art svg{animation-delay:-3.0s;}
.rabbit:nth-child(7) .rabbit-art svg{animation-delay:-3.5s;}

@keyframes breathe{
  from{transform:translateY(0);}
  to{transform:translateY(-1px);}
}

.rabbit.is-active .rabbit-art svg{
  color:var(--magenta);
  filter:drop-shadow(0 0 6px var(--magenta));
  transform:scale(1.05);
}
.rabbit.is-active{background:rgba(255,43,214,0.05);}
.rabbit.is-active .latin{color:var(--magenta);}

.rabbit-label{display:flex;flex-direction:column;gap:.1rem;}
.latin{
  font-family:"JetBrains Mono",monospace;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--cream);
  transition:color .4s ease;
}
.eng{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:0.9rem;
  color:var(--bronze);
  line-height:1.2;
}

.breadcrumb-mono{
  font-family:"JetBrains Mono",monospace;
  font-size:0.62rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--vein-grey);
  padding:1.4rem 1.4rem 0 1.4rem;
}

/* ---------- Drawer toggle (mobile) ---------- */
.drawer-toggle{
  position:fixed;
  top:1rem;left:1rem;
  z-index:60;
  display:none;
  background:rgba(11,4,16,0.85);
  border:1px solid var(--bronze);
  color:var(--cream);
  width:42px;height:42px;
  border-radius:50%;
  align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(4px);
}
.scrim{
  position:fixed;inset:0;
  background:rgba(11,4,16,0.7);
  z-index:35;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.scrim.open{opacity:1;pointer-events:auto;}

/* ---------- Reading column ---------- */
.reading-column{
  margin-left:320px;
  padding:5rem 2rem 4rem 2rem;
  max-width:1100px;
}

.alcove{
  position:relative;
  max-width:760px;
  margin:0 auto 5.5rem auto;
  padding:6rem 4rem 4rem;
}
/* The marble arch enclosing each alcove */
.alcove::before{
  content:"";
  position:absolute;
  inset:1.4rem .6rem 0 .6rem;
  border:2px solid var(--bronze);
  border-radius:240px 240px 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(181,146,100,0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(181,146,100,0.05) 0%, transparent 30%);
  box-shadow:inset 0 0 60px rgba(58,47,61,0.4);
  pointer-events:none;
  z-index:0;
}

.alcove-inner{
  position:relative;
  z-index:1;
}
/* Fluted columns flanking the body */
.alcove-inner::before,
.alcove-inner::after{
  content:"";
  position:absolute;
  top:2.5rem;bottom:0;
  width:14px;
  background:repeating-linear-gradient(90deg, var(--bronze) 0px, var(--bronze) 1px, transparent 1px, transparent 6px);
  opacity:0.5;
  pointer-events:none;
}
.alcove-inner::before{left:-2.6rem;}
.alcove-inner::after{right:-2.6rem;}

/* Pediment with Roman numeral */
.pediment{
  position:absolute;
  top:-1.4rem;left:50%;
  transform:translateX(-50%);
  width:96px;height:62px;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  background:linear-gradient(135deg, var(--bronze) 0%, #cdb088 35%, var(--bronze) 70%, #8f7048 100%);
  display:flex;
  align-items:flex-end;justify-content:center;
  z-index:2;
}
.numeral{
  font-family:"Cormorant Unicase",serif;
  font-weight:500;
  font-size:1.4rem;
  letter-spacing:0.04em;
  color:var(--crypt-violet);
  padding-bottom:.55rem;
  line-height:1;
}

.botanical{
  width:200px;
  margin:0 auto 1.6rem auto;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.botanical svg{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 0 14px rgba(58,255,231,0.08));
}
.alcove.revealed .botanical{
  opacity:1;
  transform:translateY(0);
}

.latin-tag{
  font-family:"JetBrains Mono",monospace;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bronze);
  text-align:center;
  margin:0 0 1.4rem 0;
  line-height:1.6;
}

.alcove-title{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  letter-spacing:0.012em;
  color:var(--cream);
  text-align:center;
  margin:0 0 1.4rem 0;
}
.alcove-title .rn{
  font-family:"Cormorant Unicase",serif;
  font-style:normal;
  color:var(--bronze);
  margin-right:.35rem;
}

.prose{
  max-width:56ch;
  margin:0 auto;
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-weight:400;
  color:var(--cream);
  text-align:center;
}
.prose p{
  margin:.55rem 0;
  line-height:1.78;
}

.neon-rule{
  border:none;
  height:1px;
  width:60%;
  margin:2.6rem auto 0 auto;
  background:linear-gradient(90deg, transparent, var(--magenta), transparent);
  box-shadow:0 0 8px rgba(255,43,214,0.5);
}

/* ---------- WAKE zone (alcove 7) ---------- */
.wake-zone{
  text-align:center;
  margin:2.2rem auto 0 auto;
}
.wake-pedestal{
  font-family:"JetBrains Mono",monospace;
  font-size:0.78rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--cream);
  background:linear-gradient(180deg, rgba(181,146,100,0.18), rgba(58,47,61,0.25));
  border:1px solid var(--bronze);
  padding:.95rem 2.4rem;
  cursor:pointer;
  transition:color 1.5s ease, text-shadow 1.5s ease, border-color 1.5s ease, background 1.5s ease;
}
.wake-pedestal:hover{
  border-color:var(--cream);
}
.wake-pedestal.is-erroring{
  color:var(--magenta);
  text-shadow:0 0 16px var(--magenta);
  border-color:var(--magenta);
  background:linear-gradient(180deg, rgba(255,43,214,0.14), rgba(58,47,61,0.25));
  transition:color 0s, text-shadow 0s, border-color 0s, background 0s;
}
.wake-error{
  font-family:"JetBrains Mono",monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--magenta);
  text-shadow:0 0 8px rgba(255,43,214,0.6);
  margin:1rem 0 0 0;
  min-height:1.2em;
  opacity:0;
  transition:opacity 1.5s ease;
}
.wake-error.show{
  opacity:1;
  transition:opacity 0s;
}

/* shake-error: the dopamine signature interaction */
@keyframes shake-error{
  0%{transform:translateX(0);}
  20%{transform:translateX(-4px);}
  40%{transform:translateX(4px);}
  60%{transform:translateX(-3px);}
  80%{transform:translateX(3px);}
  100%{transform:translateX(0);}
}
.reading-column.shaking{
  animation:shake-error .2s linear;
}

/* ---------- Footer ---------- */
.fin{
  text-align:center;
  margin-top:2rem;
}
.fin span{
  font-family:"Cormorant Garamond",serif;
  font-style:italic;
  font-size:1.3rem;
  color:var(--bronze);
  letter-spacing:0.04em;
  background:linear-gradient(90deg, var(--vein-grey), var(--bronze), var(--cream-dim), var(--bronze), var(--vein-grey));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .sidebar{
    transform:translateX(-100%);
    width:300px;
  }
  .sidebar.open{transform:translateX(0);}
  .drawer-toggle{display:flex;}
  .reading-column{
    margin-left:0;
    padding:4.5rem 1rem 3rem 1rem;
  }
  .alcove{
    padding:5rem 1.8rem 3rem;
  }
  .alcove-inner::before{left:-1.2rem;}
  .alcove-inner::after{right:-1.2rem;}
}

@media (max-width:560px){
  .alcove{padding:4.5rem 1rem 2.5rem;}
  .alcove::before{border-radius:160px 160px 0 0; inset:1rem .2rem 0 .2rem;}
  .alcove-inner::before,.alcove-inner::after{display:none;}
  .botanical{width:160px;}
  .prose{font-size:1rem;}
}

/* JS-disabled fallback: rabbits stay calm, all alcoves readable */
.no-js .botanical{opacity:1;transform:none;}