/* Five scene photos per column; duplicated only to make the loop seamless. */
/* Use the condensation in the original packshots, without synthetic overlays. */
.hero-art { transform: rotate(var(--hero-scroll-rotation, 0deg)); }
.image-column.lifestyle-column { animation-duration: 65s; }
.image-column.lifestyle-column img { object-position: center; }
/* Hero bottles share one grid cell, preserving the existing floating motion. */
.hero-art > .hero-bottle {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px) rotate(23deg) scale(.97);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.hero-art > .hero-bottle[data-active="true"] {
  opacity: 1;
  transform: translateY(0) rotate(17deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-art > .hero-bottle { transition: none; transform: rotate(17deg); }
}
/* Presentation-only silhouette for the supplied 1024 x 1536 packshots.
   Source JPEG pixels and label artwork remain unmodified. */
img[src*="/assets/bottle-"][src$=".jpg"] {
  clip-path: polygon(
    49.7% 1.9%, 55% 2%, 59% 2.3%, 61% 2.8%, 62% 3.4%,
    62.2% 8.8%, 62.5% 9.3%, 62.5% 11.4%, 60.7% 11.7%,
    61% 12.2%, 63% 12.5%, 63.4% 12.9%, 63.3% 13.4%,
    60.8% 13.7%, 60.8% 16.3%, 61.3% 17.5%, 63.4% 19.2%,
    66% 22%, 68.3% 25%, 70% 28%, 71.3% 31%, 72% 34%,
    72% 36.8%, 71.7% 37.7%, 70.7% 38.7%, 70.7% 39.1%,
    71.2% 39.7%, 71.2% 41.5%, 70.8% 42.2%, 70.6% 81.8%,
    71.4% 83.1%, 71.8% 84.5%, 72% 87%, 71.7% 90%,
    71% 92%, 69.5% 93.6%, 67.5% 94.6%, 64% 95.4%,
    59% 96%, 54% 96.3%, 49.7% 96.4%, 45% 96.3%,
    40% 96%, 35% 95.4%, 31.5% 94.6%, 29.5% 93.6%,
    28% 92%, 27.7% 90%, 27.5% 87%, 27.7% 84.5%,
    28.6% 82%, 28.4% 42.2%, 28.1% 41.5%, 28.1% 39.7%,
    28.8% 39.1%, 28.8% 38.7%, 27.7% 37.7%, 27.4% 36.8%,
    27.3% 34%, 27.8% 31%, 28.7% 28%, 30% 25%, 32% 22%,
    35% 19.2%, 37.4% 17.5%, 38.3% 16.3%, 38.3% 13.7%,
    36.1% 13.4%, 35.8% 12.9%, 36.2% 12.5%, 38.4% 12.2%,
    38.7% 11.7%, 37% 11.4%, 37% 9.3%, 37.3% 8.8%,
    37.5% 3.4%, 38.5% 2.8%, 40.5% 2.3%, 44.5% 2%
  );
}

/* Exact symbol extracted from the supplied NVOC vector logo. */
.hero-orbit { width: 40vw; height: 40vw; background: currentColor; -webkit-mask: url("/assets/nvoc-brand-symbol.svg") center / contain no-repeat; mask: url("/assets/nvoc-brand-symbol.svg") center / contain no-repeat; }
@media(max-width:700px) { .hero-orbit { width:100vw; height:100vw; } }

/* Full hero backdrop, independent of the bottle motion. */
.hero > .hero-orbit { inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; transform: rotate(15deg) scale(1.15); -webkit-mask-size: cover; mask-size: cover; }

/* Replace radial starbursts with the actual NVOC symbol. */
.flavour-panel.tone-apple, .flavour-panel.tone-mango, .flavour-panel.tone-watermelon, .detail-hero.tone-apple, .detail-hero.tone-mango, .detail-hero.tone-watermelon { background-image: url("/assets/nvoc-brand-backdrop.svg"); background-size: cover; background-position: center; background-attachment: scroll; }

/* One consistent, oversized NVOC logo backdrop on every feature. */
.hero > .hero-orbit { display: none; }
.hero-pattern, .flavour-panel, .detail-hero, .lineup { background-image: url("/assets/nvoc-brand-backdrop.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; }

/* Align the hero symbol centre with the bottle column. */
.hero-pattern { transform: translateX(24%); }
@media(max-width:700px) { .hero-pattern { transform: translateY(15%); } }