/* ============================================================
   Tulum Fashions — Microinteractions 2026
   Phase 3a · branch: redesign-2026-q2
   Source: VISUAL-STYLE-GUIDE.md §6 + §9
   ============================================================ */

/* ============ Smooth scroll ============ */
html {
  scroll-behavior: smooth;
}

/* ============ Hover card ============
   Image zooms 1.05 over 400ms, caption "View specs →" fades in.
   Apply `.hover-card` to wrapper, `<img>` inside scales,
   `.caption` element fades in.
   ============================================================ */
.hover-card {
  display: block;
  overflow: hidden;
  position: relative;
  transition: transform var(--transition-medium);
}

.hover-card img {
  transition: transform var(--dur-medium) var(--ease-out-expo);
  will-change: transform;
}

.hover-card:hover img,
.hover-card:focus-visible img {
  transform: scale(1.05);
}

.hover-card .caption {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--dur-base) var(--ease-out-expo),
    transform var(--dur-base) var(--ease-out-expo);
}

.hover-card:hover .caption,
.hover-card:focus-visible .caption {
  opacity: 1;
  transform: translateY(0);
}

/* ============ Blur fade-in (scroll viewport entry) ============
   Trigger: opacity 0 → 1, translateY 24px → 0, blur 8px → 0.
   Use `.blur-fade` as initial hidden state, add `.is-visible`
   via IntersectionObserver (15% threshold).
   Stagger children with --stagger-delay.
   ============================================================ */
.blur-fade {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo),
    filter var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--stagger-delay, 0ms);
  will-change: opacity, transform, filter;
}

.blur-fade.is-visible,
.blur-fade.visible,
.blur-fade.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Stagger helpers (apply on parent or per-child) */
.stagger > *:nth-child(1) { --stagger-delay: 0ms; }
.stagger > *:nth-child(2) { --stagger-delay: 80ms; }
.stagger > *:nth-child(3) { --stagger-delay: 160ms; }
.stagger > *:nth-child(4) { --stagger-delay: 240ms; }
.stagger > *:nth-child(5) { --stagger-delay: 320ms; }
.stagger > *:nth-child(6) { --stagger-delay: 400ms; }
.stagger > *:nth-child(7) { --stagger-delay: 480ms; }
.stagger > *:nth-child(8) { --stagger-delay: 560ms; }

/* ============ CTA underline (animated from left) ============
   Apply `.cta-underline` to anchors / ghost buttons.
   ============================================================ */
.cta-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--gray-900);
}

.cta-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 300ms var(--ease-in-out-cubic);
}

.cta-underline:hover::after,
.cta-underline:focus-visible::after {
  transform: scaleX(0);
  transform-origin: right center;
}

/* Reverse variant: underline grows from left on hover */
.cta-underline--grow::after {
  transform: scaleX(0);
  transform-origin: left center;
}

.cta-underline--grow:hover::after,
.cta-underline--grow:focus-visible::after {
  transform: scaleX(1);
}

/* ============ Button micro-feedback ============ */
.btn,
button.btn {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    transform var(--dur-fast) var(--ease-out-quart);
}

.btn:active,
button.btn:active {
  transform: scale(0.98);
}

/* ============ Image lazy-load blur-up ============
   Apply `.lqip` to the placeholder img/wrapper.
   When full image is loaded, add `.is-loaded`.
   ============================================================ */
.lqip {
  filter: blur(10px);
  transition: filter var(--dur-medium) var(--ease-out-expo);
}

.lqip.is-loaded {
  filter: blur(0);
}

/* ============ Reduced motion overrides ============ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .blur-fade {
    transform: none;
    filter: none;
  }

  .hover-card img,
  .hover-card:hover img {
    transform: none;
  }

  .cta-underline::after {
    transition: none;
  }
}