/* =========================================================================
   Isabella · Konfirmation — #envelope-intro
   Konvolut-introen. Ligger over sitet, indtil invitationen er blevet til hero.
   States (på <html data-state>): closed → opening → reveal → invitation
   ========================================================================= */

.intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  touch-action: none;        /* ingen utilsigtet scroll/zoom under animationen */
  transition: opacity var(--t-reduced-fade) var(--ease-soft);
}

.no-js .intro,
html[data-settled] .intro { display: none; }

/* Reduceret bevægelse: introen toner blot ud */
html[data-state="reduced"] .intro { opacity: 0; }

/* =========================================================================
   Scene
   ========================================================================= */

.scene {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.scene__inner {
  animation: scene-in calc(var(--t-intro) * var(--tempo)) var(--ease-soft) calc(150ms * var(--tempo)) both;
}

@keyframes scene-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}


/* ---------- Hygge: tørrede blomster og kronblade ---------- */

.scene__inner { position: relative; }

.props {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition:
    opacity   calc(var(--t-present) * .7 * var(--tempo)) var(--ease-soft),
    transform calc(var(--t-present) * var(--tempo)) var(--ease-paper);
}
.props svg { display: block; width: 100%; height: 100%; overflow: visible; }

[data-phase="present"] .props,
[data-state="invitation"] .props { opacity: 0; transform: scale(.96); }

