/*
 * MANIFEROS THEME — Animations (Phase 3 Polish)
 * Glitch variants, staggered reveals, hover glows, text effects, timeline
 */

/* =========================================
   GLITCH EFFECTS
   ========================================= */

/* Main glitch — used on hero title */
@keyframes glitch {
  0%, 92%, 100% {
    text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    transform: translate(0);
  }
  93% {
    text-shadow: 4px 4px 0 #000, -5px 0 var(--pink), 5px 0 var(--green);
    transform: translate(-2px, 1px);
  }
  94% {
    text-shadow: 4px 4px 0 #000, 3px -1px var(--green), -3px 1px var(--pink);
    transform: translate(2px, -1px);
  }
  95% {
    text-shadow: 4px 4px 0 #000, -1px 3px var(--pink), 1px -3px var(--green);
    transform: translate(-1px, 2px);
  }
  96% {
    text-shadow: 4px 4px 0 #000, 4px 1px var(--green), -4px -1px var(--pink);
    transform: translate(1px, -2px);
  }
  97% {
    text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    transform: translate(0);
  }
}

.glitch {
  animation: glitch 5s infinite;
}

/* Subtle glitch — for section titles on hover */
@keyframes glitch-subtle {
  0%, 96%, 100% {
    text-shadow: none;
    transform: translate(0);
  }
  97% {
    text-shadow: -2px 0 var(--pink), 2px 0 var(--green);
    transform: translate(-1px, 0);
  }
  98% {
    text-shadow: 2px 0 var(--green), -2px 0 var(--pink);
    transform: translate(1px, 0);
  }
  99% {
    text-shadow: none;
    transform: translate(0);
  }
}

.glitch-hover:hover {
  animation: glitch-subtle 2s infinite;
}

/* 404 glitch — more aggressive */
@keyframes glitch-404 {
  0%, 88%, 100% {
    text-shadow: 4px 4px 0 #000;
    transform: translate(0) skew(0);
  }
  89% {
    text-shadow: -6px 0 var(--pink), 6px 0 var(--green);
    transform: translate(-3px, 2px) skew(-0.5deg);
  }
  91% {
    text-shadow: 4px 0 var(--green), -4px 0 var(--pink);
    transform: translate(3px, -1px) skew(0.5deg);
  }
  93% {
    text-shadow: -3px 3px var(--pink), 3px -3px var(--green);
    transform: translate(-2px, 3px) skew(-0.3deg);
  }
  95% {
    text-shadow: 5px -2px var(--green), -5px 2px var(--pink);
    transform: translate(2px, -2px) skew(0.3deg);
  }
  96% {
    text-shadow: 4px 4px 0 #000;
    transform: translate(0) skew(0);
  }
}

.glitch-404 {
  animation: glitch-404 3s infinite;
}

/* Glitch clip — scanline effect for hero title */
.hero-title {
  position: relative;
}

.hero-title::before,
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-title::before {
  animation: glitch-clip-top 4s infinite linear alternate-reverse;
  clip-path: inset(0 0 65% 0);
  color: var(--green);
  text-shadow: -3px 0 var(--pink);
}

.hero-title::after {
  animation: glitch-clip-bottom 4s infinite linear alternate-reverse;
  clip-path: inset(65% 0 0 0);
  color: var(--green);
  text-shadow: 3px 0 var(--green-glow);
}

@keyframes glitch-clip-top {
  0%, 94%, 100% { transform: translate(0); }
  95% { transform: translate(-3px, -1px); }
  96% { transform: translate(2px, 1px); }
  97% { transform: translate(0); }
}

@keyframes glitch-clip-bottom {
  0%, 94%, 100% { transform: translate(0); }
  95% { transform: translate(3px, 1px); }
  96% { transform: translate(-2px, -1px); }
  97% { transform: translate(0); }
}

/* =========================================
   HERO
   ========================================= */

.hero {
  height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: var(--container-padding);
}

