/* =========================================================
   PER ASIA — design tokens
   ========================================================= */
:root{
  --bg:            #14110F;
  --bg-alt:        #1A1512;
  --ivory:         #F1E8DA;
  --ivory-dim:     #cabfa9;
  --gold:          #C4A265;
  --gold-dim:      #8a744c;
  --wine:          #7a2233;
  --wine-bright:   #a4344a;
  --line:          rgba(241,232,218,0.14);
  --shadow:        rgba(0,0,0,0.55);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --body:  'Lora', Georgia, serif;
  --label: 'Jost', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; }

.heart{ color:var(--wine-bright); font-style:normal; }
.heart--pulse{ display:inline-block; font-size:2rem; animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.18); opacity:1; }
}

/* film-grain atmosphere */
.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{ max-width:1080px; margin:0 auto; padding:0 28px; }
.container--narrow{ max-width:680px; }

.eyebrow{
  font-family:var(--label);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 14px;
}

.title-serif{ font-size:clamp(2.1rem,5vw,3.2rem); line-height:1.15; margin-bottom:.5rem; }
.section-lead{ color:var(--ivory-dim); font-style:italic; margin:.3rem 0 3rem; font-size:1.05rem; }

.section{ position:relative; padding:120px 0; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  height:100vh;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  text-align:center;
}
.hero__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 25%;
  transform:scale(1.08);
  animation:heroDrift 18s ease-in-out infinite alternate;
  filter:saturate(0.9) contrast(1.02);
}
@keyframes heroDrift{
  from{ transform:scale(1.08) translateY(0); }
  to{ transform:scale(1.14) translateY(-1.5%); }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,12,10,.35) 0%, rgba(15,12,10,.55) 55%, rgba(15,12,10,.92) 100%);
}
.hero__content{
  position:relative; z-index:2;
  padding:0 24px;
  animation:heroIn 1.4s var(--ease) both;
}
@keyframes heroIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero__eyebrow{
  font-family:var(--label); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.hero__title{
  font-size:clamp(2.6rem,8vw,5rem);
  font-style:italic;
  letter-spacing:.01em;
  margin-bottom:18px;
  text-shadow:0 6px 30px rgba(0,0,0,.5);
}
.hero__subtitle{
  font-size:clamp(1rem,2vw,1.2rem);
  color:var(--ivory-dim);
  max-width:440px; margin:0 auto 44px;
}
.btn-enter{
  font-family:var(--label);
  letter-spacing:.18em; text-transform:uppercase; font-size:.82rem;
  background:transparent; color:var(--ivory);
  border:1px solid var(--gold-dim);
  padding:16px 34px;
  display:inline-flex; align-items:center; gap:12px;
  cursor:pointer;
  transition:all .5s var(--ease);
  border-radius:2px;
}
.btn-enter:hover{ background:var(--gold); color:var(--bg); border-color:var(--gold); gap:18px; }
.btn-enter svg{ transition:transform .4s var(--ease); }
.btn-enter:hover svg{ transform:translateX(4px); }

.hero__hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-family:var(--label); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ivory-dim); opacity:.6;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

/* When entered */
body.entered .hero{
  animation:heroExit 1s var(--ease) forwards;
}
@keyframes heroExit{
  to{ opacity:0; visibility:hidden; }
}
.site{ position:relative; z-index:1; }
body:not(.entered) .site{ display:none; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.scroll-divider{ display:flex; justify-content:center; margin-top:60px; }
.scroll-divider span{ width:1px; height:70px; background:linear-gradient(var(--gold),transparent); }

/* =========================================================
   INTRO
   ========================================================= */
.intro{ text-align:center; }
.intro__text p{ font-size:1.15rem; color:var(--ivory-dim); max-width:560px; margin:0 auto 22px; }
.intro__closing{ color:var(--ivory) !important; font-style:italic; }

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{ position:relative; padding-top:20px; }
.timeline__line{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(var(--line),var(--line));
  transform:translateX(-50%);
}
.timeline__item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:100px;
}
.timeline__item:last-child{ margin-bottom:0; }
.timeline__item .timeline__frame{ grid-column:1; }
.timeline__item .timeline__content{ grid-column:2; text-align:left; }
.timeline__item--right .timeline__frame{ grid-column:2; order:2; }
.timeline__item--right .timeline__content{ grid-column:1; order:1; text-align:right; }

