html, body { margin: 0; padding: 0; background: #2a1418; -webkit-font-smoothing: antialiased; }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
a { color: #8c2f3b; text-decoration: none; }
a:hover { color: #b0505c; }
p { margin: 0; }
figure { margin: 0; }

@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breathe { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------- cena ---------- */
.scene {
  position: relative; width: 100%; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center; padding: 14px;
  background: #faf3e1;
  font-family: 'Karla', system-ui, sans-serif; overflow: hidden;
}
.stars {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 18% 24%, rgba(226,184,122,.5), transparent),
    radial-gradient(1px 1px at 72% 38%, rgba(226,184,122,.35), transparent),
    radial-gradient(1px 1px at 41% 77%, rgba(226,184,122,.3), transparent),
    radial-gradient(1px 1px at 86% 82%, rgba(226,184,122,.25), transparent);
}

/* ---------- livro ---------- */
.book {
  position: relative; width: min(92vw, 400px);
  height: min(88vh, 700px); height: min(88dvh, 700px);
  perspective: 1600px; perspective-origin: 50% 50%;
}
.book-base {
  position: absolute; inset: 0; border-radius: 6px 12px 12px 6px; background: #e9dcc7;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.7), 0 4px 14px rgba(0,0,0,.4);
}
.book-edge {
  position: absolute; top: 4px; right: -5px; bottom: 4px; width: 7px; border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(to right, #efe6d4 0 1px, #d7c9ae 1px 2px);
}

/* ---------- página ---------- */
.page {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 6px 12px 12px 6px;
  background: linear-gradient(105deg, #f6eede 0%, #f3e9d6 45%, #efe2cc 100%);
}
.page.flip-page {
  transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform .85s cubic-bezier(.3,.05,.2,1);
}
.page.flip-page.is-dragging { transition: none; }
.page.flip-page.is-flipped { transform: rotateY(-168deg); z-index: 0; }
.page.flip-page > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.page-texture {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    repeating-linear-gradient(94deg, rgba(120,90,60,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(6deg, rgba(120,90,60,.04) 0 1px, transparent 1px 5px),
    radial-gradient(90% 70% at 30% 20%, rgba(255,255,255,.6), transparent 70%);
}
.page-gutter {
  position: absolute; left: 0; top: 0; bottom: 0; width: 34px; pointer-events: none;
  background: linear-gradient(to right, rgba(90,50,40,.22), rgba(90,50,40,.06) 45%, transparent);
}
.page-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 40px rgba(120,80,50,.14); pointer-events: none; }

.page-content {
  position: relative; height: 100%; display: flex; flex-direction: column;
  gap: clamp(7px, 1.7vh, 14px);
  padding: clamp(16px, 4vh, 30px) 26px clamp(14px, 3.4vh, 26px) 36px;
}
.chapter { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.chapter-label { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #a8694f; }
.chapter-title {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-size: clamp(21px, 3.8vh, 27px);
  font-weight: 500; color: #4a2226; line-height: 1.15;
}
.chapter-rule { width: 52px; height: 1px; margin-top: 6px; background: linear-gradient(to right, transparent, #c39a5e, transparent); }

/* ---------- polaroids ---------- */
.polaroid-wrap { display: flex; justify-content: center; margin-top: 2px; }
.polaroid { position: relative; }
.polaroid--small {
  transform: rotate(-2.2deg); padding: 8px 8px clamp(16px, 3vh, 26px); background: #fffdf7;
  box-shadow: 0 8px 18px -8px rgba(80,40,30,.5), 0 1px 2px rgba(80,40,30,.25);
}
.polaroid--cover {
  transform: rotate(-3deg); padding: 10px 10px clamp(22px, 4.2vh, 34px); background: #fbf5e9;
  box-shadow: 0 16px 28px -12px rgba(0,0,0,.65);
}
.tape {
  position: absolute; top: -9px; left: 50%; z-index: 2; transform: translateX(-50%) rotate(1.5deg);
  width: 58px; height: 17px; background: rgba(200,150,120,.34);
  border-left: 1px dashed rgba(150,100,80,.25); border-right: 1px dashed rgba(150,100,80,.25);
}
.tape--cover {
  top: -11px; transform: translateX(-50%) rotate(-2deg); width: 74px; height: 21px;
  background: rgba(226,190,132,.42);
  border-left-color: rgba(120,80,50,.3); border-right-color: rgba(120,80,50,.3);
}
.photo { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo--small {
  width: clamp(118px, 21vh, 158px); height: clamp(78px, 14vh, 106px); background-color: #e7dbc6;
  background-image: repeating-linear-gradient(45deg, rgba(150,115,80,.16) 0 6px, transparent 6px 12px);
}
.photo--cover {
  width: clamp(130px, 23vh, 176px); height: clamp(112px, 20vh, 152px); background-color: #e3d5bd;
  background-image: repeating-linear-gradient(45deg, rgba(140,105,72,.17) 0 6px, transparent 6px 12px);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo--video { width: clamp(200px, 62vw, 260px); height: auto; aspect-ratio: 16 / 9; background-color: #000; }
.photo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.photo-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 8.5px; letter-spacing: .08em;
  color: #8a6a4c; background: rgba(255,253,247,.8); padding: 3px 6px;
}
.polaroid-caption {
  position: absolute; left: 0; right: 0; bottom: 9px; text-align: center;
  font-family: 'La Belle Aurore', cursive; font-size: 13px; color: #8c2f3b;
}

/* ---------- texto da página ---------- */
.story {
  display: flex; flex-direction: column; gap: clamp(6px, 1.5vh, 11px); margin-top: 2px;
  font-family: 'Cormorant Garamond', serif; font-size: clamp(14px, 2.4vh, 17.5px);
  line-height: 1.55; color: #453036; text-wrap: pretty;
}
.riscado {
  text-decoration: line-through;
}
.highlight { background: linear-gradient(to top, rgba(198,110,110,.28) 0 44%, transparent 44%); padding: 0 2px; }
.signoff { margin-top: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; }
.signoff-text { font-family: 'La Belle Aurore', cursive; font-size: 17px; color: #8c2f3b; line-height: 1.4; }
.signoff-date { font-family: ui-monospace, Menlo, monospace; font-size: 8px; letter-spacing: .18em; color: #b09a7a; }
.page-number {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif; font-size: 11px; color: #b6a184;
}
.margin-note {
  position: absolute; right: 8px; top: 46%; white-space: nowrap;
  font-family: 'La Belle Aurore', cursive; font-size: 12px; color: #c99a8e;
  transform: rotate(90deg); transform-origin: right center;
}

/* ---------- capa ---------- */
.cover {
  position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: 6px 12px 12px 6px;
  transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: rotateY(0deg);
  transition: transform .85s cubic-bezier(.3,.05,.2,1);
  background: linear-gradient(140deg, #6b2530 0%, #571d27 42%, #40151d 100%);
  box-shadow: 0 26px 50px -20px rgba(0,0,0,.75);
}
.cover.is-dragging { transition: none; }
.cover.is-flipped { transform: rotateY(-168deg); z-index: 0; }
.cover > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cover-texture {
  position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image:
    repeating-linear-gradient(112deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(22deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
}
.cover-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 22px; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,.42), rgba(0,0,0,.08) 60%, transparent);
}
.cover-frame { position: absolute; pointer-events: none; }
.cover-frame--outer { inset: 13px; border: 1px solid rgba(214,172,110,.4); border-radius: 3px; }
.cover-frame--inner { inset: 18px; border: 1px solid rgba(214,172,110,.16); border-radius: 2px; }

.cover-content {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: clamp(6px, 1.4vh, 10px); text-align: center;
  padding: clamp(22px, 5.5vh, 46px) 30px clamp(18px, 4.2vh, 34px);
  opacity: 1; transition: opacity .25s ease .3s;
}
.cover.is-flipped .cover-content { opacity: 0; }
.cover-top { display: flex; flex-direction: column; align-items: center; gap: clamp(7px, 1.7vh, 12px); }
.cover-date { font-family: ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: .34em; color: rgba(226,190,132,.75); }
.cover-title {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(33px, 6.4vh, 44px); line-height: 1.05; color: #f3e3cb; letter-spacing: .01em;
}
.cover-ornament { display: flex; align-items: center; gap: 9px; }
.cover-ornament .line { display: block; width: 34px; height: 1px; }
.cover-ornament .line--l { background: linear-gradient(to right, transparent, #d6ac6e); }
.cover-ornament .line--r { background: linear-gradient(to left, transparent, #d6ac6e); }
.cover-ornament .heart { color: #d6ac6e; font-size: 9px; }
.cover-subtitle {
  font-weight: 300; font-size: 11px; letter-spacing: .13em; line-height: 1.7;
  color: rgba(240,222,196,.82); max-width: 240px; text-transform: uppercase;
}
.cover-dedication {
  display: flex; flex-direction: column; gap: 2px; line-height: 1.5;
  font-family: 'La Belle Aurore', cursive; font-size: clamp(14px, 2.4vh, 16px); color: rgba(243,227,203,.92);
}
.cover-dedication-to { color: #e2be84; }

/* ---------- navegação ---------- */
.tap-zone { position: absolute; top: 0; bottom: 0; z-index: 40; }
.tap-zone--prev { left: 0; width: 32%; cursor: w-resize; }
.tap-zone--next { right: 0; width: 42%; cursor: e-resize; }

.arrow {
  position: absolute; bottom: 9px; z-index: 50; width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 50%; background: transparent; color: #a8785a;
  font-family: 'Cormorant Garamond', serif; font-size: 17px; line-height: 1; cursor: pointer;
  opacity: .6; transition: opacity .3s, color .3s;
}
.arrow--prev { left: 10px; }
.arrow--next { right: 10px; }
.arrow:hover { color: #8c2f3b; }
.arrow.is-hidden { opacity: 0; pointer-events: none; }
.book:not(.is-open) .arrow--next { color: #d6ac6e; }

.dots { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); display: flex; gap: 7px; z-index: 50; }
.dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: #e2be84; opacity: .3; transition: opacity .4s; }
.dot.is-active { opacity: 1; }

/* ---------- abertura ---------- */
.intro {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 22px; padding: 30px; text-align: center; cursor: pointer;
  background: radial-gradient(90% 70% at 50% 45%, #3a1c22 0%, #1d0e11 100%);
  transition: opacity .9s ease, visibility 0s linear 0s;
}
.intro.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.intro:focus { outline: none; }
.intro-text { font-family: 'La Belle Aurore', cursive; font-size: 24px; line-height: 1.5; color: #f0dec4; max-width: 300px; animation: riseIn 1.2s ease both; }
.intro-rule { width: 40px; height: 1px; background: linear-gradient(to right, transparent, #d6ac6e, transparent); animation: riseIn 1.2s .4s ease both; }
.intro-cta { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(226,190,132,.9); animation: riseIn 1.2s .8s ease both; }
.intro-heart { font-size: 13px; color: #8c2f3b; animation: breathe 2.6s 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cover, .cover-content, .intro { transition-duration: .01s; }
  .intro-text, .intro-rule, .intro-cta, .intro-heart { animation: none; }
}