/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Playfair Display', serif;
  background:#000;
  overflow:hidden;
}

/* ===== INTRO ===== */
.intro{
  position:fixed;
  inset:0;
  z-index:10;
}
.intro video{
  width:100%;
  height:100%;
  object-fit:cover;
}
.intro-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  background:rgba(0,0,0,.35);
}
.intro-overlay h1{
  font-family:'Great Vibes', cursive;
  font-size:clamp(3.5rem,6vw,5rem);
}
.intro-overlay p{
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:10px;
}
.hint{margin-top:16px;opacity:.9}

/* ===== BUSTA ===== */
.envelope-stage{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:20;
}

.env-wrap{
  width:min(720px,92vw);
  aspect-ratio:16/10;
  perspective:1800px;
}

.envelope{
  width:100%;
  height:100%;
  position:relative;
  cursor:pointer;
}

/* base */
.env-back{
  position:absolute;
  inset:0;
  background:linear-gradient(#f7f2ea,#e9dcc9);
  border-radius:22px;
  box-shadow:0 40px 80px rgba(0,0,0,.25);
}

/* flap */
.flap{
  position:absolute;
  top:0;left:0;right:0;
  height:56%;
  background:#dccab1;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top;
  transition:1.6s cubic-bezier(.22,1.25,.36,1);
  z-index:6;
}

/* lettera */
.letter{
  position:absolute;
  left:5%;right:5%;
  top:12%;bottom:6%;
  background:#fffaf2;
  border-radius:18px;
  transform:translateY(46%);
  transition:1.85s cubic-bezier(.22,1,.36,1);
  z-index:2;
}
.letter__top{text-align:center;padding:24px}
.letter__title{
  font-family:'Great Vibes', cursive;
  font-size:52px;
  color:#2f3f35;
}

/* sigillo avorio */
.seal{
  position:absolute;
  left:50%;top:54%;
  transform:translate(-50%,-50%);
  width:130px;height:130px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #fff, #efe6d8 55%, #e0d2bf);
  box-shadow:
    inset 0 5px 10px rgba(255,255,255,.7),
    inset 0 -10px 18px #d6cbb9,
    0 24px 42px rgba(0,0,0,.3);
  display:grid;
  place-items:center;
  z-index:7;
}
.seal__mono{
  font-family:'Great Vibes', cursive;
  font-size:56px;
  color:#d9d0c0;
  text-shadow:
    0 1px 0 #fff,
    0 -1px 2px rgba(0,0,0,.35);
}

/* front */
.env-front{
  position:absolute;
  inset:0;
  border-radius:22px;
  z-index:4;
}
.env-front::before{
  content:"";
  position:absolute;
  inset:0;
  clip-path:polygon(0 100%,100% 100%,50% 44%);
  background:rgba(0,0,0,.05);
}

/* apertura */
.envelope.open .flap{transform:rotateX(-168deg)}
.envelope.open .letter{transform:translateY(-10%)}
.envelope.open .seal{opacity:0;transform:translate(-50%,-50%) scale(1.4)}

/* ===== HOME ===== */
.site{
  position:fixed;
  inset:0;
  display:none;
  overflow:auto;
  z-index:30;
}
.site.show{display:block}

.home-hero{
  position:relative;
  width:100vw;height:100vh;
}
.home-hero video{
  width:100%;height:100%;
  object-fit:cover;
}
.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.4);
}
.home-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  color:#fff;
  text-align:center;
}
.home-content h2{
  font-family:'Great Vibes', cursive;
  font-size:clamp(4rem,8vw,7rem);
}
.scroll-cta{
  margin-top:40px;
  color:#fff;
  text-decoration:none;
}
.scroll-cta span{
  animation:bounce 1.6s infinite;
}
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(8px)}
}