/* Batch 1.2: targeted visual polish only. */

.hero h1 span:last-child {
  color: rgba(255, 250, 247, 0.64);
}

.transformation-scene {
  min-height: 160svh;
  padding-block: 3svh 1svh;
}

.narrative-beat {
  min-height: 70svh;
}

.reputation-beat {
  min-height: 64svh;
}

.experience-human-context {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0.29;
  pointer-events: none;
  mask-image: linear-gradient(112deg, transparent 0%, #000 16%, #000 66%, transparent 94%);
  -webkit-mask-image: linear-gradient(112deg, transparent 0%, #000 16%, #000 66%, transparent 94%);
  transition: opacity 1s var(--ease-standard), filter 1s var(--ease-standard);
}

.experience-human-context::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 10, 16, 0.32), transparent 36%, rgba(11, 10, 16, 0.52)),
    linear-gradient(180deg, rgba(11, 10, 16, 0.48), transparent 28% 62%, rgba(11, 10, 16, 0.82));
}

.experience-human-context picture,
.experience-human-context img {
  width: 100%;
  height: 100%;
}

.experience-human-context img {
  max-width: none;
  object-fit: cover;
  object-position: 55% center;
  filter: saturate(0.58) contrast(1.04) brightness(0.68);
  transform: scale(1.05);
}

.transformation-visual.is-reputation .experience-human-context {
  opacity: 0.11;
  filter: blur(1.5px);
}

.signal-paths {
  z-index: 1;
}

.product-primary {
  right: 0;
  width: min(36rem, 44vw);
}

.product-detail {
  bottom: 8%;
  left: 2%;
  width: min(23rem, 27vw);
}

.product-detail-crop {
  height: clamp(13rem, 17vw, 17rem);
  border-color: rgba(255, 250, 247, 0.13);
}

.product-detail-crop img {
  transform: translateY(-2%) scale(1.01);
}

.product-detail figcaption {
  color: rgba(255, 250, 247, 0.68);
}

.network-origin {
  width: min(19rem, 26vw);
  height: 7rem;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-inline: auto;
  padding-left: 1.5rem;
  border: 0;
  border-left: 1px solid rgba(255, 93, 157, 0.38);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255, 93, 157, 0.07), transparent 78%);
  color: rgba(255, 250, 247, 0.72);
}

.network-origin::before {
  inset: auto;
  top: 50%;
  right: -5.5rem;
  left: 100%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255, 93, 157, 0.42), transparent);
}

.network-origin::after {
  content: none;
}

.network-origin span::after {
  content: "between people";
  display: block;
  margin-top: 0.55rem;
  color: rgba(255, 250, 247, 0.44);
  font-size: 0.7rem;
  font-weight: 520;
  letter-spacing: 0.02em;
  text-transform: none;
}

.network-origin i {
  top: 50%;
  left: -0.29rem;
  transform: translateY(-50%);
}

.context-relationships {
  top: 42%;
  left: 33%;
  color: rgba(245, 187, 145, 0.72) !important;
}

.footer-brand p,
.footer-meta {
  color: rgba(255, 250, 247, 0.7);
  font-size: max(0.9rem, var(--step--1));
}

.footer-links a,
.social-links a {
  color: rgba(255, 250, 247, 0.82);
  font-size: max(0.9rem, var(--step--1));
}

@media (max-width: 60rem) {
  .transformation-scene,
  .narrative-beat,
  .reputation-beat {
    min-height: auto;
  }

  .experience-human-context {
    opacity: 0.24;
  }

  .product-primary {
    right: 5%;
    width: min(32rem, 56vw);
  }

  .product-detail {
    bottom: 5%;
    left: 4%;
    width: min(22rem, 39vw);
  }

  .product-detail-crop {
    height: min(16rem, 27vw);
  }
}

