/* Frame Index: premium layer. Loaded after styles.css; only adds depth, backgrounds and motion.
   Every colour comes from the theme tokens, so each theme gets its own look; the per-theme blocks
   below only choose the background artwork. All motion is switched off for people who ask for less. */

/* ------------------------------------------------------------------ tokens */
:root {
  --glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --edge: color-mix(in srgb, var(--text) 9%, transparent);   /* hairline highlight on glass */
  --orb-a: color-mix(in srgb, var(--accent) 20%, transparent);
  --orb-b: color-mix(in srgb, var(--gundam) 14%, transparent);
  --pattern: none;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --glass-strong: color-mix(in srgb, var(--surface) 90%, transparent);
  --lift: 0 1px 0 var(--edge) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.55);
}
:root[data-theme='light'], :root[data-theme='rx-78-2'] { --lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 28px -14px rgba(15, 24, 48, 0.28); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 28px -14px rgba(15, 24, 48, 0.28); } }

/* Per-theme artwork: two glows and one fine pattern. */
:root[data-theme='red-astray'] {
  --orb-a: rgba(215, 43, 50, 0.30);
  --orb-b: rgba(240, 194, 74, 0.10);
  /* faint armour-plate lines running at the Astray's diagonal */
  --pattern: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, 0.022) 46px 47px, transparent 47px 92px);
}
:root[data-theme='rx-78-2'] {
  --orb-a: rgba(31, 79, 184, 0.16);
  --orb-b: rgba(196, 18, 47, 0.10);
  --pattern: linear-gradient(90deg, transparent 0 96px, rgba(31, 79, 184, 0.05) 96px 97px), linear-gradient(0deg, transparent 0 96px, rgba(31, 79, 184, 0.05) 96px 97px);
}
:root[data-theme='zaku-ii'] {
  --orb-a: rgba(127, 207, 106, 0.18);
  --orb-b: rgba(255, 138, 160, 0.07);
  /* monitor scan lines */
  --pattern: repeating-linear-gradient(0deg, transparent 0 3px, rgba(127, 207, 106, 0.035) 3px 4px);
}
:root[data-theme='unicorn'] {
  --orb-a: rgba(34, 224, 192, 0.20);
  --orb-b: rgba(111, 179, 255, 0.14);
  /* psycho-frame circuit grid */
  --pattern: linear-gradient(90deg, transparent 0 63px, rgba(34, 224, 192, 0.06) 63px 64px), linear-gradient(0deg, transparent 0 63px, rgba(34, 224, 192, 0.06) 63px 64px);
}

/* ------------------------------------------------------------------ living background */
body { background-color: var(--bg); min-height: 100dvh; }
body::before, body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; }
body::before { /* the artwork */
  inset: 0;
  background:
    var(--pattern),
    radial-gradient(900px 600px at 100% -10%, var(--orb-a), transparent 65%),
    radial-gradient(800px 560px at -10% 110%, var(--orb-b), transparent 65%);
  background-size: auto, auto, auto;
}
body::after { /* a slow light drifting across, the one moving piece of background */
  top: -30vh; left: -30vw; width: 90vw; height: 90vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--orb-a), transparent);
  opacity: 0.55; filter: blur(30px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(38vw, 30vh, 0) scale(1.25); }
}
:root[data-theme='zaku-ii'] body::after { /* Zaku mono-eye: a bar of light sweeping side to side */
  top: 0; left: 0; width: 100vw; max-width: none; height: 160px; max-height: none; border-radius: 0; filter: none; opacity: 0.5;
  background: linear-gradient(180deg, transparent, rgba(127, 207, 106, 0.09), transparent);
  animation: scan-down 9s linear infinite;
}
@keyframes scan-down { from { transform: translateY(-160px); } to { transform: translateY(100vh); } }

