/* Shared shell styles for section landing intros. */

.floating-title {
  position: fixed;
  z-index: 10000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  font-size: 48px;
  font-size-adjust: 0.52;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--bg);
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: top 0.6s ease, transform 0.6s ease, opacity 0.24s ease;
}

.floating-title.skip-animation {
  transition: opacity 0.24s ease;
  top: 128px;
  transform: translate(-50%, 0);
  color: var(--fg);
  position: absolute;
}

body.shell-title-pending .floating-title.skip-animation {
  opacity: 0;
  pointer-events: none;
}

.side-controls > .side-control--back {
  transition:
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.5s ease;
  will-change: opacity;
}

.side-controls > .side-lang-switch {
  opacity: 1;
  transition: opacity 0.5s ease;
  will-change: opacity;
}

html.shell-controls-pending .side-controls > .side-control--back,
html.shell-controls-pending .side-controls > .side-lang-switch,
body.shell-controls-pending .side-controls > .side-control--back,
body.shell-controls-pending .side-controls > .side-lang-switch {
  opacity: 0;
  pointer-events: none;
}

html.shell-controls-revealing .side-controls > .side-control--back,
html.shell-controls-revealing .side-controls > .side-lang-switch,
body.shell-controls-revealing .side-controls > .side-control--back,
body.shell-controls-revealing .side-controls > .side-lang-switch {
  pointer-events: none;
}

.floating-title.in-position {
  top: 128px;
  transform: translate(-50%, 0);
  z-index: 10000;
}

.floating-title.colored {
  color: var(--fg);
}

.floating-title.settled {
  position: absolute;
}

.page-loader {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  min-height: var(--nmz-content-vh, 100vh);
  background: var(--fg);
  z-index: 9998;
}

@media (max-width: 768px) {
  .page-loader {
    transition: none;
  }

  body {
    position: relative;
    padding-bottom: var(--nmz-browser-bottom, 0px);
  }

  .floating-title {
    font-size: 36px;
  }

  .floating-title.skip-animation,
  .floating-title.in-position {
    top: calc(0px + var(--nmz-safe-top, 0px));
  }

  #heroSection {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    z-index: 9999;
  }

  #heroSection [class$="-title-placeholder"] {
    height: 0;
    margin: 0;
  }

  #heroSubtitle {
    position: absolute;
    top: calc(44px + var(--nmz-safe-top, 0px));
    left: 50%;
    width: max-content;
    max-width: calc(100vw - (2 * (20px + var(--side-logo-w) + var(--side-logo-right-pad, 0px))) - 24px);
    margin: 0;
    text-align: center;
    pointer-events: none;
    z-index: 9999;
    transform: translateX(calc(-50% - 0.5 * (var(--side-logo-w) + var(--side-logo-right-pad, 0px))));
  }

  body[data-i18n-page="art"] .project-card:first-child .project-link,
  body[data-i18n-page="tools"] .project-card:first-child .project-link,
  body[data-i18n-page="work"] .project-card:first-child .project-link {
    padding-top: var(--section-mobile-header-clearance, 96px);
  }

  body[data-i18n-page="type"] .typeface-card:first-child .typeface-link {
    padding-top: var(--section-mobile-header-clearance, 96px);
  }

  body[data-i18n-page="about"] .about-main {
    border-top: 0;
  }

  body[data-i18n-page="about"] .about-card:first-child .about-card-inner {
    padding-top: var(--section-mobile-header-clearance, 96px);
  }
}