/* ==========================================================================
   Wedding invitation — Shailja & Jatin
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --gold:#c39a58;--gold-deep:#8a6428;--ink:#3e2a1c;--muted:#6b4f3a;--maroon:#a4584a;
  --display:"Cinzel",Georgia,serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --script:"Great Vibes",cursive;
  --body:"Jost",system-ui,sans-serif;
  --gold-grad:linear-gradient(135deg,#f1dcab 0%,#d2aa67 45%,#a67c3a 100%);
  --text-grad:linear-gradient(135deg,#c9a063,#9c7536 50%,#6e4f22);
  --tap:clamp(9rem,52vw,13rem);
  --edge:1px solid rgba(195,154,88,.5);
  --shadow:0 20px 44px rgba(122,86,50,.2);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:clamp(16px,.35vw + 14.6px,19px)}
body{
  margin:0;font-family:var(--body);font-weight:300;color:var(--ink);line-height:1.6;
  overflow-x:hidden;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(70% 40% at 50% 8%,rgba(245,200,160,.45),transparent 70%),
    radial-gradient(60% 40% at 15% 85%,rgba(231,169,163,.18),transparent 70%),
    radial-gradient(60% 40% at 85% 70%,rgba(159,179,148,.16),transparent 70%),
    linear-gradient(180deg,#fbf4ea,#f6ead8 55%,#f1e1ca);
  background-attachment:fixed;
}
body.locked{overflow:hidden;height:100vh}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer}
a{color:inherit}

/* ---------- typography ---------- */
.eyebrow{margin:0;font-family:var(--display);font-size:clamp(.95rem,3.6vw,1.2rem);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.title{
  margin:.5em 0 .6em;font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,7vw,2.2rem);
  line-height:1.2;letter-spacing:.06em;text-transform:uppercase;
  color:#6b3f2a;
}
.script{font-family:var(--script);font-weight:400}
.serif-i{margin:.6em 0;font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--muted)}
.serif-i.big{font-size:1.25rem}
/* ornament row: hairline · diya · lotus · diya · hairline */
.orn{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:6px auto 18px;color:var(--gold-deep)}
.orn svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.orn .mid{width:2.6rem;height:2.6rem;color:var(--maroon)}
.orn .side{width:1.9rem;height:1.9rem;color:#e8921f}
.orn i{width:clamp(1.8rem,12vw,3.2rem);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn i:last-child{background:linear-gradient(270deg,transparent,var(--gold))}

/* ---------- shared controls ---------- */
.btn,.ghost{font-family:var(--display);text-transform:uppercase}
.btn{
  display:inline-block;padding:16px 28px;border:1px solid rgba(166,124,58,.7);border-radius:999px;
  background:var(--gold-grad);color:#3b2417;font-size:.75rem;letter-spacing:.2em;text-decoration:none;
  box-shadow:0 10px 24px rgba(122,86,50,.25);
}
.ghost{
  padding:12px 24px;border:1px solid rgba(166,124,58,.6);border-radius:999px;
  background:rgba(255,255,255,.3);color:var(--gold-deep);font-size:.72rem;letter-spacing:.2em;
}
.nav{
  position:absolute;top:42%;z-index:5;width:2.5rem;height:2.5rem;padding:0 0 4px;
  border:1px solid rgba(166,124,58,.7);border-radius:50%;background:rgba(255,250,240,.92);
  color:var(--gold-deep);font-size:1.6rem;line-height:1;box-shadow:0 6px 16px rgba(90,58,38,.3);
}
.nav:hover{background:var(--gold-grad);color:#fff}
.nav{transition:opacity .25s ease}
.nav.off{opacity:0;visibility:hidden;pointer-events:none}
.nav.prev{left:calc(var(--fm) + .7rem)}.nav.next{right:calc(var(--fm) + .7rem)}
.car-wrap>.nav.prev{left:max(calc(var(--fm) + .7rem),calc(50% - 300px))}.car-wrap>.nav.next{right:max(calc(var(--fm) + .7rem),calc(50% - 300px))}

/* ---------- ambient effects ---------- */
.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 30% at 20% 20%,rgba(255,214,170,.35),transparent 70%),radial-gradient(40% 30% at 80% 60%,rgba(231,169,163,.22),transparent 70%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(0,30px,0) scale(1.08)}}
#particles{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none}
#particles span{
  position:absolute;bottom:-10px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff1c1,#d4af6a 55%,transparent 72%);animation:rise linear infinite;
}
@keyframes rise{0%{opacity:0}12%{opacity:.85}to{transform:translate3d(24px,-105vh,0);opacity:0}}
#confetti{position:fixed;inset:0;z-index:90;width:100%;height:100%;pointer-events:none}

