/* Glassmorphism + ambient lighting + cinematic touch glow. Loaded last. Colours --amb1/--amb2 are set from the page's own images by glass.js. */
@property --amb1 { syntax: "<color>"; inherits: true; initial-value: rgba(21, 101, 216, .35); }
@property --amb2 { syntax: "<color>"; inherits: true; initial-value: rgba(244, 185, 66, .28); }
:root { --g-fill: rgba(255, 255, 255, .58); --g-fill-2: rgba(255, 255, 255, .4); --g-edge: rgba(255, 255, 255, .85); --g-edge-lo: rgba(21, 101, 216, .14); --g-glow: rgba(21, 101, 216, .16); --g-blur: 16px; }
html[data-theme="dark"] { --g-fill: rgba(22, 34, 62, .52); --g-fill-2: rgba(22, 34, 62, .36); --g-edge: rgba(160, 200, 255, .30); --g-edge-lo: rgba(91, 152, 255, .08); --g-glow: rgba(91, 152, 255, .22); }
@view-transition { navigation: auto; }

/* Ambient light: two drifting colour orbs behind everything */
body::before { content: ""; position: fixed; inset: -20% -10% auto; height: 90vh; z-index: -1; pointer-events: none; filter: blur(30px); opacity: .9;
  background: radial-gradient(40% 50% at 20% 30%, var(--amb1), transparent 70%), radial-gradient(38% 45% at 80% 20%, var(--amb2), transparent 70%);
  transition: --amb1 1.4s ease, --amb2 1.4s ease; animation: ambDrift 22s ease-in-out infinite alternate; }
html[data-theme="dark"] body::before { opacity: .75; }
@keyframes ambDrift { to { transform: translate3d(4%, 6%, 0) scale(1.08); } }

/* Glass surfaces */
.card, .tpick, .s-card, .ticket, .filter-bar, .qs-box, .composer, .caught-up {
  background-color: var(--g-fill);
  background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, -40%), var(--g-glow), transparent 70%), linear-gradient(135deg, var(--g-fill-2), transparent 60%);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.5); backdrop-filter: blur(var(--g-blur)) saturate(1.5);
  border: 1px solid var(--g-edge-lo); box-shadow: inset 0 1px 0 var(--g-edge), 0 14px 34px -18px rgba(10, 30, 60, .35);
}
html[data-theme="dark"] .card, html[data-theme="dark"] .tpick, html[data-theme="dark"] .s-card, html[data-theme="dark"] .ticket { box-shadow: inset 0 1px 0 var(--g-edge), 0 18px 40px -20px rgba(0, 0, 0, .85); }
.card.glow-on, .tpick.glow-on, .s-card.glow-on, .ticket.glow-on { border-color: var(--g-edge); }
/* Menus inside the header stay solid: the header's own backdrop-filter makes it the backdrop root,
   so a glass menu inside it cannot blur the page and the content below shows through the items. */
.site-header .dropdown-menu { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header { background: color-mix(in srgb, var(--glass) 70%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); border-bottom: 1px solid var(--g-edge-lo); }
.btn-primary { background-image: linear-gradient(135deg, var(--accent-2, #4a8df0), var(--accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 26px -10px var(--amb1, rgba(21, 101, 216, .6)); }
.btn-ghost { background: var(--g-fill-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--g-edge-lo); }
.btn:active, .tpick:active, .s-card:active { transform: scale(.97); }
.chip { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.story-ring, .hl-ring { box-shadow: 0 0 18px -2px var(--amb1), 0 0 0 1px var(--g-edge-lo); }
.hl-ring { background: var(--g-fill); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

@media (max-width: 960px) {
  .hub-main .post.card { background: none; box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .post-actions { padding: .15rem 0; }
  .like.on svg { filter: drop-shadow(0 0 8px rgba(239, 63, 91, .7)); }
  .prof-btns .btn, .booth-actions .btn { backdrop-filter: blur(10px); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; transition: none; } @view-transition { navigation: none; } }
@media (prefers-reduced-transparency: reduce) { .card, .tpick, .s-card, .ticket, .site-header, .tabbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: var(--surface) !important; } body::before { display: none; } }
html[data-theme="dark"] .by-match { background: var(--g-fill); color: var(--ink); border-color: var(--g-edge-lo); }
html[data-theme="dark"] .by-match a { color: var(--accent-2); }

/* Readable text over the glass: a deeper muted tone in light mode, a deeper primary gradient in dark mode */
:root:not([data-theme="dark"]) { --muted: #56647b; }
html[data-theme="dark"] .btn-primary { background-color: #1f56c4; background-image: linear-gradient(135deg, #2c6ad6, #1f56c4); color: #fff; }
html[data-theme="dark"] .cat-list a.active .num { background: rgba(10, 17, 31, .15); }