/* ==========================================================================
   TASTE PROFILE
   The shared taste block: the metric bars, the two-faced flavour card, and the
   entrance both make when they scroll into view. Written once here because the
   same block appears on bottle detail and denomination detail, and the motion
   used to live inline in one of them.

   Structure comes from app/Views/common/taste-bars.php and
   app/Views/common/flavour-cards.php; motion is driven by
   public/resources/js/taste-profile.js. Colour, padding and icon size stay
   with the page stylesheet, so a page keeps its own look.
   ========================================================================== */

/* --- Bars ---------------------------------------------------------------- */

.iw-taste-bars { display: flex; flex-direction: column; gap: var(--iw-taste-gap, 1.25rem); }
.iw-taste-row { display: flex; flex-direction: column; gap: 0.375rem; }
.iw-taste-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.iw-taste-label { font-size: var(--iw-taste-label-size, 0.9375rem); line-height: 1.6; font-weight: 600; color: var(--color-on-surface, #1c1c19); }
.iw-taste-value { font-size: var(--iw-taste-value-size, 0.875rem); color: var(--color-on-surface-variant, rgba(28, 28, 25, 0.66)); }

/* The authored width is a custom property, so the reveal can hold the fill at
   zero and then let it out. A page that never loads the script still shows a
   filled bar: the base rule below is the authored width, and only the pending
   state zeroes it. */
[data-taste-bars] .taste-fill { width: var(--taste-fill-width, 0%); }
[data-taste-bars].is-taste-pending .taste-fill { width: 0; transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-taste-bars].is-taste-visible .taste-fill { width: var(--taste-fill-width, 0%); }

/* --- Flavour cards ------------------------------------------------------- */

.iw-flavour-card { perspective: 900px; }
.iw-flavour-card__flipper { display: grid; }
.iw-flavour-card__face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.iw-flavour-card__face--front { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.iw-flavour-card__face--back { display: flex; align-items: center; justify-content: center; transform: rotateY(180deg); }
.iw-flavour-card__logo { width: auto; height: 2.7rem; max-width: 3.2rem; object-fit: contain; opacity: 0.9; }

/* The flip itself. Cards start showing their back, then turn over one after
   another as they come into view. */
[data-flavour-flipper] { transform-style: preserve-3d; transform: rotateY(0deg); will-change: transform; }
[data-flavour-card].is-flavour-pending [data-flavour-flipper],
[data-flavour-card].is-flavour-queued [data-flavour-flipper] { transform: rotateY(180deg); }
[data-flavour-card].is-flavour-flipping [data-flavour-flipper] { animation: iwFlavourCardFlip 0.25s linear 1; }
[data-flavour-card].has-flavour-flipped [data-flavour-flipper] { transform: rotateY(0deg); }

@keyframes iwFlavourCardFlip {
    0% { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}

/* Reduced motion keeps the end state and drops the movement. */
@media (prefers-reduced-motion: reduce) {
    [data-taste-bars].is-taste-pending .taste-fill { transition: none; }
    [data-flavour-card].is-flavour-pending [data-flavour-flipper],
    [data-flavour-card].is-flavour-queued [data-flavour-flipper],
    [data-flavour-card].is-flavour-flipping [data-flavour-flipper] { animation: none; transform: rotateY(0deg); }
}