/*
  Glass tray: a frosted sheet that slides up over the page and shows another page inside it
  (opened with ?embed). Used on the homepage (H opens the Profile) and on the Profile page
  (projects). Trays inside trays stack naturally, each with its own Close tab on top.
*/
:root { --tray-gap: max(5svh, 50px); --tray-ink: #171716; --tray-accent: var(--theo-pink); }

.glass-tray { position: fixed; inset: var(--tray-gap) 0 0; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--tray-ink); }
/* style.css blurs the backdrop behind any dialog; the tray leaves the page sharp behind it. */
.glass-tray::backdrop { background: #0b0b0a00; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .5s ease; }
/* No dimming by default, so the page behind stays light. Pages that want it add data-tray-dim to <html>. */
.glass-tray.is-dim.is-open::backdrop { background: #0b0b0a59; }

.tray-sheet { position: absolute; inset: 0; border-radius: 22px 22px 0 0; overflow: hidden; border-top: 1px solid #ffffffb3; background: linear-gradient(125deg, #ffffffc2, #e9ebefa6 55%, #ffffffc2); box-shadow: 0 -12px 40px #00000026; transform: translateY(102%); transition: transform .75s cubic-bezier(.2, .85, .2, 1); }
.glass-tray.is-open .tray-sheet { transform: none; }
.tray-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .4s ease .2s; }
.tray-frame.is-loaded { opacity: 1; }
.tray-video { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; background: transparent; }

/* Sliding in from the right instead of up from the bottom: the gap moves to the left edge and
   the Close tab sits centred on that edge. */
.glass-tray.is-right { inset: 0 0 0 var(--tray-gap); }
.glass-tray.is-right .tray-sheet { border-radius: 22px 0 0 22px; border-top: 0; border-left: 1px solid #ffffffb3; box-shadow: -12px 0 40px #00000026; transform: translateX(102%); }
.glass-tray.is-right.is-open .tray-sheet { transform: none; }
.glass-tray.is-right .tray-close { top: 50%; left: 0; transform: translate(100svw, -50%); }
.glass-tray.is-right.is-open .tray-close { transform: translate(-50%, -50%); }

/* Half-size floating player: a glass panel centred on the page, sized to the film, with the page
   dimmed behind it. It fades up rather than sliding, since it has no edge to slide from. */
.glass-tray.is-half { inset: 0; margin: auto; width: min(92vw, max(52vw, 600px)); height: auto; aspect-ratio: 16 / 9; max-height: 80svh; }
.glass-tray.is-half .tray-sheet { border-radius: 18px; border: 1px solid #ffffffb3; box-shadow: 0 24px 70px #00000059; background: #0b0b0a; opacity: 0; transform: translateY(18px) scale(.97); transition: transform .5s cubic-bezier(.2, .85, .2, 1), opacity .3s ease; }
.glass-tray.is-half.is-open .tray-sheet { opacity: 1; transform: none; }
.glass-tray.is-half.is-open::backdrop { background: #0b0b0a8c; }

.tray-close { position: absolute; z-index: 2; top: 0; left: 50%; transform: translate(-50%, 100svh); display: flex; gap: 10px; align-items: center; padding: 11px 20px 10px; border: 1px solid #ffffffcc; border-radius: 999px; background: #ffffffd9; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--tray-ink); font: 10px/1 akzidenz-grotesk-next-pro, "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 30px #0003; transition: transform .75s cubic-bezier(.2, .85, .2, 1), background .2s, color .2s; }
.glass-tray.is-open .tray-close { transform: translate(-50%, -50%); }
.tray-close span { font-size: 16px; line-height: .6; }
.tray-close:hover, .tray-close:focus-visible { background: var(--tray-ink); color: #fff; }
.tray-close:focus { outline: none; }
.tray-close:focus-visible { outline: 2px solid var(--tray-accent); outline-offset: 3px; }

html.tray-open { overflow: hidden; }

@media (max-width: 700px) {
  :root { --tray-gap: max(4.5svh, 48px); }
  .tray-sheet { border-radius: 14px 14px 0 0; }
  .glass-tray.is-right .tray-sheet { border-radius: 14px 0 0 14px; }
  .glass-tray.is-half .tray-sheet { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tray-sheet, .tray-close, .tray-frame, .glass-tray::backdrop { transition: none; }
}