/* OD Nutra remake: frame 9, "The names shoppers look for on the label" (Lino 2026-11-11 18:30).
   The branded-ingredients section of the second OD Nutra project, recoloured for this remake:
   white page, navy ink, the lead words in teal (as in frame 7), Apple-grey label cards, the navy
   pill button. Head on the left (uppercase eyebrow and two-tone headline), lede and stats on the right,
   two rows of logo cards full width running in opposite directions (masked at both edges so they
   fade instead of cutting), then the disclaimer and the button.
   Hovering the shelf pauses it; hovering a card lifts it and slides up its caption.
   Reduced motion: the rows stand still and scroll sideways by hand. */

.ing {
  --ing-x: calc(var(--frame) + var(--pad-x));   /* lines up with the navbar's logo */
  --card-bg: #f2f4f5;
  position: relative; z-index: 3; background: var(--white);
  display: flex; flex-direction: column; justify-content: center; min-height: 100svh; box-sizing: border-box;
  padding: clamp(128px, 16svh, 168px) var(--ing-x) clamp(72px, 9svh, 112px); overflow-x: clip;
}
.ing:focus { outline: none; }
/* Both columns share the row's top and bottom edges: the eyebrow lines up with the paragraph and the
   title with the stats. Bottom-aligning them let the taller side column start above the eyebrow on
   laptops (Lino 2026-11-12, "se descuadró"). */
.ing__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.ing__lead { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(2px, 0.4vw, 6px); }

.ing__eyebrow { margin: 0 0 clamp(2px, 0.4vw, 6px); font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }   /* the frame 7 eyebrow, no pill (Lino 2026-11-11) */
.ing__title {
  margin: 0; font-size: clamp(2.125rem, 0.9rem + 2.7vw, 4.25rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.045em;
  color: var(--navy-900);
}
.ing__title em { font-style: normal; color: var(--teal-700); }   /* 6.6:1 on white */

.ing__side { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(20px, 2.2vw, 32px); }
.ing__lede { margin: 0; max-width: 30em; font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.3125rem); line-height: 1.45; letter-spacing: -0.012em; color: var(--ink-body); }
.ing__stats { display: flex; gap: clamp(28px, 3.4vw, 56px); margin: 0; }
.ing__stats div { display: flex; flex-direction: column; gap: 4px; }
.ing__stats dt { order: 2; font-size: 0.9375rem; color: var(--ink-body); }
.ing__stats dd { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.035em; color: var(--teal-700); font-variant-numeric: tabular-nums; }

/* ---------- The label shelf ---------- */
.ing .label-shelf { margin: clamp(48px, 9svh, 112px) calc(-1 * var(--ing-x)) 0; }
.label-shelf__track {   /* the padding keeps the lifted card and its shadow inside the mask */
  display: flex; flex-direction: column; gap: 16px; padding-block: 40px; margin-block: -40px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.label-shelf__row { display: flex; width: max-content; gap: 16px; margin: 0; padding: 0; list-style: none; animation: shelf-run 70s linear infinite; }
.label-shelf__row--rev { animation-direction: reverse; animation-duration: 82s; }
.label-shelf:hover .label-shelf__row { animation-play-state: paused; }
@keyframes shelf-run { to { transform: translateX(-50%); } }

.shelf-card { position: relative; flex: none; width: clamp(200px, 17vw, 264px); }
.shelf-card__logo {
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: clamp(108px, 9.4vw, 140px); overflow: hidden;
  border-radius: clamp(16px, 1.4vw, 22px); background: var(--card-bg); color: var(--navy-900);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, box-shadow 0.5s ease;
}
.shelf-card__logo > * { transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1), scale 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.shelf-card__logo img { display: block; max-width: 70%; max-height: 44%; object-fit: contain; mix-blend-mode: multiply; }
.shelf-card__logo img.is-badge { max-height: 68%; }
.shelf-card__word { font-weight: 600; letter-spacing: -0.03em; line-height: 1; text-align: center; font-size: clamp(1.125rem, 0.85rem + 0.6vw, 1.5rem); }
.shelf-card__word small { display: block; margin-top: 5px; font-size: 0.48em; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; opacity: 0.7; }
.label-shelf sup { margin-left: 1px; font-size: 0.5em; font-weight: 500; line-height: 0; vertical-align: 0.8em; }
.shelf-card__cap {
  position: absolute; inset: auto 0 0; margin: 0; padding: 10px 16px 12px; border-radius: 0 0 clamp(16px, 1.4vw, 22px) clamp(16px, 1.4vw, 22px);
  background: var(--navy-900); color: var(--white); font-size: 0.875rem; line-height: 1.3;
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.shelf-card__cap b { display: block; font-weight: 600; }
.shelf-card__cap span { color: #b9c6d6; }   /* 9.1:1 on navy-900 */
.shelf-card:hover .shelf-card__logo { transform: translateY(-6px); background: var(--white); box-shadow: inset 0 0 0 1px rgb(15 35 64 / 0.08), 0 24px 44px -24px rgb(15 35 64 / 0.45); }
.shelf-card:hover .shelf-card__logo > * { translate: 0 -22px; scale: 0.8; }   /* clears the caption */
.shelf-card:hover .shelf-card__cap { opacity: 1; transform: none; }

.ing__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 7svh, 88px); }
.ing__note { margin: 0; max-width: 44em; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-body); }
.ing__foot .btn { flex: none; height: 52px; padding: 0 5px 0 24px; font-size: 1rem; gap: 14px; }
.ing__foot .btn .btn__dot { width: 42px; height: 42px; }

