/* ─────────────────────────────────────────────────────────────────
   heimdns.net splash / teaser page (splash.html).
   Builds on assets/style.css (palette, .hd-brand, .btn, .modal,
   .keyhints, .field) and assets/teaser.css (the motion piece).
   ───────────────────────────────────────────────────────────────── */

.splash { min-height: 100dvh; display: flex; flex-direction: column; }
.splash__bg { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; z-index: 0; }
.splash__main {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 3.5rem var(--gutter) 2rem;
}
.splash__footer { position: relative; z-index: 1; width: 100%; padding-top: 1rem; }

/* ── Hero: big brand ⟷ teaser thumbnail ─────────────────────── */
.splash__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.splash__brand { min-width: 0; }
.splash__brand .eyebrow { margin-bottom: 1.4rem; }
.hd-brand--xl { font-size: clamp(1.5rem, 3.6vw, 2.9rem); gap: .12em; margin-right: 0; line-height: 1.15; }
.hd-brand--xl .hd-brand__row1, .hd-brand--xl .hd-brand__row2 { gap: .45em; }
.hd-brand--xl .hd-brand__version, .hd-brand--xl .hd-brand__tagline { font-size: .6em; }
.splash__lead { margin-top: 1.4rem; color: var(--hd-dim); font-size: 1.05em; max-width: 34em; }
.splash__cta { margin-top: 1.6rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.splash__link { font-weight: 700; font-size: 1.15em; color: var(--hd-accent); border-bottom: 1px solid var(--hd-line); padding-bottom: .1em; transition: border-color .15s var(--ease), color .15s var(--ease); }
.splash__link:hover, .splash__link:focus-visible { text-decoration: none; color: var(--hd-fg); border-color: var(--hd-accent); }

.splash__thumb {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 1px solid var(--hd-line); background: var(--hd-bg); color: inherit; cursor: pointer; text-align: left;
  box-shadow: 0 0 0 1px var(--hd-bg), 0 40px 100px -40px rgba(166, 227, 196, .25);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.splash__thumb:hover, .splash__thumb:focus-visible { border-color: var(--hd-accent); box-shadow: 0 0 0 1px var(--hd-bg), 0 40px 100px -30px rgba(166, 227, 196, .4); outline: 0; }
.splash__thumb:focus-visible { box-shadow: 0 0 0 1px var(--hd-bg), 0 0 0 3px var(--hd-accent); }
.splash__thumb [data-teaser] { display: block; }
.splash__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3.6rem; height: 3.6rem; display: grid; place-items: center;
  background: rgba(7, 8, 11, .72); border: 1px solid var(--hd-accent); color: var(--hd-accent);
  font-size: 1.5rem; font-weight: 700; padding-left: .2em;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.splash__thumb:hover .splash__play, .splash__thumb:focus-visible .splash__play { transform: translate(-50%, -50%) scale(1.08); background: var(--hd-accent); color: var(--hd-on-accent); }
.splash__thumb-hint {
  position: absolute; left: .6rem; bottom: .6rem; padding: .15em .6em;
  background: rgba(7, 8, 11, .85); border: 1px solid var(--hd-line); font-size: .8em; color: var(--hd-fg);
  opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.splash__thumb-hint b { color: var(--hd-accent2); }
.splash__thumb:hover .splash__thumb-hint, .splash__thumb:focus-visible .splash__thumb-hint { opacity: 1; transform: none; }

/* ── USPs ───────────────────────────────────────────────────── */
.usps {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--hd-line); border: 1px solid var(--hd-line);
}
.usp { background: var(--hd-bg); padding: 1.1rem 1.2rem 1.2rem; min-width: 0; }
.usp__title { display: block; color: var(--hd-accent); font-weight: 700; letter-spacing: .02em; }
.usp__glyph { color: var(--hd-accent2); margin-right: .35em; }
.usp p { margin-top: .45rem; color: var(--hd-dim); font-size: .9em; line-height: 1.55; }

/* ── Modals ─────────────────────────────────────────────────── */
.modal--video { padding: var(--gutter); background: rgba(7, 8, 11, .86); backdrop-filter: blur(4px); }
.modal__video {
  width: min(1180px, 100%, calc((100vh - 110px) * 16 / 9));
  border: 1px solid var(--hd-accent); background: var(--hd-bg);
  box-shadow: 0 0 0 1px var(--hd-bg), 0 60px 160px -40px rgba(166, 227, 196, .35);
  animation: fadein .2s var(--ease);
}
.modal__video [data-teaser] { display: block; }
.modal__video-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem .8rem; border-top: 1px solid var(--hd-line); font-size: .85em; }
.modal__close { background: none; border: 0; color: var(--hd-dim); padding: 0; cursor: pointer; }
.modal__close:hover { color: var(--hd-fg); }

.signup--modal { padding: 0; gap: 1rem; }
.signup--modal .field__input { width: 100%; }
.modal__body p + p { margin-top: .6rem; }

/* Modal open: freeze the page behind it */
.is-modal-open { overflow: hidden; }

@media (max-width: 860px) {
  .splash__main { padding-top: 2.5rem; justify-content: flex-start; }
  .splash__hero { grid-template-columns: 1fr; gap: 2rem; }
  .hd-brand--xl { font-size: clamp(1.5rem, 8vw, 2.4rem); }
  .usps { grid-template-columns: 1fr 1fr; margin-top: 2rem; }
}
@media (max-width: 520px) {
  .usps { grid-template-columns: 1fr; }
  .splash__link { font-size: 1.05em; }
}

/* The form is display:flex, so the hidden attribute needs help once the result replaces it */
.signup--modal { margin-bottom: 1.2rem; }
.signup--modal[hidden] { display: none; }
[data-signup-done] { margin-bottom: 1.2rem; }