/* =========================================================
   Donini — portfolio
   Tokens ficam em variables.css (carregado antes deste no HTML).
   Organização: reset → base → utilitários → componentes → responsivo
   ========================================================= */

/* ----------------------------- Reset ----------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ----------------------------- Base ------------------------------ */
body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* --------------------------- Utilitários ------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ----------------------------- Hero ------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

/* Camada de fundo: gradiente pastel que "respira" lentamente. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--gradient-main);
  background-size: 200% 200%;
  animation: hero-gradient 14s ease-in-out infinite;
}

/* Desbota o rodapé até a cor da página, costurando a transição. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 55%, var(--color-bg) 100%);
  pointer-events: none;
}

@keyframes hero-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-6) var(--space-4);
}

.hero__logo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-2);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Mesma elevação dos vídeos, aplicada às fotos do hero e do footer. */
.hero__logo:hover,
.cta__logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(43, 47, 85, 0.18);
}

.hero__brand {
  font-size: var(--text-3xl);
}

.hero__tagline {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* Tagline em sequência: "Don't blend in." entra em 1s. */
.hero__tagline-first {
  display: inline-block;
  opacity: 0;
  animation: tagline-enter 0.6s ease 1s both;
}

/* "Stand out": entra em 2s; logo depois, um marcador com o gradiente
   da marca passa por trás do texto, que vira branco. Fica destacado. */
.hero__highlight {
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 0 0.18em;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  opacity: 0;
  animation:
    tagline-fade 0.6s ease 2s both,
    highlight-text 0.4s ease-out 2.5s forwards;
}

/* Marcador que "pinta" atrás do texto, da esquerda para a direita. */
.hero__highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.25em;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: highlight-swipe 0.55s ease-out 2.4s forwards;
}

@keyframes tagline-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes tagline-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Marcador cresce da esquerda para a direita. */
@keyframes highlight-swipe {
  to { transform: scaleX(1); }
}

/* Texto vira branco quando o marcador o cobre. */
@keyframes highlight-text {
  to { color: #fff; }
}

.hero__icons {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.hero__icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: 50%;
  transition: color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.hero__icons a:hover {
  color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
}

/* ----------------------------- Work ------------------------------ */
.work {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-4) var(--space-6);
}

/* --- Featured: texto + vídeo lado a lado, zigue-zague automático --- */
.featured {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.3fr);
  align-items: center;
  gap: var(--space-4);
}

/* Cases pares invertem a ordem (vídeo à esquerda, texto à direita) */
.featured:nth-of-type(even) .featured__info {
  order: 2;
  text-align: right;
}

.featured__label {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.featured__client {
  font-size: var(--text-lg);
  margin-top: var(--space-1);
}

.featured__subs {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}

/* Mantém o slot do vídeo em 16:9 — o iframe do YouTube preenche tudo */
.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.video-embed:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(43, 47, 85, 0.18);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Review: depoimento largo, sem card, "blended" na página --- */
.review {
  max-width: 960px;
  margin-inline: auto;
  padding: var(--space-3);
  text-align: center;
  transition: transform var(--transition-base);
}

/* Hover: cresce a review inteira (e volta ao sair). */
.review:hover {
  transform: scale(1.05);
}

.review__stars {
  font-size: var(--text-lg);
  letter-spacing: 0.15em;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-1);
}

.review__quote {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  font-style: italic;
  color: var(--color-text-primary);
}

.review__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.review__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.review__author-meta {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.review__author-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* ------------------------------ CTA ------------------------------ */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-6);
  text-align: center;
}

/* Mesmo gradiente "respirando" do hero. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--gradient-main);
  background-size: 200% 200%;
  animation: hero-gradient 14s ease-in-out infinite;
}

/* Desbota o topo até a cor da página. */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, transparent 55%, var(--color-bg) 100%);
  pointer-events: none;
}

.cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.cta__logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-2);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cta__title {
  font-size: var(--text-xl);
}

.cta__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.cta__button {
  margin-top: var(--space-3);
  padding: 0.875rem 2.125rem;
  font-weight: var(--weight-medium);
  color: #fff;
  background: var(--gradient-accent);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.cta__button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* ------------------------ Reveal no scroll ----------------------- */
/* O JS adiciona .is-visible quando o elemento entra na viewport. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------- Responsivo -------------------------- */
@media (max-width: 720px) {
  .featured,
  .featured:nth-of-type(even) .featured__info {
    grid-template-columns: 1fr;
    order: 0;
    text-align: center;
  }

  .featured__info {
    text-align: center;
  }
}

/* Respeita quem prefere menos animação: desliga tudo. */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .cta::before,
  .hero__tagline-first,
  .hero__highlight {
    animation: none;
  }

  .hero__tagline-first,
  .hero__highlight {
    opacity: 1;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__icons a,
  .hero__logo,
  .cta__logo,
  .review,
  .video-embed,
  .cta__button {
    transition: none;
  }
}