:root {
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;

  --noir: #000;
  --white: #fff;
  --gray: #D3D3D3;
  --pink: #ffd6f3;
  --cream: #faf0e6;

  --rubik: "Rubik", sans-serif;
  --mono: "JetBrains Mono", monospace;
  --instrument: "Instrument Serif", serif;

  --page-padding: clamp(18px, 4vw, 52px);
  --cubic: cubic-bezier(0.39, 0.1, 0.94, 0.76);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--noir);
  color: var(--white);
  font-family: var(--rubik);
}

body {
  overflow-x: hidden;
}

/* Lenis recommended setup */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Main scroll area */
.nona-hero-scroll {
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: 500vh;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 214, 243, 0.12), transparent 32%),
    linear-gradient(180deg, var(--noir), #000);
  overflow: visible;
  color: var(--white);
}

.nona-hero-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--noir);
  isolation: isolate;
}

.nona-hero-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at center, black, transparent 78%);
}

/* Top metadata */
.nona-hero-prelude {
  position: absolute;
  top: var(--space-md);
  left: var(--page-padding);
  right: var(--page-padding);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  text-transform: uppercase;
  color: var(--cream);
  will-change: transform, opacity, filter;
}

.nona-hero-kicker {
  opacity: 0.75;
  color: inherit;
}

/* Side rotated text */
.nona-hero-sidecopy {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  gap: var(--space-sm);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
  pointer-events: none;
  overflow: visible;
  width: max-content;
  min-width: min(680px, 80vh);
  justify-content: center;
  align-items: center;
  will-change: transform, opacity, filter;
}

.nona-hero-sidecopy span {
  display: inline-block;
  white-space: nowrap;
  color: inherit;
  padding-inline: var(--space-xs);
  will-change: transform, opacity;
}

.nona-hero-sidecopy-left {
  left: var(--page-padding);
  right: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center center;
}

.nona-hero-sidecopy-right {
  right: var(--page-padding);
  left: auto;
  transform: translate(50%, -50%) rotate(90deg);
  transform-origin: center center;
}

/* Center intro */
.nona-hero-center-copy {
  position: absolute;
  z-index: 4;
  width: min(760px, calc(100vw - var(--page-padding) * 2));
  text-align: center;
  pointer-events: none;
  color: var(--white);
  perspective: 1000px;
  will-change: transform, opacity, filter;
}

.nona-hero-overline {
  margin: 0 0 var(--space-sm);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  text-transform: uppercase;
  color: var(--pink);
  will-change: transform, opacity, filter;
}

.nona-hero-intro-title {
  margin: 0;
  overflow: hidden;
  font-family: var(--instrument);
  font-size: clamp(3.5rem, 12vw, 13rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: var(--white);
  text-transform: uppercase;
}

.nona-hero-intro-title .char,
.nona-hero-overlay-title .char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.nona-hero-intro-text {
  width: min(560px, 86vw);
  margin: var(--space-md) auto 0;
  font-family: var(--rubik);
  font-size: clamp(1rem, 1vw, 1.125rem);
  line-height: 1.35;
  color: var(--cream);
  will-change: transform, opacity, filter;
}

/* Video frame */
.nona-hero-video-frame {
  position: relative;
  z-index: 3;
  width: 300px;
  height: 300px;
  overflow: hidden;
  background: var(--noir);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 1px rgba(255, 214, 243, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.42);
  will-change: width, height, border-radius, transform;
}

.nona-hero-video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.16) 0px,
    rgba(255, 255, 255, 0.16) 1px,
    transparent 1px,
    transparent 7px
  );
  transform: translateY(-100%);
}

.nona-hero-video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.35;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 42%,
      rgba(255, 214, 243, 0.18) 50%,
      transparent 58%,
      transparent 100%
    );
  transform: translateX(-120%);
}

.nona-hero-video {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  will-change: transform;
}

.nona-hero-dark-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
}

.nona-hero-frame-label {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  mix-blend-mode: difference;
  pointer-events: none;
  will-change: transform, opacity;
}

.nona-hero-frame-label-top {
  top: var(--space-sm);
}

.nona-hero-frame-label-bottom {
  bottom: var(--space-sm);
}

/* Overlay */
.nona-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white);
  text-align: center;
  padding: var(--page-padding);
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nona-hero-date {
  position: absolute;
  top: var(--space-md);
  left: var(--page-padding);
  right: var(--page-padding);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  text-transform: uppercase;
  text-align: center;
  color: var(--cream);
}

.nona-hero-overlay-inner {
  width: min(980px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--white);
}

.nona-hero-overlay-kicker {
  margin: 0 0 var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  text-transform: uppercase;
  color: var(--pink);
}

.nona-hero-overlay-title {
  margin: 0;
  font-family: var(--instrument);
  font-size: clamp(3.75rem, 11vw, 10rem);
  font-style: italic;
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: var(--white);
  text-transform: uppercase;
}