.timeline__dot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:9px; height:9px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px var(--bg), 0 0 0 7px var(--line);
  z-index:2;
}
.timeline__frame{
  position:relative;
  border:1px solid var(--line);
  padding:10px;
  background:var(--bg-alt);
  box-shadow:0 20px 50px -20px var(--shadow);
  transition:transform .6s var(--ease);
}
.timeline__frame:hover{ transform:translateY(-6px); }
.timeline__frame img{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:saturate(.94) contrast(1.03);
}
.timeline__date{
  font-family:var(--label); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold);
}
.timeline__content h3{ font-size:1.7rem; margin:10px 0 10px; }
.timeline__content p{ color:var(--ivory-dim); font-size:.98rem; }

@media (max-width:760px){
  .timeline__line{ left:20px; }
  .timeline__item, .timeline__item--right{
    grid-template-columns:1fr; gap:22px; margin-bottom:70px; padding-left:52px;
  }
  .timeline__item .timeline__frame, .timeline__item .timeline__content,
  .timeline__item--right .timeline__frame, .timeline__item--right .timeline__content{
    grid-column:1; order:initial; text-align:left;
  }
  .timeline__dot{ left:20px; }
}

/* =========================================================
   GALLERY
   ========================================================= */
.galleria{ text-align:center; }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.gallery-item{
  position:relative;
  border:none; padding:0; cursor:pointer;
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--bg-alt);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1s var(--ease), filter .6s var(--ease);
  filter:saturate(.9) brightness(.92);
}
.gallery-item:hover img{ transform:scale(1.07); filter:saturate(1) brightness(1); }
.gallery-item__icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--ivory); font-size:1.6rem; font-family:var(--serif);
  background:rgba(15,12,10,0); opacity:0; transition:all .45s var(--ease);
}
.gallery-item:hover .gallery-item__icon{ opacity:1; background:rgba(15,12,10,.35); }

