/**
 * ===================================================================
 * interactive.css — adaugiri pentru intro animat
 *
 * Fundal animat (canvas) + gradient subtil in miscare in spatele
 * numelui. Se incarca dupa main.css, deci suprascrie unde e nevoie.
 * -------------------------------------------------------------------
 */

/* gradient animat subtil peste imaginea de fundal */
#intro {
  background: #151515;
  overflow: hidden;
}
#intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(204, 0, 95, 0.25), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(40, 80, 160, 0.22), transparent 55%),
    url(../images/intro-bg.jpg) no-repeat center bottom;
  background-size: cover;
  z-index: 0;
  animation: introHue 18s ease-in-out infinite alternate;
}

@keyframes introHue {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(25deg) brightness(1.08); }
}

/* canvasul cu particule, intre overlay si continut */
#intro-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none; /* clickurile trec spre linkuri */
}

/* overlayul intunecat ramane sub particule */
.intro-overlay {
  z-index: 1;
}

/* continutul deasupra tuturor */
.intro-content,
.intro-social {
  position: relative;
  z-index: 3;
}
.intro-social {
  position: absolute; /* pastreaza pozitionarea originala */
}

/* ----- NUMELE: shadow in spate + glow interactiv ----- */
.intro-content h1 {
  /* fade-in la incarcare (doar opacitate, ca sa nu blocheze hover-ul) */
  animation: introFade 1.2s ease-out both;
  cursor: default;
  transition: transform 0.45s cubic-bezier(.2, .8, .3, 1),
              text-shadow 0.45s ease, color 0.45s ease;
  /* umbra in spate (adancime) + halou foarte discret in culoarea de accent */
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 8px 26px rgba(0, 0, 0, 0.6),
    0 0 22px rgba(204, 0, 95, 0.2);
}
.intro-content h1:hover {
  transform: scale(1.03);
  color: #ffffff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.4),
    0 10px 32px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(204, 0, 95, 0.4);
}

/* ----- ICONITE SOCIALE: ridicare + glow la hover ----- */
.intro-social {
  animation: introReveal 1.1s ease-out 0.45s both;
}
.intro-social li a {
  display: inline-block;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s cubic-bezier(.2, .8, .3, 1.4),
              color 0.3s ease, text-shadow 0.3s ease;
}
.intro-social li a:hover,
.intro-social li a:focus {
  color: #cc005f;
  transform: translateY(-7px) scale(1.2);
  text-shadow:
    0 0 18px rgba(204, 0, 95, 0.9),
    0 0 44px rgba(204, 0, 95, 0.5);
}

/* ----- MOTTO ----- */
.intro-motto {
  position: relative;
  z-index: 3;
  max-width: 620px;
  margin: 2rem auto 0;
  font-family: "lora-italic", Georgia, serif;
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  animation: introFade 1.2s ease-out 0.75s both;
}
.intro-motto .motto-author {
  font-family: "poppins-semibold", sans-serif;
  font-style: normal;
  color: #cc005f;
  letter-spacing: .04rem;
  /* glow roz lent care "respira" — discret, ca sa nu concureze cu numele */
  animation: mottoGlow 5s ease-in-out 2s infinite;
}
/* punctuatia apare doar daca partea respectiva are text */
.intro-motto .motto-quote:not(:empty)::before { content: "\201C"; }
.intro-motto .motto-quote:not(:empty)::after  { content: "\201D"; }
.intro-motto .motto-author:not(:empty)::before {
  content: " \2014 "; /* — em dash inainte de autor */
  color: rgba(255, 255, 255, 0.6);
}

@keyframes introFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes introReveal {
  from {
    opacity: 0;
    transform: translateY(1.6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* pulsatie fina de glow pe numele autorului */
@keyframes mottoGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(204, 0, 95, 0.2); }
  50%      { text-shadow: 0 0 16px rgba(204, 0, 95, 0.65); }
}

/* respecta preferinta de miscare redusa */
@media (prefers-reduced-motion: reduce) {
  #intro::before { animation: none; }
  .intro-content h1,
  .intro-social,
  .intro-motto,
  .intro-motto .motto-author { animation: none; }
}