/* ==========================================================================
   HERB & MORE — 3D DEPTH & MOTION LAYER
   - Fully isolated: remove this file + motion3d.js to revert.
   - Every hidden/initial state is scoped under html.m3d (set by JS),
     so without JS the site looks exactly as before.
   - Uses individual transform properties (translate / rotate) so it
     composes with the existing transform animations instead of fighting them.
   - Keeps the brand line: frameless, zero radius, 4 category colours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — DEPTH STAGE
   -------------------------------------------------------------------------- */

.fullscreen-slider-container {
  --mx: 0;          /* mouse x  : -0.5 .. 0.5 (lerped in JS) */
  --my: 0;          /* mouse y  : -0.5 .. 0.5 */
}

/* Spice particle field (canvas injected by JS) */
.m3d-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

/* Watermarks drift opposite to the mouse = deepest layer */
.m3d .slide-scene .watermark-text {
  translate: calc(var(--mx) * -46px) calc(var(--my) * -28px);
}

/* Text = middle layer */
.m3d .slide-text-side {
  translate: calc(var(--mx) * 18px) calc(var(--my) * 12px);
}

/* Product = front layer, real 3D rotation */
.m3d .slide-product-side {
  perspective: 1100px;
}

.m3d .floating-product-stage {
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--mx) * 22deg))
    rotateX(calc(var(--my) * -14deg));
}

.m3d .center-pack-image {
  translate: 0 0 70px;
}

.m3d .floating-prop {
  translate: 0 0 160px;
}

.m3d .floating-prop.prop-dof-2 {
  translate: 0 0 40px;
}

/* Grounding shadow — moves against the tilt, sells the depth */
.m3d .floating-product-stage::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 2%;
  height: 34px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0) 70%);
  transform: translateZ(-40px) translateX(calc(var(--mx) * -50px)) scaleX(calc(1 - var(--my) * 0.25));
  pointer-events: none;
  z-index: 1;
  animation: m3dShadowBreath 5s ease-in-out infinite;
}

@keyframes m3dShadowBreath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   2. HERO — 3D SCENE TRANSITIONS
   Outgoing scene sinks back, incoming scene rises forward.
   -------------------------------------------------------------------------- */

.m3d .slide-split-layout {
  transition:
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease;
  transform-origin: 50% 55%;
}

.m3d .slide-scene:not(.is-active) .slide-split-layout {
  transform: perspective(1600px) translateZ(-260px) rotateX(6deg);
  opacity: 0.25;
}

.m3d .slide-scene.is-active .slide-split-layout {
  transform: perspective(1600px) translateZ(0) rotateX(0);
  opacity: 1;
}

/* Category label */
.m3d .slide-pure-category {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, opacity 0.7s ease 0.15s, letter-spacing 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.m3d .slide-scene:not(.is-active) .slide-pure-category,
.m3d .fullscreen-slider-container:not(.m3d-on) .slide-pure-category {
  transform: translateY(24px);
  opacity: 0;
  letter-spacing: 0.5em;
}

/* Title lines (split by JS) rise out of a mask with a 3D hinge */
.m3d-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
  perspective: 800px;
}

.m3d-line > span {
  display: block;
  transform-origin: 50% 100%;
  transition:
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
  transition-delay: calc(0.22s + var(--i, 0) * 0.09s);
}

.m3d .slide-scene:not(.is-active) .m3d-line > span,
.m3d .fullscreen-slider-container:not(.m3d-on) .m3d-line > span {
  transform: translateY(105%) rotateX(-55deg);
  opacity: 0;
}

/* Pack enters from depth */
.m3d .center-pack-image {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease 0.2s, scale 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.m3d .slide-scene:not(.is-active) .center-pack-image,
.m3d .fullscreen-slider-container:not(.m3d-on) .center-pack-image {
  opacity: 0;
  scale: 0.7;
}

/* Silent clone-jump: no transitions at all (hooked in slider.js) */
.slide-scene.is-jumping,
.slide-scene.is-jumping * {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   3. SCROLL REVEALS (sections rise in with a slight 3D hinge)
   -------------------------------------------------------------------------- */

.m3d .home-pillars-grid,
.m3d .home-curated-grid,
.m3d .home-standards-grid,
.m3d .manifest-grid,
.m3d .journal-split-card,
.m3d .catalogue-inner-layout,
.m3d .insta-posts-grid,
.m3d main [class*="grid"],
.m3d main [class*="split"],
.m3d footer [class*="grid"],
.m3d footer [class*="layout"] {
  perspective: 1400px;
}

.m3d [data-reveal] {
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    translate 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    rotate 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--d, 0) * 0.08s);
  transform-origin: 50% 100%;
}

