*{box-sizing:border-box}
:root{--green:#33503f;--gold:#a9803f;--gold-soft:#c9a876;--cream:#f7f3ed;--ink:#352f2a}
html,body{margin:0;width:100%;min-height:100%;background:var(--cream);color:var(--ink);font-family:'Cormorant Garamond',serif;overscroll-behavior:none}
body{display:flex;justify-content:center}
.phone-stage{position:relative;width:100vw;max-width:480px;min-height:100svh;background:#fbf8f2;overflow-x:hidden}
.intro{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;width:100vw;max-width:480px;height:100svh;overflow:hidden;background:#fff;z-index:30}

/* THE CARD INSIDE THE ENVELOPE — cream backdrop (matches envelope paper, no white),
   card scaled to sit within the envelope mouth, rounded like a real invitation card */
.reveal-scene{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:grid;place-items:center;overflow:hidden;background:#f5eedf}
.reveal-img{width:100%;height:100%;object-fit:cover;transform:scale(.52) translateY(-10%);transform-origin:50% 40%;border-radius:22px;box-shadow:0 22px 60px -18px rgba(90,70,45,.35);will-change:transform}

/* ENVELOPE LAYERS (in front of the scene) */
.envelope-wrap{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;z-index:2}
.env{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.closed{z-index:3}
.flap{z-index:4;transform-origin:50% 40%;opacity:0;will-change:transform}
.bottom{z-index:3;opacity:0;will-change:transform}
.tap-zone{position:absolute;left:50%;top:56%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:10;background:transparent;border:0;outline:0;box-shadow:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.tap-zone:focus{outline:0}
.tap-text{position:absolute;left:0;right:0;top:66.3%;z-index:9;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;letter-spacing:.12em;color:rgba(70,61,52,.55);text-transform:lowercase}

/* OPEN SEQUENCE — matched to the reference video:
   1) flap lifts up+back revealing the scene through the envelope mouth
   2) bottom slides down out of frame WHILE the scene zooms up to full screen
   3) intro fades, site hero (same scene) is underneath = seamless */
.intro.opening .closed{opacity:0;transition:opacity .12s linear}
.intro.opening .flap{opacity:1;animation:flapLift 1.15s cubic-bezier(.24,.8,.18,1) forwards}
.intro.opening .bottom{opacity:1;animation:bottomDrop 1.7s cubic-bezier(.3,.05,.2,1) .75s forwards}
.intro.opening .reveal-img{animation:sceneZoom 2.2s cubic-bezier(.3,.08,.16,1) .55s forwards}
.intro.opening .tap-text{animation:fadeOut .2s ease forwards}
.intro.opening .tap-zone{pointer-events:none}
.intro.leave{animation:fadeOut .6s ease forwards}

/* MAIN SITE */
.site{position:relative;z-index:1;min-height:100svh;opacity:0;background:#faf5ed}
.site.active{opacity:1}
.hero{height:100svh;position:relative;overflow:hidden;display:grid;place-items:center;background:#f8f2e9}
/* scene-wrap keeps the card's exact aspect so the boat stays pinned to its spot on the sea;
   JS sizes it to cover the hero */
.scene-wrap{position:absolute;left:50%;top:50%;width:auto;height:106%;aspect-ratio:941/1672;min-width:106%;transform:translate(-50%,-50%);animation:seaMove 14s ease-in-out infinite alternate}
.scene-bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;z-index:0;will-change:transform,filter}
.site.active .scene-bg{animation:seaBackgroundDrift 9s ease-in-out 1s infinite alternate}
.scene-wrap::after{content:"";position:absolute;left:-12%;right:-12%;top:57%;bottom:0;z-index:3;pointer-events:none;opacity:0;background:repeating-linear-gradient(172deg,rgba(255,255,255,.22) 0 2px,transparent 2px 14px),repeating-linear-gradient(8deg,rgba(255,255,255,.12) 0 1px,transparent 1px 18px),linear-gradient(180deg,transparent 0%,rgba(255,255,255,.16) 45%,transparent 100%);mix-blend-mode:soft-light;transform:translateX(-4%);will-change:transform,opacity}
.site.active .scene-wrap::after{animation:waterMotion 5.8s ease-in-out 1.1s infinite;opacity:.62}
/* boat: appears from the sea itself, then floats gently on the water */
.boat{position:absolute;left:30%;top:71%;width:40%;height:auto;opacity:0;z-index:2;will-change:transform,opacity}
.site.active .boat{animation:boatIn 4.8s cubic-bezier(.25,.78,.16,1) 1.15s forwards, boatFloat 7.5s ease-in-out 6s infinite}
@keyframes boatIn{
  0%{opacity:0;transform:translateY(22%) scale(.96);clip-path:inset(100% 0 0 0)}
  18%{opacity:.18;transform:translateY(18%) scale(.965);clip-path:inset(76% 0 0 0)}
  42%{opacity:.52;transform:translateY(11%) scale(.98);clip-path:inset(45% 0 0 0)}
  70%{opacity:.82;transform:translateY(4%) scale(.995);clip-path:inset(14% 0 0 0)}
  100%{opacity:1;transform:translateY(0) scale(1);clip-path:inset(0 0 0 0)}
}
@keyframes boatFloat{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(.18%,-.55%) rotate(.18deg)}
  50%{transform:translate(.38%,.12%) rotate(-.12deg)}
  75%{transform:translate(.12%,-.36%) rotate(.08deg)}
}
@keyframes seaBgDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-.7%,.25%,0) scale(1.012)}
}
@keyframes seaBackgroundDrift{
  0%{transform:scale(1.01) translateY(0);filter:saturate(1)}
  50%{transform:scale(1.025) translateY(.35%);filter:saturate(1.04)}
  100%{transform:scale(1.015) translateY(-.25%);filter:saturate(1.02)}
}
@keyframes waterMotion{
  0%,100%{transform:translateX(-5%) translateY(0) skewX(-1deg)}
  50%{transform:translateX(5%) translateY(.9%) skewX(1deg)}
}
.hero-copy{position:relative;z-index:3;text-align:center;margin-top:-12svh;color:#3e382f;text-shadow:0 1px 18px rgba(255,255,255,.8);opacity:0}
.site.active .hero-copy{animation:copyIn 1.4s ease 6.2s forwards}
@keyframes copyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.eyebrow{font-family:'Bodoni Moda',serif;font-size:11px;letter-spacing:.5em;text-transform:uppercase;text-indent:.5em;margin:0 0 22px;opacity:.7}
.script-names{font-family:'Pinyon Script',cursive;font-weight:400;font-size:clamp(64px,20vw,104px);line-height:1;margin:0;color:var(--green);text-shadow:0 1px 24px rgba(255,255,255,.9)}
.script-names .amp{display:block;font-size:.55em;margin:.08em 0;opacity:.85}
.hero-date{font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:.44em;margin:30px 0 0;text-indent:.44em;color:var(--ink)}
.scroll-hint{position:absolute;bottom:22px;left:0;right:0;z-index:3;text-align:center;font-size:10px;letter-spacing:.34em;text-transform:uppercase;opacity:0;font-family:'Bodoni Moda',serif}
.site.active .scroll-hint{animation:hintIn .8s ease 7.4s forwards, hintFloat 2.6s ease-in-out 8.2s infinite}
@keyframes hintIn{to{opacity:.5}}

/* SHARED SECTION STYLE */
.details{position:relative;min-height:72svh;padding:92px 28px 70px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fbf7ef;border-top:1px solid rgba(72,57,42,.08);overflow:hidden;opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1s ease}
.details.in-view{opacity:1;transform:translateY(0)}
.credit{opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s ease}
.credit.in-view{opacity:1;transform:translateY(0)}
.details:nth-of-type(even){background:#f7f1e7}
.details::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('assets/watermark.svg');background-size:220px 220px;opacity:.55;pointer-events:none}
.details>*{position:relative;z-index:1}
.script{font-family:'Pinyon Script',cursive;font-weight:400;font-size:58px;line-height:1;margin:0 0 14px;color:var(--green)}
.rule{display:block;width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 30px}
.mini{font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:#7d6f60;margin:6px 0 0}

/* BIG DAY */
.big-day{background:#fbfaf6!important;min-height:100svh;padding:0 28px}
.curtain-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:#fbfaf6}
.curtain-panel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform;opacity:.96}
.curtain-left{clip-path:inset(0 50% 0 0);transform-origin:0 50%;animation:curtainWindLeft 5.8s ease-in-out infinite}
.curtain-right{clip-path:inset(0 0 0 50%);transform-origin:100% 50%;animation:curtainWindRight 6.4s ease-in-out infinite}
.big-day>*:not(.curtain-bg){position:relative;z-index:1}
@keyframes curtainWindLeft{
  0%,100%{transform:translateX(0) skewX(0deg) scaleY(1)}
  35%{transform:translateX(-1.2%) skewX(-1.4deg) scaleY(1.006)}
  68%{transform:translateX(.6%) skewX(.7deg) scaleY(.998)}
}
@keyframes curtainWindRight{
  0%,100%{transform:translateX(0) skewX(0deg) scaleY(1)}
  38%{transform:translateX(1.2%) skewX(1.4deg) scaleY(1.006)}
  72%{transform:translateX(-.6%) skewX(-.7deg) scaleY(.998)}
}
.date-row{display:flex;gap:22px;align-items:center;font-family:'Bodoni Moda',serif;font-size:52px;letter-spacing:.08em;margin-bottom:18px;color:var(--ink)}
.date-row i{width:1px;height:34px;background:var(--gold-soft)}

/* COUNTDOWN */
.countdown-section{position:relative}
.columns-bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;opacity:0.9;z-index:0}
.countdown-section>*:not(.columns-bg){position:relative;z-index:1}
.countdown{display:flex;gap:20px;margin-top:34px;position:relative}
.countdown::before,.countdown::after{content:"";position:absolute;top:-20px;bottom:-20px;width:1px;background:linear-gradient(var(--gold-soft),transparent 90%)}
.countdown::before{left:-26px}
.countdown::after{right:-26px;background:linear-gradient(var(--gold-soft),transparent 90%)}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:58px}
.cd-unit span{font-family:'Bodoni Moda',serif;font-size:34px;font-weight:400;color:var(--green)}
.cd-unit small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8a7b6b;margin-top:6px}

/* THE DETAILS COLUMNS */
.columns{display:flex;gap:28px;width:100%;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.columns div{min-width:110px}
.columns small{display:block;font-family:'Pinyon Script',cursive;text-transform:lowercase;font-size:30px;margin-bottom:10px;color:var(--green)}
.columns b{font-family:'Bodoni Moda',serif;font-weight:400;text-transform:uppercase;font-size:14px;letter-spacing:.14em;line-height:1.5}
.line-link{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#5c5044;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px}

/* TIMELINE */
.timeline{width:100%;max-width:340px;text-align:left;margin-top:16px}
.tl-row{display:grid;grid-template-columns:52px 16px 1fr;gap:0 16px;padding:16px 0;border-bottom:1px solid rgba(70,55,40,.09)}
.tl-row:last-child{border-bottom:none}
.tl-time{font-family:'Bodoni Moda',serif;font-size:14px;letter-spacing:.06em;color:#4a4038;padding-top:2px}
.tl-dot{display:flex;justify-content:center;padding-top:6px}
.tl-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.tl-copy b{display:block;font-family:'Bodoni Moda',serif;font-weight:400;font-size:15px;letter-spacing:.03em;margin-bottom:4px}
.tl-copy span{display:block;font-size:14px;color:#8a7b6b;line-height:1.4}
.tl-note{font-size:11px;color:#a89a8a;margin-top:22px;font-style:italic}

/* GIFT */
.gift-copy{max-width:320px;font-size:17px;line-height:1.7;color:#4a4038}
.gift-img{width:180px;height:auto;margin:6px auto 22px;display:block}
.venue-img{width:100%;max-width:360px;height:auto;border-radius:2px;margin:6px auto 22px;display:block;box-shadow:0 18px 40px -20px rgba(70,55,38,.35)}
.venue-name{font-family:'Bodoni Moda',serif;font-size:20px;letter-spacing:.06em;margin:4px 0 2px;color:var(--ink)}
.candle-img{width:220px;height:auto;margin:0 auto 24px;display:block;opacity:0.95}

/* RSVP */
.rsvp-btn{margin-top:26px;width:180px;height:52px;background:transparent;border:1px solid var(--gold);font-family:'Bodoni Moda',serif;letter-spacing:.22em;font-size:14px;color:var(--ink);cursor:pointer;transition:background .2s ease,color .2s ease}
.rsvp-btn:hover{background:var(--green);border-color:var(--green);color:#fbf7ef}

.credit{padding:48px 0 60px;text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#a89a8a;background:#f7f1e7}

/* SOUND TOGGLE */
.sound-toggle{position:fixed;right:18px;bottom:22px;z-index:40;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.72);backdrop-filter:blur(6px);border:1px solid rgba(70,55,40,.15);color:#4a4038;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s ease}
.sound-toggle.show{opacity:1;pointer-events:auto}

/* ANIMATIONS */
@keyframes flapLift{
  0%{transform:translateY(0) rotateX(0) scale(1)}
  40%{transform:translateY(-9%) rotateX(38deg) scale(1.004);filter:drop-shadow(0 14px 22px rgba(70,55,38,.15))}
  100%{transform:translateY(-58%) rotateX(72deg) scale(1.01);opacity:1;filter:drop-shadow(0 26px 30px rgba(70,55,38,.08))}
}
@keyframes bottomDrop{
  0%{transform:translateY(0)}
  100%{transform:translateY(112%)}
}
@keyframes sceneZoom{
  0%{transform:scale(.52) translateY(-10%);border-radius:22px}
  55%{transform:scale(.76) translateY(-4%);border-radius:12px}
  100%{transform:scale(1) translateY(0);border-radius:0;box-shadow:none}
}
@keyframes fadeOut{to{opacity:0}}
@keyframes seaMove{0%{transform:translate(-50%,-50%) scale(1.005)}100%{transform:translate(-50%,-50%) scale(1.025)}}
@keyframes hintFloat{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:.85}}

@media (min-width:700px){
  body{background:#eee8df}
  .phone-stage,.intro,.reveal{width:min(390px,100vw)}
  .sound-toggle{right:calc(50% - 195px + 18px)}
}

@media (prefers-reduced-motion: reduce){
  .scene-wrap,.scene-bg,.scroll-hint,.reveal-img,.flap,.bottom,.boat,.hero-copy{animation:none!important}.site.active .boat,.site.active .hero-copy{opacity:1}.site.active .scroll-hint{opacity:.5}.reveal-img{transform:scale(1)!important}
}

/* FINAL FIXES - curtains, remove white background, details image */
.big-day{background:#fbfaf6!important;min-height:100svh;padding:0 28px;overflow:hidden}
.big-day::before{opacity:.22}
.curtain-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:transparent}
.curtain-panel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform;opacity:.98;filter:drop-shadow(0 10px 22px rgba(116,93,68,.09))}
.curtain-left{clip-path:inset(0 50% 0 0);transform-origin:0 35%;animation:curtainWindLeft 5.8s ease-in-out infinite}
.curtain-right{clip-path:inset(0 0 0 50%);transform-origin:100% 35%;animation:curtainWindRight 6.4s ease-in-out infinite}
.big-day>*:not(.curtain-bg){position:relative;z-index:1}
.details-with-venue{background:linear-gradient(180deg,#fff 0%,#fbf7ef 42%,#f7f1e7 100%);padding-top:48px}
.details-top-img{width:min(112%,420px);height:auto;margin:-16px auto 22px;display:block;mix-blend-mode:multiply;filter:drop-shadow(0 20px 35px rgba(95,75,52,.08))}
.details-with-venue::before{opacity:.24}

/* FINAL BACKGROUND BLEND - match the warm stone stairs from the sea illustration */
:root{
  --stone-bg:#e9dfcf;
  --stone-bg-light:#f4ecdf;
  --stone-bg-deep:#d9c9b3;
}
.big-day,
.details-with-venue{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.64) 0%, rgba(255,255,255,.2) 34%, transparent 62%),
    linear-gradient(180deg,var(--stone-bg-light) 0%, var(--stone-bg) 48%, var(--stone-bg-deep) 100%) !important;
}
.big-day::before,
.details-with-venue::before{
  opacity:.16;
}
.curtain-bg{
  background:transparent !important;
}
.details-top-img{
  background:transparent;
  mix-blend-mode:multiply;
  opacity:.96;
  margin-bottom:26px;
}
.details-with-venue .columns,
.big-day .date-row,
.big-day .mini,
.details-with-venue .mini,
.details-with-venue .line-link{
  text-shadow:0 1px 18px rgba(255,255,255,.5);
}


/* CENTER HERO IMAGE FIX */
.hero{width:100%;}
.scene-wrap{left:50%!important;top:50%!important;aspect-ratio:936/1681!important;min-width:100%!important;height:100%!important;transform:translate(-50%,-50%)!important;}
.scene-bg{object-fit:cover!important;object-position:center center!important;}
@keyframes seaMove{0%{transform:translate(-50%,-50%) scale(1.005)}100%{transform:translate(-50%,-50%) scale(1.025)}}

/* UNIFORM PAGE COLOR FIX - all pages use the same warm stone color */
:root{
  --page-warm:#e9dfcf;
  --page-warm-light:#f4ecdf;
  --page-warm-deep:#d9c9b3;
}
html,body,
.phone-stage,
.site,
.hero,
.details,
.details:nth-of-type(even),
.big-day,
.details-with-venue,
.venue-section,
.timeline-section,
.gift-section,
.rsvp,
footer.credit{
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.56) 0%, rgba(255,255,255,.18) 36%, transparent 64%),
    linear-gradient(180deg,var(--page-warm-light) 0%, var(--page-warm) 52%, var(--page-warm-deep) 100%) !important;
}
.details{
  border-top:1px solid rgba(94,75,54,.10);
}
.details::before{
  opacity:.14;
}
.hero{
  background:#f4ecdf !important;
}
.curtain-bg{
  background:transparent !important;
}
.reveal-scene{
  background:#f4ecdf !important;
}

/* FINAL PAGE IMAGE FIX - Big Day + Details use full 864x1536 backgrounds */
.big-day,
.details-with-venue{
  min-height:100svh !important;
  height:100svh !important;
  padding:0 28px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.big-day{
  background-image:url('assets/bigday-bg.jpg') !important;
}
.details-with-venue{
  background-image:url('assets/details-bg.jpg') !important;
  justify-content:flex-end !important;
  padding-bottom:96px !important;
}
.big-day::before,
.details-with-venue::before{
  display:none !important;
}
.curtain-bg,
.details-top-img{
  display:none !important;
}
.big-day > *:not(.curtain-bg),
.details-with-venue > *:not(.details-top-img){
  position:relative !important;
  z-index:2 !important;
}
.big-day .script,
.details-with-venue .script{
  color:#315b45 !important;
  text-shadow:0 2px 10px rgba(255,250,241,.46) !important;
}
.big-day .date-row,
.big-day .mini,
.details-with-venue .columns,
.details-with-venue .mini,
.details-with-venue .line-link{
  color:#3f563f !important;
  text-shadow:0 1px 8px rgba(255,250,241,.58) !important;
}
.details-with-venue .columns{
  width:min(100%,360px) !important;
  margin-top:22px !important;
}


/* TRUE SHORT SECTIONS FIX - only sizing/scroll length, no visual redesign */
.site{min-height:0 !important;}
.hero,
.big-day,
.details-with-venue{
  height:100svh !important;
  min-height:100svh !important;
  max-height:100svh !important;
  margin:0 !important;
  overflow:hidden !important;
}
.big-day,
.details-with-venue{
  padding:0 28px !important;
}
.details{
  margin:0 !important;
}
.details-with-venue{
  justify-content:center !important;
  padding-bottom:0 !important;
}
.details-with-venue .columns{
  margin-top:18px !important;
  margin-bottom:18px !important;
}
.details-with-venue .script,
.big-day .script{
  margin-top:0 !important;
}
/* Remove pages that made the invitation feel like a long website */
.venue-section,
.timeline-section,
.gift-section,
.rsvp,
.credit{
  display:none !important;
}


/* AFTER SEA DESIGN - single uploaded 864x1536 design after hero */
.after-sea-design{
  width:100%;
  min-height:100svh;
  height:100svh;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  background:#f3ead9;
  display:grid;
  place-items:center;
}
.after-sea-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

/* NEW ENVELOPE + FULL SCREEN CARD CURTAIN REVEAL */
.reveal-scene{
  z-index:1 !important;
  background:#f5eedf !important;
}
.reveal-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
}
.intro-hero-copy{
  position:absolute;
  left:0;
  right:0;
  top:31%;
  z-index:2;
  text-align:center;
  color:#3e382f;
  text-shadow:0 1px 18px rgba(255,255,255,.78);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
}
.intro.opening .intro-hero-copy{
  animation:introCopyIn 1.1s ease 5.05s forwards;
}
@keyframes introCopyIn{
  to{opacity:1;transform:translateY(0)}
}
.card-curtain{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  opacity:1;
  transform:translateY(48%) scale(.985);
  will-change:transform;
}
.card-full,
.card-half{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform,opacity;
}
.card-full{z-index:1;opacity:1}
.card-half{z-index:2;opacity:1}
.card-left{transform-origin:left center}
.card-right{transform-origin:right center}
.envelope-wrap{z-index:4 !important}
.env.closed{z-index:7 !important}
.env.flap{z-index:9 !important;transform-origin:50% 38% !important;opacity:0;transform:translateY(0) rotateX(0)}
.env.bottom{z-index:8 !important;opacity:0;transform:translateY(0)}
.intro.opening .closed{opacity:0;transition:opacity .18s linear .08s}
.intro.opening .flap{opacity:1;animation:newFlapOpen 2.45s cubic-bezier(.72,.01,.19,1) forwards}
.intro.opening .card-curtain{animation:cardPeekUp 2.85s cubic-bezier(.18,.74,.18,1) 1.15s forwards}
.intro.opening .bottom{opacity:1;animation:newEnvelopeDrop 3.15s cubic-bezier(.28,.02,.14,1) 1.35s forwards}
.intro.opening .card-full{animation:cardFullFade .42s linear 4.85s forwards}
.intro.opening .card-left{animation:cardOpenLeft 3.05s cubic-bezier(.24,.03,.12,1) 4.75s forwards}
.intro.opening .card-right{animation:cardOpenRight 3.05s cubic-bezier(.24,.03,.12,1) 4.75s forwards}
.intro.opening .tap-text{animation:fadeOut .2s ease forwards}
.intro.opening .tap-zone{pointer-events:none}
.intro.leave{animation:fadeOut .65s ease forwards}
@keyframes newFlapOpen{
  0%{transform:translateY(0) rotateX(0deg);filter:drop-shadow(0 0 0 rgba(70,55,38,0))}
  18%{transform:translateY(-1%) rotateX(4deg);filter:drop-shadow(0 4px 7px rgba(70,55,38,.05))}
  42%{transform:translateY(-5%) rotateX(18deg);filter:drop-shadow(0 10px 14px rgba(70,55,38,.09))}
  64%{transform:translateY(-18%) rotateX(44deg);filter:drop-shadow(0 18px 22px rgba(70,55,38,.11))}
  82%{transform:translateY(-43%) rotateX(66deg);filter:drop-shadow(0 25px 28px rgba(70,55,38,.09))}
  100%{transform:translateY(-68%) rotateX(78deg);filter:drop-shadow(0 28px 30px rgba(70,55,38,.07))}
}
@keyframes cardPeekUp{
  0%{transform:translateY(48%) scale(.985)}
  18%{transform:translateY(41%) scale(.988)}
  48%{transform:translateY(22%) scale(.994)}
  76%{transform:translateY(5%) scale(.999)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes newEnvelopeDrop{
  0%{transform:translateY(0)}
  18%{transform:translateY(4%)}
  46%{transform:translateY(32%)}
  76%{transform:translateY(78%)}
  100%{transform:translateY(118%)}
}
@keyframes cardFullFade{to{opacity:0}}
@keyframes cardOpenLeft{
  0%{transform:translateX(0) rotateY(0deg) rotateZ(0deg);opacity:1}
  35%{transform:translateX(-18%) rotateY(-6deg) rotateZ(-.6deg);opacity:1}
  66%{transform:translateX(-46%) rotateY(-10deg) rotateZ(-2.2deg);opacity:.96}
  82%{transform:translateX(-60%) translateY(-1.5%) rotateY(-8deg) rotateZ(-4deg);opacity:.86}
  100%{transform:translateX(-78%) translateY(-5%) rotateY(-4deg) rotateZ(-8deg);opacity:.08}
}
@keyframes cardOpenRight{
  0%{transform:translateX(0) rotateY(0deg) rotateZ(0deg);opacity:1}
  35%{transform:translateX(18%) rotateY(6deg) rotateZ(.6deg);opacity:1}
  66%{transform:translateX(46%) rotateY(10deg) rotateZ(2.2deg);opacity:.96}
  82%{transform:translateX(60%) translateY(-1.5%) rotateY(8deg) rotateZ(4deg);opacity:.86}
  100%{transform:translateX(78%) translateY(-5%) rotateY(4deg) rotateZ(8deg);opacity:.08}
}
/* the new sea artwork already includes the yacht, so the old separate boat layer is hidden */
.boat{display:none !important}
.hero-copy{margin-top:-10svh !important}
.site.active .hero-copy{animation:copyIn 1s ease .15s forwards !important}
.site.active .scroll-hint{animation:hintIn .8s ease 1.1s forwards, hintFloat 2.6s ease-in-out 1.9s infinite !important}
.scene-wrap{aspect-ratio:864/1536!important}

/* PRE-SPLIT MASK FIX - sea stays hidden until the card opens */
.intro{background:#f5eedf !important;}
.reveal-scene{
  opacity:0 !important;
  z-index:1 !important;
  background:#f5eedf !important;
}
.intro.opening .reveal-scene{
  animation:seaRevealAfterCard 1.55s ease 5.45s forwards !important;
}
.intro-hero-copy{
  opacity:0 !important;
  transform:translateY(18px) !important;
}
.intro.opening .intro-hero-copy{
  animation:introCopyAfterSea 1.05s ease 7.05s forwards !important;
}
@keyframes seaRevealAfterCard{
  0%{opacity:0;filter:blur(1.5px)}
  100%{opacity:1;filter:blur(0)}
}
@keyframes introCopyAfterSea{
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}
}

/* BOOK-STYLE 3D CARD OPEN FIX - latest update */
.card-curtain{
  z-index:2 !important;
  perspective:1200px !important;
  transform-style:preserve-3d !important;
  overflow:visible !important;
  background:transparent !important;
}
.card-full{
  z-index:4 !important;
  opacity:1 !important;
  backface-visibility:hidden !important;
}
.card-half{
  z-index:5 !important;
  opacity:1 !important;
  backface-visibility:visible !important;
  transform-style:preserve-3d !important;
  filter:drop-shadow(0 18px 28px rgba(54,43,32,.16));
}
.card-left{
  transform-origin:left center !important;
}
.card-right{
  transform-origin:right center !important;
}
/* Keep the sea hidden until the book-card actually starts opening. */
.reveal-scene{
  opacity:0 !important;
  z-index:1 !important;
  background:#f5eedf !important;
}
.intro.opening .reveal-scene{
  animation:seaBehindBookIn .35s linear 4.82s forwards !important;
}
/* Closed card rises from the envelope first. Then the envelope bottom drops. */
.intro.opening .card-curtain{
  animation:cardPeekUp 2.85s cubic-bezier(.18,.74,.18,1) 1.15s forwards !important;
}
/* The full front disappears exactly as the two 3D doors begin to open. */
.intro.opening .card-full{
  animation:cardFullFade .22s linear 4.78s forwards !important;
}
.intro.opening .card-left{
  animation:bookDoorLeft 3.15s cubic-bezier(.22,.02,.12,1) 4.8s forwards !important;
}
.intro.opening .card-right{
  animation:bookDoorRight 3.15s cubic-bezier(.22,.02,.12,1) 4.8s forwards !important;
}
.intro.opening .intro-hero-copy{
  animation:introCopyAfterBook 1.05s ease 7.55s forwards !important;
}
@keyframes seaBehindBookIn{
  from{opacity:0;filter:blur(.8px)}
  to{opacity:1;filter:blur(0)}
}
@keyframes bookDoorLeft{
  0%{transform:rotateY(0deg) translateX(0) rotateZ(0deg);opacity:1;filter:drop-shadow(0 18px 28px rgba(54,43,32,.16))}
  18%{transform:rotateY(-22deg) translateX(-1%) rotateZ(-.15deg);opacity:1;filter:drop-shadow(8px 18px 24px rgba(54,43,32,.18))}
  45%{transform:rotateY(-58deg) translateX(-2%) rotateZ(-.3deg);opacity:1;filter:drop-shadow(18px 22px 26px rgba(54,43,32,.20))}
  72%{transform:rotateY(-92deg) translateX(-3%) rotateZ(-.45deg);opacity:1;filter:drop-shadow(26px 20px 22px rgba(54,43,32,.16))}
  100%{transform:rotateY(-118deg) translateX(-4%) rotateZ(-.6deg);opacity:.98;filter:drop-shadow(34px 18px 20px rgba(54,43,32,.12))}
}
@keyframes bookDoorRight{
  0%{transform:rotateY(0deg) translateX(0) rotateZ(0deg);opacity:1;filter:drop-shadow(0 18px 28px rgba(54,43,32,.16))}
  18%{transform:rotateY(22deg) translateX(1%) rotateZ(.15deg);opacity:1;filter:drop-shadow(-8px 18px 24px rgba(54,43,32,.18))}
  45%{transform:rotateY(58deg) translateX(2%) rotateZ(.3deg);opacity:1;filter:drop-shadow(-18px 22px 26px rgba(54,43,32,.20))}
  72%{transform:rotateY(92deg) translateX(3%) rotateZ(.45deg);opacity:1;filter:drop-shadow(-26px 20px 22px rgba(54,43,32,.16))}
  100%{transform:rotateY(118deg) translateX(4%) rotateZ(.6deg);opacity:.98;filter:drop-shadow(-34px 18px 20px rgba(54,43,32,.12))}
}
@keyframes introCopyAfterBook{
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}
}

/* FINAL TIMING FIX: the sea is behind the card, but stays hidden until the book doors start opening.
   Before that, the viewer only sees the full white card coming out of the envelope.
   When the two halves rotate outward, the sea is already behind them and is revealed through the opening. */
.reveal-scene{
  opacity:0 !important;
  z-index:1 !important;
  background:#f5eedf !important;
  filter:none !important;
}
.intro.opening .reveal-scene{
  animation:seaBehindBookIn .28s linear 4.78s forwards !important;
}
.card-curtain{
  z-index:2 !important;
  background:transparent !important;
  perspective:1200px !important;
  transform-style:preserve-3d !important;
  overflow:visible !important;
}
.card-full{
  display:block !important;
  z-index:4 !important;
  opacity:1 !important;
  animation:none;
  backface-visibility:hidden !important;
}
.card-half{
  z-index:5 !important;
  opacity:1 !important;
  backface-visibility:visible !important;
  transform-style:preserve-3d !important;
}
.intro.opening .card-full{
  display:block !important;
  animation:cardFullFade .18s linear 4.80s forwards !important;
}
.intro.opening .card-left{
  animation:bookDoorLeft 3.15s cubic-bezier(.22,.02,.12,1) 4.82s forwards !important;
}
.intro.opening .card-right{
  animation:bookDoorRight 3.15s cubic-bezier(.22,.02,.12,1) 4.82s forwards !important;
}
.intro.opening .intro-hero-copy{
  animation:introCopyAfterBook 1.05s ease 7.55s forwards !important;
}


/* FINAL REQUEST FIX - no full card layer, only two doors over the sea */
.card-full{display:none !important; opacity:0 !important; pointer-events:none !important;}
.card-curtain{
  z-index:2 !important;
  perspective:1400px !important;
  transform-style:preserve-3d !important;
  overflow:visible !important;
  background:transparent !important;
}
.card-half{
  z-index:5 !important;
  opacity:1 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  backface-visibility:visible !important;
  transform-style:preserve-3d !important;
  filter:drop-shadow(0 18px 28px rgba(54,43,32,.16));
}
.card-left{transform-origin:left center !important;}
.card-right{transform-origin:right center !important;}
/* Sea exists behind the two card halves and becomes visible exactly as they start opening. */
.reveal-scene{
  z-index:1 !important;
  opacity:0 !important;
  background:#f5eedf !important;
}
.intro.opening .reveal-scene{
  animation:seaBehindBookIn .2s linear 4.82s forwards !important;
}
.intro.opening .card-full{display:none !important; animation:none !important;}
.intro.opening .card-left{
  animation:bookDoorLeft 3.15s cubic-bezier(.22,.02,.12,1) 4.82s forwards !important;
}
.intro.opening .card-right{
  animation:bookDoorRight 3.15s cubic-bezier(.22,.02,.12,1) 4.82s forwards !important;
}
/* Names enter only after the sea is visible and the card has opened. */
.intro.opening .intro-hero-copy{
  animation:introCopyAfterBook 1.05s ease 7.55s forwards !important;
}
.hero-date{display:none !important;}

/* REAL FINAL FIX - two card doors over the sea, no white card/background during the opening */
.intro .reveal-scene{
  z-index:1 !important;
  opacity:0 !important;
  background:transparent !important;
}
.intro .reveal-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  animation:none !important;
}
/* show the sea at the exact moment the two parts begin to open */
.intro.opening .reveal-scene{
  animation:showSeaBehindDoors .01s linear 4.82s forwards !important;
}
@keyframes showSeaBehindDoors{
  from{opacity:0}
  to{opacity:1}
}
.card-full{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.card-curtain{
  z-index:2 !important;
  background:transparent !important;
  perspective:1400px !important;
  transform-style:preserve-3d !important;
  overflow:visible !important;
}
.card-half{
  z-index:5 !important;
  opacity:1 !important;
  visibility:visible !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  backface-visibility:visible !important;
  transform-style:preserve-3d !important;
}
.card-left{transform-origin:left center !important;}
.card-right{transform-origin:right center !important;}
.intro.opening .card-left{
  animation:bookDoorLeft 3.15s cubic-bezier(.22,.02,.12,1) 4.82s forwards !important;
}
.intro.opening .card-right{
  animation:bookDoorRight 3.15s cubic-bezier(.22,.02,.12,1) 4.82s forwards !important;
}


/* ABSOLUTE FINAL FIX 2026-07-06:
   The sea layer is part of the same card stack, directly behind the two transparent door halves.
   It is turned on by JS exactly when the book doors start to rotate, so it appears immediately through the opening.
   No full white card layer is used. */
.intro .reveal-scene{
  z-index:1 !important;
  opacity:0 !important;
  visibility:hidden !important;
  background:transparent !important;
  pointer-events:none !important;
}
.intro.doors-start .reveal-scene{
  opacity:1 !important;
  visibility:visible !important;
}
.intro .reveal-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  animation:none !important;
}
.card-full{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.card-curtain{
  z-index:2 !important;
  background:transparent !important;
  perspective:1500px !important;
  transform-style:preserve-3d !important;
  overflow:visible !important;
}
.card-half{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  visibility:visible !important;
  backface-visibility:visible !important;
  transform-style:preserve-3d !important;
  will-change:transform !important;
}
.card-left{transform-origin:left center !important;}
.card-right{transform-origin:right center !important;}
.intro.opening .card-left{
  animation:finalDoorOpenLeft 3.25s cubic-bezier(.2,.02,.1,1) 4.82s forwards !important;
}
.intro.opening .card-right{
  animation:finalDoorOpenRight 3.25s cubic-bezier(.2,.02,.1,1) 4.82s forwards !important;
}
.intro.opening .intro-hero-copy{
  animation:introCopyAfterBook 1.05s ease 7.7s forwards !important;
}
@keyframes finalDoorOpenLeft{
  0%{transform:rotateY(0deg) translateX(0);opacity:1;filter:drop-shadow(0 16px 24px rgba(54,43,32,.14))}
  14%{transform:rotateY(-14deg) translateX(-.2%);opacity:1;filter:drop-shadow(7px 18px 24px rgba(54,43,32,.18))}
  40%{transform:rotateY(-52deg) translateX(-1.5%);opacity:1;filter:drop-shadow(18px 21px 26px rgba(54,43,32,.20))}
  72%{transform:rotateY(-93deg) translateX(-3%);opacity:1;filter:drop-shadow(28px 20px 22px rgba(54,43,32,.16))}
  100%{transform:rotateY(-118deg) translateX(-4%);opacity:.98;filter:drop-shadow(34px 18px 20px rgba(54,43,32,.12))}
}
@keyframes finalDoorOpenRight{
  0%{transform:rotateY(0deg) translateX(0);opacity:1;filter:drop-shadow(0 16px 24px rgba(54,43,32,.14))}
  14%{transform:rotateY(14deg) translateX(.2%);opacity:1;filter:drop-shadow(-7px 18px 24px rgba(54,43,32,.18))}
  40%{transform:rotateY(52deg) translateX(1.5%);opacity:1;filter:drop-shadow(-18px 21px 26px rgba(54,43,32,.20))}
  72%{transform:rotateY(93deg) translateX(3%);opacity:1;filter:drop-shadow(-28px 20px 22px rgba(54,43,32,.16))}
  100%{transform:rotateY(118deg) translateX(4%);opacity:.98;filter:drop-shadow(-34px 18px 20px rgba(54,43,32,.12))}
}


/* USER FINAL REQUEST - 2026-07-06
   1) Sea screen keeps only Danielle & Tom - no "we are getting married" line.
   2) The old after-sea pages are replaced with one full invitation image.
   3) Transparent Waze link sits over the Waze navigation text on the final invitation. */
.intro-hero-copy .eyebrow,
.hero-copy .eyebrow{
  display:none !important;
}
.intro-hero-copy,
.hero-copy{
  padding-top:0 !important;
}
.final-invitation-section{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  background:#f7f1e7 !important;
  display:block !important;
}
.final-invitation-img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center top !important;
  display:block !important;
}
.waze-hotspot{
  position:absolute;
  left:20%;
  right:20%;
  top:92%;
  height:4.5%;
  z-index:10;
  display:block;
  background:rgba(255,255,255,0);
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}


/* FINAL USER TWEAKS - tap text, right card nudge, names font */
.tap-text{
  top:72.5% !important;
  font-family:'Cormorant Garamond',serif !important;
  font-style:normal !important;
  text-transform:none !important;
  letter-spacing:.10em !important;
  color:rgba(65,55,45,.62) !important;
  line-height:1.15 !important;
}
.tap-text span{
  display:block;
  font-size:14px;
  letter-spacing:.13em;
  text-transform:none;
}
.tap-text small{
  display:block;
  margin-top:5px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:12px;
  letter-spacing:.11em;
  text-transform:lowercase;
  color:rgba(65,55,45,.50);
}
/* Right card position restored to original - no nudge. */
/* A different connected script for Danielle & Tom. */
.script-names{
  font-family:'Great Vibes','Pinyon Script',cursive !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
}
.script-names .amp{
  font-family:'Cormorant Garamond',serif !important;
  font-style:italic !important;
}