/* The glass bar. At the top of a page the bar is the flat strip it always was. Over the first 72 px of scroll the strip
   clears and the bar's content lifts into one floating capsule of frosted glass: the page shows through it as soft
   colour, a lit rim runs round it and a sheen crosses its top. (A displacement lens along the rim was tried and dropped:
   in Chromium it cancels the blur behind it.)
   One number drives it, --bar-lift, from 0 at rest to 1 lifted. A scroll timeline sets it where the browser has one
   (Safari without one gets it from app.js, once a frame); reduced motion sets it from .is-scrolled instead.
   The content never moves sideways: the capsule grows outward from the column by --cap-pad on each side. */
@property --bar-lift { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes bar-lift { from { --bar-lift: 0; } to { --bar-lift: 1; } }

/* Geometry. --cap-top is the capsule's lifted top edge in the viewport; --bar-pad-top is any padding above the bar's content. */
.page[data-view] .bar {
  --cap-h: 56px; --cap-top: 10px; --cap-pad: 14px; --cap-round: 999px; --bar-pad-top: 0px; --bar-rest: var(--paper);
  --glass-edge-blur: 8px;
  --glass-fill: calc(var(--bar-lift) * (1 - var(--on-night, 0)) * 100%);
  --glass-line: calc(var(--bar-lift) * 100%);
  /* The lit rim and inner light: over the night band they dim to a glint. */
  --glass-light: calc(var(--bar-lift) * (1 - (1 - var(--glass-night-light)) * var(--on-night, 0)) * 100%);
  position: sticky; top: 0;
  justify-content: center; align-items: flex-start;
  pointer-events: none;
  background: color-mix(in srgb, var(--bar-rest) calc((1 - var(--bar-lift)) * 100%), transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@supports (animation-timeline: scroll()) {
  .page[data-view] .bar { animation: bar-lift linear both; animation-timeline: scroll(root); animation-range: 0px 72px; }
}
.page[data-view="home"] .bar {
  --bar-rest: var(--landing-bar-glass); height: calc(var(--bar-h) + var(--bar-pad-top));
  /* The lifted capsule's left edge, from the viewport's (the night lens is measured from there). */
  --cap-x: calc((100vw - min(var(--col), 100vw - 2 * var(--gutter))) / 2 - var(--cap-pad));
}
.page.is-run-view .bar { --bar-rest: var(--landing-bar-glass); }
@media (max-width: 899.98px) {
  .page[data-view] .bar { --cap-h: 52px; --cap-top: calc(env(safe-area-inset-top) + 6px); --cap-pad: max(0px, var(--gutter) - 8px); --cap-round: 20px; }
}
@media (max-width: 640px) {
  .page[data-view="home"] .bar { --bar-pad-top: env(safe-area-inset-top); }
}

/* The capsule. Its box is the column plus the lifted padding; at rest it is the column, clear, centred in the strip. */
.page[data-view] .bar-inner {
  position: relative;
  top: calc((50% - var(--cap-h) / 2) * (1 - var(--bar-lift)) + (var(--cap-top) - var(--bar-pad-top)) * var(--bar-lift));
  flex: none; box-sizing: content-box;
  width: min(var(--col-max), 100%); height: var(--cap-h);
  margin-inline: 0; padding-inline: calc(var(--cap-pad) * var(--bar-lift));
  border-radius: var(--cap-round);
  pointer-events: auto;
  /* Frosted in the middle, where the words sit, and clearer toward the rim; a sheen lies across the top. The blur keeps
     the shapes passing underneath but softens a headline enough that the words on the glass need no halo of their own
     (dark glass blurs more, since light print on charcoal competes harder with the words). */
  background:
    radial-gradient(160px 12px at 90px 3px, color-mix(in srgb, var(--glass-spec) var(--glass-fill), transparent), transparent 70%),
    radial-gradient(ellipse 70% 120% at 50% -45%, color-mix(in srgb, var(--glass-sheen) var(--glass-fill), transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--glass-tint-edge) var(--glass-fill), transparent), color-mix(in srgb, var(--glass-tint-core) var(--glass-fill), transparent) 38% 62%, color-mix(in srgb, var(--glass-tint-edge) var(--glass-fill), transparent));
  /* The glass's thickness: a bright top bevel, a shaded foot, light caught inside both round ends; then a hairline that
     draws the edge on white paper, and the depth below. */
  box-shadow:
    inset 0 1.5px 1px -.5px color-mix(in srgb, var(--glass-inner-hi) var(--glass-light), transparent),
    inset 0 -1.5px 2px -1px color-mix(in srgb, var(--glass-inner-lo) var(--glass-light), transparent),
    inset 10px 0 14px -12px color-mix(in srgb, var(--glass-glow) var(--glass-light), transparent),
    inset -10px 0 14px -12px color-mix(in srgb, var(--glass-glow) var(--glass-light), transparent),
    0 0 0 .5px color-mix(in srgb, var(--glass-outline) var(--glass-line), transparent),
    0 1px 2px color-mix(in srgb, var(--glass-shadow-near) var(--glass-line), transparent),
    0 8px 18px -6px color-mix(in srgb, var(--glass-shadow-mid) var(--glass-line), transparent),
    0 22px 48px -18px color-mix(in srgb, var(--glass-shadow-far) var(--glass-line), transparent);
  /* Blur, colour and light grow with the lift, so the capsule at rest is invisible against the strip. */
  --glass-backdrop: blur(calc(var(--glass-blur) * var(--bar-lift))) saturate(calc(1 + .9 * var(--bar-lift))) brightness(calc(1 + (var(--glass-bright) - 1) * var(--bar-lift)));
  -webkit-backdrop-filter: var(--glass-backdrop); backdrop-filter: var(--glass-backdrop);
}
.page[data-view="home"] .bar-inner { width: min(var(--col), 100% - 2 * var(--gutter)); }

/* The rim: a lit edge, bright at the top left, glinting along the sides, half-lit at the bottom right. (A short specular
   highlight rides the top of the left end, as the capsule's first background layer.) */
.page[data-view] .bar-inner::after {
  content: ""; position: absolute; inset: 0; padding: 1.25px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to bottom right, var(--glass-rim-hi), var(--glass-rim-side) 30%, var(--glass-rim-side) 70%, var(--glass-rim-lo));
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude;
  opacity: calc(var(--bar-lift) * (1 - (1 - var(--glass-night-light)) * var(--on-night, 0)));
}

/* Secondary inks on the glass deepen to full ink as the tint comes in (the strip's own values pass through .bar, which
   keeps the swap from referring to itself); over the night band, where the text turns white on the dark, they give way. */
.page[data-view] .bar { --bar-ink-2: var(--ink-2); --bar-ink-3: var(--ink-3); }
.page[data-view] .bar-inner {
  --ink-2: color-mix(in srgb, var(--ink) var(--glass-fill), var(--bar-ink-2));
  --ink-3: color-mix(in srgb, var(--ink) var(--glass-fill), var(--bar-ink-3));
}

/* The soft edge: the page blurs and pales as it scrolls up under the capsule and around it, fading out below its foot,
   so the capsule floats over a haze rather than over sharp print. Over the night band it only blurs, so the band stays
   dark. (It replaces the landing strip's hairline.) */
.page[data-view] .bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: calc(var(--cap-top) + var(--cap-h) + 28px);
  background: linear-gradient(color-mix(in srgb, var(--paper) calc(var(--bar-lift) * (1 - var(--on-night, 0)) * 72%), transparent), transparent calc(var(--cap-top) + var(--cap-h) * .7));
  opacity: 1; animation: none; pointer-events: none;
  -webkit-backdrop-filter: blur(calc(var(--glass-edge-blur) * var(--bar-lift))); backdrop-filter: blur(calc(var(--glass-edge-blur) * var(--bar-lift)));
  -webkit-mask: linear-gradient(black calc(100% - 44px), transparent); mask: linear-gradient(black calc(100% - 44px), transparent);
}
/* Home: the scroll-progress line runs along the capsule's foot, cut by its round ends. */
.page[data-view="home"] .bar::after {
  left: 50%; right: auto; bottom: auto;
  top: calc(var(--bar-pad-top) + (var(--bar-h) - var(--cap-h)) / 2 * (1 - var(--bar-lift)) + (var(--cap-top) - var(--bar-pad-top)) * var(--bar-lift));
  width: calc(min(var(--col), 100% - 2 * var(--gutter)) + 2 * var(--cap-pad) * var(--bar-lift)); height: var(--cap-h);
  translate: -50% 0; border-radius: var(--cap-round);
  background: linear-gradient(to top, var(--signal) 2px, transparent 2px);
  pointer-events: none;
}

