/*
 * LinenCraft Atelier — Performance CSS
 *
 * Styles that enforce CLS prevention, View Transitions animations,
 * and progressive enhancement patterns.
 *
 * @package LinenCraftAtelier
 * @author  Diego Salinas <diego@anadevs.com>
 * @since   1.0.0
 */

/* ── CLS Prevention ───────────────────────────────────────────────────────── */

/* Reserve space for images before they load. */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent layout shift from web fonts. */
@font-face { font-display: swap; }

/* Reserve header height with a CSS var so content doesn't jump. */
.lca-header { contain: layout style; }

/* ── View Transitions API ─────────────────────────────────────────────────── */

@keyframes lca-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes lca-fade-out {
  from { opacity: 1; transform: translateY(0);   }
  to   { opacity: 0; transform: translateY(-8px);}
}

::view-transition-old(root) {
  animation: 180ms ease-out both lca-fade-out;
}

::view-transition-new(root) {
  animation: 220ms ease-in  both lca-fade-in;
}

/* Reduced motion: instant transition. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ── Lazy Load Placeholder ────────────────────────────────────────────────── */

img[loading="lazy"] {
  background: var(--color-bg-secondary, #EDE8E1);
  transition: opacity 0.3s ease;
}

/* ── <picture> element reset ─────────────────────────────────────────────── */
picture {
  display: contents;
}

picture img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Prefers reduced motion global ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* ── Main content landmark ───────────────────────────────────────────────── */
#lca-main {
  outline: none;
}

/* ── Back-to-top visibility ──────────────────────────────────────────────── */
.lca-back-to-top {
  opacity:    0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.lca-back-to-top.is-visible {
  opacity:    1;
  visibility: visible;
}