/* ---------- stage 1: gate ---------- */
#gate{
  position:fixed;inset:0;z-index:100;transition:opacity 1.2s ease,visibility 1.2s;
  /* first frame sits underneath the videos, so nothing can flash while they load or swap */
  background:#1a0305 url(assets/poster/ganpati-1.webp) center/cover no-repeat;
}
#gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.fullvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.fullvid.on{opacity:1}
/* both videos carry a poster identical to their first frame, so they are shown at once and never faded in:
   the poster turns into the playing video with no ghosting or blank frame */
#v1,#v2{transition:none}
.tap{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);
  display:grid;place-items:center;width:calc(var(--tap) + 30px);height:calc(var(--tap) + 30px);padding:0;border:0;background:none;color:#fff;
  opacity:0;pointer-events:none;transition:opacity 1s ease;
}
.tap.ready{opacity:1;pointer-events:auto}
.tap.out{opacity:0;pointer-events:none;transition-duration:.6s}
.tap img{
  width:var(--tap);height:var(--tap);border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px rgba(241,217,155,.9),0 12px 40px rgba(0,0,0,.4);animation:pulse 2.4s ease-in-out infinite;
}
.tap .ring{position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(241,217,155,.7);animation:ring 2.6s ease-out infinite}
.tap .r2{animation-delay:1.3s}
.tap em{
  position:absolute;left:0;right:0;bottom:-46px;font-family:var(--display);font-style:normal;font-size:.72rem;
  letter-spacing:.35em;text-transform:uppercase;color:#f1d99b;text-shadow:0 1px 6px rgba(0,0,0,.6);
}
@keyframes ring{0%{transform:scale(.95);opacity:.9}to{transform:scale(1.25);opacity:0}}
@keyframes pulse{50%{transform:scale(1.03)}}

/* venue skyline: mountains, pagoda, stupa, pagoda */
.skyline{width:min(24rem,92%);margin:.2rem auto 1rem;fill:none;stroke:var(--maroon);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible;opacity:.8}
.skyline .far{opacity:.45}

/* ---------- page frame: a fixed border; the page scrolls inside it and is hidden beyond it ---------- */
:root{--fm:.55rem} /* gap between the screen edge and the border */
.page-frame{
  --co:clamp(2.8rem,11vw,4.8rem);
  position:fixed;inset:var(--fm);z-index:50;pointer-events:none;color:var(--gold);
  border:1px solid rgba(195,154,88,.6);
}
.page-frame:before{content:"";position:absolute;inset:4px;border:1px dashed rgba(195,154,88,.35)}
/* covers the strip outside the border with the page background, so scrolling content never shows past it.
   `inherit` + fixed attachment makes it line up seamlessly with the body background. */
.page-mask{
  position:fixed;inset:0;z-index:49;pointer-events:none;background:inherit;background-attachment:fixed;
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--fm) var(--fm),var(--fm) calc(100% - var(--fm)),calc(100% - var(--fm)) calc(100% - var(--fm)),calc(100% - var(--fm)) var(--fm),var(--fm) var(--fm));
}
.co{position:absolute;width:var(--co);height:var(--co)}
.co.tl{top:-1px;left:-1px}
.co.tr{top:-1px;right:-1px;transform:scaleX(-1)}
.co.bl{bottom:-1px;left:-1px;transform:scaleY(-1)}
.co.br{bottom:-1px;right:-1px;transform:scale(-1)}

