/* ============================================================
   CURCUMELLI — motion.css (design phase 1, site-wide; after shop.css, before the page styles)
   One motion system for the whole site: timing + easing tokens, scroll reveals (motion.js marks only what starts
   below the fold, so nothing above it ever waits for a script), word-mask titles, scroll-driven card reveals (CSS
   only), link underline sweeps, button fill wipes, the header hiding on scroll down, the drawer's staggered items,
   photos fading in, the cursor label, page transitions (View Transitions: no script) and the drag rail.
   Under prefers-reduced-motion everything stays still (base.css also cuts every duration to ~0).
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.33, 0, .2, 1);
  --t-fast: .2s;
  --t-base: .4s;
  --t-slow: .8s;
  --t-reveal: 1.1s;
}

/* ---------- scroll reveals (motion.js sets data-reveal on elements below the fold, then .is-in once) ---------- */
[data-reveal] {
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out), clip-path 1.25s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal="up"]:not(.is-in) { opacity: 0; transform: translate3d(0, 34px, 0); }
[data-reveal="fade"]:not(.is-in) { opacity: 0; }
[data-reveal="img"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
[data-reveal="img"] img { transition: transform 1.6s var(--ease-out), opacity .4s; }
[data-reveal="img"]:not(.is-in) img { transform: scale(1.14); }
/* Titles: every word rises out of its own mask. */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .06em .14em; margin-block: -.06em -.14em; }
.split-w > span { display: inline-block; transition: transform 1s var(--ease-out); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms); }
[data-reveal="split"]:not(.is-in) .split-w > span { transform: translate3d(0, 108%, 0); }

/* ---------- product cards rise as they enter (scroll-driven, no script; the rail's cards slide instead) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    ul.products:not(.rail-track) > li.card {
      animation: curc-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    ul.products:not(.rail-track) > li.card:nth-child(4n+2) { animation-range: entry 6% entry 61%; }
    ul.products:not(.rail-track) > li.card:nth-child(4n+3) { animation-range: entry 12% entry 67%; }
    ul.products:not(.rail-track) > li.card:nth-child(4n+4) { animation-range: entry 18% entry 73%; }
  }
}
@keyframes curc-rise {
  from { opacity: 0; transform: translate3d(0, 46px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- photos fade in when they arrive (motion.js adds .img-fade only to images still loading) ---------- */
img.img-fade { opacity: 0; transition: opacity .9s var(--ease-soft); }
img.img-fade.is-loaded { opacity: 1; }

/* ---------- links: the underline runs out and comes back; plain links draw one in ---------- */
.section-head .more, .link-arrow {
  border-bottom: 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.section-head .more { display: inline-block; padding: 4px 0 6px; } /* ≥ 24 px tall target */
.link-arrow { padding-bottom: 6px; }
.foot-menu a, .foot-bottom a, .foot-cookies, .card .title a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease-out), color .2s;
}
nav.main .menu > li > a {
  background: linear-gradient(var(--bronze), var(--bronze)) 50% 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease-out), color .2s;
}
@media (hover: hover) {
  .foot-menu a:hover, .foot-bottom a:hover, .foot-cookies:hover, .card:hover .title a { background-size: 100% 1px; }
  nav.main .menu > li > a:hover { background-size: 100% 1px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .section-head .more:hover, .link-arrow:hover { animation: curc-line-run .8s var(--ease-in-out); }
}
@keyframes curc-line-run {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0 1px; background-position: 100% 100%; }
  55% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}
/* The card title clamps to two lines (-webkit-box): the underline belongs to the link text only. */
.card .title a { padding-bottom: 1px; }

