:root{
  --ink:#211f1c; --ink-soft:#6f6a63; --ink-faint:#a9a39a; --line:#d8d3ca;
  --disp:"Bodoni Moda", serif; --body:"EB Garamond", serif; --script:"Pinyon Script", cursive;
}
*{ box-sizing:border-box; margin:0; padding:0; }

.stage{ width:100%; height:100%; position:relative; overflow:hidden; -webkit-font-smoothing:antialiased;
  background:#eeece8; }
.scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.stack{ position:relative; width:760px; height:1000px;
  transform:scale(var(--scene-scale,0.8)); transform-origin:center center;
  perspective:1700px; perspective-origin:50% 28%;
  opacity:0;
  --card-rot:-1.4deg; }
/* the envelope fades into the screen first; the open sequence starts after */
@media (prefers-reduced-motion: no-preference){
  .scene .stack{ animation: stackIn 1s cubic-bezier(0.22,1,0.36,1) 0.35s both; }
}
@media (prefers-reduced-motion: reduce){
  .scene .stack{ opacity:1; }
}
@keyframes stackIn{ from{ opacity:0; } to{ opacity:1; } }

/* ================= faint B&W countryside backdrop ================= */
.backdrop{ position:absolute; inset:0; overflow:hidden; }
.backdrop .land{ position:absolute; inset:-2%; }
.land-img,.land-video{ width:100%; height:100%; display:block; object-fit:cover; object-position:50% 42%;
  filter:grayscale(1) contrast(1.0) brightness(1.04) blur(var(--bd-blur, 0.6px));
  opacity:var(--bd-op, 0.6); }
/* white scrim that keeps the centre clean so the card never fights the photo */
.backdrop .scrim{ position:absolute; inset:0;
  background:radial-gradient(58% 58% at 50% 46%, rgba(248,247,244,var(--scrim,0.82)) 0%,
    rgba(248,247,244,calc(var(--scrim,0.82) * 0.5)) 42%, rgba(248,247,244,0) 78%); }
.backdrop .edge-fade{ position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 44%, rgba(0,0,0,0) 60%, rgba(40,38,34,0.10) 100%); }
.backdrop .grain{ position:absolute; inset:0; opacity:0.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* ================= opened envelope — flattened, z-index ordered ================= */
/* ===================== realistic banker's envelope =====================
   landscape, bright white. back wall + folded front (bottom+side flaps)
   + a hinged top flap with a silver wax seal. geometry within the
   760x1000 stack: left 20, top 245, 720 x 510 (bottom 755). */

/* back wall (behind the card) */
.env-pocket{ position:absolute; left:20px; top:245px; width:720px; height:510px; z-index:1;
  border-radius:13px;
  background:linear-gradient(165deg, #FCFAF6 0%, #F4F1EA 56%, #E8E3D9 100%);
  box-shadow:0 60px 100px -38px rgba(46,40,32,0.6), 0 26px 46px -22px rgba(46,40,32,0.42),
             0 6px 12px -4px rgba(46,40,32,0.26), 0 1px 2px rgba(46,40,32,0.20); }
.env-pocket::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* soft interior shadow at the mouth, revealed once the flap lifts */
.env-mouth{ position:absolute; left:20px; top:245px; width:720px; height:300px; z-index:2;
  clip-path:polygon(0 0, 100% 0, 50% 90%);
  background:linear-gradient(180deg, rgba(70,64,54,0.30) 0%, rgba(120,112,98,0.12) 46%, rgba(255,255,255,0) 78%); }

/* folded front panel = whole rect MINUS the top wedge (= bottom + side flaps).
   its top V-edge is the envelope mouth. covers the card's lower portion. */
.env-front{ position:absolute; left:20px; top:245px; width:720px; height:510px; z-index:3;
  clip-path:polygon(0 0, 50% 53%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(218deg, rgba(0,0,0,0.05), rgba(0,0,0,0) 38%),
    linear-gradient(142deg, rgba(0,0,0,0.05), rgba(0,0,0,0) 38%),
    linear-gradient(180deg, #FCFAF6 0%, #F5F2EB 60%, #EBE6DC 100%);
  border-radius:0 0 13px 13px; }
/* paper grain on the folded front */
.env-front::before{ content:""; position:absolute; inset:0; clip-path:inherit; pointer-events:none;
  opacity:0.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
/* shadow the front panel casts where it overlaps the mouth */
.env-front::after{ content:""; position:absolute; left:0; right:0; top:0; height:60px;
  clip-path:polygon(0 0, 50% 100%, 100% 0);
  background:linear-gradient(180deg, rgba(80,72,60,0.22), rgba(80,72,60,0)); }

/* fold-line creases (shadow above, highlight below) */
.seam{ position:absolute; height:3px; transform-origin:50% 50%;
  transform:translate(-50%,-50%) rotate(var(--a));
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(108,100,86,0.30) 42%,
    rgba(108,100,86,0.32) 50%, rgba(255,255,255,0.88) 70%, rgba(255,255,255,0) 100%);
  border-radius:2px; pointer-events:none; }
.env-seams{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.env-seams .seam.bl{ width:432px; left:200px; top:635px; --a:-33.69deg; }
.env-seams .seam.br{ width:432px; left:560px; top:635px; --a:33.69deg; }
.env-flap .seam.tl{ width:450px; left:180px; top:135px; --a:36.87deg; }
.env-flap .seam.tr{ width:450px; left:540px; top:135px; --a:-36.87deg; }

/* top flap — wrapper rotates open; paper is clipped, seal is not */
.env-flap{ position:absolute; left:20px; top:245px; width:720px; height:288px; z-index:6;
  transform-origin:50% 0; transform:rotateX(0deg); transform-style:preserve-3d; }
.flap-paper{ position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:
    linear-gradient(218deg, rgba(0,0,0,0.04), rgba(0,0,0,0) 42%),
    linear-gradient(142deg, rgba(0,0,0,0.04), rgba(0,0,0,0) 42%),
    linear-gradient(178deg, #FCFAF6 0%, #F7F4EE 58%, #EDE8DE 100%);
  filter:drop-shadow(0 9px 7px rgba(46,40,32,0.24)); }
/* paper grain on the flap */
.flap-paper::before{ content:""; position:absolute; inset:0; clip-path:inherit; pointer-events:none;
  opacity:0.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* silver wax seal at the flap tip */
.env-seal{ position:absolute; left:50%; top:270px; width:128px; height:128px;
  transform:translate(-50%,-50%) translateZ(7px);
  border-radius:50%;
  background:radial-gradient(circle at 40% 34%, #FCFCFD 0%, #ECECEF 34%, #CFCFD6 66%, #B4B4BD 88%, #A6A6B0 100%);
  box-shadow:0 8px 16px -4px rgba(40,38,44,0.42), 0 3px 6px rgba(40,38,44,0.30),
             inset 0 3px 4px rgba(255,255,255,0.85), inset 0 -6px 12px rgba(120,118,128,0.55);
  display:flex; align-items:center; justify-content:center; }
/* pressed inner ring */
.env-seal::before{ content:""; position:absolute; inset:11px; border-radius:50%;
  box-shadow:inset 0 2px 3px rgba(120,118,128,0.6), inset 0 -2px 3px rgba(255,255,255,0.7);
  background:radial-gradient(circle at 42% 36%, rgba(255,255,255,0.5), rgba(190,190,198,0.25) 70%, rgba(160,160,170,0.35) 100%); }
/* faint scalloped wax edge */
.env-seal::after{ content:""; position:absolute; inset:-3px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,0) 86%, rgba(150,150,160,0.35) 92%, rgba(255,255,255,0) 100%); }
.seal-mono{ position:relative; z-index:2; font-family:"Imperial Script", cursive;
  font-weight:400; font-size:26px; line-height:1; color:#83838d; letter-spacing:0;
  display:flex; align-items:center; justify-content:center;
  transform:translate(-3px, 1px);
  text-shadow:0 1px 0 rgba(255,255,255,0.85), 0 -1px 1px rgba(96,96,104,0.6); }
.seal-mono .s-a{ position:relative; }
.seal-mono .s-amp{ font-size:0.8em; font-style:italic; margin:0 0.02em; position:relative; top:-0.02em; opacity:0.92; }
.seal-mono .s-m{ position:relative; }

@media (prefers-reduced-motion: no-preference){
  .play .env-flap{ animation: flapOpen 1.15s cubic-bezier(.55,0,.18,1) .5s forwards; }
  .play .card-anim{ animation: cardSeq 2.7s cubic-bezier(.42,0,.2,1) 1.45s forwards; }
  .play .card-flip{ animation: cardFlip 1.25s cubic-bezier(.5,0,.18,1) 2.6s forwards; }
  .play .card{ animation: revealFront 1.25s linear 2.6s forwards; }
  .play .card-back{ animation: hideBack 1.25s linear 2.6s forwards; }
}
@keyframes flapOpen{
  0%   { transform: rotateX(0deg);     z-index:6; }
  54%  { z-index:6; }
  55%  { z-index:1; }
  100% { transform: rotateX(-164deg);  z-index:1; }
}
/* card: tucked in (back-facing, small) -> pulled up out of the top (blank back showing)
   -> tips over top-over-bottom (rotateX) while growing + centring to reveal the front. */
@keyframes cardSeq{
  0%   { transform: translateY(8px) scale(0.30);     z-index:2; }
  14%  { transform: translateY(8px) scale(0.30);     z-index:2; }
  44%  { transform: translateY(-300px) scale(0.37); z-index:2; }
  46%  { transform: translateY(-300px) scale(0.37); z-index:10; }
  100% { transform: translateY(0) scale(1);        z-index:10; }
}
@keyframes cardFlip{
  0%   { transform: rotateX(180deg); }
  100% { transform: rotateX(360deg); }
}
/* face visibility toggles at the 90° crossover (edge-on) so the right side always shows */
@keyframes revealFront{ 0%,50%{ opacity:0; } 50.01%,100%{ opacity:1; } }
@keyframes hideBack{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

/* ================= the printed card ================= */
.card-anim{ position:absolute; left:48px; top:38px; width:664px; height:922px; z-index:2;
  perspective:1700px;
  transform-origin:50% 50%; transform:translateY(8px) scale(0.30); }
.card-flip{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(180deg); }
@media (prefers-reduced-motion: reduce){
  .env-flap{ transform: rotateX(-164deg); z-index:1; }
  .card-anim{ transform: translateY(0) scale(1); z-index:10; }
  .card-flip{ transform: rotateX(360deg); }
  .card{ opacity:1; }
  .card-back{ opacity:0; }
}
/* blank back of the card — what you see as it's pulled out, before it flips */
.card-back{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  opacity:1;
  transform:rotateX(180deg); border-radius:4px;
  background:linear-gradient(165deg,#FBF9F4 0%,#F1ECE2 100%);
  box-shadow:0 50px 90px -34px rgba(40,33,24,0.42), 0 20px 40px -18px rgba(40,33,24,0.34); }
.card-back::after{ content:""; position:absolute; inset:30px; border:1px solid var(--line); border-radius:3px; }
.card{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  opacity:0;
  width:664px; height:922px;
  background:#FBF9F4; border-radius:4px; padding:70px 60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow:var(--card-shadow,
    0 2px 0 rgba(255,255,255,0.7) inset,
    0 50px 90px -34px rgba(40,33,24,0.42),
    0 20px 40px -18px rgba(40,33,24,0.34),
    0 2px 4px rgba(40,33,24,0.18));
}
.card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:0.04; }

.std{ font-family:var(--disp); font-weight:600; text-transform:uppercase; font-size:34px;
  letter-spacing:0.16em; line-height:1; padding-left:0.16em; color:var(--ink); white-space:nowrap; }
.for-wedding{ font-family:var(--body); text-transform:uppercase; letter-spacing:0.34em;
  font-size:14px; color:var(--ink-soft); margin-top:26px; padding-left:0.34em; }
.names{ font-family:var(--script); font-weight:400; font-size:70px; line-height:1.02;
  color:var(--ink); margin-top:18px; white-space:nowrap; }
.names .amp{ font-size:0.84em; padding:0 0.02em; }
.date-row{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:30px; }
.date-row .rule{ width:52px; height:1px; background:var(--line); }
.date{ font-family:var(--body); text-transform:uppercase; letter-spacing:0.24em; font-size:16px;
  color:var(--ink); padding-left:0.24em; white-space:nowrap; }
.date sup{ font-size:0.62em; letter-spacing:0; vertical-align:0.7em; padding-left:0.04em; }
.villa{ width:520px; margin:36px 0 32px; }
.villa img{ width:100%; height:auto; display:block; mix-blend-mode:multiply; }
.venue{ font-family:var(--body); text-transform:uppercase; letter-spacing:0.28em; font-size:15px;
  color:var(--ink); padding-left:0.28em; }
.city{ font-family:var(--script); font-size:40px; line-height:1; color:var(--ink-soft);
  margin-top:8px; white-space:nowrap; }
.follow{ font-family:var(--script); font-size:34px; line-height:1; color:var(--ink-faint);
  margin-top:48px; white-space:nowrap; }

/* ================= VARIATIONS ================= */
/* 1 · Soft daylight — airy, gentle, near-straight */
.v1 .stage{ --bd-op:0.6; --bd-blur:0.5px; --scrim:0.72; }
.v1 .stack{ --env-rot:2deg; --card-rot:-1.6deg; --pull:130px; --env-x:30px; }

/* 2 · Spotlit & centred — stronger clean centre, card lifted higher out */
.v2 .stage{ --bd-op:0.74; --bd-blur:0px; --scrim:0.84; }
.v2 .stack{ --env-rot:-3deg; --card-rot:1.6deg; --pull:150px; --env-x:-34px;
  --card-shadow:
    0 2px 0 rgba(255,255,255,0.7) inset,
    0 70px 120px -40px rgba(40,33,24,0.50),
    0 28px 54px -22px rgba(40,33,24,0.38),
    0 2px 4px rgba(40,33,24,0.2); }

/* 3 · Misty atmosphere — dreamy, more rotation, warm directional shadow */
.v3 .stage{ --bd-op:0.52; --bd-blur:2.4px; --scrim:0.66; }
.v3 .stack{ --env-rot:5deg; --card-rot:-3.2deg; --pull:160px; --env-x:46px;
  --card-shadow:
    0 2px 0 rgba(255,255,255,0.7) inset,
    44px 60px 110px -40px rgba(40,30,20,0.46),
    18px 26px 48px -20px rgba(40,30,20,0.34),
    0 2px 4px rgba(40,30,20,0.2); }
.v3 .land-img{ filter:grayscale(1) contrast(0.96) brightness(1.06) blur(var(--bd-blur,2.4px)); }

/* ================================================================= *
 * PAGE LAYOUT — scrollable: hero (video+card) then invitation
 * ================================================================= */
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper,#FBF9F4); color:var(--ink); overflow-x:hidden; }

.hero{ position:relative; width:100%; height:100vh; height:100svh; overflow:hidden; background:#0e0d0c;
  display:flex; align-items:center; justify-content:center; }
.fit{ position:absolute; width:1920px; height:1080px; flex:none; transform-origin:center center; }

/* scroll cue */
.scroll-cue{ position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px; z-index:5;
  color:#fff; text-decoration:none; cursor:pointer;
  opacity:0; animation:cueIn 1s ease 2.8s forwards; }
.scroll-cue .cue-label{ font-family:var(--body); text-transform:uppercase; letter-spacing:0.34em;
  font-size:11px; padding-left:0.34em; text-shadow:0 1px 8px rgba(0,0,0,0.45); }
.scroll-cue .cue-chev{ width:22px; height:22px; animation:cueBob 2.4s ease-in-out infinite; filter:drop-shadow(0 1px 6px rgba(0,0,0,0.5)); }
@keyframes cueIn{ to{ opacity:0.92; } }
@keyframes cueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .scroll-cue{ opacity:0.92; animation:none; } .scroll-cue .cue-chev{ animation:none; } }

/* ================= invitation section ================= */
.invite{ position:relative; min-height:100vh; background:var(--paper,#FBF9F4); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:128px 24px 132px; }
/* faint paper grain to match the card */
.invite::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.invite-inner{ position:relative; display:flex; flex-direction:column; align-items:center; max-width:760px; }

/* ornate intertwined monogram */
.monogram-aj{ font-family:"Imperial Script", cursive; color:var(--ink); line-height:0.8;
  font-size:104px; display:inline-flex; align-items:flex-start; gap:0.05em; height:104px; }
.monogram-aj .mg-a{ position:relative; }
.monogram-aj .mg-m{ position:relative; }

.invite-rule{ width:1px; height:50px; background:var(--line); margin:30px 0; }

.contact{ font-family:var(--body); font-style:italic; font-size:13px; line-height:1.6; color:var(--ink-soft); margin:0; }
.contact .email{ display:inline-block; margin-top:3px; color:var(--ink); }
.contact .email a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .2s ease; }
.contact .email a:hover{ border-color:var(--ink); }

.with-love{ font-family:var(--body); text-transform:uppercase; letter-spacing:0.42em; font-size:11px;
  color:var(--ink-soft); margin:30px 0 6px; padding-left:0.42em; white-space:nowrap; }
.names-big{ font-family:var(--script); font-weight:400; font-size:clamp(32px, 4vw, 56px); line-height:1.0;
  color:var(--ink); margin:0; white-space:nowrap; }
.names-big .amp{ font-size:0.82em; padding:0 0.04em; }
.hope{ font-family:var(--body); text-transform:uppercase; letter-spacing:0.36em; font-size:11px;
  color:var(--ink-soft); margin:12px 0 0; padding-left:0.36em; white-space:nowrap; }

/* countdown */
.countdown{ display:flex; align-items:flex-start; gap:clamp(8px,1.2vw,16px); margin-top:0; }
.cd-cell{ display:flex; flex-direction:column; align-items:center; gap:9px; min-width:clamp(54px,5.4vw,82px); }
.cd-num{ font-family:var(--disp); font-weight:500; font-size:clamp(26px,3vw,40px); line-height:1; letter-spacing:0.01em;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.cd-lab{ font-family:var(--body); text-transform:uppercase; letter-spacing:0.24em; font-size:10px;
  color:var(--ink-soft); padding-left:0.24em; }
.cd-sep{ font-family:var(--disp); font-weight:400; font-size:clamp(22px,2.4vw,34px); line-height:1.16; color:var(--ink-faint); }

/* ================= RSVP email capture ================= */
.rsvp{ display:flex; flex-direction:column; align-items:center; margin-top:62px; max-width:520px; }
.rsvp-eyebrow{ font-family:var(--body); text-transform:uppercase; letter-spacing:0.36em; font-size:11px;
  color:var(--ink-soft); margin:0 0 12px; padding-left:0.36em; }
.rsvp-lead{ font-family:var(--body); font-size:14px; line-height:1.6; color:var(--ink-soft);
  margin:0 0 22px; max-width:400px; text-wrap:pretty; }
.rsvp-form{ display:flex; width:100%; max-width:440px; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:#fff; transition:border-color .2s ease; }
.rsvp-form[hidden]{ display:none; }
.hidden-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.rsvp-form:focus-within{ border-color:var(--ink); }
.rsvp-input{ flex:1; min-width:0; border:0; background:transparent; padding:14px 18px;
  font-family:var(--body); font-size:15px; color:var(--ink); outline:none; }
.rsvp-input::placeholder{ color:var(--ink-faint); }
.rsvp-btn{ border:0; background:var(--ink); color:#FBF9F4; font-family:var(--body);
  text-transform:uppercase; letter-spacing:0.2em; font-size:12px; padding:0 24px; cursor:pointer;
  white-space:nowrap; transition:background .2s ease; }
.rsvp-btn:hover{ background:#000; }
.rsvp-thanks{ font-family:var(--script); font-size:30px; line-height:1.1; color:var(--ink); margin:6px 0 0; }

@media (max-width:760px){
  .monogram-aj{ font-size:80px; height:80px; }
  .names-big{ font-size:34px; }
  .countdown{ gap:7px; }
  .cd-cell{ min-width:56px; }
  .cd-num{ font-size:26px; }
  .cd-sep{ font-size:22px; }
  .rsvp-form{ flex-direction:column; }
  .rsvp-btn{ padding:13px 24px; }
}