/* ============================================================================
   DimeClip — PREMIUM SEAMLESS LAYER
   One global sheet, linked LAST on every page. Everything here is chrome-level
   polish that makes the whole product feel like ONE app instead of a set of
   pages: cross-page transitions, persistent nav chrome, unified selection /
   focus / scrollbars, and calm first-paint motion.

   Rules of this file:
     - No layout. Nothing in here may move, size, or reflow content.
     - Zero-specificity selectors (:where) so it can never beat a screen's own
       styling by accident.
     - Every animation is wrapped for prefers-reduced-motion.
   ========================================================================== */

/* ---- 1. Cross-document view transitions (the "seamless" core) -----------
   Same-origin navigations crossfade instead of white-flashing. Browsers
   without support simply ignore all of this — nothing breaks. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: dc-page-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: dc-page-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes dc-page-out {
  to { opacity: 0; }
}

@keyframes dc-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Nav chrome persists across navigations instead of fading with the page —
   the rail/tabbar/topbar hold still while only the content crossfades, which
   is what makes an MPA read as one continuous app. */
.studio-rail { view-transition-name: dc-studio-rail; }
.studio-tabbar { view-transition-name: dc-studio-tabbar; }
.topbar { view-transition-name: dc-topbar; }

::view-transition-group(dc-studio-rail),
::view-transition-group(dc-studio-tabbar),
::view-transition-group(dc-topbar) {
  animation-duration: 0s;
}

/* ---- 2. First-paint ease ------------------------------------------------
   A very short settle on initial load (view transitions only cover page-to-
   page). Subtle enough to read as "smooth", never as "waiting". */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: dc-first-paint 240ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  @keyframes dc-first-paint {
    from { opacity: 0.55; }
    to { opacity: 1; }
  }
}

/* ---- 3. Selection, caret, focus ----------------------------------------- */
::selection {
  background: rgba(245, 178, 61, 0.28);
  color: #FBFBF9;
}

:where(input, textarea) {
  caret-color: #F5B23D;
}

/* Fallback focus ring ONLY for elements no screen styled (zero specificity —
   any existing :focus-visible treatment wins). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(245, 178, 61, 0.55);
  outline-offset: 2px;
}

/* ---- 4. Scrollbars ------------------------------------------------------
   Thin, dark, consistent — every scroll surface reads as the same product. */
:where(html) {
  scrollbar-color: #2A323E transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #232933;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #313a47;
}

/* ---- 5. Motion hygiene --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :where(html) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---- 6. Media calm -------------------------------------------------------
   Crest/logo/photo loads shouldn't pop. Zero layout impact: only a fade. */
@media (prefers-reduced-motion: no-preference) {
  :where(img) {
    transition: opacity 180ms ease;
  }
}

/* ---- 7. Print stays clean ------------------------------------------------ */
@media print {
  body { animation: none !important; }
}