/* TaB — coming soon. Palette from the TaB logo, calmed down:
   forest #0C140D · sage #8DBA67 (from leaf #66AA30) · pistachio #CFE6A6 + soft lime #B5DB82 (from #C0FF72) · ivory #EEF0E2 */
:root {
  --vu: 1vh;
  --umber: #0C140D;
  --pink: #B5DB82;
  --gilt: #8DBA67;
  --gilt-hi: #CFE6A6;
  --parchment: #EEF0E2;

  --f-display: "League Gothic", "Oswald", "Arial Narrow", sans-serif;
  --f-serif: "Cormorant Garamond", "Times New Roman", serif;
  --f-sans: "Instrument Sans", system-ui, sans-serif;
  --f-wide: "Archivo", "Helvetica Neue", sans-serif;
  --hl: min(9.6vw, calc(17.5 * var(--vu)), 12rem);

  --pad: clamp(28px, 5vw, 80px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

@supports (height: 1svh) { :root { --vu: 1svh; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--umber);
  color: var(--parchment);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
p, h1, figure { margin: 0; }

/* a whisper of canvas grain */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage {
  position: relative;
  min-height: calc(100 * var(--vu));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- the queen ---------- */
.portrait {
  grid-column: 2; grid-row: 1 / -1;
  position: relative;
  overflow: hidden;
  z-index: -1;
}
.portrait .slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 20%);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.8s var(--ease), transform 9s linear;
}
.portrait .slide.is-active { opacity: 1; transform: scale(1); }
.portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #2E5A2A; mix-blend-mode: soft-light; opacity: .45;
}
.portrait::after {
  z-index: 1;
  /* melt the painting's left edge into the page */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--umber) 0%, rgba(12, 20, 13, .45) 14%, rgba(12, 20, 13, 0) 32%),
    linear-gradient(0deg, var(--umber) 0%, rgba(12, 20, 13, .6) 12%, rgba(12, 20, 13, 0) 34%);
}
@keyframes settle { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- logo ---------- */
.top { grid-column: 1; grid-row: 1; padding: calc(var(--pad) * .6 + 14px) var(--pad) 0; }
.logo { width: clamp(96px, 9vw, 180px); height: auto; animation: fade 1.2s var(--ease) .2s both; }

/* ---------- the statement ---------- */
.copy {
  grid-column: 1; grid-row: 2;
  align-self: center;
  padding: 24px var(--pad);
}
.dot { color: var(--pink); }
.headline {
  /* sized by width AND height so it never runs into the logo */
  font: 400 var(--hl)/.84 var(--f-display);
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--parchment);
  animation: rise 1.1s var(--ease) .55s both;
}

