/* ============================================================
   AUREN STUDIO — SECTION 03 / STUDIO
   Uncoiled trajectory: spiral as system, not object.
   ============================================================ */

.studio {
  position: relative;
  min-height: 210vh;
  background: var(--c-black);
  color: var(--c-ivory);
  overflow: hidden;
}
.studio::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  background: linear-gradient(to bottom, rgba(7, 8, 8, 0) 0%, var(--c-black) 100%);
  pointer-events: none;
  z-index: 6;
}

/* ---- environment ------------------------------------------ */
.studio__env {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.studio__grid-plane {
  position: absolute;
  inset: -6% 0;
}
.studio__grid-plane--a { opacity: 0.42; }
.studio__grid-plane--b { opacity: 0.28; }
.studio__grid {
  width: 100%;
  height: 100%;
}
.studio__grid line {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  fill: none;
}
.studio__grid .grid__v line { stroke: var(--hair); }
.studio__grid .grid__h line { stroke: rgba(255, 255, 255, 0.022); }
.studio__grid .grid__gold line { stroke: var(--hair-gold); }

.studio__mark {
  position: absolute;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
}
.studio__mark::before,
.studio__mark::after {
  content: '';
  position: absolute;
  background: var(--c-gold-14);
}
.studio__mark::before { left: 0; top: 3px; width: 7px; height: 1px; }
.studio__mark::after { left: 3px; top: 0; width: 1px; height: 7px; }
.studio__mark--a { left: 16.666%; top: 28%; }
.studio__mark--b { left: 83.333%; top: 72%; }

/* ---- trajectory ------------------------------------------- */
.studio__traj {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
}
.studio__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.studio__svg--mob { display: none; }

.studio__path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio__path--ghost {
  stroke: url(#traj-desk);
  stroke-width: 2.2;
  opacity: 0.22;
  filter: url(#traj-soft);
}
.studio__path--core {
  stroke: url(#traj-desk);
  stroke-width: 1.15;
}

/* ---- stage (typography + nodes) --------------------------- */
.studio__stage {
  position: relative;
  z-index: 2;
  min-height: 210vh;
  padding: 0 var(--gutter);
}

.studio__label {
  position: absolute;
  top: 18vh;
  left: var(--gutter);
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
}
.studio__index {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--c-gold-42);
}
.studio__heading {
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ivory-60);
}

.studio__lead {
  position: absolute;
  top: 26vh;
  left: var(--gutter);
  max-width: min(62vw, 920px);
  margin: 0;
  font-size: var(--fs-studio);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.034em;
  text-transform: uppercase;
  color: var(--c-ivory);
  /* Parallax + Studio→Contact exit compose without fighting transforms */
  transform: translate3d(0, calc(var(--par-y, 0px) + var(--exit-y, 0px)), 0);
}
.studio__line {
  display: block;
  overflow: hidden;
  padding: 0.03em 0.06em 0.06em 0;
  margin: -0.03em -0.06em -0.06em 0;
}
.studio__inner {
  display: block;
  transform: translate3d(0, calc(var(--reveal, 0) * 108%), 0);
}

.studio__answer {
  position: absolute;
  top: 44%;
  right: clamp(40px, 8vw, 140px);
  left: auto;
  max-width: min(42vw, 520px);
  margin: 0;
  text-align: right;
  font-size: var(--fs-studio-answer);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--c-ivory-warm);
  transform: translate3d(0, calc(var(--par-y, 0px) + var(--exit-y, 0px)), 0);
}
.studio__answer-line {
  display: block;
  overflow: hidden;
}
.studio__answer-inner {
  display: block;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transform: translate3d(0, calc(var(--reveal, 0) * 108%), 0);
}
.studio__answer-inner--serif {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -0.008em;
  text-transform: none;
}

/* ---- nodes ------------------------------------------------ */
.studio__nodes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.studio__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: max-content;
  max-width: 220px;
  transform: translate3d(calc(var(--px, 0) * 0.35px), calc(var(--py, 0) * 0.35px), 0);
}
.studio__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 1px rgba(190, 145, 65, 0.35);
  opacity: 0.35;
  transform: scale(0.82);
  transition: none;
}
.studio__note {
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-42);
  opacity: 0;
}
.studio__node-id {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ivory);
  opacity: 0.28;
}

.studio__node.is-active .studio__dot {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 1px rgba(190, 145, 65, 0.55);
}
.studio__node.is-active .studio__note { opacity: 1; }
.studio__node.is-active .studio__node-id { opacity: 1; }

/* path-aligned, not a grid */
.studio__node--strategy { left: 11%; top: 31%; }
.studio__node--art { left: 44%; top: 55%; }
.studio__node--dev { left: 68%; top: 76%; }

.studio__next {
  position: absolute;
  right: var(--gutter);
  bottom: 7vh;
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--c-ivory);
  opacity: 0.24;
}
.studio__next span {
  margin-right: 0.75em;
  color: var(--c-gold-42);
}

/* ---- js initial states ------------------------------------ */
.js .studio__label { opacity: 0; }
.js .studio__inner { --reveal: 1; }
.js .studio__answer-inner { --reveal: 1; }

/* ---- reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .studio__label { opacity: 1; }
  .js .studio__inner,
  .js .studio__answer-inner { --reveal: 0; }
  .studio__node .studio__dot { opacity: 1; transform: none; }
  .studio__node .studio__note { opacity: 1; }
  .studio__node .studio__node-id { opacity: 1; }
  .studio__traj { transform: none; }
  .studio__node { transform: none; }
}

/* ---- mobile / tablet -------------------------------------- */
@media (max-width: 900px) {
  .studio { min-height: 240vh; }
  .studio__stage { min-height: 240vh; }

  .studio__svg--desk { display: none; }
  .studio__svg--mob { display: block; }
  .studio__path--ghost { stroke: url(#traj-mob); }
  .studio__path--core { stroke: url(#traj-mob); stroke-width: 1.25; }

  .studio__label {
    top: 10vh;
    left: var(--gutter);
  }

  .studio__lead {
    top: 16vh;
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
    font-size: clamp(2.4rem, 11vw, 3.6rem);
    line-height: 0.94;
  }

  .studio__answer {
    top: 46%;
    left: var(--gutter);
    right: auto;
    max-width: 16ch;
    text-align: left;
    font-size: clamp(1.5rem, 6.4vw, 2.2rem);
  }

  .studio__node--strategy { left: var(--gutter); top: 30%; }
  .studio__node--art { left: auto; right: var(--gutter); top: 54%; }
  .studio__node--dev { left: var(--gutter); top: 76%; }

  .studio__next {
    right: auto;
    left: var(--gutter);
    bottom: 5vh;
  }

  .studio__mark--b { display: none; }
}