:root {
  --ink: #f8f5ef;
  --ink-soft: rgba(248, 245, 239, 0.72);
  --ink-muted: rgba(248, 245, 239, 0.46);
  --line: rgba(255, 255, 255, 0.18);
  --cyan: #86f7ff;
  --rose: #ff67d8;
  --gold: #ffd98b;
  --blue: #7a9cff;
  --green: #67ffc8;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020306;
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.experience {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 720px;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 78%, rgba(73, 255, 216, 0.16), transparent 32%),
    radial-gradient(ellipse at 82% 26%, rgba(255, 129, 72, 0.18), transparent 31%),
    radial-gradient(ellipse at 54% 35%, rgba(111, 109, 255, 0.14), transparent 38%),
    linear-gradient(180deg, #050609 0%, #020307 52%, #010204 100%);
}

.experience::before,
.experience::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.experience::before {
  z-index: 1;
  opacity: 0.55;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(122, 236, 255, 0.38) 0 1px, transparent 1.45px),
    radial-gradient(circle, rgba(255, 130, 222, 0.28) 0 1px, transparent 1.4px);
  background-size: 79px 71px, 127px 113px, 173px 151px;
  filter: saturate(0.72);
  mix-blend-mode: screen;
  animation: grain-drift 24s linear infinite;
}

.experience::after {
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 42%, rgba(0, 0, 0, 0.22) 65%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 28%, transparent 70%, rgba(0, 0, 0, 0.62)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.54), transparent 28%, transparent 68%, rgba(0, 0, 0, 0.42));
}


.intro {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
  background: #020407;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition:
    opacity 900ms ease,
    transform 1100ms ease,
    visibility 0ms linear 900ms;
}

.intro.is-visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity 900ms ease,
    transform 1100ms ease,
    visibility 0ms linear;
}

.intro::before,
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(14, 27, 45, 0.19) 0%, rgba(14, 27, 45, 0.08) 43%, transparent 68%),
    radial-gradient(ellipse at 10% 74%, rgba(6, 42, 45, 0.15) 0%, rgba(6, 42, 45, 0.05) 35%, transparent 64%),
    radial-gradient(ellipse at 88% 42%, rgba(72, 27, 46, 0.15) 0%, rgba(72, 27, 46, 0.05) 36%, transparent 66%),
    linear-gradient(180deg, #000408 0%, #02050a 48%, #010204 100%);
  filter: saturate(0.72);
}

.intro::after {
  z-index: 4;
  background:
    radial-gradient(ellipse at 50% 51%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 42%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.66) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.18) 18%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.18) 84%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.16) 22%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.18) 84%, rgba(0, 0, 0, 0.44) 100%);
}

.intro-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  filter: saturate(0.72);
  transform: translate3d(-0.8%, -2.4%, 0) scale(1.018);
}

.site-header,
.topbar {
  position: absolute;
  left: clamp(56px, 4.6vw, 86px);
  right: clamp(42px, 3.5vw, 70px);
  top: clamp(48px, 5.2vh, 68px);
  z-index: 12;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}

.wordmark {
  justify-self: start;
  display: block;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
  transition: transform 220ms ease;
}

.wordmark-image {
  display: block;
  width: clamp(122px, 8.2vw, 166px);
  height: auto;
  filter:
    saturate(0.94)
    contrast(1.02)
    drop-shadow(0 0 14px rgba(161, 219, 255, 0.22))
    drop-shadow(0 0 24px rgba(255, 149, 218, 0.16));
  transform-origin: left center;
  transition:
    filter 220ms ease,
    opacity 220ms ease,
    transform 220ms ease;
}

.wordmark:hover,
.wordmark:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.wordmark:hover .wordmark-image,
.wordmark:focus-visible .wordmark-image {
  filter:
    saturate(1.02)
    contrast(1.05)
    drop-shadow(0 0 18px rgba(187, 235, 255, 0.36))
    drop-shadow(0 0 34px rgba(255, 167, 226, 0.25));
  transform: scale(1.035);
}

