/* ===================== DECO: art-deco envelope + arched invitation =====================
   Colours come from the palette variables below; pick one with <html data-theme="emerald|navy|burgundy">.
   Everything in the card header is sized in container units (cqi), so the card that slides out of the
   envelope and the card on the page are the same design at different sizes. */

:root,[data-theme="emerald"]{
  --bg-1:#154a3e;--bg-2:#051c16;
  --env:#16493d;--env-2:#0e3329;--lining:#0a2620;
  --gold:#c9a96b;--gold-2:#f2e0ad;--gold-3:#8f6c36;
  --gold-text:#94733a;--gold-line:rgba(160,124,64,.55);
  --paper:#f8f3e6;--ink:#1d2d27;--ink-soft:#56655e;
}
[data-theme="navy"]{
  --bg-1:#22325f;--bg-2:#080f24;
  --env:#1f3060;--env-2:#15224a;--lining:#0e1834;
  --gold:#cdb07a;--gold-2:#f4e4b8;--gold-3:#8e6f3c;
  --gold-text:#8f703c;--gold-line:rgba(150,118,66,.55);
  --paper:#f6f3ec;--ink:#1b2340;--ink-soft:#56607b;
}
[data-theme="burgundy"]{
  --bg-1:#5e1d2d;--bg-2:#22070d;
  --env:#5b1b2c;--env-2:#43121f;--lining:#300b15;
  --gold:#d8a98b;--gold-2:#f8dccb;--gold-3:#97644d;
  --gold-text:#955f4b;--gold-line:rgba(160,106,86,.55);
  --paper:#faf3ee;--ink:#33161d;--ink-soft:#6c4b51;
}
:root{
  --foil:linear-gradient(135deg,var(--gold-3),var(--gold-2) 42%,var(--gold) 58%,var(--gold-3));
  /* art-deco fan scales */
  --fans:radial-gradient(circle at 50% 100%,transparent 0 8px,var(--pat) 8px 9px,transparent 9px 14px,var(--pat) 14px 15px,transparent 15px 20px,var(--pat) 20px 21px,transparent 21px);
  --env-w:min(84vw,380px,calc((100svh - 90px)*.48));
  color-scheme:dark;
}

*{box-sizing:border-box}
/* The background sits on the page itself, not on a fixed layer: iOS Safari paints its toolbar in the colour of a
   fixed element touching the screen edge, while with none the toolbar stays see-through glass over the page. */
html{--pat:color-mix(in srgb,var(--gold) 9%,transparent);
  background:var(--fans) 0 0/44px 22px,var(--fans) 22px 11px/44px 22px,
    radial-gradient(ellipse at 50% 0%,var(--bg-1),var(--bg-2) 75%) 0 0/100% 100lvh no-repeat,var(--bg-2)}
body{margin:0;min-height:100svh;overflow:hidden;color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ===================== ENVELOPE ===================== */
.cover{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px}
.stage{display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--env-w)*.7)}
.envelope{position:relative;width:var(--env-w);aspect-ratio:3/4;perspective:1400px}
.envelope>*{position:absolute}

.env-back{inset:0;border-radius:6px;--pat:color-mix(in srgb,var(--gold) 16%,transparent);
  background:var(--fans) 0 0/30px 15px,var(--fans) 15px 7.5px/30px 15px,var(--lining);
  box-shadow:0 30px 60px rgba(0,0,0,.45),0 8px 18px rgba(0,0,0,.3)}

/* the invitation card inside the envelope (header copied from the real card by the script) */
/* the card in the envelope is a scaled copy of the whole real card (--real-w/--s set by deco.js) */
/* explicit height, not aspect-ratio: Safari lets a tall child stretch an aspect-ratio box even with overflow hidden */
.env-card{left:7%;top:6%;width:86%;height:calc(var(--env-w) * .86 * 4.3 / 3);z-index:2;overflow:hidden;filter:drop-shadow(0 -3px 10px rgba(0,0,0,.25));
  transition:transform var(--rise,1.2s) cubic-bezier(.45,.05,.55,.95)}
.env-card .arch-card{width:var(--real-w,398px);max-width:none;margin:0;transform:scale(var(--s,.78));transform-origin:0 0}

.env-pocket{inset:0;z-index:3;border-radius:6px;
  clip-path:polygon(0 0,50% 51%,100% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,var(--env),var(--env-2))}
.env-seams{inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.env-seams path{fill:none;vector-effect:non-scaling-stroke}
.env-seams .fold{stroke:rgba(0,0,0,.35);stroke-width:1.5}
.env-seams .foil{stroke:var(--gold);stroke-width:1;opacity:.75}

.env-flap{left:0;right:0;top:0;height:56%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;filter:drop-shadow(0 6px 7px rgba(0,0,0,.35))}
.env-flap .flap-face{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    linear-gradient(170deg,var(--env),var(--env-2))}
.env-flap svg{position:absolute;inset:0;width:100%;height:100%}
.env-flap svg path{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.85}

/* seal: stays whole (the couple's initials are never split); it lifts off the flap in one piece */
.seal{left:50%;top:56%;z-index:6;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;border-radius:50%}
.seal:focus-visible{outline:2px solid var(--gold-2);outline-offset:6px}
.seal-face{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 45%),var(--foil);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),inset 0 -4px 8px rgba(0,0,0,.25),0 5px 10px rgba(0,0,0,.35);
  display:grid;place-items:center}
