/* ============================================================
   MEDIA — the "memory footage" treatment.

   Photographs and clips shown inside the brain should look like
   they are being remembered, not displayed: no hard rectangle,
   edges dissolving into the dark, a little grain so they share
   texture with the particle field around them.

   Three layers do the work:
     1. a feathered radial mask on the media itself, so the edge
        fades to nothing rather than stopping
     2. an inner vignette for depth
     3. a fine grain, dialled right down

   Everything degrades gracefully: without mask-image support you
   get a plain framed image, which is fine.
   ============================================================ */

.mem{margin:0;position:relative}
.mem .frame{
  position:relative;overflow:hidden;width:100%;height:100%;
  background:radial-gradient(120% 130% at 30% 20%,rgba(90,214,255,.07),transparent 62%);
}

/* the feather itself — an ellipse that is solid in the middle and
   gone well before the corners, which is what kills the rectangle */
.mem .mem-el{
  display:block;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(ellipse 84% 82% at 50% 47%,
    #000 34%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.42) 76%, transparent 93%);
  mask-image:radial-gradient(ellipse 84% 82% at 50% 47%,
    #000 34%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.42) 76%, transparent 93%);
  filter:contrast(1.05) saturate(.92) brightness(.97);
}
/* plates are already drawn on black, so they only want the softest edge */
.mem.is-plate .mem-el{
  -webkit-mask-image:radial-gradient(ellipse 96% 94% at 50% 50%,#000 72%,transparent 100%);
  mask-image:radial-gradient(ellipse 96% 94% at 50% 50%,#000 72%,transparent 100%);
  filter:none;
}

/* Inner vignette only — the darkening that gives the frame depth. */
.mem .grain{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 78% at 50% 47%,
    transparent 52%, rgba(2,5,10,.42) 84%, rgba(2,5,10,.86) 100%);
}
/* Grain sits on its own layer at a low opacity. It has to stay well under
   ~10% or it stops being texture and starts being a grey veil over the
   photograph. */
.mem .grain::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:.05;   /* plain alpha: blend modes force extra compositor layers,
                    and at this strength the difference is invisible */
}

/* a faint bloom leaking out of the frame, as if the footage is lit */
.mem::before{
  content:"";position:absolute;inset:-14%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 60% 58% at 50% 50%,
    color-mix(in srgb,var(--accent,#5ad6ff) 26%,transparent),transparent 72%);
  opacity:.5;filter:blur(18px);
}

.mem figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:9px 12px;
  font-family:var(--disp);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#c3d3dd;background:linear-gradient(0deg,rgba(2,6,11,.86),transparent);
  pointer-events:none;
}
.mem.empty .frame{
  display:grid;place-items:center;text-align:center;padding:10px;
  border:1px solid var(--hair);color:#33475a;
}
.mem.empty::before{display:none}

/* ---- sizes ---- */
.mem.hero{width:100%;aspect-ratio:16/9;margin-bottom:24px}
.mem.wide{width:100%;aspect-ratio:21/9;margin-bottom:24px}
.mem.shot{aspect-ratio:4/3}

@media (prefers-reduced-motion:reduce){
  .mem video.mem-el{animation:none}
}

/* ---- portrait sources ----
   Every frame above is landscape with object-fit:cover, which guts a
   phone photograph — a person on a ridge becomes a band of their torso.
   `tall: true` on the entry swaps the frame to a shape the picture can
   actually live in, and `pos` moves the crop off centre when the subject
   is not. */
.mem.hero.tall{aspect-ratio:1/1}
.mem.wide.tall{aspect-ratio:4/3}
.mem.shot.tall{aspect-ratio:3/4}
.mem .mem-el{object-position:var(--pos,50% 50%)}
.item-media .mem.tall{aspect-ratio:3/4}