.site-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(34px, 3.7vw, 68px);
}

.intro-site-header .site-nav {
  justify-self: end;
  grid-column: 3;
}

.site-nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.56);
  font-family: "Krub", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 200;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.24);
  pointer-events: auto;
  transition: color 180ms ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: rgba(255, 255, 255, 0.92);
}

.site-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -17px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 221, 190, 0.92), transparent);
  box-shadow: 0 0 12px rgba(255, 196, 145, 0.62);
}

.intro-portal {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 54%;
  width: min(74vw, 1120px);
  aspect-ratio: 1.72 / 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.24));
  display: none;
}

.intro-portal-core,
.intro-portal-ring,
.intro-portal-dust {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.intro-portal-core {
  inset: 14% 19%;
  background:
    radial-gradient(ellipse at 48% 52%, rgba(5, 9, 17, 0.82), rgba(3, 5, 12, 0.72) 28%, transparent 49%),
    conic-gradient(from 125deg, rgba(92, 255, 227, 0.28), rgba(255, 237, 168, 0.7), rgba(255, 117, 210, 0.5), rgba(113, 157, 255, 0.52), rgba(92, 255, 227, 0.28));
  filter: blur(26px);
  opacity: 0.9;
  animation: portal-core 8s ease-in-out infinite;
}

.intro-portal-ring {
  inset: 1% 6%;
  border-radius: 48%;
  background:
    conic-gradient(from 218deg, transparent 0 7%, rgba(255, 255, 255, 0.93) 12%, rgba(123, 246, 255, 0.78) 19%, rgba(255, 246, 170, 0.75) 29%, transparent 39%, rgba(255, 103, 218, 0.65) 51%, rgba(98, 188, 255, 0.7) 64%, transparent 75%, rgba(255, 255, 255, 0.82) 86%, transparent);
  filter: blur(9px);
  opacity: 0.94;
  mask: radial-gradient(ellipse at center, transparent 0 37%, #000 48%, #000 57%, transparent 68%);
  animation: portal-ring 18s linear infinite;
}

.intro-portal-ring.ring-two {
  inset: 10% 1%;
  transform: rotate(-8deg);
  opacity: 0.44;
  filter: blur(24px);
  animation-duration: 25s;
  animation-direction: reverse;
}

.intro-portal-dust {
  inset: 4% 7%;
  border-radius: 48%;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(126,237,255,0.7) 0 1px, transparent 1.9px),
    radial-gradient(circle, rgba(255,179,96,0.66) 0 1px, transparent 2px);
  background-size: 19px 23px, 41px 37px, 59px 53px;
  filter: blur(0.55px);
  opacity: 0.34;
  mask: radial-gradient(ellipse at center, transparent 0 29%, #000 43%, #000 66%, transparent 76%);
  animation: dust-drift 18s linear infinite;
}

.intro-entry {
  position: absolute;
  z-index: 8;
  left: calc(50% + clamp(10px, 1.3vw, 22px));
  top: calc(54.8% - clamp(14px, 1.9vh, 26px));
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(28px, 2.7vh, 36px);
  width: min(1160px, calc(100vw - 56px));
  transform: translate(-50%, -50%);
  text-align: center;
  isolation: isolate;
}

.intro-entry::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 48%;
  width: min(760px, 82vw);
  height: clamp(210px, 28vh, 340px);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.32) 34%, rgba(0, 0, 0, 0.13) 58%, transparent 78%);
  filter: blur(18px);
  pointer-events: none;
}

.intro-entry > * {
  position: relative;
  z-index: 1;
}

.intro-entry h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Krub", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(46px, 4.28vw, 90px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow:
    0 1px 16px rgba(0, 0, 0, 0.72),
    0 0 13px rgba(255, 255, 255, 0.5),
    0 0 42px rgba(142, 215, 255, 0.32);
}

