/* Innerpattern — motion layer. Added 2026-08-05.
   Loaded after site.css so it can override. Everything here degrades to "no animation,
   nothing hidden" when prefers-reduced-motion is on, or when JS never runs. */

/* ---- Scroll reveal ------------------------------------------------------
   Elements start slightly lowered and transparent, then settle when scrolled into view.
   .reveal is only added by anim.js, so a JS-less browser shows everything normally. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
              transform 620ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
/* Stagger children so a row of cards lands one after another, not all at once. */
.reveal-group > .reveal:nth-child(2) { transition-delay: 90ms }
.reveal-group > .reveal:nth-child(3) { transition-delay: 180ms }
.reveal-group > .reveal:nth-child(4) { transition-delay: 270ms }

/* ---- Hover: cards ------------------------------------------------------- */
.card, [data-ds="ProductCard"] > * {
  transition: transform 260ms cubic-bezier(.22,.61,.36,1),
              box-shadow 260ms cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .card:hover, [data-ds="ProductCard"]:hover > * {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px -12px rgba(87, 82, 74, .18);
  }
}

/* ---- Hover: image panels -----------------------------------------------
   Once real photography replaces the placeholder blocks, the image inside scales
   very slightly while the rounded frame stays put. */
.panel {
  overflow: hidden;
}
.panel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .panel:hover img { transform: scale(1.03); }
}

/* ---- Hover: buttons / links --------------------------------------------- */
.btn, a.btn, button.btn {
  transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
}
.btn:active { transform: translateY(0); }

/* Nav links: hairline that grows from the left instead of a hard underline flip. */
#site-nav nav a:not(.btn) {
  position: relative;
  text-decoration: none;
}
#site-nav nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  #site-nav nav a:not(.btn):hover::after { transform: scaleX(1); }
}
#site-nav nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Marquee strip ------------------------------------------------------
   Same device as the reference site's scrolling banner, but carrying the brand's
   own plain-language phrases instead of a discount shout. Pauses on hover. */
.marquee {
  overflow: hidden;
  background: var(--block-graphite);
  color: var(--inverse-ink, #F7F1E8);
  padding: 10px 0;
  white-space: nowrap;
  user-select: none;
}
.marquee__track {
  display: inline-flex;
  gap: 48px;
  padding-left: 48px;
  animation: ip-marquee 38s linear infinite;
}
.marquee span {
  font: var(--type-eyebrow, 600 13px/1.3 var(--font-sans));
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .9;
}
@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes ip-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Accessibility ------------------------------------------------------
   Non-negotiable: anyone who has asked their OS to reduce motion gets a static site
   with nothing hidden and nothing moving. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .marquee__track { animation: none !important; }
  .card, .panel img, .btn, #site-nav nav a::after {
    transition: none !important;
  }
  @media (hover: hover) {
    .card:hover, .panel:hover img, .btn:hover { transform: none !important; }
  }
}