:root{
  --bg0:#08030a;
  --bg1:#1a0711;
  --bg2:#2a0a18;

  --text:#f8eef4;
  --muted: rgba(248,238,244,.78);

  --gold:#d7b06f;
  --red:#ff2a5c;
  --pink:#ff63b8;
  --violet:#a855f7;

  --radius: 22px;
  --shadow: 0 24px 70px rgba(0,0,0,.45);
  --blur: 18px;

  --title: "Caveat", cursive;
  --ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family: var(--ui);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 12%, rgba(255, 42, 92, .18), transparent 55%),
    radial-gradient(900px 520px at 80% 25%, rgba(168, 85, 247, .16), transparent 58%),
    radial-gradient(900px 620px at 55% 80%, rgba(255, 99, 184, .14), transparent 60%),
    linear-gradient(135deg, var(--bg0), var(--bg1) 40%, var(--bg2));
}

/* Ambient floating glow */
.ambient{
  position: fixed;
  inset: -120px;
  z-index: 0;
  pointer-events:none;
  opacity: .85;
  background:
    radial-gradient(200px 200px at 18% 22%, rgba(255,99,184,.12), transparent 70%),
    radial-gradient(260px 260px at 70% 18%, rgba(168,85,247,.10), transparent 70%),
    radial-gradient(220px 220px at 55% 74%, rgba(255,42,92,.10), transparent 70%);
  filter: blur(10px);
  animation: ambient-drift 12s ease-in-out infinite alternate;
}
@keyframes ambient-drift{
  from{ transform: translate3d(-12px, 8px, 0) scale(1); }
  to{ transform: translate3d(14px, -10px, 0) scale(1.02); }
}

/* Heart trail overlay */
#trail-layer{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 80;
  overflow: hidden;
}
.trail-heart{
  position:absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%,-50%) rotate(var(--rot, 0deg)) scale(var(--s, 1));
  opacity: 0;
  filter: blur(0px) drop-shadow(0 0 10px rgba(255,255,255,.18));
  will-change: transform, opacity, filter;
  animation: heart-float var(--dur, 900ms) ease-out forwards;
}
.trail-heart::before{
  content:"";
  display:block;
  width: 100%;
  height: 100%;
  background: var(--c, var(--pink));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M23.6 0c-2.7 0-5.1 1.3-6.6 3.3C15.5 1.3 13.1 0 10.4 0 4.7 0 0 4.6 0 10.3c0 10.1 16.9 18.5 16.9 18.5S33.8 20.4 33.8 10.3C33.8 4.6 29.3 0 23.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M23.6 0c-2.7 0-5.1 1.3-6.6 3.3C15.5 1.3 13.1 0 10.4 0 4.7 0 0 4.6 0 10.3c0 10.1 16.9 18.5 16.9 18.5S33.8 20.4 33.8 10.3C33.8 4.6 29.3 0 23.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes heart-float{
  0%{ opacity: 0; transform: translate(-50%,-50%) rotate(var(--rot,0deg)) scale(calc(var(--s,1) * .7)); }
  12%{ opacity: .92; }
  100%{
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -45px)))
      rotate(calc(var(--rot,0deg) + 18deg))
      scale(calc(var(--s,1) * 1.15));
    filter: blur(2.8px);
  }
}