/* ---------- stage 2: entrance ---------- */
#entrance{
  position:relative;z-index:2;overflow:hidden;min-height:100vh;min-height:100svh;padding:28px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.rays{
  position:absolute;inset:-20%;z-index:-1;
  background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(255,236,200,.35) 0 6deg,transparent 6deg 16deg);
  -webkit-mask:radial-gradient(circle at 50% 30%,#000 0,transparent 70%);mask:radial-gradient(circle at 50% 30%,#000 0,transparent 70%);
  animation:spin 160s linear infinite;opacity:.6;
}
@keyframes spin{to{transform:rotate(360deg)}}
.welcome{margin:0 0 .8rem;font-family:var(--serif);font-style:italic;font-size:clamp(2rem,8.5vw,2.7rem);color:var(--muted)}
.frame{
  position:relative;width:calc(100% + 40px);max-width:36rem;aspect-ratio:16/9;overflow:hidden;
}
.frame video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.28);transform-origin:56% 100%}
/* the video has its own cream backdrop — feather every edge so it dissolves into the page */
.frame{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 94%,transparent);
  mask-composite:intersect;
}
#entrance .eyebrow{margin-top:.5rem;font-size:clamp(.875rem,2.6vw,1rem);font-weight:600;letter-spacing:.28em}
.names{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.1em .5rem;margin:.4rem 0 .2rem;font-weight:400}
.names .script{
  font-size:clamp(2.7rem,12.5vw,4.6rem);line-height:1.15;
  background:linear-gradient(135deg,#a67c3a,#7a5424);-webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(-20% 100% -20% -20%); /* hidden until the entrance animation below writes it out */
  /* room for the script flourishes: gradient text only paints inside its own box */
  padding:.05em .22em .12em;margin:0 -.22em;
}
.amp{flex:none;display:inline-block;line-height:1}
.amp .script{font-size:clamp(2rem,9vw,3rem);padding:0;margin:0;background:none;color:#c39a58;-webkit-text-fill-color:#c39a58}
@keyframes write{to{clip-path:inset(-30%)}}
@keyframes up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(0) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
/* first-page entrance, played once the envelope opens: welcome → video → kicker → names written out → & → together */
#entrance:not(.sealed) .welcome{animation:up .8s .2s both}
#entrance:not(.sealed) .frame{animation:up .9s .8s both}
#entrance:not(.sealed) .eyebrow{animation:up .8s 1.6s both}
#entrance:not(.sealed) .names>.script{animation:write 1.1s cubic-bezier(.6,0,.3,1) forwards}
#entrance:not(.sealed) .names>.script:first-child{animation-delay:2.2s}
#entrance:not(.sealed) .names>.script:last-child{animation-delay:3.7s}
#entrance:not(.sealed) .amp{animation:pop .8s cubic-bezier(.3,1.6,.5,1) 3.2s both}
#entrance:not(.sealed) .amp .script{clip-path:none;animation:none}
#entrance:not(.sealed) .together{animation:up .8s 4.8s both}
.together{display:flex;align-items:center;gap:12px;width:100%;max-width:100%;margin:.3rem 0 1.2rem}
.together i{flex:1 1 1.5rem;min-width:1rem;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.together i:last-child{background:linear-gradient(270deg,transparent,var(--gold))}
.together span{font-family:var(--display);font-size:clamp(1rem,4.2vw,1.3rem);font-weight:500;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;text-align:center;max-width:13em;color:#7a1f2e}
#petals i{
  position:absolute;top:-20px;width:14px;height:10px;border-radius:70% 0 70% 0;opacity:.85;
  animation:fall linear infinite;
}
#entrance>.cue{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);margin:0;padding:0;z-index:4;transition:opacity .9s ease 1s}
#entrance.sealed>.cue{opacity:0;visibility:hidden}
/* sealed envelope: covers the entrance until the seal is broken */
#entrance>:not(#envelope):not(.rays):not(#petals){transition:opacity .9s ease .25s,transform .9s cubic-bezier(.2,.7,.2,1) .25s}
#entrance.sealed>:not(#envelope):not(.rays):not(#petals){opacity:0;transform:translateY(3rem) scale(.96);visibility:hidden}
#envelope{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;
  transition:transform .9s cubic-bezier(.6,0,.4,1),opacity .7s ease;
}
#envelope.gone{transform:translateY(60vh);opacity:0;pointer-events:none}
.env{
  position:relative;width:min(84vw,24rem,calc((100svh - 7rem) * 1.5));aspect-ratio:3/2;
  filter:drop-shadow(0 24px 34px rgba(90,30,30,.4));
  animation:env-float 4.5s ease-in-out infinite;
}
.env>*{position:absolute;inset:0}
.env-back{border-radius:.5rem;background:linear-gradient(180deg,#7a2832,#651f29)}
.env-front{
  border-radius:.5rem;background:linear-gradient(180deg,#9a3a45,#82303a);
  clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);
  box-shadow:inset 0 0 0 2px rgba(230,196,131,.5);
}
.env-flap{
  bottom:auto;height:100%;background:linear-gradient(180deg,#b04852,#93353f);
  clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:50% 0;border-radius:.5rem .5rem 0 0;z-index:2;
}
.env-flap:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.12));}
.seal{
  inset:auto;left:50%;top:58%;z-index:3;width:clamp(3.6rem,17vw,5rem);aspect-ratio:1;padding:.2rem;border:0;border-radius:50%;
  transform:translate(-50%,-50%);cursor:pointer;
  background:radial-gradient(circle at 32% 28%,#f6e2a8,#d2aa67 55%,#8a6428);
  box-shadow:0 4px 12px rgba(40,10,10,.5),inset 0 0 0 2px rgba(255,255,255,.35);
  animation:seal-pulse 2.2s ease-in-out infinite;
}
.seal img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.env-hint{margin:0;font-family:var(--display);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);transition:opacity .4s}
#envelope.opening .env-hint{opacity:0}
#envelope.opening .env{animation:none}
#envelope.opening .seal{animation:seal-break .55s ease forwards}
#envelope.opening .env-flap{animation:flap-open 1s .3s cubic-bezier(.5,0,.3,1) forwards}
@keyframes env-float{50%{transform:translateY(-.5rem)}}
@keyframes seal-pulse{50%{transform:translate(-50%,-50%) scale(1.07)}}
@keyframes seal-break{40%{transform:translate(-50%,-50%) scale(1.2) rotate(-8deg)}to{transform:translate(-50%,-30%) scale(.2) rotate(40deg);opacity:0}}
@keyframes flap-open{0%{transform:perspective(900px) rotateX(0);z-index:2}50%{z-index:2}51%{z-index:0}to{transform:perspective(900px) rotateX(180deg);z-index:0;opacity:.9}}
@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--r))}}
#petals{position:absolute;inset:0;pointer-events:none}
/* short landscape screens: video on the left, text on the right so nothing needs scrolling */
@media (max-height:520px) and (orientation:landscape){
  #entrance{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:2rem;align-content:center;align-items:center;justify-items:center;padding:16px 28px}
  #entrance>*{grid-column:2}
  #entrance>.rays,#entrance>#petals{grid-column:1/-1;grid-row:1/-1}
  #entrance>#envelope{grid-column:auto;grid-row:auto} /* fills the whole page, not just the grid tracks */
  #entrance>.frame{grid-column:1;grid-row:1/5;max-width:none}
  #entrance .eyebrow,.together,.welcome{margin-top:0;margin-bottom:.4rem}
  .names .script{font-size:clamp(2.2rem,6.4vw,3rem)}
  .amp .script{font-size:1.5rem}
}
@media (max-height:700px){
  #entrance .eyebrow{margin-top:16px}
  .names .script{font-size:2.8rem}
  .frame{max-width:30rem}
}

