@font-face {
  font-family: Italiana;
  src: url("assets/italiana.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("assets/inter.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}

:root { color-scheme: light; color: #173655; background: #d9edfa; }
* { box-sizing: border-box; }
body { margin: 0; overflow-x: clip; font-family: Inter, sans-serif; }

.atmosphere {
  position: fixed;
  inset: -4%;
  z-index: 0;
  pointer-events: none;
  background: #d9edfa url("assets/atmosphere.webp") center / 100% 100% no-repeat;
  animation: drift 5.5s ease-in-out -2.75s infinite alternate;
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 92% 65%, #ffd8bf 0%, transparent 48%);
  animation: daylight 3.5s ease-in-out -1s infinite alternate;
}

main {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem 1.25rem;
}

.identity { text-align: center; }

h1 {
  margin: 0;
  font-family: Italiana, Georgia, serif;
  font-size: clamp(3rem, 7.4vw, 8rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .018em;
}

.title-line { display: block; white-space: nowrap; }
.title-line + .title-line { margin-top: .08em; letter-spacing: .075em; }
.out { display: inline-flex; align-items: baseline; }
.eclipse { width: .74em; height: .74em; margin: 0 .035em -.015em 0; overflow: visible; }
.mobile-of { display: none; }

.rim, .glint { transform-box: view-box; transform-origin: 50% 50%; }
.rim { animation: orbit 45s linear infinite; }
.glint { animation: orbit 45s linear infinite, soft-glow 2.4s ease-in-out -1.2s infinite alternate; }
.reflection { animation: shimmer 2s ease-in-out -1s infinite alternate; }

p {
  margin: clamp(2rem, 4vw, 3.75rem) 0 0;
  font-size: clamp(.875rem, 1.65vw, 1.625rem);
  font-weight: 300;
  letter-spacing: .17em;
  line-height: 1.5;
}

@keyframes drift {
  from { transform: translate3d(-2.1%, .9%, 0) scale(1.01); }
  to { transform: translate3d(2.1%, -.9%, 0) scale(1.025); }
}
@keyframes daylight { from { opacity: .04; } to { opacity: .4; } }
@keyframes orbit { to { transform: rotate(1turn); } }
@keyframes shimmer { from { opacity: .25; } to { opacity: .95; } }
@keyframes ambient-light { from { opacity: .78; } to { opacity: 1; } }
@keyframes soft-glow { from { opacity: .25; } to { opacity: 1; } }

@media (max-aspect-ratio: 1/1) {
  h1 { font-size: clamp(2rem, 9.4vw, 5.625rem); line-height: 1; }
  .title-line:first-child { letter-spacing: .1em; }
  .title-line + .title-line { letter-spacing: .018em; }
  .desktop-of { display: none; }
  .mobile-of { display: inline; }
  p { margin-top: clamp(1.8rem, 5vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep slow changes in light, with no translation, scaling or rotation. */
  .atmosphere { animation: ambient-light 4.5s ease-in-out -2.25s infinite alternate; }
  .rim { animation: none; }
  .glint { animation: soft-glow 2.5s ease-in-out -1.25s infinite alternate; }
}