/* ── SELECTED WORK, direction o7: LIQUID GLASS ROW ──
   Loaded only by index-glass.html. Every class starts .lg so the block can
   be lifted out whole.
   The breathing row from o6 with every frame made a liquid glass card. The
   card in the centre opens wide, clears, regains its colour and plays its
   loop, and a masthead line fades in on a glass ledge: name, what we made,
   one fact. The rest sit narrow, frosted and near black and white with a
   faint aubergine tint.
   The glass is layered, bottom to top: the picture, a faint aubergine tint
   and a milky frost that clear as the card opens, a bright band inside the
   edge, a glint that slides across as the card travels, then the rim
   (specular border, bevel, inner shade). No backdrop filter on the cards:
   the SVG lens and the blur band cost a full compositor redraw every frame.
   Without the script, or under reduced motion, every card shows open with
   its line in a still horizontal scroller. */

.lg {
  --ow: min(52vw, 820px);                /* open card width */
  --h: calc(var(--ow) / 1.78);           /* open card is 16:9 */
  --r: 26px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 40px;
}

.lg-row {
  display: flex;
  gap: 14px;
  padding: 8px 24px 30px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lg-row::-webkit-scrollbar { display: none; }

/* ── THE CARD ── */
.lg-c {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: var(--ow);
  height: var(--h);
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: center;
  background: rgba(49, 27, 66, 0.1);
  box-shadow:
    0 24px 38px -24px rgba(49, 27, 66, 0.4),
    0 3px 10px -2px rgba(49, 27, 66, 0.1);
  -webkit-tap-highlight-color: transparent;
}

/* the picture sits at full open width in the middle of the card, so a
   narrow card shows a slice of it, never a squashed copy */
.lg-media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--ow);
  margin-left: calc(var(--ow) / -2);
}
.lg-media img,
.lg-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lg-media video { opacity: 0; transition: opacity 400ms var(--ease); }
.lg-media video.is-on { opacity: 1; }

/* autoplay refused (Low Power Mode): the poster pushes in slowly while
   the card is open and eases back as it closes */
.lg.lg-noplay .lg-media img {
  will-change: transform;
  transition: transform 1400ms var(--ease);
}
.lg.lg-noplay .lg-c.is-open .lg-media img {
  transform: scale(1.08) translate3d(-1.2%, -0.8%, 0);
  transition: transform 9s cubic-bezier(0.33, 0, 0.4, 1);
}

/* colour drains as a card leaves the centre: the script sets grayscale on
   the picture and the opacity of a faint aubergine tint over it */
.lg-tint {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(49, 27, 66, 0.2);
  pointer-events: none;
}

/* milky frost, the closed state of the glass */
.lg-frost {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(168deg, rgba(250, 253, 252, 0.5), rgba(230, 237, 237, 0.3) 55%, rgba(122, 191, 171, 0.12));
  pointer-events: none;
}

/* the edge band: the glass brightens a touch inside its edge. Painted as
   gradients rather than a backdrop filter, which cost the compositor a
   full redraw of every card on every frame */
.lg-edge {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 16px, rgba(255, 255, 255, 0) calc(100% - 16px), rgba(255, 255, 255, 0.16)),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 16px, rgba(255, 255, 255, 0) calc(100% - 16px), rgba(255, 255, 255, 0.1));
}

/* the glint: a soft diagonal sheen held still against the viewport, so it
   slides across each card as the card travels under it */
.lg-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r);
  pointer-events: none;
}
.lg-glint {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 50%;
  width: 70%;
  margin-left: -35%;
  background: linear-gradient(104deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.2) 46%,
    rgba(255, 255, 255, 0.07) 53%,
    rgba(255, 255, 255, 0.14) 58%,
    rgba(255, 255, 255, 0) 72%);
}

/* the rim: thickness from the bevel and inner shadow, the light from a
   gradient border bright at two corners */
