:root {
  color-scheme: dark;
  --rasa-color-void: #06050a;
  --rasa-color-text: #fff;
  --rasa-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --rasa-font-interface: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rasa-display-weight: 600;
  --rasa-motion-arrival-duration: 1900ms;
  --rasa-motion-arrival-delay: 460ms;
  --rasa-motion-arrival-easing: cubic-bezier(0.18, 0.72, 0.22, 1);
  --rasa-motion-popover-easing: ease-out;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--rasa-color-void);
}

body {
  color: var(--rasa-color-text);
  font-family: var(--rasa-font-interface);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button {
  color: inherit;
  font: inherit;
}

.threshold {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--rasa-color-void);
}

.rasa-field,
.shader-fallback,
.grain,
.edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rasa-field {
  z-index: -4;
  display: block;
  opacity: 0;
  transition: opacity 240ms ease;
}

.rasa-field.is-ready {
  opacity: 1;
}

.shader-fallback {
  z-index: -5;
  background:
    radial-gradient(circle at 62% 38%, rgba(93, 66, 255, 0.82), transparent 32%),
    radial-gradient(circle at 28% 70%, rgba(0, 145, 136, 0.55), transparent 35%),
    #06050a;
}

.grain {
  z-index: -2;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
}

.edge {
  z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 0 18vw rgba(0, 0, 0, 0.58);
}

.hero {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
}

.house-title {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  color: var(--rasa-color-text);
  font-family: var(--rasa-font-display);
  font-optical-sizing: auto;
  font-synthesis: none;
  font-weight: var(--rasa-display-weight);
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.18);
  mix-blend-mode: screen;
}

.word {
  position: absolute;
  display: block;
  line-height: 0.82;
  white-space: nowrap;
}

.hero.is-arriving .word {
  animation: navrasa-arrival var(--rasa-motion-arrival-duration)
    var(--rasa-motion-arrival-easing) var(--rasa-motion-arrival-delay) both;
  will-change: opacity, filter, transform;
}

.word-navrasa {
  top: calc(50% - 5px);
  left: 50%;
  font-size: clamp(5rem, 15vw, 15rem);
  font-style: italic;
  letter-spacing: -0.018em;
  transform: translate(-50%, -50%);
}

.word-house-of {
  top: 38%;
  left: 50%;
  font-size: clamp(1.45rem, 3vw, 3.1rem);
  font-style: normal;
  letter-spacing: 0.025em;
  transform: translate(-50%, -50%);
}

@keyframes navrasa-arrival {
  from {
    opacity: 0;
    scale: 0.965;
    translate: 0 0.11em;
    filter: blur(14px) brightness(0.82);
  }

  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    filter: blur(0) brightness(1);
  }
}

.manifesto {
  position: absolute;
  z-index: 4;
  right: 32px;
  bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.manifesto-trigger {
  position: relative;
  z-index: 2;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.46);
  background: transparent;
  color: var(--rasa-color-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.05em;
}

.manifesto-card {
  --edge-opacity: 0;
  --edge-x: 50%;
  --edge-y: 50%;
  --edge-stroke-width: 0.75px;
  --edge-base-opacity: 0.3;
  --edge-highlight-size: 140px;
  --edge-blur: 8px;
  --edge-halo-opacity: 0.5;
  --edge-fade-duration: 120ms;
  --edge-core-color: #f2feff;
  --edge-warm-color: #fff;
  --edge-cool-color: #27d8ff;
  --manifesto-card-width: 280px;
  --manifesto-fade-duration: 200ms;
  --manifesto-move-duration: 320ms;
  position: absolute;
  right: 0;
  bottom: 44px;
  width: min(var(--manifesto-card-width), calc(100vw - 40px));
  padding: 20px 22px;
  border: 1px solid rgb(255 255 255 / var(--edge-base-opacity));
  border-radius: 2px 22px 2px 22px;
  background: rgba(8, 8, 12, 0.44);
  color: var(--rasa-color-text);
  opacity: 0;
  isolation: isolate;
  overflow: visible;
  pointer-events: none;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition:
    opacity var(--manifesto-fade-duration) var(--rasa-motion-popover-easing),
    transform var(--manifesto-move-duration) var(--rasa-motion-popover-easing);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.manifesto-card::before,
.manifesto-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  opacity: var(--edge-opacity);
  pointer-events: none;
  transition: opacity var(--edge-fade-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

.manifesto-card::before {
  z-index: 2;
  padding: var(--edge-stroke-width);
  background: radial-gradient(
    circle var(--edge-highlight-size) at var(--edge-x) var(--edge-y),
    color-mix(in srgb, var(--edge-core-color) 98%, transparent) 0,
    color-mix(in srgb, var(--edge-warm-color) 94%, transparent) 18%,
    color-mix(in srgb, var(--edge-cool-color) 82%, transparent) 46%,
    color-mix(in srgb, var(--edge-cool-color) 16%, transparent) 66%,
    transparent 78%
  );
  mix-blend-mode: screen;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.manifesto-card::after {
  z-index: 0;
  inset: 0;
  padding: var(--edge-stroke-width);
  background: radial-gradient(
    circle calc(var(--edge-highlight-size) + 2px) at var(--edge-x) var(--edge-y),
    color-mix(in srgb, var(--edge-core-color) 46%, transparent) 0,
    color-mix(in srgb, var(--edge-warm-color) 28%, transparent) 20%,
    color-mix(in srgb, var(--edge-cool-color) 22%, transparent) 50%,
    transparent 78%
  );
  filter: blur(var(--edge-blur));
  mix-blend-mode: screen;
  opacity: calc(var(--edge-opacity) * var(--edge-halo-opacity));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.manifesto-card p {
  position: relative;
  z-index: 3;
  margin: 0;
  color: var(--rasa-color-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: -0.006em;
}

.manifesto-card[data-edge-glow="true"] {
  --edge-opacity: 1;
}

.manifesto:focus-within .manifesto-card,
.manifesto[data-open="true"] .manifesto-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

@media (max-width: 720px) {
  .word-navrasa {
    font-size: clamp(4.1rem, 17vw, 7rem);
  }

  .manifesto {
    right: 20px;
    bottom: 20px;
  }

  .manifesto-card {
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rasa-field,
  .manifesto-card {
    transition-duration: 0.01ms;
  }

  .manifesto-card::before,
  .manifesto-card::after {
    opacity: 0 !important;
    transition: none;
  }

  .hero.is-arriving .word {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
  }
}