:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #10060b;
  --ease-cinematic: cubic-bezier(.2,.72,.18,1);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background:
    radial-gradient(circle at 50% 38%, rgba(116, 42, 48, .22), transparent 42%),
    linear-gradient(145deg, #080307, #1b0810 55%, #070305);
}

button, input { font: inherit; }

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  perspective: 1800px;
  isolation: isolate;
}

.ambient {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(177,105,58,.15), transparent 45%);
  filter: blur(40px);
  animation: breathe 6s ease-in-out infinite alternate;
}

.book {
  position: relative;
  width: min(100vw, calc(100svh * .5625));
  height: min(100svh, calc(100vw * 1.7778));
  max-height: 100svh;
  transform-style: preserve-3d;
  transition: transform 1.2s var(--ease-cinematic);
}

.book-shadow {
  position: absolute;
  inset: 4% -5% -3%;
  background: #000;
  filter: blur(28px);
  opacity: .7;
  transform: translateZ(-18px);
  transition: opacity 1s ease, transform 1.4s ease;
}

.outer-cover, .inner-cover, .page {
  position: absolute;
  inset: 0;
  border-radius: 3px 12px 12px 3px;
  overflow: hidden;
  transform-origin: 1.7% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.outer-cover { z-index: 10; transition: transform 1.75s var(--ease-cinematic), filter 1s ease; }
.cover-face { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; }
.cover-front { background: #48131b; }
.cover-back { transform: rotateY(180deg); background: linear-gradient(90deg, #18070d, #57202a 8%, #281017); box-shadow: inset -24px 0 35px rgba(0,0,0,.55); }
.cover-front > img:not(.key), .inner-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clean-cover, .locked-cover { position: absolute; inset: 0; }
.locked-cover { z-index: 2; transition: opacity 3.4s cubic-bezier(.42,0,.24,1) 4.15s; }

.lock-hit {
  position: absolute;
  z-index: 15;
  left: 36%; top: 32%; width: 33%; height: 29%;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lock-hit::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,196,95,.38); animation: pulse 2.4s ease-out infinite;
}

.hint {
  position: absolute; z-index: 14; left: 50%; top: 62%; transform: translateX(-50%);
  color: #f2d8ae; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(.68rem, 2.3vw, .82rem);
  text-shadow: 0 2px 10px #000; opacity: .86; white-space: nowrap; transition: opacity .4s ease;
}

.password-panel {
  position: absolute; z-index: 30; left: 50%; top: 53%; width: min(78%, 310px);
  padding: 1rem 1.05rem .85rem; transform: translate(-50%, 16px) scale(.96);
  border: 1px solid rgba(225,177,102,.44); border-radius: 14px;
  background: linear-gradient(145deg, rgba(21,5,11,.94), rgba(61,17,24,.9));
  box-shadow: 0 18px 50px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: .5s var(--ease-cinematic);
}

.password-panel.visible { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.password-panel label { display: block; color: #f0d6ad; margin-bottom: .7rem; text-align: center; font-style: italic; font-size: 1rem; }
.password-row { display: flex; gap: .45rem; }
.password-row input { min-width: 0; flex: 1; color: #fff5df; background: rgba(0,0,0,.33); border: 1px solid rgba(218,167,88,.45); border-radius: 9px; padding: .72rem .9rem; outline: none; font-size: 1rem; }
.password-row input:focus { border-color: #e3b96f; box-shadow: 0 0 0 3px rgba(219,160,69,.12); }
.password-row button, .inner-copy button, .paper-content button { border: 1px solid #b47b32; color: #231109; background: linear-gradient(#e6c17a, #aa712b); border-radius: 9px; cursor: pointer; min-width: 46px; }
.password-panel p { min-height: 1em; margin: .65rem 0 0; color: #c8a98a; text-align: center; font-size: .78rem; }
.password-panel.shake { animation: shake .38s ease; }

.root, .lock-piece {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: url("./assets/capa-fechada.png") center/100% 100% no-repeat;
  opacity: 0;
}
.root-a { clip-path: polygon(26% 26%, 42% 23%, 54% 38%, 64% 51%, 56% 55%, 44% 43%, 35% 29%); }
.root-b { clip-path: polygon(25% 42%, 33% 39%, 71% 42%, 77% 49%, 64% 51%, 31% 47%); }
.root-c { clip-path: polygon(30% 49%, 41% 42%, 51% 39%, 65% 34%, 73% 36%, 63% 44%, 43% 53%); }
.root-d { clip-path: polygon(49% 32%, 56% 35%, 71% 51%, 66% 57%, 55% 45%); }
.lock-piece { clip-path: ellipse(18% 18% at 51% 45%); transform-origin: 51% 35%; }

.key {
  position: absolute; z-index: 12; width: 30%; height: auto; left: 35.2%; top: 25.7%;
  opacity: 0;
  transform: translate(155%, -92%) rotate(52deg) scale(.72);
  transform-origin: 52% 82%;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.7));
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.sparkles { position: absolute; inset: 0; z-index: 13; pointer-events: none; }
.sparkles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd690; box-shadow: 0 0 12px #ffb74f; opacity: 0; }
.sparkles i:nth-child(1) { left: 46%; top: 44%; }.sparkles i:nth-child(2) { left: 55%; top: 40%; }.sparkles i:nth-child(3) { left: 61%; top: 47%; }
.sparkles i:nth-child(4) { left: 42%; top: 52%; }.sparkles i:nth-child(5) { left: 58%; top: 55%; }.sparkles i:nth-child(6) { left: 50%; top: 36%; }

.unlocking .password-panel, .unlocking .hint, .unlocking .lock-hit { opacity: 0; pointer-events: none; }
.unlocking .root, .unlocking .lock-piece { opacity: 1; }
.unlocking .locked-cover { opacity: 0; }
.unlocking .key { animation: keyEnter 9.1s linear forwards; }
.unlocking .root-a { animation: rootA 3.45s cubic-bezier(.45,.03,.18,1) 4.2s forwards; }
.unlocking .root-b { animation: rootB 3.65s cubic-bezier(.45,.03,.18,1) 4.3s forwards; }
.unlocking .root-c { animation: rootC 3.55s cubic-bezier(.45,.03,.18,1) 4.25s forwards; }
.unlocking .root-d { animation: rootD 3.4s cubic-bezier(.45,.03,.18,1) 4.38s forwards; }
.unlocking .lock-piece { animation: lockRelease 2.35s cubic-bezier(.42,0,.25,1) 7.15s forwards; }
.unlocking .sparkles i { animation: sparkle 1.6s ease-out 3.35s; }
.unlocking .sparkles i:nth-child(2n) { animation-delay: 3.52s; }

.book.opened { transform: translateX(18%); }
.book.opened .outer-cover { transform: rotateY(-166deg); filter: brightness(.72); }
.book.opened .book-shadow { opacity: .42; transform: translateX(-16%) translateZ(-18px) scaleX(1.35); }

.inner-cover { z-index: 5; background: #111; transition: transform 1.55s var(--ease-cinematic), filter 1s ease; }
.inner-cover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 20px 0 30px rgba(0,0,0,.55); pointer-events: none; }
.inner-copy { position: absolute; inset: 16% 12% auto; text-align: center; color: #ead2a2; text-shadow: 0 2px 12px #000; }
.inner-copy p { margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .32em; font-size: clamp(.7rem, 2.4vw, .9rem); }
.inner-copy h1 { margin: 0; font-weight: 400; font-size: clamp(2rem, 8vw, 4rem); line-height: .98; }
.inner-copy button, .paper-content button { margin-top: 1.5rem; padding: .7rem 1.1rem; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }

.page { z-index: 3; background: #e5cfaa; color: #3a211a; box-shadow: inset 18px 0 28px rgba(67,31,20,.25); transition: transform 1.45s var(--ease-cinematic); }
.page-one { z-index: 4; }
.page-two { z-index: 3; background: #d8bd91; }
.paper-content { position: absolute; inset: 13% 11%; display: flex; flex-direction: column; justify-content: center; text-align: center; border: 1px solid rgba(92,48,31,.26); padding: 12%; background: radial-gradient(circle, rgba(255,255,255,.24), transparent 62%); }
.paper-content::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(92,48,31,.12); }
.paper-content .chapter { color: #8f2638; font-size: 1rem; letter-spacing: .2em; }
.paper-content h2 { font-size: clamp(1.8rem, 7vw, 3.6rem); font-weight: 400; line-height: 1; margin: 1rem 0; }
.paper-content p { font-size: clamp(1rem, 3.4vw, 1.3rem); line-height: 1.6; }
.page.turned { transform: rotateY(-164deg); }

.skip { position: fixed; z-index: 50; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); border: 0; color: rgba(255,238,207,.72); background: rgba(15,5,9,.55); padding: .6rem .8rem; border-radius: 999px; backdrop-filter: blur(8px); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s; }
.unlocking ~ .skip, .stage:has(.unlocking) .skip { opacity: 1; pointer-events: auto; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,196,95,.4); } 70%,100% { box-shadow: 0 0 0 28px rgba(255,196,95,0); } }
@keyframes breathe { to { transform: scale(1.08); opacity: .7; } }
@keyframes shake { 25% { transform: translate(-53%,0); } 75% { transform: translate(-47%,0); } }
@keyframes keyEnter {
  0% { opacity: 0; transform: translate(155%,-92%) rotate(52deg) scale(.72); filter: drop-shadow(0 10px 14px rgba(0,0,0,.7)); }
  8% { opacity: 1; }
  25% { opacity: 1; transform: translate(15%,-13%) rotate(5deg) scale(.72); }
  34% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(.72); filter: drop-shadow(0 5px 8px rgba(0,0,0,.65)); }
  42% { opacity: 1; transform: translate(0,0) rotate(31deg) scale(.72); filter: drop-shadow(4px 5px 8px rgba(0,0,0,.6)); }
  76% { opacity: 1; transform: translate(0,0) rotate(31deg) scale(.72); }
  84% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(.72); }
  100% { opacity: 0; transform: translate(112%,-54%) rotate(34deg) scale(.68); }
}
@keyframes rootA { 0% { transform: translate(0) rotate(0); opacity: 1; } 18% { transform: translate(-1%,1%) rotate(-1deg); } 100% { transform: translate(-31%,-22%) rotate(-15deg); opacity: 0; } }
@keyframes rootB { 0% { transform: translate(0) rotate(0); opacity: 1; } 16% { transform: translate(-1%,0) rotate(1deg); } 100% { transform: translate(-39%,5%) rotate(8deg); opacity: 0; } }
@keyframes rootC { 0% { transform: translate(0) rotate(0); opacity: 1; } 20% { transform: translate(1%,0) rotate(-1deg); } 100% { transform: translate(38%,-11%) rotate(-11deg); opacity: 0; } }
@keyframes rootD { 0% { transform: translate(0) rotate(0); opacity: 1; } 18% { transform: translate(1%,1%) rotate(1deg); } 100% { transform: translate(34%,23%) rotate(16deg); opacity: 0; } }
@keyframes lockRelease {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  18% { transform: translateY(-1%) rotate(-4deg); }
  36% { transform: translateY(0) rotate(5deg); }
  53% { transform: translateY(1%) rotate(-6deg); }
  70% { transform: translateY(3%) rotate(9deg); opacity: 1; }
  100% { transform: translateY(52%) rotate(18deg); opacity: 0; }
}
@keyframes sparkle { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-45px) scale(1.8); } }

@media (min-width: 800px) {
  .book { width: min(48vw, calc(92vh * .5625)); height: min(92vh, calc(48vw * 1.7778)); }
  .book.opened { transform: translateX(48%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}