/**
 * PlantYourMemory — Silky Smooth Performance Engine
 * ─────────────────────────────────────────────────
 * Compositor-only animations  |  GPU layer promotion
 * High-refresh-rate rendering |  Scroll smoothness
 */

/* ═══════════════════════════════════════════════════
   1. GLOBAL RENDERING QUALITY
   ═══════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  /* Allow natural overscroll — do NOT block it */
  overscroll-behavior-y: auto;
}

body {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Allow natural vertical scroll bounce (iOS) */
  overscroll-behavior-y: auto;
}

/* ═══════════════════════════════════════════════════
   2. GPU LAYER PROMOTION (compositor thread)
   ═══════════════════════════════════════════════════ */

/* Sticky header — always composited */
header.site-header,
.portal-sidebar,
.sidebar {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Toasts */
#toastContainer,
.toast {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Modals */
.modal-overlay,
.modal-content {
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════
   3. EASING TOKENS & DURATION SCALE
   ═══════════════════════════════════════════════════ */

:root {
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy:  cubic-bezier(0.4,  0,    0.2,  1);
  --ease-silk:    cubic-bezier(0.16, 1,    0.3,  1);

  --dur-instant: 80ms;
  --dur-fast:   150ms;
  --dur-normal: 260ms;
  --dur-slow:   420ms;
  --dur-lazy:   600ms;

  /* Safe default so content isn't hidden under header on first paint.
     JS ResizeObserver will update this to the exact measured value. */
  --header-h: 110px;
}

/* ═══════════════════════════════════════════════════
   4. COMPOSITOR-ONLY TRANSITIONS
   Only animate: transform, opacity, box-shadow, color,
   background-color, border-color — never layout props.
   ═══════════════════════════════════════════════════ */

/* Buttons */
.btn {
  transition:
    transform        var(--dur-fast)   var(--ease-snappy),
    box-shadow       var(--dur-fast)   var(--ease-snappy),
    background-color var(--dur-normal) var(--ease-smooth),
    color            var(--dur-normal) var(--ease-smooth),
    border-color     var(--dur-normal) var(--ease-smooth),
    opacity          var(--dur-fast)   linear;
  will-change: transform;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px) translateZ(0);
}
.btn:active:not(:disabled) {
  transform: translateY(0px) scale(0.98) translateZ(0);
  transition-duration: var(--dur-instant);
}

/* Nav links */
.nav-links a {
  transition:
    color     var(--dur-normal) var(--ease-smooth),
    transform var(--dur-fast)   var(--ease-snappy);
}

/* Cards */
.plant-card,
.glass:not(header):not(.site-header),
.kpi-card,
.rank-card,
.staff-card,
.data-table-wrap {
  transition:
    transform  var(--dur-normal) var(--ease-smooth),
    box-shadow var(--dur-normal) var(--ease-smooth);
  will-change: transform;
}

/* Header — shadow + background transition only (no layout transitions) */
header.site-header {
  transition:
    box-shadow 0.30s var(--ease-snappy),
    background 0.40s var(--ease-smooth);
}
header.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(12, 35, 23, 0.10);
  background: rgba(244, 247, 245, 0.97);
}

/* Sidebar links */
.sidebar-link,
.portal-link {
  transition:
    background   var(--dur-fast) var(--ease-smooth),
    color        var(--dur-fast) var(--ease-smooth),
    transform    var(--dur-fast) var(--ease-snappy),
    box-shadow   var(--dur-fast) var(--ease-smooth);
}
.sidebar-link:hover,
.portal-link:hover {
  transform: translateX(3px) translateZ(0);
}

/* Accordion panels */
.faq-body,
.sc-perm-panel,
.staff-perm-panel {
  transition:
    max-height var(--dur-slow)   var(--ease-silk),
    opacity    var(--dur-normal) var(--ease-smooth);
}

/* Modal */
.modal-overlay {
  transition: opacity var(--dur-normal) var(--ease-smooth),
              visibility var(--dur-normal) step-end;
}
.modal-overlay.open {
  transition: opacity var(--dur-normal) var(--ease-smooth),
              visibility var(--dur-normal) step-start;
}
.modal-content {
  transition:
    transform var(--dur-slow)   var(--ease-spring),
    opacity   var(--dur-normal) var(--ease-smooth);
}

/* Toasts */
.toast {
  transition:
    opacity   var(--dur-normal) var(--ease-smooth),
    transform var(--dur-normal) var(--ease-spring);
}

/* Form inputs */
.form-input,
.form-select,
.form-textarea {
  transition:
    border-color var(--dur-fast)    var(--ease-smooth),
    box-shadow   var(--dur-fast)    var(--ease-smooth);
}

/* Badges */
.badge,
.perm-pill {
  transition:
    background   var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth),
    transform    var(--dur-fast) var(--ease-spring),
    color        var(--dur-fast) var(--ease-smooth);
}

/* Toggle switches */
.pt-track,
.pt-thumb {
  transition:
    background var(--dur-normal) var(--ease-smooth),
    transform  var(--dur-normal) var(--ease-spring);
}

/* Image lazy fade */
img {
  transition: opacity var(--dur-slow) var(--ease-smooth);
}
img[loading="lazy"] { opacity: 0; }
img.loaded,
img:not([loading]) { opacity: 1; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════
   5. SCROLL-REVEAL SYSTEM
   opacity + transform only (compositor-friendly).
   threshold:0 ensures in-viewport elements reveal on load.
   ═══════════════════════════════════════════════════ */

.reveal {
  opacity:   0;
  transform: translateY(22px) translateZ(0);
  transition:
    opacity   var(--dur-slow) var(--ease-silk),
    transform var(--dur-slow) var(--ease-silk);
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0) translateZ(0);
}
/* Stagger delays */
.reveal[data-delay="1"] { transition-delay: 50ms;  }
.reveal[data-delay="2"] { transition-delay: 100ms; }
.reveal[data-delay="3"] { transition-delay: 150ms; }
.reveal[data-delay="4"] { transition-delay: 200ms; }
.reveal[data-delay="5"] { transition-delay: 250ms; }
.reveal[data-delay="6"] { transition-delay: 300ms; }

/* ═══════════════════════════════════════════════════
   6. MAIN CONTENT OFFSET (below sticky header)
   Uses --header-h which JS sets via ResizeObserver.
   Default 110px prevents flash of content-under-header.
   ═══════════════════════════════════════════════════ */

main.site-main {
  /* Smooth when header height changes (e.g. fonts loading) */
  transition: padding-top 0.28s var(--ease-smooth);
}




/* ═══════════════════════════════════════════════════
   8. REDUCED MOTION — always respect user preference
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
  .reveal        { opacity: 1; transform: none; transition: none; }
  .reveal.visible{ opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════
   9. COMPONENT SPECIFICS
   ═══════════════════════════════════════════════════ */

/* Permission toggle rows */
.perm-row {
  transition:
    background   var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth),
    transform    var(--dur-fast) var(--ease-snappy),
    box-shadow   var(--dur-fast) var(--ease-smooth);
}
.perm-row:hover {
  transform: translateX(3px) translateZ(0);
}

/* Number counters — handled by JS RAF */
[id^="ticker-"] {
  transition: none;
  font-variant-numeric: tabular-nums;
}