:root {
  --bg-main: #0d0907;
  --text-main: #f0e6d3;
  --text-muted: #6a5a48;
  --text-subtle: #c0a882;
  --text-dark: #777;
  --color-spotify: #1DB954;
  --polaroid-bg: #fff;
  --rgb-text-main: 240, 230, 211;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-main);color:var(--text-main);font-family:'Playfair Display',Georgia,serif;}

/* GRAIN */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;animation:grain .5s steps(1) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}
  20%{transform:translate(3%,1%)}30%{transform:translate(-1%,2%)}
  40%{transform:translate(2%,-1%)}50%{transform:translate(-3%,3%)}
  60%{transform:translate(1%,-2%)}70%{transform:translate(-2%,1%)}
  80%{transform:translate(3%,-3%)}90%{transform:translate(-1%,3%)}
}

/* VIGNETTE */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.78) 100%);
}

/* TRANSITION OVERLAY */
#ov{position:fixed;inset:0;background:var(--bg-main);z-index:9000;pointer-events:none;opacity:0;transition:opacity .65s ease;}
#ov.on{opacity:1}

/* SCREENS */
.screen{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity 1.1s ease;will-change:opacity;}
.screen.active{opacity:1;pointer-events:all}

/* ======== INTRO ======== */
#intro{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:1.4rem;}
.i-name{
  font:italic 400 clamp(5rem,13vw,11rem)/1 'Playfair Display',serif;
  letter-spacing:-.025em;color:var(--text-main);
  opacity:0;transform:translateY(22px);
  animation:rise 2.2s cubic-bezier(.22,1,.36,1) .6s forwards;
  will-change:transform, opacity;
}
.i-sub{
  font:400 1.25rem 'Caveat',cursive;color:var(--text-muted);letter-spacing:.14em;
  opacity:0;animation:rise 2s ease 1.8s forwards;
  will-change:transform, opacity;
}
.i-btn{
  margin-top:2.8rem;background:none;border:1px solid rgba(var(--rgb-text-main),.28);
  color:var(--text-main);font:400 1.15rem 'Caveat',cursive;letter-spacing:.14em;
  padding:.72rem 2.3rem;cursor:pointer;
  opacity:0;animation:rise 2s ease 3s forwards;
  transition:all .35s ease;touch-action:manipulation;
  will-change:transform, opacity;
}
.i-btn:hover{background:rgba(var(--rgb-text-main),.07);border-color:rgba(var(--rgb-text-main),.6);transform:translateY(-2px)}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* ======== DATE SECTIONS ======== */
.dsec{position:fixed;inset:0;overflow:hidden;}

.sec-hdr{
  position:absolute;top:2.6rem;left:3rem;z-index:30;
  opacity:0;transform:translateX(-12px);
  transition:opacity .9s ease,transform .9s ease;
  will-change:transform, opacity;
}
.sec-hdr.in{opacity:1;transform:translateX(0)}
.dstamp{font:400 .95rem 'Caveat',cursive;color:var(--text-muted);letter-spacing:.22em;margin-bottom:.3rem;}
.occ{font:italic 400 clamp(1.7rem,2.9vw,2.7rem)/1.1 'Playfair Display',serif;color:var(--text-main);}

/* POLAROID STAGE */
.pstage{position:absolute;inset:0;}

/* Generic polaroid card */
.pcard{
  background:var(--polaroid-bg);
  box-shadow:0 18px 55px rgba(0,0,0,.65),0 5px 14px rgba(0,0,0,.35);
  position:absolute;
  will-change:transform, opacity, left, top;
}
.pcard img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(5%) saturate(106%) contrast(104%);}
.plabel{
  position:absolute;bottom:0;left:0;right:0;height:40px;
  display:flex;align-items:center;justify-content:center;
  font:400 .9rem 'Caveat',cursive;color:var(--text-dark);background:var(--polaroid-bg);
}

/* Background polaroids */
.bg-p{
  padding:.75rem .75rem 40px .75rem;
  opacity:0;
  transform:var(--rot,rotate(0deg)) translateY(28px);
  transition:opacity .75s ease,transform .75s ease;
}
.bg-p.show{opacity:1;transform:var(--rot,rotate(0deg)) translateY(0)}
.bg-p img{height:calc(100% - 40px);}

