:root{--cream:#f0e5ce;--paper:#efe1c3;--brass:#b89a58;--green:#0f5132}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Georgia,"Times New Roman",serif}
.institute{height:100vh;height:100svh;background:#000;color:var(--cream);overflow:hidden}
.fade{position:fixed;inset:0;background:#000;z-index:999;animation:fade 2.4s ease forwards}
@keyframes fade{0%,58%{opacity:1}100%{opacity:0;visibility:hidden}}

.world{position:absolute;inset:0;overflow:hidden}
.world:before{
  content:"";
  position:absolute;
  left:50%;
  top:64%;
  width:min(360px,68vw);
  height:96px;
  z-index:5;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,.98),rgba(0,0,0,.82) 48%,rgba(0,0,0,0) 78%);
}
.bg{
  position:absolute;inset:-3%;
  background:url("./assets/library-background.png") center/cover no-repeat;
  filter:brightness(.74) contrast(1.15);
  transform:scale(1.02);
  transition:transform 5.8s cubic-bezier(.16,1,.3,1),filter 5.8s ease;
}
.world.open .bg{
  transform:scale(1.18) translateY(-2.5vh);
  filter:brightness(.62) contrast(1.25);
}
.veil{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 48%,transparent 0 20%,rgba(0,0,0,.10) 34%,rgba(0,0,0,.78) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.52),transparent 34%,rgba(0,0,0,.72));
}
.veil:after{
  content:"";position:absolute;left:50%;top:-8vh;width:min(430px,40vw);height:78vh;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at top,rgba(255,220,155,.55),rgba(255,220,155,.13) 38%,transparent 72%);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  filter:blur(13px);
  animation:beam 7s infinite ease-in-out;
}
@keyframes beam{0%,100%{opacity:.28}50%{opacity:.46}}
#dust{position:absolute;inset:0;z-index:7;width:100%;height:100%;opacity:.86;pointer-events:none}

