/* HIMH drop-in (owner 2026-09-19): the melting cyborg leans out of the top right corner of Music, slows down
   as the hand settles, presents the heart; a sprayed arrow and call-out drop in below. Runs once on its own
   clock, never on scroll. The black video background is removed by screen blending on the dark page. */
.himh-drop {
  position: absolute; z-index: 7; top: 0; right: 0; width: min(16vw, calc(46dvh * .6712)); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s;
}
.himh-drop[data-state="playing"], .himh-drop[data-state="final"] { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.himh-drop__stage {
  position: relative; aspect-ratio: 784 / 1168; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000 78%, transparent 99%), linear-gradient(90deg, transparent 0, #000 16%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 78%, transparent 99%), linear-gradient(90deg, transparent 0, #000 16%); mask-composite: intersect;
}
.himh-drop__stage video, .himh-drop__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Call-out: stacked, left of the heart, its arrow runs into the heart (owner 2026-09-19). */
.himh-drop__call {
  position: absolute; top: 40%; right: 99%; width: 80%; aspect-ratio: 1000 / 880; display: block; color: var(--pink, #ff0090);
  pointer-events: none; opacity: 0; transform: translateY(-70px) rotate(-7deg) scale(1.18); text-decoration: none;
}
/* The heart is the carrying object: its region of the final frame pumps (claws included) and flares; the hotspot routes to the playlist. */
.himh-drop__pulse {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; background: url('assets/himh/himh-final.webp?v=magenta1') center / 100% 100% no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 33% 25% at 21% 64%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 33% 25% at 21% 64%, #000 58%, transparent 100%);
  transform-origin: 20% 67%;
}
.himh-drop[data-state="final"] .himh-drop__pulse { animation: himh-heartbeat 1.5s ease-in-out .3s infinite; }
.himh-drop__heart { position: absolute; left: 0; top: 36%; width: 47%; height: 49%; border-radius: 46%; pointer-events: none; cursor: pointer; }
.himh-drop.is-calling .himh-drop__heart { pointer-events: auto; }
.himh-drop__heart:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.himh-chip { display: none; }
@keyframes himh-heartbeat {
  0%, 100% { opacity: 0; transform: scale(1); filter: brightness(1); }
  12% { opacity: 1; transform: scale(1.075); filter: brightness(1.35) saturate(1.2); }
  24% { opacity: 1; transform: scale(1.01); filter: brightness(1.05); }
  36% { opacity: 1; transform: scale(1.05); filter: brightness(1.22) saturate(1.1); }
  56% { opacity: .6; transform: scale(1); filter: brightness(1); }
}
.himh-drop__call[href] { cursor: pointer; }
.himh-drop.is-calling .himh-drop__call { pointer-events: auto; opacity: 1; transform: none; animation: himh-call-drop .75s cubic-bezier(.2,.9,.25,1.25) both; }
.himh-drop__call svg { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.himh-drop__text { display: block; font: 400 clamp(16px, 1.6vw, 30px)/.95 var(--brush, "Arial Black", sans-serif); text-transform: uppercase; text-align: right; transform: rotate(-4deg); }
.himh-drop.has-spray .himh-drop__call svg { display: block; }
.himh-drop.has-spray .himh-drop__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.himh-drop__call:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes himh-call-drop {
  0% { opacity: 0; transform: translateY(-70px) rotate(-7deg) scale(1.18); }
  55% { opacity: 1; transform: translateY(6px) rotate(1deg) scale(.985); }
  100% { opacity: 1; transform: none; }
}
/* Desktop: the map's config toggle sat exactly where the heart is presented; it moves to the map's left edge. */
@media (min-width:1200px) and (hover:hover) and (pointer:fine) {
  #music .map-controls { inset: 0 auto auto 8px; }
}
/* Touch layouts have no free corner (tabs, sprayed title, chapter bar): one-off overlay below the top bar, then it clears. */
@media (max-width:1199px), (any-pointer:coarse) and (max-width:1366px) {
  .himh-drop { top: 52px; width: min(36vw, 230px); }
  .himh-drop::before { content: ""; position: absolute; z-index: -1; inset: -12% -4% -30% -125%; background: radial-gradient(closest-side, #040003f2 45%, #04000300 100%); }
  .himh-drop__call { top: 38%; right: 97%; width: 84%; }
  /* After the one-off, the owner's cut-out heart stays as a small pumping link, so the playlist remains reachable. */
  .himh-drop[data-state="gone"] { opacity: 1; visibility: visible; transition: none; }
  .himh-drop[data-state="gone"]::before, .himh-drop[data-state="gone"] .himh-drop__stage, .himh-drop[data-state="gone"] .himh-drop__call, .himh-drop[data-state="gone"] .himh-drop__heart { display: none; }
  .himh-drop[data-state="gone"] .himh-chip { display: block; position: absolute; top: 30px; right: 20px; width: clamp(40px, 6.4vw, 58px); padding: 4px; pointer-events: auto; filter: drop-shadow(0 0 10px #ff0090b3); animation: himh-chip-beat 1.5s ease-in-out infinite; }
  .himh-chip img { display: block; width: 100%; height: auto; }
  .himh-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 12px; }
  @keyframes himh-chip-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1.02); } 36% { transform: scale(1.08); } 56% { transform: scale(1); } }
}
@media (max-width:600px), (max-height:500px) and (max-width:1000px) {
  .himh-drop { top: 58px; width: min(42vw, 176px); }
  .himh-drop__call { right: 96%; width: 88%; }
  .himh-drop[data-state="gone"] .himh-chip { top: 4px; right: 84px; width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .himh-drop, .himh-drop__call { transition: none; }
  .himh-drop.is-calling .himh-drop__call { animation: none; }
  .himh-drop[data-state="final"] .himh-drop__pulse, .himh-drop[data-state="gone"] .himh-chip { animation: none; }
}