/* Main flip polaroid */
.main-p{
  width:clamp(220px,27vw,295px);
  height:clamp(260px,33vw,355px);
  padding:.9rem .9rem 40px .9rem;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  cursor:pointer;z-index:20;
  transition:box-shadow .3s ease;
  touch-action:manipulation;
}
.main-p:not(.done):hover{box-shadow:0 26px 70px rgba(0,0,0,.7),0 8px 20px rgba(0,0,0,.4);}

.flip-wrap{width:100%;height:calc(100% - 40px);perspective:1400px;position:relative;}
.flipper{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transform:rotateY(180deg);
  transition:transform 1.15s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.flipper.go{transform:rotateY(0deg)}
.f-front,.f-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.f-front img{
  width:100%;height:100%;object-fit:cover;object-position: 70% 30%;
  filter:sepia(5%) saturate(106%) contrast(104%);
}
html, body {
  cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 2L4 22L9 17L12 22L15 20L12 15L18 15L4 2Z' fill='%23f0e6d3' stroke='%236a5a48' stroke-width='2'/%3E%3C/svg%3E"), auto !important;
}
* {
  cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 2L4 22L9 17L12 22L15 20L12 15L18 15L4 2Z' fill='%23f0e6d3' stroke='%236a5a48' stroke-width='2'/%3E%3C/svg%3E"), auto !important;
}
button, a, .dot, .main-p, .g-box, .xpp-wb, .xpp-t, .xpp-ti, .xpp-tog, .xpp-pt {
  cursor: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 2L4 22L9 17L12 22L15 20L12 15L18 15L4 2Z' fill='%23fff' stroke='%236a5a48' stroke-width='2'/%3E%3C/svg%3E"), pointer !important;
}
.f-back{
  transform:rotateY(180deg);
  background:linear-gradient(135deg,#f7f3ed,#ede8e0);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
}
.dev-ico{font-size:2.2rem;animation:dp 2.2s ease infinite;}
.dev-txt{font:400 1rem 'Caveat',cursive;color:#999;letter-spacing:.05em;}
@keyframes dp{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

/* Commentary */
.comm{
  position:absolute;bottom:3.8rem;left:50%;transform:translateX(-50%);
  text-align:center;
  font:400 clamp(1.1rem,2.1vw,1.65rem) 'Caveat',cursive;
  color:var(--text-subtle);max-width:600px;width:88%;line-height:1.5;
  opacity:0;transition:opacity 1.1s ease;
  will-change:opacity;
}
.comm.in{opacity:1}

/* Nav */
.nav{position:absolute;bottom:2.6rem;right:3rem;opacity:0;transition:opacity 1s ease;display:flex;gap:1rem;}
.nav.in{opacity:1}
.nbtn{
  background:none;border:none;color:var(--text-muted);
  font:400 1.05rem 'Caveat',cursive;letter-spacing:.09em;
  cursor:pointer;padding:.45rem;
  transition:color .3s,transform .3s;touch-action:manipulation;
}
.nbtn:hover{color:var(--text-main);transform:translateY(-3px)}

/* Progress dots */
#dots{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.55rem;z-index:500;
  opacity:0;transition:opacity .7s ease;pointer-events:all;
}
#dots.show{opacity:1}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(var(--rgb-text-main),.18);transition:background .45s,transform .45s;pointer-events:all;}
.dot:hover{background:rgba(var(--rgb-text-main),.4)}
.dot.on{background:rgba(var(--rgb-text-main),.8);transform:scale(1.4)}

/* ======== NOTE SECTION ======== */
#note-sec {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(30,20,15,0.4) 0%, transparent 70%);
}
.note-wrap {
  width: 90%;
  max-width: 550px;
  perspective: 1000px;
  position: relative;
  z-index: 10;
}
.note-paper {
  background: #fdfaf3;
  padding: 3rem;
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.5),
    0 1px 1px rgba(255,255,255,0.2) inset;
  border-radius: 2px;
  transform: rotateX(5deg) rotateY(-2deg);
  position: relative;
  overflow: hidden;
}
.note-paper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  pointer-events: none;
}
.note-content {
  font: 400 1.4rem/1.6 'Caveat', cursive;
  color: #3d3329;
  opacity: 0;
  transform: translateY(15px);
  transition: all 1.2s ease 0.4s;
}
#note-sec.active .note-content {
  opacity: 1;
  transform: translateY(0);
}
.note-content p {
  margin-bottom: 1.5rem;
}
.note-sig {
  text-align: right;
  margin-top: 2rem;
  font-size: 1.8rem;
}
#note-nav {
  position: absolute;
  bottom: -4rem;
  right: 0;
  opacity: 0;
  transition: opacity 1s ease 1.5s;
}
#note-sec.active #note-nav {
  opacity: 1;
}

