/* ================================================
   Alfredo Soares - Shared Animations
   ================================================ */

html {
  overflow-x: hidden;
  max-width: 100vw;
}

/* --- Page Entrance --- */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Center the 1440px content block within any viewport width */
body {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  overflow-x: hidden !important;
  max-width: 100vw;
}

#root {
  animation: pageEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  flex-shrink: 0;
  margin: 0 auto;
}

/* Home: entrada da página um pouco mais lenta, para a transição ser mais perceptível */
html[data-page="home"] #root {
  animation-duration: 0.9s;
}

/* Home — timeline “Uma linha do tempo…” acima do imgGradienteMeio (transform + opacity criam stacking context) */
#root [data-home-timeline] {
  z-index: 5;
}

/* Home — Bora Varejo: cards estreitos / largos + título e número como no publish Figma */
#root [data-bora-stats] .bora-stat-card {
  width: 190px;
  flex-shrink: 0;
  transition: width 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
#root [data-bora-stats] .bora-stat-card--active {
  width: 280px;
}
#root [data-bora-stats] .bora-stat-card .bora-stat-card-label {
  color: rgba(255, 255, 255, 0.2);
  transition: color 0.35s ease;
}
#root [data-bora-stats] .bora-stat-card--active .bora-stat-card-label {
  color: #fff;
}
#root [data-bora-stats] .bora-stat-card .bora-stat-card-value {
  opacity: 0;
  transition: opacity 0.4s ease;
}
#root [data-bora-stats] .bora-stat-card--active .bora-stat-card-value {
  opacity: 1;
}

/* --- Scroll-triggered animation base --- */
.anim-hidden {
  opacity: 0;
  will-change: opacity, translate, scale;
}

/*
 * Use CSS Independent Transform Properties (translate / scale).
 * These COMPOSE with existing Tailwind `transform: translate(-50%, 0)`
 * instead of overriding it — so -translate-x-1/2 centering is preserved.
 *
 * anim-slide-down = starts ABOVE (-40px), slides DOWN to original position.
 * anim-slide-up   = starts BELOW (+40px), slides UP   to original position.
 */
.anim-slide-up    { translate: 0 40px;  }
.anim-slide-down  { translate: 0 -40px; }
.anim-slide-right { translate: -40px 0; }
.anim-slide-left  { translate: 40px 0;  }
.anim-scale       { scale: 0.91;        }
.anim-fade        { /* opacity only */  }

/* Transitions */
.anim-hidden.anim-slide-up,
.anim-hidden.anim-slide-down,
.anim-hidden.anim-slide-right,
.anim-hidden.anim-slide-left {
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              translate 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-hidden.anim-scale {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              scale 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-hidden.anim-fade {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Home: scroll-in mais lento (mesma curva) */
html[data-page="home"] .anim-hidden.anim-slide-up,
html[data-page="home"] .anim-hidden.anim-slide-down,
html[data-page="home"] .anim-hidden.anim-slide-right,
html[data-page="home"] .anim-hidden.anim-slide-left {
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              translate 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-page="home"] .anim-hidden.anim-scale {
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              scale 1s cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-page="home"] .anim-hidden.anim-fade {
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Triggered state: reset independent transforms → Tailwind transform stays intact */
.anim-hidden.anim-in {
  opacity: 1;
  translate: none;
  scale: none;
}

/* Alfredo timeline — scroll reveal must not override Figma fade on later milestones */
#root [data-timeline-group].anim-in[class*='opacity-65'] {
  opacity: 0.65 !important;
}
#root [data-timeline-group].anim-in[class*='opacity-20'] {
  opacity: 0.2 !important;
}
#root [data-timeline-group].anim-in[class*='opacity-15'] {
  opacity: 0.15 !important;
}

/* Delay modifiers */
.anim-d1 { transition-delay: 0.08s; }
.anim-d2 { transition-delay: 0.16s; }
.anim-d3 { transition-delay: 0.25s; }
.anim-d4 { transition-delay: 0.34s; }
.anim-d5 { transition-delay: 0.44s; }

html[data-page="home"] .anim-d1 { transition-delay: 0.12s; }
html[data-page="home"] .anim-d2 { transition-delay: 0.24s; }
html[data-page="home"] .anim-d3 { transition-delay: 0.36s; }
html[data-page="home"] .anim-d4 { transition-delay: 0.5s; }
html[data-page="home"] .anim-d5 { transition-delay: 0.64s; }

/* Home — timeline: atrasos em cascata (duração da transição igual ao resto da home) */
html[data-page="home"] #root [data-home-timeline] .anim-hidden.anim-slide-up,
html[data-page="home"] #root [data-home-timeline] .anim-hidden.anim-slide-down,
html[data-page="home"] #root [data-home-timeline] .anim-hidden.anim-slide-right,
html[data-page="home"] #root [data-home-timeline] .anim-hidden.anim-slide-left {
  transition: opacity 1.4s cubic-bezier(0.2, 0.85, 0.2, 1),
              translate 1.4s cubic-bezier(0.2, 0.85, 0.2, 1);
}
html[data-page="home"] #root [data-home-timeline] .anim-hidden.anim-fade {
  transition: opacity 1.5s cubic-bezier(0.2, 0.85, 0.2, 1);
}
html[data-page="home"] #root [data-home-timeline] .anim-d1 { transition-delay: 0.38s; }
html[data-page="home"] #root [data-home-timeline] .anim-d2 { transition-delay: 0.7s; }
html[data-page="home"] #root [data-home-timeline] .anim-d3 { transition-delay: 1.05s; }
html[data-page="home"] #root [data-home-timeline] .anim-d4 { transition-delay: 1.38s; }
html[data-page="home"] #root [data-home-timeline] .anim-d5 { transition-delay: 1.68s; }

