/* ============================================
   КРАТКО СЛЪНЦЕ - Animation Styles
   Scroll-linked, Parallax, Transitions
   ============================================ */

/* ---------- Scroll-Linked CSS Custom Properties ---------- */
/* These are updated by JavaScript scroll-manager.js */
:root {
  /* Global scroll progress 0-1 */
  --scroll-progress: 0;

  /* Section-specific progress (updated per section) */
  --section-progress: 0;

  /* Viewport-relative scroll for parallax */
  --scroll-y: 0;
}

/* ---------- Reveal Animations on Scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Exit state handled by removing .is-visible - content slides back down and fades */

/* Reveal variants */
.reveal--left {
  transform: translateX(-30px);
}

.reveal--left.is-visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(30px);
}

.reveal--right.is-visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.95);
}

.reveal--scale.is-visible {
  transform: scale(1);
}

.reveal--fade {
  transform: none;
}

/* Staggered reveal for children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 600ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 700ms; }

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Parallax Layers ---------- */
.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Different parallax speeds */
.parallax-layer--slow {
  transform: translateY(calc(var(--scroll-y) * 0.1px));
}

.parallax-layer--medium {
  transform: translateY(calc(var(--scroll-y) * 0.3px));
}

.parallax-layer--fast {
  transform: translateY(calc(var(--scroll-y) * 0.5px));
}

/* Hero specific parallax */
.hero .parallax-layer--sky {
  transform: translateY(calc(var(--scroll-y) * 0.1px));
}

.hero .parallax-layer--sun {
  transform: translateY(calc(var(--scroll-y) * 0.25px)) scale(calc(1 + var(--scroll-progress) * 0.1));
}

.hero .parallax-layer--hills {
  transform: translateY(calc(var(--scroll-y) * 0.4px));
}

/* ---------- Text Animations ---------- */
.text-reveal {
  overflow: hidden;
}

.text-reveal-inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.text-reveal.is-visible .text-reveal-inner {
  transform: translateY(0);
}

/* Character by character reveal */
.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.char-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Section Transitions ---------- */
.section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out),
              transform 0.8s var(--ease-out);
}

.section.is-visible,
.section.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* Section exit effect - DISABLED (was causing transparency issues)
.section.is-exiting {
  opacity: 0.3;
}
*/

/* Section content parallax (opacity fade disabled - was causing transparency)
.section-content {
  opacity: calc(1 - var(--section-progress) * 0.3);
  transform: translateY(calc(var(--section-progress) * -20px));
  transition: none;
}
*/

/* ---------- Parallax Text Movement ---------- */
.parallax-text {
  will-change: transform;
  transform: translateY(calc(var(--scroll-progress, 0) * -20px));
  transition: transform 0.1s ease-out;
}

.parallax-text--slow {
  transform: translateY(calc(var(--scroll-progress, 0) * -10px));
}

.parallax-text--fast {
  transform: translateY(calc(var(--scroll-progress, 0) * -40px));
}

/* Section-local parallax using section scroll progress */
.section-parallax {
  transform: translateY(calc(var(--section-scroll, 0) * -30px));
  transition: transform 0.15s ease-out;
}

.section-parallax--subtle {
  transform: translateY(calc(var(--section-scroll, 0) * -15px));
}

.section-parallax--strong {
  transform: translateY(calc(var(--section-scroll, 0) * -50px));
}

/* Enhanced section content parallax for depth - DISABLED (conflicting with layout)
.section-content {
  transform: translateY(calc(var(--section-scroll, 0) * -20px));
  transition: transform 0.2s ease-out;
}

.section-header {
  transform: translateY(calc(var(--section-scroll, 0) * -35px));
  transition: transform 0.2s ease-out;
}

.section-title {
  transform: translateY(calc(var(--section-scroll, 0) * -45px));
}
*/

/* ---------- Hero Animations ---------- */
.hero-content {
  opacity: calc(1 - var(--scroll-progress) * 2);
  transform: translateY(calc(var(--scroll-progress) * 50px));
}

/* Sun glow animation */
@keyframes sunGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(232, 184, 48, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(232, 184, 48, 0.6));
  }
}

.hero .logo-sun,
.sun-icon {
  animation: sunGlow 4s ease-in-out infinite;
}

/* Heat shimmer effect */
@keyframes heatShimmer {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  50% {
    transform: translateY(-2px) scaleY(1.01);
  }
}

.heat-shimmer {
  animation: heatShimmer 3s ease-in-out infinite;
}

/* ---------- Loading & Enter Animations ---------- */
@keyframes pageLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.site-wrapper {
  animation: pageLoad var(--duration-slow) var(--ease-out);
}

/* Slide in from bottom */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideInUp var(--duration-slow) var(--ease-out) both;
}

/* Slide in from left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-left {
  animation: slideInLeft var(--duration-slow) var(--ease-out) both;
}

/* Scale in */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-spring) both;
}

/* ---------- Hover Micro-interactions ---------- */
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
}

.hover-glow {
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.hover-scale {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ---------- Progress Bar Animation ---------- */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--sun-gold);
  width: calc(var(--scroll-progress) * 100%);
  z-index: var(--z-toast);
  transform-origin: left;
  transition: width 0.1s linear;
}

/* ---------- Scroll Down Indicator ---------- */
@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}

.scroll-hint {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* Fade out on scroll */
.scroll-hint-container {
  opacity: calc(1 - var(--scroll-progress) * 5);
  pointer-events: none;
}

/* ---------- Pulsing Elements ---------- */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ---------- Card Flip Animation ---------- */
.card-flip {
  transition: transform var(--duration-slow) var(--ease-out);
  transform-style: preserve-3d;
}

.card-flip.is-flipped {
  transform: rotateY(180deg);
}

/* ---------- Accordion Animation ---------- */
.accordion-expand {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-normal) var(--ease-out);
}

.accordion-expand.is-open {
  grid-template-rows: 1fr;
}

.accordion-expand > * {
  overflow: hidden;
}

/* ---------- Tab Switch Animation ---------- */
.tab-content-enter {
  animation: tabEnter var(--duration-normal) var(--ease-out);
}

@keyframes tabEnter {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ---------- Golden Sun Rays ---------- */
@keyframes sunRays {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.sun-rays {
  position: absolute;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(232, 184, 48, 0.1) 10deg,
    transparent 20deg
  );
  animation: sunRays 60s linear infinite;
  opacity: 0.5;
}

/* ---------- Dust Particles ---------- */
@keyframes dustFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100vh) translateX(50px);
    opacity: 0;
  }
}

.dust-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--ochre-dust);
  border-radius: var(--radius-full);
  opacity: 0;
  pointer-events: none;
}

.dust-particle:nth-child(1) {
  left: 10%;
  animation: dustFloat 15s ease-in-out infinite;
  animation-delay: 0s;
}

.dust-particle:nth-child(2) {
  left: 25%;
  animation: dustFloat 18s ease-in-out infinite;
  animation-delay: 2s;
}

.dust-particle:nth-child(3) {
  left: 45%;
  animation: dustFloat 20s ease-in-out infinite;
  animation-delay: 4s;
}

.dust-particle:nth-child(4) {
  left: 65%;
  animation: dustFloat 16s ease-in-out infinite;
  animation-delay: 6s;
}

.dust-particle:nth-child(5) {
  left: 85%;
  animation: dustFloat 22s ease-in-out infinite;
  animation-delay: 8s;
}

/* ---------- Typewriter Effect ---------- */
.typewriter-trigger {
  /* Initial state - text hidden, will be revealed by JS */
}

.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--sun-gold);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.7s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter-complete .typewriter-cursor {
  animation: cursor-fade 0.5s ease-out forwards;
}

@keyframes cursor-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Typewriter text glow effect while typing */
.typewriter-active {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(232, 184, 48, 0.4);
}

/* ---------- Blur-In Focus Animation ---------- */
.blur-reveal > * {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(15px);
  transition: opacity 0.6s var(--ease-out),
              filter 0.6s var(--ease-out),
              transform 0.6s var(--ease-out);
}

/* Stagger delays for paragraphs */
.blur-reveal > *:nth-child(1) { transition-delay: 0ms; }
.blur-reveal > *:nth-child(2) { transition-delay: 100ms; }
.blur-reveal > *:nth-child(3) { transition-delay: 200ms; }
.blur-reveal > *:nth-child(4) { transition-delay: 300ms; }
.blur-reveal > *:nth-child(5) { transition-delay: 400ms; }
.blur-reveal > *:nth-child(6) { transition-delay: 500ms; }
.blur-reveal > *:nth-child(7) { transition-delay: 600ms; }
.blur-reveal > *:nth-child(8) { transition-delay: 700ms; }

/* Revealed state - sharp focus */
.blur-reveal.is-revealed > * {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ---------- Parallax Depth Push ---------- */
/* Exiting section - subtle depth effect without heavy opacity change */
.section.is-exiting {
  /* Removed opacity: 0.3 - was making sections too transparent */
  transform: translateY(calc(var(--section-scroll, 0) * -30px));
  transition: transform 0.5s var(--ease-out);
}

/* Enhanced depth layers - DISABLED to avoid conflicts with existing parallax
.section-header {
  transform: translateY(calc(var(--section-scroll, 0) * -60px));
  transition: transform 0.2s ease-out;
}

.section-title {
  transform: translateY(calc(var(--section-scroll, 0) * -80px));
  transition: transform 0.2s ease-out;
}

.section-content {
  transform: translateY(calc(var(--section-scroll, 0) * -40px));
  transition: transform 0.2s ease-out;
}
*/

/* ---------- No Transition Utility ---------- */
/* Used to instantly reveal elements without animation flash */
.no-transition,
.no-transition * {
  transition: none !important;
  animation: none !important;
}

/* ---------- Performance Optimizations ---------- */
/* Contain animations to prevent repaints */
.section,
.parallax-container,
.character-card-inner {
  contain: layout style paint;
}

/* Use GPU acceleration wisely */
.parallax-layer,
.reveal,
.card-flip,
.accordion-expand {
  will-change: transform, opacity;
}

/* Remove will-change when not animating */
.parallax-layer:not(.is-visible),
.reveal:not(.is-visible) {
  will-change: auto;
}