:root{
  --bg:#fbf6ef;
  --bg-soft:#fffaf4;
  --paper:#fffaf6;
  --paper-2:#fcf5eb;
  --beige:#ead6b8;
  --beige-2:#dcc09c;
  --beige-3:#cfa97e;
  --coffee:#7c583c;
  --coffee-deep:#5c3e28;
  --ink:#6e5138;
  --muted:#a07b57;
  --line:rgba(126, 88, 50, .14);
  --gold:#c29457;
  --wax:#c86f66;
  --wax-mid:#b45f58;
  --wax-deep:#964d48;
  --talavera-blue:#6d8fa5;
  --talavera-sky:#8fb8cb;
  --talavera-cream:#f4ead9;
  --shadow-xl:0 24px 60px rgba(103, 78, 52, .14);
  --shadow-lg:0 16px 34px rgba(103, 78, 52, .12);
  --shadow-md:0 10px 24px rgba(103, 78, 52, .10);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --env-w:min(90vw, 392px);
  --maxw:430px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-width:320px;
  font-family:"Montserrat",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.9), transparent 30%),
    linear-gradient(180deg, #f6f1e8 0%, #f9f5ef 40%, #fcfaf6 100%);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; }
button,input{ font:inherit; }
.svg-defs{ position:absolute; }

.site{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.sky{
  position:fixed;
  z-index:0;
  pointer-events:none;
  opacity:.45;
  filter:blur(1px);
}
.sky::before,
.sky::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.78);
  border-radius:999px;
  box-shadow:0 18px 30px rgba(196,180,158,.18);
}
.sky::before{ inset:0; }
.sky::after{ width:54%; height:76%; top:-18%; right:7%; }
.cloud-1,
.cloud-2,
.cloud-3{ width:160px; height:56px; }
.cloud-1{
  top:10%;
  left:-180px;
  animation:cloudDriftFancy 22s linear infinite;
}

.cloud-2{
  top:24%;
  left:-220px;
  transform:scale(.86);
  animation:cloudDriftFancy 28s linear infinite 4s;
}

.cloud-3{
  top:60%;
  left:-200px;
  transform:scale(.96);
  animation:cloudDriftFancy 24s linear infinite 9s;
}


.watermark-rays{
  position:fixed;
  left:50%;
  top:24%;
  width:280px;
  height:280px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(222,190,150,.12) 0%, rgba(222,190,150,.04) 36%, rgba(222,190,150,0) 72%);
}

main{ position:relative; z-index:2; }

