/* Motion system — tokeni, reveal-uri data-reveal, parallax view()-only
 *
 * Conventie scroll (repetata pe site):
 * - Sus pagina: listing-intro + fade-up/lines + data-reveal-trigger="load"
 * - Sectiune: .head.head--motion + data-stagger, titlu/CTA cu fade-up la scroll
 * - Grid / rail / strip: data-stagger + fade-up (sau fade pe logo-uri strip)
 * - Imagini statement: data-reveal="clip"; optional data-parallax="sm" in interior
 * - Footer: coloane linkuri cu stagger + fade-up (newsletter fara animatie)
 */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 200ms;
  --dur-base: 600ms;
  --dur-slow: 1100ms;
  --dist-sm: 8px;
  --dist-md: 16px;
  --dist-lg: 24px;
  --stagger: 70ms;
}

@keyframes motion-fade-up {
  from { opacity: 0; transform: translateY(var(--dist-md)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes motion-clip {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes motion-scale {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

@keyframes motion-line-up {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

@keyframes motion-parallax-sm {
  from { transform: translateY(0); }
  to { transform: translateY(-40px); }
}

/* fade-up */
html.js-motion [data-reveal="fade-up"].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* fade */
html.js-motion [data-reveal="fade"].is-in {
  opacity: 1;
}

/* clip */
html.js-motion [data-reveal="clip"].is-in {
  clip-path: inset(0 0 0 0);
}

/* scale — opacity ramane 1 (LCP-safe pe imagini hero); animatie la load, nu la scroll */
html.js-motion [data-reveal="scale"] {
  animation: motion-scale var(--dur-slow) var(--ease-out) both;
}

/* lines — markup: .motion-line > .motion-line__inner */
html.js-motion [data-reveal="lines"] .motion-line {
  display: block;
  overflow: hidden;
}

html.js-motion [data-reveal="lines"] .motion-line__inner {
  display: block;
}

html.js-motion [data-reveal="lines"].is-in .motion-line__inner {
  transform: translateY(0);
}

/* Stagger pe copiii directi (max 8 desktop / 4 mobil — delay in JS) — delay doar pe transition (IO scroll) */
html.js-motion [data-stagger] > * {
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* Reveal la scroll: IntersectionObserver + .is-in (fiabil in Chrome/Safari/Firefox) */
html.js-motion [data-reveal="fade-up"]:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--dist-md));
}

html.js-motion [data-reveal="fade-up"].is-in {
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

html.js-motion [data-reveal="fade"]:not(.is-in) {
  opacity: 0;
}

html.js-motion [data-reveal="fade"].is-in {
  transition: opacity var(--dur-base) var(--ease-out);
}

html.js-motion [data-reveal="clip"]:not(.is-in) {
  clip-path: inset(0 0 100% 0);
}

html.js-motion [data-reveal="clip"].is-in {
  transition: clip-path var(--dur-slow) var(--ease-out);
}

/* Catcard: un singur reveal pe card (fade-up) + clip pe imagine via copil */
html.js-motion .catcard[data-reveal="fade-up"]:not(.is-in) .catcard__img {
  clip-path: inset(0 0 100% 0);
}

html.js-motion .catcard[data-reveal="fade-up"].is-in .catcard__img {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-slow) var(--ease-out);
}

html.js-motion [data-reveal="lines"] .motion-line__inner {
  transform: translateY(110%);
}

html.js-motion [data-reveal="lines"].is-in .motion-line__inner {
  transition: transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

@supports (animation-timeline: view()) {
  html.js-motion [data-parallax="sm"] {
    animation: motion-parallax-sm linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* Logo banner: linia din PNG trebuie sa coincida cu .catb__line (56%) — fara parallax */
  html.js-motion .symbol--banner [data-parallax="sm"] {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal],
  html.js-motion [data-parallax] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  html.js-motion [data-reveal="lines"] .motion-line__inner {
    transform: none !important;
  }
}

@media (max-width: 767px) {
  :root {
    --dist-sm: 4px;
    --dist-md: 8px;
    --dist-lg: 12px;
  }
}

/* --- Faza 2: elemente globale --- */

.motion-scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

@property --nav-compact {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: var(--ease-out);
}

html.js-motion [data-nav-shell] {
  --nav-compact: 0;
  position: relative;
  view-transition-name: site-header;
}

html.js-motion [data-nav-shell] .nav {
  padding-block: calc(22px - var(--nav-compact) * 10px);
}

html.js-motion [data-nav-shell] .logo__img {
  transform: scale(calc(1 - var(--nav-compact) * 0.1));
  transform-origin: center center;
}

html.js-motion [data-nav-shell]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 0 0 18px 18px;
  background: rgba(246, 244, 241, calc(var(--nav-compact) * 0.9));
}

@supports (animation-timeline: scroll()) {
  html.js-motion [data-nav-shell].motion-nav-scroll {
    animation: motion-nav-compact linear both;
    animation-timeline: scroll();
    animation-range: 0 120px;
  }
}

@keyframes motion-nav-compact {
  from { --nav-compact: 0; }
  to { --nav-compact: 1; }
}

html.js-motion [data-nav-shell].is-compact {
  --nav-compact: 1;
}

html.js-motion [data-nav-shell].is-compact .nav,
html.js-motion [data-nav-shell].motion-nav-scroll .nav {
  transition: padding-block var(--dur-fast) var(--ease-out);
}

html.js-motion [data-nav-shell].is-compact .logo__img {
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Dropdown produse + limba */
html.js-motion .nav-prod__drop,
html.js-motion .lang__pop {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms var(--ease-out),
    transform 140ms var(--ease-out),
    visibility 0s linear 140ms;
}

html.js-motion .nav-prod__drop {
  transform: translateX(-50%) translateY(var(--dist-sm));
}

html.js-motion .lang__pop {
  transform: translateY(var(--dist-sm));
}

html.js-motion .nav-prod__drop:not([hidden]),
html.js-motion .lang__pop:not([hidden]) {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s;
}

html.js-motion .nav-prod__drop:not([hidden]) {
  transform: translateX(-50%) translateY(0);
}

html.js-motion .lang__pop:not([hidden]) {
  transform: translateY(0);
}

@starting-style {
  html.js-motion .nav-prod__drop:not([hidden]) {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--dist-sm));
  }

  html.js-motion .lang__pop:not([hidden]) {
    opacity: 0;
    transform: translateY(var(--dist-sm));
  }
}

/* Link-uri text: underline de la stanga + sageata (fara nav — doar fundal la hover) */
html.js-motion .link-more,
html.js-motion .crumb a:not(.crumb__back) {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

html.js-motion .link-more::after,
html.js-motion .crumb a:not(.crumb__back)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}

html.js-motion .link-more:hover::after,
html.js-motion .crumb a:not(.crumb__back):hover::after,
html.js-motion .link-more:focus-visible::after,
html.js-motion .crumb a:not(.crumb__back):focus-visible::after {
  transform: scaleX(1);
}

/* Sageata → : doar .arr se deplaseaza la hover/focus pe parinte */
html.js-motion .arr {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out), color var(--t-fast);
}

html.js-motion a:hover .arr,
html.js-motion a:focus-visible .arr,
html.js-motion button:hover .arr,
html.js-motion button:focus-visible .arr {
  transform: translateX(4px);
}

/* Butoane */
html.js-motion .btn,
html.js-motion .pill,
html.js-motion .chip {
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

html.js-motion .btn:active,
html.js-motion .pill:active,
html.js-motion .chip:active {
  transform: scale(0.98);
}

/* Focus vizibil */
html.js-motion .btn:focus-visible,
html.js-motion .pill:focus-visible,
html.js-motion .chip:focus-visible,
html.js-motion .nav__menu:focus-visible,
html.js-motion .ibtn:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 3px;
  transition: outline-offset var(--dur-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-nav-shell],
  html.js-motion [data-nav-shell] .logo__img,
  html.js-motion [data-nav-shell] .nav {
    animation: none !important;
    transition: none !important;
    --nav-compact: 0 !important;
  }

  html.js-motion [data-nav-shell]::before {
    background: transparent !important;
  }

  html.js-motion .nav-prod__drop,
  html.js-motion .lang__pop {
    transition: none !important;
    transform: none !important;
  }

  html.js-motion .btn:active,
  html.js-motion .pill:active,
  html.js-motion .chip:active,
  html.js-motion a:hover .arr,
  html.js-motion a:focus-visible .arr,
  html.js-motion button:hover .arr,
  html.js-motion button:focus-visible .arr {
    transform: none !important;
  }
}

/* --- Faza 3: Home + card produs (refolosit in listari) --- */

.deluxe__img-in {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.deluxe__img-in .design-img,
.deluxe__img-in .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Colectiile Deluxe: stagger pe article (--deluxe-i) + stagger local in .deluxe__body (--i) */
html.js-motion .deluxe[data-stagger] > article {
  --deluxe-i: var(--i, 0);
}

html.js-motion .deluxe[data-stagger] > article .deluxe__img[data-reveal="clip"],
html.js-motion .deluxe[data-stagger] > article .deluxe__body [data-reveal="fade-up"] {
  transition-delay: calc(var(--deluxe-i, 0) * var(--stagger) + var(--i, 0) * var(--stagger));
}

html.js-motion .deluxe__img[data-reveal="clip"] {
  overflow: hidden;
}

/* Carusel: doar slide stanga-dreapta — fara fade-up la scroll pe carduri */
html.js-motion [data-carousel] [data-reveal="fade-up"],
html.js-motion [data-carousel] [data-reveal="fade"] {
  opacity: 1 !important;
  transform: none !important;
}

html.js-motion .pcard {
  transition: transform var(--dur-base) var(--ease-out);
}

html.js-motion .pcard:hover {
  transform: translateY(-4px);
}

html.js-motion .pcard__img .design-img,
html.js-motion .pcard__img .pcard-photo,
html.js-motion .pcard__img .prodimg__ph {
  transition: transform var(--dur-base) var(--ease-out);
}

html.js-motion .pcard:hover .pcard__img .design-img,
html.js-motion .pcard:hover .pcard__img .pcard-photo,
html.js-motion .pcard:hover .pcard__img .prodimg__ph,
html.js-motion .pcard:focus-within .pcard__img .design-img,
html.js-motion .pcard:focus-within .pcard__img .pcard-photo,
html.js-motion .pcard:focus-within .pcard__img .prodimg__ph {
  transform: scale(1.04);
}

/* contain (fit): pastreaza centrarea translate + scale, altfel imaginea sare */
html.js-motion .pcard:hover .pcard__img .pcard-photo--fit,
html.js-motion .pcard:hover .pcard__img .design-img.pcard-photo--fit,
html.js-motion .pcard:focus-within .pcard__img .pcard-photo--fit,
html.js-motion .pcard:focus-within .pcard__img .design-img.pcard-photo--fit {
  transform: translate(-50%, -50%) scale(1.04);
}

/* Buton mereu vizibil; la hover card doar fundal maro (fara fade/slide) */
html.js-motion .pcard:hover .btn,
html.js-motion .pcard:focus-within .btn {
  background: var(--c-brown);
  border-color: var(--c-brown);
  color: var(--c-white);
}

html.js-motion .pcard:hover .btn svg [fill]:not([fill="none"]),
html.js-motion .pcard:focus-within .btn svg [fill]:not([fill="none"]) {
  fill: currentColor;
}

html.js-motion .catcard {
  transition: transform var(--dur-base) var(--ease-out);
}

html.js-motion .catcard:hover {
  transform: translateY(-4px);
}

html.js-motion .catcard__img .ph,
html.js-motion .catcard__img .design-img {
  transition: transform var(--dur-base) var(--ease-out);
}

html.js-motion .catcard:hover .catcard__img .ph,
html.js-motion .catcard:hover .catcard__img .design-img {
  transform: scale(1.03);
}

html.js-motion .strip__logo {
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-out);
}

html.js-motion .strip a:hover .strip__logo,
html.js-motion .strip a:focus-visible .strip__logo {
  opacity: 1;
}

html.js-motion .hero__img[data-reveal="scale"] {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .pcard,
  html.js-motion .catcard {
    transform: none !important;
  }

  html.js-motion .strip__logo {
    opacity: 1 !important;
  }
}

/* --- Faza 4: listari produse --- */

html.js-motion .listing-live.is-busy {
  opacity: 1;
}

html.js-motion .listing__grid {
  transition: opacity var(--dur-fast) var(--ease-out);
}

html.js-motion .listing-live.is-busy .listing__grid {
  opacity: 0.42;
  pointer-events: none;
}

html.js-motion a.pcard__img {
  view-transition-name: none;
}

/* --- Faza 5: pagina produs --- */

html.js-motion .gal__main {
  view-transition-name: product-image;
}

::view-transition-group(product-image) {
  animation-duration: 450ms;
  animation-timing-function: var(--ease-in-out);
}

html.js-motion .gal__main > .prodimg,
html.js-motion .gal__main > .pcard-photo {
  transition: opacity var(--dur-fast) var(--ease-out);
}

html.js-motion .gal__main.is-swapping > .prodimg,
html.js-motion .gal__main.is-swapping > .pcard-photo {
  opacity: 0;
}

html.js-motion [data-prod-tabs] .prod-tabs__panel {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

html.js-motion [data-prod-tabs] .prod-tabs__panel.is-open {
  grid-template-rows: 1fr;
}

html.js-motion [data-prod-tabs] .prod-tabs__panel-in {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

html.js-motion [data-prod-tabs] .prod-tabs__panel.is-open .prod-tabs__panel-in {
  opacity: 1;
}

html.js-motion [data-prod-tabs] .prod-tabs__panel[hidden] {
  display: none !important;
}

/* Tablist: fade fara translateY — altfel gap-ul fata de panou pare strans (16px transform vs margin) */
html.js-motion [data-prod-tabs] .prod-tabs__pills[data-reveal="fade-up"]:not(.is-in) {
  transform: none;
}

html.js-motion .cart-n--pulse {
  animation: motion-cart-pulse 450ms var(--ease-in-out) once;
}

@keyframes motion-cart-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Faza 6 — branduri */
html.js-motion #cataloage,
html.js-motion #brand-cataloage {
  scroll-margin-top: 100px;
}

html.js-motion .bcard {
  transition: transform var(--dur-base) var(--ease-out);
}

html.js-motion .bcard:hover {
  transform: translateY(-2px);
}

html.js-motion .bcard__logo img,
html.js-motion .bcard__logo .brandlogo,
html.js-motion .bcard__logo .wordlogo {
  transition: transform var(--dur-slow) var(--ease-out);
  transform-origin: center center;
}

html.js-motion .bcard:hover .bcard__logo img,
html.js-motion .bcard:hover .bcard__logo .brandlogo,
html.js-motion .bcard:hover .bcard__logo .wordlogo {
  transform: scale(1.03);
}

html.js-motion .brand-page__cat-dl svg {
  transition: transform var(--dur-fast) var(--ease-out);
}

html.js-motion .brand-page__cat-dl:hover svg {
  transform: translateY(2px);
}

/* Faza 7 — despre noi */
html.js-motion #unde {
  scroll-margin-top: 100px;
}

html.js-motion .about-page__photo.deluxe__img {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .gal__main {
    view-transition-name: none !important;
  }

  html.js-motion [data-prod-tabs] .prod-tabs__panel,
  html.js-motion [data-prod-tabs] .prod-tabs__panel-in {
    transition: none !important;
  }

  html.js-motion .cart-n--pulse {
    animation: none !important;
  }

  html.js-motion .bcard,
  html.js-motion .bcard__logo img,
  html.js-motion .bcard__logo .brandlogo,
  html.js-motion .bcard__logo .wordlogo,
  html.js-motion .brand-page__cat-dl svg {
    transition: none !important;
  }

  html.js-motion .bcard:hover {
    transform: none;
  }

  html.js-motion .bcard:hover .bcard__logo img,
  html.js-motion .bcard:hover .bcard__logo .brandlogo,
  html.js-motion .bcard:hover .bcard__logo .wordlogo,
  html.js-motion .brand-page__cat-dl:hover svg {
    transform: none;
  }
}

/* ========== Faza 8: animatii mobil ========== */

@media (max-width: 1023px) {
  html.js-motion [data-parallax],
  html.js-motion [data-parallax="sm"],
  html.js-motion .deluxe__img-in[data-parallax],
  html.js-motion .deluxe__img-in [data-parallax] {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  html.js-motion .gal__main {
    view-transition-name: none !important;
  }

  html.js-motion .gal__slide:first-child {
    view-transition-name: product-image;
  }

  html.js-motion .carousel:not(.carousel--native) .carousel__viewport,
  html.js-motion .carousel:not(.carousel--native) .carousel__track {
    overflow-x: clip;
  }

  html.js-motion [data-reveal="lines"] .motion-line__inner {
    transform: translateY(105%);
  }
}

html.js-motion .listing-intro,
html.js-motion [data-stagger],
html.js-motion .prod-tabs__stack,
html.js-motion .gal__frame {
  overflow-x: clip;
}