@import url('./landing-typography.css');

/* The dialog is only a frame. Form presentation is shared with the contact page. */
.contact-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: clip;
  font: 400 16px/1.5 var(--ginsi-public-font);
  -webkit-font-smoothing: antialiased;
}
.contact-panel:not([open]) {
  display: none;
}
.contact-panel[open] {
  display: flex;
  justify-content: flex-end;
}
.contact-panel,
.contact-panel * {
  box-sizing: border-box;
}
.contact-panel [hidden] {
  display: none !important;
}
.contact-panel::backdrop {
  background: rgb(12 15 16 / 0%);
  transition: background 600ms ease;
}
.contact-panel.is-open::backdrop {
  background: rgb(12 15 16 / 45%);
}
.contact-panel-sheet {
  width: min(720px, 100%);
  height: 100%;
  padding: max(22px, env(safe-area-inset-top)) 48px max(36px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 80px;
  background: var(--contact-paper, var(--ginsi-dark));
  transform: translateX(100%);
  transition: transform 600ms cubic-bezier(0.22, 0.68, 0, 1);
}
.contact-panel.is-open .contact-panel-sheet {
  transform: translateX(0);
}
.contact-panel-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  background: var(--contact-paper, var(--ginsi-dark));
}
.contact-panel-close {
  display: grid;
  place-items: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.contact-panel-close span {
  grid-area: 1 / 1;
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
.contact-panel-close span + span {
  transform: rotate(-45deg);
}
.contact-panel-close:hover {
  opacity: 0.7;
}
.contact-panel.from-mobile-menu .contact-panel-sheet {
  width: 100%;
}
.contact-panel.from-mobile-menu::backdrop {
  background: transparent;
}
.contact-panel.from-mobile-menu .contact-panel-top {
  justify-content: flex-start;
}
.contact-panel.from-mobile-menu .contact-panel-close {
  width: auto;
  min-width: 80px;
  justify-content: flex-start;
  font-size: 16px;
}
.contact-panel.from-mobile-menu .contact-panel-close span {
  display: none;
}
.contact-panel.from-mobile-menu .contact-panel-close:after {
  content: '← Menu';
}
.contact-panel.from-mobile-menu:lang(sv) .contact-panel-close:after {
  content: '← Meny';
}
.contact-panel [data-contact-layout],
.contact-panel-direct,
.contact-panel .access-success {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.contact-panel-intro {
  margin: 36px 0;
}
.contact-panel-intro h2:focus,
.contact-panel .access-success:focus {
  outline: none;
}
.contact-panel-direct {
  margin-top: 28px;
}
.contact-panel-direct a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 16px;
}
.contact-panel .access-success {
  margin-top: 72px;
}
.contact-panel .access-success button {
  margin-top: 28px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
@media (max-width: 1050px) {
  .contact-panel-sheet {
    width: 100%;
    padding: max(14px, env(safe-area-inset-top)) clamp(24px, 5vw, 48px)
      max(28px, env(safe-area-inset-bottom));
  }
  .contact-panel-intro {
    margin: 24px 0 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-panel::backdrop,
  .contact-panel-sheet {
    transition: none;
  }
}

/* ---------- The threshold ----------
   The door opens onto a radio telescope at dusk, listening. The photograph runs to the
   top edge behind the close control and scrolls with the sheet; the headline rises out
   of it and the form stays crisp below. It develops as the sheet slides in, then drifts
   slowly while the door is open. Grain lives only inside the photograph. */
.contact-panel-sheet {
  --contact-view: clamp(260px, 46vh, 460px);
  position: relative;
}
.contact-panel-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--contact-view);
  overflow: hidden;
  pointer-events: none;
  background: #0e0f0f;
}
.contact-panel-view img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 28%;
  transform: scale(1.06);
  filter: brightness(0.2) saturate(0.6);
  transition:
    filter 1800ms ease 250ms,
    transform 2400ms cubic-bezier(0.16, 1, 0.3, 1) 250ms;
}
.contact-panel-view::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / 18%) 0%,
    rgb(0 0 0 / 0%) 22%,
    rgb(0 0 0 / 0%) 46%,
    var(--contact-paper, var(--ginsi-dark)) 100%
  );
}
.contact-panel.is-open .contact-panel-view img {
  transform: scale(1.02);
  filter: none;
  animation: contact-listen 40s ease-in-out 2.7s infinite alternate;
}
@keyframes contact-listen {
  from {
    transform: scale(1.02) translate(0, 0);
  }
  to {
    transform: scale(1.06) translate(-1.2%, 0.8%);
  }
}
/* The close control floats over the photograph; its ground returns once the reader
   scrolls past it, where supported. */
.contact-panel-top {
  background: transparent;
}
@supports (animation-timeline: scroll()) {
  .contact-panel-sheet {
    scroll-timeline: --contact-sheet block;
  }
  .contact-panel-top {
    animation: contact-top-ground linear both;
    animation-timeline: --contact-sheet;
    animation-range: calc(var(--contact-view) - 200px) calc(var(--contact-view) - 120px);
  }
  @keyframes contact-top-ground {
    from {
      background: transparent;
    }
    to {
      background: var(--contact-paper, var(--ginsi-dark));
    }
  }
}
.contact-panel [data-contact-layout],
.contact-panel .access-success,
.contact-panel-direct {
  position: relative;
}
.contact-panel .contact-panel-intro {
  margin-top: calc(var(--contact-view) - 166px);
}
.contact-panel .access-success {
  margin-top: calc(var(--contact-view) - 130px);
}
.contact-panel-intro h2 {
  text-wrap: balance;
}
@media (max-width: 700px) {
  .contact-panel-sheet {
    --contact-view: 300px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-panel-view img,
  .contact-panel.is-open .contact-panel-view img {
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }
}