*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#07030a;
  color:white;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.eyes-page{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,190,150,.16), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(255,112,180,.14), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(120,185,255,.11), transparent 30%),
    linear-gradient(180deg,#120614 0%,#09030b 54%,#020104 100%);
}

.soft-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center,transparent 0 42%,rgba(0,0,0,.32) 72%,rgba(0,0,0,.72) 100%);
  z-index:2;
}

.paper-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.13;
  z-index:3;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.30) 1px,transparent 1.4px),
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 45%,rgba(0,0,0,.05));
  background-size:38px 38px,100% 100%;
  mix-blend-mode:soft-light;
}

.quiet-particles{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
}

.quiet-particles span{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,219,145,.85);
  box-shadow:0 0 10px rgba(255,220,150,.7),0 0 28px rgba(255,140,190,.20);
  animation:particleFloat linear infinite;
}

@keyframes particleFloat{
  from{transform:translate3d(0,110vh,0) scale(.65);opacity:0}
  12%{opacity:.75}
  72%{opacity:.65}
  to{transform:translate3d(var(--drift),-12vh,0) scale(1);opacity:0}
}

.private-label{
  margin:0 0 8px;
  color:#ffd7e8;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  text-shadow:0 0 14px rgba(255,125,185,.6);
}

/* PASSCODE */
.passcode-screen{
  position:relative;
  z-index:30;
  width:min(520px,92vw);
  padding:28px 22px 24px;
  border-radius:34px;
  text-align:center;
  background:
    linear-gradient(180deg,rgba(24,10,22,.58),rgba(0,0,0,.28)),
    radial-gradient(circle at top,rgba(255,195,160,.12),transparent 52%);
  border:1px solid rgba(255,230,220,.18);
  box-shadow:0 0 42px rgba(255,130,180,.22),0 22px 75px rgba(0,0,0,.58),inset 0 0 24px rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
  transition:opacity .9s ease,transform .9s ease,filter .9s ease;
}

body.unlocked .passcode-screen{
  opacity:0;
  transform:translateY(-28px) scale(.96);
  filter:blur(12px);
  pointer-events:none;
}

.passcode-screen h1,.eyes-intro h1{
  margin:0;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-weight:400;
  line-height:.95;
  text-shadow:0 0 16px rgba(255,255,255,.80),0 0 38px rgba(255,115,180,.55),0 0 72px rgba(255,180,100,.20);
}

.passcode-screen h1{font-size:clamp(2.8rem,8vw,5rem)}

.passcode-subtitle{
  margin:16px auto 20px;
  max-width:420px;
  color:#fff0f7;
  opacity:.9;
  font-size:1rem;
  line-height:1.45;
}

.passcode-dots{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:8px auto 12px;
}

.passcode-dots span{
  width:13px;
  height:13px;
  border-radius:50%;
  border:1px solid rgba(255,230,240,.75);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 10px rgba(255,120,180,.16);
}

.passcode-dots span.filled{
  background:#ffe6f1;
  box-shadow:0 0 10px rgba(255,255,255,.78),0 0 22px rgba(255,120,180,.42);
}

.passcode-message{
  min-height:22px;
  margin:8px 0 16px;
  color:#ffeaf4;
  opacity:.86;
}

.passcode-message.wrong{
  color:#ffb8ca;
  animation:shake .34s ease;
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)}
  75%{transform:translateX(7px)}
}

