/* === Brevya Animations === */
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes scale-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes shimmer { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes spotlight-in {
  0% { opacity: 0; transform: translate(-72%, -62%) scale(.5); }
  100% { opacity: 1; transform: translate(-50%, -40%) scale(1); }
}
@keyframes scroll-indicator { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes hint-arrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

.animate-float { animation: float 4s ease-in-out infinite; }
.animate-scroll-indicator { animation: scroll-indicator 2s ease-in-out infinite; }
.animate-hint { animation: hint-arrow 1.5s ease-in-out infinite; display: inline-block; }
.animate-fade-up { animation: fade-up .7s ease-out both; }
.animate-scale-in { animation: scale-in .4s ease-out both; }

/* Hero spotlight — SVG cone (replaces old radial-gradient div) */
.hero-spotlight {
  position: absolute;
  top: -10rem; left: 0;
  height: 169%; width: 138%;
  z-index: 1; pointer-events: none;
  opacity: 0;
  animation: spotlight-in 2s ease .75s forwards;
}
@media (min-width: 768px) {
  .hero-spotlight { left: 15rem; top: -5rem; }
}
@media (min-width: 1024px) {
  .hero-spotlight { width: 84%; }
}

/* Spotlight radial glow (used in other sections e.g. Pablo) */
.spotlight-bg {
  position: absolute; top: -10rem; left: 60px;
  width: 800px; height: 600px;
  background: radial-gradient(ellipse at center, hsl(56 18% 51% / 0.18), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
  animation: spotlight-in 2s ease .75s both;
}

/* Hero background beams (animated SVG strokes) */
.beams-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.beams-bg svg { position: absolute; width: 100%; height: 100%; }
.beams-bg path { stroke: hsl(56 18% 51%); stroke-width: .5; fill: none; opacity: .65; }

/* Marquee for tech logos */
.marquee {
  display: flex; width: max-content; align-items: center; gap: 4rem;
  animation: scroll-left 40s linear infinite;
}
.marquee:hover { animation-play-state: paused; }
.marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Tech logo mask (gold gradient look) */
.tech-logo {
  flex-shrink: 0;
  background: linear-gradient(135deg, hsl(56 18% 65%) 0%, hsl(56 18% 51%) 50%, hsl(40 30% 35%) 100%);
  opacity: .8; transition: opacity .4s;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.tech-logo:hover { opacity: 1; }

/* Text-generate effect (per-word reveal) */
.text-gen span {
  display: inline-block; opacity: 0; filter: blur(10px);
  transition: opacity .5s ease, filter .5s ease;
}
.text-gen span.is-in { opacity: 1; filter: blur(0); }

/* Hero title gradient per word */
.hero-title.text-gen span {
  background: linear-gradient(to right, hsl(var(--foreground)), hsl(var(--primary)), hsl(var(--foreground)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-right: .3em;
}

/* Pulse dot */
@keyframes pulse-dot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }