/* ==========================================================================
   Single wine — Figma "Single Product - Page" 165:69 (1920 x 5052)
     wordmark / plate / spec column   151 → 1263
     vineyard plate                   1263 → 2279
     intro statement                  1322
     bottle                           1972 → 2954
     detail rows                      2361 → 3081
     oversized statement              3251
     explore more wines               3858 → 4490
     footer                           4490 → 5052
   ========================================================================== */

/* 449rem was the explore section's old foot (385.8 + 63.2).  It now carries a
   button, so 385.8 + 92. */
.product { position: relative; height: 477.8rem; background: var(--c-page); }

/* ---- Oversized varietal wordmark (Figma 165:160) ------------------------ */
.product__wordmark {
  position: absolute;
  left: 95.85rem;
  top: 15.1rem;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-wine-name);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-grey-150);
  mix-blend-mode: multiply;
  transform: translate(calc(-50% + var(--wine-nudge-x)), var(--wine-nudge-y)) scaleX(var(--wine-squeeze));
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* ---- Hero plate, tagline, spec column ---------------------------------- */
.product__plate {
  position: absolute;
  left: 12.1rem;
  top: 30.4rem;
  width: 32.8109rem;
  height: 90.8rem;
  margin: 0;
  overflow: hidden;
}
.product__plate img { width: 100%; height: 100%; object-fit: cover; }

/* ---- The plate stands up (Figma 615:7424 "GIANNOUDI 6") -----------------
   The only animated node on the whole Single Product frame (165:69), and the
   numbers below are Figma's own export, unrounded.  Four tracks that all begin
   together at 1.2536s and then run for different lengths, which is what gives
   the move its weight — the bottle swings upright and keeps drifting up for a
   beat after it has stopped turning:

     opacity  0 -> 1      1.2536s -> 1.6536s   cubic-bezier(0.5, 0, 0.5, 1)
     rotate   -20d -> 0   1.2536s -> 2.0000s   cubic-bezier(0.05, 0.4, 0.5, 1)
     scale    0.9 -> 1    1.2536s -> 2.0536s   same
     translate 10px -> 0  1.2536s -> 2.2536s   same

   Written as four CSS animations of different durations with the hold built
   into the first keyframe, exactly as Figma exports it, rather than as four
   delays — the percentages then match the export line for line.  It plays once
   on load: the plate sits at the top of the page, above the fold, and this is
   Figma's own timeline rather than anything tied to the scroll.

   `both` keeps the end state, which is the plate's natural one, so a browser
   that never runs the animation still shows the page correctly.  The 10px rise
   is written as 1rem so it scales with everything else; at 1920 they are the
   same number. */
@media (prefers-reduced-motion: no-preference) {
  .product__plate {
    animation: plate-fade   2s      linear both,
               plate-turn   2s      linear both,
               plate-grow   2.0536s linear both,
               plate-rise   2.2536s linear both;
  }
}

@keyframes plate-fade {
  0%      { opacity: 0; }
  62.68%  { animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); opacity: 0; }
  82.68%  { opacity: 1; }
  100%    { opacity: 1; }
}

@keyframes plate-turn {
  0%      { rotate: -0.349rad; }
  62.68%  { animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); rotate: -0.349rad; }
  100%    { rotate: 0rad; }
}

@keyframes plate-grow {
  0%      { scale: 0.9; }
  61.044% { animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); scale: 0.9; }
  100%    { scale: 1; }
}

@keyframes plate-rise {
  0%      { translate: 0 1rem; }
  55.627% { animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); translate: 0 1rem; }
  100%    { translate: 0 0; }
}

/* Anchored on its RIGHT edge, at the same 1855 the strength line below it
   ends on, rather than on a left edge Figma happened to give the one wine it
   was measured from.  Left-anchored it ended wherever its own sentence ran
   out — 1657 on Gris, 1896 on Eros, which overhung everything else on the
   page — and only Giannoudi, by luck of its wording, landed on the column.
   Right-anchored every one of the eight ends where Giannoudi does.

   And it follows the wordmark down.  The wordmark is set at one size for
   seven of the wines and stepped down for Maratheftiko, whose name is too
   long for the frame; its top is fixed, so a smaller size lifts the bottom of
   the lettering and opens a gap under it — 172px against the 29px the other
   seven have.  Measured across the two sizes the ink bottom moves 1.0898px
   per pixel of font size, so subtracting that much of whatever the wordmark
   was stepped down by keeps the 29px whatever size it is set at.  With
   `--wordmark-fs` unset the term is zero and nothing moves, which is why the
   custom property now sits on `.product` rather than on the wordmark itself:
   both of them have to be able to read it. */
.product__tagline {
  position: absolute;
  left: auto;
  right: 6.5rem;
  top: calc(66.3rem - 1.0898 * (var(--fs-wine-name) - var(--wordmark-fs, var(--fs-wine-name))));
  text-align: right;
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-slide-title);
  line-height: var(--lh-slide-title);
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: var(--c-ink);
  white-space: nowrap;
}

