.v2-project-worlds {
  position: relative;
  z-index: 2;
}

.v2-project-worlds::before {
  content: "";
  position: absolute;
  top: -14vh;
  left: 0;
  right: 0;
  height: 30vh;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(3,2,7,.18) 55%, transparent);
}

.project-world {
  --world-accent: 154 127 232;
  --world-accent-2: 90 148 225;
  --world-focus: 0;
  --world-veil: 1;
  position: relative;
  min-height: 100svh;
  padding: clamp(106px, 11.5vh, 148px) 0 clamp(72px, 8vh, 112px);
  display: grid;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  contain: layout paint style;
  scroll-margin-top: 0;
}

.project-world::before {
  content: attr(data-index);
  position: absolute;
  top: 47%;
  left: clamp(-34px, -1vw, -8px);
  right: auto;
  z-index: -1;
  transform: translateY(-50%) translateX(calc((1 - var(--world-progress, .5)) * 34px));
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(18rem, 33vw, 39rem);
  font-weight: 780;
  line-height: .78;
  letter-spacing: -.12em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgb(var(--world-accent) / .42);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.08) 6%,
      rgb(var(--world-accent) / .36) 42%,
      rgb(var(--world-accent-2) / .18) 72%,
      transparent 96%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 0 18px rgb(var(--world-accent) / .16))
    drop-shadow(0 0 54px rgb(var(--world-accent-2) / .12));
  opacity: calc(.30 + var(--world-focus) * .52);
  pointer-events: none;
  will-change: auto;
}

.project-world--reverse::before {
  left: auto;
  right: clamp(-34px, -1vw, -8px);
}

.project-world.is-active::before {
  filter:
    drop-shadow(0 0 20px rgb(var(--world-accent) / .38))
    drop-shadow(0 0 86px rgb(var(--world-accent-2) / .24));
  animation: v2-world-number-breathe 6.8s ease-in-out infinite;
}

@keyframes v2-world-number-breathe {
  0%, 100% {
    -webkit-text-stroke-color: rgb(var(--world-accent) / .42);
    text-shadow: 0 0 0 rgb(var(--world-accent) / 0);
  }
  50% {
    -webkit-text-stroke-color: rgb(var(--world-accent) / .70);
    text-shadow:
      0 0 22px rgb(var(--world-accent) / .18),
      0 0 64px rgb(var(--world-accent-2) / .12);
  }
}

.project-world::after {
  content: "";
  position: absolute;
  inset: 9% 3%;
  z-index: -3;
  border-radius: 50%;
  background:
    radial-gradient(circle at 65% 45%, rgb(var(--world-accent) / .11), transparent 27%),
    radial-gradient(circle at 42% 55%, rgb(var(--world-accent-2) / .075), transparent 38%);
  opacity: calc(.14 + var(--world-focus) * .78);
  filter: none;
}

.world-shell {
  width: var(--v2-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, .74fr) minmax(520px, 1.35fr);
  align-items: center;
  gap: clamp(54px, 7vw, 118px);
}

.project-world--reverse .world-shell {
  grid-template-columns: minmax(520px, 1.35fr) minmax(300px, .74fr);
}

.project-world--reverse .world-copy { order: 2; }
.project-world--reverse .world-visual { order: 1; }

.world-copy {
  position: relative;
  z-index: 5;
  max-width: 540px;
  opacity: calc(.18 + var(--world-focus) * .82);
  transform: translate3d(0, calc((1 - var(--world-focus)) * 30px), 0);
  filter: none;
  will-change: auto;
}

.world-overline {
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgb(var(--world-accent) / .94);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.world-overline::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--world-accent) / .15), rgb(var(--world-accent) / .9));
}

.world-title {
  margin: 0;
  color: #fff;
  font-family: Manrope, Inter, sans-serif;
  font-size: clamp(2.85rem, 4.8vw, 4.8rem);
  font-weight: 560;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.world-lead {
  max-width: 580px;
  margin: 20px 0 0;
  color: rgba(239,235,250,.78);
  font-size: clamp(1rem, 1.08vw, 1.1rem);
  line-height: 1.72;
  text-wrap: pretty;
}

.world-tags {
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.world-tags li {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: 999px;
  color: rgba(246,242,255,.66);
  background: rgba(255,255,255,.025);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .025em;
}

.world-action {
  width: max-content;
  margin-top: 34px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.90);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 750;
  letter-spacing: .02em;
}

.world-action span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--world-accent) / .28);
  border-radius: 50%;
  background: rgb(var(--world-accent) / .08);
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.world-action svg { width: 15px; height: 15px; }
.world-action:hover span,
.world-action:focus-visible span {
  transform: translateX(3px);
  border-color: rgb(var(--world-accent) / .62);
  background: rgb(var(--world-accent) / .16);
}

.world-visual {
  position: relative;
  z-index: 3;
  min-width: 0;
  opacity: calc(.18 + var(--world-focus) * .82);
  transform: translate3d(0, calc((1 - var(--world-focus)) * 44px + var(--world-shift, 0px)), 0) scale(calc(.96 + var(--world-focus) * .04));
  filter: none;
  will-change: auto;
}

.world-visual::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--world-accent) / .24), rgb(var(--world-accent-2) / .08) 34%, transparent 66%);
  filter: none;
  opacity: .72;
}

.world-device {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: clamp(22px, 2.4vw, 38px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), transparent 22%),
    rgba(9, 8, 15, .84);
  box-shadow:
    0 42px 140px rgba(0,0,0,.50),
    0 0 80px rgb(var(--world-accent) / .07),
    inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform:
    perspective(1600px)
    translateZ(calc(var(--world-focus) * 2px))
    rotateX(var(--world-rotate-x, 0deg))
    rotateY(var(--world-rotate-y, 0deg));
  transition: border-color 260ms ease;
  will-change: auto;
}

.project-world.is-active .world-device {
  border-color: rgb(var(--world-accent) / .25);
}

.world-device-chrome {
  height: 30px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.38);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.world-device-dots {
  display: flex;
  gap: 5px;
}

.world-device-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

.world-device-screen {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: clamp(14px, 1.7vw, 25px);
  background: #08070d;
  aspect-ratio: 16 / 9;
}

.world-device-screen picture,
.world-device-screen img {
  width: 100%;
  height: 100%;
  display: block;
}

.world-device-screen img {
  object-fit: cover;
  object-position: center;
  transform: scale(var(--world-image-scale, 1.04));
  filter: contrast(1.02) saturate(.94) brightness(.88);
  transition: filter 260ms ease;
}

.project-world.is-active .world-device-screen img {
  filter: contrast(1.04) saturate(1) brightness(.96);
}

.world-device-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, rgba(255,255,255,.08), transparent 18% 82%, rgba(255,255,255,.03)),
    linear-gradient(to top, rgba(3,2,7,.18), transparent 36%),
    linear-gradient(180deg, rgba(3,2,7, calc(var(--world-veil) * .22)), transparent 34%, rgba(3,2,7, calc(var(--world-veil) * .18)) 100%);
  mix-blend-mode: screen;
}

.world-orbit-label {
  position: absolute;
  z-index: 4;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  color: rgba(255,255,255,.67);
  background: rgba(7,6,12,.86);
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: .65rem;
  font-weight: 650;
  letter-spacing: .035em;
}

.world-orbit-label--a { top: 10%; right: -3%; transform: translateY(var(--world-label-a-shift, 0px)); }
.world-orbit-label--b { bottom: 12%; left: -4%; transform: translateY(var(--world-label-b-shift, 0px)); }

.project-world--lyra { --world-accent: 159 131 234; --world-accent-2: 79 146 234; }
.project-world--king { --world-accent: 225 86 92; --world-accent-2: 241 137 73; }
.project-world--barracuda { --world-accent: 74 188 224; --world-accent-2: 62 118 184; }
.project-world--flor { --world-accent: 224 159 196; --world-accent-2: 169 133 211; }

.project-world--king .world-device-screen img { object-position: center 42%; }
.project-world--barracuda .world-device-screen img { object-position: center; }
.project-world--flor .world-device-screen img { filter: contrast(1.01) saturate(.92) brightness(.96); }
.project-world--flor.is-active .world-device-screen img { filter: contrast(1.02) saturate(1) brightness(1.02); }

.v2-world-rail {
  position: fixed;
  right: clamp(18px, 2vw, 34px);
  top: 50%;
  z-index: 120;
  display: grid;
  gap: 10px;
  transform: translateY(-50%) translateX(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}

body.worlds-visible .v2-world-rail {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

.v2-world-rail button {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.v2-world-rail button::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.30);
  box-shadow: 0 0 0 0 rgba(255,255,255,.08);
  transition: width 220ms ease, height 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.v2-world-rail button.is-active::before {
  width: 7px;
  height: 7px;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.07), 0 0 18px rgba(181,159,241,.35);
}

.v2-world-rail button span {
  position: absolute;
  right: 30px;
  padding: 6px 9px;
  border-radius: 8px;
  color: rgba(255,255,255,.76);
  background: rgba(7,6,12,.72);
  font-size: .62rem;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(5px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.v2-world-rail button:hover span,
.v2-world-rail button:focus-visible span {
  opacity: 1;
  transform: translateX(0);
}

.v2-cinematic-exit {
  position: relative;
  z-index: 4;
  height: 18vh;
  min-height: 120px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--scene-rgb) / .12), transparent 48%),
    linear-gradient(180deg, rgba(4,3,9,0) 0%, rgba(7,5,14,.42) 54%, rgba(8,6,17,.84) 100%);
}