/* ---------- sections (each fills the screen, content centred) ---------- */
.section{
  position:relative;z-index:2;width:100%;min-height:100vh;min-height:100svh;margin:0 auto;padding:3.5rem 20px 4rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.section>*{max-width:min(36rem,100%)}
.section>.car-wrap{max-width:none}
.block{width:100%}
.cue{
  position:absolute;left:50%;bottom:.9rem;z-index:6;transform:translateX(-50%);margin:0;padding:.4rem .8rem;border:0;background:none;
  font-family:var(--display);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(166,124,58,.65);
}
.cue:hover{color:var(--gold-deep)}
.cue svg{display:block;width:22px;height:22px;margin:4px auto 0;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* ---------- invitation (ornate arch, full page) ---------- */
.inv-page{
  padding:0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(122,90,42,.16)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23b9a37c' stroke-width='.7' opacity='.55'%3E%3Cpath d='M23 6Q18 14 23 20Q28 14 23 6ZM23 26Q18 34 23 40Q28 34 23 26Z'/%3E%3Cpath d='M6 23Q14 18 20 23Q14 28 6 23ZM26 23Q34 18 40 23Q34 28 26 23Z'/%3E%3Ccircle cx='23' cy='23' r='2'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#efe3cf,#e7d8bf);
}
.inv{
  position:relative;flex:none;container-type:inline-size;aspect-ratio:500/920;
  /* as tall as the screen (never narrower than 20rem); wider than the screen on phones, so it fills edge to edge */
  width:max(calc(100svh * .543),20rem);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.inv-page>.inv{max-width:none}
/* wide screens: the artwork is narrower than the page, so let its edges melt into the wall pattern */
@media (min-aspect-ratio:4/5){
  .inv{-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
}
.inv-art{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;user-select:none;-webkit-user-drag:none}
.inv>:not(.inv-art){position:absolute;margin:0}
.inv-logo{left:50%;top:16.3%;width:15.2cqw;height:15.2cqw;transform:translate(-50%,-50%);border-radius:50%;object-fit:cover;box-shadow:0 0 0 .4cqw rgba(201,162,74,.55)}
.inv-main{left:24%;right:24%;top:21.6%;display:flex;flex-direction:column;align-items:center;text-align:center}
.inv-small{font-family:var(--display);font-size:2.7cqw;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#7a4a3a;margin:0 0 1cqw}
.inv-cord{font-family:var(--serif);font-style:italic;font-size:4.2cqw;line-height:1.22;color:#5a3a26;margin:0}
.inv-big{
  margin:.4cqw 0 .6cqw;font-family:var(--display);font-weight:500;font-size:9.3cqw;line-height:1.08;letter-spacing:.05em;text-transform:uppercase;
  color:#8a5a2c;
}
.inv-nm{font-size:13.4cqw;line-height:1.1;color:#6b3f2a;margin:1.6cqw 0 1cqw!important;padding:0 .2em}
.inv-rel{font-family:var(--serif);font-style:italic;font-size:3.6cqw;line-height:1.15;color:var(--gold-deep);margin:.2cqw 0 .1cqw}
.inv-gp{font-family:var(--serif);font-style:italic;font-size:3.7cqw;line-height:1.22;color:#6b3f2a;margin:0 0 .6cqw}
.inv-with{display:flex;align-items:center;gap:2cqw;width:84%;margin:1.4cqw 0 .2cqw}
.inv-with i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(166,124,58,.8))}
.inv-with i:last-child{background:linear-gradient(270deg,transparent,rgba(166,124,58,.8))}
.inv-with span{font-family:var(--display);font-size:2.9cqw;letter-spacing:.3em;text-transform:uppercase;color:var(--maroon)}

/* ---------- scratch card ---------- */
.scratch-wrap{
  position:relative;aspect-ratio:3/2;max-width:32rem;max-height:60svh;margin:22px 0;padding:.5rem;border-radius:1rem;container-type:inline-size;
  background:linear-gradient(135deg,#e6c483,#b98d45 50%,#e2be7a);box-shadow:0 26px 50px rgba(122,86,50,.35);
}
.scratch-under{
  position:absolute;inset:.5rem;overflow:hidden;border-radius:.65rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fffaf0,#f8ecd4);
}
.scratch-under>:not(.mandala){position:relative}
.mandala{position:absolute;inset:-20%;width:140%;height:140%;opacity:.35;pointer-events:none}
.dt{margin:4px 0;font-size:clamp(2.2rem,15cqw,4.2rem);line-height:1.1;color:#6b3f2a}
.scratch-under .serif-i{margin:0;font-size:1.15rem}
#scratch{
  position:absolute;inset:.5rem;width:calc(100% - 1rem);height:calc(100% - 1rem);border-radius:.65rem;
  touch-action:none;transition:opacity .9s;
}

/* ---------- countdown ---------- */
.date-slot{display:grid;justify-items:center;align-items:start}
.date-slot>*{grid-area:1/1;width:100%;transition:opacity .7s ease,transform .7s ease,visibility .7s}
.slot-pre{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.slot-pre .serif-i{margin:0}
.slot-post{opacity:0;visibility:hidden;transform:translateY(.7rem)}
#date.revealed .slot-post{opacity:1;visibility:visible;transform:none;transition-delay:.35s}
#date.revealed .slot-pre{opacity:0;visibility:hidden;pointer-events:none}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:.7rem 0 .2rem}
.cd div{
  position:relative;padding:16px 4px 12px;border:1px solid rgba(166,124,58,.35);border-radius:12px;
  background:linear-gradient(180deg,#fffaf0,#f7ead3);box-shadow:0 8px 20px rgba(122,86,50,.12);
}
.cd div:before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;background:var(--gold)}
.cd b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,7vw,2.3rem);line-height:1.1;color:#b58c4c}
.cd span{font-family:var(--display);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.today{font-size:2.6rem;color:var(--gold-deep)}

/* ---------- celebrations carousel ---------- */
.dots{display:flex;gap:10px;justify-content:center;margin:.3rem 0 0}
.dot{
  width:10px;height:10px;padding:0;border:1.5px solid var(--gold-deep);border-radius:50%;
  background:transparent;font-size:0;transition:width .3s;
}
.dot.on{width:26px;border-radius:6px;background:var(--gold-deep)}
.car-wrap{position:relative;width:100vw;max-width:100vw}
.carousel{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;
  --cw:clamp(15rem,78vw,24rem);margin:-26px 0 -44px;padding:48px calc((100% - var(--cw))/2) 72px;
  /* no mask-image here: a mask on a scrolling strip full of playing videos is repainted every frame and flickers */
}
.carousel::-webkit-scrollbar{display:none}
.carousel,.wr-track{overscroll-behavior-x:none}
.ev{
  flex:0 0 var(--cw);display:flex;scroll-snap-align:center;padding:5px;border-radius:18px;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#fff,#f3dcc0);
  box-shadow:0 0 0 1px rgba(195,154,88,.6),0 0 34px var(--soft),0 22px 44px rgba(122,86,50,.25);
  transform:scale(.92);opacity:.5;transition:transform .4s ease,opacity .4s ease;will-change:transform,opacity;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.ev.is-active{transform:none;opacity:1;cursor:default}
.ev-in{
  flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(195,154,88,.6);border-radius:14px;
  background:linear-gradient(180deg,#fdf1e2,#f6d9b8);
}
.media{position:relative;flex:1 0 auto;overflow:hidden;min-height:min(calc(var(--cw) * 1.1),62svh);background:#f6d9b8}
.media:after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,transparent,#fbe9d3)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden}
/* every card: the picture stops 15% short of the card's bottom (that strip is the cream the fade melts into) and is anchored
   per card with --pos (set in app.js) so faces stay in view. Plain box sizing only: masks and transforms on a playing video flicker while swiping. */
.media{background:#fbe9d3}
.media img,.media video{inset:0 0 15% 0;height:85%;object-position:var(--pos,50% 50%)}
.ttl{position:absolute;left:18px;right:18px;bottom:8px;z-index:2}
.ttl .row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.ttl h3{margin:0;font-family:var(--serif);font-style:normal;font-weight:600;font-size:clamp(1.35rem,5.4vw,1.85rem);line-height:1.15;color:#6b3f2a}
.ttl small{white-space:nowrap;font-family:var(--display);font-size:.62rem;letter-spacing:.15em;color:var(--muted)}
.badge{
  display:inline-block;margin-bottom:6px;padding:5px 14px;border-radius:999px;background:var(--accent);color:#25040a;
  font-family:var(--display);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 0 18px var(--soft);
}
.ev ul{margin:0;padding:14px 20px 12px;list-style:none}
.ev li{display:flex;gap:12px;align-items:flex-start;padding:5px 0;font-family:var(--serif);font-size:1.12rem;line-height:1.35}
.ev li svg{flex:none;width:1.15rem;height:1.15rem;margin-top:.12em;fill:none;stroke:var(--gold-deep);stroke-width:1.6}
.ev .desc{margin:auto 20px 0;padding:12px 0 20px;border-top:1px solid rgba(166,124,58,.3);font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--muted)}

/* drag-to-scroll (mouse) */
.dragging{cursor:grabbing!important;scroll-snap-type:none!important;scroll-behavior:auto!important;user-select:none}
.dragging *{pointer-events:none}
.carousel img,.wr-track img{-webkit-user-drag:none;user-select:none}

/* ---------- wardrobe ---------- */
.wr{position:relative;max-width:26rem;margin:26px auto 22px;cursor:pointer;container-type:inline-size}
.wr.open{cursor:default}
.wr-top{height:26px;margin:0 -8px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#ecd08d,#b98d45);box-shadow:0 6px 12px rgba(90,58,38,.3)}
.wr-body{
  position:relative;height:max(20rem,min(130cqw,calc(100svh - 12rem)));overflow:hidden;border:3px solid #8f6238;border-top:0;
  background:linear-gradient(180deg,#c69a72,#b98a62);transition:height .9s cubic-bezier(.6,0,.3,1);
}
.wr.open .wr-body{height:max(24rem,min(calc(150cqw + 5rem),calc(100svh - 9.5rem)))}
.wr-inner{
  position:absolute;inset:10px;padding:12px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#f5e6d3,#ecd7bd);box-shadow:inset 0 0 20px rgba(90,58,38,.25);
}
.wr-inner .nav{top:48%;width:2.1rem;height:2.1rem;font-size:1.3rem}
.wr-inner .nav.prev{left:6px}.wr-inner .nav.next{right:6px}
.wr:not(.open) .wr-inner .nav{display:none}
.wr-progress{height:5px;margin:0 0 10px;background:rgba(138,100,40,.35)}
.wr-progress i{display:block;width:25%;height:100%;background:#a67c3a;transition:width .3s}
.wr-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.wr-track::-webkit-scrollbar{display:none}
.look{
  flex:0 0 100%;display:flex;flex-direction:column;overflow:hidden;scroll-snap-align:center;text-align:left;
  border:2px solid var(--gold);border-radius:14px;background:#fbf5ec;
}
.look header{display:flex;gap:12px;align-items:center;padding:12px 14px}
.look .av{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--gold);border-radius:50%;
  background:#f3e0c2;font-family:var(--serif);font-size:1.2rem;color:var(--gold-deep);
}
.look h4{margin:0;font-family:var(--display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#9b5a4a}
.look p{margin:0;font-size:.9rem}
.look img{flex:1;min-height:0;width:100%;object-fit:contain;background:#f7ebd8}
.door{
  position:absolute;top:0;bottom:0;width:50%;border:1px solid #a67c3a;
  background:linear-gradient(180deg,#c99d76,#b58660);box-shadow:inset 0 0 0 10px rgba(255,255,255,.05);
  transition:transform 1.1s cubic-bezier(.6,0,.3,1);
}
.door:before{content:"";position:absolute;inset:14px;border:2px solid rgba(230,196,131,.6)}
.dl{left:0;transform-origin:left}.dr{right:0;transform-origin:right}
.handle{position:absolute;top:50%;width:14px;height:34px;border-radius:8px;background:linear-gradient(90deg,#e6c483,#a67c3a);transform:translateY(-50%)}
.dl .handle{right:8px}.dr .handle{left:8px}
.wr.open .dl{transform:perspective(900px) rotateY(-100deg)}
.wr.open .dr{transform:perspective(900px) rotateY(100deg)}
.wr-base{width:88%;height:16px;margin:0 auto;border-radius:0 0 8px 8px;background:#7a5030}

/* ---------- venue / message / contact ---------- */
.venue-card{margin-top:20px;padding:34px 20px 30px;border:var(--edge);border-radius:22px;background:linear-gradient(180deg,#fff,#fbf3e6);box-shadow:var(--shadow)}
.pin{width:54px;height:54px;filter:drop-shadow(0 0 16px rgba(255,190,90,.6));animation:pin-drop 2.8s ease-in-out infinite}
@keyframes pin-drop{50%{transform:translateY(-7px)}}
.venue-card h3{margin:10px 0 6px;font-family:var(--display);font-weight:500;font-size:1.3rem;letter-spacing:.1em;text-transform:uppercase;color:#3b2417}
.addr{margin:0 0 20px;font-family:var(--serif);font-size:1.35rem;color:var(--muted)}
.msg-card{position:relative;margin-top:20px;padding:26px 22px;border:var(--edge);border-radius:20px;background:linear-gradient(180deg,#fdf6ea,#f5e6cf);box-shadow:var(--shadow)}
.msg-card:before{content:"";position:absolute;inset:8px;border:1px dashed rgba(166,124,58,.4);border-radius:14px;pointer-events:none}
.msg-card p{position:relative;margin:0 0 18px;font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.55}
.msg-card .script{display:block;margin-top:.25em;font-size:clamp(2rem,9vw,2.6rem);line-height:1.2;color:#8a5a2c}
.contacts{margin-top:22px;padding:8px 24px;border:var(--edge);border-radius:16px;background:linear-gradient(180deg,#fffdf9,#fbf1e2);box-shadow:var(--shadow)}
.contacts a{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;padding:18px 0;border-bottom:1px solid rgba(166,124,58,.3);text-decoration:none}
.contacts a:last-child{border:0}
.contacts b{font-family:var(--serif);font-weight:600;font-size:1.4rem;line-height:1.2;text-align:left;color:#6b3f2a}
.contacts span{font-family:var(--body);font-weight:400;font-variant-numeric:lining-nums tabular-nums;font-size:1.05rem;letter-spacing:.03em;white-space:nowrap;text-align:right;color:var(--gold-deep)}
.foot{margin:36px 0 0;font-family:var(--serif);font-weight:600;font-size:2.1rem;letter-spacing:.04em;color:var(--gold-deep)}

/* ---------- music button ---------- */
.music{
  position:fixed;right:18px;bottom:22px;z-index:60;display:grid;place-items:center;width:54px;height:54px;padding:0;
  border:3px solid #d9b56e;border-radius:50%;background:linear-gradient(135deg,#e6c483,#a67c3a);box-shadow:0 8px 22px rgba(90,58,38,.4);
}
.music:before{
  content:"♫";display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#fff8ee;color:#7a5424;font-size:1.2rem;
}
.music.off{opacity:.65}
.music.off:after{content:"";position:absolute;width:38px;height:2px;background:#7a5424;transform:rotate(-45deg)}

/* ---------- desktop ---------- */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #entrance,#entrance *{animation-delay:0s!important}
  html{scroll-behavior:auto}
}

/* one-time nudge: the carousel glides a little toward the next card and settles back */
.carousel.nudging{scroll-snap-type:none}