/* ================================================
   Fixed Menu (menu-fixo) — same on all inner pages
   ================================================ */
.menu-fixo {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;
  max-width: 100vw;
  z-index: 1000;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.menu-fixo--scrolled {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* .menu-fixo link hover (underline + fade) */
.menu-fixo a {
  text-decoration: none;
}

/* Esconder navegação exportada do Figma (substituída pelo menu-fixo em todas as páginas) */
div[class*="left-[401px]"][class*="pointer-events-none"][class*="top-[37px]"] {
  display: none !important;
}

/* Home — composição do logo no herói (Figma top 253px) alinhada ao mesmo offset +76px */
#root [data-home-hero-logo] {
  top: 329px !important;
}

/* Home — entrada do nome (duas partes) + faixa de logos abaixo do herói */
@keyframes homeHeroNamePartIn {
  from {
    opacity: 0;
    transform: translateY(42px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Nome no centro do herói: mais lento e deslocamento maior para notar a descida */
#root [data-home-hero-name-part] {
  animation: homeHeroNamePartIn 2.35s cubic-bezier(0.2, 0.85, 0.2, 1) both;
  will-change: opacity, transform;
}
#root [data-home-hero-name-part]:first-of-type {
  animation-delay: 0.22s;
}
#root [data-home-hero-name-part]:last-of-type {
  animation-delay: 0.55s;
}

/*
 * Logos abaixo do herói: cada coluna (não o wrapper) — invisíveis até
 * .home-hero-logos--visible (IntersectionObserver na home) para o utilizador
 * ver a descida com a rolagem. Animação lenta, uma a uma.
 */
#root [data-home-hero-logos]:not(.home-hero-logos--visible) [data-home-hero-logo-item] {
  opacity: 0;
  transform: translateY(48px);
  pointer-events: none;
}
#root [data-home-hero-logos].home-hero-logos--visible [data-home-hero-logo-item] {
  animation: homeHeroLogosIn 2.1s cubic-bezier(0.2, 0.85, 0.2, 1) both;
  will-change: opacity, transform;
  pointer-events: auto;
}
#root [data-home-hero-logos].home-hero-logos--visible [data-home-hero-logo-item="0"] { animation-delay: 0.05s; }
#root [data-home-hero-logos].home-hero-logos--visible [data-home-hero-logo-item="1"] { animation-delay: 0.35s; }
#root [data-home-hero-logos].home-hero-logos--visible [data-home-hero-logo-item="2"] { animation-delay: 0.65s; }
#root [data-home-hero-logos].home-hero-logos--visible [data-home-hero-logo-item="3"] { animation-delay: 0.95s; }

/* Home — “Leia. Assista. Ouça…”: mesma entrada que as logos de clientes (scroll + cascata) */
#root [data-home-conteudo-cards]:not(.home-conteudo-cards--visible) [data-home-conteudo-card] {
  opacity: 0;
  transform: translateY(48px);
  pointer-events: none;
}
#root [data-home-conteudo-cards].home-conteudo-cards--visible [data-home-conteudo-card] {
  animation: homeHeroLogosIn 2.1s cubic-bezier(0.2, 0.85, 0.2, 1) both;
  will-change: opacity, transform;
  pointer-events: auto;
}
#root [data-home-conteudo-cards].home-conteudo-cards--visible [data-home-conteudo-card="0"] { animation-delay: 0.05s; }
#root [data-home-conteudo-cards].home-conteudo-cards--visible [data-home-conteudo-card="1"] { animation-delay: 0.35s; }
#root [data-home-conteudo-cards].home-conteudo-cards--visible [data-home-conteudo-card="2"] { animation-delay: 0.65s; }
#root [data-home-conteudo-cards].home-conteudo-cards--visible [data-home-conteudo-card="3"] { animation-delay: 0.95s; }