.product__specs {
  position: absolute;
  left: 133rem;
  top: 82.2rem;
  width: 52rem;
  text-align: right;
  font-family: var(--f-body);
  font-weight: var(--fw-light);
  font-size: 4rem;
  line-height: 7rem;
  color: var(--c-ink);
}

/* The strength reads "ALC. VOL 13%".  The block is anchored on its RIGHT edge
   rather than its left, at the same 1855 the tagline and the specs above it
   end on, so the number stays exactly where Figma puts it and the label grows
   away from it instead of pushing it out of alignment. */
.product__abv {
  position: absolute;
  left: auto;
  right: 6.5rem;
  top: 108.3rem;
  text-align: right;
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-editorial);
  line-height: 8rem;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: #676767;
  white-space: nowrap;
}

/* Set in the interface face, so it reads as a label beside the figure rather
   than as part of it.  `--ls-ui` is the Medium-weight tracking correction and
   this is Medium, so it applies. */
.product__abv-label {
  margin-right: 1.4rem;
  font-family: var(--f-ui);
  font-size: 2.4rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
}

/* ---- Vineyard plate + intro (Figma 165:188 / 165:165) ------------------- */
.product__vineyard {
  position: absolute;
  left: 0;
  top: 126.3rem;
  width: 192rem;
  height: 101.6rem;
  margin: 0;
  overflow: hidden;
}
.product__vineyard img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.product__intro {
  position: absolute;
  left: 28.5rem;
  top: 132.2rem;
  width: 135rem;
  text-align: center;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  color: var(--c-ink);
}

/* ---- Bottle (Figma 461:16987) ------------------------------------------ */
.product__bottle {
  position: absolute;
  left: 139.1rem;
  top: 197.2rem;
  width: 45.9rem;
  height: 98.2rem;
  margin: 0;
}
.product__bottle img {
  position: absolute;
  left: 1.368rem;
  top: 0;
  width: 43.22rem;
  height: 98.2rem;
  /* Figma drop shadow: x −30, y 25, blur 40, rgba(0,0,0,.3) */
  filter: drop-shadow(-3rem 2.5rem 2rem rgba(0, 0, 0, 0.3));
}

/* The bottle lifts on hover, and overshoots before it settles — the "bounce"
   the client described.
   Nothing in the file specifies it: `get_motion_context` on the Single Product
   frame returns only the hero plate, and this node is a plain image, not an
   instance with a hover variant (the file's whole component inventory is in
   the page listing — the wine tiles have variants, this does not).  So the
   trigger and the numbers are the client's description, not a measurement.
   Kept deliberately small: 2.4rem on a 98.2rem bottle is a 2.4% lift, enough
   to read as a lift without the bottle leaving its slot in the layout.
   `cubic-bezier(0.34, 1.56, 0.64, 1)` is what supplies the bounce — the 1.56
   control point carries it about 10% past the target and back.  The shadow
   moves with it, so the bottle reads as rising off the page rather than
   sliding up it.
   To make this a scroll-in entrance instead, move the transform onto a class
   and let a ScrollTrigger add it; the numbers below carry over unchanged. */