/* ======== GIFT SECTION ======== */
#gsec{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;text-align:center;}
.g-pre{
  font:italic 400 clamp(1.5rem,3.2vw,3rem)/1.3 'Playfair Display',serif;color:var(--text-main);
  max-width:480px;opacity:0;transform:translateY(18px);transition:all 1.1s ease;
  will-change:transform, opacity;
}
.g-pre.in{opacity:1;transform:translateY(0)}
.g-sub{font:400 1.15rem 'Caveat',cursive;color:var(--text-muted);opacity:0;transition:opacity 1s ease .6s;}
.g-sub.in{opacity:1}
.g-box{
  font-size:4.5rem;cursor:pointer;display:inline-block;
  transition:transform .3s;animation:gf 3.2s ease infinite;touch-action:manipulation;
  will-change:transform;
}
.g-box:hover{transform:scale(1.14) translateY(-5px) !important}
@keyframes gf{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.g-reveal{
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  opacity:0;pointer-events:none;transition:opacity 1.1s ease;
  will-change:opacity;
}
.g-reveal.in{opacity:1;pointer-events:all}
.g-msg{
  font:italic 400 1.05rem/1.7 'Playfair Display',serif;
  color:#b09878;max-width:420px;
}
.sp-link{
  display:inline-flex;align-items:center;gap:.8rem;
  background:var(--color-spotify);color:#fff;text-decoration:none;
  padding:.9rem 2.3rem;border-radius:50px;
  font:600 1rem/1 'Playfair Display',serif;
  box-shadow:0 4px 22px rgba(29,185,84,.38);
  transition:all .3s;
}
.sp-link:hover{transform:translateY(-3px);box-shadow:0 9px 32px rgba(29,185,84,.58)}
.sp-ico{width:22px;height:22px;flex-shrink:0;}

/* ======== XP PLAYER ======== */
#xpp{
  position:fixed;top:16px;right:16px;width:276px;z-index:8000;
  border:1px solid #003c74;border-radius:8px 8px 4px 4px;
  box-shadow:2px 3px 12px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.22);
  font-family:Tahoma,'MS Sans Serif',sans-serif;font-size:11px;
  user-select:none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: transform, left, top;
}
#xpp.closed {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8) translateY(-20px);
}

