/* =====================================================================
   MÅES Shared Theme — single source of truth for fonts & colors.
   Used by index.html, /shop/*.html and any future page.
   Aligned 1:1 with maesstudio.de.
   ===================================================================== */

:root {
  /* ---------- Surfaces ---------- */
  --paper:      #FAF8F2;
  --paper-soft: #EFEDE8;
  --bg-2:       #EFEDE7;
  /* Legacy aliases (kept so existing classes don't break) */
  --cream:      #FAF8F2;
  --warm:       #FAF8F2;
  --beige:      #EFEDE7;
  --sand:       #EFEDE7;

  /* ---------- Ink ---------- */
  --ink:        #1C1814;
  --ink-mid:    #6B6660;
  --ink-soft:   #A29C94;
  --muted:      #6B6660;
  --stone:      #A29C94;
  --ghost:      #A29C94;

  /* ---------- Accent (MÅES sage blue) ---------- */
  --sage:       #4A6FB8;
  --sage-pale:  #C9D2E8;
  --blush-pale: #D6DEEC;
  /* Legacy "sienna" name kept as alias → sage. Do NOT reintroduce brown. */
  --sienna:     #4A6FB8;
  --sienna-lt:  #6B89C5;

  /* ---------- Typography ---------- */
  --font-serif:       'Caudex', Georgia, 'Times New Roman', serif;
  --font-display:     'Caudex', Georgia, 'Times New Roman', serif;
  --font-sans:        'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-handwritten: 'Caveat', cursive;

  /* ---------- Misc ---------- */
  --radius: 0;
}

/* ---------- Base typography ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-mid);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin: 0;
}
/* MÅES: italic in headings is reset to upright ink, no accent color */
h1 em, h2 em, h3 em, h4 em,
h1 i,  h2 i,  h3 i,  h4 i {
  font-style: normal;
  color: var(--ink);
  font-family: var(--font-serif);
}

::selection { background: var(--sage); color: var(--paper); }

/* ---------- MÅES paper-texture overlay ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23p)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.055;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* =====================================================================
   Polish layer — senior-design refinement (Nov 2026)
   Subtle Apple-like microinteractions, calmer rhythm, tighter hovers.
   Non-structural: does not change layout, palette or branding.
   ===================================================================== */

:root{
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  --ease-out-quint: cubic-bezier(.16,1,.3,1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
}

/* Slightly more open body rhythm */
body{ letter-spacing: .005em; }
p{ margin: 0 0 1rem; }

/* Calmer, more confident headings */
h1,h2,h3,h4{ text-wrap: balance; }
h1{ letter-spacing: .02em; }
h2{ letter-spacing: .025em; }

/* Refined link feel */
a{ transition: color var(--dur-fast) var(--ease-out-soft); }

/* Buttons — softer press */
button, .btn, [role="button"]{
  transition: background var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft);
}
button:active, .btn:active{ transform: translateY(1px); }

/* Image — calmer hover zoom, refined easing */
.cat-card, .prod-card .img-wrap{ transition: transform var(--dur-med) var(--ease-out-quint); }
.cat-card:hover{ transform: translateY(-2px); }
.cat-card img,
.prod-card .img-wrap img{ transition: transform 1100ms var(--ease-out-quint); }
.cat-card:hover img{ transform: scale(1.025); }
.prod-card:hover .img-wrap img{ transform: scale(1.02); }

/* Tighter product card type rhythm */
.prod-card .title{ line-height: 1.3; }
.prod-card .price{ opacity: .82; }

/* Eyebrow — more whisper, less shout */
.eyebrow{ opacity: .85; }

/* Nav — gentler underline reveal */
.shop-nav a::after,
.maes-header a::after{
  transition: width var(--dur-med) var(--ease-out-quint);
}

/* Selection */
::selection{ background: var(--sage); color: var(--paper); }

