/* Mascha & Kiesa — fuldskærms-videoloop. Identisk på begge sider. */
html,body{margin:0;height:100%;background:#000;overflow:hidden}

/* Videoen dækker hele skærmen (beskåret, ingen sorte bjælker) via 16:9-cover-trick.
   pointer-events:none → klik/scroll går til siden (slår lyd til), ikke til YouTube. */
.stage{position:fixed;inset:0;background:#000;pointer-events:none}
.stage iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;          /* 16:9 ud fra bredden */
  min-height:100vh;min-width:177.78vh; /* 16:9 ud fra højden — dækker altid */
  border:0;
}

/* Diskret hjerte nederst til højre; den andens navn glider frem ved hover. */
.heart{
  position:fixed;right:18px;bottom:14px;z-index:10;
  display:flex;align-items:center;gap:.4em;
  text-decoration:none;color:#fff;opacity:.35;
  transition:opacity .4s;font:400 22px/1 system-ui,Segoe UI,Roboto,sans-serif;
}
.heart:hover{opacity:.9}
.heart .name{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transform:translateX(6px);
  font-size:15px;letter-spacing:.02em;
  transition:max-width .45s ease,opacity .4s ease,transform .45s ease;
}
.heart:hover .name{max-width:8em;opacity:1;transform:none}
.heart .glyph{filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}

/* "tryk for lyd" — vises indtil første interaktion (videoen starter altid lydløst). */
.soundhint{
  position:fixed;left:18px;bottom:14px;z-index:10;
  appearance:none;-webkit-appearance:none;border:0;background:transparent;cursor:pointer;
  color:#fff;opacity:.55;font:400 14px/1 system-ui,Segoe UI,Roboto,sans-serif;
  transition:opacity .3s;
}
.soundhint:hover{opacity:.85}
.soundhint[hidden]{display:none}