:root {
  color-scheme: dark;
  --color-background: #282828;
  --color-cream: #fff8e6;
  --color-glass-fill: rgba(102, 102, 102, 0.04);
  --color-glass-border: rgba(255, 248, 230, 0.2);
  --color-glass-highlight: rgba(255, 248, 230, 0.4);
  --color-light: 255 193 5;
  --page-margin: clamp(20px, 6vw, 80px);
  --panel-radius: clamp(30px, 5.6vw, 56px);
  --panel-min-height: calc(var(--app-height, 100dvh) - (var(--page-margin) * 2));
  --ray-width: clamp(420px, 68vw, 874px);
  --ray-height: clamp(220px, 36vw, 452px);
  --ray-blur: clamp(60px, 8vw, 100px);
  --animation-cycle: 21s;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-background);
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--color-background);
  color: var(--color-cream);
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

img {
  display: block;
  max-width: 100%;
}

.page-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: var(--app-height, 100dvh);
  padding: var(--page-margin);
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 248, 230, 0.055), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(0, 0, 0, 0.28), transparent 42%),
    var(--color-background);
}

.texture-layer {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(118deg, transparent 0 17%, rgba(255, 248, 230, 0.035) 17.4% 17.8%, transparent 18.2% 42%, rgba(0, 0, 0, 0.18) 42.5% 43.2%, transparent 43.8%),
    linear-gradient(64deg, transparent 0 28%, rgba(255, 255, 255, 0.028) 28.5% 29%, transparent 29.6% 70%, rgba(0, 0, 0, 0.16) 70.2% 70.8%, transparent 71.4%),
    radial-gradient(ellipse at 34% 28%, rgba(255, 248, 230, 0.04), transparent 35%),
    radial-gradient(ellipse at 70% 62%, rgba(0, 0, 0, 0.2), transparent 44%);
  opacity: 0.72;
}

.texture-layer::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
  opacity: 0.34;
}

.light-stage {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.light-orbit {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: opacity, transform;
}

.light-orbit--upper {
  animation: ray-cycle var(--animation-cycle) ease-in-out infinite;
}

.light-orbit--lower {
  animation: ray-cycle-lower var(--animation-cycle) ease-in-out infinite;
}

.light-ray {
  position: absolute;
  width: var(--ray-width);
  height: var(--ray-height);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 20% 50%, rgb(var(--color-light) / 0.3) 0%, rgb(var(--color-light) / 0.18) 28%, rgb(var(--color-light) / 0.06) 54%, rgb(var(--color-light) / 0) 78%),
    linear-gradient(90deg, rgb(var(--color-light) / 0.25), rgb(var(--color-light) / 0));
  filter: blur(var(--ray-blur));
  opacity: 0.4;
  transform-origin: 50% 50%;
}

.light-ray--upper {
  top: calc(var(--ray-height) * -0.24);
  right: calc(var(--ray-width) * -0.28);
  transform: rotate(-30deg) skewX(-7deg);
}

.light-ray--lower {
  bottom: calc(var(--ray-height) * -0.22);
  left: calc(var(--ray-width) * -0.3);
  transform: rotate(150deg) skewX(-7deg);
}

.glass-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: max(420px, var(--panel-min-height));
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--color-glass-border);
  border-radius: var(--panel-radius);
  background:
    linear-gradient(135deg, rgba(255, 248, 230, 0.065), transparent 28%, rgba(255, 248, 230, 0.018) 57%, transparent 80%),
    var(--color-glass-fill);
  box-shadow:
    inset 0 1px 0 var(--color-glass-highlight),
    inset 0 -34px 80px rgba(255, 248, 230, 0.026),
    inset 36px -36px 96px rgba(0, 0, 0, 0.14),
    0 34px 90px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(22px) saturate(128%) contrast(106%);
  -webkit-backdrop-filter: blur(22px) saturate(128%) contrast(106%);
}

.glass-panel::before,
.glass-panel::after,
.glass-shine {
  position: absolute;
  pointer-events: none;
  content: "";
}

.glass-panel::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(-45deg, rgba(255, 248, 230, 0.4), transparent 19%, transparent 72%, rgba(255, 248, 230, 0.11)),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.11), transparent 17%),
    radial-gradient(circle at 78% 80%, rgba(255, 193, 5, 0.055), transparent 23%);
  mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.22));
  opacity: 0.52;
}

.glass-panel::after {
  inset: 1px;
  border-radius: calc(var(--panel-radius) - 1px);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(0, 0, 0, 0.15) 100%);
  mix-blend-mode: overlay;
  opacity: 0.2;
}

.glass-shine {
  inset: -24%;
  background: linear-gradient(-45deg, transparent 34%, rgba(255, 248, 230, 0.16), transparent 48%);
  opacity: 0.28;
  transform: translate3d(-9%, 8%, 0);
}

.brand-lockup {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100%, 560px);
  padding: clamp(36px, 6vw, 72px) clamp(22px, 4vw, 48px);
  text-align: center;
}

.brand-logo {
  width: 156px;
  height: 74px;
  object-fit: contain;
}

h1 {
  margin: -1px 0 0;
  color: var(--color-cream);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
}

.brand-message {
  max-width: 460px;
  margin: 16px 0 0;
  color: var(--color-cream);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 24px;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ray-cycle {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.96);
  }

  23.81% {
    opacity: 1;
    transform: rotate(18deg) scale(1);
  }

  33.33% {
    opacity: 1;
    transform: rotate(24deg) scale(1);
  }

  57.14% {
    opacity: 0;
    transform: rotate(45deg) scale(0.98);
  }

  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.98);
  }
}

@keyframes ray-cycle-lower {
  0%,
  33.33% {
    opacity: 0;
    transform: rotate(0deg) scale(0.96);
  }

  57.14% {
    opacity: 1;
    transform: rotate(18deg) scale(1);
  }

  66.67% {
    opacity: 1;
    transform: rotate(24deg) scale(1);
  }

  90.48% {
    opacity: 0;
    transform: rotate(45deg) scale(0.98);
  }

  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.98);
  }
}

@media (max-width: 700px) {
  :root {
    --page-margin: clamp(16px, 5vw, 32px);
    --ray-width: clamp(360px, 118vw, 620px);
    --ray-height: clamp(190px, 62vw, 320px);
  }

  body {
    overflow: hidden auto;
  }

  .glass-panel {
    min-height: max(460px, var(--panel-min-height));
  }

  .brand-lockup {
    padding-inline: 20px;
  }

  .brand-message {
    max-width: 18rem;
    font-size: 15px;
    letter-spacing: 0.055em;
  }
}

@media (max-width: 420px) {
  :root {
    --panel-radius: 30px;
  }

  .brand-logo {
    width: 138px;
    height: auto;
  }

  h1 {
    font-size: 22px;
    letter-spacing: 0.13em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .light-orbit {
    animation: none;
    opacity: 0.45;
    transform: rotate(12deg);
  }

  .light-orbit--lower {
    opacity: 0.28;
    transform: rotate(28deg);
  }
}