/* Reusable glass portal. All edges are CSS, with no frame image or canvas. */
.feed-source-control { padding-top:24px; }
.media-missing { height:100%; display:grid; place-items:center; padding:32px; text-align:center; color:var(--muted); }
.glass-post .media video { width:100%; height:100%; object-fit:contain; background:#090b10; position:relative; z-index:1; }
.instagram-link { display:inline-block; padding:10px 16px; margin-top:16px; border:1px solid; border-radius:999px; }
:root {
  --portal-pink: 255, 137, 213;
  --portal-blue: 130, 216, 255;
  --portal-radius: 32px;
  --portal-rim: 7px;
}

body {
  background:
    radial-gradient(ellipse at 8% 12%, rgba(var(--portal-blue), .065), transparent 45%),
    radial-gradient(ellipse at 94% 35%, rgba(var(--portal-pink), .075), transparent 48%),
    var(--bg);
}

.feed-grid { gap: 42px 36px; }

.glass-post {
  position: relative;
  isolation: isolate;
  padding: 11px;
  border: 1px solid rgba(232, 219, 255, .5);
  border-radius: var(--portal-radius);
  background:
    linear-gradient(145deg, rgba(224, 220, 255, .14), transparent 32%, rgba(var(--portal-pink), .06) 72%, rgba(var(--portal-blue), .12)),
    rgba(16, 19, 29, .84);
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, .85),
    inset -1px -1px 2px rgba(var(--portal-blue), .6),
    0 0 0 1px rgba(var(--portal-pink), .15),
    -7px 1px 24px -13px rgba(var(--portal-blue), .7),
    9px 7px 28px -14px rgba(var(--portal-pink), .8),
    0 22px 50px -26px #000;
}

/* The thin, always-supported border above is also the no-mask fallback. */
.glass-post::before,
.glass-post::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

/* Mask removes the centre: the multi-colour reflection touches only the rim. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .glass-post::before {
    inset: 0;
    padding: var(--portal-rim);
    background:
      radial-gradient(ellipse at 12% 0%, #fff 0%, rgba(var(--portal-blue), .8) 5%, transparent 25%),
      radial-gradient(ellipse at 100% 44%, rgba(var(--portal-pink), .9), transparent 26%),
      radial-gradient(ellipse at 24% 100%, rgba(var(--portal-blue), .9), transparent 27%),
      linear-gradient(125deg, rgba(255,255,255,.78), rgba(var(--portal-pink),.4) 15%, rgba(255,255,255,.04) 32%, rgba(var(--portal-blue),.35) 50%, rgba(255,255,255,.08) 69%, rgba(var(--portal-pink),.8) 86%, rgba(255,255,255,.8));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

.glass-post::after {
  inset: var(--portal-rim);
  border-radius: calc(var(--portal-radius) - var(--portal-rim));
  border: 1px solid rgba(245, 226, 255, .38);
  box-shadow: 0 0 5px rgba(var(--portal-pink), .24), inset 0 1px 2px rgba(255,255,255,.22);
}

.glass-post .media {
  border-radius: calc(var(--portal-radius) - 12px) !important;
  aspect-ratio: 4 / 3.6;
  box-shadow: 0 1px 0 rgba(255,255,255,.2);
}
.glass-post:nth-child(even) .media { aspect-ratio: 4 / 4.1; }
.glass-post .media img { transform: scale(1.06); }
.glass-post .media:hover img { transform: scale(1.06); }
.glass-post .post-info {
  padding: 20px 15px 16px;
  background: transparent;
  border-radius: 0;
}
.glass-post .source {
  background: rgba(19, 20, 32, .86);
  color: #fff;
  border: 1px solid rgba(243, 222, 255, .65);
  box-shadow: 0 2px 12px #0004;
}
.glass-post .sample-label { background: rgba(19, 20, 32, .9); }
.glass-post .post-heading > .text-button { color: #f8eff9; }
.glass-post .secondary {
  border-color: rgba(239, 183, 231, .62);
  background: rgba(255, 208, 245, .045);
}
.glass-post:focus-within::after {
  border-color: #ffe0f7;
  box-shadow: 0 0 12px rgba(var(--portal-pink), .6);
}
@media (hover: hover) {
  .glass-post:hover::after {
    border-color: #ffe0f7;
    box-shadow: 0 0 12px rgba(var(--portal-pink), .6);
  }
}

/* Parallax moves only the photograph. Text, sources and hit targets stay still.
   Unsupported browsers retain the complete static glass treatment. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .glass-post { view-timeline-name: --portal-view; view-timeline-axis: block; }
    .glass-post .media img {
      animation: portal-photo-depth linear both;
      animation-timeline: --portal-view;
      animation-range: entry 0% exit 100%;
      transition: none;
    }
  }
}
@keyframes portal-photo-depth {
  from { transform: translateY(-10px) scale(1.06); }
  to { transform: translateY(10px) scale(1.06); }
}

@media (max-width: 760px) {
  :root { --portal-radius: 28px; --portal-rim: 6px; }
  .glass-post { padding: 10px; }
  .glass-post .media, .glass-post:nth-child(even) .media { aspect-ratio: 4 / 4.2; }
  .glass-post .post-info { padding: 18px 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-post .media img { animation: none; transform: none; transition: none; }
}
@media (forced-colors: active) {
  .glass-post { border: 2px solid CanvasText; box-shadow: none; }
  .glass-post::before, .glass-post::after { display: none; }
}