/* OBAIA: ambient movement and automatic greetings with the official fruit. */
/* The menu gets its own edition of the floating product composition. */
.menu-juice-hero .ab-stage { padding-top: clamp(104px,14svh,132px); padding-bottom: 10px; }
.menu-juice-hero .ab-title { --ab-title: clamp(52px,min(15.4vw,18svh),154px); }
.menu-juice-hero .ab-bowl {
  width: min(40svh,72vw,370px); aspect-ratio: 2 / 3;
  margin-top: -110px;
}
.menu-category-nav {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 25px; padding: 17px 20px 35px; position: relative; z-index: 3;
}
.menu-category-nav a {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 0;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  position: relative;
}
.menu-category-nav a::after { content: '↘'; font-size: 15px; transition: transform .5s var(--obaia-ease); }
.menu-category-nav a:hover::after { transform: translate3d(3px,3px,0); }
.menu-category-nav + main { padding-top: 12px; }
.category-note {
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: fit-content; max-width: 100%; padding: 8px 15px;
  margin-bottom: 28px; border-width: 1px; border-radius: 999px; text-align: left;
}
.category-note h4 { font-size: clamp(10px,1.05vw,12px); line-height: 1.4; font-weight: 700; }
.section-title { font-size: clamp(2.6rem,6.1vw,4.6rem); line-height: 1.07; }
.menu-section { scroll-margin-top: 104px; }

/* One action column: the best-seller badge and photo cue share one slot. */
.product-photo-trigger { display: grid; grid-template-columns: minmax(0,1fr) 116px; gap: 13px; }
.product-photo-cue {
  width: 116px; height: 36px; position: relative; justify-content: flex-end;
  opacity: .78;
}
.product-photo-face { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; width: 100%; }
.product-photo-best {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  opacity: 0; transform: translateY(12px);
}
.product-best-label {
  display: inline-flex; align-items: center; justify-content: center; min-width: 108px;
  height: 23px; padding: 3px 10px; border: 1px solid rgb(58 55 5 / 30%);
  border-radius: 999px; font-size: 8px; font-weight: 700; line-height: 1;
  color: var(--pepin); letter-spacing: .045em; text-transform: uppercase;
}
.product-photo-switch .product-photo-face { animation: obaia-photo-face 6.8s var(--obaia-ease) infinite; }
.product-photo-switch .product-photo-best { animation: obaia-best-face 6.8s var(--obaia-ease) infinite; }
@keyframes obaia-photo-face {
  0%,38%,100% { opacity: 1; transform: translateY(0); }
  46%,87% { opacity: 0; transform: translateY(-12px); }
  95% { opacity: 1; transform: translateY(0); }
}
@keyframes obaia-best-face {
  0%,38%,100% { opacity: 0; transform: translateY(12px); }
  46%,87% { opacity: 1; transform: translateY(0); }
  95% { opacity: 0; transform: translateY(-12px); }
}
.product-photo-trigger:hover .product-photo-face,
.product-photo-trigger:focus-visible .product-photo-face { animation: none; opacity: 1; transform: none; }
.product-photo-trigger:hover .product-photo-best,
.product-photo-trigger:focus-visible .product-photo-best { animation: none; opacity: 0; transform: translateY(12px); }
.product-photo-trigger:hover .photo-product-name { transform: translateX(5px) skewX(-1deg); }
.product-info p { transition: transform .7s var(--obaia-ease); }
.product-item:hover .product-info p { transform: translateX(3px); }

