/* =========================================================
   Beate & Knut – Save the Date
   Allura (håndskrift) · Cormorant Garamond (titler) · Manrope (brødtekst)
   ========================================================= */

/* ---------- Fonter (selvhostet, ingen kall til Google) ---------- */
@font-face{font-family:'Allura';src:url('../assets/fonts/allura-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/cormorant-garamond-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/cormorant-garamond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../assets/fonts/manrope-variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --cream:#FDF9F2;        /* flaten rundt kortet   */
  --cream-deep:#F5EDE0;
  --paper:#FDFAF5;        /* selve kortet – samme tone som bakgrunnen i portrettet */
  --pill:#F1ECE3;
  --frame:#E9DFCB;        /* den tynne rammelinjen */
  --ink:#211E1B;
  --ink-soft:#6E6862;
  --sprig:#B9AE99;
  --shadow:rgba(140,120,92,.20);

  --display:'Cormorant Garamond',"Iowan Old Style",Palatino,Georgia,serif;
  --script:'Allura',"Snell Roundhand","Brush Script MT",cursive;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(130% 100% at 50% 0%, #FFFDF9 0%, var(--cream) 55%, var(--cream-deep) 100%)
    fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-sealed{overflow:hidden}

img{max-width:100%;height:auto;display:block}

/* =========================================================
   1. KONVOLUTTEN
   ========================================================= */
.scene{
  position:fixed;inset:0;z-index:10;
  display:grid;place-items:center;
  padding:24px;
  touch-action:none;              /* så sveipet ikke stjeles av nettleseren */
  transition:opacity .7s ease, transform .7s ease;
}
.scene__inner{display:grid;justify-items:center;gap:34px}

.envelope{
  --w:min(78vw,340px);
  position:relative;
  width:var(--w);
  aspect-ratio:340/224;
  padding:0;border:0;background:none;
  cursor:pointer;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.envelope:focus-visible{transform:translateY(-6px)}
@media (hover:hover) and (pointer:fine){
  .envelope:hover{transform:translateY(-6px)}
}
.envelope:focus-visible{outline:none}
.envelope:focus-visible .envelope__back rect{stroke-width:2.4}

.envelope svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.envelope__back rect,
.envelope__front path{fill:var(--paper);stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.envelope__back{z-index:1}
.envelope__front{z-index:4}

.envelope__shadow{
  position:absolute;left:6%;right:6%;bottom:-6%;height:16%;
  background:radial-gradient(50% 50% at 50% 50%, var(--shadow) 0%, rgba(140,120,92,0) 70%);
  filter:blur(2px);z-index:0;
  transition:opacity .8s ease, transform .8s ease;
}

/* arket inni konvolutten */
.envelope__letter{
  /* arket ligger tett i konvolutten – er det for smalt, blir det en tydelig
     stripe bakgrunn mellom arkets kant og klaffen når det dras ut */
  position:absolute;left:3%;top:5%;width:94%;height:86%;
  z-index:3;
  transform:translateY(5%);
  transition:transform 1.5s cubic-bezier(.22,.68,.24,1);
}
.envelope__letter svg{position:static;width:100%;height:100%}
.envelope__letter rect{fill:#fff;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.envelope__letter .ink{stroke:rgba(33,30,27,.2);stroke-width:3;stroke-linecap:round;fill:none}
.envelope__letter .heart{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}

/* klaffen. perspective() ligger i selve transformen – da slipper vi
   preserve-3d, og z-index bestemmer fortsatt hva som ligger øverst. */
.envelope__flap{
  position:absolute;left:0;top:0;width:100%;height:50.9%;
  transform-origin:50% 0;
  transform:perspective(1100px) rotateX(0deg);
  transition:transform 1.05s cubic-bezier(.45,-0.08,.25,1.05) .45s, z-index 0s linear .95s;
  z-index:6;
}
.envelope__flap svg{position:static;width:100%;height:100%}
.envelope__flap path{fill:#F8F3EA;stroke:var(--ink);stroke-width:1.4;vector-effect:non-scaling-stroke}

/* lakksegl */
.envelope__seal{
  position:absolute;left:50%;top:46%;width:19%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:7;
  transition:opacity .35s ease, transform .45s ease;
}
.envelope__seal svg{position:static;width:100%;height:100%}
.envelope__seal circle{fill:#CDB89F;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.envelope__seal text{
  font-family:var(--display);font-size:21px;font-weight:600;
  fill:var(--paper);letter-spacing:.02em;
}

.scene__hint{
  margin:0;display:grid;justify-items:center;gap:2px;
  font-family:var(--script);font-size:clamp(28px,7.5vw,38px);
  color:var(--ink-soft);
  transition:opacity .4s ease;
}
.scene__hint span{animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* pilen vises bare når det faktisk skal sveipes */
.scene__arrow{
  width:26px;height:15px;display:none;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.7;
  animation:pilOpp 2.1s ease-in-out infinite;
}
.scene.is-touch .scene__arrow{display:block}
@keyframes pilOpp{
  0%,100%{transform:translateY(4px);opacity:.35}
  50%    {transform:translateY(-4px);opacity:.9}
}

/* --- sveipet --- */
/* mens fingeren drar: ingen overganger, konvolutten følger fingeren */
.scene.is-dragging .envelope,
.scene.is-dragging .envelope__flap,
.scene.is-dragging .envelope__letter,
.scene.is-dragging .envelope__seal,
.scene.is-dragging .scene__hint{transition:none}
.scene.is-dragging .scene__arrow{animation:none;opacity:.3}

/* slippes sveipet for tidlig, faller alt rolig på plass igjen */
.scene.is-back .envelope__flap,
.scene.is-back .envelope__letter{transition:transform .45s cubic-bezier(.3,.9,.3,1)}

/* et lite vink om å sveipe, hvis noen bare trykker */
.scene.is-nudge .envelope{animation:vink .75s cubic-bezier(.3,.9,.3,1)}
@keyframes vink{
  0%  {transform:none}
  32% {transform:translateY(-18px)}
  58% {transform:translateY(-4px)}
  78% {transform:translateY(-9px)}
  100%{transform:none}
}
.scene.is-nudge .scene__arrow{animation:pilOpp .5s ease-in-out 2}
.scene.is-nudge .scene__hint span{opacity:1}

/* --- åpne-animasjonen ---
   0,00 s  konvolutten trykkes inn og spretter opp igjen
   0,12 s  seglet knekker og faller av
   0,45 s  klaffen vipper opp (og legger seg bak resten etter 0,95 s)
   1,35 s  arket glir sakte opp av konvolutten
   2,75 s  arket kommer mot deg mens scenen tones ut og kortet tones inn
   3,20 s  konfettien slippes                                          */
.scene.is-opening .envelope{
  cursor:default;
  animation:envPress 1.6s cubic-bezier(.34,1.35,.5,1) both;
}
/* --- etter et sveip ---
   Klaffen er allerede oppe og arket halvveis ute, dratt dit av fingeren.
   Da skal ingenting spilles av på nytt – arket fullfører bare bevegelsen
   det allerede er i, og går rett over i kortet.                        */
.scene.is-opening.is-swiped .envelope{animation:none;transform:none}
.scene.is-opening.is-swiped .envelope__seal{
  animation:none;opacity:0;
  transform:translate(-54%,30%) scale(.6) rotate(-40deg);
  transition:opacity .3s ease, transform .4s ease;
}
.scene.is-opening.is-swiped .envelope__flap{
  transition:transform .3s cubic-bezier(.3,.8,.3,1);transition-delay:0s;
}
.scene.is-opening.is-swiped .envelope__letter{
  transform:translateY(-92%) scale(1.04);
  /* tar fart der fingeren slapp, og bremser tydelig inn mot slutten */
  transition:transform 1s cubic-bezier(.1,.88,.22,1);
  transition-delay:0s;
}
.scene.is-gone.is-swiped .envelope__letter{
  transform:translateY(-104%) scale(1.24);
  transition:transform 1.15s cubic-bezier(.32,.06,.62,1);
}
@keyframes envPress{
  0%  {transform:none}
  9%  {transform:scale(.962) translateY(3px)}
  24% {transform:scale(1.018) translateY(-8px) rotate(-.6deg)}
  42% {transform:scale(1) translateY(-4px) rotate(.35deg)}
  100%{transform:translateY(-5px) rotate(0deg)}
}

.scene.is-opening .envelope__seal{
  animation:sealPop 1s cubic-bezier(.32,.78,.3,1) .12s both;
}
@keyframes sealPop{
  0%  {transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}
  20% {transform:translate(-50%,-52%) scale(1.16) rotate(-5deg);opacity:1}
  38% {transform:translate(-50%,-50%) scale(1.04) rotate(3deg);opacity:1}
  100%{transform:translate(-54%,34%) scale(.62) rotate(-42deg);opacity:0}
}

.scene.is-opening .envelope__flap{transform:perspective(1100px) rotateX(163deg);z-index:0}
.scene.is-opening .envelope__letter{
  transform:translateY(-78%) scale(1.05) rotate(-1deg);
  transition-delay:1.35s;
}
.scene.is-opening .envelope__shadow{opacity:0;transition-delay:.6s}
.scene.is-opening .scene__hint{opacity:0}

/* arket kommer mot deg i det scenen forsvinner */
.scene.is-gone .envelope__letter{
  transform:translateY(-96%) scale(1.3) rotate(0deg);
  transition:transform 1s cubic-bezier(.4,0,.75,.6);
  transition-delay:0s;
}
.scene.is-gone{opacity:0;transform:scale(1.1);pointer-events:none;
  transition:opacity .8s ease .1s, transform 1s cubic-bezier(.3,.6,.3,1)}

/* =========================================================
   2. KORTET
   ========================================================= */
.letter{
  min-height:100dvh;
  display:grid;
  justify-items:center;
  padding:clamp(10px,2.2vw,44px) clamp(10px,2.2vw,24px)
          calc(clamp(10px,2.2vw,44px) + env(safe-area-inset-bottom));
}
.letter[hidden]{display:none}

.paper{
  position:relative;
  width:min(100%,560px);
  min-height:100%;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--paper);
  padding:clamp(48px,10.5vw,68px) clamp(20px,6vw,54px) clamp(42px,9vw,60px);
  box-shadow:0 1px 2px rgba(140,120,92,.10),0 20px 50px -18px var(--shadow);
}
/* den tynne rammelinjen inne på kortet */
.paper::before{
  content:"";position:absolute;inset:11px;border:1px solid var(--frame);pointer-events:none;
}
.paper__inner{position:relative;z-index:2;text-align:center}

/* kvist-ornamenter i hjørnene */
.sprig{
  position:absolute;width:clamp(50px,14vw,92px);height:auto;
  color:var(--sprig);z-index:1;pointer-events:none;
}
.sprig__stem,.sprig__leaf{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.sprig--tl{top:17px;left:17px}
.sprig--br{bottom:17px;right:17px;transform:rotate(180deg)}

/* --- typografi --- */
.eyebrow{
  margin:0;
  font-family:var(--script);
  font-size:clamp(44px,12.4vw,68px);
  line-height:1.05;color:var(--ink);
}
.portrait{
  width:clamp(190px,56%,300px);
  margin:clamp(14px,4vw,26px) auto clamp(12px,3.5vw,22px);
  /* mykner av kanten så det firkantede utsnittet ikke synes mot kortet */
  -webkit-mask-image:radial-gradient(closest-side,#000 93%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(closest-side,#000 93%,rgba(0,0,0,0) 100%);
}
.names{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(42px,11.6vw,64px);
  line-height:1.06;
  letter-spacing:.005em;
}
.names .amp{font-weight:500}
.tagline{
  margin:2px 0 0;
  font-family:var(--script);
  font-size:clamp(34px,9.4vw,48px);
  line-height:1.15;
  color:var(--ink);
}
.date{
  margin:clamp(20px,5.5vw,30px) 0 0;
}
.date span{
  display:inline-block;
  background:var(--pill);
  border-radius:999px;
  padding:.6em 1.25em;
  font-family:var(--body);
  font-weight:500;
  font-size:clamp(12.5px,3.6vw,18px);
  letter-spacing:.005em;
  color:var(--ink);
}
.countdown{
  margin:12px 0 0;
  font-size:clamp(12px,3.3vw,13.5px);
  line-height:1.5;
  color:var(--ink-soft);
  text-wrap:balance;
}
/* --- knapper --- */
.actions{margin-top:clamp(24px,6vw,34px);display:grid;justify-items:center;gap:16px}

.cal{position:relative;display:inline-block}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:500;
  font-size:clamp(12.5px,3.4vw,13.5px);letter-spacing:.005em;
  padding:12px 24px;border-radius:9px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  cursor:pointer;white-space:nowrap;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:transparent;color:var(--ink);transform:translateY(-1px)}
}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.cal__menu{
  position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);
  min-width:200px;z-index:20;
  background:var(--paper);
  border:1px solid var(--frame);
  border-radius:11px;
  box-shadow:0 14px 34px -10px var(--shadow);
  padding:6px;
  display:grid;
  animation:menuIn .22s ease both;
}
.cal__menu[hidden]{display:none}
/* åpner oppover hvis det ikke er plass under knappen */
.cal__menu.is-up{top:auto;bottom:calc(100% + 10px);animation-name:menuInUp}
@keyframes menuIn{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes menuInUp{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.cal__menu a{
  padding:10px 14px;text-decoration:none;color:var(--ink);
  font-size:14.5px;border-radius:7px;
}
.cal__menu a:focus-visible{background:var(--pill);outline:none}
@media (hover:hover) and (pointer:fine){
  .cal__menu a:hover{background:var(--pill)}
}

.rsvp{
  margin:0;max-width:48ch;
  font-size:clamp(10.5px,2.9vw,11px);line-height:1.75;
  letter-spacing:.01em;color:var(--ink-soft);
  /* uten fast linjebrudd deles setningen jevnt over linjene */
  text-wrap:balance;
}

.footnote{
  margin:clamp(22px,6vw,34px) 0 0;
  font-family:var(--script);
  font-size:clamp(20px,5.4vw,30px);line-height:1.3;
  color:var(--ink-soft);
  text-wrap:balance;
}

/* --- konfetti ---
   Lerretet ligger INNE i kortet, under .paper__inner. Det er med vilje:
   som fritt svevende overlegg over hele siden spiste Safari på iOS det
   første trykket på kalenderknappen, selv med pointer-events:none.
   Her er innholdet alltid over konfettien i stablingen, så trykk kan
   ikke havne feil.                                                    */
.konfetti{
  position:absolute;inset:0;z-index:1;pointer-events:none;
}

/* --- innfelling av innholdet --- */
.reveal{opacity:0;transform:translateY(14px);}
.letter.is-in .reveal{
  opacity:1;transform:none;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1);
}
.letter.is-in .reveal:nth-child(1){transition-delay:.05s}
.letter.is-in .reveal:nth-child(2){transition-delay:.16s}
.letter.is-in .reveal:nth-child(3){transition-delay:.27s}
.letter.is-in .reveal:nth-child(4){transition-delay:.36s}
.letter.is-in .reveal:nth-child(5){transition-delay:.44s}
.letter.is-in .reveal:nth-child(6){transition-delay:.52s}
.letter.is-in .reveal:nth-child(7){transition-delay:.60s}
.letter.is-in .reveal:nth-child(8){transition-delay:.68s}
.letter.is-in .reveal:nth-child(9){transition-delay:.78s}

.letter{opacity:0;transform:scale(.945);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.letter.is-in{opacity:1;transform:none}

/* --- veldig små skjermer --- */
@media (max-width:360px){
  .btn{padding:11px 18px;font-size:12.5px}
  .sprig{width:44px}
  .sprig--tl{top:13px;left:13px}
  .sprig--br{bottom:13px;right:13px}
  .eyebrow{font-size:40px}
}

/* --- store skjermer --- */
@media (min-width:900px){
  .envelope{--w:min(52vw,400px)}
  .scene__inner{gap:42px}
  .sprig--tl{top:24px;left:24px}
  .sprig--br{bottom:24px;right:24px}
}

/* --- redusert bevegelse --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .konfetti{display:none}
}

/* --- utskrift --- */
@media print{
  body{background:#fff}
  .scene,.actions{display:none !important}
  .letter{opacity:1;transform:none;min-height:auto}
  .paper{box-shadow:none;min-height:auto}
}