/* Premium surfaces (founder, 2026-10-18: "I want the ultra premium glow design for all the containers on the
   website"). Loaded LAST on every page by nginx (sub_filter), the same way square.css is, so these rules win
   over each page's own card styling without editing 116 files.

   THEME-AWARE ON PURPOSE. The homepage showcase panel (featured-line.css) is hardcoded dark glass; dropping
   that on every container would turn every light-theme card near-black. Everything here is built from
   --accent / --surface / --border with an explicit light-mode pass, so a white card stays white and simply
   gains a soft halo. The light rules mirror how styles.css does it: :root[data-theme="light"] plus a
   prefers-color-scheme fallback for :root:not([data-theme="dark"]).

   DELIBERATELY NOT INCLUDED: backdrop-filter and the rotating conic ring from the showcase. Dozens of blurred
   and animated layers per page would jank on mid-range Android, which is most of our students. Those stay as
   the showcase's feature treatment so it still stands out.

   SCOPE: glow only - box-shadow, the colour of an existing border, and a brighter glow on hover. Nothing that
   changes size or position, and no hover transform (these selectors include nav and chat panels, which must
   not move under the pointer).

   REVERT: delete the premium.css <link> from the sub_filter line in /etc/nginx/conf.d/tanimawoai.conf and
   reload nginx. Nothing else references this file. */

:root {
  --pg-ring: color-mix(in srgb, var(--accent, #3b82f6) 30%, var(--border, rgba(70, 140, 255, .16)));
  --pg-ring-hi: color-mix(in srgb, var(--accent, #3b82f6) 62%, transparent);
  --pg-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 2px rgba(0, 0, 0, .45),
    0 20px 44px -20px rgba(0, 0, 0, .70),
    0 0 44px -14px color-mix(in srgb, var(--accent, #3b82f6) 48%, transparent);
  --pg-shadow-hi:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 1px 2px rgba(0, 0, 0, .5),
    0 26px 56px -22px rgba(0, 0, 0, .78),
    0 0 72px -14px color-mix(in srgb, var(--accent, #3b82f6) 70%, transparent);
}
/* Light theme: keep the card light, trade the black depth for a soft tinted halo. */
:root[data-theme="light"] {
  --pg-ring: color-mix(in srgb, var(--accent, #3b82f6) 24%, var(--border, rgba(10, 14, 26, .09)));
  --pg-ring-hi: color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent);
  --pg-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(10, 14, 26, .06),
    0 16px 36px -18px rgba(10, 14, 26, .20),
    0 0 38px -16px color-mix(in srgb, var(--accent, #3b82f6) 26%, transparent);
  --pg-shadow-hi:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 2px rgba(10, 14, 26, .08),
    0 22px 46px -20px rgba(10, 14, 26, .26),
    0 0 56px -16px color-mix(in srgb, var(--accent, #3b82f6) 40%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --pg-ring: color-mix(in srgb, var(--accent, #3b82f6) 24%, var(--border, rgba(10, 14, 26, .09)));
    --pg-ring-hi: color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent);
    --pg-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 1px 2px rgba(10, 14, 26, .06),
      0 16px 36px -18px rgba(10, 14, 26, .20),
      0 0 38px -16px color-mix(in srgb, var(--accent, #3b82f6) 26%, transparent);
    --pg-shadow-hi:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 1px 2px rgba(10, 14, 26, .08),
      0 22px 46px -20px rgba(10, 14, 26, .26),
      0 0 56px -16px color-mix(in srgb, var(--accent, #3b82f6) 40%, transparent);
  }
}

/* The containers. Curated from what the pages actually use (classes ending in -card / -panel / -tile / -pane
   that appear more than once) plus every selector in styles.css that paints itself with var(--surface).
   Small pills and labels (.chat-chip, .chat-day, .badge-medal, *-label, *-top) are left out on purpose. */
:is(
  .ftx-card, .nd-panel, .mobile-panel, .register-panel, .chat-panel, .tool-card, .gm-card, .ak-card,
  .tk-panel, .lr-card, .resource-card, .at-card, .gh-card, .cmx-card, .tb2-tile, .replay-card, .lab-panel,
  .ivx-tile, .community-panel, .lq-card, .ah-tile, .sd-pane, .path-card, .dk-card, .al-card, .sp-card,
  .sd-card, .room-card, .px-card, .newsletter-panel, .badge-card, .faq-item, .qb-item, .step-card,
  .study-card, .replay-copy
) {
  box-shadow: var(--pg-shadow) !important;
  border-color: var(--pg-ring);
  transition: box-shadow .35s ease, border-color .35s ease;
}
:is(
  .ftx-card, .nd-panel, .mobile-panel, .register-panel, .chat-panel, .tool-card, .gm-card, .ak-card,
  .tk-panel, .lr-card, .resource-card, .at-card, .gh-card, .cmx-card, .tb2-tile, .replay-card, .lab-panel,
  .ivx-tile, .community-panel, .lq-card, .ah-tile, .sd-pane, .path-card, .dk-card, .al-card, .sp-card,
  .sd-card, .room-card, .px-card, .newsletter-panel, .badge-card, .faq-item, .qb-item, .step-card,
  .study-card, .replay-copy
):hover {
  box-shadow: var(--pg-shadow-hi) !important;
  border-color: var(--pg-ring-hi);
}
@media (prefers-reduced-motion: reduce) {
  :is(.ftx-card, .nd-panel, .tool-card, .path-card, .resource-card, .faq-item) { transition: none; }
}

/* ===== Motion (founder 2026-10-18: "what more cleanup and animations can you add") =====
   Everything here is a GPU-cheap transform/opacity, inside prefers-reduced-motion: no-preference, so a student
   who asks for less motion gets none of it. Deliberately NOT a button sheen: styles.css already animates
   `.nav-actions .btn-primary::after` with its own `sheen` keyframes, and a global one would fight it. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Cover photos breathe when you point at a website card. The frames already clip (.vt-card has
        overflow:hidden); .ss-thumb is position:relative with an aspect-ratio, so it needs the clip added. */
  .ss-thumb { overflow: hidden; }
  .vt-card .vt-pic, .ss-thumb img { transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
  .vt-card:hover .vt-pic, .ss-card:hover .ss-thumb img { transform: scale(1.05); }

  /* 2. A small lift on CARDS only. Nav dropdowns, chat and register panels are left out on purpose: a panel
        that moves under the pointer feels broken, and .nd-panel/.mobile-panel are menus. */
  :is(.ftx-card, .tool-card, .path-card, .resource-card, .gm-card, .ak-card, .lr-card, .at-card, .gh-card,
      .lq-card, .px-card, .sd-card, .room-card, .al-card, .sp-card, .dk-card, .badge-card, .replay-card,
      .study-card, .step-card, .ivx-tile, .ah-tile, .tb2-tile) {
    transition: box-shadow .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
  }
  :is(.ftx-card, .tool-card, .path-card, .resource-card, .gm-card, .ak-card, .lr-card, .at-card, .gh-card,
      .lq-card, .px-card, .sd-card, .room-card, .al-card, .sp-card, .dk-card, .badge-card, .replay-card,
      .study-card, .step-card, .ivx-tile, .ah-tile, .tb2-tile):hover { transform: translateY(-3px); }

  /* 3. The showcase cards rise in one after another instead of the block appearing at once. featured-line.js
        rebuilds these nodes on every rotation, so the animation replays by itself; it only sets the delay. */
  .vt-item { animation: pg-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pg-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}