/* ---------- buttons: the hover colour wipes in from the left, arrows nudge ---------- */
.btn { --btn-bg: var(--ink); --btn-fill: var(--bronze); }
.btn.ghost { --btn-bg: transparent; --btn-fill: var(--ink); }
.btn.light { --btn-bg: transparent; --btn-fill: #f4efe4; }
.btn.gold, .btn.primary { --btn-bg: var(--bronze); --btn-fill: var(--bronze-dark); }
.curc-nl-dark .curc-nl-row .btn { --btn-bg: var(--gold); --btn-fill: #fff; }
@media (hover: hover) {
  .btn { position: relative; isolation: isolate; overflow: hidden; }
  .btn::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
    background: var(--btn-fill);
    transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform .6s var(--ease-out);
  }
  .btn:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .btn:hover { background: var(--btn-bg); }
}
.btn .icon-arrow-right, .link-arrow .icon-arrow-right { transition: transform .45s var(--ease-out); }
.btn:hover .icon-arrow-right, .link-arrow:hover .icon-arrow-right { transform: translateX(4px); }

/* ---------- header: hides while scrolling down, comes back on the way up (motion.js) ---------- */
header.site { transition: transform .55s var(--ease-out), box-shadow .3s; }
html.curc-head-scrolled header.site { box-shadow: 0 12px 34px rgba(28, 26, 23, .07); }
html.curc-head-hidden header.site { transform: translate3d(0, -100%, 0); box-shadow: none; }
/* Sticky columns that sit under the header follow it up (the PDP purchase panel: product.css). */
.woocommerce-cart .curc-woo-page .woocommerce > .cart-collaterals { transition: top .55s var(--ease-out); }
@media (min-width: 901px) {
  html.curc-head-hidden .pdp-info { top: 28px; }
  html.curc-head-hidden .admin-bar .pdp-info { top: 60px; }
}
html.curc-head-hidden .woocommerce-cart .curc-woo-page .woocommerce > .cart-collaterals { top: 24px; }

/* A dialog that locks the page's scrolling (drawer, photo viewer, cart panel) keeps the scrollbar's room: nothing
   shifts sideways when it opens. */
html.curc-scroll-lock { scrollbar-gutter: stable; }

/* ---------- accessibility (design phase 3) ---------- */
/* What the keyboard or an anchor scrolls to never ends up under the sticky header (WCAG 2.4.11). */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
/* Form fields show a ring when focused, not only a border colour (WCAG 2.4.7). */
.cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible, .input:focus-visible {
  outline: 2px solid var(--bronze); outline-offset: 2px;
}
.on-dark .cform input:focus-visible, .newsletter .cform input:focus-visible { outline-color: var(--gold); }
/* The newsletter field meets its button: an inset ring stays whole (an outer one would run under the button). */
.newsletter .cform input.nl-email:focus-visible { outline-offset: -2px; }
/* Complianz: its banner body has min-width: 300px, so on a 320 px phone the box (with its padding) is wider than the
   screen and the page scrolls sideways (WCAG 1.4.10). */
@media (max-width: 380px) {
  body .cmplz-cookiebanner { width: calc(100% - 16px); max-width: calc(100% - 16px); padding: 14px 12px; }
  body .cmplz-cookiebanner .cmplz-body { min-width: 0; }
}
/* Its policy links get 24 px targets (WCAG 2.5.8); a link Complianz prints empty (the cookie statement before its
   wizard has made that page) is no tab stop without a name. */
body .cmplz-cookiebanner .cmplz-documents .cmplz-link { display: inline-block; padding-block: 4px; }
body .cmplz-cookiebanner .cmplz-documents .cmplz-link:empty { display: none; }

/* ---------- mobile drawer: items arrive one after another ---------- */
@media (prefers-reduced-motion: no-preference) {
  .drawer-nav > a.top, .drawer-menu > li, .drawer-cats, .drawer-account, .drawer-nav > .lang {
    opacity: 0; transform: translate3d(-16px, 0, 0);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  .drawer.open .drawer-nav > a.top, .drawer.open .drawer-menu > li, .drawer.open .drawer-cats,
  .drawer.open .drawer-account, .drawer.open .drawer-nav > .lang {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: .12s;
  }
  .drawer.open .drawer-menu > li:nth-child(1) { transition-delay: .17s; }
  .drawer.open .drawer-menu > li:nth-child(2) { transition-delay: .22s; }
  .drawer.open .drawer-menu > li:nth-child(3) { transition-delay: .27s; }
  .drawer.open .drawer-menu > li:nth-child(4) { transition-delay: .32s; }
  .drawer.open .drawer-menu > li:nth-child(5) { transition-delay: .37s; }
  .drawer.open .drawer-menu > li:nth-child(6) { transition-delay: .42s; }
  .drawer.open .drawer-menu > li:nth-child(n+7) { transition-delay: .47s; }
  .drawer.open .drawer-cats { transition-delay: .5s; }
  .drawer.open .drawer-account { transition-delay: .56s; }
  .drawer.open .drawer-nav > .lang { transition-delay: .6s; }
}

/* ---------- cursor label over pieces («View») and rails («Drag»): fine pointers only, built by motion.js ---------- */
.curc-cursor {
  position: fixed; left: 0; top: 0; z-index: 990; pointer-events: none;
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
}
.curc-cursor > span {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--bronze); color: #fff; box-shadow: 0 10px 30px rgba(28, 26, 23, .18);
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; text-indent: .24em;
  transform: scale(0); opacity: 0;
  transition: transform .45s var(--ease-out), opacity .25s;
}
.curc-cursor.is-on > span { transform: scale(1); opacity: 1; }
.curc-cursor.is-drag > span { background: var(--ink); }
.curc-cursor.is-zoom > span { background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px rgba(28, 26, 23, .22); }
.curc-cursor.is-down > span { transform: scale(.86); }
.curc-cursor-ready .card, .curc-cursor-ready .card a, .curc-cursor-ready [data-cursor="view"], .curc-cursor-ready [data-cursor="read"], .curc-cursor-ready .rail-track { cursor: none; }

/* ---------- drag rail (home «pieces of the week»; reusable) ---------- */
.rail { position: relative; }
/* .rail > .rail-track outranks shop.css's ul.products { padding: 0 } */
.rail > .rail-track {
  --rail-pad: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  position: relative; /* offsetParent of the pieces: motion.js reads their offsetLeft */
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--rail-w, clamp(236px, 24vw, 350px)); gap: var(--rail-gap, 30px);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad);
  padding: 6px var(--rail-pad) 10px; scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; }
