/* Brief-Moment (A-20261003-41) - Werte, Kurven und Taktung 1:1 aus der freigegebenen Vorlage
   brief-moment/prototyp.html ("Szene 2: der Brief"). Nur Namen mit hh-brief- davor, damit nichts mit der Seite kollidiert. */
.hh-brief{
  --b-env:#FFFFFF; --b-env2:#FAF8F6; --b-env-in:#E9E5E0; --b-flap:#FDFCFB; --b-flap-in:#EFEBE7;
  --b-letter:#FFFFFF; --b-letter-line:#E9E6E2; --b-heart:#9E3A49;
  --b-sh-d:rgba(150,138,126,.32); --b-sh-l:rgba(255,255,255,.95);
  position:fixed; inset:0; z-index:9000; background:var(--bg,#F7F6F4); color:var(--ink,#2F2A2A);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;
  opacity:0; visibility:hidden; overflow:hidden;
  transition:opacity .65s ease, visibility 0s linear .65s;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hh-brief{
    --b-env:#222428; --b-env2:#262A2E; --b-env-in:#1B1C20; --b-flap:#24262A; --b-flap-in:#1F2024;
    --b-letter:#2E3035; --b-letter-line:#383A40; --b-heart:#D08A94;
    --b-sh-d:rgba(0,0,0,.45); --b-sh-l:rgba(255,255,255,.04);
  }
}
:root[data-theme="dark"] .hh-brief{
  --b-env:#222428; --b-env2:#262A2E; --b-env-in:#1B1C20; --b-flap:#24262A; --b-flap-in:#1F2024;
  --b-letter:#2E3035; --b-letter-line:#383A40; --b-heart:#D08A94;
  --b-sh-d:rgba(0,0,0,.45); --b-sh-l:rgba(255,255,255,.04);
}
.hh-brief.an{opacity:1; visibility:visible; transition-delay:0s}
.hh-brief-szene{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:scale(.96); transition:transform .9s cubic-bezier(.22,1,.36,1);
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
.hh-brief.an .hh-brief-szene{transform:none}
.hh-brief-glow{
  position:absolute; left:50%; top:50%; width:420px; height:420px; margin:-230px 0 0 -210px; border-radius:50%;
  background:radial-gradient(closest-side, var(--b-heart), transparent 70%);
  opacity:0; transition:opacity 2.2s ease .6s; pointer-events:none;
}
.hh-brief.offen .hh-brief-glow{opacity:.16}
.hh-brief-halter{margin-top:96px; position:relative}
.hh-brief-halter.landet{animation:hhBriefLanden 1.2s cubic-bezier(.22,1,.36,1) both}
@keyframes hhBriefLanden{from{opacity:0; transform:translateY(46px) scale(.9)}}
.hh-brief-env{
  position:relative; display:block; width:300px; height:196px; padding:0; border:0; background:none; cursor:pointer; color:inherit; font:inherit;
  -webkit-tap-highlight-color:transparent; animation:hhBriefSchweben 3s ease-in-out infinite;
}
.hh-brief-env:focus-visible{outline:2px solid var(--b-heart); outline-offset:6px; border-radius:20px}
.hh-brief-env.open{animation:none}
/* Atmen (Heidi 05.10., A-20261005-07): der geschlossene Brief wird sanft groesser und kleiner - zum Antippen einladend */
@keyframes hhBriefSchweben{0%,100%{transform:scale(1)} 50%{transform:scale(1.04)}}
.hh-brief-env > span{position:absolute; display:block}
.hh-brief-back{
  inset:0; border-radius:18px; background:var(--b-env-in); z-index:1;
  box-shadow:12px 16px 34px var(--b-sh-d), -8px -8px 20px var(--b-sh-l);
}
.hh-brief-env .hh-brief-flap{
  left:0; top:0; width:100%; height:58%; z-index:5;
  transform-origin:50% 0; transform:perspective(900px) rotateX(0deg);
  filter:drop-shadow(0 3px 4px var(--b-sh-d));
}
.hh-brief-flap i{
  position:absolute; inset:0; background:var(--b-flap);
  clip-path:polygon(0 0,100% 0,50% 100%); border-radius:18px 18px 0 0;
}
.hh-brief-env .hh-brief-karte{
  left:22px; right:22px; top:12px; height:168px; z-index:3;
  border-radius:12px; background:var(--b-letter); border:1px solid var(--b-letter-line);
  box-shadow:0 8px 18px var(--b-sh-d);
}
.hh-brief-hand{
  display:block; padding-top:16px; text-align:center; color:var(--ink,#2F2A2A);
  font-family:'Sacramento','Snell Roundhand','Apple Chancery',cursive; font-size:36px; line-height:1.22; font-weight:400;
}
.hh-brief-hand .ln{display:block; padding:0 .3em; clip-path:inset(-10% 100% -10% 0)}
.hh-brief-env .hh-brief-vorn{inset:0; z-index:4}
.hh-brief-vorn i{position:absolute; inset:0}
.hh-brief-vorn .seiten{background:var(--b-env); border-radius:18px; clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%)}
.hh-brief-vorn .unten{position:absolute; inset:0; filter:drop-shadow(0 -2px 5px var(--b-sh-d))}
.hh-brief-vorn .unten i{background:var(--b-env2); border-radius:0 0 18px 18px; clip-path:polygon(0 100%,50% 50%,100% 100%)}
.hh-brief-env .hh-brief-herz{left:50%; top:100px; width:30px; height:28px; margin:-14px 0 0 -15px; z-index:6}
.hh-brief-herz svg{display:block; width:100%; height:100%; fill:var(--b-heart); animation:hhBriefPuls 1.7s ease-in-out infinite}
@keyframes hhBriefPuls{50%{transform:scale(1.14)}}

/* Oeffnen */
.hh-brief-env.open .hh-brief-flap{animation:hhBriefLasche .95s linear forwards}
.hh-brief-env.open .hh-brief-flap i{animation:hhBriefLascheTon .95s linear forwards}
@keyframes hhBriefLasche{
  0%{transform:perspective(900px) rotateX(0deg); z-index:5}
  18%{transform:perspective(900px) rotateX(18deg)}
  34%{transform:perspective(900px) rotateX(55deg)}
  49%{z-index:5}
  50%{transform:perspective(900px) rotateX(100deg); z-index:2}
  66%{transform:perspective(900px) rotateX(140deg)}
  82%{transform:perspective(900px) rotateX(166deg)}
  100%{transform:perspective(900px) rotateX(180deg); z-index:2}
}
@keyframes hhBriefLascheTon{0%,49%{background:var(--b-flap)} 50%,100%{background:var(--b-flap-in)}}
.hh-brief-env.open .hh-brief-herz{animation:hhBriefHerzHoch .95s linear forwards}
.hh-brief-env.open .hh-brief-herz svg{animation:hhBriefPochen .9s ease-in-out 3.1s 1}
@keyframes hhBriefHerzHoch{
  0%{transform:translateY(0) scaleY(1)}
  18%{transform:translateY(-5px) scaleY(.95)}
  34%{transform:translateY(-43px) scaleY(.57)}
  50%{transform:translateY(-117px) scaleY(.17)}
  66%{transform:translateY(-177px) scaleY(.77)}
  82%{transform:translateY(-197px) scaleY(.97)}
  100%{transform:translateY(-200px) scaleY(1)}
}
@keyframes hhBriefPochen{25%{transform:scale(1.32)} 55%{transform:scale(.95)} 75%{transform:scale(1.06)}}
.hh-brief-env.open .hh-brief-karte{animation:hhBriefKarte 1.35s cubic-bezier(.22,1,.36,1) .65s forwards}
@keyframes hhBriefKarte{to{transform:translateY(-92px)}}
.hh-brief-env.open .l1{animation:hhBriefSchreiben .75s cubic-bezier(.4,0,.2,1) 1.55s forwards}
.hh-brief-env.open .l2{animation:hhBriefSchreiben .85s cubic-bezier(.4,0,.2,1) 2.25s forwards}
@keyframes hhBriefSchreiben{to{clip-path:inset(-10% 0 -10% 0)}}
.hh-brief-hinweis{margin:40px 0 0; font-size:13.5px; letter-spacing:.02em; color:var(--muted,#756E6B); opacity:0;
  animation:hhBriefHinweisRein .8s ease-out 1.4s forwards, hhBriefAtmen 3s ease-in-out 2.2s infinite; transition:opacity .3s}
@keyframes hhBriefHinweisRein{from{opacity:0; transform:translateY(4px)} to{opacity:.85; transform:none}}
@keyframes hhBriefAtmen{0%,100%{opacity:.85} 50%{opacity:.5}}
.hh-brief.offen .hh-brief-hinweis{opacity:0; animation:none}
/* Unter dem Brief wartende Antworten - erscheinen erst nach dem Uebergang (aufbluehen) */
.mrow.hh-brief-wartet{visibility:hidden}

@media (prefers-reduced-motion: reduce){
  .hh-brief-env, .hh-brief-herz svg, .hh-brief-hinweis{animation:none}
  .hh-brief-hinweis{opacity:.85}
  .hh-brief-halter.landet{animation:none}
  .hh-brief-env.open .hh-brief-flap, .hh-brief-env.open .hh-brief-flap i, .hh-brief-env.open .hh-brief-herz,
  .hh-brief-env.open .hh-brief-karte, .hh-brief-env.open .l1, .hh-brief-env.open .l2{animation-duration:.01s; animation-delay:0s}
  .hh-brief-env.open .hh-brief-herz svg{animation:none}
  .hh-brief, .hh-brief-szene, .hh-brief-glow{transition-duration:.01s}
  /* Die Seite schaltet hier alle Animationen ab - der offene Brief steht deshalb als fester Endzustand da. */
  .hh-brief-env.open .hh-brief-flap{transform:perspective(900px) rotateX(180deg); z-index:2}
  .hh-brief-env.open .hh-brief-flap i{background:var(--b-flap-in)}
  .hh-brief-env.open .hh-brief-herz{transform:translateY(-200px)}
  .hh-brief-env.open .hh-brief-karte{transform:translateY(-92px)}
  .hh-brief-env.open .ln{clip-path:inset(-10% 0 -10% 0)}
}