/* =========================================================
   ANIMATIONS LAYER
   Port vanilla (CSS + JS) de todos os efeitos/animações do
   projeto de referência "portfolio" (Next.js) — BlurText,
   FadeContent, TextType, RotatingText, ShinyText, reveals
   com stagger, hover scale/rotate e parallax.
   ========================================================= */

:root {
  --anim-ease: cubic-bezier(.22, .61, .36, 1);
  --anim-spring: cubic-bezier(.34, 1.3, .45, 1);
}

/* === TextType (typewriter) === */
.typed { color: inherit; }
.caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.15em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: caret-blink 0.85s step-end infinite;
}

@keyframes caret-blink { 50% { opacity: 0; } }

/* === RotatingText (vertical rolodex) === */
.rot-wrap {
  display: inline-flex;
  overflow: hidden;
  height: 1.4em;
  vertical-align: bottom;
}

.rot-col {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s var(--anim-spring);
  will-change: transform;
}

.rot-item {
  height: 1.4em;
  line-height: 1.4em;
  white-space: nowrap;
}

.rot-item.rot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rot-item svg {
  width: 1.15em;
  height: 1.15em;
  color: var(--accent);
}

/* === Hover scale / lift (whileHover) === */
.tag,
.skill-cell,
.project-tag,
.pill-link {
  transition: all 0.25s var(--anim-ease);
}

.tag:hover,
.skill-cell:hover,
.project-tag:hover,
.pill-link:hover {
  transform: translateY(-2px);
}

.cta-btn {
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.25s var(--anim-ease),
    box-shadow 0.3s ease;
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px var(--accent-glow);
}

/* === Hover icons (ProjectCard / YourProjectCard) === */
.social-link svg,
.pill-link svg,
.yt-icon svg,
.discord-icon svg {
  transition: transform 0.3s var(--anim-ease);
}

.social-link:hover svg,
.pill-link:hover svg,
.yt-card:hover .yt-icon svg,
.yt-card:hover .discord-icon svg {
  transform: rotate(-10deg) scale(1.18);
}

/* === Skill cell zoom-in reveal === */
.skill-cell.reveal {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s ease-out, transform 0.4s var(--anim-spring);
}

.skill-cell.reveal.visible {
  opacity: 1;
  transform: scale(1);
}

/* === whileInView variants === */
.reveal[data-variant="left"] { transform: translateX(-40px); }
.reveal[data-variant="right"] { transform: translateX(40px); }
.reveal[data-variant="scale"] { transform: scale(0.92); }
.reveal[data-variant="blur"] { filter: blur(10px); transform: translateY(10px); }

.reveal[data-variant="left"].visible,
.reveal[data-variant="right"].visible { transform: none; }

.reveal[data-variant="scale"].visible { transform: none; }

.reveal[data-variant="blur"].visible {
  filter: none;
  transform: none;
}

/* === BlurText (word-by-word) === */
.bw-cluster .bw-word {
  margin-right: 0.28em;
}

.bw-cluster .bw-word:last-child {
  margin-right: 0;
}

.bw-word {
  display: inline-block;
  will-change: transform, filter, opacity;
}

.bw-anim {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px);
  transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s ease;
}

/* direções do BlurText do portfolio (prop direction) */
[data-blur-direction="top"] .bw-anim { transform: translateY(-14px); }
[data-blur-direction="left"] .bw-anim { transform: translateX(-14px); }
[data-blur-direction="right"] .bw-anim { transform: translateX(14px); }

.bw-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* === Spring accordion (AnimatePresence) === */
.project-detail,
.verse-full {
  transition-timing-function: var(--anim-spring);
}

/* === Button/action glow pulse === */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--accent-glow); }
  50% { box-shadow: 0 0 26px var(--accent-glow); }
}

.nav-link.active {
  animation: glow-pulse 2.6s ease-in-out infinite;
}

/* Keep the interaction language quiet and system-like. */
.nav-link.active {
  animation: none;
}

.social-link:hover svg,
.pill-link:hover svg,
.yt-card:hover .yt-icon svg,
.yt-card:hover .discord-icon svg {
  transform: scale(1.08);
}

/* === Parallax helpers === */
[data-parallax] {
  will-change: transform;
}

[data-mouse-parallax] {
  transition: transform 0.4s var(--anim-ease);
  will-change: transform;
}

/* === CTA arrow micro-bounce === */
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.arrow-purple {
  animation: none;
}

.cta-btn:hover .arrow-purple {
  animation: none;
  transform: translateX(3px);
}

/* === reduced-motion disabled — force all animations === */