.seal-face::before{content:'';position:absolute;inset:11%;border-radius:50%;border:1px solid rgba(90,60,20,.45);box-shadow:0 1px 0 rgba(255,245,215,.5)}
.seal-mono{font:italic 500 calc(var(--env-w)*.085)/1 'Cormorant Garamond',Georgia,serif;letter-spacing:-.04em;color:rgba(78,52,18,.8);text-shadow:0 1px 0 rgba(255,240,205,.6)}
.seal-mono small{font:400 .62em/1 'Pinyon Script',cursive;margin:0 .06em}

.env-shine{inset:0;z-index:7;pointer-events:none;border-radius:6px;overflow:hidden;opacity:0}
.env-shine::before{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold-2) 45%,transparent),transparent)}

.hint{margin:26px 0 0;font:500 11px/1 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);animation:hintPulse 3s ease-in-out infinite;transition:opacity .4s}
@keyframes hintPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* --- opening sequence (classes added by deco.js) --- */
.unsealed .seal-face{animation:sealLift 1.1s cubic-bezier(.4,0,.2,1) forwards}
/* a warm glow, then the seal rises off the flap and fades away, whole */
@keyframes sealLift{
  0%{transform:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.18),inset 0 -4px 8px rgba(0,0,0,.25),0 5px 10px rgba(0,0,0,.35)}
  30%{transform:scale(1.07);box-shadow:inset 0 0 0 3px rgba(255,255,255,.3),inset 0 -4px 8px rgba(0,0,0,.2),0 0 26px color-mix(in srgb,var(--gold-2) 70%,transparent),0 12px 22px rgba(0,0,0,.4);opacity:1}
  100%{transform:translateY(-85%) scale(1.12);box-shadow:0 0 30px color-mix(in srgb,var(--gold-2) 40%,transparent),0 22px 30px rgba(0,0,0,.25);opacity:0}}
.unsealed .seal{pointer-events:none}
.unsealed~.hint{opacity:0;animation:none}
.unsealed .env-shine{opacity:1}
.unsealed .env-shine::before{animation:shine 1.1s ease-out forwards}
@keyframes shine{to{left:130%}}
.flap-open .env-flap{animation:flapOpen 1.1s linear forwards}
/* paper catches less light as it turns edge-on, then the inside brightens as it opens */
.env-flap .flap-face::after{content:'';position:absolute;inset:0;background:#000;opacity:0}
.flap-open .env-flap .flap-face::after{animation:flapShade 1.1s linear forwards}
@keyframes flapShade{0%{opacity:0}45%{opacity:.35}55%{opacity:.35}100%{opacity:0}}
/* the flap swaps to its inside (lining) and moves behind the card once it passes upright */
@keyframes flapOpen{
  0%{transform:rotateX(0);z-index:5;animation-timing-function:cubic-bezier(.45,0,.9,.6)}
  49.9%{z-index:5}
  50%{transform:rotateX(90deg);z-index:1;animation-timing-function:cubic-bezier(.1,.4,.4,1)}
  100%{transform:rotateX(180deg);z-index:1}}
.flap-open .env-flap .flap-face{animation:flapInside 1.1s steps(1,end) forwards}
@keyframes flapInside{50%,100%{background:var(--lining)}}
.flap-open .env-flap svg{animation:flapLines 1.1s steps(1,end) forwards}
@keyframes flapLines{50%,100%{opacity:0}}
.card-out .env-card{transform:translateY(-50%)}
.leaving .hint{opacity:0}

/* ===================== INVITATION ===================== */
.invitation{position:relative;padding:calc(48px + env(safe-area-inset-top)) 16px calc(48px + env(safe-area-inset-bottom));visibility:hidden;opacity:0}
.invitation:focus{outline:none}

.arch-card{position:relative;container-type:inline-size;width:min(100%,520px);margin:0 auto;color:var(--ink);text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.7),transparent 60%),var(--paper);
  border-radius:1000px 1000px 14px 14px/1000px 1000px 14px 14px}
.arch-card::before,.arch-card::after{content:'';position:absolute;pointer-events:none;border-radius:inherit}
.arch-card::before{inset:2.6cqi;border:1px solid var(--gold-line)}
.arch-card::after{inset:4.2cqi;border:1px solid var(--gold-line);opacity:.45}
.invitation .arch-card{box-shadow:0 30px 70px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.25);transition:box-shadow .7s}
.invitation .arch-card.revealing{box-shadow:none;transition:none}

