/* ADDED: Refined premium motion tokens */
:root {
  --motion-fast: 160ms;
  --motion-medium: 360ms;
  --motion-slow: 720ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --premium-shadow: 0 22px 48px rgba(78, 51, 35, 0.14);
  --premium-glow: 0 16px 36px rgba(141, 77, 58, 0.22);
}

/* CHANGED: Keep page stable; only fade when leaving a local page */
body {
  opacity: 1;
  transition: opacity 520ms ease;
}

/* ADDED: Loaded state kept for JS clarity without causing layout movement */
body.is-loaded {
  opacity: 1;
}

/* ADDED: Smooth local page transition without disturbing fixed buttons */
body.is-leaving {
  opacity: 0;
}

/* ADDED: Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--olive));
}

/* CHANGED: Protect floating WhatsApp tab position */
.floating-contact-tab {
  position: fixed;
  right: 0;
  top: 52%;
  z-index: 998;
  transform: translateY(-50%);
  will-change: transform;
  animation: whatsappBreath 3.8s ease-in-out infinite;
}

/* ADDED: WhatsApp hover keeps original placement stable */
.floating-contact-tab:hover,
.floating-contact-tab:focus-visible {
  transform: translateY(-50%) translateX(-5px);
}

/* ADDED: Gentle WhatsApp attention effect */
.floating-contact-tab::after {
  content: "";
  position: absolute;
  inset: -7px 0 -7px -7px;
  z-index: -1;
  border-radius: 18px 0 0 18px;
  border: 1px solid rgba(163, 15, 27, 0.28);
  opacity: 0;
  animation: whatsappRing 3.8s ease-in-out infinite;
}

/* ADDED: Scroll reveal base state */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--motion-slow) var(--motion-soft),
    transform var(--motion-slow) var(--motion-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* ADDED: Scroll reveal visible state */
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ADDED: Staggered card entrance base state */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 620ms var(--motion-soft),
    transform 620ms var(--motion-soft);
  transition-delay: calc(var(--stagger-index, 0) * 70ms);
}

/* ADDED: Staggered card entrance visible state */
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ADDED: Premium hero entrance */
.hero-copy > *,
.hero-card,
.cat-hero-banner .banner-content {
  animation: premiumRise 760ms var(--motion-soft) both;
}

/* ADDED: Hero text stagger timing */
.hero-copy > *:nth-child(1) { animation-delay: 60ms; }
.hero-copy > *:nth-child(2) { animation-delay: 120ms; }
.hero-copy > *:nth-child(3) { animation-delay: 180ms; }
.hero-copy > *:nth-child(4) { animation-delay: 240ms; }
.hero-copy > *:nth-child(5) { animation-delay: 300ms; }
.hero-copy > *:nth-child(6) { animation-delay: 360ms; }
.hero-card { animation-delay: 180ms; }

/* ADDED: Header feels premium while scrolling */
.site-header {
  transition:
    background var(--motion-medium) ease,
    box-shadow var(--motion-medium) ease,
    border-color var(--motion-medium) ease;
}

/* ADDED: Scrolled header state applied by JS */
.site-header.is-scrolled {
  background: rgba(255, 250, 243, 0.9);
  border-color: rgba(141, 77, 58, 0.22);
  box-shadow: 0 16px 36px rgba(78, 51, 35, 0.11);
}

/* ADDED: Elegant navigation micro interaction */
.site-nav a {
  transition: color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent-deep);
  transform: translateY(-2px);
}

/* ADDED: Textile swatches move subtly, not distractingly */
.swatch {
  transition: transform var(--motion-medium) var(--motion-ease), filter var(--motion-medium) ease;
}

.swatch:hover {
  transform: translateY(-5px) scale(1.015);
  filter: saturate(1.08);
}