.enter-button {
  position: relative;
  isolation: isolate;
  --button-glow-blur: 18px;
  --button-glow-opacity: 0;
  --button-glow-scale: 0.86;
  min-width: clamp(214px, 13.8vw, 278px);
  min-height: clamp(58px, 5.4vh, 72px);
  padding: 0 clamp(38px, 2.7vw, 56px);
  border: 1px solid rgba(220, 232, 255, 0.68);
  border-radius: 999px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.13), rgba(126, 203, 255, 0.07), rgba(255, 104, 218, 0.1)),
    rgba(7, 8, 14, 0.1);
  color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 28px rgba(147, 196, 255, 0.22),
    0 0 56px rgba(255, 128, 222, 0.11),
    inset 0 0 24px rgba(255, 255, 255, 0.06);
  font-size: clamp(19px, 1.18vw, 24px);
  font-weight: 350;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition:
    transform 260ms ease,
    color 780ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 760ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 980ms cubic-bezier(0.16, 1, 0.3, 1),
    background 1080ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: enter-breathe 3.6s ease-in-out infinite;
}

.enter-button::before,
.enter-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.enter-button::before {
  inset: -20px -28px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.72), transparent 42%),
    radial-gradient(ellipse at 24% 52%, rgba(139, 224, 255, 0.54), transparent 48%),
    radial-gradient(ellipse at 76% 46%, rgba(255, 151, 229, 0.46), transparent 52%);
  filter: blur(var(--button-glow-blur));
  opacity: var(--button-glow-opacity);
  transform: scale(var(--button-glow-scale));
  transition:
    opacity 940ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 940ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 940ms cubic-bezier(0.16, 1, 0.3, 1);
}

.enter-button::after {
  inset: -28px -42px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.6), transparent 42%),
    radial-gradient(ellipse at 26% 62%, rgba(116, 218, 255, 0.52), transparent 54%),
    radial-gradient(ellipse at 74% 34%, rgba(255, 122, 226, 0.5), transparent 54%),
    conic-gradient(from 110deg, transparent 0 12%, rgba(255, 255, 255, 0.62), rgba(133, 219, 255, 0.42), transparent 42% 54%, rgba(255, 151, 229, 0.42), transparent 82% 100%);
  filter: blur(22px) saturate(1.08);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 960ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 960ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .intro-particle-canvas {
    opacity: 0;
    filter: saturate(0.42) brightness(0.52) blur(5px);
    transform: translate3d(-0.8%, -2.4%, 0) scale(1.065);
  }

  .wordmark,
  .site-nav a,
  .intro-entry h1,
  .enter-button {
    opacity: 0;
  }

  .is-ready .wordmark,
  .is-ready .site-nav a,
  .is-ready .intro-entry h1,
  .is-ready .enter-button {
    opacity: 1;
  }

  .is-ready .intro-particle-canvas {
    animation: particle-emerge 2800ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  }

  .is-ready .wordmark {
    animation: ceremonial-rise 1100ms cubic-bezier(0.16, 1, 0.3, 1) 720ms both;
  }

  .is-ready .site-nav a {
    animation: ceremonial-rise 1050ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .is-ready .site-nav a:nth-child(1) {
    animation-delay: 980ms;
  }

  .is-ready .site-nav a:nth-child(2) {
    animation-delay: 1140ms;
  }

  .is-ready .site-nav a:nth-child(3) {
    animation-delay: 1300ms;
  }

  .is-ready .intro-entry h1 {
    animation: title-arrival 1400ms cubic-bezier(0.16, 1, 0.3, 1) 1650ms both;
  }

  .is-ready .enter-button {
    animation:
      button-arrival 1150ms cubic-bezier(0.16, 1, 0.3, 1) 2250ms both,
      enter-breathe 3.6s ease-in-out 3500ms infinite;
  }
}

.enter-button:hover,
.enter-button:focus-visible,
.enter-button.is-hovering {
  opacity: 1;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.98);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 1), rgba(230, 245, 255, 0.96), rgba(255, 235, 249, 0.98)),
    rgba(255, 255, 255, 0.98);
  color: rgba(8, 10, 16, 0.94);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.62),
    0 0 52px rgba(255, 255, 255, 0.62),
    0 0 92px rgba(158, 217, 255, 0.44),
    0 0 126px rgba(255, 149, 226, 0.28),
    inset 0 0 28px rgba(255, 255, 255, 0.38);
  outline: none;
}

