@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Quicksand:wght@400;500;600;700&display=swap');

:root{
  --paper:#fbf3e7;
  --paper-dark:#efe2cd;
  --ink:#4a3b2a;
  --accent:#c9536b;
  --accent-2:#7a8f5e;
  --gold:#c79a3f;
  --tape:#f3e0a8;
  --shadow: 0 10px 30px rgba(60,40,20,0.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: radial-gradient(circle at 20% 10%, #fff8ec 0%, var(--paper) 45%, var(--paper-dark) 100%);
  font-family:'Quicksand', sans-serif;
  color:var(--ink);
  min-height:100vh;
  overflow-x:hidden;
}

.screen{
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:24px;
  position:relative;
}

.hidden{ display:none !important; }

/* ---------- LOGIN SCREEN ---------- */
#login-screen{
  text-align:center;
  gap:22px;
}
.login-card{
  background:rgba(255,251,244,0.9);
  border:2px dashed var(--gold);
  border-radius:20px;
  padding:40px 32px;
  max-width:480px;
  box-shadow:var(--shadow);
}
.login-title{
  font-family:'Caveat', cursive;
  font-size:2.6rem;
  color:var(--accent);
  margin:0 0 6px;
}
.login-sub{
  font-size:1.05rem;
  line-height:1.5;
  margin-bottom:10px;
}
.login-question{
  font-family:'Caveat', cursive;
  font-size:1.5rem;
  color:var(--accent);
  margin-bottom:20px;
}
#password-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
#password-input{
  font-family:'Quicksand',sans-serif;
  font-size:1.1rem;
  padding:12px 16px;
  border-radius:12px;
  border:2px solid var(--paper-dark);
  outline:none;
  width:220px;
  text-align:center;
  letter-spacing:2px;
}
#password-input:focus{ border-color:var(--accent); }
.btn{
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size:1rem;
  padding:12px 26px;
  border-radius:999px;
  border:none;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(201,83,107,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(201,83,107,0.45); }
#login-error{
  color:var(--accent);
  font-size:0.9rem;
  min-height:1.2em;
}

/* ---------- RIBBON SCREEN ---------- */
#ribbon-screen{ text-align:center; gap:10px; }
.ribbon-title{
  font-family:'Caveat', cursive;
  font-size:2.4rem;
  color:var(--ink);
  max-width:560px;
  line-height:1.25;
  margin-bottom:10px;
}
.ribbon-wrap{
  position:relative;
  width:min(560px, 86vw);
  height:140px;
  margin-top:10px;
}
.ribbon-pole{
  position:absolute;
  top:26px; bottom:26px;
  width:10px;
  background:linear-gradient(#8a6b3f,#5c4527);
  border-radius:4px;
}
.ribbon-pole.left{ left:6px; }
.ribbon-pole.right{ right:6px; }
.ribbon-band-half{
  position:absolute;
  top:60px;
  height:22px;
  background:repeating-linear-gradient(45deg, var(--accent), var(--accent) 14px, #fff 14px, #fff 28px);
  box-shadow:var(--shadow);
  transition:transform 1s cubic-bezier(.6,-0.2,.3,1.3), opacity .6s ease .45s;
}
.ribbon-band-half.left-half{
  left:24px; right:50%;
  border-radius:4px 0 0 4px;
  transform-origin:right center;
}
.ribbon-band-half.right-half{
  left:50%; right:24px;
  border-radius:0 4px 4px 0;
  transform-origin:left center;
}
.ribbon-band-half.left-half.cut{
  transform: rotate(-30deg) translate(-6px, 46px);
  opacity:0;
}
.ribbon-band-half.right-half.cut{
  transform: rotate(30deg) translate(6px, 46px);
  opacity:0;
}
.scissors{
  position:absolute;
  top:34px;
  left:50%;
  transform:translateX(-50%);
  font-size:2.4rem;
  cursor:pointer;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  transition:transform .2s ease;
  user-select:none;
  z-index:2;
}
.scissors:hover{ transform:translateX(-50%) scale(1.1) rotate(-8deg); }
.scissors.snip{ animation: snipPulse .3s ease 2; }
@keyframes snipPulse{
  0%,100%{ transform:translateX(-50%) rotate(0deg) scale(1); }
  50%{ transform:translateX(-50%) rotate(-18deg) scale(1.15); }
}
.ribbon-hint{
  font-size:0.9rem;
  opacity:0.7;
  margin-top:6px;
}

/* ---------- BOOK / SCRAPBOOK ---------- */
#book-screen{
  display:none;
  flex-direction:column;
  min-height:100vh;
  width:100%;
  padding:0;
  align-items:stretch;
  justify-content:flex-start;
}
#book-screen.active{ display:flex; }

.progress-bar{
  position:fixed;
  top:0; left:0; right:0;
  height:5px;
  background:rgba(0,0,0,0.06);
  z-index:50;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--accent), var(--gold));
  width:0%;
  transition:width .4s ease;
}