/* Entrance: headline lines rise out of their own line box, the rest fades up after them */
.ing .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ing .ln > span { display: inline-block; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.ing .ln + .ln > span { transition-delay: 90ms; }
.ing__eyebrow, .ing__side, .ing .label-shelf, .ing__foot { transition: opacity 0.8s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.ing__side { transition-delay: 160ms; }
.ing .label-shelf { transition-delay: 260ms; }
.ing__foot { transition-delay: 360ms; }
.js .ing:not(.is-in) .ln > span { transform: translate3d(0, 105%, 0); }
.js .ing:not(.is-in) .ing__eyebrow, .js .ing:not(.is-in) .ing__side, .js .ing:not(.is-in) .ing__foot { opacity: 0; transform: translate3d(0, 16px, 0); }
.js .ing:not(.is-in) .label-shelf { opacity: 0; }

/* Stronger entrance (Lino 2026-11-11: "no tiene ningun tipo de entrada, se siente plana").
   While the section scrolls in, the two rows slide toward each other from opposite sides
   (--e, 0 to 1, written by the script from the section's position). When it is in, the cards
   rise and grow one after another (--i is each card's place in its row) and the stats count up. */
.label-shelf { transition: opacity 0.6s ease; transition-delay: 120ms; }
.label-shelf__row { translate: calc((1 - var(--e, 1)) * 34vw) 0; }
.label-shelf__row--rev { translate: calc((var(--e, 1) - 1) * 34vw) 0; }
.js .ing:not(.is-in) .shelf-card { opacity: 0; }
.ing.is-in .shelf-card { animation: shelf-card-in 1s cubic-bezier(0.16, 1, 0.3, 1) calc(240ms + var(--i, 0) * 70ms) backwards; }
@keyframes shelf-card-in {
  from { opacity: 0; translate: 0 56px; scale: 0.86; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
.ing__stats dd { font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .ing__head { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 759px) {
  .ing { --ing-x: calc(var(--frame) + 16px); min-height: 0; padding-block: 104px 72px; }
  .shelf-card { width: 176px; }
  .shelf-card__logo { height: 96px; }
  .shelf-card:hover .shelf-card__logo > * { translate: 0 -18px; scale: 0.72; }
  .ing .label-shelf { margin-top: 44px; }
  .ing__foot { flex-direction: column; align-items: flex-start; margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .label-shelf__row { animation: none; translate: none; }
  .js .ing:not(.is-in) .shelf-card, .ing.is-in .shelf-card { opacity: 1; animation: none; }
  .label-shelf__row [aria-hidden="true"] { display: none; }
  .label-shelf__track { overflow-x: auto; }
  .ing .ln > span, .ing__eyebrow, .ing__side, .ing .label-shelf, .ing__foot, .shelf-card__logo, .shelf-card__logo > *, .shelf-card__cap { transition: none !important; }
  .js .ing:not(.is-in) .ln > span, .js .ing:not(.is-in) .ing__eyebrow, .js .ing:not(.is-in) .ing__side,
  .js .ing:not(.is-in) .ing__foot, .js .ing:not(.is-in) .label-shelf { opacity: 1; transform: none; }
  .shelf-card:hover .shelf-card__logo { transform: none; }
}