*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#090706;
  --bg2:#120d09;
  --gold:#d2b18a;
  --gold-soft:#a88b6c;
  --paper:#e7d7bd;
  --paper2:#d7c3a4;
  --ink:#403126;
  --muted:#8d7862;
  --red:#681c1c;
}
html,body{width:100%;height:100%;overflow:hidden}
body{
  background:var(--bg);
  color:#eee;
  font-family:Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit}
.scene{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  transform:scale(1.025);
  transition:opacity 1.15s ease,transform 1.15s ease,visibility 1.15s;
  overflow:hidden;
}
.scene.active{visibility:visible;opacity:1;transform:scale(1)}
.topbar{
  position:fixed;
  z-index:50;
  top:25px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  padding:0 30px;
  pointer-events:none;
}
.round-btn{
  pointer-events:auto;
  width:36px;height:36px;
  border:1px solid rgba(221,194,159,.32);
  border-radius:50%;
  background:rgba(10,8,7,.38);
  color:#d5bea0;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:.35s;
}
.round-btn:hover{background:rgba(210,177,138,.1);transform:translateY(-2px)}
.grain,.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:40
}
.grain{
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.vignette{background:radial-gradient(circle,transparent 38%,rgba(0,0,0,.58) 100%)}
.ambient{
  position:fixed;width:520px;height:520px;border-radius:50%;
  filter:blur(110px);opacity:.14;pointer-events:none
}
.ambient-one{background:#7d321c;left:4%;bottom:-20%}
.ambient-two{background:#42191b;right:0;top:5%}
#particles{position:fixed;inset:0;pointer-events:none;z-index:1}
.particle{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#d5a66c;opacity:0;
  animation:float 7s linear infinite
}
@keyframes float{
  0%{opacity:0;transform:translateY(25px) scale(.4)}
  20%{opacity:.7}
  80%{opacity:.15}
  100%{opacity:0;transform:translateY(-170px) translateX(30px) scale(1)}
}

/* INTRO */
.scene-intro{
  flex-direction:column;
  background:
    radial-gradient(circle at 50% 56%,rgba(126,64,29,.16),transparent 25%),
    linear-gradient(180deg,#080605,#0b0806 60%,#070504);
}
.intro-copy{text-align:center;z-index:3;margin-bottom:30px}
.eyebrow{
  color:#a88c70;text-transform:uppercase;letter-spacing:.22em;
  font-size:9px;margin-bottom:14px
}
.intro-copy h1,.end-card h2{
  font:500 clamp(37px,5vw,65px)/.86 "Cormorant Garamond",serif;
  color:#dfc9ab;letter-spacing:.01em
}
.intro-copy h1 em,.end-card h2 em{font-style:italic;color:#f0ddc1}
.ornament{display:flex;align-items:center;justify-content:center;gap:11px;color:#c2a47f;margin-top:16px}
.ornament span{width:55px;height:1px;background:linear-gradient(90deg,transparent,#8f7255)}
.ornament span:last-child{transform:scaleX(-1)}
.envelope-button{
  position:relative;
  width:min(360px,78vw);
  aspect-ratio:1.48;
  border:0;background:none;cursor:pointer;z-index:4;
  perspective:1000px;
  transition:.5s
}
.envelope-button:hover{transform:translateY(-8px)}
.envelope-shadow{
  position:absolute;left:8%;right:8%;bottom:-15px;height:25px;
  background:#000;filter:blur(18px);opacity:.75
}
.envelope{
  position:absolute;inset:0;
  filter:drop-shadow(0 25px 22px rgba(0,0,0,.58));
  transform-style:preserve-3d
}
.env-back,.env-left,.env-right,.env-bottom,.env-flap,.paper-inside{
  position:absolute;inset:0
}
.env-back{
  background:linear-gradient(145deg,#bca584,#d9c5a4 48%,#a68d6d);
  border-radius:3px
}
.env-left{clip-path:polygon(0 0,50% 53%,0 100%);background:linear-gradient(145deg,#d8c4a4,#b89e7d)}
.env-right{clip-path:polygon(100% 0,50% 53%,100% 100%);background:linear-gradient(225deg,#d5c09f,#aa906f)}
.env-bottom{clip-path:polygon(0 100%,50% 48%,100% 100%);background:linear-gradient(#c8af8e,#9f8566)}
.paper-inside{
  inset:6% 10% 8%;
  z-index:1;
  background:linear-gradient(110deg,#efe3cc,#d9c5a3);
  color:#604b39;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:italic 25px "Cormorant Garamond",serif;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  transform:translateY(13%);
  transition:1s cubic-bezier(.2,.8,.2,1)
}
.paper-inside small{font-size:15px;margin-top:8px}
.env-flap{
  z-index:4;transform-origin:top;
  clip-path:polygon(0 0,100% 0,50% 65%);
  background:linear-gradient(180deg,#dfc9a7,#bda27f);
  transition:transform 1s cubic-bezier(.18,.82,.2,1)
}
.wax{
  position:absolute;z-index:7;left:50%;top:53%;
  width:64px;height:64px;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#a34a3d,#6d1919 55%,#421010);
  box-shadow:inset -4px -5px 7px rgba(0,0,0,.3),0 9px 13px rgba(0,0,0,.4);
  transition:.5s
}
.wax-inner{
  position:absolute;inset:7px;border:1px solid rgba(239,184,159,.28);
  border-radius:50%;display:grid;place-items:center;color:#d99b82;
  font:23px "Cormorant Garamond",serif
}
.envelope-button.opening{pointer-events:none}
.envelope-button.opening .env-flap{transform:rotateX(180deg)}
.envelope-button.opening .paper-inside{transform:translateY(-48%)}
.envelope-button.opening .wax{opacity:0;transform:translate(-50%,-50%) scale(.65)}
.open-label{
  z-index:3;margin-top:27px;color:#a28b73;
  font:italic 20px "Cormorant Garamond",serif
}
.open-label span{font-size:15px}

/* TRANSITION */
.scene-transition{background:#0a0705}
.floating-letter{
  width:min(470px,78vw);aspect-ratio:.72;
  perspective:1000px;
  animation:letterZoom 2.15s cubic-bezier(.2,.8,.2,1) forwards
}
.mini-paper{
  width:100%;height:100%;
  background:linear-gradient(120deg,#eadbc2,#cdb797);
  color:#574534;
  box-shadow:0 35px 60px rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  font:italic 42px "Cormorant Garamond",serif;
  transform:rotateX(14deg) rotateZ(-2deg)
}
.mini-paper b{font-weight:400;font-size:25px;margin-top:12px}
@keyframes letterZoom{
  0%{transform:translateY(80px) scale(.72);opacity:0}
  20%{opacity:1}
  72%{transform:translateY(0) scale(1.05)}
  100%{transform:scale(1.9);opacity:0}
}

/* BOOK */
.scene-book{
  background:
    radial-gradient(circle at 50% 50%,rgba(119,63,31,.13),transparent 38%),
    #090706
}
.book-wrap{width:min(1120px,94vw);position:relative;z-index:3}
.book{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  min-height:min(650px,73vh);
  perspective:1800px;
  filter:drop-shadow(0 28px 35px rgba(0,0,0,.62))
}
.book::before{
  content:"";position:absolute;z-index:8;left:50%;top:1%;bottom:1%;width:18px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(58,34,20,.3),rgba(255,255,255,.13),rgba(40,22,12,.35),transparent);
  pointer-events:none
}
.book-spine{
  position:absolute;z-index:9;left:50%;top:2%;bottom:2%;width:3px;
  transform:translateX(-50%);background:rgba(72,42,25,.3)
}
.book-page{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%,rgba(117,81,47,.08),transparent 30%),
    radial-gradient(circle at 80% 75%,rgba(90,57,31,.07),transparent 35%),
    linear-gradient(100deg,#d6c1a0,#eadcc3 48%,#d7c2a3);
  color:var(--ink);
  box-shadow:inset 0 0 30px rgba(65,39,20,.13)
}
.page-left{border-radius:7px 0 0 7px}
.page-right{border-radius:0 7px 7px 0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.page-inner{
  min-height:100%;padding:clamp(35px,5vw,65px);
  display:flex;flex-direction:column;justify-content:center
}
.small-label{
  text-transform:uppercase;letter-spacing:.16em;color:#8d7357;font-size:8px;margin-bottom:14px
}
.page-inner h2{
  font:italic 500 clamp(42px,5vw,63px)/.9 "Cormorant Garamond",serif;
  margin-bottom:4px;color:#3e2e21
}
.heart-line{font:19px "Cormorant Garamond",serif;color:#8e5f45;margin:8px 0 17px}
.page-inner p{
  max-width:420px;font:400 clamp(18px,2vw,23px)/1.48 "Cormorant Garamond",serif
}
.second-paragraph{margin-top:13px}
.page-signature{
  margin-top:25px;font:italic 17px "Cormorant Garamond",serif;color:#775b42
}
.page-date{
  margin-top:10px;color:#8d7760;letter-spacing:.13em;font-size:8px
}
.page-corner{
  position:absolute;left:22px;top:20px;width:35px;height:35px;
  border-left:1px solid rgba(91,61,36,.28);border-top:1px solid rgba(91,61,36,.28)
}
.photo-mat{
  width:min(75%,390px);padding:11px 11px 26px;
  background:#efe4d1;box-shadow:0 17px 30px rgba(49,29,16,.25);
  transform:rotate(1.4deg)
}
.photo-mat img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:saturate(.82) contrast(1.03);
  opacity:0;transform:scale(1.02);filter:blur(7px) saturate(.75);
  transition:opacity 1.3s ease,filter 1.3s ease,transform 1.3s ease
}
.photo-mat img.show{opacity:1;transform:scale(1);filter:blur(0) saturate(.82) contrast(1.03)}
.photo-caption{
  margin-top:17px;color:#765d47;font:italic 18px "Cormorant Garamond",serif
}
.page-number{
  position:absolute;right:28px;bottom:22px;color:#947c63;font-size:9px;letter-spacing:.15em
}
.book-nav{
  display:flex;align-items:center;justify-content:center;gap:22px;margin-top:24px
}
.nav-arrow,.turn-btn,.outline-btn{
  border:1px solid rgba(211,178,140,.3);background:rgba(255,255,255,.025);
  color:#cbb396;cursor:pointer;transition:.35s
}
.nav-arrow{
  width:38px;height:38px;border-radius:50%
}
.turn-btn{padding:11px 20px;border-radius:30px;font-size:11px;letter-spacing:.06em}
.turn-btn span{margin-left:10px}
.nav-arrow:hover,.turn-btn:hover,.outline-btn:hover{background:rgba(211,178,140,.09);transform:translateY(-2px)}
.book-dots{display:flex;gap:7px}
.dot{width:5px;height:5px;border-radius:50%;background:#514336;transition:.3s}
.dot.active{background:#c8a47e;transform:scale(1.4)}
.turning .page-right{animation:pageTurn .9s cubic-bezier(.2,.8,.2,1)}
@keyframes pageTurn{
  0%{transform:rotateY(0);filter:brightness(1)}
  45%{transform:rotateY(-82deg);filter:brightness(.7)}
  100%{transform:rotateY(0);filter:brightness(1)}
}

/* END */
.scene-end{
  background:radial-gradient(circle at 50% 50%,rgba(111,53,29,.15),transparent 35%),#090706
}
.end-card{text-align:center;max-width:650px;padding:30px}
.end-card h2{font-size:clamp(44px,6vw,74px);line-height:.94}
.end-card p{margin-top:23px;color:#9c8770;font:italic 20px "Cormorant Garamond",serif}
.outline-btn{margin-top:30px;border-radius:30px;padding:11px 24px;font-size:10px;text-transform:uppercase;letter-spacing:.12em}

/* RESPONSIVE */
@media(max-width:760px){
  .topbar{padding:17px 18px}
  .intro-copy{margin-bottom:20px}
  .intro-copy h1{font-size:42px}
  .envelope-button{width:76vw}
  .book-wrap{width:94vw}
  .book{grid-template-columns:1fr;min-height:auto}
  .book::before,.book-spine{display:none}
  .book-page{min-height:42vh}
  .page-left{border-radius:7px 7px 0 0}
  .page-right{border-radius:0 0 7px 7px;padding:22px}
  .page-inner{padding:28px 25px}
  .page-inner h2{font-size:43px}
  .page-inner p{font-size:19px}
  .photo-mat{width:min(68%,280px)}
  .photo-caption{margin-top:10px}
  .book-nav{margin-top:14px}
  .turn-btn{padding:10px 16px}
}