.page{
  position:fixed;
  inset:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:80px 20px 100px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1;
  transform:scale(0.985);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.page.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2;
  transform:scale(1);
  transition:opacity .45s ease, transform .45s ease, visibility 0s linear 0s;
}

.page-date{
  font-family:'Caveat', cursive;
  color:var(--gold);
  font-size:1.4rem;
  letter-spacing:1px;
  margin-bottom:2px;
}
.page-title{
  font-size:1.7rem;
  font-weight:700;
  margin:0 0 18px;
  text-align:center;
  color:var(--ink);
}

.photo-strip{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  justify-content:center;
  max-width:1000px;
  margin-bottom:22px;
}

/* stagger-in animation, restarted each time a page becomes active */
@keyframes settleIn{
  from{ opacity:0; transform:translateY(30px) rotate(var(--r,0deg)) scale(.92); }
  to{ opacity:1; transform:translateY(0) rotate(var(--r,0deg)) scale(1); }
}
@keyframes captionIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
.page .polaroid,
.page .video-blob-frame{
  opacity:0;
  transform:translateY(30px) rotate(var(--r,0deg)) scale(.92);
}
.page.animate .polaroid,
.page.animate .video-blob-frame{
  animation: settleIn .7s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
.page .caption, .page .video-tagline{
  opacity:0;
  transform:translateY(16px);
}
.page.animate .caption,
.page.animate .video-tagline{
  animation: captionIn .6s ease forwards;
  animation-delay: calc(var(--capdelay, 0.3s));
}

.polaroid{
  background:#fffdf9;
  padding:10px 10px 34px;
  border-radius:4px;
  box-shadow:var(--shadow);
  transition:transform .25s ease;
  max-width:260px;
  position:relative;
}
.polaroid:hover{ transform:rotate(0deg) scale(1.04) !important; z-index:5; }
.polaroid img{
  display:block;
  max-width:240px;
  max-height:260px;
  width:auto;
  height:auto;
  border-radius:2px;
  cursor:zoom-in;
}
.tape{
  position:absolute;
  top:-12px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:70px; height:26px;
  background:var(--tape);
  opacity:0.85;
  box-shadow:0 2px 4px rgba(0,0,0,0.15);
}

/* ---------- VIDEO SLIDES (own page, blob-shaped frame) ---------- */
.video-page-icon{
  font-size:2.2rem;
  margin-bottom:6px;
}
.video-blob-frame{
  position:relative;
  width:min(320px, 82vw);
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius: var(--blob, 62% 38% 51% 49% / 43% 47% 53% 57%);
  box-shadow: 0 0 0 6px rgba(255,253,247,0.9), 0 14px 34px rgba(60,40,20,0.28), 0 0 40px rgba(201,83,107,0.18);
  margin:0 auto 22px;
}
.video-blob-frame video{
  position:absolute;
  top:50%; left:50%;
  width:100%; height:100%;
  min-width:100%; min-height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%);
  background:#000;
}
.video-tagline{
  font-family:'Caveat', cursive;
  font-size:1.3rem;
  color:var(--gold);
  text-align:center;
  margin-top:-6px;
  margin-bottom:10px;
}

.caption{
  font-family:'Caveat', cursive;
  font-size:1.5rem;
  line-height:1.4;
  max-width:640px;
  text-align:center;
  color:var(--ink);
  margin-top:6px;
}

