/* ==========================================================================
   Mondios — the wines: tasting sheet + sensory layer
   ========================================================================== */

.wine {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  scroll-margin-block-start: 6rem;
}
@media (min-width: 62em) {
  .wine {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-7);
  }
  .wine--reverse .wine__figure { order: 2; }
}

/* --- the bottle --------------------------------------------------------- */
.wine__figure {
  position: relative;
  padding: var(--space-5) var(--space-4);
  display: grid;
  justify-items: center;
  perspective: 1400px;
}
.wine__figure::before {
  content: '';
  position: absolute;
  inset: 8% 12%;
  background: radial-gradient(60% 46% at 50% 42%, oklch(100% 0 0 / .055), transparent 70%);
  pointer-events: none;
}
@media (min-width: 62em) {
  .wine__figure { position: sticky; top: 12vh; }
}

/* Tilt follows the pointer (set as --rx/--ry by js/wines.js); the sheen is a
   gold specular band that tracks it. `overlay` leaves pure black untouched,
   so the sheen shows only on the lit glass, never on the ground. */
.wine__tilt {
  position: relative;
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out);
  will-change: transform;
}
.wine__bottle {
  width: auto;
  max-height: min(62svh, 30rem);
  filter: drop-shadow(0 2rem 3rem oklch(0% 0 0 / .55));
}
.wine__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--sheen, 0);
  background: linear-gradient(
    115deg,
    transparent calc(var(--sx, 50%) - 22%),
    oklch(92% 0.10 86 / .55) var(--sx, 50%),
    transparent calc(var(--sx, 50%) + 22%)
  );
  transition: opacity var(--dur) var(--ease-out);
}

.wine__title { margin-block-end: var(--space-2); }
.wine__eyebrow { margin-block-end: var(--space-4); }

/* --- figures ------------------------------------------------------------ */
.wine__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5);
  padding-block: var(--space-4);
  border-block: 1px solid var(--hairline);
}
.wine__stat { display: grid; gap: var(--space-2); }
.wine__stat-value {
  font-family: var(--font-display);
  font-size: var(--text-figure);
  line-height: 0.92;
  color: var(--gold);
  letter-spacing: var(--track-tight);
  font-feature-settings: 'onum' 1;
}
.wine__stat-note { font-size: var(--text-small); color: var(--bone-mute); }

/* --- the spec list ------------------------------------------------------ */
.spec { display: grid; }
.spec__row {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--hairline-soft);
}
@media (min-width: 40em) {
  .spec__row { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-4); }
}
.spec__row:first-child { border-block-start: 0; }
.spec dt {
  font-family: var(--font-ui);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--gold-dim);
  padding-block-start: 0.35em;
}
.spec dd {
  margin: 0;
  max-width: var(--measure-tight);
  color: var(--bone-dim);
}
.spec dd p + p { margin-block-start: var(--space-2); }

/* --- aroma constellation ------------------------------------------------
   Words already present in the description, scattered as a constellation
   and joined by hairlines that draw in on scroll. Pure SVG: positions are
   attributes, so no inline style is needed and the CSP stays strict. ----- */
.constellation {
  width: 100%;
  height: auto;
  overflow: visible;
  margin-block: var(--space-4) var(--space-2);
}
.constellation__lines line {
  stroke: var(--hairline-gold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.constellation__dot { fill: var(--gold); }
.constellation__word {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: 2.7px;
  fill: var(--bone-dim);
  opacity: 0;
  transition: fill var(--dur) var(--ease-out);
}
.constellation__word--major { font-size: 3.6px; fill: var(--bone); }
.constellation:hover .constellation__word { fill: var(--bone); }

@supports (animation-timeline: view()) {
  .constellation__lines line {
    animation: line-draw linear both;
    animation-timeline: view(block);
    animation-range: entry 20% cover 55%;
  }
  .constellation__word {
    animation: word-in linear both;
    animation-timeline: view(block);
    animation-range: entry 15% cover calc(35% + var(--i, 0) * 3%);
  }
}
@supports not (animation-timeline: view()) {
  .constellation__lines line { transition: stroke-dashoffset 1.4s var(--ease-out); }
  .constellation__word { transition: opacity var(--dur-slow) var(--ease-out), fill var(--dur) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .constellation.is-visible .constellation__lines line { stroke-dashoffset: 0; }
  .constellation.is-visible .constellation__word { opacity: 1; }
}
@keyframes line-draw { to { stroke-dashoffset: 0; } }
@keyframes word-in { to { opacity: 1; } }

/* --- ageing timeline ---------------------------------------------------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: var(--t-split, 2fr) 1fr;
  gap: 0;
  margin-block: var(--space-3) var(--space-2);
  padding-block-start: var(--space-3);
}
.timeline::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 1px;
  background: var(--hairline);
}
.timeline__seg {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding-inline-end: var(--space-3);
}
.timeline__seg::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(-1 * var(--space-3));
  width: 1px;
  height: var(--space-2);
  background: var(--gold);
}
.timeline__seg--fill::after {
  content: '';
  position: absolute;
  inset-inline: 0 var(--space-3);
  inset-block-start: calc(-1 * var(--space-3) - 0.5px);
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dim));
  transform-origin: left;
}
.timeline__value {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--bone);
  font-feature-settings: 'onum' 1;
}
.timeline__label { font-size: var(--text-small); color: var(--bone-mute); }
@supports (animation-timeline: view()) {
  .timeline__seg--fill::after {
    animation: rule-draw linear both;
    animation-timeline: view(block);
    animation-range: entry 20% cover 60%;
  }
}

.timeline--2-1 { --t-split: 2fr; }
.timeline--1-1 { --t-split: 1fr; }

/* --- serving dial ------------------------------------------------------- */
.dial {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}
.dial svg { width: 3.5rem; height: 3.5rem; overflow: visible; }
.dial__track { fill: none; stroke: var(--hairline); stroke-width: 1; }
.dial__range { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.dial__value {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
  color: var(--bone);
  font-feature-settings: 'onum' 1;
}

/* --- margin switcher ---------------------------------------------------- */
.wine-switch {
  display: none;
}
@media (min-width: 62em) {
  .wine-switch {
    position: fixed;
    inset-inline-start: var(--space-4);
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: 60;
    display: grid;
    gap: var(--space-3);
  }
}
.wine-switch__link {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bone-mute);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.wine-switch__link[aria-current='true'],
.wine-switch__link:hover { color: var(--gold); border-color: var(--gold); }

/* Named for the cross-document morph from the home page's index row. */
.wine__bottle--bottle-gold { view-transition-name: bottle-gold; }