/* V5: independent native scroll profiles. Desktop keeps the approved V4 styles. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .motion-ready {
    --touch-travel: 24px;
    --touch-depth: 9deg;
    --touch-secondary: 12px;
  }
  .motion-ready[data-motion-mode="tablet"] {
    --touch-travel: 36px;
    --touch-depth: 15deg;
    --touch-secondary: 20px;
  }
  .motion-ready .scroll-track {
    height: auto;
  }
  .motion-ready .scroll-track > .scene {
    position: relative;
    top: auto;
  }
  .motion-ready .hero-copy {
    transform: translate3d(0, calc(var(--scene-p) * -12px), 0)
      scale(calc(1 - var(--scene-p) * 0.02));
  }
  .motion-ready .object-orbit {
    transform: rotateX(calc(5deg + var(--scene-p) * 2deg))
      rotateY(calc(-12deg + var(--scene-p) * var(--touch-depth)))
      translate3d(0, calc(var(--scene-p) * var(--touch-travel) * -0.75), 0);
  }
  .motion-ready .object-browser {
    transform: rotateZ(calc(-6deg + var(--scene-p) * 3deg))
      translateZ(calc(50px + var(--scene-p) * 12px))
      scale(calc(0.96 + var(--scene-p) * 0.04));
  }
  .motion-ready .object-phone {
    transform: translate3d(
        0,
        calc(var(--scene-p) * var(--touch-secondary)),
        60px
      )
      rotateZ(calc(8deg - var(--scene-p) * 3deg));
  }
  .motion-ready .spatial-grid {
    transform: perspective(1200px) rotateX(12deg)
      translateY(calc(var(--scene-p) * -10px));
  }
  .motion-ready.intro-complete .hero.is-scene-active .hero-light {
    animation: touch-light-drift 7s ease-in-out infinite alternate;
  }
  .motion-ready.experience-ready:not(.intro-complete) .digital-object {
    animation: touch-object-enter 1100ms 430ms var(--ease-out) both;
  }
  .motion-ready[data-motion-mode="tablet"].experience-ready:not(.intro-complete)
    .digital-object {
    animation-name: tablet-object-enter;
  }

  .motion-ready .presence-manifesto {
    transform: translateY(calc(var(--scene-p) * -8px));
  }
  .motion-ready .connection-lines {
    opacity: calc(0.1 + var(--scene-p) * 0.45);
  }
  .motion-ready .presence-core {
    opacity: calc(0.25 + var(--scene-p) * 0.75);
    transform: translate(-50%, -50%) scale(calc(0.78 + var(--scene-p) * 0.22));
  }
  .motion-ready .presence-fragment {
    opacity: calc(0.6 + var(--scene-p) * 0.4);
  }

  .motion-ready .site-device {
    transform: translateY(calc((1 - var(--scene-p)) * var(--touch-travel)))
      rotateY(calc((1 - var(--scene-p)) * var(--touch-depth) * -1))
      rotateZ(calc(-4deg + var(--scene-p) * 3deg))
      scale(calc(0.9 + var(--scene-p) * 0.1));
  }
  .motion-ready .site-mobile {
    transform: translateY(calc(var(--scene-p) * var(--touch-secondary) * -0.7))
      rotateZ(calc(7deg - var(--scene-p) * 4deg));
  }
  .motion-ready .site-device .interface-body {
    clip-path: inset(0 0 calc((1 - var(--scene-p)) * 12%) 0);
    opacity: calc(0.6 + var(--scene-p) * 0.4);
  }
  .motion-ready .nfc-phone {
    transform: translateX(calc((1 - var(--scene-p)) * var(--touch-travel)))
      translateY(calc((1 - var(--scene-p)) * 18px))
      rotateZ(calc(12deg - var(--scene-p) * 7deg));
  }
  .motion-ready .nfc-plate {
    transform: rotateY(calc(-8deg + var(--scene-p) * 4deg))
      rotateZ(calc(-8deg + var(--scene-p) * 3deg));
  }
  .motion-ready .nfc-phone-stars,
  .motion-ready .nfc-phone .nfc-phone-button {
    opacity: clamp(0, calc((var(--scene-p) - 0.42) * 2.3), 1);
  }
  .motion-ready .search-composition {
    transform: translateY(calc((1 - var(--scene-p)) * 18px))
      scale(calc(0.96 + var(--scene-p) * 0.04));
  }
  .motion-ready .search-query {
    transform: translateX(calc((1 - var(--scene-p)) * var(--touch-secondary)));
  }
  .motion-ready .search-profile {
    transform: translateY(calc((1 - var(--scene-p)) * var(--touch-travel)))
      scale(calc(0.94 + var(--scene-p) * 0.06));
    opacity: calc(0.35 + var(--scene-p) * 0.65);
  }

  .motion-ready .eco-site {
    transform: translate3d(
        calc(-18px + var(--scene-p) * 40px),
        calc(18px - var(--scene-p) * 6px),
        0
      )
      rotateY(calc((1 - var(--scene-p)) * -8deg))
      rotateZ(calc(-7deg + var(--scene-p) * 7deg));
  }
  .motion-ready .eco-google {
    transform: translate3d(
        calc(16px - var(--scene-p) * 32px),
        calc(-12px + var(--scene-p) * 24px),
        0
      )
      rotateZ(calc(7deg - var(--scene-p) * 7deg));
  }
  .motion-ready .eco-nfc {
    transform: translate3d(
        calc(12px - var(--scene-p) * 26px),
        calc(18px - var(--scene-p) * 36px),
        0
      )
      rotateZ(calc(-5deg + var(--scene-p) * 5deg));
  }
  .motion-ready[data-motion-mode="tablet"] .eco-site {
    transform: translate3d(
        calc(-20px + var(--scene-p) * 80px),
        calc(22px - var(--scene-p) * 34px),
        0
      )
      rotateY(calc((1 - var(--scene-p)) * -12deg))
      rotateZ(calc(-8deg + var(--scene-p) * 8deg));
  }
  .motion-ready[data-motion-mode="tablet"] .eco-google {
    transform: translate3d(
        calc(20px - var(--scene-p) * 58px),
        calc(-16px + var(--scene-p) * 38px),
        0
      )
      rotateZ(calc(7deg - var(--scene-p) * 7deg));
  }
  .motion-ready[data-motion-mode="tablet"] .eco-nfc {
    transform: translate3d(
        calc(16px - var(--scene-p) * 62px),
        calc(22px - var(--scene-p) * 44px),
        0
      )
      rotateZ(calc(-6deg + var(--scene-p) * 6deg));
  }
  .motion-ready .ecosystem-core {
    opacity: calc(0.25 + var(--scene-p) * 0.75);
    transform: translate(-50%, -50%) scale(calc(0.78 + var(--scene-p) * 0.22));
  }
  .motion-ready .ecosystem-ring {
    opacity: calc(0.35 + var(--scene-p) * 0.65);
    transform: translate(-50%, -50%) rotateX(58deg)
      scale(calc(0.88 + var(--scene-p) * 0.12));
  }

  .motion-ready .case-monitor {
    transform: translateY(calc((1 - var(--scene-p)) * var(--touch-travel)))
      rotateX(calc((1 - var(--scene-p)) * 4deg))
      rotateY(calc((1 - var(--scene-p)) * -7deg))
      rotateZ(calc(-3deg + var(--scene-p) * 2deg))
      scale(calc(0.92 + var(--scene-p) * 0.08));
  }
  .motion-ready .case-canaletas .case-monitor {
    transform: translateY(calc((1 - var(--scene-p)) * var(--touch-travel)))
      rotateY(calc((1 - var(--scene-p)) * 7deg))
      rotateZ(calc(3deg - var(--scene-p) * 2deg))
      scale(calc(0.92 + var(--scene-p) * 0.08));
  }
  .motion-ready .case-interface-layer,
  .motion-ready .case-catalog-layer {
    --layer-p: clamp(0, calc((var(--scene-p) - 0.15) / 0.85), 1);
    transform: translate3d(
        calc((1 - var(--layer-p)) * 20px),
        calc((1 - var(--layer-p)) * 30px),
        0
      )
      rotateZ(calc(5deg - var(--layer-p) * 3deg))
      scale(calc(0.94 + var(--layer-p) * 0.06));
    opacity: calc(0.5 + var(--layer-p) * 0.5);
  }
  .motion-ready .case-catalog-layer {
    transform: translate3d(
        calc((1 - var(--layer-p)) * -16px),
        calc((1 - var(--layer-p)) * 32px),
        0
      )
      rotateZ(calc(-5deg + var(--layer-p) * 3deg))
      scale(calc(0.94 + var(--layer-p) * 0.06));
  }

  /* Six artboards: depth, product crop, catalog slide, local scale, mask, layers. */
  .motion-ready .concepts .idea-business-browser {
    transform: perspective(1100px)
      rotateY(calc((1 - var(--scene-p)) * var(--touch-depth) * -1))
      translateY(calc((1 - var(--scene-p)) * var(--touch-travel)))
      scale(calc(0.94 + var(--scene-p) * 0.06));
  }
  .motion-ready .concepts .idea-business-mobile {
    transform: translateY(calc((1 - var(--scene-p)) * -18px))
      rotateZ(calc(5deg - var(--scene-p) * 3deg));
  }
  .motion-ready .idea-product-image {
    transform: translateY(calc((1 - var(--scene-p)) * -12px))
      scale(calc(1.04 - var(--scene-p) * 0.04));
  }
  .motion-ready .idea-product-type {
    clip-path: inset(-0.12em calc((1 - var(--scene-p)) * 28%) -0.12em 0);
    transform: translateX(calc((1 - var(--scene-p)) * -10px));
  }
  .motion-ready .concepts .idea-catalog .catalog-browser {
    transform: translateX(calc((1 - var(--scene-p)) * var(--touch-travel) * -1))
      scale(calc(0.95 + var(--scene-p) * 0.05));
  }
  .motion-ready .idea-catalog-mobile {
    transform: translateY(calc((1 - var(--scene-p)) * 20px))
      rotateZ(calc(6deg - var(--scene-p) * 3deg));
  }
  .motion-ready .idea-local-store {
    transform: scale(calc(0.9 + var(--scene-p) * 0.1));
    opacity: calc(0.4 + var(--scene-p) * 0.6);
  }
  .motion-ready .idea-local-map {
    transform: translateY(calc((1 - var(--scene-p)) * 16px));
  }
  .motion-ready .idea-creative-title {
    clip-path: inset(-0.12em 0 calc((1 - var(--scene-p)) * 22% - 0.12em) 0);
    transform: translateY(calc((1 - var(--scene-p)) * -14px));
  }
  .motion-ready .idea-creative-disc {
    transform: translateY(calc((1 - var(--scene-p)) * 18px))
      rotate(calc(-12deg + var(--scene-p) * 12deg));
  }
  .motion-ready .idea-tech-plane {
    transform: translateY(calc((1 - var(--scene-p)) * 24px))
      rotateY(calc(-15deg + var(--scene-p) * 7deg)) rotateX(8deg)
      rotateZ(calc(-6deg + var(--scene-p) * 3deg));
  }
  .motion-ready .tech-plane-back {
    transform: translateY(calc((1 - var(--scene-p)) * -12px)) rotateY(-12deg)
      rotateX(8deg) rotateZ(-5deg) translateZ(-50px);
  }
  .motion-ready .idea-tech-mobile {
    transform: translateY(calc((1 - var(--scene-p)) * 20px))
      rotateZ(calc(6deg - var(--scene-p) * 3deg));
  }

  .motion-ready .touch-reveal-target {
    opacity: 0;
    transform: translateY(24px);
    clip-path: inset(0 0 12% 0);
    transition:
      opacity 650ms var(--ease-out),
      transform 650ms var(--ease-out),
      clip-path 650ms var(--ease-out);
  }
  .motion-ready .touch-reveal-target.is-visible {
    opacity: 1;
    transform: none;
    clip-path: inset(-6px);
  }
  .motion-ready .process-step:nth-child(2) {
    transition-delay: 45ms;
  }
  .motion-ready .process-step:nth-child(3) {
    transition-delay: 90ms;
  }
  .motion-ready .process-step:nth-child(4) {
    transition-delay: 135ms;
  }
}