.lg-rim {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 2px 2.5px 1px -1px rgba(255, 255, 255, 0.85),
    inset -1.5px -2px 1px -1px rgba(255, 255, 255, 0.5);
  /* inner glow and the shade along the bottom, as gradients: a wide blurred
     inset shadow re-rasterised on every frame a card changes width */
  background:
    linear-gradient(to top, rgba(49, 27, 66, 0.2), rgba(49, 27, 66, 0) 38px),
    radial-gradient(120% 140% at 50% 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.1) 100%);
}
.lg-rim::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  padding: 1.25px;
  background: linear-gradient(132deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.35) 18%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, 0.4) 84%,
    rgba(255, 255, 255, 0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ── THE MASTHEAD LINE ── a glass ledge inside the open card. Name in
   Halenoir, what we made and one fact in the body face */
.lg-line {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 20px 15px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(250, 253, 252, 0.8), rgba(232, 242, 239, 0.74));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(49, 27, 66, 0.06),
    0 12px 30px -14px rgba(49, 27, 66, 0.45);
  pointer-events: none;
}
.lg-w { display: block; flex: 0 0 auto; }
.lg-wi { display: block; white-space: nowrap; }
.lg-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(20px, 1.75vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.lg-what {
  font-family: var(--ff);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}
.lg-w-fact { margin-left: auto; }
.lg-fact {
  font-family: var(--ff);
  font-size: 14px;
  line-height: 1.3;
  color: rgba(49, 27, 66, 0.64);
}

.lg-c:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }

.lg-foot {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.lg-all {
  font-family: var(--ff);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  background: linear-gradient(var(--mint), var(--mint)) left bottom / 100% 1px no-repeat;
  transition: background-size 420ms var(--ease);
}
.lg-all:hover { background-size: 40% 1px; }

.lg-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── SCRIPTED ── every card sits on the row's midline and is moved out by
   one transform. The script sets each card's width (only the two cards
   in transition change on any frame), the frost opacity, the glint and
   the picture's parallax. */
.lg.js-lg .lg-row {
  position: relative;
  display: block;
  height: calc(var(--h) + 48px);
  padding: 0;
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: pan-y;
  cursor: grab;
}
.lg.js-lg.is-dragging .lg-row { cursor: grabbing; }
.lg.js-lg + .lg-foot { margin-top: -6px; }
.lg.js-lg .lg-c {
  position: absolute;
  left: 50%;
  top: 8px;
  contain: layout style;
  will-change: transform;
}
.lg.js-lg .lg-media,
.lg.js-lg .lg-glint { will-change: transform; }
.lg.js-lg .lg-frost { will-change: opacity; }
.lg.js-lg.is-dragging .lg-c { pointer-events: none; }

/* the ledge runs edge to edge inside the card and follows its width, so
   the type never reflows. The script fades the ledge and its three parts
   on the card's open progress, name first and the fact last, and has them
   gone before the card is too narrow to hold them */
.lg.js-lg .lg-line {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  will-change: opacity;
}
.lg.js-lg .lg-wi { opacity: 0; will-change: opacity, transform; }
.lg.js-lg .lg-media { will-change: transform, filter; }

/* tablet and small laptop: a wider open card and the name on its own row */
@media (min-width: 701px) and (max-width: 1180px) {
  .lg { --ow: 62vw; }
  .lg-line { flex-wrap: wrap; row-gap: 4px; }
  .lg-w-name { flex-basis: 100%; }
}
/* set by the script when a line on one row would crowd the open card */
.lg.lg-stack .lg-line { flex-wrap: wrap; row-gap: 4px; }
.lg.lg-stack .lg-w-name { flex-basis: 100%; }

@media (max-width: 700px) {
  .lg {
    --ow: 80vw;
    --h: calc(var(--ow) * 0.8);
    --r: 20px;
    margin-top: 28px;
  }
  .lg-row { gap: 8px; }
  .lg-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 10px 12px 11px;
    border-radius: 13px;
  }
  .lg-name { font-size: 19px; }
  .lg-what { font-size: 12.5px; }
  .lg-fact { font-size: 12px; }
  .lg-w-fact { margin-left: 0; }
  .lg-edge {
    -webkit-mask-image:
      linear-gradient(to right, #000, transparent 11px, transparent calc(100% - 11px), #000),
      linear-gradient(to bottom, #000, transparent 11px, transparent calc(100% - 11px), #000);
    mask-image:
      linear-gradient(to right, #000, transparent 11px, transparent calc(100% - 11px), #000),
      linear-gradient(to bottom, #000, transparent 11px, transparent calc(100% - 11px), #000);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-media video { transition: none; }
}