.prop-stems path { fill: none; stroke: var(--c-stem); stroke-width: 1.1; stroke-linecap: round; }
.prop-leaves path { fill: var(--c-sage); fill-opacity: .55; stroke: var(--c-sage-deep); stroke-width: .7; }
.prop-blooms circle { fill: var(--c-cream); stroke: #d9c6b4; stroke-width: .6; }
.prop-rose ellipse { fill: var(--c-blush); stroke: var(--c-blush-deep); stroke-width: .7; stroke-opacity: .7; }
.prop-rose ellipse:nth-child(2) { fill: #dcaea3; }
.prop-rose ellipse:nth-child(3) { fill: #d4a095; }
.prop-rose ellipse:nth-child(4) { fill: #c98e82; }
.rose-line { fill: none; stroke: #b27a6e; stroke-width: .8; }
.prop-petal { fill: var(--c-blush); stroke: var(--c-blush-deep); stroke-width: .5; stroke-opacity: .5; }
.prop-petal--1 { fill: #EBCBC2; }
.prop-petal--2 { fill: var(--c-cream); stroke: #dcc6b8; }

@media (max-width: 600px) {
  .props { transform-origin: 50% 50%; }
}

/* =========================================================================
   Konvolut
   ========================================================================= */

.envelope {
  position: relative;
  z-index: 1;
  width: var(--env-w);
  aspect-ratio: 600 / 420;
  transition:
    transform calc(var(--t-extract) * var(--tempo)) var(--ease-extract),
    opacity   calc(var(--t-extract) * var(--tempo)) var(--ease-soft),
    filter    calc(var(--t-extract) * var(--tempo)) var(--ease-soft);
}

.envelope :is(.envelope__back, .envelope__pocket, .flap__face, .seal) > svg { display: block; width: 100%; height: 100%; }

/* REVEAL · extract — konvolutten glider ned, mens kortet trækkes op */
[data-state="reveal"] .envelope { transform: translateY(44%); }

/* REVEAL · present + INVITATION — konvolutten træder i baggrunden */
[data-phase="present"] .envelope,
[data-state="invitation"] .envelope {
  transform: translateY(80%) scale(.9);
  opacity: 0;
  filter: blur(2px);
  transition:
    transform calc(var(--t-present) * var(--tempo)) var(--ease-paper),
    opacity   calc(var(--t-present) * .8 * var(--tempo)) var(--ease-soft),
    filter    calc(var(--t-present) * var(--tempo)) var(--ease-soft);
}

/* ---------- Tekst omkring konvolutten ---------- */

.envelope__eyebrow {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + clamp(1.6rem, 4.5vh, 2.8rem));
  margin: 0;
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: .02em;
  color: var(--c-ink-soft);
  transition: opacity 700ms var(--ease-soft);
}

.envelope__prompt {
  position: absolute;
  top: calc(100% + clamp(1.8rem, 5vh, 3rem));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  font: 500 11px/1 var(--f-sans);
  letter-spacing: .34em;
  padding-left: .34em;
  text-transform: uppercase;
  color: var(--c-ink);
  animation: prompt-breathe 3.6s var(--ease-soft) calc(var(--t-intro) * var(--tempo)) infinite;
  transition: opacity 600ms var(--ease-soft);
}

.envelope__prompt::before,
.envelope__prompt::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .4;
  transition: width 700ms var(--ease-paper), opacity 700ms var(--ease-paper);
}

@keyframes prompt-breathe {
  0%, 100% { opacity: .82; }
  50%      { opacity: .45; }
}

[data-state]:not([data-state="closed"]) .envelope__eyebrow,
[data-state]:not([data-state="closed"]) .envelope__prompt {
  opacity: 0;
  animation: none;
}

/* ---------- Lag ---------- */

.envelope__back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(60, 38, 28, .10),
    0 10px 18px -8px rgba(60, 38, 28, .22),
    0 34px 60px -24px rgba(60, 38, 28, .34),
    0 60px 100px -40px rgba(60, 38, 28, .22);
  transition: box-shadow 700ms var(--ease-soft);
}

.envelope .card {
  position: absolute;
  left: 5%;
  top: 9%;
  width: 90%;
  height: 84%;
  z-index: 3;
  transition: transform calc(var(--t-extract) * var(--tempo)) var(--ease-extract),
              box-shadow calc(var(--t-extract) * var(--tempo)) var(--ease-soft);
}

[data-state="reveal"] .envelope .card {
  transform: translateY(-114%);
  box-shadow:
    0 0 0 1px rgba(90, 60, 40, .05),
    0 2px 3px rgba(60, 38, 28, .10),
    0 14px 28px -12px rgba(60, 38, 28, .28);
}

.envelope__pocket {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.envelope__flap {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 64.3%;           /* 270 / 420 */
  z-index: 5;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transform: perspective(var(--flap-perspective)) rotateX(0deg);
  transition: transform 900ms var(--ease-soft);
}

/* Når flappen passerer 90° lægger JS den bag kortet */
.envelope.is-flap-behind .envelope__flap { z-index: 2; }

.envelope__hit {
  position: absolute;
  inset: 0;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.envelope__hit:disabled { cursor: default; }

.envelope__hit:focus { outline: none; }
.envelope__hit:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 12px; }

/* Hover — flappen løfter sig en anelse: en taktil invitation til at åbne */
@media (hover: hover) {
  [data-state="closed"] .envelope:hover .envelope__flap {
    transform: perspective(var(--flap-perspective)) rotateX(6deg);
  }
  [data-state="closed"] .envelope:hover .envelope__back {
    box-shadow:
      0 1px 1px rgba(60, 38, 28, .10),
      0 12px 22px -8px rgba(60, 38, 28, .24),
      0 40px 70px -24px rgba(60, 38, 28, .38),
      0 70px 110px -40px rgba(60, 38, 28, .24);
  }
  [data-state="closed"] .envelope:hover .envelope__prompt::before,
  [data-state="closed"] .envelope:hover .envelope__prompt::after {
    width: 44px;
    opacity: .7;
  }
}

/* ---------- Flappens to sider ---------- */

.flap__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: rotateX(0deg);
}

/* rotateY (ikke rotateX): så peger spidsen væk fra folden, når flappen er åben */
.flap__face--back { transform: rotateY(180deg); }
.flap__face--back svg { filter: drop-shadow(0 -2px 5px rgba(60, 38, 28, .12)); }

/* OPENING — flappen løftes efter lakseglet */
[data-state="opening"] .envelope__flap,
[data-state="reveal"] .envelope__flap,
[data-state="invitation"] .envelope__flap {
  transform: perspective(var(--flap-perspective)) rotateX(180deg);
  transition: transform calc(var(--t-flap) * var(--tempo)) var(--ease-flap) calc(var(--t-seal) * .6 * var(--tempo));
}

/* Lys/skygge på flappen, mens den drejer */
.flap-shade { fill: #5a3527; opacity: 0; }
.flap-shade--back { opacity: .3; }

[data-state]:not([data-state="closed"]) .flap-shade--front {
  opacity: .16;
  transition: opacity calc(var(--t-flap) * .5 * var(--tempo)) var(--ease-soft) calc(var(--t-seal) * .6 * var(--tempo));
}
[data-state]:not([data-state="closed"]) .flap-shade--back {
  opacity: 0;
  transition: opacity calc(var(--t-flap) * .5 * var(--tempo)) var(--ease-soft) calc((var(--t-seal) * .6 + var(--t-flap) * .5) * var(--tempo));
}

/* ---------- Laksegl ---------- */

.seal {
  position: absolute;
  left: 50%;
  top: 85.6%;
  width: 13%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgba(90, 60, 20, .35)) drop-shadow(0 4px 7px rgba(90, 60, 20, .2));
  transition:
    opacity   calc(var(--t-seal) * var(--tempo)) var(--ease-seal),
    transform calc(var(--t-seal) * var(--tempo)) var(--ease-seal);
}

[data-state]:not([data-state="closed"]) .seal {
  opacity: 0;
  transform: translate(-50%, -70%) scale(1.05);
}

.seal-well       { fill: var(--c-seal-lo); opacity: .08; }
.seal-ring       { fill: none; stroke: var(--c-seal-lo); stroke-width: 1.3; opacity: .45; }
.seal-ring--hi   { stroke: var(--c-seal-hi); opacity: .8; }
.seal-sprig      { fill: none; stroke: var(--c-seal-ink); stroke-width: 1.5; stroke-linecap: round; opacity: .8; }
.seal-sprig--hi  { stroke: var(--c-seal-hi); opacity: .9; }
.seal-mono {
  font-family: var(--f-display);
  font-size: 34px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--c-seal-ink);
  opacity: .9;
}
.seal-mono--hi   { fill: var(--c-seal-hi); opacity: .95; }
.seal-gloss      { fill: #fff; opacity: .28; }

/* ---------- SVG-farver (tokens → SVG) ---------- */

.stop-env        { stop-color: var(--c-env); }
.stop-env-light  { stop-color: var(--c-env-light); }
.stop-env-shade  { stop-color: var(--c-env-shade); }
.stop-env-deep   { stop-color: var(--c-env-deep); }
.stop-seal       { stop-color: var(--c-seal); }
.stop-seal-hi    { stop-color: var(--c-seal-hi); }
.stop-seal-lo    { stop-color: var(--c-seal-lo); }

.env-inner       { fill: var(--c-env-inner); }
.env-inner-light { fill: var(--c-env-shade); }
.liner-fill      { fill: var(--c-blush); }
.liner-petal     { fill: var(--c-cream); }
.liner-petal--rose { fill: var(--c-blush-deep); opacity: .75; }
.liner-heart     { fill: var(--c-seal); }
.liner-leaf      { fill: var(--c-sage); opacity: .85; }
.liner-dot       { fill: var(--c-cream); opacity: .8; }

/* Bølgekant, perforering og blindpræg */
.perf            { fill: none; stroke: #7a5646; stroke-opacity: .32; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 0 6.5; }
.perf--hi        { stroke: #fff; stroke-opacity: .8; }
.emb use         { fill: none; stroke-width: 1.05; stroke-linecap: round; stroke-linejoin: round; }
.emb-lo          { stroke: #7a5646; opacity: .2; }
.emb-hi          { stroke: #fff; opacity: .7; }
.emb-base        { stroke: var(--c-env); opacity: .9; }

.edge            { fill: none; stroke: #fff; stroke-width: 1; stroke-opacity: .55; vector-effect: non-scaling-stroke; }
.edge--strong    { stroke-opacity: .8; }

/* ---------- Kortet på stage (efter det er trukket ud) ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.card--detached {
  --card-dur: calc(var(--t-present) * var(--tempo));
  position: absolute;
  pointer-events: auto;
  transition:
    left          var(--card-dur) var(--ease-paper),
    top           var(--card-dur) var(--ease-paper),
    width         var(--card-dur) var(--ease-paper),
    height        var(--card-dur) var(--ease-paper),
    border-radius var(--card-dur) var(--ease-paper),
    box-shadow    var(--card-dur) var(--ease-paper);
}

[data-phase="present"] .card--detached {
  box-shadow:
    0 0 0 1px rgba(90, 60, 40, .05),
    0 2px 4px rgba(60, 38, 28, .07),
    0 20px 40px -14px rgba(60, 38, 28, .24),
    0 56px 96px -32px rgba(60, 38, 28, .28);
}

[data-state="invitation"] .card--detached {
  --card-dur: calc(var(--t-expand) * var(--tempo));
  border-radius: 0;
  box-shadow:
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent,
    0 0 0 0 transparent;
}

@media (prefers-reduced-motion: reduce) {
  .envelope__prompt,
  .light__leaves,
  .light__glow { animation: none; }
}