/* MAXI STUDIO motion layer. Load after site.css.
 * No reveal/hide baseline: the document is fully readable without JavaScript.
 * Entrances and bar growth are temporary WAAPI effects in motion.js only.
 */

.site-header {
  position: sticky;
  top: 0;
  /* Keep the existing background, z-index and mobile dropdown containing block.
     Do not add overflow/transform here: the mobile menu must remain unclipped. */
  transition: box-shadow 220ms ease;
}

.site-header.motion-scrolled {
  box-shadow: 0 7px 22px rgb(33 61 50 / 8%);
}

.ratio-v-bar {
  /* Preserve site.css translateX(-50%), width, and the rendered inline height. */
  transform-origin: center bottom;
}

/* Replace the old generic linked-image zoom with an explicit photo allowlist.
 * Case charts, post covers and private proof screenshots never get a zoom.
 */
a.media-frame:hover img {
  transform: none;
}

:is(.hero-image, .story-image, .english-image, .service-photo, .studio-photo-card, .service-detail-shot).media-frame img,
:is(.studio-photo-card, .service-detail-shot) .media-frame img {
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Only zoom inside existing clipped .media-frame containers. No new clipping,
 * dimensions, image visibility changes, or horizontal overflow are introduced.
 * Touch devices do not acquire a sticky hover/zoom state.
 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(html:not([data-motion="reduced"])) :is(.hero-image, .story-image, .english-image, .service-photo, .studio-photo-card, .service-detail-shot).media-frame:hover img,
  :where(html:not([data-motion="reduced"])) :is(.studio-photo-card, .service-detail-shot) .media-frame:hover img {
    transform: scale(1.025);
  }

  :where(html:not([data-motion="reduced"])) :is(.button, .nav-cta) {
    transition: background-color 200ms ease, color 200ms ease, box-shadow 220ms ease;
  }

  :where(html:not([data-motion="reduced"])) :is(.button, .nav-cta):not(:disabled):hover {
    /* Feedback without translation, changing size, or moving adjacent content. */
    box-shadow: 0 4px 13px rgb(33 61 50 / 13%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="enabled"] .hero-caption {
    /* Existing absolute bottom:0 positioning remains unchanged. */
    animation: maxi-caption-float 7s ease-in-out infinite;
  }
}

@keyframes maxi-caption-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* These images are evidence, not decorative photos. Override even the original
 * broad a.media-frame:hover rule, without changing their size or rendering. */
.proof-gallery img,
.proof-gallery :is(a, .media-frame):hover img,
.evidence-image img,
a.evidence-image.media-frame:hover img,
.media-frame:hover img.evidence-image {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* The JS marker also supports a safe fallback if matchMedia is unavailable.
 * OS preference changes stop native CSS effects immediately; JS cancels WAAPI.
 */
html[data-motion="reduced"] .hero-caption {
  animation: none;
  transform: none;
}

html[data-motion="reduced"] :is(.site-header, .button, .nav-cta, .media-frame img) {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-caption {
    animation: none !important;
    transform: none !important;
  }

  :is(.site-header, .button, .nav-cta, .media-frame img) {
    transition: none !important;
  }

  .media-frame:hover img {
    transform: none !important;
  }

  .ratio-v-bar {
    /* Never leave a reduced-height bar on screen in reduced-motion mode.
       This declaration overrides a WAAPI transform while JS handles the toggle. */
    transform: translateX(-50%) !important;
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .hero-caption { animation: none !important; transform: none !important; }
  .ratio-v-bar { transform: translateX(-50%) !important; }
  .site-header { position: static; box-shadow: none; }
}

/* Anchor targets remain visible below the sticky navigation. */
.service-grid, .service-photo-gallery, .ratio-comparison, .case-proof-section, .studio-gallery { scroll-margin-top: 130px; }
@media (max-width: 760px) {
  .service-grid, .service-photo-gallery, .ratio-comparison, .case-proof-section, .studio-gallery { scroll-margin-top: 105px; }
}