:root {
  color-scheme: dark;
  background: #060707;
  color: #d2cbb9;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; min-height: 100%; }
body { min-height: 100svh; display: grid; place-items: center; isolation: isolate; }

.landscape { position: fixed; inset: 0; overflow: hidden; z-index: -2; background: #060707; }
.scene { position: absolute; top: 0; height: 100%; background-repeat: no-repeat; background-size: cover; }
.scene--mobility {
  left: -2%; width: 65%;
  background-image: url("assets/mobility.webp");
  background-position: 43% 54%;
  filter: grayscale(.85) blur(2px) brightness(.68);
  mask-image: linear-gradient(90deg, #000 30%, #000b 58%, transparent 98%);
}
.scene--energy {
  right: -2%; width: 63%;
  background-image: url("assets/solar.webp");
  background-position: 58% 50%;
  filter: saturate(.35) blur(1.4px) brightness(.67);
  mask-image: linear-gradient(270deg, #000 25%, #000c 55%, transparent 97%);
}
.veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 44%, #060707e8 0%, #060707be 15%, #06070722 55%),
    linear-gradient(180deg, #060707ed 0%, #06070766 30%, #06070744 57%, #060707d9 87%, #060707 100%),
    linear-gradient(90deg, #06070766, transparent 25%, transparent 75%, #06070766);
}
.atmosphere {
  position: absolute; inset: -15%; opacity: .35;
  background: radial-gradient(ellipse at 30% 64%, #b6c3c21c, transparent 38%), radial-gradient(ellipse at 75% 35%, #d4b57315, transparent 32%);
  animation: drift 24s ease-in-out infinite alternate;
}
.frame { position: fixed; inset: 28px; pointer-events: none; border: 1px solid #c2ae7610; z-index: -1; }
.frame::before, .frame::after { content: ""; position: absolute; left: 50%; width: 42px; height: 1px; transform: translateX(-50%); background: #c3aa695c; }
.frame::before { top: -1px; }
.frame::after { bottom: -1px; }

.identity { display: flex; flex-direction: column; align-items: center; padding: 64px 24px; transform: translateY(-2%); animation: arrive 1.5s ease-out both; }
h1 { margin: 0; line-height: 0; }
.logo { display: block; width: clamp(220px, 21vw, 310px); height: auto; filter: drop-shadow(0 4px 32px #0009); }
.hairline { display: block; height: 1px; width: 54px; margin: 42px 0 25px; background: linear-gradient(90deg, transparent, #c9af78a6, transparent); }
.contact { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; color: #ccc7bb; text-decoration: none; font-size: 13px; font-weight: 400; letter-spacing: 2px; transition: color .25s, text-shadow .25s; }
.contact svg { color: #bca573; flex: none; }
.contact:hover { color: #f4e5bd; text-shadow: 0 0 20px #d3b77255; }
.contact:focus-visible { outline: 1px solid #c8b17d; outline-offset: 7px; border-radius: 2px; }

@keyframes arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes drift { from { transform: translate(-2%, 1%); } to { transform: translate(2%, -1%); } }

@media (max-width: 600px) {
  .frame { inset: 16px; }
  .identity { padding: 56px 20px; transform: translateY(-4%); }
  .logo { width: clamp(210px, 57vw, 255px); }
  .scene--mobility { left: -25%; width: 150%; height: 65%; top: -3%; background-position: 42% 40%; mask-image: linear-gradient(180deg, #000, #0009 56%, transparent); }
  .scene--energy { right: -25%; width: 150%; top: 39%; height: 67%; mask-image: linear-gradient(0deg, #000, #000a 55%, transparent); }
  .veil { background: radial-gradient(ellipse at 50% 44%, #060707e8, #060707b0 30%, #06070755 75%), linear-gradient(180deg, #060707a6, transparent 25%, transparent 70%, #060707e6); }
  .hairline { margin-top: 36px; margin-bottom: 20px; }
  .contact { font-size: 12px; letter-spacing: 1.6px; }
}

@media (max-height: 500px) and (min-width: 601px) {
  .identity { padding: 28px 20px; }
  .logo { width: 170px; }
  .hairline { margin: 20px 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}