/* Blocks (cards, images, panels): rise with a 3D hinge */
.m3d [data-reveal="block"]:not(.is-inview) {
  opacity: 0;
  translate: 0 64px;
  rotate: x 14deg;
}

/* Text lines: calm rise */
.m3d [data-reveal="text"]:not(.is-inview) {
  opacity: 0;
  translate: 0 28px;
}

/* H1 / H2: wipe up through a mask */
.m3d [data-reveal="title"] {
  clip-path: inset(-0.3em -0.2em -0.3em -0.2em);
}

.m3d [data-reveal="title"]:not(.is-inview) {
  opacity: 0;
  translate: 0 0.6em;
  clip-path: inset(0 -0.2em 100% -0.2em);
}

/* Photos: curtain wipe + depth parallax (classes set by JS) */
.m3d .m3d-photo {
  transition:
    clip-path 1.4s cubic-bezier(0.77, 0, 0.18, 1),
    scale 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.m3d .m3d-photo:not(.is-inview) {
  clip-path: inset(100% 0 0 0);
  scale: 1.3;
}

.m3d .m3d-photo.is-inview {
  clip-path: inset(0 0 0 0);
}

.m3d .m3d-photo-depth.is-inview {
  scale: 1.14;
  translate: 0 var(--py, 0px);
}

/* Scroll progress line */
.m3d-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent-yellow, #FFD200);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 100000;
  pointer-events: none;
}

body.menu-is-open .m3d-progress { opacity: 0; }

/* Breadcrumb hero content lifts away on scroll */
.m3d .page-hero-breadcrumb .breadcrumb-container {
  will-change: transform, opacity;
}

/* Section rule draws itself in ink */
.m3d .home-section-header {
  position: relative;
}

.m3d .home-section-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: #121316;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.m3d .home-section-header.is-inview::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   4. 3D TILT CARDS (pillars, curated, product catalogue)
   -------------------------------------------------------------------------- */

.m3d-tilt {
  position: relative;
  transform: none !important;
}

/* Only the packshot moves — card frame & background stay still */
.m3d-tilt .home-pillar-img,
.m3d-tilt .curated-img,
.m3d-tilt .prod-img,
.m3d-tilt .cat-card-img {
  will-change: transform;
  transform-origin: 50% 60%;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

.m3d-tilt.is-tilting .home-pillar-img,
.m3d-tilt.is-tilting .curated-img,
.m3d-tilt.is-tilting .prod-img,
.m3d-tilt.is-tilting .cat-card-img {
  transition: transform 0.15s linear, filter 0.5s ease;
  filter: drop-shadow(0 22px 22px rgba(18, 19, 22, 0.18));
}

.m3d-glare { display: none; }


/* --------------------------------------------------------------------------
   5. JOURNAL PARALLAX & CATALOGUE BOOKLET
   -------------------------------------------------------------------------- */

.m3d .catalogue-visual-col {
  perspective: 1200px;
}

.m3d .catalogue-mockup-wrapper {
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--cx, 0) * 18deg))
    rotateX(calc(var(--cy, 0) * -12deg));
  transition: transform 0.15s linear;
}

/* --------------------------------------------------------------------------
   6. ACCESSIBILITY — REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .m3d-particles { display: none !important; }

  .m3d *,
  .m3d *::before,
  .m3d *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .m3d [data-reveal]:not(.is-inview),
  .m3d .slide-scene:not(.is-active) .m3d-line > span,
  .m3d .slide-scene:not(.is-active) .slide-pure-category {
    opacity: 1;
    translate: none;
    rotate: none;
    transform: none;
  }
}

@media (max-width: 1200px) {
  /* Single-column hero: keep the depth but calm the travel */
  .m3d .slide-text-side { translate: none; }
}