.rail-track:focus-visible { outline-offset: -2px; }
.rail-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.rail-track.is-dragging * { pointer-events: none; }
.rail-foot { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.rail-progress { position: relative; flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.rail-progress > span {
  position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%;
  transform: scaleX(var(--p, .2)); transition: transform .5s var(--ease-out);
}
.rail-count { font-family: var(--serif); font-size: 15px; letter-spacing: .12em; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-count b { font-weight: 400; color: var(--ink); }
.rail-btns { display: flex; gap: 10px; }
.round-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent;
  transition: border-color .3s, background .3s, color .3s, opacity .3s;
}
.round-btn .icon { width: 17px; height: 17px; transition: transform .45s var(--ease-out); }
.round-btn.prev .icon { transform: rotate(180deg); }
.round-btn:hover { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.round-btn.next:hover .icon { transform: translateX(3px); }
.round-btn.prev:hover .icon { transform: rotate(180deg) translateX(3px); }
.round-btn[disabled] { opacity: .35; pointer-events: none; }
.rail.is-static .rail-foot { display: none; }
@media (max-width: 560px) {
  .rail-track { --rail-w: 72vw; --rail-gap: 16px; }
  .rail-foot { gap: 18px; margin-top: 26px; }
  .rail-btns { display: none; }
}

/* ---------- page transitions: same-origin navigations cross-fade; a piece's photo travels to its page ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
header.site { view-transition-name: curc-header; }
::view-transition-old(root) { animation: curc-vt-out .32s var(--ease-in-out) both; }
::view-transition-new(root) { animation: curc-vt-in .6s var(--ease-out) .06s both; }
::view-transition-group(curc-piece) { animation-duration: .7s; animation-timing-function: var(--ease-out); }
::view-transition-old(curc-piece), ::view-transition-new(curc-piece) { height: 100%; object-fit: cover; overflow: clip; }
@keyframes curc-vt-out { to { opacity: 0; } }
@keyframes curc-vt-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* ---------- reduced motion: no hidden states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal]:not(.is-in), [data-reveal]:not(.is-in) img { opacity: 1; transform: none; clip-path: none; }
  [data-reveal="split"]:not(.is-in) .split-w > span { transform: none; }
  img.img-fade { opacity: 1; }
  html.curc-head-hidden header.site { transform: none; }
  .btn::before { display: none; }
}