#xpp-restore {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: linear-gradient(180deg, #4e97e2 0%, #1a64b6 100%);
  border: 1px solid #003c74;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 7999;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#xpp-restore.visible {
  opacity: 1;
  pointer-events: all;
}
#xpp-restore:hover { transform: scale(1.1); }
#xpp-tb{
  background:linear-gradient(180deg,#4e97e2 0%,#1a64b6 44%,#1861b4 60%,#2476c2 100%);
  border-radius:8px 8px 0 0;padding:3px 4px;
  display:flex;align-items:center;justify-content:space-between;
  cursor:move;height:26px;
}
.xpp-ttxt{color:#fff;font-weight:bold;font-size:11px;text-shadow:1px 1px 2px rgba(0,0,0,.55);display:flex;align-items:center;gap:5px;}
.xpp-wbtns{display:flex;gap:2px;}
.xpp-wb{
  width:21px;height:21px;border-radius:3px;border:1px solid rgba(255,255,255,.32);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:bold;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.45);
  transition:filter .1s;
}
.xpp-wb:hover{filter:brightness(1.22)}
.xpp-wb:active{filter:brightness(.82)}
.xpp-wb.mn{background:linear-gradient(180deg,#62acee,#3e91d6)}
.xpp-wb.mx{background:linear-gradient(180deg,#62acee,#3e91d6)}
.xpp-wb.cl{background:linear-gradient(180deg,#f06262,#c43232)}
#xpp-body{background:linear-gradient(180deg,#e4e4e4,#c8c8c8);border-radius:0 0 4px 4px;overflow:hidden;}
#xpp.mini #xpp-body{display:none}
.xpp-disp{background:#07090e;margin:5px;padding:5px 7px;border:1px inset #2a2a2a;border-radius:2px;}
.xpp-tn{color:#34de46;font:400 9px/1.3 'Courier New',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 5px rgba(50,222,60,.55);margin-bottom:3px;}
.xpp-tr{display:flex;justify-content:space-between;color:#20a830;font:400 8px 'Courier New',monospace;margin-bottom:3px;}
.xpp-pt{background:#0e0e0e;height:5px;border:1px solid #222;border-radius:1px;overflow:hidden;cursor:pointer;}
.xpp-pf{height:100%;width:0%;background:linear-gradient(90deg,#2a8c3a,#3eb54e,#62e264);transition:width .4s linear;}
.xpp-eq{display:flex;gap:2px;padding:3px 6px 0;align-items:flex-end;height:24px;}
.xpp-eqb{flex:1;background:#3cb54a;border-radius:1px;height:3px;opacity:.22;transition:height .12s ease;}
.xpp-eqb.go{opacity:1}
.xpp-trans{display:flex;justify-content:center;gap:3px;padding:4px 6px;}
.xpp-t{
  background:linear-gradient(180deg,#f3f3f3,#d2d2d2);border:1px solid #888;
  border-radius:2px;padding:2px 7px;cursor:pointer;font-size:12px;color:#222;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);min-width:27px;text-align:center;
}
.xpp-t:hover{background:linear-gradient(180deg,#f9f9f9,#dedede)}
.xpp-t:active{background:linear-gradient(180deg,#c2c2c2,#d2d2d2);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.xpp-vr{display:flex;align-items:center;gap:4px;padding:2px 6px 4px;}
.xpp-vl{color:#444;font-size:10px;}
.xpp-vs{flex:1;-webkit-appearance:none;appearance:none;height:4px;background:#8a8a8a;border-radius:2px;cursor:pointer;}
.xpp-vs::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:14px;background:linear-gradient(180deg,#f2f2f2,#c2c2c2);border:1px solid #686868;border-radius:2px;cursor:pointer;}
.xpp-tog{
  background:linear-gradient(180deg,#dadada,#c2c2c2);border-top:1px solid #aaa;
  padding:3px 7px;cursor:pointer;color:#333;display:flex;align-items:center;gap:3px;font-size:10px;
}
.xpp-tog:hover{background:linear-gradient(180deg,#e2e2e2,#cacaca)}
.xpp-tl{display:none;background:#fff;border-top:1px solid #aaa;max-height:145px;overflow-y:auto;}
.xpp-tl.open{display:block}
.xpp-tl::-webkit-scrollbar{width:8px}
.xpp-tl::-webkit-scrollbar-track{background:#f0f0f0}
.xpp-tl::-webkit-scrollbar-thumb{background:#aaa;border-radius:2px}
.xpp-ti{padding:3px 7px;cursor:pointer;color:#222;font-size:10px;border-bottom:1px solid #eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.xpp-ti:hover{background:#0078d7;color:#fff}
.xpp-ti.cur{background:#cde4ff;color:#003c74;font-weight:bold}

@media(max-width:600px){
  #xpp{width:240px;top:10px;right:10px;}
  .sec-hdr{top:1.5rem;left:1.5rem;}
  .occ{font-size:1.5rem;}
  .nav{right:1.5rem;bottom:1.5rem;}
}