.journal-stage{
  position:absolute;inset:0;z-index:6;
  display:grid;place-items:end center;
  perspective:1400px;
  pointer-events:none;
}
.journal{
  position:relative;
  width:min(560px,74vw);
  aspect-ratio:1.38;
  margin-bottom:clamp(82px,13vh,150px);
  transform-style:preserve-3d;
  transform:translate3d(0,10vh,-330px) rotateX(64deg) scale(.62);
  opacity:.38;
  filter:sepia(.36) brightness(.72) contrast(1.18) drop-shadow(0 36px 42px rgba(0,0,0,.68));
  transition:
    transform 4.1s cubic-bezier(.16,1,.3,1),
    opacity 1.4s ease,
    filter 4.1s ease;
}
.world.open .journal{
  transform:translate3d(0,-5vh,120px) rotateX(8deg) scale(.98);
  opacity:1;
  filter:sepia(.28) brightness(.86) contrast(1.12) drop-shadow(0 56px 70px rgba(0,0,0,.84));
}
.world.reader-on .journal{
  opacity:.16;
  transform:translate3d(0,-8vh,80px) rotateX(18deg) scale(.96);
}
.journal-shadow{
  position:absolute;left:11%;right:11%;bottom:-10%;height:20%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.72),transparent 70%);
  transform:translateZ(-80px);
  opacity:.75;
  transition:opacity 3s ease,transform 4.1s cubic-bezier(.16,1,.3,1);
}
.world.open .journal-shadow{opacity:.36;transform:translateZ(-130px) scale(.82)}
.closed-book{
  position:absolute;
  left:50%;top:50%;
  width:122%;height:122%;
  object-fit:contain;
  transform:translate3d(-50%,-50%,70px);
  transform-origin:22% 52%;
  filter:brightness(.88) contrast(1.08) saturate(.92);
  backface-visibility:hidden;
  opacity:1;
  transition:
    opacity .9s ease 3.25s,
    transform 3.25s cubic-bezier(.18,.78,.18,1) .65s,
    filter 3.25s ease .65s;
}
.world.open .closed-book{
  opacity:0;
  transform:translate3d(-61%,-50%,92px) rotateY(-104deg) rotateZ(-2deg);
  filter:brightness(.72) contrast(1.06) saturate(.82);
}
.book-base{
  position:absolute;inset:0;transform-style:preserve-3d;
  opacity:0;
  transition:opacity 1.25s ease 1.45s;
}
.world.open .book-base{opacity:1}
.cover,.page-block,.open-pages{
  position:absolute;inset:5% 8%;
  border-radius:10px 18px 18px 10px;
}
.page-block{
  background:
    repeating-linear-gradient(to bottom,#b69d71 0 2px,#8f744c 2px 4px);
  box-shadow:inset -18px 0 30px rgba(87,55,25,.4),inset 0 -10px 22px rgba(52,30,15,.42);
  transform:translateZ(6px);
}
.spine{
  position:absolute;left:6%;top:7%;bottom:7%;width:13%;
  border-radius:12px 6px 6px 12px;
  background:linear-gradient(90deg,#2c1710,#6f331f 42%,#24110d);
  box-shadow:inset 12px 0 20px rgba(255,218,139,.08),inset -8px 0 20px rgba(0,0,0,.52);
  transform:translateZ(16px);
}
.cover{
  background:
    radial-gradient(circle at 54% 44%,rgba(229,180,92,.15),transparent 16%),
    linear-gradient(135deg,rgba(255,236,170,.14),transparent 28%),
    repeating-linear-gradient(18deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px),
    linear-gradient(90deg,#28120d,#6c2f1d 38%,#3b1911);
  border:1px solid rgba(219,191,118,.38);
  box-shadow:inset 0 0 0 7px rgba(54,25,16,.55),inset 0 0 0 9px rgba(190,151,73,.28),0 24px 46px rgba(0,0,0,.48);
  transform-origin:12% 50%;
  transform-style:preserve-3d;
}
.back-cover{transform:translateZ(12px)}
.front-cover{
  transform:translateZ(44px);
  overflow:hidden;
  backface-visibility:hidden;
  transition:transform 2.85s cubic-bezier(.18,.78,.18,1) 1.55s;
}
.front-cover:before{
  content:"";
  position:absolute;
  inset:-18% -14%;
  border-radius:inherit;
  background:
    radial-gradient(circle at 52% 42%,rgba(213,168,82,.16),transparent 18%),
    repeating-linear-gradient(18deg,rgba(255,230,154,.04) 0 1px,transparent 1px 6px),
    linear-gradient(90deg,#1b100c,#3a2117 46%,#130c09);
  filter:brightness(.82) contrast(1.12) saturate(.9);
  backface-visibility:hidden;
  opacity:.96;
  transform:translateZ(3px) scale(1.22);
}
.front-cover:after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.38),transparent 23%,rgba(255,219,146,.08) 55%,rgba(0,0,0,.24)),
    radial-gradient(circle at 52% 42%,transparent 0 30%,rgba(0,0,0,.28) 82%);
  transform:translateZ(5px);
}
.front-cover .corner,.front-cover .sigil,.front-cover .strap{opacity:0}
.world.open .front-cover{transform:translateZ(56px) rotateY(-104deg)}
.open-pages{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  padding:6% 7% 6% 29%;
  background:#bda477;
  box-shadow:inset 0 0 32px rgba(86,52,23,.38);
  transform:translateZ(28px);
  opacity:0;
  transition:opacity 1.45s ease 1.75s;
}
.world.open .open-pages{opacity:1}
.open-pages:before{
  content:"";
  position:absolute;
  left:5%;top:5%;bottom:5%;width:24%;
  border-radius:10px 4px 4px 10px;
  background:
    radial-gradient(circle at 50% 36%,rgba(214,170,86,.16),transparent 19%),
    repeating-linear-gradient(18deg,rgba(255,230,154,.045) 0 1px,transparent 1px 6px),
    linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.14) 32%,rgba(255,220,142,.08) 62%,rgba(0,0,0,.42)),
    linear-gradient(90deg,#17100c,#3b2216 45%,#120c09);
  box-shadow:
    inset -12px 0 18px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(215,174,91,.22);
  filter:brightness(.76) contrast(1.12) saturate(.9);
}
.open-pages:after{
  content:"";
  position:absolute;
  left:26.5%;top:7%;bottom:7%;width:3%;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(105,72,35,.34),transparent);
  filter:blur(.5px);
}
.page{
  border-radius:8px 4px 4px 8px;
  background:
    radial-gradient(circle at 22% 18%,rgba(96,63,29,.16),transparent 18%),
    radial-gradient(circle at 74% 72%,rgba(104,73,35,.12),transparent 22%),
    linear-gradient(90deg,rgba(92,58,26,.26),transparent 17%,rgba(105,70,35,.10) 84%,rgba(54,32,15,.24)),
    repeating-linear-gradient(to bottom,rgba(78,55,31,.12) 0 1px,transparent 1px 18px),
    #d2bd8e;
}
.right-page{border-radius:4px 8px 8px 4px}
.sigil{
  position:absolute;left:50%;top:50%;width:25%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(224,190,103,.58);
  border-radius:50%;
  box-shadow:0 0 24px rgba(213,167,79,.28),inset 0 0 18px rgba(213,167,79,.18);
}
.sigil:before,.sigil:after{
  content:"";position:absolute;inset:20%;
  border:1px solid rgba(224,190,103,.45);
  transform:rotate(45deg);
}
.sigil:after{inset:35%;border-radius:50%;transform:none}
.strap{
  position:absolute;left:14%;right:10%;height:5%;
  background:linear-gradient(90deg,rgba(32,15,10,.88),#9b7635 48%,rgba(32,15,10,.88));
  box-shadow:0 2px 8px rgba(0,0,0,.42);
}
.strap-top{top:18%}.strap-bottom{bottom:18%}
.corner{
  position:absolute;width:13%;aspect-ratio:1;border-color:rgba(224,190,103,.58);
}
.top-left{left:7%;top:9%;border-top:2px solid;border-left:2px solid}
.top-right{right:7%;top:9%;border-top:2px solid;border-right:2px solid}
.bottom-left{left:7%;bottom:9%;border-bottom:2px solid;border-left:2px solid}
.bottom-right{right:7%;bottom:9%;border-bottom:2px solid;border-right:2px solid}

.back{position:absolute;top:24px;left:24px;z-index:10;color:rgba(240,229,206,.66);text-decoration:none;text-transform:uppercase;letter-spacing:.18em;font-size:10px;transition:opacity 1s ease}
.world.open .back{opacity:0;pointer-events:none}
.title{position:absolute;top:6.2vh;left:50%;width:min(950px,94vw);transform:translateX(-50%);z-index:8;text-align:center;text-shadow:0 0 30px #000;transition:opacity 1.8s ease,transform 2.3s cubic-bezier(.16,1,.3,1)}
.world.open .title{opacity:0;transform:translateX(-50%) translateY(-30px)}
.title p{margin:0;letter-spacing:.32em;text-transform:uppercase;font-size:clamp(9px,1.4vw,12px);color:rgba(240,229,206,.78)}
.title h1{margin:12px 0 13px;color:#dfcf9d;letter-spacing:.13em;font-size:clamp(42px,7vw,104px);font-weight:400;line-height:.9}

.begin{
  position:absolute;left:50%;bottom:5.2vh;z-index:20;transform:translateX(-50%);
  padding:14px 29px;border:1px solid rgba(184,154,88,.72);border-radius:999px;
  background:rgba(0,0,0,.42);color:#dbc992;letter-spacing:.18em;text-transform:uppercase;
  font-size:11px;cursor:pointer;backdrop-filter:blur(10px);transition:opacity 1s ease;
}
.world.open .begin{opacity:0;pointer-events:none}

.reader{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(0,0,0,.58);
  opacity:0;visibility:hidden;
  transition:opacity 1.4s ease,visibility 1.4s ease;
}
.world.reader-on .reader{opacity:1;visibility:visible}
.reader>button{
  position:fixed;top:26px;left:50%;transform:translateX(-50%);
  border:1px solid rgba(240,229,206,.34);border-radius:999px;background:rgba(0,0,0,.42);
  color:var(--cream);padding:10px 18px;letter-spacing:.16em;text-transform:uppercase;font-size:10px;cursor:pointer;
}
.reader-card{
  position:relative;
  width:min(760px,88vw);
  min-height:min(560px,74vh);
  padding:clamp(58px,7vw,86px) clamp(42px,6vw,80px) clamp(82px,8vw,96px);
  background:radial-gradient(circle at 28% 18%,rgba(113,68,29,.12),transparent 18%),var(--paper);
  color:#18130f;
  box-shadow:0 50px 120px rgba(0,0,0,.78);
  transform:translateY(22px) scale(.98);
  transition:transform 1.35s cubic-bezier(.16,1,.3,1);
}
.world.reader-on .reader-card{transform:translateY(0) scale(1)}
.stamp{
  position:absolute;
  color:rgba(15,81,50,.34);
  border:1px solid rgba(15,81,50,.26);
  border-radius:2px;
  padding:7px 10px 6px;
  font-size:10px;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
  mix-blend-mode:multiply;
  transform:rotate(-2.5deg);
}
.stamp:after{
  content:"";
  position:absolute;inset:3px;
  border:1px solid rgba(15,81,50,.16);
}
.stamp-top{top:28px;left:30px}
.stamp-bottom{right:30px;bottom:28px;transform:rotate(2.25deg)}
.reader-card small{color:var(--green);letter-spacing:.26em;text-transform:uppercase;font-size:10px}
.reader-card h2{margin:26px 0 22px;font-size:clamp(34px,6vw,68px);font-weight:400;line-height:.98}
.reader-card p{max-width:460px;color:#463b2d;font-size:17px;line-height:1.7}
.reader-nav{
  position:absolute;
  left:clamp(42px,6vw,80px);
  right:clamp(42px,6vw,80px);
  bottom:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.reader-nav button{
  border:1px solid rgba(24,19,15,.24);
  background:rgba(255,255,255,.18);
  color:#2c241b;
  padding:9px 14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:10px;
  cursor:pointer;
}
.reader-nav button:disabled{opacity:.35;cursor:default}
.reader-nav span{
  color:rgba(70,59,45,.76);
  font-size:12px;
  letter-spacing:.18em;
}

@media (max-width:680px){
  .journal{width:min(430px,88vw);margin-bottom:clamp(118px,18vh,170px)}
  .world.open .journal{transform:translate3d(0,-12vh,110px) rotateX(10deg) scale(.9)}
  .reader-card{min-height:68vh;padding:62px 28px 86px}
  .stamp{font-size:8px;padding:6px 8px 5px;letter-spacing:.16em}
  .stamp-top{top:22px;left:22px}
  .stamp-bottom{right:22px;bottom:24px}
  .reader-nav{left:28px;right:28px;bottom:28px}
  .reader-nav button{padding:8px 10px;font-size:9px}
}