/* The Mixologist (12-mixologist.html). A full-screen, photograph-led experience: it
   stays dark in Light mode, like Welcome and Cheers, by pointing the system's own
   colour tokens at their Dark values for this screen. No new colours. */

.mix {
  --color-text: var(--art-ice);
  --color-text-muted: color-mix(in srgb, var(--art-ice) 70%, transparent);
  --color-primary-text: var(--color-primary);
  --color-primary-tint: color-mix(in srgb, var(--color-primary) 18%, transparent);
  --color-border: color-mix(in srgb, var(--art-ice) 14%, transparent);
  --color-surface: color-mix(in srgb, var(--art-ice) 6%, transparent);
  --color-on-primary: var(--art-shade);
  background: var(--art-shade);
  color: var(--color-text);
}
.mix .t-display, .mix .t-title, .mix .t-body, .mix .t-label { color: var(--color-text); }
.mix .muted { color: var(--color-text-muted); }
.mix .gold { color: var(--color-primary); }

/* the top bar: back, Nav/Step progress's ticks, leave. The components themselves
   (Card/Measure, Card/Mixologist note, Card/Bar mat, Card/Mixologist entry,
   Status/Timer, Nav/Step progress) are in the Week 4 system, compiled into barback.css. */
.mix-top { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-4); }
.mix-top .btn.icon { color: var(--color-text); }

/* the stage: a clip (or, until there is one, the drink's portrait, drifting slowly) */
.mix-stage { position: absolute; inset: 0 0 auto 0; height: 66%; overflow: hidden; z-index: 0; }
.mix-stage > img, .mix-stage > video { width: 100%; height: 100%; object-fit: cover; display: block; animation: mix-drift 14s ease-in-out infinite alternate; }
.mix-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--art-shade) 55%, transparent) 0%, transparent 22%, transparent 55%, var(--art-shade) 100%); }
.mix-stage.whole { height: 100%; }
.mix-stage.whole::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--art-shade) 55%, transparent) 0%, transparent 16%, transparent 34%, color-mix(in srgb, var(--art-shade) 90%, transparent) 62%, var(--art-shade) 100%); }
/* The reveal: the finished drink is the point, so the portrait is a little larger and
   lifted, putting the glass (its base 62% down the photo) between the close button and
   the title, with the fade starting under the glass rather than across it. */
.mix-stage.whole.reveal { top: -13%; height: 115%; }
/* a very tall glass (spec.compact: the Champagne Cocktail's flute) is shown a little smaller, so the
   whole glass fits between the close button and the title */
.mix-stage.whole.reveal.compact { top: -5%; height: 100%; }
/* a short screen shrinks the reveal's photo (fit() in 12-mixologist.html): its sides fade into the dark */
.mix-stage.whole.reveal.shrunk { -webkit-mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent); mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent); }
.mix-stage.whole.reveal::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--art-shade) 55%, transparent) 0%, transparent 20%, transparent 54%, color-mix(in srgb, var(--art-shade) 90%, transparent) 70%, var(--art-shade) 82%); }
/* Set the bar: the title, the bar mat and Begin take the lower half, so the portrait is
   shown smaller (85% of the screen, still wider than the phone) and lifted: the glass
   runs from about 9% to 43%, above the title at 47%. */
.mix-stage.whole.set { top: -9%; height: 85%; }
.mix-stage.whole.set::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--art-shade) 55%, transparent) 0%, transparent 20%, transparent 60%, color-mix(in srgb, var(--art-shade) 90%, transparent) 74%, var(--art-shade) 88%); }
@keyframes mix-drift { from { transform: scale(1.03); } to { transform: scale(1.12) translateY(-2%); } }
/* the reveal shows the whole glass between the close button and the title, so it drifts
   gently: a 12% zoom would stretch a tall glass (a flute, a highball) past both */
@keyframes mix-drift-soft { from { transform: scale(1.02); } to { transform: scale(1.05) translateY(-1%); } }
.mix-stage.whole.reveal > img, .mix-stage.whole.reveal > video { animation-name: mix-drift-soft; }
@media (prefers-reduced-motion: reduce) { .mix-stage > img, .mix-stage > video { animation: none; } }

/* the panel under the stage: what to do, how much, and the Mixologist's note */
.mix-panel { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-16); padding: 0 var(--space-16) var(--space-8); overflow: auto; }
.mix-head { display: flex; flex-direction: column; gap: var(--space-4); }
.mix-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-8) var(--space-16) var(--space-16); }
.mix-actions .btn { width: 100%; }




.mix-prep { display: flex; gap: var(--space-8); align-items: flex-start; }
.mix-prep svg { color: var(--color-primary); flex: none; margin-top: 2px; }


/* the share card, drawn to an image so it can be saved. A screen of its own: solid,
   so the reveal's buttons never show through, and the reveal is inert while it is open. */
.mix-share { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center; gap: var(--space-16); padding: var(--space-24) var(--space-16); background: var(--art-shade); }
.mix-share img { width: 100%; border-radius: var(--radius-card); display: block; box-shadow: 0 var(--space-8) var(--space-32) var(--color-shadow); }

/* 13 The Mixologist plans: a short clip on top, the offer scrolling under it */
/* a short strip of the stir clip: 80 tall, so the shelf line and all three plans fit above the fold */
.pay-hero { position: relative; flex: none; height: 80px; overflow: hidden; }
.pay-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pay-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, var(--art-shade) 100%); }
.pay-close { position: absolute; top: var(--space-8); right: var(--space-8); z-index: 2; color: var(--color-text); }
.pay .mix-panel.pay-panel { justify-content: flex-start; padding-top: 0; }
.pay .paywall { gap: var(--space-16); }
.pay .paywall .gets { gap: var(--space-4); }
.pay .mix-actions { gap: var(--space-8); padding-top: var(--space-8); border-top: var(--stroke-hairline) solid var(--color-border); }
/* once bought (or already owned): nothing left to choose, so the clip gets the top half and the
   message sits centred in the space under it, clear of the glass */
.pay.done .pay-hero { height: 50%; }
.pay.done .pay-hero video { object-position: 50% 30%; }
.pay.done .pay-hero::after { background: linear-gradient(to bottom, transparent 60%, var(--art-shade) 100%); }
.pay.done .mix-panel.pay-panel { justify-content: center; }
/* a short phone gives the clip a little less, so the message never scrolls */
@media (max-height: 720px) { .pay.done .pay-hero { height: 42%; } }