/* Home — traçado vermelho em links do conteúdo e cartões; menu fixo sem contorno (hover = sublinhado no JS) */
html[data-page="home"] .menu-fixo a {
  border-radius: 2px;
  transition: color 0.2s ease, opacity 0.2s ease;
  outline: none;
  box-shadow: none;
}
html[data-page="home"] .menu-fixo a:hover,
html[data-page="home"] .menu-fixo a:focus,
html[data-page="home"] .menu-fixo a:focus-visible {
  outline: none;
  box-shadow: none;
}
/* Sem traço no hover dos botões glass (já têm borda real + hover em .backdrop-blur) */
html[data-page="home"] #root a[href]:not(:has([class*='backdrop-blur'])) {
  transition: box-shadow 0.32s ease, outline 0.32s ease, opacity 0.2s ease;
  border-radius: 4px;
}
html[data-page="home"] #root a[href]:not(:has([class*='backdrop-blur'])):hover {
  outline: 2px solid #ea1c1c;
  outline-offset: 3px;
}
html[data-page="home"] #root [data-home-pilar-card] {
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.35s ease;
}
html[data-page="home"] #root [data-home-pilar-card]:hover {
  box-shadow: 0 0 0 2px #ea1c1c, 0 20px 48px rgba(0, 0, 0, 0.45);
  border-color: rgba(234, 28, 28, 0.45);
}
/* Cartões de vídeo / mídia na home: anel vermelho em conjunto com o lift existente */
html[data-page="home"] [class*="h-[452px]"][class*="rounded-[10px]"]:hover,
html[data-page="home"] [class*="h-[432px]"][class*="rounded-[10px]"]:hover,
html[data-page="home"] [class*="h-[207px]"][class*="rounded-[10px]"]:hover,
html[data-page="home"] [class*="h-[280px]"][class*="rounded-[10px]"]:hover,
html[data-page="home"] [class*="h-[320px]"][class*="rounded-[10px]"]:hover,
html[data-page="home"] [class*="rounded-[10px]"][class*="h-[167px]"]:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(234, 28, 28, 0.9) !important;
}

/* Herói: título + assinatura acima do fundo (stacking), alinhados ao deslocamento do logo (+76px no JSX) */
[data-name="Alfredo"] [class*="top-[334px]"],
[data-name="Alfredo"] [class*="top-[432px]"],
[data-name="Impacto"] [class*="top-[336px]"],
[data-name="Impacto"] [class*="top-[499px]"],
[data-name="Conteúdo"] [class*="top-[338px]"],
[data-name="Conteúdo"] [class*="top-[501.81px]"],
[data-name="Bora Varejo"] [class*="top-[339px]"],
[data-name="Bora Varejo"] [class*="top-[499px]"],
[data-name="Contato"] [class*="top-[376px]"],
[data-name="Contato"] [class*="top-[460px]"],
[data-name="Imprensa"] [class*="top-[376px]"],
[data-name="Imprensa"] [class*="top-[460px]"] {
  z-index: 5;
}

