/* The photograph opens like a glass plane; the interface stays immediately usable. */
.hero { overflow: hidden; overflow: clip; }
.hero-line { display: block; }
.hero-line:last-child { padding-bottom: .08em; }

@media (prefers-reduced-motion: no-preference) {
  .site-nav a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 7px);
    transition: background-size 220ms ease-out;
  }
  .site-nav a:hover, .site-nav a:focus-visible {
    background-size: 100% 1px;
    text-decoration: none;
  }
  .header-quote > span, .glass-note button > span,
  .catalog-list i, .catalog-intro > a > span,
  .process-note button > span, .contact-button > span:last-child,
  .photo-arrow {
    transition: transform 240ms cubic-bezier(.16,1,.3,1);
  }
  .header-quote:hover > span, .header-quote:focus-visible > span,
  .glass-note button:hover > span, .glass-note button:focus-visible > span,
  .catalog-list button:hover i, .catalog-list button:focus-visible i,
  .catalog-intro > a:hover > span, .catalog-intro > a:focus-visible > span,
  .process-note button:hover > span, .process-note button:focus-visible > span,
  .contact-button:hover > span:last-child, .contact-button:focus-visible > span:last-child,
  .photo-button:hover .photo-arrow, .photo-button:focus-visible .photo-arrow {
    transform: translate(3px, -3px);
  }
  .contact-button, .process-note button, .catalog-list button, .ss-close {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .photo-button:focus-visible img {
    filter: saturate(.8) brightness(1);
    transform: scale(1.025);
  }
  .explore span:last-child { transition: transform 240ms ease-out; }
  .explore:hover span:last-child, .explore:focus-visible span:last-child {
    transform: translateY(4px);
  }
  .ss-dialog[open] { animation: ss-window-in 260ms cubic-bezier(.16,1,.3,1); }
  .ss-dialog[open]::backdrop { animation: ss-backdrop-in 220ms ease-out; }
  .ss-dialog-body { animation: ss-content-in 180ms ease-out; }
  .site-nav.is-open { animation: ss-menu-in 200ms cubic-bezier(.16,1,.3,1); }

  @keyframes ss-window-in {
    from { opacity: .35; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes ss-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ss-content-in { from { opacity: .5; } to { opacity: 1; } }
  @keyframes ss-menu-in {
    from { opacity: .5; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-image { transform: translate3d(0, var(--scene-offset, 0px), 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image, .photo-button:hover img, .photo-button:focus-visible img,
  .material-options button:hover .swatch { transform: none; }
}