/*
  DIETLY MOTION LAYERS
  All moving UI uses transform and opacity. Booking/payment fields and buttons remain stable.
*/
.motion-stage{
  --scroll-rotate-x:0deg;
  --scroll-rotate-y:0deg;
  --pointer-rotate-x:0deg;
  --pointer-rotate-y:0deg;
  --scroll-shift:0px;
  --scene-open:0;
  perspective:1100px;
  transform-style:preserve-3d;
  isolation:isolate;
}
.nutrition-scene{
  position:absolute;
  inset:-4%;
  z-index:0;
  width:108%;
  height:108%;
  pointer-events:none;
  opacity:.82;
  mask-image:radial-gradient(circle at 52% 45%,#000 12%,rgba(0,0,0,.94) 48%,transparent 82%);
}
.motion-stage .portrait-shell{
  z-index:2;
  transform:
    translate3d(0,var(--scroll-shift),28px)
    rotateX(calc(var(--scroll-rotate-x) + var(--pointer-rotate-x)))
    rotateY(calc(var(--scroll-rotate-y) + var(--pointer-rotate-y)));
  transform-style:preserve-3d;
  will-change:transform;
}
.motion-stage .desktop-decor{z-index:5}
.nutrient-halo{
  position:absolute;
  inset:7% 1% 3% 5%;
  z-index:1;
  pointer-events:none;
  transform-style:preserve-3d;
  transform:
    translate3d(0,calc(var(--scroll-shift) * -.4),0)
    rotateX(calc(61deg - var(--scene-open) * 8deg))
    rotateZ(calc(-12deg + var(--scene-open) * 12deg));
  opacity:.72;
}
.halo-ring,.halo-core{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);border-radius:50%}
.halo-ring-one{width:74%;aspect-ratio:1;border:1px solid rgba(111,141,133,.25);box-shadow:0 0 55px rgba(131,150,95,.08)}
.halo-ring-two{width:54%;aspect-ratio:1;border:1px solid rgba(201,109,73,.18)}
.halo-core{width:19%;aspect-ratio:1;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.82),rgba(131,150,95,.16) 50%,rgba(53,71,44,.08));box-shadow:0 18px 55px rgba(53,71,44,.14)}

.depth-surface{
  --surface-rx:0deg;
  --surface-ry:0deg;
  transform:
    perspective(1200px)
    rotateX(var(--surface-rx))
    rotateY(var(--surface-ry));
  transform-style:preserve-3d;
  transition:transform .18s ease-out,box-shadow .25s ease;
}
.depth-surface>*{transform:translateZ(1px)}
.process-grid{perspective:1200px}
.motion-story-card{
  --story-x:0px;
  --story-y:0px;
  --story-rx:0deg;
  --story-ry:0deg;
  transform:
    translate3d(var(--story-x),var(--story-y),0)
    rotateX(var(--story-rx))
    rotateY(var(--story-ry));
  transform-style:preserve-3d;
  will-change:transform;
}
.plate-motion-stage{
  --plate-depth:0;
  perspective:1100px;
}
.plate-motion-stage .plate{
  filter:drop-shadow(0 calc(24px + var(--plate-depth) * 12px) calc(26px + var(--plate-depth) * 12px) rgba(50,61,45,.13));
}
.concerns::after,.approach::after,.process::after{
  content:"";
  position:absolute;
  z-index:0;
  left:-5%;
  right:-5%;
  bottom:-42px;
  height:84px;
  pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0,rgba(131,150,95,.10),transparent 70%);
}
.concerns>.container,.approach>.container,.process>.container{position:relative;z-index:1}

/* Reduced tier keeps depth cues but removes the denser canvas and floating decoration. */
html[data-motion-quality="reduced"] .nutrition-scene{opacity:.45}
html[data-motion-quality="reduced"] .orb-beans,
html[data-motion-quality="reduced"] .orb-fruit{display:none}
html[data-motion-quality="reduced"] .depth-surface{transform:none!important}
html[data-motion-quality="reduced"] .motion-stage .portrait-shell{
  transform:translate3d(0,var(--scroll-shift),0) rotateY(var(--scroll-rotate-y));
}

/* Accessible tier is fully functional without animation. */
html[data-motion-quality="accessible"] .nutrition-scene,
html[data-motion-quality="accessible"] .nutrient-halo,
html[data-motion-quality="accessible"] .desktop-decor{display:none!important}
html[data-motion-quality="accessible"] .motion-stage .portrait-shell,
html[data-motion-quality="accessible"] .depth-surface,
html[data-motion-quality="accessible"] .motion-story-card{
  transform:none!important;
  transition:none!important;
}

@media(max-width:820px){
  .nutrition-scene{inset:-1%;width:102%;height:102%;opacity:.42}
  .nutrient-halo{inset:3% 0 8%}
  .motion-stage .portrait-shell{
    transform:translate3d(0,var(--scroll-shift),0) rotateY(calc(var(--scroll-rotate-y) * .45));
  }
}
@media(max-width:580px){
  .nutrition-scene,.nutrient-halo{display:none}
  .motion-stage .portrait-shell{transform:none}
}