/* Juhaus optional motion layer. Load after style.css; no markup is hidden by default. */

/* Carousel fallback: the first .is-active image remains usable without JavaScript. */
.hero-slides { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide .hero-image { z-index: auto; height: 100%; transform: scale(1); }
.carousel-ready .hero-slide { transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.carousel-ready .hero-slide.is-active { transition-delay: 0s; }
.carousel-ready .hero-slide.is-zooming .hero-image { animation: juhaus-hero-zoom 7.7s ease-out both; }
.carousel-ready.is-paused .hero-slide.is-zooming .hero-image { animation-play-state: paused; }
@keyframes juhaus-hero-zoom { from { transform: scale(1); } to { transform: scale(1.035); } }

/* Controls are exposed only after the carousel has initialised successfully. */
.carousel-controls { display: none; }
[data-carousel].carousel-ready .carousel-controls { display: flex; align-items: center; gap: 13px; }
.carousel-controls > [data-carousel-label], .carousel-label { font-size: 8px; letter-spacing: .09em; margin-right: 9px; }
.carousel-dots { display: flex; align-items: center; gap: 0; }
.carousel-controls button { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; padding: 0; width: 32px; height: 32px; border: 0; border-radius: 0; color: inherit; background: transparent; cursor: pointer; }
.carousel-controls button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.carousel-controls button:disabled { cursor: default; opacity: .35; }
.carousel-dot::before { content: ""; width: 4px; height: 4px; border-radius: 4px; background: currentColor; opacity: .55; transition: width .4s ease, opacity .4s ease; }
.carousel-dot.is-active::before { width: 22px; opacity: 1; }
.carousel-arrow { font-size: 17px; line-height: 1; }
.carousel-toggle { font-size: 12px; line-height: 1; }
.carousel-counter { min-width: 45px; font-size: 9px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.carousel-toggle [data-carousel-play] { display: none; }
.carousel-toggle[aria-pressed="true"] [data-carousel-play] { display: inline; }
.carousel-toggle[aria-pressed="true"] [data-carousel-pause] { display: none; }
/* Keep image controls clear of the fixed WhatsApp entry. */
@media (min-width: 541px) { .hero-base { padding-right: 76px; } }

/* A white masthead persists once the visitor moves past the first view. */
html { scroll-padding-top: 116px; }
.site-header { position: sticky; top: 0; border-bottom: 0; box-shadow: inset 0 -1px #eee; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
/* Fixed geometry avoids a layout animation when the masthead changes colour. */
.header-inner, .has-scrolled .header-inner { min-height: 104px; transition: none; }
.has-scrolled .site-header { box-shadow: inset 0 -1px var(--line, #c8cdcf), 0 8px 24px #00000006; }
.is-home .site-header { box-shadow: none; }
.is-home.has-scrolled .site-header { position: fixed; top: 0; background: #fff; color: var(--ink, #202427); border-bottom: 0; box-shadow: inset 0 -1px var(--line, #c8cdcf), 0 8px 24px #00000006; }
.is-home.has-scrolled .brand img { filter: none; }
.is-home.has-scrolled .menu-toggle span { color: var(--ink, #202427); }
.is-home.has-scrolled .site-header a:focus-visible,
.is-home.has-scrolled .menu-toggle:focus-visible { outline-color: #652c3b; }
.scroll-progress, [data-scroll-progress] { position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: var(--accent, #652c3b); pointer-events: none; transform: scaleX(0); transform-origin: left; }

/* site.js owns reveal state. This layer only refines its timing. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal].reveal-ready { transition-duration: .85s; transition-timing-function: cubic-bezier(.2, .65, .25, 1); transition-delay: var(--reveal-delay, 0ms); }
}

/* Hover motion is reserved for precise pointers; touch layouts stay still. */
@media (min-width: 801px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .collection-tile > img, .product-image img { transition: transform 1.1s cubic-bezier(.2, .65, .25, 1), filter .5s ease; transform: scale(1); }
  .collection-tile { overflow: hidden; }
  .collection-tile > img { clip-path: inset(0); transition: transform 1.1s cubic-bezier(.2, .65, .25, 1), clip-path 1.1s cubic-bezier(.2, .65, .25, 1), filter .5s ease; }
  .collection-tile:hover > img, .product-card:hover .product-image img { transform: scale(1.035); }
  /* Direct-child collection images need a matching crop to avoid covering captions. */
  .collection-tile:hover > img { clip-path: inset(1.7%); }
  .text-link > span, .inquire-link > span, .nav-cta > span, .tile-arrow { display: inline-block; transition: transform .45s ease; }
  .text-link:hover > span, .inquire-link:hover > span, .nav-cta:hover > span, .collection-tile:hover .tile-arrow { transform: translate(2px, -2px); }
}

@media (max-width: 1200px) {
  html { scroll-padding-top: 94px; }
  .header-inner, .has-scrolled .header-inner { min-height: 82px; }
}
@media (max-width: 800px) {
  .carousel-controls > [data-carousel-label], .carousel-label { display: none; }
  [data-carousel].carousel-ready .carousel-controls { gap: 5px; }
}
@media (max-width: 540px) {
  .hero-base { gap: 15px; padding-right: 42px; }
  .carousel-counter { min-width: 40px; font-size: 8px; }
  .carousel-controls button { width: 27px; height: 32px; }
  [data-carousel].carousel-ready .carousel-controls { gap: 2px; }
  .carousel-dot.is-active::before { width: 18px; }
  .hero-base > a { max-width: 65px; font-size: 6px; letter-spacing: 0; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-ready .hero-slide { transition: none; }
  .hero-slide .hero-image, .carousel-ready .hero-slide.is-zooming .hero-image { animation: none !important; transform: none !important; }
  .collection-tile > img, .product-image img { transform: none !important; transition: none !important; }
  [data-reveal].reveal-ready { opacity: 1; transform: none; transition: none; }
  .site-header, .header-inner, .carousel-dot::before { transition: none; }
}