/* Small optical movements, layered onto the existing V10 glass composition. */
.hero-showcase {
  --motion-x: 0px;
  --motion-y: 0px;
}

.glass-interactive-surface {
  position: relative;
  isolation: isolate;
}

.glass-pointer-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(260px circle at var(--glass-light-x, 50%) var(--glass-light-y, 50%), #ffffffad, #cee3fb40 38%, transparent 76%),
    radial-gradient(320px circle at calc(100% - var(--glass-light-x, 50%)) calc(100% - var(--glass-light-y, 50%)), #ffdfcc30, transparent 76%);
}

@media (prefers-reduced-motion: no-preference) {
  .glass-intro .hero-copy > * {
    animation: glass-copy-arrive .85s var(--ease) both;
  }

  .glass-intro .hero-eyebrow { animation-delay: .02s; }
  .glass-intro .hero h1 { animation-delay: .1s; }
  .glass-intro .hero-description { animation-delay: .18s; }
  .glass-intro .hero-actions { animation-delay: .26s; }
  .glass-intro .hero-compatibility { animation-delay: .32s; }
  .glass-intro .hero-showcase {
    animation: glass-stage-arrive 1.1s var(--ease) .22s both;
  }

  .glass-enhanced .phone-scene {
    translate: var(--motion-x) var(--motion-y);
    transition: translate .68s cubic-bezier(.2, .7, .2, 1);
  }

  .glass-enhanced .hero-phone,
  .glass-enhanced .floating-chip {
    --float-distance: -6px;
    --float-x: 0px;
    --float-y: 0px;
    animation: glass-suspend 7.5s ease-in-out infinite;
    animation-play-state: paused;
  }

  .glass-enhanced .phone-center {
    --float-distance: -4px;
    animation-duration: 8.4s;
  }

  .glass-enhanced .phone-left {
    animation-delay: -2.2s;
  }

  .glass-enhanced .phone-right {
    --float-distance: -5px;
    animation-duration: 9s;
    animation-delay: -4.5s;
  }

  .glass-enhanced .floating-chip {
    --float-x: calc(var(--motion-x) * -1.15);
    --float-y: calc(var(--motion-y) * -.65);
    --float-distance: -7px;
    animation-duration: 9s;
    animation-delay: -1.4s;
    transition: translate .68s cubic-bezier(.2, .7, .2, 1);
  }

  .glass-enhanced .chip-control {
    --float-x: calc(var(--motion-x) * -1.4);
    --float-distance: -5px;
    animation-duration: 8s;
    animation-delay: -4s;
  }

  .glass-enhanced .hero-showcase[data-motion-visible="true"] .hero-phone,
  .glass-enhanced .hero-showcase[data-motion-visible="true"] .floating-chip {
    animation-play-state: running;
  }

  .glass-motion-paused .hero-phone,
  .glass-motion-paused .floating-chip,
  .glass-motion-paused.glass-intro .hero-copy > *,
  .glass-motion-paused.glass-intro .hero-showcase {
    animation-play-state: paused !important;
  }

  .glass-interactive-surface {
    transition: opacity .7s var(--ease), transform .7s var(--ease),
      translate .45s var(--ease), box-shadow .45s var(--ease);
  }

  .glass-pointer-light {
    transition: opacity .5s var(--ease);
  }

  .button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: background .25s, box-shadow .25s, transform .3s var(--ease),
      scale .2s var(--ease);
  }

  .button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 28%, #ffffff47 48%, transparent 68%);
    translate: -120% 0;
  }

  .button:active {
    transform: translateY(0);
    scale: .975;
  }

  @media (hover: hover) and (pointer: fine) {
    .glass-interactive-surface.is-glass-active > .glass-pointer-light {
      opacity: 1;
    }

    :is(.feature, .scene-card, .price-card).is-glass-active {
      translate: 0 -3px;
      box-shadow: 0 17px 40px -25px #56769d5c, inset 0 1px 0 #ffffffb3;
    }

    .glass-emblem,
    .feature-icon .icon {
      transition: translate .5s var(--ease), scale .5s var(--ease);
    }

    .scene-card.is-glass-active .glass-emblem {
      translate: 0 -4px;
      scale: 1.025;
    }

    .feature.is-glass-active .feature-icon .icon {
      translate: 0 -2px;
    }

    .button:hover::after,
    .button:focus-visible::after {
      animation: glass-button-glint .85s var(--ease) both;
    }

    .hero-actions .button-glass:hover .icon {
      transform: rotate(90deg);
    }
  }

  @media (max-width: 600px) {
    .glass-enhanced .hero-phone,
    .glass-enhanced .floating-chip {
      --float-distance: -3px;
    }
  }
}

@keyframes glass-copy-arrive {
  from { opacity: 0; translate: 0 11px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes glass-stage-arrive {
  from { opacity: 0; translate: 0 17px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes glass-suspend {
  0%, 100% { translate: var(--float-x) var(--float-y); }
  50% { translate: var(--float-x) calc(var(--float-y) + var(--float-distance)); }
}

@keyframes glass-button-glint {
  from { translate: -120% 0; }
  to { translate: 120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-pointer-light { display: none; }
  .glass-enhanced .phone-scene,
  .glass-enhanced .hero-phone,
  .glass-enhanced .floating-chip,
  .glass-interactive-surface,
  .button:active {
    translate: none;
    scale: none;
  }
}

@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .glass-pointer-light,
  .button::after { display: none; }
}