.enter-button:hover::before,
.enter-button:focus-visible::before,
.enter-button.is-hovering::before {
  filter: blur(var(--button-glow-blur)) saturate(1.18);
}

.enter-button:hover::after,
.enter-button:focus-visible::after,
.enter-button.is-hovering::after {
  opacity: 0.88;
  transform: scale(1.02);
  filter: blur(25px) saturate(1.32);
  animation: button-hover-glow 1.85s ease-in-out infinite;
}

@keyframes enter-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 0 24px rgba(147, 196, 255, 0.2),
      0 0 48px rgba(255, 128, 222, 0.09),
      inset 0 0 22px rgba(255, 255, 255, 0.05);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 38px rgba(147, 196, 255, 0.34),
      0 0 82px rgba(255, 128, 222, 0.16),
      inset 0 0 30px rgba(255, 255, 255, 0.08);
  }
}

@keyframes button-hover-glow {
  0%,
  100% {
    transform: scale(0.96);
    filter: blur(18px) saturate(1.05);
  }

  48% {
    transform: scale(1.08);
    filter: blur(24px) saturate(1.28);
  }
}

@keyframes particle-emerge {
  0% {
    opacity: 0;
    filter: saturate(0.32) brightness(0.2) blur(11px);
    transform: scale(1.085);
  }

  42% {
    opacity: 0.64;
    filter: saturate(0.58) brightness(0.78) blur(3px);
  }

  100% {
    opacity: 1;
    filter: saturate(0.72) brightness(1) blur(0);
    transform: translate3d(-0.8%, -2.4%, 0) scale(1.018);
  }
}

@keyframes ceremonial-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.985);
    filter: blur(5px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes title-arrival {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(0.985);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes button-arrival {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.965);
    filter: blur(6px);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes grain-drift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 320px 210px, -250px 330px, 210px -280px;
  }
}

@keyframes aurora-breathe {
  from {
    transform: scale(1.08) translate3d(-1%, 0, 0);
    filter: blur(42px) saturate(1.28) contrast(1.04);
  }
  to {
    transform: scale(1.14) translate3d(1.5%, -1%, 0);
    filter: blur(48px) saturate(1.42) contrast(1.09);
  }
}

@keyframes intro-image-breathe {
  from {
    transform: scale(1.01) translate3d(-0.25%, 0, 0);
    filter: saturate(1.04) contrast(1.02) brightness(0.98);
  }
  to {
    transform: scale(1.035) translate3d(0.35%, -0.2%, 0);
    filter: saturate(1.18) contrast(1.07) brightness(1.07);
  }
}

@keyframes portal-core {
  0%,
  100% {
    transform: scale(0.96) rotate(-3deg);
    opacity: 0.76;
  }
  50% {
    transform: scale(1.06) rotate(4deg);
    opacity: 0.96;
  }
}

@keyframes portal-ring {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dust-drift {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 280px 180px, -220px 260px, 180px -210px;
  }
}
@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: auto 1fr;
  }

  .site-nav {
    justify-content: flex-end;
    gap: 24px;
  }
}

@media (max-width: 760px) {
  .experience {
    min-height: 760px;
  }

  .site-header {
    left: 22px;
    right: 22px;
    top: 24px;
  }

  .site-nav {
    display: none;
  }

  .intro-portal {
    width: 122vw;
    top: 52%;
  }

  .intro-entry {
    left: 50%;
    top: 52%;
    gap: 24px;
    width: min(430px, calc(100vw - 44px));
  }

  .intro-entry h1 {
    font-size: clamp(34px, 10.4vw, 46px);
    line-height: 0.98;
  }

  .enter-button {
    min-width: 194px;
    min-height: 58px;
    font-size: 17px;
  }
}