/* ==========================================================================
   Animations & Polish
   ========================================================================== */

/* 1. Scroll-Driven Reveals */
.animate-reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@supports (animation-timeline: view()) {
  .animate-reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Infinite Marquee System */
.marquee-section {
  padding: 0;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  background-color: var(--color-bg-secondary);
  overflow: hidden;
}

.marquee-container {
  display: flex;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}

.marquee-container:hover {
  animation-play-state: paused;
}

.marquee-track {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-4) var(--space-6);
  align-items: center;
}

.marquee-item {
  font-family: var(--font-mono);
  font-size: var(--text-sm); /* Slightly smaller font size makes JetBrains Mono text look highly refined */
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.marquee-item:hover {
  color: var(--color-text-primary);
}

.marquee-svg {
  height: 22px; /* Proportional sizing matching modern stripes */
  width: auto;
  min-width: 22px;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), fill 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.marquee-item:hover .marquee-svg {
  transform: scale(1.1);
  fill: var(--color-accent-interactive);
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Scrolls half the width because we duplicate the track */
}

/* 2b. Brutalist Text Ticker */
.text-ticker-section {
  padding: var(--space-2) 0;
  border-top: 2px solid var(--color-text-primary);
  border-bottom: 2px solid var(--color-text-primary);
  background-color: var(--color-bg-primary);
  overflow: hidden;
  display: flex;
}

.text-ticker-container {
  display: flex;
  width: max-content;
  animation: marqueeScroll 25s linear infinite;
}

.text-ticker-item {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.text-ticker-item::after {
  content: '✦';
  color: var(--color-accent-interactive);
}

/* 3. Polished Geometric Placeholders */
.polished-placeholder {
  width: 100%;
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-border-default) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
}

.polished-placeholder::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: shimmer 4s infinite ease-in-out;
}

@media (prefers-color-scheme: dark) {
  .polished-placeholder::after {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
  }
}

@keyframes shimmer {
  0% { left: -150%; }
  50% { left: 200%; }
  100% { left: 200%; }
}

/* 4. Carousel Slide Effects */
@keyframes carousel-focus {
  0% {
    scale: 0.85;
    opacity: 0.5;
  }
  50% {
    scale: 1;
    opacity: 1;
  }
  100% {
    scale: 0.85;
    opacity: 0.5;
  }
}

@supports ((animation-timeline: view()) and (animation-range: entry)) {
  .carousel-item-animate {
    animation: carousel-focus auto linear both;
    animation-timeline: view(inline);
  }
}

/* 5. Ambient Glow Animations */
@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 0.6; }
  100% { transform: scale(1); opacity: 0.4; }
}

/* 6. Global Page Transitions */
body {
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.page-transitioning {
  opacity: 0;
}