@media (max-width: 45rem) {
  .transformation-scene {
    padding-block: var(--space-5) var(--space-4);
  }

  .experience-human-context {
    opacity: 0.21;
    mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 72%, transparent 100%);
  }

  .experience-human-context img {
    object-position: 58% center;
  }

  .product-primary {
    right: -2%;
    width: min(20rem, 80vw);
  }

  .product-detail {
    bottom: 3%;
    left: -1%;
    width: min(14rem, 54vw);
  }

  .product-detail-crop {
    height: min(13rem, 48vw);
  }

  .network-origin {
    top: 5.5rem;
    right: auto;
    left: 0;
    width: 10.5rem;
    height: 5rem;
    padding-left: 1rem;
    opacity: 1;
  }

  .network-origin::before {
    right: -3.25rem;
  }

  .network-origin span::after {
    margin-top: 0.35rem;
    font-size: 0.62rem;
  }

  .context-relationships {
    top: 29%;
    left: 37%;
  }

  .context-people {
    top: 19%;
    left: 4%;
  }

  .context-work {
    top: 29%;
    right: 1%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-human-context,
  .experience-human-context img {
    filter: none;
    transform: none;
  }

  .transformation-visual.is-reputation .experience-human-context {
    opacity: 0.14;
  }
}
/* Batch 1.3: final rhythm, anchor, and reduced-motion polish. */

#experience,
#reputation,
#safety,
#about {
  scroll-margin-top: calc(var(--header-height) + clamp(1rem, 3svh, 2.5rem));
}

.product-scene {
  min-height: max(46rem, 94svh);
  padding-block: var(--space-5);
}

.product-composition {
  min-height: min(51rem, 64vw);
}

.safety-scene {
  min-height: max(43rem, 84svh);
  padding-block: var(--space-5);
}

.safety-layout {
  gap: clamp(1.75rem, 4vw, 4.5rem);
}

.safety-visual {
  min-height: min(45rem, 55vw);
}

.safety-visual::before {
  width: 70%;
  border-color: rgba(119, 215, 220, 0.12);
  background:
    radial-gradient(circle, rgba(119, 215, 220, 0.1), transparent 60%),
    linear-gradient(145deg, rgba(255, 93, 157, 0.035), transparent 48%);
}

.safety-thread {
  top: -18%;
  left: 51%;
  height: 136%;
  background: linear-gradient(
    transparent,
    rgba(255, 93, 157, 0.58) 16%,
    rgba(156, 131, 255, 0.72) 48%,
    rgba(119, 215, 220, 0.74) 78%,
    transparent
  );
  box-shadow: 0 0 1rem rgba(156, 131, 255, 0.16);
  transform: rotate(5deg);
}

.network-scene {
  min-height: max(41rem, 82svh);
  padding-block: var(--space-5);
}

.network-layout {
  min-height: 34rem;
}

@media (max-width: 60rem) {
  .product-scene,
  .safety-scene {
    padding-block: var(--space-5);
  }

  .product-composition {
    min-height: min(57rem, 98vw);
    margin-top: var(--space-3);
  }

  .safety-visual {
    min-height: min(50rem, 86vw);
    margin-top: var(--space-3);
  }

  .network-scene {
    min-height: max(40rem, 78svh);
  }
}