/* ------------------------------------------------------------------ glass surfaces */
.tabbar, .sidebar {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border-color: var(--edge);
}
.tabbar { box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.6); }
.panel, .tile, .kit-card, .coll-card, .kit-row {
  background: var(--glass); border-color: var(--edge); box-shadow: var(--lift);
}
.panel, .tile { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sheet { background-color: var(--bg); background-image: var(--pattern), radial-gradient(700px 480px at 100% 0%, var(--orb-a), transparent 70%); }
.sheet__header, .sheet__footer { background: var(--glass-strong); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sheet-backdrop, dialog.modal::backdrop { -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2); }
dialog.modal { border: 1px solid var(--edge); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 1px 0 var(--edge) inset; background: var(--glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.input { background: color-mix(in srgb, var(--surface-2) 80%, transparent); transition: border-color 0.2s, box-shadow 0.25s var(--ease-out), background 0.2s; }
.input:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ------------------------------------------------------------------ type and brand */
.page-title {
  font-weight: 800; letter-spacing: 0.06em;
  background: linear-gradient(100deg, var(--text) 40%, color-mix(in srgb, var(--text) 55%, var(--accent)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.page-head { position: relative; padding-bottom: 14px; }
.page-head::after { /* a hairline of accent that draws in under every page title */
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 72px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 14px var(--glow);
  transform-origin: left; animation: draw 0.9s var(--ease-out) both;
}
.brand__name { background: linear-gradient(100deg, var(--text), var(--accent-text), var(--text)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sheen 7s ease-in-out infinite; }
.brand__name b { -webkit-text-fill-color: var(--accent-text); }
.brand img { box-shadow: 0 0 22px -4px var(--glow); }
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ------------------------------------------------------------------ buttons */
.btn { position: relative; overflow: hidden; transition: transform 0.18s var(--spring), background 0.2s, border-color 0.2s, box-shadow 0.25s var(--ease-out); }
.btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.btn:active { transform: scale(0.96); }
.btn--primary {
  background-image: linear-gradient(180deg, color-mix(in srgb, white 16%, transparent), transparent 55%);
  box-shadow: 0 8px 22px -8px var(--glow), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
.btn--primary:hover { box-shadow: 0 12px 30px -8px var(--glow), 0 1px 0 rgba(255, 255, 255, 0.3) inset; transform: translateY(-1px); }
.btn--primary::after { /* light sweeping across on hover */
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transition: transform 0.7s var(--ease-out); pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(120%); }
.fab { box-shadow: 0 14px 34px -8px var(--glow), 0 1px 0 rgba(255, 255, 255, 0.28) inset; transition: transform 0.2s var(--spring), box-shadow 0.25s; animation: float 5s ease-in-out infinite; }
.fab:hover { transform: translateY(-2px) scale(1.06); }
.fab:active { transform: scale(0.94); }
.fab--mini { animation: none; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ------------------------------------------------------------------ navigation */
.tab { transition: color 0.2s; }
.tab .icon { transition: transform 0.35s var(--spring), filter 0.3s; }
.tab:active .icon { transform: scale(0.85); }
.tab[aria-current='page'] .icon { transform: translateY(-2px) scale(1.12); filter: drop-shadow(0 0 8px var(--glow)); }
.tab[aria-current='page']::before { box-shadow: 0 0 16px 1px var(--glow); animation: draw 0.5s var(--ease-out) both; transform-origin: center; }
.side-link { position: relative; border-radius: 10px; transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-out); }
.side-link:hover { transform: translateX(3px); }
.side-link[aria-current='page'] { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent); box-shadow: inset 3px 0 0 var(--accent), 0 0 24px -12px var(--glow); }

/* ------------------------------------------------------------------ cards */
.kit-card, .coll-card, .tile { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.25s; }
.kit-card:hover, .coll-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--type-color, var(--accent)) 55%, var(--line-strong));
  box-shadow: 0 1px 0 var(--edge) inset, 0 22px 40px -18px color-mix(in srgb, var(--type-color, var(--accent)) 55%, transparent), 0 8px 18px -10px rgba(0, 0, 0, 0.6);
}
.kit-card:active { transform: translateY(-1px) scale(0.985); }
.kit-card::before { height: 3px; box-shadow: 0 0 14px var(--type-color); }
.kit-card__cover { overflow: hidden; }
.kit-card__cover .cover { transition: transform 0.8s var(--ease-out); }
.kit-card:hover .kit-card__cover .cover { transform: scale(1.06); }
.kit-card__cover::after { /* soft shade where the status badge sits, so it reads on any picture */
  content: ''; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), transparent);
}
.kit-card__cover .badge { z-index: 1; }
.tile__value { background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 60%, var(--accent))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.progress i, .pipeline__seg, .bars__track i { position: relative; overflow: hidden; }
.progress i::after, .bars__track i::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.badge, .chip { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ------------------------------------------------------------------ entrances (only when the page changes) */
.content.enter > *, .content.enter .grid > *, .content.enter .coll-grid > *, .content.enter .tiles > *, .content.enter .panels > *, .content.enter .rows > * {
  animation: enter 0.6s var(--ease-out) both;
}
@keyframes enter { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.content.enter > :nth-child(2) { animation-delay: 60ms; }
.content.enter > :nth-child(3) { animation-delay: 120ms; }
.content.enter > :nth-child(n+4) { animation-delay: 180ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(1) { animation-delay: 80ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(2) { animation-delay: 120ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(3) { animation-delay: 160ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(4) { animation-delay: 200ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(5) { animation-delay: 240ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(6) { animation-delay: 280ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(7) { animation-delay: 320ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(8) { animation-delay: 360ms; }
.content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > :nth-child(n+9) { animation-delay: 400ms; }

/* sheets, dialogs, toasts */
.sheet-backdrop { animation: fade 0.3s ease-out; }
.sheet { animation: sheet-in 0.5s var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(40px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .sheet { animation-name: sheet-side; } }
@keyframes sheet-side { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
dialog.modal[open] { animation: pop 0.45s var(--spring); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
.toast { animation: toast-in 0.5s var(--spring) both; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7), 0 1px 0 var(--edge) inset; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(24px) scale(0.92); } to { opacity: 1; transform: none; } }

/* empty state: the frame brackets breathe */
.empty__art { animation: breathe 4.5s ease-in-out infinite; filter: drop-shadow(0 0 18px var(--glow)); }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }

/* scanner frame glows in the theme colour */
.scan-frame { box-shadow: 0 0 28px -4px var(--glow); }
.scan-line { box-shadow: 0 0 18px 2px var(--glow); }

/* ------------------------------------------------------------------ polish */
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
:focus-visible { outline-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  body::after, .brand__name, .fab, .empty__art, .progress i::after, .bars__track i::after { animation: none !important; }
  .content.enter > *, .content.enter :is(.grid, .coll-grid, .tiles, .panels, .rows) > * { animation: none !important; }
  .kit-card:hover, .coll-card:hover, .btn--primary:hover { transform: none; }
}