.nona-hero-overlay-text {
  width: min(680px, 90vw);
  margin: var(--space-md) auto 0;
  font-family: var(--rubik);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.35;
  color: var(--cream);
}

.nona-hero-menu {
  margin-top: var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  text-transform: uppercase;
  color: var(--white);
}

.nona-hero-menu a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--cubic);
}

.nona-hero-menu a:hover {
  color: var(--pink);
}

.nona-hero-menu span {
  display: inline-flex;
  color: var(--pink);
  opacity: 0.8;
}

/* Progress */
.nona-hero-progress {
  position: absolute;
  left: var(--page-padding);
  right: var(--page-padding);
  bottom: var(--space-md);
  z-index: 7;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.nona-hero-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--pink);
  transform-origin: left center;
}

.nona-hero-bottom-note {
  position: absolute;
  right: var(--page-padding);
  bottom: calc(var(--space-md) + 12px);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  text-transform: uppercase;
  color: var(--cream);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Placeholder next section */
.nona-after-hero {
  min-height: 100vh;
  padding: var(--page-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream);
  color: var(--noir);
}

.nona-after-hero p {
  margin: 0 0 var(--space-sm);
  font-family: var(--mono);
  text-transform: uppercase;
}

.nona-after-hero h2 {
  margin: 0;
  font-family: var(--instrument);
  font-size: clamp(3rem, 10vw, 10rem);
  font-style: italic;
  line-height: 0.85;
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 18px;
    --space-lg: 36px;
  }

  .nona-hero-scroll {
    height: 420vh;
  }

  .nona-hero-prelude {
    top: var(--space-sm);
    left: var(--space-sm);
    right: var(--space-sm);
    font-size: 11px;
  }

  .nona-hero-sidecopy {
    position: absolute;
    left: var(--space-sm);
    right: var(--space-sm);
    z-index: 5;
    width: auto;
    min-width: unset;
    max-width: calc(100vw - var(--space-sm) * 2);
    gap: var(--space-xs);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
    transform: none;
    transform-origin: center center;
  }

  .nona-hero-sidecopy-left {
    top: calc(var(--space-sm) + 28px);
    bottom: auto;
    left: var(--space-sm);
    right: var(--space-sm);
    transform: none;
  }

  .nona-hero-overlay-title {
  font-size: clamp(2rem, 8vw, 8rem);
    letter-spacing: 0;
    padding-top: 5px;
    padding-bottom: 5px
}

  
  .nona-hero-sidecopy-right {
    top: auto;
    bottom: calc(var(--space-sm) + 28px);
    left: var(--space-sm);
    right: var(--space-sm);
    transform: none;
  }

  .nona-hero-center-copy {
    width: calc(100vw - var(--space-md) * 2);
  }

  .nona-hero-intro-title {
    font-size: clamp(2.1rem, 12vw, 4.8rem);
    letter-spacing: 0;
    padding-top: 5px;
    padding-bottom: 5px
  }

  .nona-hero-intro-text {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
  }

  .nona-hero-video-frame {
    width: 210px;
    height: 210px;
  }

  .nona-hero-overlay {
    padding: var(--space-md);
  }

  .nona-hero-date {
    top: var(--space-sm);
    left: var(--space-sm);
    right: var(--space-sm);
    font-size: 11px;
  }



  .nona-hero-overlay-text {
    font-size: clamp(0.95rem, 3.8vw, 1.05rem);
  }

  .nona-hero-menu {
    gap: var(--space-xs);
    font-size: 11px;
  }

  .nona-hero-progress {
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
  }

  .nona-hero-bottom-note {
    display: none;
  }
}

/* --------------------- Ignore the following CSS, it's just for the dev notes and has no effect on the main design.--------------------- */
.nona-dev-notes{width:min(900px,100%);margin-top:var(--space-md);font-family:var(--rubik);font-size:clamp(0.95rem,1.1vw,1.1rem);line-height:1.55}
.nona-dev-notes h3{margin:0 0 var(--space-sm);font-family:var(--mono);font-size:clamp(0.85rem,1vw,1rem);text-transform:uppercase;letter-spacing:0.04em}
.nona-dev-notes p{margin:0 0 var(--space-sm)}
.nona-dev-notes pre{width:100%;max-width:100%;margin:var(--space-md) 0;padding:var(--space-md);overflow-x:auto;background:rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.12);border-radius:10px}
.nona-dev-notes code{font-family:var(--mono);font-size:0.85rem;line-height:1.6;white-space:pre}
#nonatized-landing-highlight p a{color:black;text-decoration:underline;text-underline-offset:0.18em;transform:all 0.5s cubic-bezier(0.39,0.1,0.94,0.76)}
#nonatized-landing-highlight p a:hover{color:pink;transform:all 0.5s cubic-bezier(0.39,0.1,0.94,0.76)}