/* ==========================================================================
   FOLIO // LOUPE — a Video.js v10 skin
   Solheath Studio · Apache License 2.0

   Idea: the controls are a piece of matte alabaster laid on the film. The
   timeline is a printer's ruler whose ticks are the film's own loudness, and
   the playhead is a glass loupe that magnifies the ruler under it.

   Everything the viewer reads sits on an opaque paper surface, so contrast does
   not depend on the frame underneath (bright or dark footage).

   Public tokens follow the packaged skins:
     --media-accent-color, --media-border-radius, --media-font-family
   ========================================================================== */

.fl-skin {
  /* palette */
  --fl-accent: var(--media-accent-color, #c4552b);        /* terracotta, decorative ink */
  --fl-accent-ink: #9f3f1a;                               /* terracotta that passes AA as text */
  --fl-ink: #2a2520;                                       /* charcoal */
  --fl-ink-soft: #433b34;
  --fl-paper-hi: #fcf9f4;
  --fl-paper-lo: #efe8dd;
  --fl-hair: rgb(110 85 60 / 0.24);
  --fl-focus: #9f3f1a;
  --fl-sans: var(--media-font-family, "Inter Var", "Inter", ui-sans-serif, system-ui, sans-serif);
  --fl-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  /* geometry (overridden by container queries below) */
  --fl-cap-h: 76px;            /* capsule height */
  --fl-lz: 66px;               /* loupe diameter */
  --fl-mag: 1.9;               /* loupe magnification */
  --fl-seek-h: 44px;           /* ruler box height (also the touch target) */
  --fl-dock-x: clamp(12px, 4cqw, 48px);
  --fl-dock-b: clamp(12px, 3.4cqw, 36px);
  --fl-ease: cubic-bezier(0.2, 0.75, 0.2, 1);

  container: fl-player / inline-size;
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: clip;
  overflow-clip-margin: 0px;
  border-radius: var(--media-border-radius, 14px);
  background: #12100e;
  color: var(--fl-ink);
  font-family: var(--fl-sans);
  font-size: 15px;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

.fl-skin video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  border-radius: inherit;
  background: #12100e;
}

.fl-skin:fullscreen {
  aspect-ratio: auto;
  border-radius: 0;
}

/* ------------------------------------------------------------------ focus -- */
/* A two-tone ring (terracotta + paper halo) stays visible on the capsule and on
   any video frame. Outlines are never removed. */
.fl-skin :is(media-play-button, media-mute-button, media-fullscreen-button, media-slider-thumb, media-dialog-close, media-time):focus-visible {
  outline: 3px solid var(--fl-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px rgb(252 249 244 / 0.95);
}
.fl-skin:focus-visible {
  outline: 2px solid var(--fl-focus);
  outline-offset: -5px;
}
/* live-region text and value mirrors: available to assistive tech, never painted */
.fl-skin media-status-announcer,
.fl-skin .fl-sr {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------- the dock -- */
.fl-dock {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 0 var(--fl-dock-x) var(--fl-dock-b);
  pointer-events: none;
  transition: opacity 0.35s ease, translate 0.5s var(--fl-ease);
}
.fl-dock:not([data-visible]):not(:has(:focus-visible)) {
  opacity: 0;
  translate: 0 12px;
}
.fl-dock:not([data-visible]):not(:has(:focus-visible)) .fl-capsule {
  pointer-events: none;
}

/* ----------------------------------------------------------- the capsule -- */
.fl-capsule {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  inline-size: min(100%, 1040px);
  block-size: var(--fl-cap-h);
  padding-inline: calc((var(--fl-cap-h) - 56px) / 2 + 8px) calc((var(--fl-cap-h) - 44px) / 2 + 8px);
  border-radius: 999px;
  background:
    radial-gradient(120% 140% at 50% -40%, rgb(255 255 255 / 0.85), transparent 55%),
    linear-gradient(180deg, var(--fl-paper-hi), var(--fl-paper-lo));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.95),
    inset 0 -2px 3px rgb(120 92 64 / 0.10),
    0 0 0 1px var(--fl-hair),
    0 2px 3px rgb(60 40 20 / 0.10),
    0 22px 40px -14px rgb(50 32 16 / 0.45);
}
/* matte stone grain */
.fl-capsule::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  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%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .27 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- buttons -- */
.fl-btn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  color: var(--fl-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, scale 0.18s var(--fl-ease), box-shadow 0.2s ease;
}
.fl-i {
  inline-size: 24px;
  block-size: 24px;
  fill: currentColor;
  display: block;
}
@media (hover: hover) {
  .fl-btn:hover { background-color: rgb(90 66 44 / 0.09); }
}
.fl-btn:active { scale: 0.92; }

/* play / pause / replay: the charcoal "ink well" */
.fl-btn--play {
  inline-size: max(44px, calc(var(--fl-cap-h) - 18px));
  block-size: max(44px, calc(var(--fl-cap-h) - 18px));
  margin-inline-end: 6px;
  background: radial-gradient(circle at 35% 30%, #4a423a, var(--fl-ink) 62%);
  color: #f7f2ea;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 3px 8px -2px rgb(30 20 10 / 0.45);
}
@media (hover: hover) {
  .fl-btn--play:hover { background: radial-gradient(circle at 35% 30%, #5a5047, #352e28 62%); }
}
.fl-btn--play .fl-i { inline-size: 26px; block-size: 26px; display: none; }
.fl-btn--play[data-paused]:not([data-ended]) .fl-i--play { display: block; translate: 1px 0; }
.fl-btn--play:not([data-paused]):not([data-ended]) .fl-i--pause { display: block; }
.fl-btn--play[data-ended] .fl-i--replay { display: block; }

/* mute: waves follow the volume level */
.fl-btn--mute .fl-i__x { display: none; }
.fl-btn--mute[data-volume-level="low"] .fl-i__w2,
.fl-btn--mute[data-volume-level="off"] .fl-i__w2,
.fl-btn--mute[data-volume-level="off"] .fl-i__w1 { display: none; }
.fl-btn--mute[data-muted] .fl-i__w1,
.fl-btn--mute[data-muted] .fl-i__w2 { display: none; }
.fl-btn--mute:is([data-muted], [data-volume-level="off"]) .fl-i__x { display: inline; }
.fl-btn--mute:is([data-muted], [data-volume-level="off"]) { color: var(--fl-accent-ink); }

/* fullscreen: crop marks */
.fl-btn--fs .fl-i { fill: none; }
.fl-btn--fs .fl-i--exit,
.fl-btn--fs[data-fullscreen] .fl-i--enter { display: none; }
.fl-btn--fs[data-fullscreen] .fl-i--exit { display: block; }

.fl-rule {
  flex: none;
  inline-size: 1px;
  block-size: 30px;
  margin-inline: 4px;
  background: linear-gradient(180deg, transparent, rgb(90 66 44 / 0.28), transparent);
}

/* ------------------------------------------------------------------ time -- */
.fl-time {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  padding-inline: 6px 0;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fl-ink);
}
.fl-time__sep,
.fl-time__dur { color: var(--fl-ink-soft); }
.fl-time [data-unavailable] { opacity: 0.55; }

/* ------------------------------------------------- the ruler + the loupe -- */
.fl-seek {
  --fl-pos: var(--media-slider-fill);
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 72px;
  block-size: var(--fl-seek-h);
  margin-inline: calc(var(--fl-lz) / 2 + 2px) calc(var(--fl-lz) / 2 - 12px);
  display: block;
  cursor: pointer;
  container-type: inline-size;
  touch-action: none;
}
.fl-seek[data-dragging] { --fl-pos: var(--media-slider-pointer); }

.fl-seek__track {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--fl-ruler-base, linear-gradient(transparent 47%, rgb(90 66 44 / 0.35) 47% 53%, transparent 53%)) no-repeat 0 0 / 100% 100%;
}
.fl-seek__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  inline-size: var(--fl-pos);
  overflow: hidden;
  background: var(--fl-ruler-ink, linear-gradient(transparent 47%, var(--fl-accent) 47% 53%, transparent 53%)) no-repeat 0 0 / 100cqw 100%;
}
.fl-seek__buffer {
  position: absolute;
  inset-inline-start: 0;
  inset-block: 25%;
  display: block;
  border-radius: 3px;
  inline-size: var(--media-slider-buffer);
  background: linear-gradient(180deg, rgb(120 92 64 / 0), rgb(120 92 64 / 0.07) 50%, rgb(120 92 64 / 0));
  transition: inline-size 0.3s linear;
}

/* the glass loupe (slider thumb: focusable, role=slider) */
.fl-loupe {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--fl-pos);
  z-index: 2;
  display: block;
  inline-size: var(--fl-lz);
  block-size: var(--fl-lz);
  border-radius: 50%;
  translate: -50% -50%;
  transition: scale 0.25s var(--fl-ease);
}
.fl-seek:is([data-pointing], [data-dragging]) .fl-loupe { scale: 1.05; }

.fl-loupe__lens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 56%, #fffdf9, #efe6d8 78%);
}
.fl-loupe__ruler {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  inline-size: calc(100cqw * var(--fl-mag));
  block-size: calc(var(--fl-seek-h) * var(--fl-mag));
  translate: calc(-1 * var(--fl-pos)) -50%;
  background: var(--fl-ruler-base) no-repeat 0 0 / 100% 100%;
}
.fl-loupe__ruler::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--fl-pos);
  background: var(--fl-ruler-ink) no-repeat 0 0 / calc(100cqw * var(--fl-mag)) 100%;
}
/* reading mark at the top of the lens */
.fl-loupe__hair {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 6%;
  inline-size: 2px;
  block-size: 13%;
  border-radius: 2px;
  translate: -50% 0;
  background: var(--fl-accent);
}
/* glass: specular window, rim, inner refraction */
.fl-loupe__glint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 22% at 34% 22%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 70%),
    radial-gradient(ellipse 60% 20% at 50% 90%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 70%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0) 60%, rgb(150 112 76 / 0.20) 80%, rgb(255 255 255 / 0.70) 93%, rgb(120 88 58 / 0.45) 100%);
  box-shadow:
    inset 0 2px 3px rgb(255 255 255 / 0.9),
    inset 0 -8px 12px -4px rgb(196 85 43 / 0.16),
    0 1px 1px rgb(60 40 20 / 0.18),
    0 8px 14px -6px rgb(60 36 16 / 0.45);
}
/* warm caustic: the light the lens focuses onto the stone */
.fl-loupe__caustic {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 66%;
  inline-size: 92%;
  block-size: 52%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgb(240 140 72 / 0.75), rgb(236 128 64 / 0.25) 45%, rgb(236 128 64 / 0) 72%);
  filter: blur(3px);
  z-index: -1;
}

