/* ENDRRA — motion + accessibility polish layer
   Calm. Quiet. Slow. No bouncy easing, no parallax.
   Layered on top of styles.css — does not replace anything.
   ----------------------------------------------------------------------- */

/* SCROLL-MARGIN — anchor links account for sticky header ─────────────── */
section[id],
[id="core"],
[id="preorder"],
[id="contact"],
[id="main"] {
  scroll-margin-top: 5rem;
}

/* FADE-IN (refined) ────────────────────────────────────────────────────
   Overrides the basic version in styles.css with slower, softer timing
   and adds child-stagger via --i custom property.
   Out-expo easing — settles cleanly without bounce. */
[data-fade] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-fade].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — set --i on each child via JS or markup.
   Each child fades in 50ms after its predecessor. */
[data-fade-stagger] > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 50ms);
}
[data-fade-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion: turn everything off ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-fade],
  [data-fade-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .product-image-link img { transition: none !important; }
  .cart-drawer__panel    { transition: none !important; }
}

/* CTA microinteractions ───────────────────────────────────────────────
   Press state only. Letter-spacing on hover caused a 1–2px reflow against
   the surrounding text, so we hold spacing steady. */
.cta {
  transition:
    background-color 0.45s ease,
    opacity 0.45s ease,
    transform 0.15s ease;
}
.cta:active { transform: translateY(1px); }

/* FOCUS-VISIBLE — calm brand-tone focus ring ──────────────────────────
   Replaces harsh default browser ring. 1px solid #1C1C1C, offset 4px. */
a:focus,
button:focus,
summary:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid #1C1C1C;
  outline-offset: 4px;
}
/* Swatches are tiny round chips — keep a tighter offset so the ring
   sits as a halo, not a square. */
.swatch:focus-visible {
  outline-offset: 6px;
  border-radius: 50%;
}
/* Thumbs use their own outline for selection — don't fight it. */
.thumb:focus-visible {
  outline-offset: 2px;
}

/* SKIP-TO-CONTENT LINK ─────────────────────────────────────────────────
   First focusable element on each page. Hidden until focused. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg, #F7F4EF);
  color: var(--text, #1C1C1C);
  padding: 0.85rem 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 1000;
  transform: translateY(-120%);
  transition: transform 0.25s ease;
  border: 1px solid var(--divider, rgba(28,28,28,0.08));
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 1px solid #1C1C1C;
  outline-offset: 4px;
}