/* Layout */
.page{
  position: relative;
  z-index: 1;
  min-height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(26px, env(safe-area-inset-bottom));
  gap: 14px;
  overflow-x:hidden;
}
.topbar{
  width: min(92vw, 920px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 2px;
}
.brand{
  display:flex;
  gap:10px;
  align-items:center;
  opacity:.85;
}
.brand__dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, var(--pink), var(--red));
  box-shadow: 0 0 18px rgba(255, 99, 184, .35);
}
.brand__text{
  font-size: 13px;
  letter-spacing:.2px;
  color: rgba(248,238,244,.72);
}
.lang{
  display:flex;
  gap:8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.lang__btn{
  appearance:none;
  border: 0;
  cursor:pointer;
  font: 600 12px/1 var(--ui);
  letter-spacing:.3px;
  color: rgba(248,238,244,.78);
  background: transparent;
  padding: 10px 12px;
  border-radius: 999px;
  min-height: 38px;
  transition: transform .12s ease, background .18s ease, color .18s ease;
}
.lang__btn:hover{ transform: translateY(-1px); }
.lang__btn[aria-pressed="true"]{
  background: rgba(255,255,255,.10);
  color: rgba(248,238,244,.95);
  outline: 1px solid rgba(215,176,111,.55);
}

/* Card */
.card{
  width: min(92vw, 920px);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(var(--blur));
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}
.card__glow{
  position:absolute;
  inset:-120px -120px auto -120px;
  height: 280px;
  background: radial-gradient(circle at 30% 30%, rgba(255,99,184,.20), transparent 62%),
              radial-gradient(circle at 70% 40%, rgba(168,85,247,.18), transparent 60%),
              radial-gradient(circle at 50% 80%, rgba(255,42,92,.14), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
}

/* Hero */
.hero{ padding: clamp(18px, 3.2vw, 34px) clamp(18px, 3.2vw, 38px) 14px; }
.badge{
  margin:0 0 10px;
  font: 600 12px/1 var(--ui);
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(215,176,111,.92);
}
.titleRow{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.title{
  margin:0;
  font-family: var(--title);
  font-weight: 600;
  letter-spacing: .2px;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1;
}
.pinkies{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}
.pinkies__svg{
  width: 28px;
  height: 28px;
  fill: rgba(255,99,184,.92);
  stroke: rgba(248,238,244,.85);
}
.subtitle{
  margin: 8px 0 16px;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--muted);
  line-height: 1.55;
  max-width: 68ch;
}
.actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}
.btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(248,238,244,.92);
  cursor:pointer;
  padding: 12px 16px;
  border-radius: 999px;
  min-height: 44px;
  font: 600 14px/1 var(--ui);
  letter-spacing:.2px;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.btn:active{ transform: translateY(0px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn--primary{
  border-color: rgba(215,176,111,.6);
  background: linear-gradient(180deg, rgba(215,176,111,.18), rgba(255,255,255,.06));
}
.btn--primary:hover{
  border-color: rgba(215,176,111,.8);
  background: linear-gradient(180deg, rgba(215,176,111,.24), rgba(255,255,255,.08));
}
.btn--ghost{ background: transparent; }

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin: 0 14px;
}

/* Envelope area */
.envelopeWrap{
  padding: 24px clamp(18px, 3.2vw, 38px) clamp(18px, 3vw, 28px);
}
.envelope{
  width: 100%;
  max-width: 860px;
  margin: 16px auto 0;
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  border-radius: 22px;
  perspective: 1200px;
  user-select: none;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform .2s ease, filter .2s ease;
}
.envelope:hover{
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.25));
  transform: translateY(-2px);
}
.envelope:focus{
  outline: 2px solid rgba(215,176,111,.65);
  outline-offset: 6px;
}
.envelope.is-open{ cursor: default; }
.envelope.is-open:hover{ transform: translateY(0); filter:none; }

.envBody{
  position:absolute;
  inset:0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 70px rgba(0,0,0,.40);
  overflow:hidden;
}

/* Close button (heart) */
.envClose{
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 6;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle at 30% 30%, rgba(255,99,184,.45), rgba(255,255,255,.08));
  color: rgba(248,238,244,.96);
  font: 800 18px/1 var(--ui);
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: transform .12s ease, filter .18s ease, border-color .18s ease;
}
.envClose:hover{
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(215,176,111,.55);
  filter: drop-shadow(0 0 16px rgba(255,99,184,.22));
}
.envClose:active{ transform: translateY(0) scale(.99); }

