:root{
  --paper:#f6f0e7;
  --paper2:#eee3d3;
  --ink:#46372f;
  --muted:#766b62;
  --gold:#a78a64;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:"Cormorant Garamond",Georgia,serif;overflow-x:hidden}
button{font:inherit}
.app{
  position:relative;min-height:100svh;overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% 18%,rgba(255,255,255,.96),rgba(255,255,255,0) 68%),
    radial-gradient(70% 45% at 50% 72%,rgba(220,199,172,.16),rgba(220,199,172,0) 74%),
    linear-gradient(180deg,#faf6ef 0%,#f4ecdf 56%,#f2e8d9 100%);
}
.app::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* INTRO — the uploaded reference becomes the real opening frame */
.intro{position:fixed;inset:0;z-index:30;background:#e8d9c4;overflow:hidden;isolation:isolate}
.intro-art{position:absolute;inset:-1.5%;width:103%;height:103%;object-fit:cover;object-position:center center;display:block;transform:scale(1.018);filter:saturate(.83) contrast(.98) brightness(1.02);animation:introBreath 7s ease-in-out infinite alternate;will-change:transform,filter,opacity}
@keyframes introBreath{from{transform:scale(1.018)}to{transform:scale(1.035)}}
.intro::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 28%,transparent 72%,rgba(96,70,42,.06));mix-blend-mode:soft-light}
.intro-glow{position:absolute;z-index:3;left:50%;top:54.5%;width:min(56vw,280px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.82);border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(255,255,255,.62) 0,rgba(255,246,231,.28) 25%,rgba(255,245,226,0) 72%);filter:blur(7px);pointer-events:none}
.open-hotspot{position:absolute;z-index:5;left:50%;top:54.5%;transform:translate(-50%,-50%);width:min(46vw,190px);aspect-ratio:1;border:0;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:0 0 10px;color:#7a6653}
.open-hotspot span{font-family:"Montserrat",sans-serif;font-size:9px;letter-spacing:.28em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .5s ease .7s,transform .5s ease .7s;text-shadow:0 1px 1px rgba(255,255,255,.65)}
.intro:hover .open-hotspot span,.intro.ready .open-hotspot span{opacity:.7;transform:none}
.intro.seal-pressed .intro-art{animation:none;transform:scale(1.012);filter:saturate(.82) brightness(.985)}
.intro.seal-pressed .intro-glow{animation:sealBloom .75s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes sealBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}55%{opacity:.9}100%{opacity:.22;transform:translate(-50%,-50%) scale(1.38)}}
.intro.opening .intro-art{animation:none;transform:scale(1.085);filter:saturate(.72) brightness(1.08) blur(1px);transition:transform 1.35s cubic-bezier(.16,.84,.25,1),filter 1s ease,opacity .95s ease;opacity:0}
.intro.opening::after{content:"";position:absolute;z-index:10;inset:-12%;background:radial-gradient(circle at 50% 54%,rgba(255,252,246,.97) 0 10%,rgba(255,248,238,.72) 24%,rgba(255,248,238,0) 60%);transform:scale(.2);opacity:0;animation:irisOpen 1.25s cubic-bezier(.16,.84,.25,1) forwards;pointer-events:none}
@keyframes irisOpen{0%{opacity:0;transform:scale(.2)}28%{opacity:.86}100%{opacity:0;transform:scale(2.8)}}
.intro.gone{opacity:0;pointer-events:none;transition:opacity .35s ease}

