/* Load after the material styles. Unenhanced content is always visible. */
.optical-reveal-ready {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.optical-reveal-ready.is-visible {
  opacity: 1;
  transform: none;
}

.optical-reveal-ready:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Only the reflection moves; the callout and its lettering stay still. */
.hero-cards .float-card {
  isolation: isolate;
  overflow: hidden;
}

.optical-card-reflection {
  position: absolute;
  inset: -50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 32% 28%, rgb(255 255 255 / 44%), transparent 62%);
}

/* Native details remains responsible for visibility, focus, and dismissal. */
.nav-products > .products-menu {
  opacity: 1;
  transform: none;
  transform-origin: var(--menu-origin, 40%) top;
}

html[data-optical-input="pointer"] .nav-products[open] > .products-menu {
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

@starting-style {
  html[data-optical-input="pointer"] .nav-products[open] > .products-menu {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(.97);
  }
}

/* CSS retargets from the live presentation when examples change rapidly. */
.interactive-demo .demo-chat {
  opacity: 1;
  transform: none;
  transition:
    opacity 120ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.interactive-demo .demo-chat[data-optical-swapping] {
  opacity: .82;
  transform: translate3d(0, 3px, 0);
  transition-duration: 100ms;
}

/* Physical press only. Keyboard activation has no scale or transition. */
:is(.button, .icon-button, .filter, .menu-toggle) {
  transition: transform 100ms var(--ease-out);
}

:is(.button, .icon-button, .filter, .menu-toggle):active {
  transform: none;
}

:is(.button, .icon-button, .filter, .menu-toggle)[data-optical-pressed] {
  transform: scale(.97);
  transition-duration: 160ms;
}

html[data-optical-input="keyboard"] :is(.button, .icon-button, .filter, .menu-toggle),
html[data-optical-input="keyboard"] .nav-products > .products-menu,
html[data-optical-input="keyboard"] .interactive-demo .demo-chat {
  transition: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .text-link svg {
    transition: transform 160ms var(--ease-out);
  }

  .text-link:hover svg {
    transform: translateX(2px);
  }

  html[data-optical-input="keyboard"] .text-link svg {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .optical-reveal-ready {
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .optical-card-reflection {
    display: none;
  }

  .interactive-demo .demo-chat,
  .interactive-demo .demo-chat[data-optical-swapping],
  .nav-products > .products-menu,
  :is(.button, .icon-button, .filter, .menu-toggle)[data-optical-pressed],
  .text-link:hover svg {
    transform: none;
  }

  .interactive-demo .demo-chat {
    transition-property: opacity !important;
    transition-duration: 100ms !important;
  }

  .nav-products > .products-menu {
    transition: none !important;
  }
}

@media print {
  .optical-reveal-ready {
    opacity: 1;
    transform: none;
  }
}