.v2-section-bridge {
  position: relative;
  z-index: 4;
  height: clamp(88px, 12vh, 148px);
  margin-top: -1px;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,6,17,.88), rgba(8,6,17,.96) 58%, rgba(8,6,17,0) 100%),
    radial-gradient(circle at 50% 0%, rgb(var(--scene-rgb) / .20), transparent 58%);
}

.v2-section-bridge::before {
  content: "";
  position: absolute;
  inset: 8% 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--scene-rgb) / .38), transparent);
  opacity: .75;
}

.v2-section-bridge::after {
  content: "";
  position: absolute;
  inset: auto 10% 0;
  height: 72%;
  background: radial-gradient(circle at 50% 0%, rgb(var(--scene-rgb-soft) / .20), transparent 72%);
  filter: blur(26px);
  opacity: .65;
}


.project-world.is-near-viewport .world-copy,
.project-world.is-near-viewport .world-visual {
  will-change: transform, opacity;
}

.project-world.is-active .world-device {
  will-change: transform;
}

body.is-scrolling .world-device-screen img {
  transition: none !important;
}


@media (min-width: 901px) and (pointer: fine) {
  .project-world {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
  }
}

@media (max-width: 900px), (pointer: coarse) {
  .project-world::before {
    transition: none;
    filter: drop-shadow(0 0 24px rgb(var(--world-accent) / .22));
  }

  .project-world.is-active::before {
    animation: none;
    filter: drop-shadow(0 0 30px rgb(var(--world-accent) / .30));
  }

  .project-world::after {
    filter: none;
    background:
      radial-gradient(circle at 62% 44%, rgb(var(--world-accent) / .14), transparent 31%),
      radial-gradient(circle at 40% 58%, rgb(var(--world-accent-2) / .10), transparent 43%);
  }

  .world-copy,
  .world-visual {
    filter: none !important;
    transition: none !important;
  }

  .world-copy {
    transform: translate3d(0, calc((1 - var(--world-focus)) * 22px), 0);
    opacity: calc(.32 + var(--world-focus) * .68);
  }

  .world-visual {
    transform: translate3d(0, calc((1 - var(--world-focus)) * 28px), 0) scale(calc(.975 + var(--world-focus) * .025));
    opacity: calc(.38 + var(--world-focus) * .62);
  }

  .world-visual::before {
    inset: -8%;
    filter: none;
    opacity: .65;
  }

  .world-device {
    transform: translate3d(0,0,0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
      linear-gradient(145deg, rgba(255,255,255,.075), transparent 22%),
      rgba(9, 8, 15, .88);
    box-shadow:
      0 26px 72px rgba(0,0,0,.42),
      0 0 54px rgb(var(--world-accent) / .06),
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  .world-device-screen img,
  .project-world.is-active .world-device-screen img {
    filter: contrast(1.03) saturate(.98) brightness(.94);
    transition: none;
  }
}

@media (max-width: 1120px) {
  .world-shell,
  .project-world--reverse .world-shell {
    grid-template-columns: minmax(260px, .72fr) minmax(460px, 1.2fr);
    gap: 54px;
  }
  .world-title { font-size: clamp(3.5rem, 7vw, 6rem); }
}

@media (max-width: 900px) {
  .project-world {
    min-height: 112svh;
    padding-top: 118px;
  }

  .world-shell,
  .project-world--reverse .world-shell {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .project-world--reverse .world-copy,
  .project-world--reverse .world-visual { order: initial; }

  .world-copy { max-width: 660px; }
  .world-visual { width: min(880px, 100%); }
  .v2-world-rail { display: none; }
  .project-world::before,
  .project-world--reverse::before { top: 24%; left: -3vw; right: auto; font-size: 46vw; opacity: calc(.40 + var(--world-focus) * .42); -webkit-text-stroke-width: 1.25px; }
}

@media (max-width: 620px) {
  .project-world {
    min-height: 102svh;
    padding: 98px 0 70px;
  }
  .world-shell { gap: 32px; }
  .world-title { font-size: clamp(3.15rem, 18vw, 5rem); }
  .world-lead { margin-top: 20px; font-size: .96rem; line-height: 1.62; }
  .world-overline { margin-bottom: 16px; font-size: .66rem; }
  .world-tags { margin-top: 22px; gap: 6px; }
  .world-tags li { font-size: .66rem; padding: 7px 9px; }
  .world-action { margin-top: 26px; }
  .world-device { padding: 7px; border-radius: 21px; }
  .world-device-chrome { height: 25px; font-size: .52rem; padding: 0 8px; }
  .world-device-screen { border-radius: 14px; }
  .world-orbit-label { display: none; }
  .project-world::before,
  .project-world--reverse::before { top: 23%; left: -5vw; right: auto; font-size: 49vw; opacity: calc(.44 + var(--world-focus) * .40); -webkit-text-stroke: 1.15px rgb(var(--world-accent) / .48); }
}