.hero-screen{
  min-height:100svh;
  padding:calc(28px + var(--safe-top)) 18px calc(26px + var(--safe-bottom));
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-inner{
  width:min(100%, var(--maxw));
  text-align:center;
  position:relative;
}

.eyebrow{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

.hero-title{
  margin:0;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(40px, 10vw, 56px);
  line-height:1;
  color:var(--coffee-deep);
}

.hero-subtitle{
  margin:10px 0 24px;
  font-family:"Great Vibes",cursive;
  font-size:clamp(34px, 8.6vw, 50px);
  line-height:1.05;
  color:#b28b63;
}

.picado-strip{
  width:min(100%, 372px);
  margin:0 auto 18px;
}
.picado-strip svg,
.paper-lace-top svg{
  width:100%;
  height:auto;
  display:block;
}
.picado-strip path,
.paper-lace-top path{
  fill:#efe0cc;
  stroke:rgba(157,126,92,.26);
  stroke-width:1;
}
.picado-cutouts circle,
.picado-cutouts path{
  fill:none;
  stroke:rgba(157,126,92,.36);
  stroke-width:1.25;
  stroke-linecap:round;
}

.envelope-drop{
  position:relative;
  display:flex;
  justify-content:center;
  perspective:1700px;
  min-height:348px;
}

.envelope-shadow{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  width:74%;
  height:28px;
  border-radius:50%;
  background:rgba(123,95,66,.16);
  filter:blur(20px);
  animation:shadowPulse 1.35s ease-out both;
}

.envelope{
  position:relative;
  width:var(--env-w);
  height:calc(var(--env-w) * .82);
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  appearance:none;
  animation:envelopeDrop 1.35s cubic-bezier(.16,.9,.22,1) both;
}

.envelope-shell,
.envelope-front,
.envelope-flap-top,
.flap-triangle,
.letter-preview,
.envelope-letter-shadow,
.seal,
.envelope-lace-border,
.front-medallion,
.front-title{
  position:absolute;
}

.envelope-shell{
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:83%;
  border-radius:28px;
  background:
    linear-gradient(180deg, #fbf0df 0%, #ead2af 100%);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
}
.envelope-shell::before,
.envelope-shell::after{
  content:"";
  position:absolute;
  bottom:0;
  width:56%;
  height:74%;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(183,149,113,.15)), linear-gradient(135deg, #edd9bb, #f8ebda);
}
.envelope-shell::before{
  left:-4%;
  clip-path:polygon(0 100%, 100% 28%, 100% 100%);
}
.envelope-shell::after{
  right:-4%;
  clip-path:polygon(0 28%, 100% 100%, 0 100%);
}

.envelope-lace-border{
  inset:auto 14px 18px 14px;
  height:calc(83% - 34px);
  border-radius:22px;
  border:1px solid rgba(176,143,108,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  z-index:1;
}

.envelope-letter-shadow{
  left:9%;
  top:18%;
  width:82%;
  height:52%;
  border-radius:28px;
  background:rgba(115, 91, 66, .12);
  filter:blur(18px);
  z-index:1;
}

.letter-preview{
  left:7%;
  top:34%;
  width:86%;
  height:54%;
  z-index:5;
  border-radius:20px;
  background:
    linear-gradient(180deg, #fffefb 0%, #fbf5ed 100%);
  border:1px solid rgba(178,145,109,.16);
  box-shadow:0 14px 22px rgba(116,91,66,.12);
  padding:18px 16px 14px;
  transform:translateY(0) scale(.98);
  transition:
    transform 1.15s cubic-bezier(.2,.8,.2,1),
    top 1.15s cubic-bezier(.2,.8,.2,1),
    opacity .8s ease,
    z-index .1s linear;
  overflow:hidden;
}

body.opened .letter-preview{
  top:2%;
  z-index:11;
  transform:translateY(-10px) scale(1.02);
}

.letter-lace-top{
  display:block;
  width:100%;
  height:16px;
  margin-bottom:10px;
  border-top:2px dotted rgba(184,156,124,.45);
}

.letter-cross{
  display:block;
  text-align:center;
  color:var(--coffee);
  font-size:22px;
}

.letter-kicker{
  display:block;
  margin-top:8px;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
  color:var(--muted);
}

.letter-name{
  display:block;
  margin-top:8px;
  font-family:"Great Vibes",cursive;
  font-size:30px;
  line-height:1.06;
  text-align:center;
  color:#b28b63;
}

.letter-date{
  display:block;
  margin-top:8px;
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.envelope-flap-top{
  top:17%;
  left:0;
  right:0;
  width:100%;
  height:27%;
  z-index:6;
  background:linear-gradient(180deg, #f1dfc4, #e8cfaa);
  border-radius:28px 28px 0 0;
  box-shadow:none;
}

.flap-triangle{
  left:50%;
  top:27%;
  width:96%;
  height:42%;
  transform:translateX(-50%);
  z-index:7;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(180deg, #edd8b7 0%, #e0c096 100%);
  box-shadow:none;
  transform-origin:top center;
  transition:
    transform 1s cubic-bezier(.2,.8,.2,1),
    opacity .6s ease,
    top .8s ease;
}

.envelope-front{
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:54%;
  z-index:8;
  border-radius:0 0 28px 28px;
  background:linear-gradient(180deg, #ead4b4 0%, #dfc29d 100%);
  overflow:hidden;
}
.envelope-front::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, transparent 0 47.8%, rgba(173,136,99,.18) 49.2% 50.3%, transparent 52.4% 100%),
    linear-gradient(225deg, transparent 0 47.8%, rgba(173,136,99,.18) 49.2% 50.3%, transparent 52.4% 100%);
}

.front-medallion{
  top:58px;
  width:58px;
  height:58px;
  border-radius:50%;
  border:2px solid rgba(174,142,107,.34);
  z-index:9;
}
.front-medallion::before,
.front-medallion::after{
  content:"";
  position:absolute;
  background:rgba(174,142,107,.28);
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.front-medallion::before{ width:18px; height:2px; }
.front-medallion::after{ width:2px; height:18px; }
.front-medallion-left{ left:18px; }
.front-medallion-right{ right:18px; }

.front-title{
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  z-index:9;
  font-family:"Great Vibes",cursive;
  font-size:24px;
  color:#956845;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.seal{
  left:50%;
  top:58%;
  transform:translate(-50%, -50%);
  width:98px;
  height:98px;
  border-radius:50%;
  z-index:10;
  background:
    radial-gradient(circle at 30% 24%, #efb0a7 0%, #df9187 18%, var(--wax) 36%, var(--wax-mid) 64%, var(--wax-deep) 100%);
  box-shadow:
    0 12px 20px rgba(146,77,72,.22),
    inset 0 6px 10px rgba(255,255,255,.20),
    inset 0 -8px 10px rgba(103,52,49,.22);
  transition:transform .35s ease, opacity .45s ease;
}
.seal::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    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='120' height='120' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.seal-rim,
.seal-inner-rim,
.seal-mark,
.seal-name{ position:absolute; }
.seal-rim{
  inset:8px;
  border-radius:50%;
  border:2px solid rgba(255,239,233,.28);
}
.seal-inner-rim{
  inset:15px;
  border-radius:50%;
  border:2px dashed rgba(255,239,233,.35);
}
.seal-mark{
  top:13px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  color:rgba(255,255,255,.48);
}
.seal-name{
  inset:0;
  display:grid;
  place-items:center;
  font-family:"Cormorant Garamond",serif;
  font-size:22px;
  font-weight:700;
  color:#fff7f3;
  letter-spacing:.03em;
}

.tap-hint{
  margin:16px 0 0;
  color:var(--muted);
  font-size:13px;
}

.scroll-indicator{
  margin-top:20px;
  display:grid;
  gap:6px;
  justify-items:center;
  color:var(--muted);
}
.scroll-indicator span{
  display:block;
  width:24px;
  height:40px;
  border:1.5px solid rgba(143,117,87,.34);
  border-radius:999px;
  position:relative;
}
.scroll-indicator span::after{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  width:4px;
  height:8px;
  margin-left:-2px;
  border-radius:999px;
  background:#b28b63;
  animation:scrollDot 1.8s infinite;
}

body.opened .flap-triangle{
  transform:translateX(-50%) rotateX(180deg);
  opacity:.08;
  top:18%;
}
body.opened .letter-preview{
  top:8%;
  transform:translateY(-18px);
}
body.opened .seal{
  opacity:0;
  transform:translate(-50%, -50%) scale(.82);
  pointer-events:none;
}

.paper-stage,
.story-section{
  position:relative;
  z-index:2;
  padding:0 14px;
}

.paper-card,
.story-card,
.gallery-card,
.map-card,
.confirm-card,
.momentos-card{
  width:min(100%, var(--maxw));
  margin:0 auto;
  background:linear-gradient(180deg, rgba(255,252,247,.98), rgba(252,247,240,.98));
  border:1px solid rgba(171,138,103,.14);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
}

.paper-card{
  border-radius:var(--radius-xl);
  padding:0 18px 24px;
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,251,246,.98), rgba(251,245,236,.98)),
    radial-gradient(circle at top right, rgba(143,184,203,.08), transparent 28%),
    radial-gradient(circle at bottom left, rgba(194,148,87,.07), transparent 28%);
}
.paper-card::before{
  content:"";
  position:absolute;
  inset:22px 14px 22px 14px;
  border:1px solid rgba(178,145,109,.12);
  border-radius:26px;
  pointer-events:none;
}

.paper-lace-top{
  margin:0 -18px 18px;
  background:linear-gradient(180deg, #f3e7d7, #efdeca);
  padding-top:8px;
}

.paper-header{
  text-align:center;
  position:relative;
  z-index:1;
}
.mini-cross{
  display:inline-block;
  color:var(--gold);
  font-size:24px;
  margin-bottom:6px;
}
.paper-kicker,
.story-kicker,
.block-label,
.countdown-label,
.momentos-label{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  color:var(--muted);
}
.paper-title{
  margin:8px 0 4px;
  font-family:"Cormorant Garamond",serif;
  font-size:40px;
  line-height:1;
  color:var(--coffee-deep);
}
.paper-name{
  margin:0 0 12px;
  font-family:"Great Vibes",cursive;
  font-size:38px;
  line-height:1.08;
  color:#b28b63;
}
.paper-copy{
  margin:0 auto;
  max-width:320px;
  font-size:14px;
  line-height:1.78;
  color:var(--ink);
}
.paper-copy.second{ margin-top:10px; }

.portrait-frame{
  width:224px;
  height:224px;
  margin:24px auto 16px;
  position:relative;
}
.portrait-lace{
  position:absolute;
  inset:-14px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0) 64%, rgba(224,206,181,.7) 65%, rgba(224,206,181,.7) 68%, rgba(255,255,255,0) 69%),
    conic-gradient(from 0deg, rgba(226,205,176,.8), rgba(248,242,232,1), rgba(208,185,153,.85), rgba(248,242,232,1), rgba(226,205,176,.8));
  filter:drop-shadow(0 10px 18px rgba(126,100,72,.12));
}
.portrait-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:7px solid rgba(255,255,255,.96);
}
.photo-tag{
  position:absolute;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.95);
  border:1px solid rgba(176,143,108,.16);
  color:var(--muted);
  font-size:11px;
  border-radius:999px;
  padding:7px 12px;
  white-space:nowrap;
}

.details-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:18px;
}
.detail-card,
.info-block,
.story-card,
.gallery-card,
.map-card,
.confirm-card,
.momentos-card{
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(252,245,236,.88));
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.detail-card{
  padding:16px 12px;
  text-align:center;
}
.detail-label{
  display:block;
  margin-bottom:6px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.detail-card h4,
.info-block h4{
  margin:0;
  font-size:18px;
  color:var(--coffee-deep);
}

.countdown-card{
  margin-top:14px;
  padding:16px 14px;
  text-align:center;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}
.countdown > div{
  background:linear-gradient(180deg, #fff, #faf4ed);
  border:1px solid rgba(176,143,108,.16);
  border-radius:18px;
  padding:12px 6px;
}
.countdown strong{
  display:block;
  font-size:22px;
  color:var(--coffee-deep);
}
.countdown span{
  display:block;
  margin-top:4px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}

.ornament-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0;
}
.ornament-divider span{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(166,136,104,.38), transparent);
}
.ornament-divider i{
  font-style:normal;
  color:var(--gold);
  font-size:18px;
}

.info-block{
  margin-top:12px;
  padding:16px;
  text-align:center;
}
.info-block p:last-child{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.62;
  color:var(--ink);
}

.momentos-card{
  margin-top:14px;
  padding:18px 14px;
}
.momentos-list{
  display:grid;
  gap:14px;
  margin-top:14px;
}
.momento-item{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:12px;
  align-items:start;
}
.momento-time{
  min-height:56px;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:18px;
  border:1px solid rgba(176,143,108,.18);
  background:linear-gradient(180deg, #fff, #f7efe5);
  color:var(--coffee-deep);
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  padding:8px 6px;
}
.momento-body{
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(176,143,108,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,243,234,.88));
}
.momento-body h5{
  margin:0 0 4px;
  font-size:15px;
  color:var(--coffee-deep);
}
.momento-body p{
  margin:0;
  font-size:13px;
  line-height:1.62;
  color:var(--ink);
}

.story-card-final{
  margin-top:4px;
  margin-bottom:0;
  text-align:center;
}
.story-card-final h3{
  margin-bottom:10px;
}
.story-card-final p:last-child{
  max-width:330px;
  margin:0 auto;
}

.cta-row{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.cta-row.compact{ margin-top:14px; }
.btn-primary,
.btn-secondary,
.audio-btn,
.gallery-dot{
  transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}
.btn-primary,
.btn-secondary,
.audio-btn{
  min-height:52px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:0;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, #b18a62, #8a6546);
  box-shadow:0 12px 24px rgba(120,90,62,.20);
}
.btn-secondary,
.audio-btn{
  color:var(--coffee-deep);
  background:rgba(255,255,255,.86);
  border:1px solid rgba(176,143,108,.16);
  box-shadow:var(--shadow-md);
}
.btn-primary:hover,
.btn-secondary:hover,
.audio-btn:hover,
.gallery-dot:hover{ transform:translateY(-1px); }

.paper-bottom-lace{
  margin:24px -18px -24px;
  height:78px;
  background:
    radial-gradient(circle at 18px 58px, rgba(255,255,255,.96) 14px, transparent 15px) repeat-x,
    linear-gradient(180deg, rgba(217,198,172,.16), rgba(217,198,172,.03));
  background-size:34px 34px, 100% 100%;
}

.story-section{
  padding-top:26px;
  padding-bottom:calc(32px + var(--safe-bottom));
}
.story-card,
.gallery-card,
.map-card,
.confirm-card{
  width:min(100%, var(--maxw));
  margin:0 auto 16px;
  padding:20px 18px;
}
.story-card h3,
.gallery-card h3,
.map-card h3,
.confirm-card h3{
  margin:8px 0;
  font-family:"Cormorant Garamond",serif;
  font-size:31px;
  line-height:1.1;
  color:var(--coffee-deep);
}
.story-card p:last-child,
.confirm-card p:last-child{
  margin:0;
  font-size:14px;
  line-height:1.74;
}

.gallery-slider{
  position:relative;
  margin-top:14px;
  height:320px;
  border-radius:22px;
  overflow:hidden;
  background:#f2e7d8;
}
.gallery-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .55s ease;
}
.gallery-slide.active{ opacity:1; }
.gallery-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.gallery-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}
.gallery-dot{
  width:10px;
  height:10px;
  padding:0;
  border-radius:50%;
  border:0;
  background:rgba(149,117,83,.24);
  cursor:pointer;
}
.gallery-dot.active{ background:#a67d56; }

.maps-stack{
  width:min(100%, var(--maxw));
  margin:0 auto 16px;
  display:grid;
  gap:16px;
}
.map-frame{
  margin-top:14px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(176,143,108,.14);
  box-shadow:var(--shadow-md);
}
.map-frame iframe{
  display:block;
  width:100%;
  min-height:280px;
}

.audio-control{
  width:min(100%, var(--maxw));
  margin:0 auto 16px;
  display:flex;
  justify-content:center;
}
.audio-btn{
  width:100%;
  max-width:280px;
}

.reveal{
  opacity:0;
  transform:translateY(30px) scale(.986);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.active{
  opacity:1;
  transform:translateY(0) scale(1);
}

@keyframes envelopeDrop{
  0%{ transform:translateY(-92px) scale(.95) rotate(-2.5deg); opacity:0; }
  58%{ transform:translateY(14px) scale(1.02) rotate(.9deg); opacity:1; }
  76%{ transform:translateY(-4px) scale(.996) rotate(-.4deg); }
  100%{ transform:translateY(0) scale(1) rotate(0); opacity:1; }
}
@keyframes shadowPulse{
  0%{ transform:translateX(-50%) scale(.72); opacity:0; }
  60%{ transform:translateX(-50%) scale(1.08); opacity:.20; }
  100%{ transform:translateX(-50%) scale(1); opacity:.16; }
}
@keyframes cloudDriftFancy{
  0%{
    transform:translate3d(0, 0, 0) scale(1);
    opacity:0;
  }
  8%{
    opacity:.48;
  }
  22%{
    transform:translate3d(26vw, -8px, 0) scale(1.02);
  }
  48%{
    transform:translate3d(54vw, 7px, 0) scale(.98);
  }
  74%{
    transform:translate3d(78vw, -10px, 0) scale(1.03);
  }
  92%{
    opacity:.46;
  }
  100%{
    transform:translate3d(calc(100vw + 240px), 4px, 0) scale(1);
    opacity:0;
  }
}
@keyframes scrollDot{
  0%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(14px); opacity:0; }
}

@media (min-width:480px){
  .hero-screen,
  .paper-stage,
  .story-section{ padding-left:22px; padding-right:22px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}



.doves{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}

.dove{
  position:absolute;
  top:-12vh;
  font-size:20px;
  opacity:0;
  filter:drop-shadow(0 8px 10px rgba(120, 100, 80, .08));
  will-change:transform, opacity;
}

.d1{ left:8%;  animation:doveFloat1 11s linear infinite; }
.d2{ left:22%; animation:doveFloat2 13s linear infinite 2s; }
.d3{ left:41%; animation:doveFloat3 12s linear infinite 4s; }
.d4{ left:63%; animation:doveFloat4 14s linear infinite 1s; }
.d5{ left:79%; animation:doveFloat5 10.5s linear infinite 5s; }
.d6{ left:90%; animation:doveFloat6 12.8s linear infinite 7s; }

@keyframes doveFloat1{
  0%   { transform:translate3d(0, -8vh, 0) rotate(-8deg) scale(.8); opacity:0; }
  10%  { opacity:.55; }
  25%  { transform:translate3d(12px, 20vh, 0) rotate(6deg) scale(.95); }
  50%  { transform:translate3d(-10px, 48vh, 0) rotate(-5deg) scale(1); }
  75%  { transform:translate3d(16px, 73vh, 0) rotate(7deg) scale(.92); }
  100% { transform:translate3d(-8px, 112vh, 0) rotate(-4deg) scale(.85); opacity:0; }
}

@keyframes doveFloat2{
  0%   { transform:translate3d(0, -10vh, 0) rotate(6deg) scale(.72); opacity:0; }
  12%  { opacity:.42; }
  28%  { transform:translate3d(-18px, 26vh, 0) rotate(-9deg) scale(.9); }
  56%  { transform:translate3d(14px, 57vh, 0) rotate(8deg) scale(1.02); }
  82%  { transform:translate3d(-12px, 84vh, 0) rotate(-6deg) scale(.9); }
  100% { transform:translate3d(10px, 112vh, 0) rotate(4deg) scale(.78); opacity:0; }
}

@keyframes doveFloat3{
  0%   { transform:translate3d(0, -12vh, 0) rotate(-5deg) scale(.88); opacity:0; }
  10%  { opacity:.5; }
  32%  { transform:translate3d(20px, 30vh, 0) rotate(10deg) scale(1); }
  58%  { transform:translate3d(-16px, 56vh, 0) rotate(-10deg) scale(.9); }
  86%  { transform:translate3d(12px, 87vh, 0) rotate(6deg) scale(.82); }
  100% { transform:translate3d(-8px, 112vh, 0) rotate(-3deg) scale(.75); opacity:0; }
}

@keyframes doveFloat4{
  0%   { transform:translate3d(0, -9vh, 0) rotate(8deg) scale(.76); opacity:0; }
  14%  { opacity:.45; }
  38%  { transform:translate3d(-12px, 34vh, 0) rotate(-6deg) scale(.92); }
  60%  { transform:translate3d(18px, 60vh, 0) rotate(8deg) scale(1.04); }
  84%  { transform:translate3d(-20px, 88vh, 0) rotate(-8deg) scale(.9); }
  100% { transform:translate3d(10px, 112vh, 0) rotate(5deg) scale(.8); opacity:0; }
}

@keyframes doveFloat5{
  0%   { transform:translate3d(0, -10vh, 0) rotate(-7deg) scale(.84); opacity:0; }
  11%  { opacity:.44; }
  30%  { transform:translate3d(14px, 22vh, 0) rotate(8deg) scale(.94); }
  55%  { transform:translate3d(-18px, 52vh, 0) rotate(-7deg) scale(1); }
  78%  { transform:translate3d(10px, 80vh, 0) rotate(5deg) scale(.88); }
  100% { transform:translate3d(-8px, 112vh, 0) rotate(-4deg) scale(.78); opacity:0; }
}

@keyframes doveFloat6{
  0%   { transform:translate3d(0, -11vh, 0) rotate(5deg) scale(.7); opacity:0; }
  10%  { opacity:.38; }
  24%  { transform:translate3d(-10px, 18vh, 0) rotate(-6deg) scale(.82); }
  49%  { transform:translate3d(18px, 46vh, 0) rotate(10deg) scale(.98); }
  72%  { transform:translate3d(-14px, 70vh, 0) rotate(-8deg) scale(.9); }
  100% { transform:translate3d(8px, 112vh, 0) rotate(4deg) scale(.75); opacity:0; }
}

.dove{
  color:rgba(255,255,255,.85);
  text-shadow:0 2px 8px rgba(173,146,111,.16);
}

.letter-cross,
.mini-cross{
  font-family:"Cormorant Garamond","Times New Roman",serif;
  font-variant-emoji:text;
}