/* ═══════════════════════════════════════════
   JoyBilliard — Transition System v3
   Step-by-step fade-in, scroll-aware bar
   ═══════════════════════════════════════════ */

/* ── Page Exit Overlay ── */
.joy-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.joy-transition-overlay.active {
  opacity: 1;
}

/* ── Fade-up reveal ── */
.joy-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.joy-fade.show {
  opacity: 1;
  transform: translateY(0);
}

/* Per-element stagger — gradual, line-by-line cascade */
.joy-fade[data-step="1"]  { transition-delay: 0.00s; }
.joy-fade[data-step="2"]  { transition-delay: 0.08s; }
.joy-fade[data-step="3"]  { transition-delay: 0.16s; }
.joy-fade[data-step="4"]  { transition-delay: 0.24s; }
.joy-fade[data-step="5"]  { transition-delay: 0.32s; }
.joy-fade[data-step="6"]  { transition-delay: 0.40s; }
.joy-fade[data-step="7"]  { transition-delay: 0.48s; }
.joy-fade[data-step="8"]  { transition-delay: 0.55s; }
.joy-fade[data-step="9"]  { transition-delay: 0.62s; }
.joy-fade[data-step="10"] { transition-delay: 0.69s; }
.joy-fade[data-step="11"] { transition-delay: 0.76s; }
.joy-fade[data-step="12"] { transition-delay: 0.83s; }
.joy-fade[data-step="13"] { transition-delay: 0.90s; }
.joy-fade[data-step="14"] { transition-delay: 0.97s; }

/* ── Scroll fade (deeper sections) ── */
.joy-scroll-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.joy-scroll-in.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Bottom bar: scroll hide/show ── */
.bottom-bar {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.bottom-bar.bar-hidden {
  transform: translateY(100%) !important;
}
@media(min-width:1024px) {
  .bottom-bar.bar-hidden {
    transform: translateY(-100%) !important;
  }
}

/* ── Form focus ── */
.form-input:focus, .form-textarea:focus, .form-select:focus,
.auth-input:focus, .field-input:focus, .search-input:focus {
  box-shadow: 0 0 0 1px rgba(212,168,67,0.2);
}

/* ── Success pop ── */
.success-msg.show .success-icon {
  animation: successPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Button press ── */
.submit-btn:active, .save-btn:active, .auth-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s;
}

/* ── Skeleton loading ── */
.skel {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: skelPulse 1.4s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes skelPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-wrap {
  transition: opacity 0.3s ease;
}
.skel-wrap.gone {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .joy-fade, .joy-scroll-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bottom-bar { transition: none !important; }
}