/* Flap */
.envFlap{
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  transform-origin: top;
  transform: rotateX(0deg);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  background: linear-gradient(180deg, rgba(255,99,184,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  clip-path: polygon(0 0, 100% 0, 50% 92%);
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.25));
  transition: transform 800ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

/* Paper */
.envPaper{
  position:absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%) translateY(38%);
  width: min(94%, 820px);
  height: 92%;
  border-radius: 18px;
  background: rgba(10, 4, 12, .38);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  overflow: auto;
  padding: 18px 18px 16px;
  opacity: 0;
  transition: transform 900ms cubic-bezier(.2,.9,.2,1), opacity 450ms ease;
  will-change: transform, opacity;
  z-index: 3;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.envPaper::-webkit-scrollbar{ width:0; height:0; }

.envelope.is-open .envFlap{ transform: rotateX(-155deg); }
.envelope.is-open .envPaper{
  transform: translateX(-50%) translateY(-6%);
  opacity: 1;
}

/* Seal (clickable) */
.envSeal{
  position:absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%,-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,99,184,.95), rgba(255,42,92,.9));
  box-shadow: 0 18px 35px rgba(255, 99, 184, .18);
  border: 1px solid rgba(255,255,255,.18);
  z-index: 4;
  cursor: pointer;
  padding: 0;
}
.envSeal::before{
  content:"";
  position:absolute;
  inset: 11px;
  background: rgba(255,255,255,.92);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M23.6 0c-2.7 0-5.1 1.3-6.6 3.3C15.5 1.3 13.1 0 10.4 0 4.7 0 0 4.6 0 10.3c0 10.1 16.9 18.5 16.9 18.5S33.8 20.4 33.8 10.3C33.8 4.6 29.3 0 23.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M23.6 0c-2.7 0-5.1 1.3-6.6 3.3C15.5 1.3 13.1 0 10.4 0 4.7 0 0 4.6 0 10.3c0 10.1 16.9 18.5 16.9 18.5S33.8 20.4 33.8 10.3C33.8 4.6 29.3 0 23.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .95;
}
.envSeal:hover{ filter: drop-shadow(0 0 14px rgba(255,99,184,.22)); }
.envSeal:active{ transform: translate(-50%,-50%) scale(.98); }
@keyframes seal-pulse{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-50%) scale(1.08); }
}
.envelope:not(.is-open) .envSeal{
  animation: seal-pulse 2.2s ease-in-out infinite;
}