@media (max-width:700px){
  .gallery-grid{ grid-template-columns:1fr; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,8,7,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease);
  padding:30px;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(90vw,900px); max-height:85vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__close{
  position:absolute; top:24px; right:28px;
  background:none; border:1px solid var(--line); color:var(--ivory);
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1rem;
  transition:all .3s var(--ease);
}
.lightbox__close:hover{ background:var(--ivory); color:var(--bg); }

/* =========================================================
   SORPRESA — envelope
   ========================================================= */
.sorpresa{ text-align:center; }
.envelope-wrap{ display:flex; flex-direction:column; align-items:center; margin-top:20px; }

.envelope{ position:relative; width:240px; height:160px; cursor:pointer; perspective:1000px; }
.envelope__body{
  position:absolute; inset:0;
  background:linear-gradient(160deg,#201914,#150f0c);
  border:1px solid var(--line);
  box-shadow:0 25px 60px -20px var(--shadow);
  overflow:hidden;
}
.envelope__flap{
  position:absolute; top:0; left:0; right:0; height:100%;
  background:linear-gradient(155deg,#2a2119,#180f0c);
  clip-path:polygon(0 0, 100% 0, 50% 62%);
  transform-origin:top center;
  transition:transform 1s var(--ease);
  z-index:3;
  border-bottom:1px solid var(--line);
}
.envelope__seal{
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  z-index:5; color:var(--wine-bright);
  width:50px; height:50px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #b8465e, var(--wine) 70%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.5);
  transition:opacity .5s ease, transform .5s ease;
}
.envelope__seal svg{ color:#2a0f16; }
.envelope__letter{
  position:absolute; left:8px; right:8px; bottom:8px; top:20px;
  background:var(--ivory);
  display:flex; align-items:flex-end; justify-content:center;
  transform:translateY(6px);
  transition:transform 1.1s var(--ease) .15s;
  z-index:2;
}
.bouquet{ transform:translateY(30%); opacity:0; transition:all 1s var(--ease) .4s; }
.bloom{ transform-origin:center; opacity:0; transform:scale(.3); transition:all .6s var(--ease); }
.bloom--1{ transition-delay:.6s; } .bloom--2{ transition-delay:.75s; }
.bloom--3{ transition-delay:.9s; } .bloom--4{ transition-delay:1.0s; } .bloom--5{ transition-delay:1.1s; }

.envelope.is-open .envelope__flap{ transform:rotateX(180deg); }
.envelope.is-open .envelope__seal{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
.envelope.is-open .envelope__letter{ transform:translateY(-90px); }
.envelope.is-open .bouquet{ transform:translateY(0); opacity:1; }
.envelope.is-open .bloom{ opacity:1; transform:scale(1); }

.envelope__hint{
  margin-top:20px; font-family:var(--label); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ivory-dim); opacity:.7;
}
.envelope.is-open ~ .envelope__hint{ opacity:0; }

.surprise-message{
  max-width:520px; margin:60px auto 0;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .8s var(--ease), max-height 1.2s var(--ease);
}
.surprise-message.is-visible{ opacity:1; max-height:600px; }
.surprise-message h3{ font-size:1.8rem; margin-bottom:18px; }
.surprise-message p{ color:var(--ivory-dim); margin-bottom:10px; }
.surprise-message__cta-line{ color:var(--ivory) !important; font-style:italic; margin-bottom:28px !important; }

.btn-outline{
  font-family:var(--label); letter-spacing:.16em; text-transform:uppercase; font-size:.78rem;
  background:transparent; border:1px solid var(--gold-dim); color:var(--ivory);
  padding:15px 30px; cursor:pointer; transition:all .4s var(--ease); border-radius:2px;
}
.btn-outline:hover{ background:var(--gold); border-color:var(--gold); color:var(--bg); }

.redeemed-message{
  margin-top:24px; font-style:italic; color:var(--gold);
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .7s var(--ease), max-height .9s var(--ease);
}
.redeemed-message.is-visible{ opacity:1; max-height:100px; }

/* =========================================================
   LETTERA
   ========================================================= */
.lettera{ text-align:center; }
.letter-paper{
  margin-top:20px;
  background:linear-gradient(180deg,#f4ecdd,#ece1cd);
  color:#2c2620;
  padding:60px 44px;
  box-shadow:0 30px 70px -25px var(--shadow);
  position:relative;
  text-align:left;
}
.letter-paper::before{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(44,38,32,.18);
  pointer-events:none;
}
.letter-signature-top{
  font-family:var(--serif); font-style:italic; font-size:1.5rem; margin:0 0 26px;
}
.typewriter{
  font-family:var(--serif); font-size:1.25rem; line-height:1.8;
  white-space:pre-wrap;
}
.typewriter .cursor{
  display:inline-block; width:2px; height:1.1em; background:#2c2620;
  margin-left:2px; vertical-align:middle;
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

@media (max-width:600px){
  .letter-paper{ padding:40px 22px; }
  .typewriter{ font-size:1.1rem; }
}

/* =========================================================
   FINALE
   ========================================================= */
.finale{ text-align:center; min-height:70vh; display:flex; align-items:center; overflow:hidden; }
.finale__stars{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(1px 1px at 20% 30%, var(--ivory-dim), transparent),
                    radial-gradient(1px 1px at 70% 60%, var(--ivory-dim), transparent),
                    radial-gradient(1px 1px at 40% 80%, var(--gold), transparent),
                    radial-gradient(1px 1px at 85% 20%, var(--ivory-dim), transparent),
                    radial-gradient(1px 1px at 55% 45%, var(--gold), transparent);
  opacity:.5;
  animation:twinkle 5s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.35; } 50%{ opacity:.75; } }
.finale__text{ color:var(--ivory-dim); font-size:1.15rem; font-style:italic; margin-top:16px; }
.finale__mark{ margin-top:40px; }

footer, .footer-space{ height:60px; }