/* Focus — quiet, accessible */
:focus-visible{
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

/* Image fade-in on decode */
img{ transition: opacity var(--dur-med) var(--ease-out-soft); }
img.is-loading{ opacity: 0; }

/* Scroll reveal — opt-in via [data-reveal] */
[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out-quint),
              transform var(--dur-slow) var(--ease-out-quint);
  will-change: opacity, transform;
}
[data-reveal].is-in{ opacity: 1; transform: none; }

/* Auto-reveal common section blocks without markup edits */
.section > .shop-container,
.shop-hero > .shop-container,
.trust > .shop-container{
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out-quint),
              transform var(--dur-slow) var(--ease-out-quint);
}
.section > .shop-container.is-in,
.shop-hero > .shop-container.is-in,
.trust > .shop-container.is-in{ opacity: 1; transform: none; }

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition: none !important;
    animation: none !important;
  }
  [data-reveal],
  .section > .shop-container,
  .shop-hero > .shop-container,
  .trust > .shop-container{ opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   Reveal & image-load states — consolidated, explicit rules.
   Pairs with /assets/reveal.js (IntersectionObserver + img load hooks).
   ===================================================================== */

/* --- Image fade-in (avoids pop-in once decoded) --- */
img{
  opacity: 1;
  transition: opacity var(--dur-med, 480ms) var(--ease-out-soft, cubic-bezier(.22,.61,.36,1)),
              filter   var(--dur-med, 480ms) var(--ease-out-soft, cubic-bezier(.22,.61,.36,1));
}
img.is-loading{
  opacity: 0;
  filter: blur(6px);
}
img.is-loaded{
  opacity: 1;
  filter: none;
}

/* --- Scroll reveal: initial (hidden) state --- */
[data-reveal],
.section > .shop-container,
.shop-hero > .shop-container,
.trust > .shop-container,
.prod-grid > *,
.cat-grid > *,
.trust-grid > *{
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--dur-slow, 900ms) var(--ease-out-quint, cubic-bezier(.16,1,.3,1)),
              transform var(--dur-slow, 900ms) var(--ease-out-quint, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}

/* --- Scroll reveal: visible state --- */
[data-reveal].is-in,
.section > .shop-container.is-in,
.shop-hero > .shop-container.is-in,
.trust > .shop-container.is-in,
.prod-grid > .is-in,
.cat-grid > .is-in,
.trust-grid > .is-in{
  opacity: 1;
  transform: none;
}

/* --- Stagger for grid children (nicer rhythm) --- */
.prod-grid > *:nth-child(1),  .cat-grid > *:nth-child(1),  .trust-grid > *:nth-child(1)  { transition-delay: 40ms; }
.prod-grid > *:nth-child(2),  .cat-grid > *:nth-child(2),  .trust-grid > *:nth-child(2)  { transition-delay: 100ms; }
.prod-grid > *:nth-child(3),  .cat-grid > *:nth-child(3),  .trust-grid > *:nth-child(3)  { transition-delay: 160ms; }
.prod-grid > *:nth-child(4),  .cat-grid > *:nth-child(4),  .trust-grid > *:nth-child(4)  { transition-delay: 220ms; }
.prod-grid > *:nth-child(5)  { transition-delay: 260ms; }
.prod-grid > *:nth-child(6)  { transition-delay: 300ms; }
.prod-grid > *:nth-child(7)  { transition-delay: 340ms; }
.prod-grid > *:nth-child(n+8){ transition-delay: 380ms; }

/* --- Reduced motion safeguard (no flashing, no movement) --- */
@media (prefers-reduced-motion: reduce){
  img,
  img.is-loading,
  img.is-loaded,
  [data-reveal],
  .section > .shop-container,
  .shop-hero > .shop-container,
  .trust > .shop-container,
  .prod-grid > *,
  .cat-grid > *,
  .trust-grid > *{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   Header & menu microinteractions — Apple-like, layout-preserving.
   Targets both main site (.maes-*) and shop (.shop-*) headers.
   ===================================================================== */

/* --- Header: smoother scroll-state transition (no layout shift) --- */
.maes-header,
.shop-header{
  transition:
    background-color  450ms var(--ease-out-quint),
    backdrop-filter   450ms var(--ease-out-quint),
    -webkit-backdrop-filter 450ms var(--ease-out-quint),
    box-shadow        450ms var(--ease-out-quint),
    border-color      450ms var(--ease-out-quint),
    padding           450ms var(--ease-out-quint);
}
.maes-header.is-scrolled,
.shop-header.is-scrolled{
  background-color: rgba(250,248,242,0.94);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter:         saturate(140%) blur(18px);
}

/* --- Wordmark: subtle press feedback, no shift --- */
.maes-wordmark,
.shop-wordmark{
  display: inline-block;
  transition: opacity 300ms var(--ease-out-soft),
              letter-spacing 600ms var(--ease-out-quint);
}
.maes-wordmark:hover,
.shop-wordmark:hover{ opacity: .78; }
.maes-wordmark:active,
.shop-wordmark:active{ opacity: .6; }

/* --- Primary nav links: refined ink shift + underline grow from center --- */
.maes-nav a,
.shop-nav a{
  transition: color 320ms var(--ease-out-soft);
}
.maes-nav a::after,
.shop-nav a::after{
  left: 50%; right: auto; transform: translateX(-50%);
  width: 0; height: 1px; background: currentColor;
  transition: width 500ms var(--ease-out-quint),
              background-color 320ms var(--ease-out-soft);
}
.maes-nav a:hover::after,
.maes-nav a:focus-visible::after,
.maes-nav a.active::after,
.shop-nav a:hover::after,
.shop-nav a:focus-visible::after,
.shop-nav a.active::after{
  width: 100%;
}
.maes-nav a:focus-visible,
.shop-nav a:focus-visible{
  outline: none;
  color: var(--ink);
}

/* --- Menu button: soft icon-text crossfade --- */
.maes-menu-btn,
.menu-btn{
  position: relative;
  transition: color 280ms var(--ease-out-soft),
              opacity 280ms var(--ease-out-soft);
}
.maes-menu-btn:hover,
.menu-btn:hover{ color: var(--ink); opacity: .9; }
.maes-menu-btn:active,
.menu-btn:active{ opacity: .65; }

/* Optional 2-line "burger" inside .maes-menu-btn → animate to "X" when open.
   Safe no-op if markup has no .burger element. */
.maes-menu-btn .burger,
.menu-btn .burger{
  display: inline-block;
  position: relative;
  width: 18px; height: 10px;
}
.maes-menu-btn .burger::before,
.maes-menu-btn .burger::after,
.menu-btn .burger::before,
.menu-btn .burger::after{
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: currentColor;
  transition: transform 420ms var(--ease-out-quint),
              top 420ms var(--ease-out-quint),
              opacity 240ms var(--ease-out-soft);
}
.maes-menu-btn .burger::before,
.menu-btn .burger::before{ top: 2px; }
.maes-menu-btn .burger::after,
.menu-btn .burger::after { top: 8px; }
.maes-menu-btn[aria-expanded="true"] .burger::before,
.menu-btn[aria-expanded="true"] .burger::before{
  top: 5px; transform: rotate(45deg);
}
.maes-menu-btn[aria-expanded="true"] .burger::after,
.menu-btn[aria-expanded="true"] .burger::after{
  top: 5px; transform: rotate(-45deg);
}

/* --- Mobile panel: silkier open/close + staggered link reveal --- */
.maes-mobile-panel,
.mobile-panel{
  transition: max-height 520ms var(--ease-out-quint),
              box-shadow 520ms var(--ease-out-quint),
              opacity 320ms var(--ease-out-soft),
              visibility 0s linear 520ms;
  opacity: 0;
  visibility: hidden;
}
.maes-mobile-panel.is-open,
.mobile-panel.is-open,
.mobile-panel.open{
  opacity: 1;
  visibility: visible;
  transition: max-height 520ms var(--ease-out-quint),
              box-shadow 520ms var(--ease-out-quint),
              opacity 320ms var(--ease-out-soft),
              visibility 0s linear 0s;
}

/* Mobile panel links — fade & rise in sequence when opened */
.maes-mobile-panel a,
.mobile-panel a{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease-out-soft),
              transform 520ms var(--ease-out-quint),
              color 280ms var(--ease-out-soft),
              background-color 280ms var(--ease-out-soft);
}
.maes-mobile-panel.is-open a,
.mobile-panel.is-open a,
.mobile-panel.open a{
  opacity: 1;
  transform: none;
}
.maes-mobile-panel.is-open a:nth-child(1),
.mobile-panel.is-open a:nth-child(1),
.mobile-panel.open a:nth-child(1){ transition-delay: 80ms; }
.maes-mobile-panel.is-open a:nth-child(2),
.mobile-panel.is-open a:nth-child(2),
.mobile-panel.open a:nth-child(2){ transition-delay: 140ms; }
.maes-mobile-panel.is-open a:nth-child(3),
.mobile-panel.is-open a:nth-child(3),
.mobile-panel.open a:nth-child(3){ transition-delay: 200ms; }
.maes-mobile-panel.is-open a:nth-child(4),
.mobile-panel.is-open a:nth-child(4),
.mobile-panel.open a:nth-child(4){ transition-delay: 260ms; }
.maes-mobile-panel.is-open a:nth-child(5),
.mobile-panel.is-open a:nth-child(5),
.mobile-panel.open a:nth-child(5){ transition-delay: 320ms; }
.maes-mobile-panel.is-open a:nth-child(n+6),
.mobile-panel.is-open a:nth-child(n+6),
.mobile-panel.open a:nth-child(n+6){ transition-delay: 380ms; }

/* Mobile link hover/active — calm ink fill, no movement */
.maes-mobile-panel a:hover,
.mobile-panel a:hover{
  color: var(--ink);
  background-color: rgba(28,24,20,0.03);
}

/* --- Cart button & badge: gentle bounce on count change --- */
.cart-btn{ transition: opacity 280ms var(--ease-out-soft); }
.cart-btn:hover{ opacity: .78; }
.cart-btn .badge{
  transition: transform 420ms var(--ease-out-quint),
              background-color 280ms var(--ease-out-soft);
}
.cart-btn .badge.bump{ transform: scale(1.18); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .maes-mobile-panel a,
  .mobile-panel a{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .maes-header, .shop-header,
  .maes-nav a::after, .shop-nav a::after,
  .maes-menu-btn .burger::before, .maes-menu-btn .burger::after,
  .menu-btn .burger::before, .menu-btn .burger::after{
    transition: none !important;
  }
}

/* =====================================================================
   Reduced-motion — universal guard (MUST stay last in this file).
   Disables ALL transitions/animations/transforms/scroll-effects across
   every page (incl. dynamically injected Shopify product cards),
   regardless of where they were declared.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Skeleton shimmer + decorative spinners → static */
  .skeleton{ background: var(--bg-2) !important; animation: none !important; }

  /* Reveal targets → always-on visible state, no transform */
  [data-reveal],
  .section > .shop-container,
  .shop-hero > .shop-container,
  .trust > .shop-container,
  .prod-grid > *,
  .cat-grid > *,
  .trust-grid > *,
  .maes-mobile-panel a,
  .mobile-panel a{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  /* Hover-driven scale/translate effects → neutralised */
  .cat-card:hover,
  .cat-card:hover img,
  .prod-card:hover .img-wrap img,
  .maes-wordmark:hover,
  .shop-wordmark:hover,
  .cart-btn:hover{
    transform: none !important;
    opacity: 1 !important;
  }
  /* Underline reveals → instant, no animation */
  .maes-nav a::after,
  .shop-nav a::after{ transition: none !important; }
  /* Images: never blur/fade on load */
  img, img.is-loading, img.is-loaded{
    opacity: 1 !important; filter: none !important;
  }
}