/* ---------------------------------------------------------------------
   Umschlag + Karte.
   Wird von /love und von der Live-Vorschau in /design benutzt.
   Alle Farben und Schriften kommen aus Custom Properties, die der Server
   (bzw. die Vorschau per JS) auf .scene setzt.
   --------------------------------------------------------------------- */

.scene{
  --paper:#FAF5F8;
  --paper-deep:#EFE6EC;
  --stage:#EFE7EC;
  --stage-deep:#E0D2DC;
  --card-bg:#FFFFFF;
  --card-ink:#3B3740;
  --card-font:Didot,"Bodoni MT",Georgia,serif;
  --card-size:13px;
  --card-style:italic;

  position:relative;
  width:min(300px,78vw);
  aspect-ratio:300/415;
  perspective:1500px;
  perspective-origin:50% 26%;
  cursor:pointer;
  flex:none;
}

.scene .back{
  position:absolute;inset:0;z-index:1;border-radius:3px;
  background:linear-gradient(168deg, var(--paper) 0%, var(--paper-deep) 100%);
  box-shadow:0 28px 52px -18px rgba(62,44,60,.42), 0 2px 5px rgba(62,44,60,.13);
}

.scene .card{
  position:absolute;left:6%;right:6%;top:6%;
  aspect-ratio:104/148;z-index:2;
  background:var(--card-bg);
  border-radius:2px;
  box-shadow:0 1px 2px rgba(62,44,60,.16);
  transform:translateY(0);
  transition:transform 1.5s cubic-bezier(.3,.85,.3,1), box-shadow 1.5s ease;
  display:flex;justify-content:center;
  overflow:hidden;
}
.scene .card-inner{
  padding:13% 12% 0;text-align:center;
  opacity:0;transition:opacity .85s ease .5s;
}
.scene .card-inner p{
  font-family:var(--card-font);
  font-style:var(--card-style);
  font-size:var(--card-size);
  line-height:1.65;
  color:var(--card-ink);
  margin:0;
  text-wrap:balance;
}
.scene .dot{
  width:3px;height:3px;border-radius:50%;
  background:var(--card-ink);opacity:.35;
  margin:16px auto;
}
.scene .dot[hidden]{display:none}

.scene .front{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:3px;overflow:hidden;
  background:linear-gradient(172deg, var(--paper) 0%, var(--paper-deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.scene .front::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(174deg, rgba(120,96,116,.16) 0%, rgba(120,96,116,0) 60%);
  clip-path:polygon(0 33%, 50% 67%, 100% 33%, 100% 100%, 0 100%);
}
.scene .front::after{
  content:"";position:absolute;left:0;right:0;top:0;height:34%;
  background:linear-gradient(to bottom, rgba(130,104,124,.12), transparent);
}

.scene .flap{
  position:absolute;left:0;right:0;top:0;height:67%;z-index:4;
  transform-origin:top center;transform:rotateX(0deg);
  transition:transform 1.05s cubic-bezier(.55,0,.3,1), z-index 0s linear .55s;
}
.scene .flap i{
  position:absolute;inset:0;display:block;
  background:linear-gradient(177deg, var(--paper) 0%, var(--paper-deep) 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  filter:drop-shadow(0 4px 5px rgba(94,70,90,.16));
}
.scene .monogram{
  position:absolute;top:32%;left:0;right:0;text-align:center;z-index:5;
  font-family:var(--card-font);font-size:25px;letter-spacing:.05em;
  color:rgba(124,98,120,.22);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
  pointer-events:none;
}

/* ------------------------------- Zustände ------------------------------- */

.scene.is-open .flap{transform:rotateX(177deg);z-index:1}
.scene.is-open .card{transform:translateY(-47%);box-shadow:0 20px 36px -14px rgba(62,44,60,.38)}
.scene.is-open .card-inner{opacity:1}

.scene.is-done .back,
.scene.is-done .front,
.scene.is-done .monogram{
  opacity:0;transform:translateY(16%);
  transition:opacity .9s ease, transform 1.1s ease;
}
.scene.is-done .flap{
  opacity:0;transform:rotateX(177deg) translateY(16%);
  transition:opacity .9s ease, transform 1.1s ease;
}

@media (prefers-reduced-motion: reduce){
  .scene .card,.scene .flap,.scene .card-inner,
  .scene .back,.scene .front,.scene .monogram{transition-duration:.01ms !important}
}