/* Separate layers prevent ambient, pointer and scroll movement competing. */
.ab-title,.ab-bowl { pointer-events: auto; }
.product-hover-layer {
  width: 100%; height: 100%; transform: translate3d(var(--product-x,0px),var(--product-y,0px),0) rotate(var(--product-r,0deg));
  transition: transform .9s var(--obaia-ease);
}
.image-hop-layer { width: 100%; height: 100%; }
.micro-hop-image { animation: obaia-image-hop .8s var(--obaia-ease) both; }
.micro-hop-letter { animation: obaia-letter-hop .7s var(--obaia-ease) calc(var(--hop-order,0) * 45ms) both; }
@keyframes obaia-image-hop {
  0%,100% { transform: translateY(0) rotate(0); }
  36% { transform: translateY(-8px) rotate(-.45deg); }
  64% { transform: translateY(1px) rotate(.15deg); }
  82% { transform: translateY(-2px) rotate(-.1deg); }
}
@keyframes obaia-letter-hop {
  0%,100% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(-7px) rotate(-2deg); }
  66% { transform: translateY(1px) rotate(.6deg); }
  83% { transform: translateY(-2px) rotate(-.3deg); }
}
.product-air-layer { width: 100%; height: 100%; animation: obaia-product-air 7s ease-in-out infinite; animation-play-state: paused; }
.is-on-screen .product-air-layer { animation-play-state: running; }
@keyframes obaia-product-air {
  0%,100% { transform: translateY(-3px) rotate(-.65deg); }
  50% { transform: translateY(5px) rotate(.65deg); }
}
.ab-title .ab-ch { transition: transform .7s var(--obaia-ease); }
.ab.ab-in .ab-title:hover .ab-ch:nth-child(3n+1) { transform: translateY(-6px) rotate(-2deg); }
.ab.ab-in .ab-title:hover .ab-ch:nth-child(3n+2) { transform: translateY(2px) rotate(1.5deg); }
.title-magnet { display: inline-block; max-width: 100%; transform: translate3d(var(--title-x,0px),var(--title-y,0px),0); transition: transform .9s var(--obaia-ease); }
.live-word { display: inline-block; white-space: nowrap; }
.title-air { display: inline-block; max-width: 100%; white-space: normal; animation: obaia-title-air 8s ease-in-out infinite; animation-play-state: paused; }
.is-on-screen .title-air { animation-play-state: running; }
.live-letter { display: inline-block; transition: transform .65s var(--obaia-ease); transition-delay: calc(var(--letter-i) * 9ms); }
main h2:hover .live-letter:nth-child(3n+1) { transform: translateY(-6px) rotate(-2deg); }
main h2:hover .live-letter:nth-child(3n+2) { transform: translateY(3px) rotate(1deg); }
@keyframes obaia-title-air {
  0%,100% { transform: translateY(-1.5px) rotate(-.12deg); }
  50% { transform: translateY(2px) rotate(.12deg); }
}
.photo-depth-layer {
  width: 100%; height: 100%; transform: translate3d(var(--photo-x,0px),var(--photo-y,0px),0) rotate(var(--photo-r,0deg)) scale(var(--photo-zoom,1));
  transition: transform 1.1s var(--obaia-ease);
}
.photo-depth-layer img {
  animation: obaia-photo-air 11s ease-in-out infinite; animation-play-state: paused;
}
.is-on-screen .photo-depth-layer img { animation-play-state: running; }
@keyframes obaia-photo-air {
  0%,100% { transform: translateY(-3px) rotate(-.2deg) scale(1.045); }
  50% { transform: translateY(4px) rotate(.2deg) scale(1.045); }
}
.section-visual:hover .photo-depth-layer,.historia-img-wrap:hover .photo-depth-layer,
.producto-img-wrap:hover .photo-depth-layer,.season-img-wrap:hover .photo-depth-layer { --photo-zoom: 1.035; }
.obaia-arriving .product-air-layer,.obaia-arriving .title-air,.obaia-arriving .photo-depth-layer img,
.obaia-paused .product-air-layer,.obaia-paused .title-air,.obaia-paused .photo-depth-layer img,
.obaia-paused .product-photo-switch > span { animation-play-state: paused !important; }
.obaia-paused .micro-hop-image,.obaia-paused .micro-hop-letter { animation-play-state: paused !important; }
@media (max-width:991px) {
  .section-visual { aspect-ratio: 5 / 4; max-height: 540px; border-radius: 38px; }
  .section-visual img { object-position: 50% 60%; }
}
@media (max-width:600px) {
  .menu-juice-hero .ab-stage { padding-top: 98px; }
  .menu-juice-hero .ab-title { --ab-title: clamp(46px,15.4vw,80px); }
  .menu-juice-hero .ab-bowl { width: min(33svh,66vw); margin-top: -35px; }
  .menu-category-nav { gap: 8px 17px; padding-bottom: 28px; }
  .menu-category-nav a { font-size: 8px; }
  .category-note { padding: 7px 12px; }
  .category-note h4 { font-size: 9px; }
  .product-photo-trigger { grid-template-columns: minmax(0,1fr) 98px; gap: 8px; }
  .product-photo-cue { width: 98px; }
  .product-best-label { min-width: 96px; font-size: 7px; }
  .section-visual { border-radius: 30px; }
}
@media (prefers-reduced-motion:reduce) {
  .obaia-wipe,.obaia-wave { display: none; }
  .product-air-layer,.title-air,.photo-depth-layer img,.live-letter,.title-magnet,.product-hover-layer { animation: none !important; transform: none !important; }
  .micro-hop-image,.micro-hop-letter { animation: none !important; transform: none !important; }
  .product-photo-switch .product-photo-face { animation: none; opacity: 1; transform: none; }
  .product-photo-switch .product-photo-best { animation: none; opacity: 1; transform: none; top: 31px; }
  .product-photo-switch { margin-bottom: 19px; }
  .product-best-label { height: 18px; font-size: 7px; }
}

