/* =====================================================
   Reelo theme v3 — refined monochrome with one accent
   Loaded last on every page, after the page's own styles.
   Ink drives actions; the muted indigo accent is kept for
   focus, progress and "live" states. Dark surfaces are
   neutral graphite, never tinted.
   ===================================================== */

:root {
  --ink:        #18181B;
  --ink-2:      #27272A;
  --ink-3:      #3F3F46;
  --paper:      #FAFAFA;
  --card:       #FFFFFF;
  --line:       #E4E4E7;
  --line-2:     #F4F4F5;
  --muted:      #52525B;

  --accent:      #5048C8;
  --accent-2:    #433BB0;
  --accent-soft: #EEEDFB;
  --accent-on-dark: #B6B2F2;
  --violet:      var(--accent);

  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 460ms;

  --shadow-sm: 0 1px 2px rgba(9, 9, 11, .05);
  --shadow:    0 1px 2px rgba(9, 9, 11, .04), 0 8px 24px rgba(9, 9, 11, .06);
  --shadow-lg: 0 2px 4px rgba(9, 9, 11, .04), 0 24px 56px rgba(9, 9, 11, .12);
}

/* Light pages: actions are ink. Pages built on dark surfaces
   (watch) opt out with body.on-dark and use the accent instead. */
body:not(.on-dark):not(.dark) {
  --p:  var(--ink);
  --pd: var(--ink-2);
  --ps: var(--ink-3);
  --pl: var(--line-2);
  --soft: var(--line-2);
  --border: var(--line);
  --bg: var(--paper);
}
/* On dark, the accent is lifted a step so it reads as text too (4.5:1 on graphite, 4.9:1 under white) */
body.on-dark, body.dark {
  --p:  #6A62D6;
  --pd: var(--accent);
  --ps: #7C75E0;
}
body.dark .reelo-lockup, body.on-dark .reelo-lockup { color: #FAFAFA; }
body.dark .video-tag { color: var(--accent-on-dark); background: #232327; }
body.on-dark { background: #0B0B0D; }
body.dark { background: #0B0B0D !important; }

/* ── Type ──────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -0.022em; text-wrap: balance; }
h1 { letter-spacing: -0.032em; }
p { text-wrap: pretty; }
.dash-stat, .stat-num, .price-amount, time, .video-meta { font-variant-numeric: tabular-nums; }
::selection { background: rgba(80, 72, 200, .18); }

/* ── Focus ─────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px;
}
body.on-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible,
body.dark :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--accent-on-dark) !important; }

/* ── Buttons: flat ink, quiet lift ─────────────────── */
:where(.btn-primary, .btn-submit, .btn-record, .nav-cta, .btn-start, .btn-price-primary, .btn-cta-big, .btn-save, .btn-copy-url, .cta-btn, .btn-hero, .hero-cta) {
  background: var(--p) !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out) !important;
}
:where(.btn-primary, .btn-submit, .btn-record, .nav-cta, .btn-start, .btn-price-primary, .btn-cta-big, .btn-save, .btn-copy-url, .cta-btn, .btn-hero, .hero-cta):hover {
  background: var(--pd) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(9, 9, 11, .16) !important;
}
:where(.btn-primary, .btn-submit, .btn-record, .nav-cta, .btn-start, .btn-price-primary, .btn-cta-big, .btn-save, .btn-copy-url, .cta-btn, .btn-hero, .hero-cta):active {
  transform: translateY(0) scale(.98);
  box-shadow: none !important;
}
button, a, .video-card, .card, .feat-card, .price-card, .dash-stat, .folder-tab, .quick-filter {
  transition-timing-function: var(--ease-out);
}

/* ── Surfaces ──────────────────────────────────────── */
:where(.video-card, .card, .feat-card, .price-card, .dash-stat, .stat-card) {
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out) !important;
}
:where(.video-card, .feat-card, .price-card):hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: #D4D4D8 !important;
}
body.dark :where(.video-card, .feat-card, .price-card):hover { border-color: #3F3F46 !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .45) !important; }
a.video-card { color: inherit; }
.video-thumb img { transition: transform 700ms var(--ease-out); }
.video-card:hover .video-thumb img { transform: scale(1.035); }

/* Thumbnail badges: one quiet glass style; the label carries the meaning */
.thumb-badge {
  background: rgba(9, 9, 11, .58) !important;
  color: #FAFAFA !important;
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 600 !important;
  letter-spacing: .01em;
}

/* Feature icons: one calm tint instead of a rainbow */
:where(.fi-purple, .fi-blue, .fi-green, .fi-orange, .fi-pink, .fi-red, .fi-teal, .fi-indigo, .fi-yellow) {
  background: var(--line-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}
.feat-icon svg[stroke] { stroke: var(--ink-2); }
body.on-dark .feat-icon { background: rgba(255, 255, 255, .06) !important; color: #E4E4E7 !important; border: 1px solid rgba(255, 255, 255, .08); }
body.on-dark .feat-icon svg[stroke] { stroke: #E4E4E7; }
body.on-dark .team-badge { background: rgba(255, 255, 255, .08) !important; color: #D4D4D8 !important; }
body.on-dark .team-avatar { background: #3F3F46 !important; }
.popular-tag, .compare-table th.col-reelo, .story-avatar, .badge-cta { background: var(--ink) !important; }
.price-card.popular { animation: none !important; border-color: var(--ink) !important; background: var(--card) !important; }
.sovereign-card { background: linear-gradient(160deg, #111113, #1C1C1F) !important; border-color: #2A2A2E !important; }

/* ── Modals: fade + lift, blurred backdrop ─────────── */
.modal-ov, .modal-overlay, .modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: rl-fade var(--dur-2) var(--ease-out) backwards;
}
.modal-ov > *, .modal-overlay > .modal, .modal-box {
  animation: rl-pop 320ms var(--ease-out) backwards;
}

/* ── Motion system ─────────────────────────────────── */
@keyframes rl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rl-pop  { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rl-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
@keyframes rl-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Page arrives softly */
main, .app-content, .settings-main { animation: rl-fade 380ms var(--ease-out) backwards; }

/* Grids cascade in, a few items at a time */
:where(.video-grid, .feat-grid, .price-grid, .stats-grid, .dash-stats) > * { animation: rl-rise 520ms var(--ease-out) backwards; }
:where(.video-grid, .feat-grid, .price-grid, .stats-grid, .dash-stats) > :nth-child(2) { animation-delay: 50ms; }
:where(.video-grid, .feat-grid, .price-grid, .stats-grid, .dash-stats) > :nth-child(3) { animation-delay: 100ms; }
:where(.video-grid, .feat-grid, .price-grid, .stats-grid, .dash-stats) > :nth-child(4) { animation-delay: 150ms; }
:where(.video-grid, .feat-grid, .price-grid, .stats-grid, .dash-stats) > :nth-child(5) { animation-delay: 200ms; }
:where(.video-grid, .feat-grid, .price-grid, .stats-grid, .dash-stats) > :nth-child(6) { animation-delay: 250ms; }
:where(.video-grid, .feat-grid, .price-grid, .stats-grid, .dash-stats) > :nth-child(n+7) { animation-delay: 300ms; }

/* Scroll reveal (motion.js adds .rl-reveal only when motion is allowed) */
.rl-reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--rl-delay, 0ms); }
.rl-reveal.rl-in { opacity: 1; transform: none; }

/* Hero: a slow, faint aurora behind the headline */
.hero { isolation: isolate; }
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(520px 260px at 30% 20%, rgba(80, 72, 200, .10), transparent 70%),
    radial-gradient(460px 240px at 72% 10%, rgba(24, 24, 27, .06), transparent 70%);
  animation: rl-drift 18s var(--ease-in-out) infinite alternate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(24, 24, 27, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}

/* Skeleton shimmer for loading placeholders */
.skeleton, .skel {
  background: linear-gradient(90deg, var(--line-2) 25%, #ECECEE 37%, var(--line-2) 63%) !important;
  background-size: 400% 100% !important;
  animation: rl-shimmer 1.6s ease infinite;
}

/* Calm scrollbars */
* { scrollbar-width: thin; scrollbar-color: #D4D4D8 transparent; }
body.on-dark *, body.dark * { scrollbar-color: #3F3F46 transparent; }

/* ── Reduced motion: final states, no movement ─────── */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .rl-reveal { opacity: 1; transform: none; transition: none; }
  :where(.video-card, .feat-card, .price-card):hover { transform: none !important; }
  .video-card:hover .video-thumb img { transform: none; }
}