/* Jelly frame (frame.js): the cover's picture in two clipped layers, the solid core and the outer band. The cover's own
   fill and thin line fade out as the frame shows (--frame-amount, 0 to 1, from frame.js). */
/* --frame-cover grows the cover by that much past each side, keeping its shape, and by the same share top and bottom,
   so it stays centred and nothing below moves. It grows with the frame (--frame-amount), so a plain cover keeps its size. */
.cover.framed {
  --frame-grow: calc(var(--frame-cover, 0px) * var(--frame-amount, 1));
  width: calc(100% + 2 * var(--frame-grow));
  margin: calc(var(--frame-grow) * -338 / 619) calc(var(--frame-grow) * -1);
  background: transparent;
}

.cover.framed::after {
  opacity: calc(1 - var(--frame-amount, 1));
}

/* The badge and body in one box that the cursor effects move (frame-cursor.js), laid out as the project was. */
.project-move {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* The grey from the cursor (frame-cursor.js): it sits at its full size and corners, and a clip opens it. */
html.grey-from-cursor .project-wrap {
  inset: calc(var(--project-hover-spread) * -1);
  border-radius: var(--project-hover-radius);
}

.frame-core,
.frame-band {
  position: absolute;
  inset: 0;
}

/* Sunlight in the jelly (frame-light.js): a canvas in the core and one in the band, so the frame clips it. It runs
   64px past the cover (frame-light.js, MARGIN), so its blur never thins at the edge. frame-light.js sets its opacity,
   blur and blend from the variation's tokens. */
.frame-light {
  position: absolute;
  inset: -64px;
  width: calc(100% + 128px);
  height: calc(100% + 128px);
  pointer-events: none;
}

/* The autumn tint under the sunlight: the warm colour, then the ember, on the picture's own light and dark (Color blend),
   round the light. frame-light.js sets where (--tint-x, --tint-y), how wide (--tint-r) and how strong (--tint-a). For the
   ring it is clear to --tint-hole, warmest at --tint-in and the ember at --tint-mid; otherwise those are 0, 0 and 45%. */
.frame-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle var(--tint-r, 400px) at var(--tint-x, 50%) var(--tint-y, 50%), transparent 0%, transparent var(--tint-hole, 0%),
    var(--light-warm) var(--tint-in, 0%), var(--light-ember) var(--tint-mid, 45%), transparent 100%);
  opacity: var(--tint-a, 0);
  mix-blend-mode: color;
}