/* time bubbles (paper, so they read on any frame) */
.fl-bubble {
  position: absolute;
  inset-block-end: calc(100% + 12px);
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 6px 11px 7px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--fl-paper-hi), #f3ece2);
  box-shadow: 0 0 0 1px var(--fl-hair), 0 10px 18px -8px rgb(50 32 16 / 0.45);
  color: var(--fl-ink);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.fl-bubble::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 100%;
  inline-size: 10px;
  block-size: 6px;
  translate: -50% -0.5px;
  background: #f3ece2;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.fl-preview {
  position: absolute;
  inset-block-end: calc(50% + var(--fl-lz) / 2);
  inset-inline-start: var(--media-slider-pointer);
  display: block;
  inline-size: 0;
  block-size: 0;
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.18s ease, translate 0.25s var(--fl-ease);
  pointer-events: none;
}
.fl-seek:is([data-pointing], [data-dragging]) .fl-preview { opacity: 1; translate: 0 0; }
.fl-bubble--current {
  inset-block-end: calc(100% + 12px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.fl-seek:not([data-pointing]):not([data-dragging]) .fl-loupe:focus-visible .fl-bubble--current { opacity: 1; }

/* ---------------------------------------------------------- volume slip -- */
.fl-volume {
  --media-popover-side-offset: 18px;
  margin: 0;
  padding: 14px 0 10px;
  inline-size: 56px;
  block-size: 178px;
  border: 0;
  overflow: visible;
  border-radius: 28px;
  color: var(--fl-ink);
  font-family: var(--fl-sans);
  background: linear-gradient(180deg, var(--fl-paper-hi), var(--fl-paper-lo));
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--fl-hair), 0 18px 32px -12px rgb(50 32 16 / 0.5);
  transition: opacity 0.2s ease, translate 0.3s var(--fl-ease);
}
.fl-volume[data-open] { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fl-volume:is([data-starting-style], [data-ending-style]) { opacity: 0; translate: 0 8px; }
.fl-volume__slider {
  position: relative;
  display: block;
  inline-size: 44px;
  block-size: 128px;
  cursor: pointer;
  touch-action: none;
}
.fl-volume__track {
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: block;
  inline-size: 22px;
  /* thermometer ruler: centre groove + ticks every 10% */
  background:
    linear-gradient(90deg, transparent 9px, rgb(90 66 44 / 0.22) 9px 13px, transparent 13px),
    repeating-linear-gradient(0deg, rgb(90 66 44 / 0.45) 0 1px, transparent 1px 10%) 0 0 / 5px 100% no-repeat,
    repeating-linear-gradient(0deg, rgb(90 66 44 / 0.45) 0 1px, transparent 1px 10%) 100% 0 / 5px 100% no-repeat;
  border-radius: 3px;
}
.fl-volume__fill {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 9px;
  display: block;
  inline-size: 4px;
  block-size: var(--media-slider-fill);
  border-radius: 4px;
  background: var(--fl-accent);
}
.fl-volume__thumb {
  position: absolute;
  inset-block-end: calc(8px + (100% - 16px) * var(--media-slider-fill) / 100%);
  inset-inline-start: 50%;
  display: block;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  translate: -50% 50%;
  background:
    radial-gradient(ellipse 40% 26% at 36% 26%, #fff, rgb(255 255 255 / 0) 70%),
    radial-gradient(circle at 50% 60%, #fffaf3, #eadfcf 70%, #c9b49b 100%);
  box-shadow: 0 0 0 1px rgb(110 85 60 / 0.25), 0 4px 8px -3px rgb(60 36 16 / 0.5), inset 0 -3px 5px rgb(196 85 43 / 0.18);
}
.fl-volume__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fl-ink-soft);
  padding-inline-start: 0.22em;
}

/* --------------------------------------------------------- cover seal -- */
.fl-seal {
  position: absolute;
  inset: 0 0 calc(var(--fl-cap-h) + var(--fl-dock-b) - 8px) 0;  /* centre in the picture above the capsule */
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  scale: 0.96;
  transition: opacity 0.4s ease, scale 0.6s var(--fl-ease);
}
.fl-skin[data-fl-fresh] .fl-seal { opacity: 1; scale: 1; }
.fl-seal > * { grid-area: 1 / 1; }
.fl-seal__ring {
  inline-size: clamp(96px, 21cqw, 220px);
  block-size: clamp(96px, 21cqw, 220px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--fl-paper-hi) 0 58%, #f1e9de 70%);
  box-shadow: 0 0 0 1px var(--fl-hair), 0 24px 46px -16px rgb(20 12 6 / 0.6);
  fill: var(--fl-ink-soft);
  font-family: var(--fl-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  animation: fl-turn 40s linear infinite;
}
.fl-seal__btn {
  position: relative;  /* paint above the turning ring (its rotation makes a stacking context) */
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: clamp(48px, 9.5cqw, 96px);
  block-size: clamp(48px, 9.5cqw, 96px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a423a, var(--fl-ink) 62%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 6px 14px -4px rgb(30 20 10 / 0.5);
}
.fl-seal__btn svg { inline-size: 42%; fill: #f7f2ea; translate: 4% 0; }
@media (hover: hover) {
  .fl-skin[data-fl-fresh]:hover .fl-seal { scale: 1.03; }
}
@keyframes fl-turn { to { rotate: 1turn; } }

/* -------------------------------------------------------------- loading -- */
.fl-buffering {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fl-buffering[data-visible] { opacity: 1; }
.fl-buffering__disc {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fl-paper-hi), var(--fl-paper-lo));
  box-shadow: 0 0 0 1px var(--fl-hair), 0 14px 28px -12px rgb(20 12 6 / 0.6);
}
.fl-buffering__ring {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--fl-ink) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 0 15px, #000 15.5px 22px, transparent 22.5px);
          mask: radial-gradient(circle, transparent 0 15px, #000 15.5px 22px, transparent 22.5px);
  position: relative;
  animation: fl-turn 2.4s linear infinite;
}
.fl-buffering__disc::after {
  content: "";
  position: absolute;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--fl-accent);
}

/* ------------------------------------------------- origami pause badge -- */
.fl-badge {
  position: absolute;
  z-index: 2;
  inset-inline-start: var(--fl-dock-x);
  inset-block-end: calc(var(--fl-dock-b) + var(--fl-cap-h) + 18px);
  display: flex;
  align-items: stretch;
  perspective: 900px;
  pointer-events: none;
  filter: drop-shadow(0 14px 18px rgb(30 18 8 / 0.35));
}
.fl-badge__flap {
  position: relative;
  inline-size: 30px;
  transform-origin: 100% 50%;
  background: linear-gradient(135deg, #e48a5b, var(--fl-accent) 55%, #a9461f);
  clip-path: polygon(100% 0, 100% 100%, 0 82%, 22% 14%);
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  opacity: 0;
  transition: transform 0.55s var(--fl-ease), opacity 0.2s linear;
}
.fl-badge__card {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 14px 34px 15px 20px;
  transform-origin: 0 50%;
  transform: rotateY(96deg);
  opacity: 0;
  background:
    linear-gradient(90deg, rgb(120 90 60 / 0.16), rgb(120 90 60 / 0) 18px),
    linear-gradient(180deg, var(--fl-paper-hi), #efe6da);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  transition: transform 0.7s var(--fl-ease) 0.12s, opacity 0.2s linear 0.12s;
}
.fl-badge__card::before {   /* the crease line */
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 0;
  inline-size: 2px;
  background: var(--fl-accent);
}
.fl-badge__title {
  font-family: var(--fl-serif);
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--fl-ink);
}
.fl-badge__meta,
.fl-badge__paused {
  font-size: 13px;
  color: var(--fl-ink-soft);
  font-variant-numeric: tabular-nums;
}
.fl-badge__paused { color: var(--fl-accent-ink); font-weight: 500; letter-spacing: 0.02em; }

/* open when paused after playback has started */
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge__flap { transform: rotateY(0deg); opacity: 1; }
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge__card { transform: rotateY(0deg); opacity: 1; }
/* folding back closes card first, then the flap */
.fl-skin:not(:has(.fl-btn--play[data-paused])) .fl-badge__card { transition: transform 0.45s var(--fl-ease), opacity 0.15s linear 0.3s; }
.fl-skin:not(:has(.fl-btn--play[data-paused])) .fl-badge__flap { transition: transform 0.45s var(--fl-ease) 0.25s, opacity 0.15s linear 0.55s; }
/* stays out of the way while a film loads */
.fl-skin:has(.fl-buffering[data-visible]) .fl-badge { opacity: 0; }

/* ---------------------------------------------------------------- error -- */
.fl-error {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 20px;
  margin: 0;
  border: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  background: rgb(18 16 14 / 0.6);
}
.fl-error:not([data-open]) { display: none; }
.fl-error__card {
  display: grid;
  gap: 8px;
  max-inline-size: 420px;
  padding: 22px 26px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--fl-paper-hi), #efe6da);
  box-shadow: 0 24px 40px -18px rgb(0 0 0 / 0.6);
  color: var(--fl-ink);
}
.fl-error__kicker { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fl-accent-ink); font-weight: 600; }
.fl-error__title { font-family: var(--fl-serif); font-size: 26px; line-height: 1.1; }
.fl-error__desc { color: var(--fl-ink-soft); }
.fl-error__close {
  justify-self: start;
  margin-block-start: 6px;
  padding: 11px 18px;
  min-block-size: 44px;
  border-radius: 999px;
  background: var(--fl-ink);
  color: #f7f2ea;
  cursor: pointer;
  font-weight: 500;
}

/* ===================================================== narrow players === */
/* Tablet-ish: tighter capsule, time folds into a paper tab above it */
@container fl-player (max-width: 760px) {
  .fl-skin > * {
    --fl-cap-h: 60px;
    --fl-lz: 50px;
    --fl-mag: 1.8;
  }
  .fl-rule { display: none; }
  .fl-capsule { gap: 2px; }
  .fl-btn--play { margin-inline-end: 2px; }
  .fl-time {
    position: absolute;
    inset-block-end: calc(100% + 8px);
    inset-inline-start: 22px;
    padding: 6px 11px;
    border-radius: 9px;
    font-size: 14px;
    background: linear-gradient(180deg, var(--fl-paper-hi), #f1e9de);
    box-shadow: 0 0 0 1px var(--fl-hair), 0 10px 18px -10px rgb(50 32 16 / 0.5);
  }
  .fl-badge { inset-block-end: auto; inset-block-start: var(--fl-dock-b); }
  .fl-badge__card { padding: 10px 26px 11px 16px; }
  .fl-badge__title { font-size: 18px; }
  .fl-badge__flap { inline-size: 22px; }
}
/* Phone */
@container fl-player (max-width: 480px) {
  .fl-skin > * {
    --fl-cap-h: 56px;
    --fl-lz: 44px;
    --fl-mag: 1.75;
    --fl-dock-x: 8px;
    --fl-dock-b: 8px;
  }
  .fl-capsule { padding-inline: 6px 4px; }
  .fl-seek { min-inline-size: 60px; }
  .fl-badge__meta { display: none; }
  .fl-badge__card { padding: 8px 22px 9px 14px; gap: 1px; }
  .fl-badge__title { font-size: 16px; }
  .fl-badge__paused { font-size: 12px; }
  .fl-time { inset-inline-start: 10px; font-size: 13px; padding: 5px 9px; }
  .fl-seal__ring text { display: none; }
  .fl-bubble { font-size: 14px; padding: 5px 9px 6px; }
}

/* ====================================================== reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .fl-skin *,
  .fl-skin *::before,
  .fl-skin *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  /* keep state changes as quick cross-fades instead of movement */
  .fl-dock, .fl-preview, .fl-bubble--current, .fl-volume, .fl-buffering, .fl-seal {
    transition: opacity 0.12s linear !important;
  }
  .fl-dock:not([data-visible]):not(:has(:focus-visible)) { translate: none; }
  .fl-preview, .fl-volume:is([data-starting-style], [data-ending-style]) { translate: none; }
  .fl-seek:is([data-pointing], [data-dragging]) .fl-loupe { scale: none; }
  .fl-btn:active { scale: none; }
  .fl-seal { scale: none !important; }
  .fl-badge__flap, .fl-badge__card { transform: none !important; }
  .fl-badge__card, .fl-badge__flap { opacity: 0; transition: opacity 0.12s linear !important; }
  .fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) :is(.fl-badge__card, .fl-badge__flap) { opacity: 1; }
}

/* ======================================================= forced colors === */
@media (forced-colors: active) {
  .fl-capsule, .fl-volume, .fl-bubble, .fl-badge__card, .fl-error__card { border: 1px solid CanvasText; background: Canvas; }
  .fl-btn, .fl-time, .fl-badge__title { color: CanvasText; forced-color-adjust: none; }
  .fl-btn--play { background: ButtonText; color: ButtonFace; }
  .fl-seek__track { border-block-end: 2px solid CanvasText; background: none; }
  .fl-seek__fill { background: Highlight; block-size: 4px; inset-block: auto 0; }
  .fl-loupe { border: 2px solid CanvasText; background: Canvas; }
  .fl-loupe__lens, .fl-loupe__glint, .fl-loupe__caustic { display: none; }
  .fl-skin :is(media-play-button, media-mute-button, media-fullscreen-button, media-slider-thumb):focus-visible { outline: 3px solid Highlight; }
}

/* ==========================================================================
   v2 · MOTION & INTERACTION LAYER
   Physical but brief. Nothing loops except the cover seal, the loading ring
   and the skip chevrons; everything else answers an action. All of it
   collapses to quick fades under prefers-reduced-motion (block at the end).
   ========================================================================== */

@property --fl-pos { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --fl-swell-x { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

.fl-skin {
  --fl-spring: cubic-bezier(0.34, 1.5, 0.64, 1);     /* small overshoot, icons only */
  --fl-glide: cubic-bezier(0.22, 0.8, 0.2, 1);
}

/* ---- the loupe glides to keyboard steps, clicks and film changes --------
   Video.js updates the fill every frame during playback, so the transition is
   only felt on jumps; while playing it acts as a ~0.1 s follower.            */
.fl-seek {
  --fl-swell-x: var(--fl-pos);
  transition: --fl-pos 0.45s var(--fl-glide), --fl-swell-x 0.38s var(--fl-glide);
}
.fl-seek[data-pointing]:not([data-dragging]) { --fl-swell-x: var(--media-slider-pointer); }
.fl-seek[data-dragging] { transition: --fl-pos 0.08s linear, --fl-swell-x 0.08s linear; }

/* ---- ticks swell where you look (around the loupe, or under the pointer) */
.fl-seek__swell {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask: radial-gradient(64px 26px at var(--fl-swell-x) 50%, #000 35%, transparent 100%);
          mask: radial-gradient(64px 26px at var(--fl-swell-x) 50%, #000 35%, transparent 100%);
}
.fl-seek__swell::before,
.fl-seek__swell::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--fl-ruler-swell-base) no-repeat 0 0 / 100cqw 100%;
}
.fl-seek__swell::before { inline-size: 100%; }
.fl-seek__swell::after {
  inline-size: var(--fl-pos);
  background-image: var(--fl-ruler-swell-ink);
}

/* pointer needle: where a click would land */
.fl-seek__needle {
  position: absolute;
  inset-block: 20%;
  inset-inline-start: var(--media-slider-pointer);
  z-index: 1;
  inline-size: 1.5px;
  border-radius: 2px;
  translate: -50% 0;
  background: var(--fl-accent-ink);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.fl-seek[data-pointing]:not([data-dragging]) .fl-seek__needle { opacity: 0.9; }

/* ---- the lens: centre magnification + a stronger rim = curved glass ----- */
.fl-loupe__layer { position: absolute; inset: 0; border-radius: 50%; }
.fl-loupe__layer:not(.fl-loupe__layer--rim) {
  -webkit-mask: radial-gradient(circle, #000 0 50%, transparent 74%);
          mask: radial-gradient(circle, #000 0 50%, transparent 74%);
}
.fl-loupe__layer--rim {
  -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 72%);
          mask: radial-gradient(circle, transparent 0 46%, #000 72%);
}
.fl-loupe__ruler--rim {
  --fl-mag-rim: calc(var(--fl-mag) * 1.38);
  inline-size: calc(100cqw * var(--fl-mag-rim));
  block-size: calc(var(--fl-seek-h) * var(--fl-mag-rim));
}
.fl-loupe__ruler--rim::before { background-size: calc(100cqw * var(--fl-mag-rim)) 100%; }

/* drag inertia: the glass squashes along the motion and the glint lags */
.fl-loupe__lens,
.fl-loupe__glint { transform: scale(var(--fl-sx, 1), var(--fl-sy, 1)); }
.fl-loupe__glint { background-position: var(--fl-gx, 0px) 0, 0 0, 0 0; }
.fl-loupe__caustic { translate: calc(-50% - var(--fl-gx, 0px) * 0.8) 0; opacity: 0.75; transition: opacity 0.3s; }
.fl-seek:is([data-pointing], [data-dragging]) .fl-loupe__caustic { opacity: 1; }

/* ruler prints in, left to right, when a new film loads */
.fl-seek[data-fl-print] :is(.fl-seek__track, .fl-seek__fill, .fl-seek__swell) {
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 220% 100%;
          mask-size: 220% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: fl-print 0.95s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}
@keyframes fl-print {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

/* time bubbles: lift in */
.fl-seek:is([data-pointing], [data-dragging]) .fl-preview .fl-bubble { animation: fl-lift 0.28s var(--fl-glide) both; }
@keyframes fl-lift { from { translate: -50% 4px; scale: 0.94; } to { translate: -50% 0; scale: 1; } }

/* ---- buttons --------------------------------------------------------- */
/* ink press: a terracotta ring spreads like ink in damp paper */
.fl-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.fl-btn.fl-press::after { animation: fl-ink 0.55s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes fl-ink {
  0%   { opacity: 1; box-shadow: 0 0 0 0 rgb(196 85 43 / 0.42); }
  100% { opacity: 1; box-shadow: 0 0 0 14px rgb(196 85 43 / 0); }
}
.fl-i { transition: translate 0.2s var(--fl-glide); }
@media (hover: hover) {
  .fl-btn:not(.fl-btn--play):hover .fl-i { translate: 0 -1px; }
}

/* play / pause / replay: cross-turn instead of a hard swap */
.fl-btn--play .fl-i {
  display: block;
  grid-area: 1 / 1;
  opacity: 0;
  scale: 0.5;
  rotate: -40deg;
  transition: opacity 0.16s ease, scale 0.38s var(--fl-spring), rotate 0.38s var(--fl-spring);
}
.fl-btn--play[data-paused]:not([data-ended]) .fl-i--play,
.fl-btn--play:not([data-paused]):not([data-ended]) .fl-i--pause,
.fl-btn--play[data-ended] .fl-i--replay { opacity: 1; scale: 1; rotate: 0deg; }
.fl-btn--play { transition: background-color 0.2s ease, scale 0.25s var(--fl-spring), box-shadow 0.2s ease; }
@media (hover: hover) {
  .fl-btn--play:hover { scale: 1.04; }
}
.fl-btn--play:active { scale: 0.93; }

/* mute: sound waves draw out and back in, the cross stamps on */
.fl-btn--mute :is(.fl-i__w1, .fl-i__w2, .fl-i__x) { display: inline; }
.fl-btn--mute :is(.fl-i__w1, .fl-i__w2) {
  stroke-dasharray: 12;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.32s var(--fl-glide), opacity 0.2s ease;
}
.fl-btn--mute .fl-i__w2 { transition-delay: 0.05s; }
.fl-btn--mute[data-volume-level="low"] .fl-i__w2,
.fl-btn--mute:is([data-muted], [data-volume-level="off"]) :is(.fl-i__w1, .fl-i__w2) { stroke-dashoffset: 12; opacity: 0; }
.fl-btn--mute .fl-i__x {
  opacity: 0;
  scale: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.18s ease, scale 0.34s var(--fl-spring);
}
.fl-btn--mute:is([data-muted], [data-volume-level="off"]) .fl-i__x { opacity: 1; scale: 1; }

/* fullscreen: crop marks open out on hover (close in when exiting) */
.fl-btn--fs .c { transition: translate 0.3s var(--fl-spring); }
@media (hover: hover) {
  .fl-btn--fs:hover .fl-i--enter .c--tl, .fl-btn--fs:hover .fl-i--exit .c--br { translate: -1.5px -1.5px; }
  .fl-btn--fs:hover .fl-i--enter .c--tr, .fl-btn--fs:hover .fl-i--exit .c--bl { translate: 1.5px -1.5px; }
  .fl-btn--fs:hover .fl-i--enter .c--br, .fl-btn--fs:hover .fl-i--exit .c--tl { translate: 1.5px 1.5px; }
  .fl-btn--fs:hover .fl-i--enter .c--bl, .fl-btn--fs:hover .fl-i--exit .c--tr { translate: -1.5px 1.5px; }
}

/* volume slip: grows out of the button */
.fl-volume { transform-origin: 50% 100%; transition: opacity 0.2s ease, translate 0.32s var(--fl-glide), scale 0.32s var(--fl-glide); }
.fl-volume:is([data-starting-style], [data-ending-style]) { scale: 0.92; }
.fl-volume__thumb { transition: scale 0.2s var(--fl-spring); }
.fl-volume__slider:is([data-pointing], [data-dragging]) .fl-volume__thumb { scale: 1.12; }

/* capsule hides by sinking a little and flattening its shadow */
.fl-capsule { transition: box-shadow 0.4s ease; }
.fl-dock:not([data-visible]):not(:has(:focus-visible)) .fl-capsule {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), 0 0 0 1px var(--fl-hair), 0 6px 14px -10px rgb(50 32 16 / 0.3);
}

/* ---- cover seal: settles in, lifts away on first play ----------------- */
.fl-seal { transition: opacity 0.45s ease, scale 0.7s var(--fl-glide), filter 0.5s ease; }
.fl-skin:not([data-fl-fresh]) .fl-seal { scale: 1.1; filter: blur(4px); }
.fl-seal__btn { transition: scale 0.3s var(--fl-spring); }
@media (hover: hover) {
  .fl-skin[data-fl-fresh]:hover .fl-seal__btn { scale: 1.06; }
}
.fl-skin[data-fl-fresh]:active .fl-seal__btn { scale: 0.94; }

/* ---- origami badge: flap, then card, with a crease shadow that lifts ---- */
.fl-badge__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(70 45 25 / 0.45), rgb(70 45 25 / 0.05) 60%, rgb(70 45 25 / 0));
  opacity: 1;
  transition: opacity 0.5s ease 0.35s;
}
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge__card { animation: fl-unfold 0.85s var(--fl-glide) 0.1s both; }
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge__card::after { opacity: 0; }
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge__flap { animation: fl-flap 0.55s var(--fl-glide) both; }
@keyframes fl-unfold {
  0%   { transform: rotateY(96deg); opacity: 0; }
  12%  { opacity: 1; }
  70%  { transform: rotateY(-7deg); }
  100% { transform: rotateY(0deg); opacity: 1; }
}
@keyframes fl-flap {
  from { transform: rotateY(-180deg); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: rotateY(0deg); opacity: 1; }
}

/* ---- feedback stamps (keyboard / tap actions) ------------------------- */
.fl-stamp, .fl-skip, .fl-level {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: none;
  color: var(--fl-ink);
}
.fl-stamp:is([data-open], [data-ending-style]),
.fl-skip:is([data-open], [data-ending-style]),
.fl-level:is([data-open], [data-ending-style]) { display: flex; }

/* play/pause stamp in the middle of the picture */
.fl-stamp {
  inset: 0 0 calc(var(--fl-cap-h) + var(--fl-dock-b)) 0;
  align-items: center;
  justify-content: center;
}
.fl-stamp__disc {
  display: grid;
  place-items: center;
  inline-size: clamp(60px, 10cqw, 92px);
  block-size: clamp(60px, 10cqw, 92px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, var(--fl-paper-hi), var(--fl-paper-lo));
  box-shadow: 0 0 0 1px var(--fl-hair), 0 16px 30px -14px rgb(20 12 6 / 0.6);
  transition: opacity 0.35s ease, scale 0.45s var(--fl-glide);
}
.fl-stamp[data-starting-style] .fl-stamp__disc { opacity: 0; scale: 0.7; }
.fl-stamp[data-ending-style] .fl-stamp__disc { opacity: 0; scale: 1.18; }
.fl-stamp__i { grid-area: 1 / 1; inline-size: 40%; fill: var(--fl-ink); display: none; }
.fl-stamp[data-status="play"] .fl-stamp__i--play { display: block; translate: 4% 0; }
.fl-stamp[data-status="pause"] .fl-stamp__i--pause { display: block; }
.fl-skin[data-fl-fresh] .fl-stamp { display: none; }

/* skip chips at the sides */
.fl-skip {
  inset-block-start: 42%;
  translate: 0 -50%;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--fl-paper-hi), var(--fl-paper-lo));
  box-shadow: 0 0 0 1px var(--fl-hair), 0 14px 26px -12px rgb(20 12 6 / 0.6);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.25s ease, translate 0.35s var(--fl-glide);
}
.fl-skip[data-direction="backward"] { inset-inline-start: 7%; flex-direction: row-reverse; padding: 10px 12px 10px 16px; }
.fl-skip[data-direction="forward"],
.fl-skip:not([data-direction]) { inset-inline-end: 7%; }
.fl-skip[data-direction="backward"]:is([data-starting-style], [data-ending-style]) { opacity: 0; translate: 10px -50%; }
.fl-skip:not([data-direction="backward"]):is([data-starting-style], [data-ending-style]) { opacity: 0; translate: -10px -50%; }
.fl-skip[data-direction="forward"] .fl-skip__value::before { content: "+"; }
.fl-skip[data-direction="backward"] .fl-skip__value::before { content: "\2212"; }
.fl-skip:not([data-direction]) .fl-skip__chev { display: none; }
.fl-skip__chev { display: flex; }
.fl-skip__chev i {
  inline-size: 7px;
  block-size: 12px;
  margin-inline-end: -1px;
  background: var(--fl-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
  animation: fl-chev 0.7s ease-in-out infinite;
}
.fl-skip__chev i:nth-child(2) { animation-delay: 0.12s; }
.fl-skip__chev i:nth-child(3) { animation-delay: 0.24s; }
.fl-skip[data-direction="backward"] .fl-skip__chev { scale: -1 1; }
@keyframes fl-chev { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* volume chip at the top */
.fl-level {
  inset-block-start: var(--fl-dock-b);
  inset-inline-start: 50%;
  translate: -50% 0;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--fl-paper-hi), var(--fl-paper-lo));
  box-shadow: 0 0 0 1px var(--fl-hair), 0 14px 26px -12px rgb(20 12 6 / 0.6);
  transition: opacity 0.25s ease, translate 0.35s var(--fl-glide);
}
.fl-level:is([data-starting-style], [data-ending-style]) { opacity: 0; translate: -50% -8px; }
.fl-level__label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fl-ink-soft); }
.fl-level__fill { display: flex; align-items: center; gap: 12px; }
.fl-level__fill::before {
  content: "";
  inline-size: 110px;
  block-size: 12px;
  background:
    linear-gradient(90deg, var(--fl-accent) 0 var(--media-volume-fill, 0%), transparent 0) 0 50% / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgb(90 66 44 / 0.45) 0 1px, transparent 1px 10%) 0 0 / 100% 100% no-repeat;
}
.fl-level__value { min-inline-size: 3.2em; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.fl-level[data-level="off"] .fl-level__value { color: var(--fl-accent-ink); }
.fl-level[data-max] { animation: fl-bump-r 0.3s var(--fl-glide); }
.fl-level[data-min] { animation: fl-bump-l 0.3s var(--fl-glide); }
@keyframes fl-bump-r { 35% { translate: calc(-50% + 4px) 0; } }
@keyframes fl-bump-l { 35% { translate: calc(-50% - 4px) 0; } }

@container fl-player (max-width: 480px) {
  .fl-skip { font-size: 13px; padding: 8px 12px 8px 10px; }
  .fl-level__fill::before { inline-size: 72px; }
}

/* ---- reduced motion: the whole layer becomes quick fades -------------- */
@media (prefers-reduced-motion: reduce) {
  .fl-seek, .fl-seek[data-dragging] { transition: none !important; }
  .fl-seek[data-fl-print] :is(.fl-seek__track, .fl-seek__fill, .fl-seek__swell) { -webkit-mask-image: none; mask-image: none; }
  .fl-btn--play .fl-i { scale: 1 !important; rotate: none !important; }
  .fl-btn--mute .fl-i__x { scale: 1 !important; }
  .fl-btn--fs .c { translate: none !important; }
  .fl-skin:not([data-fl-fresh]) .fl-seal { scale: none; filter: none; }
  .fl-stamp__disc { scale: none !important; }
  .fl-skip:is([data-starting-style], [data-ending-style]) { translate: 0 -50% !important; }
  .fl-level:is([data-starting-style], [data-ending-style]) { translate: -50% 0 !important; }
  .fl-loupe__lens, .fl-loupe__glint { transform: none !important; }
  .fl-badge__card::after { display: none; }
}

/* ==========================================================================
   v3 · REVIEW ROUND
   Must-fixes (dark time bubble, inline volume drawer, dividers) and the
   material upgrades (canvas dock-wave ruler with a refracting glass loupe,
   recessed groove, jade top-light, 3D origami tag).
   ========================================================================== */

/* ---- time bubbles: solid charcoal, readable over any frame -------------- */
.fl-bubble {
  background: #262320;
  color: #f5f1e8;
  box-shadow: 0 0 0 1px rgb(245 241 232 / 0.10), 0 6px 16px rgb(0 0 0 / 0.28);
}
.fl-bubble::after { background: #262320; }

/* ---- dividers: 1 × 18 px warm grey hairlines -------------------------- */
.fl-rule {
  inline-size: 1px;
  block-size: 18px;
  margin-inline: 6px;
  background: rgb(38 35 32 / 0.12);
}
@container fl-player (max-width: 760px) {
  .fl-rule { display: block; margin-inline: 3px; }
}
@container fl-player (max-width: 480px) {
  .fl-rule { display: none; }
}

/* ---- capsule: jade top-light ------------------------------------------ */
.fl-capsule {
  box-shadow:
    inset 0 1.5px 1px rgb(255 255 255 / 0.95),
    inset 0 -2px 3px rgb(120 92 64 / 0.10),
    0 0 0 1px var(--fl-hair),
    0 2px 3px rgb(60 40 20 / 0.10),
    0 22px 40px -14px rgb(50 32 16 / 0.45);
}

/* ---- the ruler is now a canvas (dock wave); old SVG layers retire ------- */
.fl-seek__track,
.fl-seek__fill { background: none; }
.fl-seek__swell { display: none; }
.fl-seek__groove {
  position: absolute;
  inset: 7px -12px;
  border-radius: 999px;
  pointer-events: none;
  background: rgb(38 35 32 / 0.035);
  box-shadow: inset 0 1.5px 3px rgb(38 35 32 / 0.08), 0 1px 0 rgb(255 255 255 / 0.75);
}
.fl-seek__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}
.fl-seek__buffer { z-index: 0; }
.fl-seek[data-fl-print] .fl-seek__canvas {
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 220% 100%;
          mask-size: 220% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: fl-print 0.95s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}

/* ---- loupe: refracting glass sphere ----------------------------------- */
.fl-loupe { rotate: var(--fl-tilt, 0deg); }
.fl-loupe__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.fl-loupe__glint {
  box-shadow:
    inset 1.5px 0 2px rgb(215 85 45 / 0.35),      /* chromatic dispersion: warm edge */
    inset -1.5px 0 2px rgb(70 140 230 / 0.22),    /* …and cool edge */
    inset 0 2px 3px rgb(255 255 255 / 0.9),
    inset 0 -8px 12px -4px rgb(196 85 43 / 0.16),
    0 1px 1px rgb(60 40 20 / 0.18),
    0 8px 14px -6px rgb(60 36 16 / 0.45);
  background:
    radial-gradient(ellipse 60% 20% at 50% 90%, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 70%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0) 60%, rgb(150 112 76 / 0.20) 80%, rgb(255 255 255 / 0.70) 93%, rgb(120 88 58 / 0.45) 100%);
}
.fl-loupe__crescent {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  fill: #fff;
  opacity: 0.95;
  pointer-events: none;
  translate: var(--fl-gx, 0px) 0;
  filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.9));
}
/* time bubble stretches and leans with a fast drag */
.fl-seek[data-dragging] .fl-preview .fl-bubble {
  transform: rotate(calc(var(--fl-tilt, 0deg) * 0.8)) scaleX(var(--fl-sx, 1));
  transform-origin: 50% 120%;
}

