/* Scroll-led depth, signal light, and entrances in Tarana's brand palette. */
.scroll-surface {
  position: relative;
  isolation: isolate;
}
.scroll-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 68% 44% at var(--wash-x, 65%) 24%, #219ce338, transparent 80%);
  opacity: var(--wash-opacity, 0);
}
.scroll-signal {
  position: absolute;
  top: 28px;
  right: 6%;
  width: 88%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #559bdc35, transparent);
  pointer-events: none;
  opacity: var(--signal-opacity, 0);
}
.scroll-signal::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: linear-gradient(90deg, transparent, #3bacf4 65%, #e16b36);
  box-shadow: 0 0 14px #3fafff6b;
  transform: translate3d(var(--signal-x, 0%), 0, 0);
}
.scroll-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(transparent, #000 12%, #000 60%, transparent);
}
.scroll-halo {
  position: absolute;
  top: 8%;
  right: -12%;
  width: clamp(460px, 58vw, 940px);
  aspect-ratio: 1;
  border: 2px solid #58b8ef70;
  border-radius: 50%;
  background: radial-gradient(ellipse at 65% 32%, #2184c114, transparent 65%);
  box-shadow: 0 0 48px #288bc018, inset 0 0 48px #288bc018;
  transform: translate3d(var(--halo-x, 0px), var(--halo-y, 0px), 0) scale(var(--halo-scale, .8));
  opacity: var(--halo-opacity, 0);
}
.scroll-halo::before,
.scroll-halo::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid #57baff40;
  border-radius: 50%;
}
.scroll-halo::after {
  inset: -8%;
  border-color: #d968353d;
}
.scroll-fx-ready .hero-image {
  animation: none;
  transform: scale(var(--hero-zoom, 1.12));
  transform-origin: 65% 52%;
}
.scroll-fx-ready .hero-content {
  translate: 0 var(--hero-copy-y, 0px);
}
.scroll-fx-ready .human-statement {
  position: relative;
}
.scroll-fx-ready .human-statement::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #228ac0, #268abe 80%, #d65527);
  transform-origin: left;
  transform: scaleX(var(--rule-progress, 0));
  pointer-events: none;
}
.scroll-fx-ready .scroll-depth {
  translate: 0 var(--depth-y, 0px);
}
.scroll-fx-ready .scroll-depth-crop {
  scale: 1.18;
}
.scroll-fx-ready .hardware-showcase > .scroll-depth {
  animation: none;
  transform: rotateY(var(--product-turn, -16deg)) rotateZ(var(--product-lean, -8deg));
}
.scroll-fx-ready .resource-art img {
  scale: var(--image-scale, 1);
}
.scroll-fx-ready .scroll-step {
  transition: opacity .9s ease, translate 1.05s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--step-delay, 0ms);
}
.scroll-fx-ready .scroll-step:not(.scroll-entered) {
  opacity: 0;
  translate: 0 38px;
}
.scroll-fx-ready .scroll-step.scroll-entered {
  opacity: 1;
  translate: 0 0;
}
.scroll-fx-ready .scroll-step:focus-within {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0ms;
}
.scroll-fx-ready.motion-ready .reveal {
  transition-duration: .95s, 1.15s;
}
.scroll-fx-ready.motion-ready .reveal:not(.is-visible) {
  transform: translateY(54px) scale(.985);
}
.motion-paused .scroll-signal,
.motion-paused .scroll-wash::before,
.motion-paused .scroll-atmosphere,
.motion-paused .human-statement::before {
  opacity: 0 !important;
}
.motion-paused .scroll-depth,
.motion-paused .scroll-step,
.motion-paused .hero-content,
.motion-paused .resource-art img {
  translate: none !important;
  scale: 1 !important;
  opacity: 1 !important;
  transition: none !important;
}
.motion-paused .hero-image { transform: none !important; }
@media (max-width: 700px) {
  .scroll-signal { top: 20px; }
  .scroll-halo { right: -68%; width: 540px; }
  .scroll-fx-ready .scroll-depth-crop { scale: 1.12; }
  .scroll-fx-ready.motion-ready .reveal:not(.is-visible) { transform: translateY(32px); }
  .scroll-fx-ready .scroll-step:not(.scroll-entered) { translate: 0 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-signal, .scroll-wash::before, .scroll-atmosphere, .scroll-fx-ready .human-statement::before { display: none; }
  .scroll-fx-ready .scroll-depth,
  .scroll-fx-ready .scroll-step,
  .scroll-fx-ready .hero-content,
  .scroll-fx-ready .resource-art img {
    translate: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .scroll-fx-ready .hero-image { transform: none; }
  .scroll-fx-ready.motion-ready .reveal:not(.is-visible) { transform: none; }
}