/* ADDED: Premium card motion */
.content-card,
.business-card,
.contact-card,
.map-card,
.cat-card,
.pcard,
.also-like-card {
  transition:
    transform var(--motion-medium) var(--motion-ease),
    box-shadow var(--motion-medium) ease,
    border-color var(--motion-medium) ease;
}

.content-card:hover,
.business-card:hover,
.contact-card:hover,
.map-card:hover,
.cat-card:hover,
.pcard:hover,
.also-like-card:hover {
  border-color: rgba(141, 77, 58, 0.26);
  box-shadow: var(--premium-shadow);
}

/* CHANGED: Keep existing card lift but make it smoother */
.cat-card:hover,
.pcard:hover,
.also-like-card:hover {
  transform: translateY(-6px);
}

/* ADDED: Smooth textile image zoom */
.cat-img,
.pcard-img,
.also-like-img-wrap img,
.cat-hero-banner img,
.hero-banner {
  transition: transform 680ms var(--motion-ease), filter 680ms ease;
  will-change: transform;
}

.cat-card:hover .cat-img,
.pcard:hover .pcard-img,
.also-like-card:hover .also-like-img-wrap img {
  transform: scale(1.065);
  filter: saturate(1.05) contrast(1.03);
}

/* ADDED: Elegant catalogue card edge shine */
.cat-card,
.pcard,
.also-like-card {
  position: relative;
}

.cat-card::after,
.pcard::after,
.also-like-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.26) 44%, transparent 58%);
  opacity: 0;
  transform: translateX(-34%);
  transition: opacity var(--motion-medium) ease, transform 680ms var(--motion-ease);
}

.cat-card:hover::after,
.pcard:hover::after,
.also-like-card:hover::after {
  opacity: 1;
  transform: translateX(34%);
}

/* ADDED: Button glow and tactile hover */
.button,
.pcard-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--motion-fast) ease,
    box-shadow var(--motion-medium) ease,
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}

.button::before,
.pcard-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.42), transparent 36%);
  transition: opacity var(--motion-fast) ease;
}

.button:hover::before,
.button:focus-visible::before,
.pcard-btn:hover::before,
.pcard-btn:focus-visible::before {
  opacity: 1;
}

.button-primary:hover,
.pcard-enquire:hover {
  box-shadow: var(--premium-glow);
}

/* ADDED: Info strip premium reveal accent */
.info-strip div {
  position: relative;
}

.info-strip strong {
  transition: color var(--motion-medium) ease;
}

.info-strip div:hover strong {
  color: var(--accent-deep);
}

/* ADDED: Category hero image starts slightly enlarged for a luxury feel */
.cat-hero-banner img {
  transform: scale(1.02);
}

/* ADDED: Footer polish without layout movement */
.site-footer {
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  opacity: 0;
  transform: translateX(-40%);
  transition: opacity var(--motion-medium) ease, transform 780ms var(--motion-ease);
}

.site-footer:hover::before {
  opacity: 1;
  transform: translateX(40%);
}

.back-to-top {
  transition: transform var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium) ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

/* ADDED: Animation keyframes */
@keyframes premiumRise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes whatsappBreath {
  0%, 100% {
    box-shadow: 0 14px 30px rgba(91, 12, 19, 0.28);
  }
  50% {
    box-shadow: 0 18px 40px rgba(91, 12, 19, 0.36);
  }
}

@keyframes whatsappRing {
  0%, 100% {
    opacity: 0;
    transform: scale(0.98);
  }
  45% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* ADDED: Mobile animation tuning */
@media (max-width: 720px) {
  [data-reveal],
  [data-stagger] > * {
    transform: translate3d(0, 16px, 0);
    transition-duration: 520ms;
  }

  .floating-contact-tab {
    top: auto;
    bottom: 96px;
    right: 0;
    transform: none;
  }

  .floating-contact-tab:hover,
  .floating-contact-tab:focus-visible {
    transform: translateX(-4px);
  }
}

/* ADDED: Accessibility support for people who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  body,
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .scroll-progress {
    display: none;
  }
}