.nav-arrows{
  position:fixed;
  bottom:22px;
  left:0; right:0;
  display:flex;
  justify-content:center;
  gap:18px;
  z-index:40;
}
.nav-btn{
  background:rgba(255,251,244,0.92);
  border:2px solid var(--gold);
  color:var(--ink);
  width:48px; height:48px;
  border-radius:50%;
  font-size:1.3rem;
  cursor:pointer;
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease;
}
.nav-btn:hover{ transform:scale(1.08); }
.nav-btn:disabled{ opacity:0.3; cursor:default; }

.dots{
  position:fixed;
  bottom:78px;
  left:0;right:0;
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  padding:0 20px;
  z-index:40;
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(74,59,42,0.25);
  cursor:pointer;
  flex-shrink:0;
}
.dot.active{ background:var(--accent); width:16px; border-radius:5px; }

/* ---------- REFLECTION PAGE ---------- */
.reflection-page{
  padding-left:0; padding-right:0;
  overflow:hidden;
}
.reflection-layout{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  gap:14px;
  max-width:1000px;
}
.reel-col{
  width:70px;
  height:70vh;
  max-height:640px;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.reel-track{
  display:flex;
  flex-direction:column;
  gap:10px;
  position:absolute;
  left:0; right:0;
}
.reel-track img{
  width:70px; height:70px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 3px 8px rgba(60,40,20,0.2);
  opacity:0.85;
}
.reel-col.up .reel-track{ animation: reelUp 60s linear infinite; }
.reel-col.down .reel-track{ animation: reelDown 60s linear infinite; }
@keyframes reelUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes reelDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }

.reflection-text-wrap{
  flex:1;
  max-width:520px;
  background:rgba(255,251,244,0.88);
  border:2px dashed var(--gold);
  border-radius:20px;
  padding:26px 20px;
  max-height:76vh;
  overflow-y:auto;
  box-shadow:var(--shadow);
}
.reflection-title{
  font-family:'Caveat', cursive;
  font-size:1.8rem;
  color:var(--accent);
  text-align:center;
  margin:0 0 14px;
}
.reflection-message{
  font-family:'Caveat', cursive;
  font-size:1.35rem;
  line-height:1.55;
  text-align:center;
  color:var(--ink);
}
.word{
  display:inline-block;
  opacity:0;
  transform:translateY(10px);
}
.word.shown{
  animation: wordIn .45s ease forwards;
}
@keyframes wordIn{
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:600px){
  .reel-col{ width:46px; }
  .reel-track img{ width:46px; height:46px; border-radius:8px; }
  .reflection-layout{ gap:8px; }
  .reflection-text-wrap{ padding:20px 14px; max-height:70vh; }
  .reflection-message{ font-size:1.15rem; }
}

/* ---------- FINALE ---------- */
.finale-page{
  background: radial-gradient(circle at 50% 20%, #fff5e0 0%, var(--paper) 60%);
}
.finale-photo{
  max-width:min(360px,80vw);
  border-radius:10px;
  box-shadow:var(--shadow);
  margin-bottom:26px;
  transform:rotate(-2deg);
}
.finale-message{
  font-family:'Caveat', cursive;
  font-size:2.6rem;
  text-align:center;
  max-width:680px;
  color:var(--accent);
  line-height:1.3;
}
.confetti{
  position:fixed;
  top:-10px;
  z-index:5;
  pointer-events:none;
  border-radius:2px;
}

/* lightbox */
#lightbox{
  position:fixed; inset:0;
  background:rgba(20,14,8,0.88);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:24px;
}
#lightbox.active{ display:flex; }
#lightbox img{
  max-width:92vw;
  max-height:88vh;
  border-radius:6px;
  box-shadow:0 10px 40px rgba(0,0,0,0.5);
}
#lightbox-close{
  position:fixed;
  top:20px; right:26px;
  font-size:2rem;
  color:#fff;
  cursor:pointer;
  z-index:101;
}

@media (max-width:600px){
  .login-card{ padding:28px 20px; }
  .login-title{ font-size:2.1rem; }
  .page-title{ font-size:1.4rem; }
  .caption{ font-size:1.25rem; }
  .finale-message{ font-size:2rem; }
}