/**
 * PHASE 8: FINAL POLISH
 * Micro-easing, staggered animations, polish details
 */

/* =========================================================
   BRIGHTNESS LIFT - Warm, Premium Dark Mode
   Makes the site feel brighter and more inviting
   ========================================================= */
body {
  background-color: var(--bg-main, #0b0b0c);
  color: var(--text-primary, #f5f5f5);
}

/* Surface elements (cards, containers) */
.card,
.container,
section {
  background-color: var(--bg-surface, #121214);
}

/* Elevated sections (modals, overlays, featured content) */
.modal,
.elevated,
[data-elevated="true"] {
  background-color: var(--bg-elevated, #18181b);
}

/* Secondary text */
.text-secondary,
.muted {
  color: var(--text-secondary, #cfcfcf);
}

/* =========================================================
   RESPONSIVENESS FOUNDATION - Mobile-First Guarantees
   ========================================================= */
/* Responsive image handling */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent horizontal overflow */
section {
  overflow-x: hidden;
}

/* Scale grid gaps on mobile */
@media (max-width: 768px) {
  .grid {
    gap: 1rem;
  }
  
  /* Reduce padding on smaller screens */
  section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Preserve typography hierarchy on all screens */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
}

/* Premium Easing Functions */
:root {
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* Global Staggered Animation */
.staggered-in > * {
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-out-expo) forwards;
}

.staggered-in > :nth-child(1) { animation-delay: 0.05s; }
.staggered-in > :nth-child(2) { animation-delay: 0.1s; }
.staggered-in > :nth-child(3) { animation-delay: 0.15s; }
.staggered-in > :nth-child(4) { animation-delay: 0.2s; }
.staggered-in > :nth-child(5) { animation-delay: 0.25s; }
.staggered-in > :nth-child(6) { animation-delay: 0.3s; }
.staggered-in > :nth-child(7) { animation-delay: 0.35s; }
.staggered-in > :nth-child(8) { animation-delay: 0.4s; }
.staggered-in > :nth-child(n+9) { animation-delay: 0.45s; }

/* Button Micro-interactions */
button, [role="button"], a.btn, input[type="button"], input[type="submit"] {
  position: relative;
  overflow: hidden;
  transition: all 0.2s var(--ease-out-cubic);
}

button:hover, [role="button"]:hover, a.btn:hover, input[type="button"]:hover, input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

button:active, [role="button"]:active, a.btn:active, input[type="button"]:active, input[type="submit"]:active {
  transform: translateY(0);
}

/* Link Micro-interactions */
a:not([class]), a.link {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease-out-cubic);
}

a:not([class])::after, a.link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s var(--ease-out-expo);
}

a:not([class]):hover::after, a.link:hover::after {
  width: 100%;
}

/* Input Micro-interactions */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
textarea {
  transition: all 0.2s var(--ease-in-out-cubic);
  border-color: transparent;
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
  border-color: #8B0000;
  box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Card Hover Effects */
.card, [role="article"], [data-card] {
  transition: all 0.3s var(--ease-out-cubic);
}

.card:hover, [role="article"]:hover, [data-card]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Scroll Progress Indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, #8B0000, #d4af37);
  z-index: 1000;
  transition: width 0.1s linear;
}

/* Page Transition Curtain */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-in-out-cubic);
}

.page-transition.active {
  opacity: 1;
  pointer-events: auto;
}

/* Lazy Load Effects */
[data-lazy-load] {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s var(--ease-out-expo);
}

[data-lazy-load].loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Hover Lift Effect */
.lift-on-hover {
  transition: all 0.3s var(--ease-out-back);
}

.lift-on-hover:hover {
  transform: translateY(-8px);
}

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down Animation */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide In Right Animation */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In Left Animation */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale In Animation */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Glow Effect */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(139, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.6);
  }
}

.glow-on-hover:hover {
  animation: glow 0.6s ease-in-out;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.pulse {
  animation: pulse 2s var(--ease-in-out-cubic) infinite;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* Shake Animation */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-2px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(2px);
  }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* Tooltip Animation */
.tooltip {
  position: relative;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s var(--ease-out-cubic);
  z-index: 100;
}

.tooltip:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-15px);
}

/* Text Selection Polish */
::selection {
  background: rgba(139, 0, 0, 0.5);
  color: white;
}

::-moz-selection {
  background: rgba(139, 0, 0, 0.5);
  color: white;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus Outline Polish */
:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 2px;
}

/* Reduced Motion Support */
@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;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: more) {
  button, [role="button"], a.btn, input[type="button"], input[type="submit"],
  .card, [role="article"], [data-card] {
    border-width: 2px;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  a:not([class])::after, a.link::after {
    background: #d4af37;
  }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  button, [role="button"], a.btn, input[type="button"], input[type="submit"] {
    transition: all 0.15s var(--ease-out-cubic);
  }

  button:active, [role="button"]:active, a.btn:active, input[type="button"]:active, input[type="submit"]:active {
    transform: scale(0.98);
  }
}

/* ================================
   🚨 GLOBAL VISIBILITY FAILSAFE
   ================================ */

.page-loaded,
.scroll-fallback,
body.visible-fallback {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* Hard reset if loading class is gone */
html:not(.page-load) body,
html.page-loaded body {
  opacity: 1 !important;
  transform: none !important;
}

/* Scoped page-load animation — protect fixed UI */
html.page-load body > *:not(.navbar):not(.fixed):not([data-fixed]) {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

/* Explicitly protect fixed UI */
html.page-load .navbar,
html.page-load .fixed,
html.page-load [data-fixed] {
  opacity: 1 !important;
  transform: none !important;
}