/* Final Emporium brand layer: a single light theme and brick-red actions. */
:root {
  color-scheme: light;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --paper: #fbfaf7;
  --surface: #ffffff;
  --surface-soft: #f4f1ec;
  --ink: #202820;
  --muted: #647066;
  --line: #e2ded6;
  --accent: #ad2b25;
  --accent-dark: #881f1b;
  --radius: 12px;
}

/* Rare, first-view hierarchy: the hero settles in once without delaying browsing. */
.hero-copy { animation: hero-copy-enter 260ms var(--ease-out) both; }

@keyframes hero-copy-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Editorial sections arrive once as they enter view, without taking control of scrolling. */
.section-reveal.reveal {
  opacity: 0;
  transform: translateY(3%);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.section-reveal.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* A deliberate category change should not make the catalogue appear to teleport. */
#product-grid { view-transition-name: product-grid; }
#grid-count { view-transition-name: product-count; }

::view-transition-old(product-grid),
::view-transition-old(product-count) { animation: catalogue-out 160ms var(--ease-out) both; }

::view-transition-new(product-grid),
::view-transition-new(product-count) { animation: catalogue-in 220ms var(--ease-out) both; }

@keyframes catalogue-out {
  to { opacity: 0; }
}

@keyframes catalogue-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The product image already provides the spatial hand-off; this gives the dialog a quiet arrival. */
.product-dialog { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.product-dialog.is-opening,
.product-dialog.is-closing { opacity: 0; transform: translateY(8px) scale(.98); }
.product-dialog::backdrop { opacity: 1; transition: opacity 240ms var(--ease-out); }
.product-dialog.is-opening::backdrop,
.product-dialog.is-closing::backdrop { opacity: 0; }

.site-header { background: rgba(251, 250, 247, .96); }
.brand-lockup span,
.desktop-nav a:hover,
.text-link,
.product-category { color: var(--accent); }
.hero h1 em { color: #db675f; }
.service-strip .material-symbols-outlined { color: var(--accent); }
.newsletter { background: #26342a; }
.newsletter .material-symbols-outlined { color: #db675f; }
.site-footer { background: #202820; }
.site-footer h2 { color: #db675f; }
.collection-card.is-active { outline-color: var(--accent); }
.product-card:focus-visible,
.collection-card:focus-visible,
a:focus-visible,
input:focus-visible,
button:focus-visible { outline-color: var(--accent); }

.button,
.header-order,
.order-btn,
.collection-card,
.product-card {
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.button:active,
.header-order:active,
.order-btn:active,
.collection-card:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .hero-copy {
    animation: hero-copy-reduced 160ms ease both !important;
    animation-duration: 160ms !important;
  }

  #product-grid,
  #grid-count { view-transition-name: none; }

  .product-dialog,
  .product-dialog::backdrop { transition: none !important; }

  .product-dialog.is-opening,
  .product-dialog.is-closing { transform: none; }

}

@keyframes hero-copy-reduced {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #fbfaf7;
    --surface: #ffffff;
    --surface-soft: #f4f1ec;
    --ink: #202820;
    --muted: #647066;
    --line: #e2ded6;
    --accent: #ad2b25;
    --accent-dark: #881f1b;
  }

  .site-header { background: rgba(251, 250, 247, .96); }
  .header-order { border-color: var(--ink); }
  .hero-scrim { background: linear-gradient(90deg, rgba(18, 23, 18, .94), rgba(18, 23, 18, .7) 43%, rgba(18, 23, 18, .12)); }
  .product-skeleton { background: linear-gradient(110deg, #ece9e3 30%, #f6f4f0 45%, #ece9e3 60%); }
  .service-strip, .story-section { background: #f4f1ec; }
}