@media (min-width: 901px) and (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .hero > .scene,
  .motion-ready .presence > .scene,
  .motion-ready .combo-track > .scene,
  .motion-ready .case-track > .scene {
    height: max(900px, 100svh);
  }
  .motion-ready .service > .scene {
    height: auto;
    min-height: 900px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Separate the headline and moving product on portrait tablet screens. */
  .hero > .scene,
  .motion-ready .hero > .scene {
    height: max(1220px, 100svh);
    min-height: 1220px;
  }
  .hero-copy {
    top: 190px;
    width: 87%;
  }
  .hero-copy h1 {
    font-size: clamp(70px, 10.7vw, 88px);
  }
  .digital-object {
    top: 53%;
    width: min(75%, 640px);
    height: 32%;
    right: 6%;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  .presence-manifesto {
    left: var(--gutter);
    top: 20%;
    width: auto;
    margin-left: 0;
    font-size: 88px;
    transform: none;
  }
}

@media (max-width: 1024px) {
  .context-cursor {
    display: none;
  }
}

@keyframes touch-light-drift {
  from {
    transform: translate3d(-6px, 4px, 0);
    opacity: 0.7;
  }
  to {
    transform: translate3d(8px, -6px, 0);
    opacity: 1;
  }
}
@keyframes touch-object-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tablet-object-enter {
  from {
    opacity: 0;
    transform: perspective(1400px) translateY(36px) rotateX(5deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}