:root {
  color-scheme: dark;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fffdf7;
  background: #243c40;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.hero__backgrounds, .hero__photo, .hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero__backgrounds { z-index: -2; }

.hero__photo {
  z-index: 0;
  opacity: 0;
  object-fit: cover;
  object-position: var(--desktop-position, 50% 55%);
}

.hero__photo.is-visible { opacity: 1; }
.hero__photo.is-entering { z-index: 1; transition: opacity 1600ms ease-in-out; }

.hero__shade {
  background: linear-gradient(180deg, rgb(8 23 34 / 58%), rgb(8 23 34 / 30%) 33%, transparent 62%);
}

.identity {
  padding: clamp(4rem, 15svh, 10rem) 1rem 3rem;
  text-align: center;
  text-shadow: 0 2px 20px rgb(0 0 0 / 18%);
}

h1 {
  margin: 0 0 0.7rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 0;
}

.wordmark-wrap {
  display: inline-block;
  position: relative;
  padding: 0;
  min-height: 0;
  width: clamp(17rem, 35vw, 35rem);
  max-width: 100%;
}

.wordmark {
  display: inline-block;
  width: 100%;
  height: auto;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.3rem, 1.1vw, 0.9rem);
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  font-weight: 400;
  letter-spacing: 0.025em;
}

nav span { opacity: 0.65; }

a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

a:hover { color: #b9e5aa; }
a:focus-visible { color: #b9e5aa; outline: 1px solid currentColor; outline-offset: 4px; }

.rotation-toggle {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 253 247 / 30%);
  border-radius: 50%;
  color: #fffdf7;
  background: rgb(8 23 34 / 28%);
  cursor: pointer;
  transition: color 160ms ease;
}
.rotation-toggle[hidden] { display: none; }
.rotation-toggle:hover, .rotation-toggle:focus-visible { color: #b9e5aa; }
.rotation-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.rotation-toggle .play-icon, .rotation-toggle.is-paused .pause-icon { display: none; }
.rotation-toggle.is-paused .play-icon { display: block; }

@media (max-aspect-ratio: 3/4) {
  .hero__photo { object-position: var(--mobile-position, 36% 50%); }
  .identity { padding-top: max(4rem, 12svh); }
}

@media (prefers-reduced-motion: reduce) {
  a, .rotation-toggle, .hero__photo.is-entering { transition: none; }
}

.wordmark-color {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  mask: url("assets/yorudan-at.svg") center / 100% 100% no-repeat;
  -webkit-mask: url("assets/yorudan-at.svg") center / 100% 100% no-repeat;
  transition: opacity 220ms ease;
}
.wordmark-color::before {
  content: "";
  position: absolute;
  width: 120%;
  aspect-ratio: 1;
  left: -10%;
  top: 50%;
  background: conic-gradient(#b9e5aa, #48c8b5, #138f96, #77d69c, #b9e5aa);
  transform: translateY(-50%) rotate(0turn);
}
.at-link:hover .wordmark-color,
.at-link:focus-visible .wordmark-color { opacity: 1; }
.at-link:hover .wordmark-color::before,
.at-link:focus-visible .wordmark-color::before { animation: wordmark-swirl 3s linear infinite; }
@keyframes wordmark-swirl {
  to { transform: translateY(-50%) rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark-color { transition: none; }
  .at-link .wordmark-color::before { animation: none; }
}

.at-link {
  position: absolute;
  left: 0;
  top: 23%;
  width: 16.1%;
  height: 54%;
  min-height: 0;
  padding: 0;
}
.at-link .wordmark-color {
  top: -42.593%;
  bottom: -42.593%;
}
.at-link .wordmark-color::before {
  width: 400%;
  left: -150%;
}