/* === Line pop-in (about) — transitions.dev style === */
.about-para {
  --para-line-dur: 850ms;
  --para-line-distance: 10px;
  --para-line-stagger: 140ms;
  --para-line-blur: 3px;
  --para-line-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes para-line-pop-in {
  0% {
    transform: translateY(var(--para-line-distance));
    opacity: 0;
    filter: blur(var(--para-line-blur));
  }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

.para-line {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.about-para.visible .para-line {
  animation: para-line-pop-in var(--para-line-dur) var(--para-line-ease) both;
}

@keyframes about-text-line-in {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(0.45em);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.about-full-text .about-text-line {
  display: block;
  margin-bottom: 1.5rem;
  color: #fff;
  opacity: calc(1 - var(--ld, 0) * 0.25);
  transform: scale(calc(1 - var(--ld, 0) * 0.025));
  filter: blur(calc(var(--ld, 0) * 1.2px));
  transform-origin: left center;
  transition:
    opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    color 360ms ease;
  will-change: transform, opacity, filter;
}

.about-full-text .about-text-line:last-child {
  margin-bottom: 0;
  margin-left: 1.5rem;
}

.about-full-text .about-text-line.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  color: #fff;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: -0.03em;
}

.about-full-text .about-text-line.is-past {
  color: var(--text-muted);
}

.about-full-text .about-text-line.is-future {
  color: var(--text-dim);
}

.about-full-text .about-line-char {
  display: inline-block;
  min-width: 0.02em;
}

/* === GitHub graph — células construídas uma a uma === */
@keyframes gh-cell-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.35);
    filter: blur(2px);
  }
  65% {
    opacity: 1;
    transform: scale(1.08);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.gh-cell {
  opacity: 0;
  transform: scale(0.35);
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.gh-graph-ready .gh-cell {
  animation: gh-cell-pop-in 460ms var(--anim-spring) both;
  animation-delay: calc(var(--gh-cell-index, 0) * 18ms);
}

/* === About typewriter — braces open on scroll === */
.about-typewriter {
  position: relative;
}

.about-typewriter .about-brace {
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  transition: transform 0.65s var(--anim-spring);
  will-change: transform;
}

.about-typewriter .about-typewriter-copy {
  display: inline;
}

.about-typewriter:not(.about-typewriter-open) .about-typewriter-copy {
  opacity: 0;
}

.about-typewriter-open .about-brace-open {
  transform: translateX(-0.18em);
}

.about-typewriter-open .about-brace-close {
  transform: translateX(0.18em);
}

@keyframes typewriter-char-in {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(0.35em) scale(0.94);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.about-typewriter .typewriter-char {
  display: inline-block;
  min-width: 0.02em;
  white-space: pre;
  animation: typewriter-char-in 420ms var(--anim-spring) both;
  will-change: transform, opacity, filter;
}

/* === About photo (placeholder) — jello-horizontal === */
.about-photo {
  width: 128px;
  height: 128px;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-card);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  opacity: 0;
  float: right;
  margin: 0.5rem 0 1.5rem 1.5rem;
}

@media (min-width: 640px) {
  .about-photo { margin-right: -2.5rem; }
}

@keyframes jello-horizontal {
  0%   { transform: scale3d(1, 1, 1); opacity: 0; animation-timing-function: ease-in-out; }
  30%  { transform: scale3d(1.25, 0.75, 1); opacity: 1; animation-timing-function: ease-in-out; }
  40%  { transform: scale3d(0.75, 1.25, 1); animation-timing-function: ease-in-out; }
  50%  { transform: scale3d(1.15, 0.85, 1); animation-timing-function: ease-in-out; }
  65%  { transform: scale3d(0.95, 1.05, 1); animation-timing-function: ease-in-out; }
  75%  { transform: scale3d(1.05, 0.95, 1); animation-timing-function: ease-in-out; }
  100% { transform: scale3d(1, 1, 1); opacity: 1; }
}

.about-photo.visible {
  animation: jello-horizontal 1.5s both;
}

/* === Tags a agrupar-se === */
.open-to.visible .tag {
  animation: tag-group-in 0.45s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

.open-to.visible .tag:nth-child(1) { animation-delay: 0.15s; }
.open-to.visible .tag:nth-child(2) { animation-delay: 0.23s; }
.open-to.visible .tag:nth-child(3) { animation-delay: 0.31s; }
.open-to.visible .tag:nth-child(4) { animation-delay: 0.39s; }
.open-to.visible .tag:nth-child(5) { animation-delay: 0.47s; }
.open-to.visible .tag:nth-child(n+6) { animation-delay: 0.55s; }

@keyframes tag-group-in {
  0%   { opacity: 0; transform: scale(0.5) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* === Footer reveal === */
.footer-inner {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.footer.visible .footer-inner {
  opacity: 1;
  transform: none;
}

.footer .footer-tagline {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: 0.3s;
}

.footer.visible .footer-tagline {
  opacity: 1;
  transform: none;
}

.footer .verse-btn {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: 0.5s;
}

.footer.visible .verse-btn {
  opacity: 1;
  transform: scale(1);
}

.footer .verse-full {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: 0.7s;
}

.footer.visible .verse-full {
  opacity: 1;
  transform: none;
}

html.reduce-motion .footer-inner,
html.reduce-motion .footer .footer-tagline,
html.reduce-motion .footer .verse-btn,
html.reduce-motion .footer .verse-full {
  opacity: 1;
  transform: none;
  transition: none;
}