/* Purple radial burst — slow rotation */
.hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200%;
  height: 200%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--bg-primary) 0deg 10deg,
    var(--purple-dark) 10deg 20deg
  );
  opacity: 0.15;
  pointer-events: none;
  animation: hero-rotate 120s linear infinite;
}

@keyframes hero-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Green glow center — breathing */
.hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(91, 191, 33, 0.1) 0%, transparent 60%);
  pointer-events: none;
  animation: hero-breathe 4s ease-in-out infinite;
}

@keyframes hero-breathe {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

.hero-title {
  font-family: var(--font-logo);
  font-size: clamp(52px, 10vw, 130px);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--green);
  line-height: 0.95;
  z-index: 2;
  text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
  animation: glitch 5s infinite, hero-entrance 1s ease-out;
}

.hero-title .dot {
  color: var(--pink);
}

@keyframes hero-entrance {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.hero-subtitle {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-secondary);
  margin-top: var(--space-md);
  letter-spacing: 4px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  animation: fadeSlideUp 0.8s ease-out 0.3s both;
}

.hero-subtitle strong {
  color: var(--pink);
}

.hero-cta {
  margin-top: 36px;
  position: relative;
  z-index: 2;
  animation: fadeSlideUp 0.8s ease-out 0.6s both;
}

