/* A short welcome sequence settles within five seconds. */
.hero-visual .bottle-card { min-width: 0; transform-origin: 50% 85%; }
.hero-visual .bottle-card:nth-child(1) { --arrival: 0ms; --tilt: -2deg; }
.hero-visual .bottle-card:nth-child(2) { --arrival: 160ms; --tilt: 1deg; }
.hero-visual .bottle-card:nth-child(3) { --arrival: 320ms; --tilt: 2deg; }
.hero-visual .bottle-img { transform-origin: 50% 85%; }
.hero-visual .bottle-card { --juice-glow: #baff7b; --juice-halo: #76dc45; }
.hero-visual .bottle-card:nth-child(3) { --juice-glow: #ffc1e5; --juice-halo: #dc4f9f; }
.bottle-art {
  position: relative;
  width: 100%;
  max-width: 92px;
  margin: 0 auto var(--sp-12);
  transform-origin: 50% 85%;
}
.hero-visual .bottle-art .bottle-img { display: block; width: 100%; margin: 0; animation: none; }
.bottle-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg, transparent 40%, var(--juice-glow) 47%, #fff 50%, var(--juice-glow) 53%, transparent 60%);
  background-size: 400% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.juice-word { display: inline-block; white-space: nowrap; }
.juice-letter { display: inline-block; }
.juice-name-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .bottle-art { animation: purform-float 3400ms ease-in-out calc(850ms + var(--arrival)) 1; }
  .bottle-sweep { animation: purform-sweep 2600ms ease-in-out calc(1000ms + var(--arrival)) both; }
  .juice-letter { animation: purform-letter 1400ms ease-in-out calc(1000ms + var(--arrival) + var(--letter) * 105ms) both; }
}
@keyframes purform-sweep {
  0% { background-position: 100% 0; opacity: 0; }
  20% { opacity: .32; }
  75% { opacity: .32; }
  100% { background-position: 0% 0; opacity: 0; }
}
@keyframes purform-letter {
  0%, 100% { color: #fff; text-shadow: none; }
  35%, 55% { color: var(--juice-glow); text-shadow: 0 0 5px var(--juice-halo), 0 0 14px var(--juice-halo), 0 0 24px var(--juice-halo); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .bottle-card {
    animation: purform-arrive 850ms cubic-bezier(.16,1,.3,1) var(--arrival) backwards;
    transition: transform 450ms cubic-bezier(.16,1,.3,1);
  }
  .hero-visual .bottle-img {
    animation: purform-float 3400ms ease-in-out calc(850ms + var(--arrival)) 1;
  }
  @media (hover: hover) and (pointer: fine) {
    .hero-visual .bottle-card:hover { transform: translateY(-8px) rotate(var(--tilt)); }
  }
}
@keyframes purform-arrive {
  from { opacity: 0; transform: translateY(28px) rotate(var(--tilt)); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes purform-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-10px) rotate(var(--tilt)); }
}
/* Keep the bottle showcase available on phones as well. */
@media (max-width: 900px) {
  .hero-visual { display: flex; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1 / 1; }
}
@media (max-width: 600px) {
  .hero-visual { aspect-ratio: auto; min-height: 370px; }
  .hero-visual-bottles { width: 100%; padding: 76px 14px; gap: 8px; }
  .hero-visual .bottle-card { padding: 14px 6px; }
  .hero-visual .bottle-img { max-width: 76px; }
  .hero-visual .bottle-art { max-width: 76px; }
  .hero-visual .bottle-name { font-size: 14px; }
  .hero-visual .bottle-phase { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .bottle-card, .hero-visual .bottle-img { animation: none; transition: none; }
  .hero-visual .bottle-card:hover { transform: none; }
}

/* Catalog bottles: one restrained sequence when the card enters the viewport. */
.bottle-motion-frame { position: relative; }
.catalog-bottle-sweep {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg, transparent 40%, var(--juice-halo) 47%, #fff 50%, var(--juice-halo) 53%, transparent 60%);
  background-size: 400% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
.bottle-motion-card .juice-letter { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .bottle-motion-play .catalog-bottle-sweep { animation: purform-sweep 2600ms ease-in-out 200ms both; }
  .bottle-motion-play .juice-letter { animation: purform-catalog-letter 1300ms ease-in-out calc(200ms + var(--letter) * 85ms) both; }
  .bottle-motion-card .bottle-motion-frame img,
  .bottle-motion-card .catalog-bottle-sweep { transition: transform 350ms ease; }
  @media (hover: hover) and (pointer: fine) {
    .bottle-motion-card:hover .bottle-motion-frame img,
    .bottle-motion-card:hover .catalog-bottle-sweep { transform: translateY(-6px) scale(1.03); }
  }
}
@keyframes purform-catalog-letter {
  0%, 100% { color: var(--name-rest); text-shadow: none; }
  35%, 55% { color: var(--juice-glow); text-shadow: 0 0 5px var(--juice-halo), 0 0 14px var(--juice-halo); }
}
@media (prefers-reduced-motion: reduce) {
  .bottle-motion-card .juice-letter, .bottle-motion-card .catalog-bottle-sweep { animation: none; }
  .bottle-motion-card .bottle-motion-frame img { transition: none; transform: none !important; }
}

.hero-motion-wait .bottle-card,
.hero-motion-wait .bottle-art,
.hero-motion-wait .bottle-sweep,
.hero-motion-wait .juice-letter { animation-play-state: paused; }
@media (max-width: 600px) {
  .hero-visual .hero-badge { padding: 8px 12px; }
  .hero-visual .hero-badge.tl { top: 12px; left: 12px; }
  .hero-visual .hero-badge.br { bottom: 12px; right: 12px; }
  .hero-visual .badge-num { font-size: 22px; }
  .hero-visual .badge-label { font-size: 10px; }
}