@property --orb-x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --orb-y {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  --porcelain: #f7f4f1;
  --ink: #0a0a0b;
  --ultramarine: #0648ff;
  --ultraviolet: #5418ff;
  --ice: #8deeff;
  --page-gutter: clamp(1.5rem, 5vw, 4.75rem);
  --label-size: clamp(0.68rem, 0.85vw, 0.82rem);
  --statement-size: 6rem;
  --orb-size: 0.82rem;
  --orb-x: 0px;
  --orb-y: 0px;
  --refract-radius: 2.8rem;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@supports (color: color(display-p3 0 0 0)) {
  :root {
    --ultramarine: color(display-p3 0.015 0.205 1);
    --ultraviolet: color(display-p3 0.31 0.055 1);
    --ice: color(display-p3 0.42 0.94 1);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  min-height: 100%;
  background: var(--porcelain);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, -apple-system, BlinkMacSystemFont, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 20rem;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--porcelain);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.page-shell {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--porcelain);
  isolation: isolate;
}

.identity {
  position: absolute;
  z-index: 20;
  top: max(2.5rem, env(safe-area-inset-top));
  left: var(--page-gutter);
  right: var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--label-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.29em;
  white-space: nowrap;
}

.identity__name {
  color: inherit;
  text-decoration: none;
}

.identity__name:focus-visible {
  border-radius: 0.1rem;
  outline: 0.12rem solid var(--ultramarine);
  outline-offset: 0.45rem;
}

.hero {
  position: absolute;
  inset: 0;
}

.statement-control {
  position: absolute;
  inset: 28svh 0 5svh;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  touch-action: manipulation;
}

.statement-stage {
  position: absolute;
  inset: 0 var(--page-gutter);
  display: block;
  container-type: size;
}

.statement-group {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transform-origin: 38% 60%;
  will-change: opacity, filter, transform;
}

.statement-group--next {
  opacity: 0;
}

.statement-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--statement-size);
  font-weight: 300;
  letter-spacing: -0.056em;
  line-height: 0.91;
  white-space: nowrap;
}

.statement-layer--base {
  z-index: 1;
  color: var(--ink);
}

.statement-layer--ice,
.statement-layer--violet {
  z-index: 2;
  overflow: visible;
  color: transparent;
  pointer-events: none;
  clip-path: circle(var(--refract-radius) at var(--orb-x) var(--orb-y));
}

.statement-layer--ice {
  opacity: 0.88;
  transform: translate3d(0.075rem, -0.018rem, 0);
  -webkit-text-stroke: 0.052rem var(--ice);
}

.statement-layer--violet {
  opacity: 0.72;
  transform: translate3d(-0.055rem, 0.025rem, 0);
  -webkit-text-stroke: 0.045rem var(--ultraviolet);
}

.statement-line {
  position: relative;
  display: block;
  width: max-content;
}

.period-anchor {
  display: inline-block;
  width: 0.17em;
  height: 0.17em;
  margin-left: 0.045em;
  transform: translateY(0.015em);
  vertical-align: 0.02em;
}

.living-period {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  display: block;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(
    calc(var(--orb-x) - (var(--orb-size) / 2)),
    calc(var(--orb-y) - (var(--orb-size) / 2)),
    0
  );
  will-change: transform, width, height;
}

.living-period__core {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background:
    radial-gradient(circle at 31% 24%, rgba(197, 252, 255, 0.98) 0 4%, rgba(93, 224, 255, 0.8) 8%, transparent 27%),
    radial-gradient(circle at 42% 38%, #287aff 0 21%, var(--ultramarine) 54%, var(--ultraviolet) 84%, #7626ff 100%);
  box-shadow:
    0 0 0.12rem rgba(78, 20, 255, 0.62),
    0 0 0.48rem rgba(6, 72, 255, 0.2),
    0 0 1rem rgba(6, 72, 255, 0.08);
  transform: scale(1);
  animation: period-breathe 4.8s var(--ease-out-expo) infinite;
  will-change: transform, filter;
}

.light-trail {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.light-trail > span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  opacity: 0;
  background: var(--ultramarine);
  box-shadow: 0 0 0.55rem rgba(6, 72, 255, 0.32);
  filter: blur(0.07rem);
  transform: translate3d(-10rem, -10rem, 0);
  will-change: transform, opacity;
}

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

body:not(.is-ready) .identity,
body:not(.is-ready) .statement-group--current,
body:not(.is-ready) .living-period {
  opacity: 0;
}

body.is-ready .identity {
  animation: identity-enter 900ms 80ms var(--ease-out-expo) both;
}

body.is-ready:not(.has-entered) .statement-group--current {
  animation: statement-enter 1150ms 130ms var(--ease-out-expo) both;
}

body.is-ready.has-entered .statement-group--current {
  animation: none;
}

body.is-ready .living-period {
  animation: period-enter 900ms 620ms var(--ease-out-expo) both;
}

body.is-transitioning .living-period__core {
  filter: saturate(1.16) brightness(1.06);
  animation-play-state: paused;
}

.statement-control:focus-visible .living-period__core {
  box-shadow:
    0 0 0 0.12rem rgba(6, 72, 255, 0.24),
    0 0 0.8rem rgba(6, 72, 255, 0.34),
    0 0 1.4rem rgba(84, 24, 255, 0.14);
  filter: brightness(1.12) saturate(1.08);
}

@keyframes identity-enter {
  from {
    opacity: 0;
    transform: translateY(-0.45rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes statement-enter {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes period-enter {
  from {
    opacity: 0;
    filter: blur(0.35rem);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes period-breathe {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  48% {
    filter: brightness(1.06) saturate(1.08);
    transform: scale(1.06);
  }
}

@media (max-width: 43rem) {
  :root {
    --page-gutter: clamp(1.45rem, 6.6vw, 2rem);
    --label-size: clamp(0.64rem, 2.75vw, 0.74rem);
  }

  .identity {
    top: max(2.55rem, calc(env(safe-area-inset-top) + 1.15rem));
    letter-spacing: 0.25em;
  }

  .statement-control {
    inset: 35svh 0 8svh;
  }

  .statement-layer {
    letter-spacing: -0.061em;
    line-height: 0.92;
  }
}

@media (max-width: 23rem) {
  .identity {
    letter-spacing: 0.2em;
  }
}

@media (max-height: 42rem) and (orientation: landscape) {
  .statement-control {
    inset: 20svh 0 2svh;
  }

  .identity {
    top: max(1.5rem, env(safe-area-inset-top));
  }
}

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

  body.is-ready .identity,
  body.is-ready .statement-group--current,
  body.is-ready .living-period,
  .living-period__core {
    animation: none;
  }

  body:not(.is-ready) .identity,
  body:not(.is-ready) .statement-group--current,
  body:not(.is-ready) .living-period {
    opacity: 1;
  }
}