.keypad{
  width:min(330px,88vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.keypad button{
  height:64px;
  border-radius:50%;
  border:1px solid rgba(255,230,240,.22);
  background:rgba(255,255,255,.10);
  color:white;
  font-size:1.45rem;
  font-weight:800;
  box-shadow:0 0 16px rgba(255,120,180,.12),inset 0 0 10px rgba(255,255,255,.04);
  cursor:pointer;
}

.keypad button:active{
  transform:scale(.94);
  background:rgba(255,255,255,.18);
}

.keypad .keypad-ghost{
  border-radius:999px;
  font-size:.88rem;
  font-weight:700;
  background:transparent;
  box-shadow:none;
  opacity:.86;
}

/* INTRO + ENVELOPE */
.eyes-intro{
  position:absolute;
  z-index:18;
  top:4.5vh;
  left:50%;
  transform:translateX(-50%) translateY(-16px);
  width:min(760px,92vw);
  text-align:center;
  opacity:0;
  filter:blur(12px);
  pointer-events:none;
  transition:opacity 1.1s ease,transform 1.1s ease,filter 1.1s ease;
}

body.unlocked .eyes-intro{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  filter:blur(0);
}

body.opened .eyes-intro,
body.video-revealed .eyes-intro,
body.finished .eyes-intro{
  opacity:0;
  transform:translateX(-50%) translateY(-24px);
  filter:blur(10px);
  pointer-events:none;
}

.eyes-intro h1{font-size:clamp(2.2rem,6vw,4.8rem)}

.intro-line{
  max-width:620px;
  margin:14px auto 0;
  color:#fff0f7;
  font-size:clamp(.95rem,2vw,1.12rem);
  line-height:1.45;
  opacity:.88;
}

.letter-stage{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:12;
  display:block;
  opacity:0;
  pointer-events:none;
  filter:blur(12px);
  transform:translateY(20px);
  transition:opacity 1s ease,filter 1s ease,transform 1s ease;
}

body.unlocked .letter-stage{
  opacity:1;
  pointer-events:auto;
  filter:blur(0);
  transform:translateY(0);
}

.envelope-scene{
  position:absolute;
  left:50%;
  top:58%;
  transform:translate(-50%,-50%);
  width:min(520px,88vw);
  display:grid;
  place-items:center;
  gap:18px;
  transition:opacity 1s ease,transform 1.1s ease,filter 1s ease;
}

.open-letter-btn{
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
}

.envelope{
  position:relative;
  display:block;
  width:min(430px,78vw);
  height:min(270px,45vw);
  min-height:210px;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.56)) drop-shadow(0 0 32px rgba(255,150,185,.18));
  transform:translateY(10px) rotate(-1deg);
  animation:envelopeBreathe 3.8s ease-in-out infinite;
}

@keyframes envelopeBreathe{
  0%,100%{transform:translateY(10px) rotate(-1deg) scale(1)}
  50%{transform:translateY(0) rotate(.5deg) scale(1.015)}
}

.envelope-back{
  position:absolute;
  inset:0;
  border-radius:22px;
  background:linear-gradient(145deg,#f7d7ad,#fff0cf 45%,#e3b887);
  box-shadow:inset 0 0 28px rgba(120,62,18,.18),inset 0 -20px 38px rgba(120,62,18,.12);
}

.envelope-front{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:58%;
  border-radius:0 0 22px 22px;
  background:linear-gradient(145deg,#f1cda0,#ffe8c0 52%,#d9a86f);
  clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);
  box-shadow:inset 0 0 28px rgba(120,62,18,.14);
  z-index:4;
}

.envelope-flap{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:58%;
  background:linear-gradient(180deg,#ffe6bb,#e5b379);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:50% 0%;
  z-index:5;
  transition:transform 1.35s cubic-bezier(.18,.88,.22,1);
  box-shadow:inset 0 -12px 22px rgba(100,55,22,.14);
}

.wax-seal{
  position:absolute;
  left:50%;
  top:48%;
  z-index:7;
  width:64px;
  height:64px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff97b8,#c51f54 55%,#7e0b2e);
  box-shadow:0 0 18px rgba(255,80,130,.65),0 0 38px rgba(255,80,130,.25),inset 0 0 12px rgba(255,255,255,.25);
  transition:opacity .7s ease,transform 1s ease,filter .8s ease;
}

.letter-paper{
  position:absolute;
  left:50%;
  bottom:34%;
  z-index:3;
  width:72%;
  height:72%;
  transform:translateX(-50%) translateY(55%) scale(.82);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,252,236,.96),rgba(255,240,210,.98)),
    repeating-linear-gradient(0deg,transparent 0 27px,rgba(150,90,45,.07) 28px 29px);
  box-shadow:0 0 26px rgba(255,220,160,.14),0 18px 32px rgba(0,0,0,.22),inset 0 0 20px rgba(120,60,20,.08);
  opacity:.96;
  overflow:hidden;
  transition:transform 1.4s cubic-bezier(.16,.92,.22,1),box-shadow 1.1s ease;
}

.paper-glow{
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle at center,rgba(255,238,190,.95),transparent 62%);
  opacity:0;
  transition:opacity 1.2s ease;
}

.paper-line{
  position:absolute;
  left:12%;
  height:8px;
  border-radius:999px;
  background:rgba(153,92,66,.22);
}

.line-1{top:26%;width:70%}
.line-2{top:40%;width:58%}
.line-3{top:54%;width:64%}

.paper-heart{
  position:absolute;
  right:12%;
  bottom:13%;
  opacity:.52;
  font-size:28px;
}

.open-hint{
  margin:0;
  color:#fff0f7;
  text-align:center;
  font-size:clamp(1.05rem,2.7vw,1.25rem);
  text-shadow:0 0 12px rgba(255,255,255,.30),0 0 28px rgba(255,120,180,.42);
  transition:opacity .8s ease,transform .8s ease;
}

