:root{
  --pink:#ff4d6d;
  --pink-soft:#ff8fa3;
  --ink:#1a0910;
  --paper:rgba(20,6,12,.42);
  --text:#fff4f6;
  --ease:cubic-bezier(.22,1,.36,1);
  --btn-h:clamp(2.6rem,8vw,3rem);
}

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

html,body{height:100%}

body{
  background:var(--ink);
  color:var(--text);
  font-family:"Georgia","Times New Roman",serif;
  overflow:hidden;
}

.gate{
  position:fixed;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 45%, #2b0d18 0%, #12050a 60%, #080206 100%);
  transition:opacity .5s ease;
}

.gate.is-gone{opacity:0;pointer-events:none}

.gate__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.2rem;
}

.heart{
  position:relative;
  width:clamp(140px,24vw,210px);
  aspect-ratio:1;
  border:0;
  background:none;
  cursor:pointer;
  padding:0;
  transition:transform .25s var(--ease);
}

.heart:hover{transform:scale(1.07)}
.heart:active{transform:scale(.94)}

.heart__video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}

.gate__hint{
  font-size:clamp(1rem,2.4vw,1.35rem);
  letter-spacing:.22em;
  text-transform:lowercase;
  color:var(--pink-soft);
  opacity:.85;
  animation:breathe 2.6s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{opacity:.45}
  50%{opacity:1}
}

.wipe{
  position:fixed;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
}

.wipe__svg{
  position:absolute;
  left:var(--wipe-x,50%);
  top:var(--wipe-y,50%);
  width:clamp(120px,22vw,190px);
  fill:var(--pink);
  transform:translate(-50%,-50%) scale(1);
  will-change:transform;
}

.wipe.is-running{opacity:1}

.wipe.is-filled{background:var(--pink)}

.wipe__clip{
  position:absolute;
  left:50%;
  top:50%;
  width:min(26vw,280px);
  max-height:36vh;
  object-fit:contain;
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;
  z-index:2;
  pointer-events:none;
  will-change:transform,opacity;
}

.wipe__clip.is-playing{
  animation:clip-in var(--clip-dur,1.2s) forwards;
}

@keyframes clip-in{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.55);
    animation-timing-function:cubic-bezier(.22,1,.36,1);
  }
  40%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    animation-timing-function:linear;
  }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.12);
  }
}

.wipe.is-running .wipe__svg{
  animation:swallow 1.05s var(--ease) forwards;
}

@keyframes swallow{
  0%{transform:translate(-50%,-50%) scale(1)}
  55%{transform:translate(-50%,-50%) scale(.8)}
  100%{transform:translate(-50%,-50%) scale(46)}
}

.wipe.is-fading{
  animation:wipeOut .55s ease forwards;
}

@keyframes wipeOut{
  to{opacity:0}
}

.stage{
  position:fixed;
  inset:0;
  z-index:10;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .9s ease;
  overflow-y:auto;
  padding:clamp(1rem,4vh,3rem) 1rem;
}

.stage.is-live{opacity:1;visibility:visible}

.stage__video,
.stage__fallback{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

.stage__fallback{
  overflow:hidden;
  background:#2a0a16;
}

.stage__fallback::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(130deg,#2a0a16,#5c1030,#8c1f3d,#31091a);
  animation:drift 26s ease-in-out infinite alternate;
  will-change:transform;
}

.stage__video.is-ready + .stage__fallback{display:none}

@keyframes drift{
  from{transform:translate3d(-8%,-4%,0)}
  to{transform:translate3d(8%,4%,0)}
}

.stage__video{
  filter:brightness(1.45) saturate(1.08) contrast(.96);
}

.stage__veil{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0),rgba(0,0,0,.28)),
    linear-gradient(to bottom,rgba(10,2,6,.12),rgba(10,2,6,.24));
}

.letter{
  position:relative;
  z-index:1;
  width:min(680px,92vw);
  padding:clamp(1.6rem,4vw,3rem);
  border-radius:22px;
  background:var(--paper);
  border:1px solid rgba(255,255,255,.14);
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.55);
  transform:translateY(28px);
  opacity:0;
  transition:opacity .9s ease .35s,transform .9s var(--ease) .35s;
}

.stage.is-live .letter{transform:translateY(0);opacity:1}

.letter__head{
  text-align:center;
  margin-bottom:1.8rem;
}

.letter__title{
  font-size:clamp(2rem,6vw,3.2rem);
  font-weight:400;
  letter-spacing:.02em;
}

.letter__title::after{
  content:"";
  display:block;
  width:64px;
  height:1px;
  margin:1rem auto 0;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
}

.letter__body{
  display:flex;
  flex-direction:column;
  transition:opacity .5s ease;
  gap:.5rem;
  font-size:clamp(1rem,1.9vw,1.12rem);
  line-height:1.7;
  color:rgba(255,244,246,.9);
}

.letter__sign{
  margin-top:.3rem;
  font-style:italic;
  color:var(--pink-soft);
}

.letter__body.is-swapping{opacity:0}

.letter__final_box {
  padding:2.4rem 0;
}

.letter__final{
  text-align:center;
  font-size:clamp(1.5rem,4.5vw,2.3rem);
  font-style:italic;
  line-height:1.4;
  color:var(--pink-soft);
}

.letter__foot{
  margin-top:2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
}

.emoji{
  object-fit:contain;
  flex:none;
  pointer-events:none;
  user-select:none;
}

.emoji--title{
  display:inline-block;
  height:1.2em;
  width:1.2em;
  vertical-align:-.26em;
  margin-left:.15em;
}

.emoji--btn{
  height:var(--btn-h);
  width:var(--btn-h);
}

.btn{
  min-height:var(--btn-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem clamp(.9rem,4vw,2.1rem);
  border:1px solid rgba(255,143,163,.5);
  border-radius:999px;
  background:rgba(255,77,109,.12);
  color:var(--text);
  font-family:inherit;
  font-size:clamp(.85rem,3.4vw,1rem);
  letter-spacing:.05em;
  cursor:pointer;
  transition:background .3s ease,transform .2s var(--ease),border-color .3s ease;
}

.btn:hover{
  background:rgba(255,77,109,.32);
  border-color:var(--pink-soft);
  transform:translateY(-2px);
}

.sound{
  position:fixed;
  top:1.2rem;
  right:1.2rem;
  z-index:20;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(12,4,8,.6);
  color:var(--pink-soft);
  font-size:1.1rem;
  cursor:pointer;
  transition:transform .2s var(--ease),background .3s ease;
}

.sound:hover{transform:scale(1.1);background:rgba(255,77,109,.25)}
.sound__icon[data-state="off"]{opacity:.4;text-decoration:line-through}

.thanks{
  position:fixed;
  inset:0;
  z-index:25;
  display:grid;
  place-items:center;
  gap:1rem;
  text-align:center;
  background:rgba(8,2,6,.92);
  opacity:0;
  visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s;
  font-size:clamp(1.1rem,3vw,1.5rem);
}

.thanks.is-shown{
  opacity:1;
  visibility:visible;
  transition:opacity .5s ease,visibility 0s;
}

.thanks__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.2rem,1.5vw,1rem);
}

.thanks__sticker{
  width:clamp(90px,15vw,150px);
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  flex:none;
}

.spark{
  position:fixed;
  z-index:15;
  color:var(--pink-soft);
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
  animation:float-up linear forwards;
}

.spark--behind{z-index:0}

@keyframes float-up{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  15%{opacity:.8}
  100%{transform:translate3d(0,-110vh,0) scale(1.1);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
}