.credit {
  grid-column: 1 / -1; grid-row: 3;
  justify-self: end;
  padding: 0 calc(var(--pad) * .6 + 14px) calc(var(--pad) * .5 + 14px);
  font: 500 clamp(.66rem, .55vw, .9rem)/1.4 var(--f-sans); letter-spacing: .08em;
  color: rgba(238, 240, 226, .55);
  animation: fade 1s var(--ease) 1.6s both;
}
.credit { transition: opacity .6s var(--ease); }
.credit.is-swapping { opacity: 0; }
.credit i { font-family: var(--f-serif); font-size: .9rem; letter-spacing: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- phones & narrow windows: queen on top, statement below ---------- */
@media (max-width: 820px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  .portrait { grid-column: 1; grid-row: 1 / 3; }
  .portrait .slide { object-position: var(--pos-m, 50% 12%); }
  .portrait::after {
    background: linear-gradient(0deg, var(--umber) 0%, rgba(12, 20, 13, .85) 22%, rgba(12, 20, 13, 0) 55%),
                linear-gradient(180deg, rgba(12, 20, 13, .6) 0%, rgba(12, 20, 13, 0) 18%);
  }
  .copy { grid-row: 3; align-self: end; padding-top: 0; padding-bottom: 8px; margin-top: -22vh; }
  .stage { --hl: min(19vw, calc(11.5 * var(--vu))); }
  .credit { grid-row: 4; justify-self: start; padding-left: var(--pad); padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* ---------- THE POUR ---------- */
.pour {
  position: relative; height: 300vh;
  /* continues straight out of the hero: same forest, a little deeper green in the middle */
  background:
    linear-gradient(180deg, var(--umber) 0%, #0F1E11 30%, #12251A 55%, #0F1E11 80%, var(--umber) 100%);
}
.pour__pin {
  position: sticky; top: 0;
  height: calc(100 * var(--vu));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "l glass r" "end end end";
  align-items: center;
  column-gap: clamp(20px, 3.5vw, 64px);
  padding: clamp(40px, 8vh, 90px) var(--pad) clamp(36px, 7vh, 80px);
  overflow: hidden;
}
.turn {
  font: 400 min(15vw, calc(24 * var(--vu)), 15rem)/.84 var(--f-display);
  text-transform: uppercase;
  color: var(--parchment);
  /* slides in as the glass passes halfway */
  opacity: clamp(0, calc((var(--f, 0) - .45) * 2.2), 1);
  transition: none;
}
.turn--l { grid-area: l; justify-self: end; transform: translateX(calc((1 - clamp(0, calc((var(--f, 0) - .45) * 2.2), 1)) * -60px)); }
.turn--r { grid-area: r; justify-self: start; transform: translateX(calc((1 - clamp(0, calc((var(--f, 0) - .45) * 2.2), 1)) * 60px)); }
.pour__pin::before {
  /* candle-light behind the glass that warms as it fills */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(30% 40% at 50% 46%, rgba(181, 219, 130, calc(.03 + var(--f, 0) * .16)), transparent 70%);
}

.glass { grid-area: glass; position: relative; height: min(calc(64 * var(--vu)), 600px); aspect-ratio: 528 / 1124; }
.glass svg { width: 100%; height: 100%; overflow: visible; }
.surface { animation: lap 3.4s linear infinite; }
@keyframes lap { to { transform: translateX(200px); } }
.cup__ghost { fill: rgba(207, 230, 166, .04); }
.cup__line { fill: none; stroke: var(--gilt-hi); stroke-width: 3; stroke-linejoin: round; opacity: calc(1 - var(--f, 0) * .85); }
.cup__line--fine { stroke-width: 2; opacity: calc(.6 - var(--f, 0) * .6); }
.glass__shine {
  position: absolute; inset: -10% -30%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(181, 219, 130, .22), transparent);
  transition: opacity 1s var(--ease);
}
.pour.is-full .glass__shine { opacity: 1; }


.pour__end {
  grid-area: end; justify-self: center;
  font: 300 clamp(.95rem, 2vw, 1.6rem)/1 var(--f-wide);
  font-stretch: 125%;
  letter-spacing: .5em; margin-right: -.5em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--gilt-hi);
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.pour.is-full .pour__end { opacity: 1; transform: none; }

/* ---------- footer ---------- */
.foot { display: grid; justify-items: center; gap: 12px; padding: 50px var(--pad) 40px; border-top: 1px solid rgba(141, 186, 103, .18); }
.foot img { width: 84px; height: auto; }
.foot p { font-size: .72rem; letter-spacing: .2em; color: rgba(238, 240, 226, .45); }

@media (max-width: 820px) {
  .pour__pin { grid-template-columns: auto auto; grid-template-rows: auto 1fr auto; grid-template-areas: "l r" "glass glass" "end end"; justify-content: center; column-gap: 3.2vw; row-gap: 14px; }
  .turn { font-size: min(20vw, calc(13 * var(--vu))); }
  .turn--l { justify-self: end; } .turn--r { justify-self: start; }
  .glass { justify-self: center; height: min(calc(52 * var(--vu)), 440px); }
}

@media (prefers-reduced-motion: reduce) {
  .pour { height: auto; }
  .pour__pin { position: relative; height: auto; min-height: calc(100 * var(--vu)); }
  .turn { opacity: 1; transform: none; }
}