.arch-head{position:relative;padding:15cqi 9cqi 0}
.deco-fan{display:block;width:30cqi;height:auto;margin:0 auto 4.5cqi;color:var(--gold)}
.eyebrow{margin:0 0 5cqi;font:500 2.8cqi/1.6 'Cinzel',serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.names{margin:0;font:italic 400 14cqi/.95 'Cormorant Garamond',Georgia,serif;color:var(--ink)}
.names span{display:block}
.names .amp{margin:2.9cqi 0 -.9cqi;font:400 15cqi/.6 'Pinyon Script',cursive;color:var(--gold-text)}
.names .amp.long{margin:3.4cqi 0 .6cqi;font-size:10.5cqi}   /* longer subtitles (e.g. an occasion name) */
.date{display:flex;align-items:center;justify-content:center;gap:3.5cqi;margin:6.5cqi 0 0;white-space:nowrap;font:500 2.7cqi/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.date strong{padding:2.4cqi 3.2cqi;font:500 4.8cqi/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.1em;color:var(--ink);border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}

.arch-body{position:relative;padding:0 30px 40px}
.deco-divider{display:flex;align-items:center;gap:12px;width:min(260px,70%);margin:40px auto}
.deco-divider::before,.deco-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.deco-divider::after{transform:scaleX(-1)}
.deco-divider span{width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--gold)}

.label{margin:0 0 8px;font:500 11px/1.5 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.families{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.family-parents{margin:0;font:500 20px/1.4 'Cormorant Garamond',Georgia,serif}
.family-surname{margin:4px 0 0;font:500 13px/1.4 'Cinzel',serif;letter-spacing:.14em}
/* program (catalog items: birthdays, company events, …) */
.program-list{list-style:none;max-width:340px;margin:0 auto;padding:0}
.program-list li{display:grid;grid-template-columns:66px 1fr;gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--gold-line);text-align:left}
.program-list li:last-child{border-bottom:0}
.program-list time{font:500 12px/1.4 'Cinzel',serif;letter-spacing:.1em;text-align:right;color:var(--gold-text)}
.program-list span{font:500 19px/1.35 'Cormorant Garamond',Georgia,serif;color:var(--ink)}
.quote{max-width:400px;margin:0 auto;font:italic 400 21px/1.6 'Cormorant Garamond',Georgia,serif;color:var(--ink-soft)}

.countdown{display:grid;grid-template-columns:repeat(4,1fr);max-width:380px;margin:0 auto}
.cd-item{padding:6px 0;border-left:1px solid var(--gold-line)}
.cd-item:first-child{border-left:0}
.cd-number{display:block;font:500 34px/1.1 'Cormorant Garamond',Georgia,serif;font-variant-numeric:lining-nums tabular-nums}
.cd-label{display:block;margin-top:4px;font:500 9.5px/1 'Cinzel',serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}

.venue{margin:0 0 10px;font:500 30px/1.2 'Cormorant Garamond',Georgia,serif}
.address,.time{margin:4px 0;font:500 18px/1.5 'Cormorant Garamond',Georgia,serif;color:var(--ink-soft)}
.time{margin-bottom:22px}
.btn-deco{display:flex;align-items:center;justify-content:center;gap:10px;max-width:280px;min-height:50px;margin:12px auto 0;padding:12px 18px;
  font:500 12px/1 'Cinzel',serif;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1px solid var(--gold-line);background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);transition:background .2s,border-color .2s}
.btn-deco:hover,.btn-deco:focus-visible{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.btn-deco svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--gold-text);stroke-width:1.5}
.btn-deco.primary{color:#fff;border-color:transparent;background:var(--foil);text-shadow:0 1px 1px rgba(0,0,0,.25)}
.btn-deco.primary svg{stroke:#fff}

.footer-note{margin:36px 0 14px;font:italic 400 19px/1.5 'Cormorant Garamond',Georgia,serif;color:var(--ink-soft)}
.language-switch{font:500 11px/1 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);text-underline-offset:5px}
.language-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px}
.deco-end{display:block;width:70px;margin:26px auto 0;color:var(--gold);transform:scaleY(-1)}
/* e-invitation.dk / davetiye.dk credit: one quiet line below the card */
.made-by{margin:22px 0 calc(4px + env(safe-area-inset-bottom));text-align:center}
.made-by a{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;font:500 10px/1.4 'Cinzel',serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.made-by strong{font:500 15px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.04em;text-transform:none;color:var(--gold-2)}
.made-by svg{width:16px;height:16px;flex-shrink:0}

/* --- finale: the card flies from the envelope to its place on the page (deco.js) --- */
/* the real invitation sits in the envelope's place, in front of the envelope but cut along the pocket's top edge,
   so the pocket looks in front of it; that edge moves down with the envelope as it slides away (deco.js) */
.growing .invitation{visibility:visible;opacity:1;z-index:25}

@media (max-width:420px){
  .arch-body{padding:0 22px 34px}
  .families{gap:10px}
  .families .label{letter-spacing:.1em}
  .family-parents{font-size:18px}
  .quote{font-size:19px}
  .cd-number{font-size:30px}
  .venue{font-size:27px}
}
@media (prefers-reduced-motion:reduce){
  .hint{animation:none}
  .envelope,.env-card{transition:none}
}