/* Save the date · Demi & George — lichte variant, envelop A, kartelzegel */

@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(../fonts/cormorant-garamond-italic.woff2) format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Great Vibes';src:url(../fonts/great-vibes.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url(../fonts/jost.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

html,body{margin:0;height:100%;background:#f8f6f2}
body{overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
[hidden]{display:none!important}
img{border:0}
a{color:#5a514b}a:hover{color:#3f3a36}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid #ad7a7d;outline-offset:3px}

.proto{position:fixed;inset:0;overflow:hidden;font-family:'Cormorant Garamond',Georgia,serif;color:#5a514b;background:#f8f6f2}
.linen{background-color:#f8f6f2;background-image:url(../img/linnen.jpg);background-size:128px 128px}
.folds{position:absolute;inset:0;opacity:.5;background-image:url(../img/plooien.jpg);background-size:cover;background-position:center;mix-blend-mode:multiply}
.paper{background-color:#fefcf8;background-image:url(../img/papier.jpg);background-size:170px 170px}
.page-bg{background-color:#fbf9f5;background-image:url(../img/pagina.jpg);background-size:170px 170px}
.sheet{position:relative;width:100%;margin:0 auto;background-color:#fbf9f5;background-image:url(../img/pagina.jpg);background-size:170px 170px}

/* page (scrolls inside the screen) */
.page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;opacity:0;transform:scale(.985);transition:opacity .9s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);pointer-events:none;will-change:opacity,transform}
.page:focus{outline:none}
.st-open .page{opacity:1;transform:none;pointer-events:auto}

/* envelope screen */
.env-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s ease;will-change:opacity}
.st-open .env-screen{opacity:0;pointer-events:none}
.hint{transition:opacity .4s ease}
.st-opening .hint,.st-open .hint{opacity:0}

/* envelope: fixed artwork, scaled per screen size */
.env-box{position:relative;width:330px;height:230px}
.env3d{position:absolute;left:0;top:0;width:330px;height:230px;perspective:1100px;transform-origin:0 0}
.flap{position:absolute;left:0;top:0;width:330px;height:168px;transform-origin:50% 0;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.45,0,.25,1) .25s,z-index 0s linear .9s;z-index:4;will-change:transform}
.face{position:absolute;left:0;top:0;width:330px;height:168px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face-back{transform:rotateX(180deg)}
.st-opening .flap,.st-open .flap{transform:rotateX(180deg);z-index:1}
.card-clip{position:absolute;left:15px;top:-260px;width:300px;height:490px;overflow:hidden;z-index:2}
.card-rise{position:absolute;left:0;top:280px;width:300px;height:340px;transition:transform 1.2s cubic-bezier(.3,.7,.2,1) 2.7s;will-change:transform}
.st-opening .card-rise,.st-open .card-rise{transform:translateY(-200px)}
.pocket{position:absolute;left:0;top:0;width:330px;height:230px;z-index:3}

/* seal: 66 px scalloped sticker inside an 82 px image box */
.seal-btn{position:absolute;left:124px;top:93px;width:82px;height:82px;border:0;padding:0;background:transparent;cursor:pointer;border-radius:50%;transition:transform .2s ease}
.seal-btn:active{transform:scale(.95)}
.seal-ring{position:absolute;left:125px;top:94px;width:80px;height:80px;border-radius:50%;border:1.5px solid rgba(173,122,125,.55);box-sizing:border-box;animation:sealPulse 2.6s ease-out infinite;pointer-events:none}
@keyframes sealPulse{0%{transform:scale(.92);opacity:.6}75%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}
.st-opening .seal-ring,.st-open .seal-ring{display:none}

/* details */
.pearls{display:flex;align-items:center;gap:6px;margin:24px 0 0}
.pearls span{display:block;border-radius:50%;background:#ad7a7d}
.pearls span:nth-child(1),.pearls span:nth-child(5){width:2.5px;height:2.5px;opacity:.5}
.pearls span:nth-child(2),.pearls span:nth-child(4){width:3px;height:3px;opacity:.6}
.pearls span:nth-child(3){width:4px;height:4px;opacity:.7}
.paint img.frame{position:absolute;left:0;top:0;width:100%;height:100%;mix-blend-mode:darken}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cue-line{animation:cue 2.4s ease-in-out infinite}
@keyframes fall{0%{transform:translate(0,-20px) rotate(0deg);opacity:0}12%{opacity:.8}88%{opacity:.8}100%{transform:translate(-46px,360px) rotate(230deg);opacity:0}}
.fall1{animation:fall 11s linear infinite}
.fall2{animation:fall 13s linear -4s infinite}
.fall3{animation:fall 12s linear -8s infinite}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.cd-num{font-weight:500;line-height:1;color:#4f4742;font-variant-numeric:tabular-nums}
.cd-unit{font-family:Jost,system-ui,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#756c66}
.cal-btn{margin-top:30px;display:flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border:1px solid #8c827b;border-radius:26px;font-family:Jost,system-ui,sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#4f4742;background:rgba(255,254,251,.75)}
.cal-btn:hover{border-color:#ad7a7d}
.cal-alt{margin-top:6px;display:flex;align-items:center;height:44px;padding:0 10px;font-family:Jost,system-ui,sans-serif;font-size:12px;letter-spacing:.06em;color:#6c625c}
.replay-text{margin-top:8px;height:44px;padding:0 18px;border:0;background:transparent;font-family:Jost,system-ui,sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#756c66;cursor:pointer;text-decoration:underline;text-underline-offset:5px}

/* language switch */
.langs{position:absolute;top:0;right:0;padding:14px 14px 0;padding-top:max(14px,env(safe-area-inset-top));display:flex;align-items:center;z-index:10;font-family:Jost,system-ui,sans-serif;font-size:12px;letter-spacing:.14em}
.lang-btn{min-width:44px;height:44px;border:0;background:transparent;font:inherit;letter-spacing:inherit;cursor:pointer;color:#756c66;font-weight:400;text-underline-offset:6px;text-decoration-color:#c9a3a5}
.lang-btn[aria-pressed="true"]{color:#4f4742;font-weight:500;text-decoration:underline}

/* type scale */
.for-you{font-size:36px}
.names{font-size:76px}
.date-big{font-size:32px}
.caption{font-size:21px}
.cd-num{font-size:44px}
.cd-grid{width:320px}

/* tablet and up: the page lies on the linen, the envelope grows */
@media (min-width:700px){
  .page-bg{background-color:#f8f6f2;background-image:url(../img/linnen.jpg);background-size:128px 128px}
  .sheet{max-width:640px;box-shadow:0 0 0 1px rgba(80,72,66,.05),0 24px 60px rgba(74,58,44,.10)}
  .env-box{width:413px;height:288px}
  .env3d{transform:scale(1.25)}
  .for-you{font-size:42px}
  .names{font-size:88px}
  .date-big{font-size:36px}
  .caption{font-size:23px}
  .cd-num{font-size:52px}
  .cd-grid{width:420px}
}
/* desktop */
@media (min-width:1100px){
  .sheet{max-width:720px}
  .env-box{width:462px;height:322px}
  .env3d{transform:scale(1.4)}
}
/* short landscape phones: keep the envelope on screen */
@media (max-height:560px) and (orientation:landscape){
  .for-you{margin-bottom:20px!important}
  .env-screen .hint:last-child{margin-top:20px!important}
}