body.opened .envelope{animation:none}
body.opened .envelope-flap{transform:rotateX(175deg)}
body.opened .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(.62);filter:blur(6px)}
body.opened .letter-paper{
  z-index:6;
  transform:translateX(-50%) translateY(-38%) scale(1.04);
  box-shadow:0 0 35px rgba(255,225,170,.32),0 28px 55px rgba(0,0,0,.34),inset 0 0 24px rgba(120,60,20,.07);
}
body.opened .paper-glow{opacity:.72}
body.opened .open-hint{opacity:0;transform:translateY(14px)}
body.video-revealed .envelope-scene{opacity:0;transform:translate(-50%,-54%) scale(.92);filter:blur(18px);pointer-events:none}

/* VIDEO */
.video-shell{
  position:absolute;
  left:50%;
  top:50%;
  z-index:15;
  width:min(860px,94vw);
  opacity:0;
  transform:translate(-50%,-50%) scale(.96);
  filter:blur(18px);
  pointer-events:none;
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.18,.88,.24,1),filter 1.2s ease;
}

body.video-revealed .video-shell{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  filter:blur(0);
  pointer-events:auto;
}

.video-frame{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  padding:10px;
  background:linear-gradient(135deg,rgba(255,230,190,.55),rgba(255,140,190,.18),rgba(160,190,255,.14));
  border:1px solid rgba(255,235,215,.45);
  box-shadow:0 0 42px rgba(255,180,140,.28),0 0 70px rgba(255,115,180,.20),0 24px 75px rgba(0,0,0,.62);
}

.heart-video{
  display:block;
  width:100%;
  max-height:50vh;
  min-height:230px;
  border-radius:20px;
  background:#050205;
  outline:none;
}

.video-note{
  margin:14px auto 14px;
  text-align:center;
  color:#ffeaf4;
  font-size:clamp(.95rem,2.6vw,1.08rem);
  opacity:.86;
  text-shadow:0 0 12px rgba(255,120,180,.28);
}

.close-envelope-btn{
  display:block;
  margin:10px auto 0;
  padding:13px 23px;
  border-radius:999px;
  color:white;
  font-weight:900;
  border:1px solid rgba(255,230,220,.78);
  background:linear-gradient(135deg,rgba(255,120,175,.48),rgba(255,190,120,.18));
  box-shadow:0 0 22px rgba(255,120,180,.34),inset 0 0 12px rgba(255,255,255,.10);
  cursor:pointer;
}

/* CLOSED + RETURN */
.closed-envelope{
  position:absolute;
  left:50%;
  top:43%;
  z-index:16;
  opacity:0;
  transform:translate(-50%,-50%) scale(.94);
  filter:blur(12px);
  pointer-events:none;
  transition:opacity 1s ease,transform 1s ease,filter 1s ease;
}

body.finished .closed-envelope{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  filter:blur(0);
}

.closed-card{
  width:min(420px,82vw);
  padding:26px 22px;
  border-radius:26px;
  text-align:center;
  background:rgba(20,8,18,.52);
  border:1px solid rgba(255,230,220,.20);
  box-shadow:0 0 32px rgba(255,130,180,.22),inset 0 0 18px rgba(255,255,255,.045);
  backdrop-filter:blur(5px);
}

.tiny-envelope{
  font-size:4rem;
  margin-bottom:8px;
  filter:drop-shadow(0 0 20px rgba(255,180,190,.45));
}

.closed-card p{margin:0;color:#ffeaf4}

.return-bts{
  position:fixed;
  z-index:50;
  bottom:7vh;
  left:50%;
  transform:translateX(-50%) translateY(18px);
  opacity:0;
  pointer-events:none;
  padding:15px 26px;
  border-radius:999px;
  color:white;
  text-decoration:none;
  font-weight:900;
  font-size:clamp(1rem,2.6vw,1.14rem);
  white-space:nowrap;
  border:1px solid rgba(255,230,220,.78);
  background:linear-gradient(135deg,rgba(255,120,175,.52),rgba(255,190,120,.18));
  box-shadow:0 0 24px rgba(255,120,180,.45),0 0 42px rgba(255,190,120,.18),inset 0 0 12px rgba(255,255,255,.10);
  transition:opacity 1s ease,transform 1s ease;
}

body.finished .return-bts{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

body.finished .video-shell{
  opacity:0;
  transform:translate(-50%,-52%) scale(.96);
  filter:blur(16px);
  pointer-events:none;
}

@media(max-width:720px){
  .eyes-intro{top:3vh}
  .envelope-scene{top:60%}
  .envelope{width:min(360px,82vw);height:min(228px,52vw);min-height:190px}
  .heart-video{max-height:45vh;min-height:200px}
  .return-bts{bottom:4vh;font-size:.95rem}
}