@media (prefers-reduced-motion: no-preference) {
  .product__bottle {
    transition: translate 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .product__bottle:hover { translate: 0 -2.4rem; }
}

/* ---- Detail rows (Figma 681:294 – 681:298) ----------------------------- */
.product__row { position: absolute; left: 0; width: 100%; }
/* Barlow Condensed rather than the nav's face — the client's call for these
   labels.  --f-display is the site's Barlow; the tracking comes down with it,
   because --ls-ui's -0.06em was measured on the CF Din stand-in and Barlow
   Condensed is the narrower of the two to begin with. */
.product__row .eyebrow {
  position: absolute;
  left: 6.5rem;
  top: 0;
  white-space: nowrap;
  font-family: var(--f-display);
  letter-spacing: -0.02em;
}
.product__row p {
  position: absolute;
  left: 39.5rem;
  width: 91rem;
  font-family: var(--f-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-align: justify;
  color: var(--c-ink);
}

.product__row--harvest      { top: 236.5rem; }
.product__row--harvest p    { top: -0.4rem; }
.product__row--vinification { top: 251.7rem; }
.product__row--vinification .eyebrow { line-height: 3rem; }
.product__row--vinification p { top: -0.6rem; }
.product__row--tasting      { top: 270.5rem; }
.product__row--tasting p    { top: -0.4rem; }
.product__row--serving      { top: 293.7rem; }
.product__row--serving .eyebrow { line-height: 3rem; }
.product__row--serving p    { top: -0.6rem; width: 76.7rem; }
.product__row--pairing      { top: 304.7rem; }
.product__row--pairing .eyebrow { line-height: 3rem; }
.product__row--pairing p    { top: -0.6rem; }

/* ---- Oversized statement (Figma 165:184) ------------------------------- */
.product__statement { left: 7rem; top: 325.1rem; }

/* ---- Explore more wines (Figma 678:285) -------------------------------- */
.product__explore {
  position: absolute;
  left: 0.1rem;
  top: 385.8rem;
  width: 191.9rem;
  /* 63.2rem held the label and the row of five and stopped.  The row ends at
     60.4rem; the button stands 7.6rem under it and is 15.8rem tall, and the
     section keeps the 8.2rem tail it had, so 92rem. */
  height: 92rem;
  background: var(--c-page);
}

.product__explore-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 8.1rem;
  text-align: center;
}

/* The section's closing move: centred under the row, which puts it under the
   middle bottle.  The site's oval button, unmodified — the same one the home
   page ends its Territory section with. */
.product__explore-cta {
  position: absolute;
  left: 50%;
  top: 68rem;
  transform: translateX(-50%);
}

.wine-tile {
  position: absolute;
  top: 17.1rem;
  width: 32.6587rem;
  height: 43.2727rem;
  margin: 0;
  overflow: hidden;
}
/* The tile paints the page colour behind the video: a <video> is transparent
   until its first frame decodes, and the browser shows black through any
   sub-pixel gap left by scaling the poster into the box. */
.wine-tile { background: var(--c-page); }
.wine-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The five clips were filmed on a white cyclorama -- #ffffff at the centre of
   the sweep, #fefefe at its edges -- and the page is #fcfcfc.  Two or three
   units is nothing on its own, but the tile is a rectangle, and a straight
   edge is exactly what the eye finds: each bottle sat on a visible white card.
   Multiplying the film into the tile's own background resolves white to
   whatever that background is (255 x 252 / 255 = 252) and leaves the sweep
   seamless, while the glass -- everything already darker than the ground --
   loses 1.2% of its value, which is below the threshold of a JND.  `isolation`
   keeps the blend inside the tile so it composites against the colour the
   bottle is standing on rather than against the page beneath it.

   The 1% lift is what makes it exact.  The sweep is not flat -- it falls from
   255 at the centre to 253 at the corners -- so multiply alone left half the
   ground one unit dark, and one unit along a straight edge is still an edge.
   Lifting by 1.01 first clips the whole sweep to 255, which multiply then puts
   at 252 dead on: measured over the five tiles, 99.2% of the ground lands
   exactly on the page colour and the rest is the bottle's own cast shadow.
   The lift and the multiply very nearly cancel (1.01 x 0.988 = 0.998), so
   nothing below the sweep moves, and the only detail clipped is 0.01-1.8% of
   each bottle: the specular on the rosé's capsule. */
.wine-tile { isolation: isolate; }
.wine-tile video { filter: brightness(1.01); mix-blend-mode: multiply; }

/* The bottles rest on their poster frame and only turn while hovered, and
   the wine's name comes up under the bottle with them — the tile's hover
   state in the Figma prototype.  The whole tile is the link target. */
.wine-tile { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wine-tile:hover { transform: scale(1.015); }
}

.wine-tile__link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.wine-tile__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.6rem;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: 1.7rem;
  font-weight: var(--fw-medium);
  line-height: normal;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-ink);
  opacity: 0;
  transform: translateY(0.7rem);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

/* The bottle fills the frame, so the caption needs somewhere to go: the film
   eases down about a seventh, anchored near its top, and the name fades into
   the band that opens under it.  The tile's own background is the page
   colour, which is what the bottle is standing on anyway, so the band reads
   as the frame growing rather than the picture shrinking. */
.wine-tile video {
  transform-origin: 50% 15%;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .wine-tile:hover .wine-tile__name,
  .wine-tile__link:focus-visible .wine-tile__name { opacity: 1; transform: none; }

  .wine-tile:hover video,
  .wine-tile__link:focus-visible video { transform: scale(0.87); }
}

/* Without a pointer there is no hover to reveal it, so the name simply
   stays on — a tile with no label would be an unlabelled link — and the
   film sits at its smaller size to leave room for it. */
@media (hover: none), (pointer: coarse) {
  .wine-tile__name { opacity: 1; transform: none; }
  .wine-tile video { transform: scale(0.87); }
}

@media (prefers-reduced-motion: reduce) {
  .wine-tile__name { transition: none; transform: none; }
  .wine-tile video { transition: none; }
}

.wine-tile--1 { left: 4.3rem; }
.wine-tile--2 { left: 41.959rem; }
.wine-tile--3 { left: 79.617rem; }
.wine-tile--4 { left: 117.276rem; }
.wine-tile--5 { left: 154.935rem; }

/* ==========================================================================
   Wines other than Giannoudi reuse the same frame, but their only artwork is
   the upright bottle cut-out, so both plates letterbox it instead of cropping.
   ========================================================================== */
.product--bottle .product__plate img,
.product--bottle .product__bottle img { object-fit: contain; }

.product--bottle .product__bottle img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(-3rem 2.5rem 2rem rgba(0, 0, 0, 0.3));
}

/* Their intro copy is not hand-broken in Figma, so it wraps to its box. */
.product--bottle .product__intro { white-space: normal; }

/* The wordmark is set at one size in Figma; long varietal names are stepped
   down so the word still clears the 1920 frame. */
.product__wordmark { font-size: var(--wordmark-fs, var(--fs-wine-name)); }