/* Below 900 px the capsule has no room for the progress line: at the top of a page it reads as a stray stub under the wordmark. */
@media (max-width: 899.98px) {
  .page[data-view="home"] .bar::after { content: none; }
}

/* The capsule stays pinned on Create and on a video, so what focus or a jump scrolls to lands below its foot, not under it.
   (Home keeps its own offset, in landing.css.) */
html:has(.page:is([data-view="composer"], [data-view="run"])) { scroll-padding-top: calc(env(safe-area-inset-top) + 80px); }

/* A phone watching a video, upright or on its side: nothing may cover the picture, so the bar stays the flat strip it was
   and scrolls away with the page instead of floating over the film. Important, so neither the scroll timeline, the
   script's inline value nor the reduced-motion .is-scrolled can lift it. */
@media (max-width: 760px), (max-height: 500px) {
  .page.is-run-view .bar { position: relative; --bar-lift: 0 !important; animation: none; }
  .page.is-run-view .bar::before { content: none; }
  html:has(.page.is-run-view) { scroll-padding-top: 0; }
}

/* Reduced motion: the capsule still forms, as a quick fade once the page has left the top, never scrubbed. */
@media (prefers-reduced-motion: reduce) {
  .page[data-view] .bar { animation: none; transition: --bar-lift 160ms ease; }
  .page[data-view] .bar.is-scrolled { --bar-lift: 1; }
}
/* Reduced transparency: paper, not glass. */
@media (prefers-reduced-transparency: reduce) {
  .page[data-view] .bar { background: color-mix(in srgb, var(--paper) calc((1 - var(--bar-lift)) * 100%), transparent); }
  .page[data-view] .bar::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .page[data-view] .bar-inner {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in srgb, var(--paper) var(--glass-fill), transparent);
  }
}

/* The bar's own controls, My videos and Account: quiet hairline pills the height of the profile disc, one family beside
   the dark primary pill. Solid paper, so they read the same over the glass, the strip and the night band. The balance
   rides inside Account on a sunken chip. Phones keep their icon-only and clipped layouts. */
@media (min-width: 641px) {
  #bar :is(#account-button, #link-runs) {
    height: 34px; margin: 0; padding: 0 14px; gap: 8px;
    border: 0; border-radius: 999px; background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink); font: 500 13.5px/1 var(--sans); letter-spacing: -.006em; white-space: nowrap;
    transition: box-shadow 160ms ease, color 160ms ease;
  }
  #bar :is(#account-button, #link-runs):hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px var(--landing-shadow-soft); }
  #bar :is(#account-button, #link-runs):focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 2px; }
  .page:not([data-view="home"]) #bar .bar-links { gap: 8px; }
  #bar #link-runs svg { width: 15px; height: 15px; color: var(--ink-3); opacity: 1; }
  #bar #account-button:has(.account-button-balance) { padding-right: 4px; }
  #bar .account-button-balance {
    display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
    background: var(--paper-2); color: var(--ink-2); font: 500 12.5px/1 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums;
  }
}