.invite{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:28px 14px max(38px,env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateY(12px) scale(.992);filter:blur(5px);transition:opacity 1.15s ease,transform 1.25s cubic-bezier(.16,.84,.25,1),filter 1s ease}
.invite.visible{opacity:1;visibility:visible;transform:none;filter:none}
.ambient-glow{position:absolute;top:4vh;left:50%;width:min(96vw,620px);height:78vh;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,255,255,.88) 0 28%,rgba(255,252,247,.45) 50%,rgba(255,255,255,0) 76%);filter:blur(10px);z-index:-1}
.cherub{width:36px;height:24px;color:#756b61;margin:2px 0 12px;opacity:.74;transform:translateY(-5px);transition:transform 1.1s ease .35s,opacity 1.1s ease .35s}.invite.visible .cherub{transform:none}.cherub svg{width:100%;height:100%;display:block}

.portrait-shell{position:relative;width:min(77vw,440px);aspect-ratio:960/1450;flex:none;filter:drop-shadow(0 16px 34px rgba(112,89,59,.06))}
.portrait-halo{position:absolute;left:8%;right:8%;top:6%;bottom:6%;border-radius:48% 52% 50% 50%/52% 48% 54% 46%;background:rgba(255,255,255,.52);filter:blur(14px);z-index:0;box-shadow:0 0 50px rgba(255,255,255,.72)}
.lace{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:5;pointer-events:none;filter:brightness(1.08) contrast(1.07) drop-shadow(0 1px 1px rgba(87,66,45,.16)) drop-shadow(0 8px 15px rgba(114,92,68,.05))}
.oval-window{position:absolute;left:17.3%;top:12.55%;width:65.5%;height:75.05%;border-radius:50%/49%;overflow:hidden;z-index:2;background:#d8cdbf;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 0 0 5px rgba(247,239,227,.5),0 8px 25px rgba(87,67,44,.12)}
.couple{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:51% 50%;transform:scale(1.025);filter:sepia(.20) saturate(.72) contrast(.94) brightness(.97) hue-rotate(-5deg);transition:transform 2.2s cubic-bezier(.16,.84,.25,1);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.portrait-shell.revealed .couple{transform:scale(1.002);filter:sepia(.20) saturate(.72) contrast(.94) brightness(.97) hue-rotate(-5deg)}
.photo-wash{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,249,239,0) 42%,rgba(245,235,221,.23) 72%,rgba(230,213,191,.48) 100%),linear-gradient(180deg,rgba(255,247,235,.05),rgba(230,209,184,.11));mix-blend-mode:screen}
.photo-wash::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,244,226,.10),rgba(191,147,99,.06));mix-blend-mode:color}

#scratchCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:6;touch-action:none;cursor:crosshair;opacity:1;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
#scratchCanvas.revealed{opacity:0;pointer-events:none}
.scratch-text{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;font-family:"Montserrat",Arial,sans-serif;color:rgba(75,63,52,.86);text-shadow:0 1px 0 rgba(255,255,255,.55);transition:opacity .45s ease,transform .55s ease}
.scratch-text span{font-size:clamp(9px,2.3vw,12px);font-weight:500;letter-spacing:.32em}.scratch-text strong{font-size:clamp(12px,3.2vw,16px);font-weight:500;letter-spacing:.42em;margin-top:5px}
.scratch-text.scratching{opacity:.7;transform:scale(.985)}.scratch-text.revealed{opacity:0;transform:scale(.95)}
.confetti{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.1s ease .1s}.portrait-shell.revealed .confetti{opacity:.72}.confetti i{position:absolute;top:-9%;width:1.5px;height:4px;background:#fff7e8;border-radius:70% 30% 65% 35%;filter:drop-shadow(0 0 1px rgba(255,255,255,.9));animation:fall linear infinite}@keyframes fall{to{transform:translate3d(var(--drift),118%,0) rotate(500deg)}}

.details{text-align:center;margin-top:4px;position:relative;z-index:6;opacity:0;transform:translateY(18px);filter:blur(4px);transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1s cubic-bezier(.16,.84,.25,1),filter .9s ease}
.details.show{opacity:1;transform:none;filter:none}
.eyebrow{font-family:"Montserrat",Arial,sans-serif;font-size:clamp(8.5px,2.05vw,11px);font-weight:500;letter-spacing:.34em;margin:0 0 9px;color:#5d5047;white-space:nowrap}
h1{font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif;font-weight:500;font-style:italic;font-size:clamp(40px,10.6vw,60px);line-height:.94;margin:0;color:#3f3028;letter-spacing:-.035em;text-shadow:0 1px 0 rgba(255,255,255,.68),0 5px 24px rgba(86,60,38,.08)}h1 span{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:.82em;margin:0 .04em;color:#695346}
.rule{width:38px;height:1px;background:linear-gradient(90deg,transparent,#a58a6a,transparent);margin:15px auto 13px;opacity:.9}
.date,.venue{font-family:"Montserrat",Arial,sans-serif;font-weight:500;color:#55473e}.date{font-size:clamp(10.5px,2.7vw,13px);letter-spacing:.14em;margin:0 0 9px;text-transform:none}.venue{font-size:clamp(9.5px,2.4vw,12px);letter-spacing:.18em;margin:0;text-transform:none}
.love{font-family:"Cormorant Garamond",serif;font-size:clamp(15px,3.7vw,19px);font-style:italic;font-weight:500;color:#715f51;margin:22px 0 1px}.families{font-family:"Montserrat",Arial,sans-serif;font-size:clamp(8.5px,2.15vw,10.5px);font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:#594c43;margin:0}
.details.show .eyebrow{animation:textRise .75s ease both}.details.show h1{animation:textRise .82s ease .08s both}.details.show .rule{animation:textRise .8s ease .14s both}.details.show .date{animation:textRise .8s ease .20s both}.details.show .venue{animation:textRise .8s ease .26s both}.details.show .love{animation:textRise .85s ease .34s both}.details.show .families{animation:textRise .85s ease .41s both}@keyframes textRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.sound{position:fixed;right:18px;bottom:23px;width:43px;height:43px;border:1px solid rgba(134,112,86,.13);border-radius:50%;background:rgba(247,240,230,.88);backdrop-filter:blur(8px);color:#62564d;display:grid;place-items:center;z-index:12;box-shadow:0 6px 24px rgba(74,51,29,.08);cursor:pointer}.sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.sound.playing{animation:pulse 1.5s ease-in-out infinite alternate}@keyframes pulse{to{transform:scale(1.05);box-shadow:0 8px 30px rgba(74,51,29,.12)}}
.yt{position:fixed;left:-9999px;top:-9999px;width:1px;height:1px;border:0}

@media(min-width:700px){.portrait-shell{width:min(440px,59vh)}.invite{padding-top:32px}}
@media(max-height:760px) and (max-width:520px){.invite{padding-top:14px}.cherub{margin-bottom:6px}.portrait-shell{width:min(68vw,350px)}.love{margin-top:14px}}
@media(max-height:650px) and (max-width:520px){.portrait-shell{width:min(60vw,318px)}h1{font-size:36px}.details{margin-top:0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}


/* Mobile Safari scratch/reveal compositing stability */
.oval-window,
.couple,
.photo-wash,
#scratchCanvas{
  -webkit-transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.couple{
  -webkit-filter:sepia(.20) saturate(.72) contrast(.94) brightness(.97) hue-rotate(-5deg);
}
.portrait-shell.revealed .couple{
  -webkit-filter:sepia(.20) saturate(.72) contrast(.94) brightness(.97) hue-rotate(-5deg);
}


/* FINAL FRAME / PHOTO FIT FIX
   Keep the couple image fully inside the inner oval so it never visually
   runs underneath the decorative frame. */
.portrait-shell{
  isolation:isolate;
}

.oval-window{
  left:18.8% !important;
  top:13.9% !important;
  width:62.4% !important;
  height:72.2% !important;
  border-radius:50%/49% !important;
  overflow:hidden !important;
  z-index:2 !important;
  background:#e8dece !important;
  box-shadow:
    inset 0 0 0 2px rgba(245,236,222,.92),
    0 0 0 3px rgba(239,225,204,.34),
    0 7px 22px rgba(87,67,44,.09) !important;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

.couple{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:51% 50% !important;
}

.lace{
  z-index:6 !important;
  pointer-events:none !important;
}