@media (max-width: 768px) {
  .hero {
    height: 60vh;
    padding: 20px;
  }

  .hero-subtitle {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .hero-title::before,
  .hero-title::after {
    display: none;
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero::before {
    animation: none;
  }
  .hero::after {
    animation: none;
  }
  .hero-title {
    animation: none;
  }
  .hero-subtitle,
  .hero-cta {
    animation: none;
    opacity: 1;
  }
  .glitch,
  .glitch-404,
  .glitch-hover:hover {
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pulse {
    animation: none;
  }
}

/* =========================================
   SCROLL REVEAL — STAGGERED
   ========================================= */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Staggered children — cards/items inside a reveal container */
.reveal.visible .disco-card,
.reveal.visible .news-card,
.reveal.visible .video-card,
.reveal.visible .concierto-card,
.reveal.visible .miembro-card,
.reveal.visible .miembro-card-full,
.reveal.visible .universo-card,
.reveal.visible .stat {
  animation: fadeSlideUp 0.5s ease-out both;
}

.reveal.visible > *:nth-child(1) .disco-card,
.reveal.visible > .disco-card:nth-child(1),
.reveal.visible > .news-card:nth-child(1),
.reveal.visible > .stat:nth-child(1),
.reveal.visible > *:nth-child(1) { --stagger: 0s; }

.reveal.visible > *:nth-child(2) .disco-card,
.reveal.visible > .disco-card:nth-child(2),
.reveal.visible > .news-card:nth-child(2),
.reveal.visible > .stat:nth-child(2),
.reveal.visible > *:nth-child(2) { --stagger: 0.08s; }

.reveal.visible > *:nth-child(3),
.reveal.visible > .stat:nth-child(3) { --stagger: 0.16s; }
.reveal.visible > *:nth-child(4),
.reveal.visible > .stat:nth-child(4) { --stagger: 0.24s; }
.reveal.visible > *:nth-child(5) { --stagger: 0.32s; }
.reveal.visible > *:nth-child(6) { --stagger: 0.40s; }

/* Apply stagger using grid children */
.disco-grid .disco-card,
.news-grid .news-card,
.about-stats .stat,
.universo-grid .universo-card,
.posts-grid .video-card {
  opacity: 0;
}

.reveal.visible .disco-grid .disco-card,
.reveal.visible .news-grid .news-card,
.reveal.visible .about-stats .stat,
.reveal.visible .universo-grid .universo-card,
.reveal.visible .posts-grid .video-card {
  animation: fadeSlideUp 0.5s ease-out both;
}

.reveal.visible .disco-grid .disco-card:nth-child(1),
.reveal.visible .news-grid .news-card:nth-child(1),
.reveal.visible .about-stats .stat:nth-child(1),
.reveal.visible .universo-grid .universo-card:nth-child(1) { animation-delay: 0s; }

.reveal.visible .disco-grid .disco-card:nth-child(2),
.reveal.visible .news-grid .news-card:nth-child(2),
.reveal.visible .about-stats .stat:nth-child(2),
.reveal.visible .universo-grid .universo-card:nth-child(2) { animation-delay: 0.1s; }

.reveal.visible .disco-grid .disco-card:nth-child(3),
.reveal.visible .news-grid .news-card:nth-child(3),
.reveal.visible .about-stats .stat:nth-child(3),
.reveal.visible .universo-grid .universo-card:nth-child(3) { animation-delay: 0.2s; }

.reveal.visible .disco-grid .disco-card:nth-child(4),
.reveal.visible .about-stats .stat:nth-child(4),
.reveal.visible .universo-grid .universo-card:nth-child(4) { animation-delay: 0.3s; }

.reveal.visible .disco-grid .disco-card:nth-child(5) { animation-delay: 0.4s; }
.reveal.visible .disco-grid .disco-card:nth-child(6) { animation-delay: 0.5s; }

/* =========================================
   CORE KEYFRAMES
   ========================================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

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

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

.fade-in { animation: fadeIn 0.5s ease-in; }
.slide-up { animation: slideUp 0.5s ease-out; }
.slide-left { animation: slideInLeft 0.5s ease-out; }
.slide-right { animation: slideInRight 0.5s ease-out; }
.scale-in { animation: scaleIn 0.4s ease-out; }

/* =========================================
   HOVER GLOWS & EFFECTS
   ========================================= */

.glow-green:hover {
  box-shadow: 0 0 30px rgba(91, 191, 33, 0.2);
}

.glow-pink:hover {
  box-shadow: 0 0 30px rgba(229, 77, 155, 0.2);
}

/* Gradient border shimmer on hover */
@keyframes shimmer-border {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* =========================================
   STATIC NOISE (404)
   ========================================= */

@keyframes static-noise {
  0% { background-position: 0 0; }
  10% { background-position: -5% -10%; }
  20% { background-position: -15% 5%; }
  30% { background-position: 7% -25%; }
  40% { background-position: 20% 25%; }
  50% { background-position: -25% 10%; }
  60% { background-position: 15% 5%; }
  70% { background-position: 0% 15%; }
  80% { background-position: 25% 35%; }
  90% { background-position: -10% 10%; }
  100% { background-position: 0 0; }
}

.static-bg {
  position: relative;
}

.static-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  animation: static-noise 0.3s steps(8) infinite;
  pointer-events: none;
  z-index: 0;
}

/* =========================================
   PULSE
   ========================================= */

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(229, 77, 155, 0.4);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 10px rgba(229, 77, 155, 0);
  }
}

/* =========================================
   COUNTER ANIMATION (stats)
   ========================================= */

.stat-number[data-count] {
  transition: none;
}

/* =========================================
   TIMELINE SCROLL PROGRESS
   ========================================= */

.timeline-track::before {
  transform-origin: left;
  transition: none;
}

.timeline-track[data-progress]::before {
  clip-path: inset(0 calc((1 - var(--progress, 1)) * 100%) 0 0);
}

/* Timeline items entrance */
.timeline-item {
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.timeline-item.visible {
  opacity: 1;
}

/* =========================================
   SECTION TITLE UNDERLINE DRAW
   ========================================= */

.section-header {
  position: relative;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--pink));
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.visible .section-header::after {
  width: 100%;
}

/* =========================================
   CONCERT BANNER GLOW PULSE
   ========================================= */

@keyframes banner-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(91, 191, 33, 0);
    border-color: rgba(91, 191, 33, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(91, 191, 33, 0.08);
    border-color: rgba(91, 191, 33, 0.35);
  }
}

.concert-banner {
  animation: banner-glow 3s ease-in-out infinite;
}

/* =========================================
   SMOOTH LOADING
   ========================================= */

@keyframes page-load {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.site-content {
  animation: page-load 0.4s ease-out;
}