/* ---- volume: an inline drawer that slides out of the speaker ----------- */
.fl-vol {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
}
.fl-vol__drawer {
  display: block;
  inline-size: 0;
  clip-path: inset(-16px 0 -16px 0);   /* clip sideways while it slides; let shadows and focus rings breathe vertically */
  opacity: 0;
  visibility: hidden;
  transition: inline-size 0.38s var(--fl-glide), opacity 0.2s ease, visibility 0s linear 0.38s;
}
.fl-vol:is(:hover, :focus-within) .fl-vol__drawer,
.fl-vol[data-fl-open] .fl-vol__drawer {
  inline-size: 118px;
  opacity: 1;
  visibility: visible;
  transition: inline-size 0.38s var(--fl-glide), opacity 0.25s ease 0.06s, visibility 0s;
}
.fl-vol__slider {
  position: relative;
  display: block;
  inline-size: 86px;
  block-size: 44px;
  margin-inline: 14px 18px;
  cursor: pointer;
  touch-action: none;
}
.fl-vol__track {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  display: block;
  block-size: 4px;
  translate: 0 -50%;
  border-radius: 4px;
  background: rgb(38 35 32 / 0.12);
  box-shadow: inset 0 1px 1.5px rgb(38 35 32 / 0.12);
}
.fl-vol__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  inline-size: var(--media-slider-fill);
  border-radius: inherit;
  background: linear-gradient(90deg, #d8794f, var(--fl-accent));
}
.fl-vol__thumb {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--media-slider-fill);
  display: block;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(ellipse 40% 26% at 36% 26%, #fff, rgb(255 255 255 / 0) 70%),
    radial-gradient(circle at 50% 60%, #fffaf3, #eadfcf 70%, #c9b49b 100%);
  box-shadow: 0 0 0 1px rgb(110 85 60 / 0.25), 0 3px 6px -2px rgb(60 36 16 / 0.5), inset 0 -3px 5px rgb(196 85 43 / 0.18);
  transition: scale 0.2s var(--fl-spring);
}
.fl-vol__slider:is([data-pointing], [data-dragging]) .fl-vol__thumb { scale: 1.15; }
/* wide touch players: keep the drawer open (no hover there) */
@media (hover: none) {
  @container fl-player (min-width: 900px) {
    .fl-vol__drawer { inline-size: 118px; opacity: 1; visibility: visible; }
  }
}
@container fl-player (max-width: 480px) {
  .fl-vol:is(:hover, :focus-within) .fl-vol__drawer,
  .fl-vol[data-fl-open] .fl-vol__drawer { inline-size: 96px; }
  .fl-vol__slider { inline-size: 66px; margin-inline: 12px 18px; }
}

/* ---- origami tag: real 3D fold from the terracotta corner -------------- */
.fl-badge {
  transform-origin: left bottom;
  transform: perspective(600px) rotateY(-65deg) rotateX(15deg);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.55, 0, 0.7, 0.4), opacity 0.25s ease 0.2s;
}
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge {
  transform: perspective(600px) rotateY(0deg) rotateX(0deg);
  opacity: 1;
  transition: transform 0.8s var(--fl-glide) 0.05s, opacity 0.2s ease 0.05s;
}
/* the two parts now travel together with the tag */
.fl-badge__flap,
.fl-badge__card,
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) :is(.fl-badge__flap, .fl-badge__card) {
  transform: none;
  opacity: 1;
  animation: none;
}
.fl-skin:has(.fl-buffering[data-visible]) .fl-badge { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .fl-badge,
  .fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge { transform: none !important; }
  .fl-skin:not(:has(.fl-btn--play[data-paused])) .fl-badge,
  .fl-skin[data-fl-fresh] .fl-badge { opacity: 0; }
  .fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge { opacity: 1; }
  .fl-loupe { rotate: none; }
  .fl-loupe__crescent { translate: none; }
  .fl-seek[data-fl-print] .fl-seek__canvas { -webkit-mask-image: none; mask-image: none; }
  .fl-vol__drawer { transition: opacity 0.12s linear !important; }
}
@media (forced-colors: active) {
  .fl-seek__canvas, .fl-loupe__canvas, .fl-loupe__crescent, .fl-seek__groove { display: none; }
  .fl-vol__track { background: CanvasText; }
  .fl-vol__fill { background: Highlight; }
  .fl-vol__thumb { background: Canvas; border: 2px solid CanvasText; }
  .fl-bubble { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}

/* ---- v3.1 · origami tag text stays solid ------------------------------
   Once open, the tag settles to a flat (2D) layer so its text is rasterised
   crisply; the crease line and shadow sit below the words. */
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge { transform: none; }
.fl-badge__card::before,
.fl-badge__card::after { z-index: 1; }
.fl-badge__title,
.fl-badge__meta,
.fl-badge__paused {
  position: relative;
  z-index: 5;
  mix-blend-mode: normal;
  transform: translateZ(2px);
}
.fl-badge__title { color: #262320; }

/* ==========================================================================
   v4 · VIEWFINDER + LIT CAPSULE
   ========================================================================== */
.fl-skin {
  --fl-globe: 96px;
  --fl-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@container fl-player (max-width: 760px) { .fl-skin > * { --fl-globe: 80px; } }
@container fl-player (max-width: 480px) { .fl-skin > * { --fl-globe: 66px; } }

/* idea 1 · the loupe swells into a viewfinder globe above the ruler */
.fl-finder {
  position: absolute;
  z-index: 3;
  inset-inline-start: var(--fl-swell-x);
  inset-block-end: calc(50% + var(--fl-lz) / 2 - 4px);
  inline-size: var(--fl-globe);
  block-size: var(--fl-globe);
  margin-inline-start: calc(var(--fl-globe) / -2);
  border-radius: 50%;
  pointer-events: none;
  background: #1d1a17;
  box-shadow:
    0 0 0 3px #f6efe4,
    0 0 0 4px rgb(110 85 60 / 0.3),
    0 16px 28px -10px rgb(30 18 8 / 0.6);
  opacity: 0;
  /* collapsed: a small glass ball sitting in the groove */
  transform: translateY(calc(var(--fl-globe) / 2 + var(--fl-lz) / 2 - 4px)) scale(0.6);
  transition: transform 0.34s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.14s linear 0.2s;
}
.fl-seek:is([data-pointing], [data-dragging]) .fl-finder {
  opacity: 1;
  transform: none;
  transition: transform 0.46s var(--fl-spring), opacity 0.12s linear;
}
.fl-finder__cv {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
}
.fl-finder::after {          /* the glass: window highlight, rim, red/blue dispersion */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 34% 20% at 33% 19%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 70%),
    radial-gradient(circle, rgb(255 255 255 / 0) 64%, rgb(255 255 255 / 0.10) 86%, rgb(0 0 0 / 0.28) 100%);
  box-shadow:
    inset 2px 0 3px rgb(215 85 45 / 0.5),
    inset -2px 0 3px rgb(70 140 230 / 0.4),
    inset 0 2px 4px rgb(255 255 255 / 0.35);
}
.fl-finder__frm {
  position: absolute;
  z-index: 1;
  inset-inline-start: 50%;
  inset-block-end: 11%;
  translate: -50% 0;
  padding: 3px 6px 2px;
  border-radius: 6px;
  background: rgb(20 16 12 / 0.66);
  color: #f6efe4;
  font: 500 9.5px/1 var(--fl-mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@container fl-player (max-width: 480px) { .fl-finder__frm { font-size: 8px; padding: 2px 4px; } }
/* the time bubble rides above the globe */
.fl-preview { inset-block-end: calc(50% + var(--fl-lz) / 2 - 4px + var(--fl-globe) + 4px); }

/* idea 4 · darkroom: the capsule becomes a lit jade bar */
.fl-capsule { transition: box-shadow 0.6s ease; }
.fl-skin[data-fl-glow] .fl-capsule {
  background:
    radial-gradient(120% 160% at 50% -30%, rgb(255 251 240 / 0.95), rgb(255 251 240 / 0) 60%),
    linear-gradient(180deg, #fbf2e2, #efdfc5);
  box-shadow:
    inset 0 1.5px 1px rgb(255 255 255 / 0.95),
    inset 0 0 18px rgb(255 205 150 / 0.65),
    0 0 0 1px rgb(255 214 170 / 0.45),
    0 0 26px 2px rgb(255 176 108 / 0.38),
    0 18px 40px -16px rgb(0 0 0 / 0.75);
}
.fl-skin[data-fl-glow] .fl-dock:not([data-visible]):not(:has(:focus-visible)) .fl-capsule {
  box-shadow: inset 0 1.5px 1px rgb(255 255 255 / 0.95), inset 0 0 18px rgb(255 205 150 / 0.65), 0 0 0 1px rgb(255 214 170 / 0.45), 0 0 18px rgb(255 176 108 / 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .fl-finder, .fl-seek:is([data-pointing], [data-dragging]) .fl-finder { transform: none !important; }
}
@media (forced-colors: active) {
  .fl-finder { border: 2px solid CanvasText; }
  .fl-finder::after { display: none; }
}

/* ---- v4.2 · origami tag text: solid on every GPU -----------------------
   The settled tag keeps no 3D context (no perspective, no translateZ), so the
   text is rasterised with normal sub-pixel AA instead of on a separate 3D
   layer, where this hairline serif could look hollow. A same-colour stroke
   fills the thin strokes out evenly from left to right. */
.fl-skin:not([data-fl-fresh]):has(.fl-btn--play[data-paused]) .fl-badge { perspective: none; }
.fl-badge__title,
.fl-badge__meta,
.fl-badge__paused { transform: none; will-change: auto; text-shadow: none; }
.fl-badge__title {
  color: #262320;
  -webkit-text-fill-color: #262320;
  -webkit-text-stroke: 0.4px #262320;
  paint-order: stroke fill;
  opacity: 1;
}
.fl-badge__card::after { display: none; }   /* the crease shadow, the only layer over the text */