/* ============================================
   UI/UX ENHANCEMENTS - December 2025
   Zero performance impact CSS improvements
   ============================================ */

/* ============================================
   1. BUTTON MICRO-INTERACTIONS
   Makes buttons feel tactile and responsive
   ============================================ */

.btn-primary:active,
.btn-secondary:active,
.nav-cta:active,
.sim-control-btn:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
}

/* Subtle press shadow for depth */
.btn-primary:active {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   2. ENHANCED FOCUS STATES
   Better accessibility + visual polish
   ============================================ */

@keyframes focusPulse {
  0%, 100% {
    outline-offset: 3px;
    outline-color: var(--ember, #e85d04);
  }
  50% {
    outline-offset: 5px;
    outline-color: var(--flame, #ff6b35);
  }
}

/* Apply to interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ember, #e85d04);
  outline-offset: 3px;
  animation: focusPulse 2s ease-in-out infinite;
}

/* Disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    animation: none;
  }
}

/* ============================================
   3. CONSISTENT CARD HOVER EFFECTS
   Standardized lift effect across all cards
   ============================================ */

.stone-card,
.environment-card,
.load-item,
.service-card,
.project-card,
.feature-card,
.benefit-card {
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease !important;
}

.stone-card:hover,
.environment-card:hover,
.load-item:hover,
.service-card:hover,
.project-card:hover,
.feature-card:hover,
.benefit-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Dark mode cards get lighter shadow */
.section-container.dark .stone-card:hover,
.section-container.dark .environment-card:hover {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   4. ANIMATED LINK UNDERLINES
   Slide-in underline effect for text links
   ============================================ */

/* Footer links and inline text links */
.footer a:not(.btn-primary):not(.nav-cta),
.text-link,
article a,
.content a:not(.btn-primary) {
  position: relative;
  text-decoration: none;
}

.footer a:not(.btn-primary):not(.nav-cta)::after,
.text-link::after,
article a::after,
.content a:not(.btn-primary)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer a:not(.btn-primary):not(.nav-cta):hover::after,
.text-link:hover::after,
article a:hover::after,
.content a:not(.btn-primary):hover::after {
  transform: scaleX(1);
}

/* ============================================
   5. MOBILE MENU STAGGER ANIMATION
   Premium cascading entrance effect
   ============================================ */

@keyframes menuItemSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-mobile-menu.is-open > a,
.nav-mobile-menu.is-open > details {
  animation: menuItemSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.nav-mobile-menu.is-open > *:nth-child(1) { animation-delay: 0.05s; }
.nav-mobile-menu.is-open > *:nth-child(2) { animation-delay: 0.1s; }
.nav-mobile-menu.is-open > *:nth-child(3) { animation-delay: 0.15s; }
.nav-mobile-menu.is-open > *:nth-child(4) { animation-delay: 0.2s; }
.nav-mobile-menu.is-open > *:nth-child(5) { animation-delay: 0.25s; }
.nav-mobile-menu.is-open > *:nth-child(6) { animation-delay: 0.3s; }
.nav-mobile-menu.is-open > *:nth-child(7) { animation-delay: 0.35s; }
.nav-mobile-menu.is-open > *:nth-child(8) { animation-delay: 0.4s; }

/* Accordion panel items also stagger */
.nav-mobile-menu.is-open .mobile-accordion-panel a {
  animation: menuItemSlide 0.3s ease forwards;
  opacity: 0;
}

.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(1) { animation-delay: 0.1s; }
.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(2) { animation-delay: 0.15s; }
.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(3) { animation-delay: 0.2s; }
.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(4) { animation-delay: 0.25s; }
.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(5) { animation-delay: 0.3s; }
.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(6) { animation-delay: 0.35s; }
.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(7) { animation-delay: 0.4s; }
.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(8) { animation-delay: 0.45s; }
.nav-mobile-menu.is-open .mobile-accordion-panel a:nth-child(9) { animation-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .nav-mobile-menu.is-open > a,
  .nav-mobile-menu.is-open > details,
  .nav-mobile-menu.is-open .mobile-accordion-panel a {
    animation: none;
    opacity: 1;
  }
}

/* ============================================
   6. SCROLL PROGRESS BAR GRADIENT
   Dynamic gradient that adds visual interest
   ============================================ */

.scroll-progress-fill {
  background: linear-gradient(
    90deg,
    var(--ember, #e85d04) 0%,
    var(--flame, #ff6b35) 50%,
    var(--ember, #e85d04) 100%
  ) !important;
  background-size: 200% 100%;
  animation: scrollGradientShift 3s ease infinite;
}

@keyframes scrollGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Also style the horizontal progress bar if present */
.scroll-progress {
  background: linear-gradient(
    90deg,
    var(--ember, #e85d04),
    var(--flame, #ff6b35)
  ) !important;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress-fill {
    animation: none;
    background: var(--ember, #e85d04) !important;
  }
}

/* ============================================
   7. SKELETON LOADING SHIMMER
   For future use on lazy-loaded content
   ============================================ */

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton,
[data-skeleton] {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: 4px;
}

/* Light mode skeleton */
.section-container:not(.dark) .skeleton,
.section-container:not(.dark) [data-skeleton] {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 25%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.05) 75%
  );
  background-size: 200% 100%;
}

/* ============================================
   8. ENHANCED NAV HOVER STATES
   Smoother navigation transitions
   ============================================ */

.nav-links a,
.nav-dropdown a {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease !important;
}

.nav-dropdown a:hover {
  transform: translateX(4px);
}

/* ============================================
   9. IMAGE HOVER ZOOM
   Subtle zoom on portfolio/project images
   ============================================ */

.project-card img,
.portfolio-item img,
.case-study-image img {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.project-card:hover img,
.portfolio-item:hover img,
.case-study-image:hover img {
  transform: scale(1.05);
}

/* ============================================
   10. FORM INPUT ENHANCEMENTS
   Better visual feedback on form fields
   ============================================ */

input:not([type="submit"]):not([type="button"]),
textarea,
select {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease !important;
}

input:not([type="submit"]):not([type="button"]):hover,
textarea:hover,
select:hover {
  border-color: var(--ash, #888) !important;
}

input:not([type="submit"]):not([type="button"]):focus,
textarea:focus,
select:focus {
  border-color: var(--ember, #e85d04) !important;
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.1) !important;
}

/* ============================================
   11. STAT NUMBER EMPHASIS
   Make statistics pop more
   ============================================ */

.stat-value,
.sim-stat-value,
.stats-number,
[class*="stat"] strong {
  transition: transform 0.3s ease, color 0.3s ease;
}

.stat-value:hover,
.sim-stat-value:hover,
.stats-number:hover {
  transform: scale(1.05);
}

/* ============================================
   12. SUBTLE SECTION DIVIDERS
   Gradient fade between sections
   ============================================ */

.section-container + .section-container.dark::before,
.section-container.dark + .section-container:not(.dark)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}

.section-container + .section-container.dark::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02),
    transparent
  );
}

.section-container.dark + .section-container:not(.dark)::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.03),
    transparent
  );
}

/* ============================================
   13. TOOLTIP SYSTEM (CSS-only)
   Use: data-tooltip="Your tooltip text"
   ============================================ */

[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  pointer-events: none;
  z-index: 1000;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 8px 12px;
  background: var(--void, #0a0a0a);
  color: var(--cream, #f5f5f2);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--void, #0a0a0a);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   14. BACK TO TOP BUTTON (ready for HTML)
   Add: <button class="back-to-top" id="backToTop">↑</button>
   ============================================ */

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: var(--ember, #e85d04);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background-color 0.2s ease;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(232, 93, 4, 0.3);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--flame, #ff6b35);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(232, 93, 4, 0.4);
}

.back-to-top:active {
  transform: translateY(0) scale(0.95);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
  }
}

/* ============================================
   15. SELECTION COLOR CONSISTENCY
   Ensure selection color works everywhere
   ============================================ */

::selection {
  background: var(--ember, #e85d04);
  color: white;
}

::-moz-selection {
  background: var(--ember, #e85d04);
  color: white;
}

/* ============================================
   16. SMOOTH SCROLL BEHAVIOR FALLBACK
   For browsers without Lenis or JS disabled
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================
   17. FIXED NAV SPACING (prevents hero overlap)
   The navigation bar uses `position: fixed`, so we reserve space
   to keep page content (especially the homepage hero) from sitting under it.
   ============================================ */

:root {
  --nav-height: 80px;
}

html {
  scroll-padding-top: var(--nav-height);
}

body {
  padding-top: var(--nav-height);
}

.hero {
  min-height: calc(100vh - var(--nav-height));
}