/* Radiance home page. Sizes are written in --u units (1u = 1px on a 1600px-wide design). */

:root {
  --ink: 9 11 17;
  --u: clamp(0.5px, 0.0625vw, 1.25px);
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  background: #fff6f4;
  color: rgb(var(--ink) / 0.8);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }

/* ---------- hero ---------- */
.hero {
  touch-action: none;
  position: fixed; inset: 0;
  background:
    radial-gradient(115% 80% at 50% 40%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
    linear-gradient(180deg,
      #fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 52%,
      #f7cfac 62%, #f3c19e 70%, #eeae8a 79%, #ee9972 87%, #eb8b63 94%, #ef815c 100%);
}
.hero__orb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hero__title {
  position: absolute; left: 0; right: 0; top: 24%;
  margin: 0; padding: 0 24px;
  text-align: center;
  font-weight: 400;
  font-size: clamp(30px, 3.34vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgb(var(--ink) / 0.8);
  pointer-events: none;
}
.word { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ch > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
}
.is-ready .ch > span { transform: none; }

/* fallback when WebGL is unavailable: a flat glowing sphere */
.no-webgl .hero::after {
  content: ''; position: absolute; left: 50%; top: 52%;
  width: 52.5vw; max-width: 1100px; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fdd29a, #fb9a63 60%, #f06a4a);
  box-shadow: 0 0 0 2px rgb(255 235 230 / 0.8), 0 0 80px rgb(255 245 220 / 0.7);
}

/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 10; inset: 0 0 auto 0; pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar__logo {
  position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u));
  opacity: 0; transition: opacity 0.8s var(--ease) 0.2s;
}
.bar__logo img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); min-width: 48px; min-height: 48px; }
.is-ready .bar__logo { opacity: 1; }

/* ---------- menu ---------- */
.menu {
  position: absolute; right: calc(20 * var(--u)); top: calc(30 * var(--u));
  opacity: 0; transition: opacity 0.8s var(--ease) 0.3s;
}
.is-ready .menu { opacity: 1; }
.menu__btn {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #fff;
}
@media (min-width: 768px) { .menu__btn { width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 40px; min-height: 40px; } }
.menu__icon { position: absolute; transition: opacity 0.25s, transform 0.4s var(--ease); }
.menu__icon--close { opacity: 0; transform: rotate(-45deg); }
.is-open .menu__icon--open { opacity: 0; transform: rotate(45deg); }
.is-open .menu__icon--close { opacity: 1; transform: none; }

.menu__panel {
  position: absolute; top: 0; right: 0; z-index: 1;
  background: #fff;
  width: max-content; max-width: calc(100vw - 24px);
  padding: calc(50 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
}
.is-open .menu__panel { clip-path: inset(0); visibility: visible; transition: clip-path 0.5s var(--ease); }
@media (max-width: 767px) { .menu__panel { width: calc(100vw - 24px); padding: 64px 16px 16px; } }

.menu__list li { border-bottom: 1px solid rgb(var(--ink) / 0.15); }
.menu__list a {
  display: flex; align-items: baseline;
  padding: calc(6.5 * var(--u)) calc(60 * var(--u)) calc(6.5 * var(--u)) 0;
  font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.2; white-space: nowrap;
  transition: opacity 0.3s;
}
.menu__num {
  margin-right: calc(16 * var(--u));
  font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
  font-size: calc(14 * var(--u)); text-transform: uppercase; letter-spacing: 0.02em;
}
.menu__list:hover a:not(:hover), .menu__list:focus-within a:not(:focus-visible):not(:hover) { opacity: 0.45; }
.menu__list li, .menu__links { transform: translateY(8px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s; }
.is-open .menu__list li, .is-open .menu__links { transform: none; opacity: 1; }
.is-open .menu__list li:nth-child(1) { transition-delay: 0.10s; }
.is-open .menu__list li:nth-child(2) { transition-delay: 0.14s; }
.is-open .menu__list li:nth-child(3) { transition-delay: 0.18s; }
.is-open .menu__list li:nth-child(4) { transition-delay: 0.22s; }
.is-open .menu__list li:nth-child(5) { transition-delay: 0.26s; }
.is-open .menu__links { transition-delay: 0.32s; }

.menu__links { display: flex; gap: calc(24 * var(--u)); padding-top: calc(39 * var(--u)); }
.menu__link {
  position: relative; display: inline-block; overflow: hidden;
  font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
  font-size: calc(14 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
}
.menu__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: rgb(var(--ink) / 0.3); transform: translateX(-101%); transition: transform 0.4s;
}
.menu__link:hover::after, .menu__link:focus-visible::after { transform: none; }
@media (max-width: 767px) {
  .menu__list a { padding: 10px 40px 10px 0; font-size: 18px; }
  .menu__num { font-size: 12px; margin-right: 14px; }
  .menu__links { gap: 20px; padding-top: 28px; }
  .menu__link { font-size: 12px; }
  .bar__logo { left: 12px; top: 12px; }
  .bar__logo img { width: 44px; height: 44px; }
  .menu { right: 12px; top: 12px; }
}

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px;
  background: #fff6f4;
  transition: opacity 0.7s var(--ease) 0.1s, visibility 0s 0.8s;
}
.is-ready .loader { opacity: 0; visibility: hidden; }
.loader__stage { flex-grow: 1; display: flex; align-items: center; }
.scene { margin: 80px; width: 140px; height: 140px; perspective: 400px; transform: translateZ(0); }
.cube {
  position: relative; width: 140px; height: 140px;
  transform-style: preserve-3d; transform: translateZ(-100px);
  animation: spin 3s var(--ease) infinite;
}
.cube__face {
  position: absolute; width: 140px; height: 140px;
  background: rgb(var(--ink)); border: 2px solid rgb(var(--ink));
  display: flex; align-items: center; justify-content: center;
}
.cube__face img { width: 100%; height: 100%; padding: 14px; }
.cube__face--front { transform: rotateY(0) translateZ(70px); }
.cube__face--right { transform: rotateY(90deg) translateZ(70px); }
.cube__face--back { transform: rotateY(180deg) translateZ(70px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(70px); }
.cube__face--top { transform: rotateX(90deg) translateZ(70px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(70px); }
.is-ready .cube { animation: none; }
@keyframes spin {
  0% { transform: translateZ(-100px) rotateY(0); }
  40%, 50% { transform: translateZ(-100px) rotateY(-180deg); }
  90%, 100% { transform: translateZ(-100px) rotateY(-360deg); }
}
.loader__count {
  margin: 0; flex-shrink: 0;
  font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 16px; line-height: 1; text-transform: uppercase; color: rgb(var(--ink) / 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; }
  .ch > span { transform: none; transition: none; }
  * { transition-duration: 0.01s !important; }
}