/* agent FINALE: the birthday cake (js/scenes/forever.js) and the hidden hearts (js/hearts.js) */

/* ---- the cake ---- */
.fcake { left: 73%; bottom: calc(var(--feet) - var(--u) * 1); width: calc(var(--u) * 20); transform: translateX(-50%); transition: filter .6s; }
.fcake svg { width: 100%; height: auto; display: block; }
.fcake .ffl { animation: fFlicker .5s ease-in-out infinite alternate; transition: transform .25s ease-in var(--d, 0ms), opacity .25s ease-in var(--d, 0ms); }
.fcake .fcdl:nth-child(3n) .ffl { animation-duration: .43s; }
.fcake .fcdl:nth-child(3n+1) .ffl { animation-duration: .57s; animation-delay: -.2s; }
@keyframes fFlicker { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.88, 1.12) rotate(3deg); } }
.fcake .fcdl.out .ffl { opacity: 0; transform: scale(.2) translateX(6px); animation: none; }
.fcake .fcdl.out .fsm { animation: fSmoke 1.6s ease-out var(--d, 0ms) forwards; }
@keyframes fSmoke { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .85; } 100% { opacity: 0; transform: translateY(-22px) translateX(6px); } }
.fcake .fglow { transition: opacity .6s; }
.fcake.dark .fglow { opacity: 0; }
.fcake.dark { filter: brightness(.82); }

/* ---- hidden hearts ---- */
#hidden-hearts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.hh { position: absolute; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); transform: translate(-50%, -50%);
  padding: 14px; margin: -14px; box-sizing: content-box; opacity: 0; transition: opacity .8s; }
.hh svg { width: 100%; height: 100%; display: block; overflow: visible; animation: hhShimmer 3.4s ease-in-out infinite; }
.hh .hh-glint { animation: hhGlint 3.4s ease-in-out infinite; transform-origin: 70% 30%; transform-box: fill-box; }
@keyframes hhShimmer { 0%, 70%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 120, 170, 0)); }
  80% { transform: scale(1.18); filter: drop-shadow(0 0 5px rgba(255, 150, 190, .9)); } }
@keyframes hhGlint { 0%, 74%, 100% { opacity: 0; transform: scale(.3); } 80% { opacity: 1; transform: scale(1); } 88% { opacity: 0; transform: scale(.4) rotate(45deg); } }
.hh.found { animation: hhPop .7s ease-out forwards; pointer-events: none !important; }
@keyframes hhPop { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(2.2); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(2.6); opacity: 0; } }

.hh-count { position: absolute; left: 50%; bottom: calc(var(--u) * 10); transform: translate(-50%, -8px); opacity: 0; transition: opacity .4s, transform .4s;
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(40, 10, 40, .2);
  font: 600 calc(var(--u) * 1.8)/1 Fredoka, sans-serif; color: #c2406e; white-space: nowrap; z-index: 6; }
.hh-count.on { opacity: 1; transform: translate(-50%, 0); }

/* the secret letter */
.hh-letter-wrap { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(20, 8, 30, .55);
  opacity: 0; transition: opacity .6s; pointer-events: none; }
.hh-letter-wrap.on { opacity: 1; pointer-events: auto; }
.hh-letter { width: min(88vw, 520px); max-height: 86vh; overflow: auto; box-sizing: border-box; padding: 34px 34px 26px; border-radius: 22px;
  background: linear-gradient(160deg, #fffaf3, #ffeef4); box-shadow: 0 20px 60px rgba(40, 0, 30, .45);
  transform: translateY(20px) scale(.96); transition: transform .6s cubic-bezier(.2, .9, .3, 1.2); text-align: center; color: #5a3a48; }
.hh-letter-wrap.on .hh-letter { transform: none; }
.hh-letter h2 { margin: 0 0 6px; font: italic 700 clamp(24px, 4vw, 32px)/1.15 'Playfair Display', Georgia, serif; color: #c2406e; }
.hh-letter .hh-sub { margin: 0 0 18px; font: 500 14px/1.3 Fredoka, sans-serif; color: #b07a90; }
.hh-letter p.hh-body { margin: 0 0 12px; font: 400 clamp(15px, 2.2vw, 17px)/1.6 Fredoka, sans-serif; text-align: left; }
.hh-letter .hh-sign { margin: 14px 0 20px; font: 700 26px/1 'Dancing Script', cursive; color: #c2406e; text-align: right; }
.hh-letter button { border: 0; cursor: pointer; padding: 10px 22px; border-radius: 999px; background: #ff7aa8; color: #fff; font: 600 15px/1 Fredoka, sans-serif; box-shadow: 0 6px 16px rgba(255, 90, 140, .35); }
.hh-letter button:focus-visible { outline: 3px solid #ffd36b; outline-offset: 3px; }
.hh-envelope { position: absolute; left: calc(var(--u) * 3); bottom: calc(var(--u) * 3); z-index: 6; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4);
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(40, 10, 40, .25); cursor: pointer;
  font-size: calc(var(--u) * 3.2); line-height: 1; opacity: 0; pointer-events: none; transition: opacity .5s; animation: hhEnv 2.4s ease-in-out infinite; }
.hh-envelope.on { opacity: 1; pointer-events: auto; }
@keyframes hhEnv { 50% { transform: translateY(-4px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .hh svg, .hh .hh-glint, .hh-envelope, .fcake .ffl { animation: none; } }