/* Letter */
.letter{
  display:grid;
  gap: 12px;
  padding: 6px 4px 10px;
}
.paragraph{
  margin:0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.75;
  color: rgba(248,238,244,.92);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.paragraph.is-visible{ opacity: 1; transform: translateY(0); }
.paragraph strong{ color: rgba(255,255,255,.98); font-weight: 700; }
.signature{
  font-family: var(--title);
  font-style: normal;
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: .2px;
}

/* Reasons */
.reasons{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.reason{
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 14px 14px 12px;
  min-height: 108px;
  transition: transform .14s ease, background .18s ease, border-color .18s ease;
  opacity: 0.92;
}
.reason:hover{ transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(215,176,111,.45); }
.reason__title{ margin:0 0 6px; font: 700 14px/1.2 var(--ui); letter-spacing:.2px; color: rgba(255,255,255,.95); }
.reason__text{ margin:0; font: 400 14px/1.6 var(--ui); color: rgba(248,238,244,.78); }

/* NEW: Memories */
.memories{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  content-visibility: auto;
  contain-intrinsic-size: 360px;
}
.memHead{ display:flex; flex-direction:column; gap:6px; margin: 0 4px 10px; }
.memTitle{
  margin: 0;
  font: 800 14px/1.2 var(--ui);
  letter-spacing:.18em;
  text-transform: uppercase;
  color: rgba(215,176,111,.92);
}
.memHint{
  margin: 0;
  font-size: 13px;
  color: rgba(248,238,244,.62);
}
.memGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.memCard{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 12px 12px 10px;
}
.memCard__k{
  font: 700 12px/1.2 var(--ui);
  color: rgba(255,255,255,.92);
  margin: 0 0 6px;
}
.memCard__v{
  margin: 0;
  font: 400 13px/1.55 var(--ui);
  color: rgba(248,238,244,.72);
}

.footer{ padding: 2px 4px 2px; }
.fineprint{ margin: 8px 0 0; font-size: 12px; color: rgba(248,238,244,.55); letter-spacing:.2px; }

.hint{
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(248,238,244,.55);
  text-align:center;
  opacity: .9;
}

/* Kiss overlay (lips) */
.kiss-overlay{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items:center;
  justify-content:center;
  background: radial-gradient(1200px 700px at 50% 45%, rgba(255, 99, 184, .22), rgba(0,0,0,.72));
  backdrop-filter: blur(10px);
}
.kiss-overlay.is-show{
  display:flex;
  animation: overlay-in 420ms ease-out both;
}
@keyframes overlay-in{ from{ opacity: 0; } to{ opacity: 1; } }

.kiss-overlay__inner{
  width: min(92vw, 720px);
  padding: 22px 18px 18px;
  display:grid;
  place-items:center;
  gap: 10px;
}

.kiss-lips{
  width: min(78vmin, 520px);
  aspect-ratio: 1/1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 52%),
    radial-gradient(circle at 55% 60%, rgba(255,42,92,.55), rgba(255,42,92,0) 60%),
    radial-gradient(circle at 50% 50%, rgba(255,99,184,.92), rgba(255,99,184,.26) 60%, rgba(255,99,184,0) 74%);
  position: relative;
  box-shadow: 0 60px 140px rgba(0,0,0,.55);
  animation: kiss-pop 1200ms cubic-bezier(.2,.9,.2,1) both;
}
.kiss-lips::before{
  content:"";
  position:absolute;
  inset: 18%;
  background: rgba(255,255,255,.92);
  opacity: .92;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 33c8-10 14-10 20-6 6-4 12-4 20 6-6 12-14 16-20 16S18 45 12 33z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 33c8-10 14-10 20-6 6-4 12-4 20 6-6 12-14 16-20 16S18 45 12 33z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 18px 30px rgba(255,255,255,.18));
}
@keyframes kiss-pop{
  0%{ transform: scale(.55) rotate(-6deg); opacity: .0; filter: blur(6px); }
  25%{ opacity: 1; }
  100%{ transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0px); }
}
.kiss-text{
  margin:0;
  font: 700 clamp(16px, 2.2vw, 22px)/1.25 var(--ui);
  color: rgba(248,238,244,.92);
  text-align:center;
  max-width: 40ch;
}
.kiss-sub{
  margin:0;
  font: 500 13px/1.4 var(--ui);
  color: rgba(248,238,244,.62);
  text-align:center;
}

/* Secret overlay */
.secret{
  position: fixed;
  inset: 0;
  z-index: 130;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(10px);
}
.secret.is-show{ display:flex; animation: overlay-in 260ms ease-out both; }
.secret__card{
  width: min(92vw, 560px);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  box-shadow: 0 40px 120px rgba(0,0,0,.55);
  padding: 16px 16px 14px;
}
.secret__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.secret__heart{
  width: 42px; height:42px; border-radius: 999px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,99,184,.95);
  font: 900 18px/1 var(--ui);
}
.secret__close{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(248,238,244,.90);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  font: 700 13px/1 var(--ui);
}
.secret__title{
  margin: 12px 0 6px;
  font: 800 22px/1.15 var(--ui);
  color: rgba(255,255,255,.95);
}
.secret__text{
  margin: 0;
  font: 500 15px/1.6 var(--ui);
  color: rgba(248,238,244,.78);
}

/* Responsive */
@media (max-width: 860px){
  .reasons{ grid-template-columns: 1fr; }
  .memGrid{ grid-template-columns: 1fr; }
  .envelope{ aspect-ratio: auto; min-height: 520px; }
  .envPaper{ height: 94%; }
}
@media (max-width: 460px){
  .pinkies{ width: 42px; height: 42px; }
  .pinkies__svg{ width: 26px; height: 26px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ambient{ animation: none !important; }
  .trail-heart{ display:none !important; animation: none !important; }
  .lang__btn, .btn, .paragraph, .reason, .envFlap, .envPaper, .envelope{ transition: none !important; }
  .kiss-lips{ animation: none !important; }
  .envelope:not(.is-open) .envSeal{ animation: none !important; }
}