/*
Theme Name: Waymark
Theme URI: https://waymark.example/
Author: Waymark
Description: Custom full-screen Waymark home experience.
Version: 1.0.6
Text Domain: waymark
*/

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f4f0;
  background: #000;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #000; overflow: hidden; }
body { overscroll-behavior: none; }

.black-home {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.admin-bar .black-home { height: calc(100svh - 32px); }

.black-home::before,
.black-home::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.black-home::before {
  z-index: 4;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 5%, transparent 16%, transparent 84%, rgba(0,0,0,.92) 95%, #000 100%),
    linear-gradient(0deg, #000 0%, rgba(0,0,0,.9) 10%, transparent 22%, transparent 78%, rgba(0,0,0,.9) 90%, #000 100%);
}

.black-home::after {
  z-index: 5;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.04) 48%, rgba(0,0,0,.54) 100%);
}

.system-window {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  width: 100%;
  height: min(58vh, 680px);
  transform: translateY(-50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.system-track {
  width: max-content;
  height: 100%;
  display: flex;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(14vw, 0, 0);
  animation: systems-pass 56s linear 0s infinite;
}

.system-set {
  display: flex;
  height: 100%;
  padding: 0;
  margin: 0;
}

.system-frame {
  position: relative;
  flex: 0 0 clamp(620px, 48vw, 880px);
  height: 100%;
  overflow: hidden;
  background: #020202;
  margin-right: clamp(-170px, -9vw, -96px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.14) 9%, #000 24%, #000 76%, rgba(0,0,0,.14) 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.14) 9%, #000 24%, #000 76%, rgba(0,0,0,.14) 91%, transparent 100%);
}

.system-frame img {
  width: 118%;
  height: 106%;
  margin-left: -9%;
  margin-top: -3%;
  object-fit: cover;
  filter: grayscale(.98) brightness(.27) contrast(1.08);
  will-change: transform;
  transform: translateZ(0);
  animation: image-breath 22s ease-in-out infinite alternate;
}

.system-frame-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.02) 50%, rgba(0,0,0,.18)),
    linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,.08) 68%, rgba(0,0,0,.42) 100%);
}

.system-frame-name {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: .76;
  color: rgba(255,255,255,.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, .92vw, 16px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .012em;
  text-shadow: 0 1px 18px rgba(0,0,0,.88);
}

.waymark-title {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50.35%;
  max-width: 88vw;
  text-align: center;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(78px, 12.8vw, 228px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: .07em;
  white-space: nowrap;
  opacity: 0;
  will-change: opacity;
  backface-visibility: hidden;
  transform: translate(-50%, -52%) translateZ(0);
  animation: reveal-waymark 4.2s linear 1.2s forwards;
  pointer-events: none;
  text-shadow: 0 2px 30px rgba(0,0,0,.58);
}

.quiet-mark {
  position: absolute;
  z-index: 8;
  bottom: 28px;
  opacity: .95;
  color: rgba(255,255,255,.34);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.quiet-mark-left { left: 34px; }
.quiet-mark-right { right: 34px; }

@keyframes systems-pass {
  from { transform: translate3d(14vw, 0, 0); }
  to { transform: translate3d(calc(-50% + 14vw), 0, 0); }
}

@keyframes image-breath {
  from { transform: scale(1.045) translate3d(0, -1.1%, 0); }
  to { transform: scale(1.07) translate3d(0, 1.2%, 0); }
}

@keyframes reveal-waymark {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 980px) {
  .system-window { height: 54vh; }
  .system-track { transform: translate3d(16vw, 0, 0); animation-name: systems-pass-mobile; animation-duration: 80s; }
  .system-frame { flex-basis: 70vw; margin-right: -16vw; }
  .waymark-title { font-size: clamp(68px, 13.6vw, 140px); letter-spacing: .06em; }
}

@keyframes systems-pass-mobile {
  from { transform: translate3d(16vw, 0, 0); }
  to { transform: translate3d(calc(-50% + 16vw), 0, 0); }
}

@media (max-width: 782px) {
  .admin-bar .black-home { height: calc(100svh - 46px); }
}

@media (max-width: 760px) {
  .system-window { height: 48vh; }
  .system-track { animation-duration: 125s; }
  .system-frame { flex-basis: 94vw; margin-right: -20vw; }
  .system-frame-name { bottom: 15px; font-size: 12px; }
  .waymark-title { max-width: 92vw; font-size: clamp(52px, 15.4vw, 104px); letter-spacing: .045em; }
  .quiet-mark { bottom: 20px; font-size: 7px; }
  .quiet-mark-left { left: 18px; }
  .quiet-mark-right { right: 18px; text-align: right; max-width: 45vw; }
}

@media (max-width: 760px) and (hover: none) and (pointer: coarse) {
  .waymark-title { left: 48.0%; }
}

@media (prefers-reduced-motion: reduce) {
  .system-track { animation: none; transform: translate3d(8vw, 0, 0); }
  .system-frame img { animation: none; }
  .waymark-title {
    animation-duration: .01ms;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
}