@media (max-width: 45rem) {
  .product-scene {
    padding-block: var(--space-5) var(--space-4);
  }

  .product-composition {
    min-height: 114vw;
    max-height: 33rem;
    margin-top: var(--space-2);
  }

  .safety-scene {
    padding-block: var(--space-4) var(--space-5);
  }

  .safety-visual {
    min-height: 104vw;
    max-height: 27rem;
    margin-top: var(--space-2);
  }

  .safety-thread {
    top: -12%;
    height: 126%;
  }

  .network-scene {
    min-height: 38.5rem;
    padding-block: var(--space-3);
  }

  .network-layout {
    min-height: 32.5rem;
  }

  .network-close {
    padding-top: 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .network-scene,
  .network-layout,
  .network-origin,
  .network-contexts,
  .network-close {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .network-weave path {
    stroke-dashoffset: 0 !important;
  }
}
/* Batch 1.4: scroll-linked narrative pacing and product scale only. */

.transformation-visual {
  --experience-progress: 0;
  --transformation-opacity: 1;
  --stage-ring-scale: 0.84;
  --stage-ring-opacity: 0.42;
  opacity: var(--transformation-opacity);
  will-change: opacity;
}

.transformation-visual::before {
  opacity: var(--stage-ring-opacity);
  transform: scale(var(--stage-ring-scale));
  transition: none;
}

.transformation-visual .experience-human-context {
  opacity: var(--human-context-opacity, 0.29);
  filter: blur(var(--human-context-blur, 0px));
  transition: none;
}

.transformation-visual .signal-paths path,
.transformation-visual .signal,
.transformation-visual .reputation-aperture,
.transformation-visual .aperture-screen::after,
.transformation-visual .aperture-screen img,
.transformation-visual .aperture-label {
  transition: none;
}

.transformation-visual .aperture-screen::after {
  background: rgba(10, 9, 14, var(--aperture-overlay-opacity, 0.54));
}

.product-bridge {
  opacity: var(--product-progress, 0);
  transform: scaleY(var(--product-progress, 0));
  transform-origin: top;
}

.product-primary {
  width: min(32rem, 39vw);
  opacity: var(--primary-product-opacity, 0);
  transform:
    rotateY(-4deg)
    rotateZ(1deg)
    translate3d(var(--tilt-x), calc(var(--tilt-y) + var(--primary-product-y, 52px)), 0)
    scale(var(--primary-product-scale, 0.9));
  transition: none;
  will-change: transform, opacity;
}

.product-detail {
  width: min(20.25rem, 23.5vw);
  opacity: var(--support-product-opacity, 0);
  transform:
    translate3d(
      calc(var(--tilt-x) * -0.45),
      calc((var(--tilt-y) * -0.45) + var(--support-product-y, 42px)),
      3rem
    )
    rotateZ(-1.5deg)
    scale(var(--support-product-scale, 0.92));
  transition: none;
  will-change: transform, opacity;
}

.product-privacy {
  width: min(25rem, 35vw);
  opacity: var(--privacy-product-opacity, 1);
  transform:
    rotateY(4deg)
    rotateZ(-1deg)
    translate3d(var(--tilt-x), var(--tilt-y), 0)
    scale(var(--privacy-product-scale, 1));
  transition: none;
  will-change: transform, opacity;
}

.network-weave path {
  stroke-dashoffset: calc(1 - var(--network-progress, 0));
  transition: none;
}

.network-origin {
  opacity: var(--network-origin-opacity, 0);
  transform: translate3d(0, var(--network-origin-y, 24px), 0);
  will-change: transform, opacity;
}

.network-contexts {
  opacity: var(--network-context-opacity, 0);
  transform: translate3d(0, var(--network-context-y, 18px), 0);
  will-change: transform, opacity;
}

.network-close {
  opacity: var(--network-close-opacity, 0);
  transform: translate3d(0, var(--network-close-y, 30px), 0);
  will-change: transform, opacity;
}

@media (min-width: 60.01rem) {
  .safety-visual {
    min-height: min(60rem, 67vw);
  }
}
@media (max-width: 60rem) {
  .product-primary {
    width: min(29rem, 50vw);
  }

  .product-detail {
    width: min(19rem, 34vw);
  }

  .product-privacy {
    width: min(23rem, 34vw);
  }
}

@media (max-width: 45rem) {
  .product-primary {
    right: 2%;
    width: min(17.25rem, 67vw);
  }

  .product-detail {
    left: 2%;
    width: min(12rem, 46vw);
  }

  .product-detail-crop {
    height: min(11.25rem, 41vw);
  }

  .product-privacy {
    width: min(17.5rem, 64vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .transformation-visual,
  .product-primary,
  .product-detail,
  .product-privacy,
  .network-origin,
  .network-contexts,
  .network-close {
    opacity: 1 !important;
    transform: none !important;
  }

  .transformation-visual .experience-human-context {
    opacity: 0.14 !important;
    filter: none !important;
  }

  .network-weave path {
    stroke-dashoffset: 0 !important;
  }
}