/* Impacto & Alfredo glass-card backgrounds — visual hover only (no translate) */
[class*="backdrop-blur-[7.5px]"][class*="border-solid"][class*="rounded-[10px]"] {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
[class*="backdrop-blur-[7.5px]"][class*="border-solid"][class*="rounded-[10px]"]:hover {
  border-color: rgba(234, 28, 28, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(234, 28, 28, 0.25), 0 10px 36px rgba(234, 28, 28, 0.12) !important;
  background: rgba(89, 89, 89, 0.45) !important;
}

/* Partner/client logo hover — all pages with opacity-65 logos */
[class*="opacity-65"] {
  transition: opacity 0.3s ease, filter 0.3s ease;
}
[class*="opacity-65"]:hover {
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) !important;
}


/* ================================================
   Page Exit Animation
   ================================================ */
.page-exiting {
  transition: opacity 0.28s ease, transform 0.28s ease !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
}

/* ================================================
   Hover Effects — shared across all inner pages
   ================================================ */

/* Video thumbnail cards (alfredo documentaries) */
[class*="h-[452px]"][class*="rounded-[10px]"],
[class*="h-[432px]"][class*="rounded-[10px]"] {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
[class*="h-[452px]"][class*="rounded-[10px]"]:hover,
[class*="h-[432px]"][class*="rounded-[10px]"]:hover {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
}

/* Timeline photo frames */
[class*="rounded-[10px]"][class*="h-[167px]"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
[class*="rounded-[10px]"][class*="h-[167px]"]:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

/* Play button circles */
[class*="size-[76px]"] {
  transition: transform 0.25s ease;
}
[class*="size-[76px]"]:hover {
  transform: scale(1.15) !important;
}

/* Imprensa / bora-varejo article/media cards */
[class*="h-[207px]"][class*="rounded-[10px]"],
[class*="h-[280px]"][class*="rounded-[10px]"],
[class*="h-[320px]"][class*="rounded-[10px]"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
[class*="h-[207px]"][class*="rounded-[10px]"]:hover,
[class*="h-[280px]"][class*="rounded-[10px]"]:hover,
[class*="h-[320px]"][class*="rounded-[10px]"]:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 36px rgba(234, 28, 28, 0.15) !important;
}

/* Imprensa — official photos carousel cards */
.imprensa-photo-card {
  transition: translate 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease !important;
}
.imprensa-photo-card:hover {
  translate: 0 -6px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(234, 28, 28, 0.35) !important;
  filter: brightness(1.04);
}

/* CTA buttons (white/black bg 41px height) */
[class*="bg-white"][class*="h-[41px]"][class*="rounded-[10px]"],
[class*="bg-black"][class*="h-[41px]"][class*="rounded-[10px]"] {
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  cursor: pointer;
}
[class*="bg-white"][class*="h-[41px]"][class*="rounded-[10px]"]:hover,
[class*="bg-black"][class*="h-[41px]"][class*="rounded-[10px]"]:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Image subtle zoom on hover */
img {
  transition: transform 0.4s ease;
}

/* ================================================
   Home — colagem de fotos: espalhadas → encaixe no scroll
   ================================================ */
#root [data-refmax-collage] [data-refmax-collage-tile] {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transform-origin: center center;
  transition:
    transform 1.45s cubic-bezier(0.18, 0.88, 0.22, 1),
    opacity 1.05s ease;
  transition-delay: var(--refmax-stagger, 0ms);
  will-change: transform, opacity;
}

#root [data-refmax-collage].refmax-collage--pending [data-refmax-collage-tile] {
  transform: translate3d(var(--refmax-sx, 0), var(--refmax-sy, 0), 0) scale(0.88);
  opacity: 0;
  transition: none;
}

/* Atraso em cadeia ao montar a colagem (deslocamentos ~40% maiores = mais “afastadas” no início) */
#root [data-refmax-collage] [data-refmax-tile-index="0"] { --refmax-sx: 124px;  --refmax-sy: 82px;  --refmax-stagger: 0ms; }
#root [data-refmax-collage] [data-refmax-tile-index="1"] { --refmax-sx: -132px; --refmax-sy: 70px;  --refmax-stagger: 70ms; }
#root [data-refmax-collage] [data-refmax-tile-index="2"] { --refmax-sx: 32px;   --refmax-sy: -114px; --refmax-stagger: 140ms; }
#root [data-refmax-collage] [data-refmax-tile-index="3"] { --refmax-sx: -150px; --refmax-sy: 82px;  --refmax-stagger: 210ms; }
#root [data-refmax-collage] [data-refmax-tile-index="4"] { --refmax-sx: 126px;  --refmax-sy: -72px; --refmax-stagger: 280ms; }
#root [data-refmax-collage] [data-refmax-tile-index="5"] { --refmax-sx: 110px;  --refmax-sy: 100px; --refmax-stagger: 350ms; }
#root [data-refmax-collage] [data-refmax-tile-index="6"] { --refmax-sx: -44px;  --refmax-sy: 124px; --refmax-stagger: 420ms; }
#root [data-refmax-collage] [data-refmax-tile-index="7"] { --refmax-sx: 134px;  --refmax-sy: 34px;  --refmax-stagger: 490ms; }
#root [data-refmax-collage] [data-refmax-tile-index="8"] { --refmax-sx: -80px;  --refmax-sy: -108px; --refmax-stagger: 560ms; }

#root [data-refmax-collage].refmax-collage--assembled [data-refmax-collage-tile] {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  #root [data-refmax-collage].refmax-collage--pending [data-refmax-collage-tile] {
    transform: none;
    opacity: 1;
    transition: none;
  }
  #root [data-home-hero-name-part] {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  #root [data-home-hero-logos] [data-home-hero-logo-item] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }
  #root [data-home-conteudo-cards] [data-home-conteudo-card] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }
}