/* No backing or badge: only the original fruit in the brand's own colours. */
.obaia-wave {
  position: absolute; width: 27px; height: 35px; opacity: 0; z-index: 5;
  pointer-events: none; transform: translateY(7px) rotate(-12deg);
  transform-origin: 50% 90%;
}
.obaia-wave img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; animation: none !important; }
.obaia-wave--logo { left: calc(100% + 10px); top: calc(50% - 15px); width: 23px; height: 30px; }
.obaia-wave--categories { right: 6%; bottom: 4px; width: 23px; height: 30px; }
.obaia-wave--note { right: 8px; top: -33px; width: 23px; height: 30px; }
.obaia-wave--heading { right: 10px; top: -32px; width: 24px; height: 31px; }
.obaia-wave--photo { right: 18px; bottom: 18px; width: 34px; height: 43px; filter: drop-shadow(0 1px 2px #751b3860); }
.obaia-wave--footer { right: 8px; top: -35px; }
.obaia-wave.is-waving { animation: obaia-automatic-hello 1.35s ease-in-out both; }
@keyframes obaia-automatic-hello {
  0%,100% { opacity: 0; transform: translateY(7px) rotate(-12deg); }
  14% { opacity: 1; transform: translateY(0) rotate(-10deg); }
  29% { opacity: 1; transform: translateY(-5px) rotate(13deg); }
  44% { opacity: 1; transform: translateY(0) rotate(-12deg); }
  59% { opacity: 1; transform: translateY(-3px) rotate(9deg); }
  76% { opacity: 1; transform: translateY(0) rotate(-3deg); }
}
.obaia-paused .obaia-wave.is-waving { animation-play-state: paused; }

.ab.ab-js .ab-bowl img, .ab.ab-js.ab-in .ab-bowl img,
.season-card:hover .season-img-wrap img, .producto-card:hover .producto-img-wrap img,
.historia-img-wrap:hover img, .menu-section:hover .section-visual img,
.product-photo-dialog, .product-photo-media > img {
  transform: none; transition: opacity .2s ease;
}
.ab.ab-js .ab-bowl img { opacity: 1; }
.season-slider.fade-up, .producto-card.fade-up, .historia-img-wrap.fade-up {
  opacity: 1; transform: none;
}
.product-photo-media > img { clip-path: none; }
@media (prefers-reduced-motion:no-preference) {
  :is(.product-photo-trigger,.producto-card,.season-card,.mobile-link,.mobile-link-accent,.menu-category-nav a):is(:hover,:focus-visible) .live-letter:nth-child(odd) {
    transform: translateY(-.12em);
  }
}