/* 
 * Portfolio Nexus Framework - Animation CSS Enhancements
 * This file contains CSS for animated elements and effects
 */

/* Image Quality Preservation During Animations */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: optimizeQuality;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Prevent blur during transforms */
section img {
  filter: none !important; /* Override any blur filters */
  transform-origin: center center;
  backface-visibility: hidden;
}

/* Ensure crisp images during scale animations */
section:not(.wp-block-nexus-blocks-hero) img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Custom cursor styles - DISABLED */
.custom-cursor-active {
  cursor: auto !important; /* Restore default cursor */
}

.custom-cursor-active a,
.custom-cursor-active button,
.custom-cursor-active .interactive {
  cursor: pointer !important; /* Restore default cursor for interactive elements */
}

.nexus-cursor-outer,
.nexus-cursor-inner {
  display: none !important; /* Hide custom cursor elements */
}

/* Enhanced triangle styles for dramatic entrance animation */
.triangle-wrapper {
  visibility: visible;
  display: block;
  z-index: 10;
  height: auto;
  /* Initial state handled by GSAP */
  opacity: 0;
  transform: scale(0.3) rotate(-45deg) translate(50px, -100px);
  transition: opacity 0.3s ease;
}

.triangle-hover {
  visibility: visible;
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

[style*="pattern-black.svg"] {
  opacity: 1;
  visibility: visible;
  display: block;
  background: url('/wp-content/plugins/portfolio-nexus-blocks/assets/pattern-black.svg');
  background-size: 100%;
}

/* Heading character animations */
.heading-char {
  display: inline-block;
  transition: all 0.2s ease;
  cursor: auto; /* Restore default cursor */
  transform-origin: bottom center;
  position: relative;
}

.heading-char:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: #6E06F6;
  transition: width 0.3s ease;
}

.heading-char:hover:after {
  width: 100%;
}




@keyframes textScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes textScrollReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Scroll indicator */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scroll-indicator-arrow {
  margin-top: 0.5rem;
  color: #6E06F6;
}

/* Improved logo letter effects */
.logo-letter {
    opacity: 0;
  display: inline-block;
  transition: all 0.3s ease;
  position: relative;
  transform-origin: center center;
  cursor: auto; /* Restore default cursor */
}

.logo-letter:hover {
  color: #6E06F6;
}

.logo-letter:before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #6E06F6;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.logo-letter:hover:before {
  width: 80%;
}

/* Ensure text elements are styled properly */
.hero-heading,
.hero-statement,
.heading-char,
.logo-letter {
  color: inherit;
  text-shadow: none;
  background: none;
  -webkit-text-fill-color: initial;
}

/* Fallback to ensure visibility after 4 seconds */
@keyframes ensureVisibility {
  to {
    opacity: 1;
    visibility: visible;
  }
}

.gsap-hero-container .logo-letter,
.gsap-hero-container .hero-heading,
.gsap-hero-container .hero-statement {
  animation: ensureVisibility 0s 4s forwards;
}

/* edlau-text elements are always visible and don't need the fallback */

.hero-heading[style*="background"],
.hero-statement[style*="background"] {
  background: none !important;
}

/* Improved animation performance */
.gsap-hero-container {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Section Scroll Animations Styles */

/* Optimize content sections for animation performance */
section:not(.wp-block-nexus-blocks-hero) {
  will-change: transform, opacity;
  transform-style: flat;
  backface-visibility: hidden;
}

/* Ensure smooth animations for section content */
section h1, section h2, section h3, section h4, section h5, section h6 {
  will-change: transform, opacity;
  transform-origin: center bottom;
}

section p {
  will-change: transform, opacity;
  transform-origin: left center;
}

section img {
  will-change: transform, opacity, filter;
  transform-origin: center center;
}

section button, 
section .wp-block-button, 
section a.button, 
section .btn {
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Enhanced performance for project items */
.project-item,
[class*="project"] {
  will-change: transform, opacity;
  transform-origin: center center;
  backface-visibility: hidden;
}

/* Smooth transitions for content blocks */
.wp-block-nexus-blocks-content-full-img,
.wp-block-nexus-blocks-content-split-img,
.wp-block-nexus-blocks-content-generic,
.wp-block-nexus-blocks-statement,
.wp-block-nexus-blocks-projects {
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  section:not(.wp-block-nexus-blocks-hero) {
    will-change: auto;
  }
  
  section h1, section h2, section h3, section h4, section h5, section h6,
  section p,
  section img,
  section button, 
  section .wp-block-button, 
  section a.button, 
  section .btn {
    will-change: auto;
  }
}