/* App polish — the layer that separates "correct" from "crafted".
   Three ideas, applied everywhere and nowhere loudly:
   1. One light source. A warm key light falls from the top; every surface
      carries a 1px lit top edge, every glow is the same gold.
   2. Atmosphere. The background is not flat black but a room: ambient
      radial light, film grain, a vignette. Content floats IN something.
   3. Response. Everything interactive answers the cursor within 2-3px,
      on one shared curve. Nothing bounces, nothing shouts. */

/* ---- Atmosphere ------------------------------------------------------- */

.app {
  position: relative;
  isolation: isolate;
}

/* Ambient key light + answering floor glow. Fixed, so the room holds
   still while content scrolls through it. */
.app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(55% 38% at 62% -6%, rgba(201, 160, 99, 0.13) 0%, transparent 62%),
    radial-gradient(40% 30% at 12% 108%, rgba(201, 160, 99, 0.07) 0%, transparent 60%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* Film grain — an SVG turbulence tile. Kills the "flat digital black"
   and makes the gradients read as photographed rather than painted. */
.app::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---- Surfaces --------------------------------------------------------- */

/* Every card catches the key light along its top edge and deepens at its
   base — the single detail that makes a surface read as physical. */
.app .card {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(246, 226, 184, 0.07),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 18px 40px -18px rgba(0, 0, 0, 0.55);
  transition:
    transform var(--hover) var(--ease),
    border-color var(--hover) var(--ease),
    box-shadow var(--hover) var(--ease);
}

/* Interactive cards answer; static ones do not. */
a.card:hover,
.toolmini:hover,
.toolcard:hover,
.vidcard:hover,
.pack:hover {
  border-color: rgba(201, 160, 99, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(246, 226, 184, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 22px 48px -16px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(201, 160, 99, 0.06);
}

.pack:hover { transform: translateY(-3px); }

/* Sidebar: the active item owns a sliver of the key light. */
.snav.is-active {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(246, 226, 184, 0.14),
    0 6px 18px -8px rgba(201, 160, 99, 0.35);
}

.snav.is-active::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-bright), rgba(201, 160, 99, 0.2));
  box-shadow: 0 0 10px rgba(230, 200, 143, 0.65);
}

/* ---- The gold: one material, everywhere ------------------------------- */

/* Gold buttons get a sheen that travels on hover — light moving across
   metal, not a color change. */
.btn-gold,
.side__btn,
.genbar {
  position: relative;
  overflow: hidden;
}

.btn-gold::after,
.side__btn::after,
.genbar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 252, 244, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left 640ms var(--ease);
  pointer-events: none;
}

.btn-gold:hover::after,
.side__btn:hover::after,
.genbar:hover::after {
  left: 125%;
}

/* Progress bars breathe — the fill carries a slow sheen so "generating"
   reads as alive without a single layout change. */
.bar i {
  position: relative;
  overflow: hidden;
}

.bar i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 250, 238, 0.5) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: bar-sheen 2.6s var(--ease) infinite;
}

@keyframes bar-sheen {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* The credit gem glints — once, on load, then rests. */
.side__creditRow .gem .icon,
.pack__gem .icon {
  filter: drop-shadow(0 0 10px rgba(230, 200, 143, 0.35));
}

/* ---- Topbar: pinned, frosted ------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -26px -44px 26px;
  padding: 22px 44px 18px;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.92) 55%, rgba(10, 8, 6, 0));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---- Media placeholders: give the gradients a subject ------------------ */

/* A horizon line and glow inside every stand-in shot, so empty tiles read
   as "footage loading" rather than "missing image". */
.app .shot {
  position: relative;
  overflow: hidden;
}

.app .shot::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  top: 58%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 226, 184, 0.35), transparent);
}

.app .shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 60%, rgba(201, 160, 99, 0.14) 0%, transparent 70%),
    linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 45%);
}

/* Play buttons: frosted, and they answer. */
.app .play {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform var(--hover) var(--ease), background-color var(--hover) var(--ease);
}

.vidcard:hover .play,
.recrow:hover .play {
  transform: scale(1.07);
  background: rgba(255, 255, 255, 0.34);
}

/* ---- Detail pass ------------------------------------------------------- */

::selection {
  background: rgba(201, 160, 99, 0.35);
  color: #fff;
}

/* Custom scrollbar — the default grey one breaks the illusion instantly. */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #070605; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(201, 160, 99, 0.35), rgba(201, 160, 99, 0.18));
  border-radius: 999px;
  border: 2px solid #070605;
}
::-webkit-scrollbar-thumb:hover { background: rgba(201, 160, 99, 0.5); }

/* Status pills glow their own colour, faintly. */
.status--ready { box-shadow: 0 0 12px -4px rgba(126, 217, 87, 0.55); }
.status--processing { box-shadow: 0 0 12px -4px rgba(110, 150, 255, 0.6); }

/* Tabs slide their surface, not just their colour. */
.tab { transition: background-color var(--hover) var(--ease), color var(--hover) var(--ease); }
.tab:hover:not(.is-on) { color: rgba(255, 255, 255, 0.85); }

/* The popular pack sits in its own pool of light, permanently. */
.pack.is-on {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(201, 160, 99, 0.13) 0%, transparent 70%),
    linear-gradient(160deg, rgba(24, 20, 16, 0.5), rgba(11, 9, 8, 0.55));
}

/* Buy-page headline: the same serif, but let it breathe. */
.buytitle { letter-spacing: 0.01em; text-shadow: 0 0 60px rgba(201, 160, 99, 0.25); }

/* Danger zone: the one place the light runs cold. */
.danger { box-shadow: inset 0 1px 0 rgba(214, 80, 70, 0.12); }
.btn-danger { transition: background-color var(--hover) var(--ease), border-color var(--hover) var(--ease); }
.btn-danger:hover { background: rgba(214, 80, 70, 0.16); border-color: rgba(214, 80, 70, 0.7); }

/* ---- Operable controls -------------------------------------------------- */
/* These were spans with a pointer cursor and nothing else. They now carry
   role="button" and a tab stop, so they need the affordances a real button
   has: a cursor, a press, and a visible focus ring. */

[role='button'],
[role='switch'] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* The press. Small and immediate — confirmation, not decoration. */
[role='button']:active,
[role='switch']:active {
  transform: translateY(1px);
}

.app [role='button']:focus-visible,
.app [role='switch']:focus-visible,
.pai [role='button']:focus-visible,
.pai [role='switch']:focus-visible,
.plp [role='button']:focus-visible {
  outline: 2px solid var(--gold-bright, #e6c88f);
  outline-offset: 3px;
  border-radius: 8px;
}

/* The light workspace needs its own ring colour to stay legible on white. */
.pai [role='button']:focus-visible,
.pai [role='switch']:focus-visible {
  outline-color: #d9a441;
}

/* Disabled controls must not look or behave like live ones. */
[aria-disabled='true'] {
  cursor: not-allowed;
}

[aria-disabled='true']:active {
  transform: none;
}

/* ---- Entrance --------------------------------------------------------- */
/* Set by the router on every render; GSAP drives the values. Defaults to
   visible so the pages never depend on JS having run. */

[data-enter] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bar i::after { animation: none; }
  .btn-gold::after, .side__btn::after, .genbar::after { display: none; }
}