/* ---------------------------------------------------------
   ANIMAÇÕES — reveals, transitions
   Aplicadas via classe .is-inview / .is-active gerada por IntersectionObserver
   --------------------------------------------------------- */

/* Reveal simples: fade + subir */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal="right"] { transform: translate3d(-32px, 0, 0); }
[data-reveal="left"]  { transform: translate3d(32px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="clip"]  {
  clip-path: inset(0 100% 0 0);
  transform: none;
  opacity: 1;
  transition: clip-path 1.4s var(--ease-out);
}

.is-inview[data-reveal],
[data-reveal].is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal="clip"].is-inview {
  clip-path: inset(0 0 0 0);
}

/* Split lines (para titles) */
.split-line {
  overflow: hidden;
  display: inline-block;
}
.split-line__inner {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
}
.is-inview .split-line__inner {
  transform: translateY(0);
}
.is-inview .split-line:nth-child(2) .split-line__inner { transition-delay: 80ms; }
.is-inview .split-line:nth-child(3) .split-line__inner { transition-delay: 160ms; }
.is-inview .split-line:nth-child(4) .split-line__inner { transition-delay: 240ms; }

/* Count up (only styling — actual value replaced by JS) */
.count-up { display: inline-block; }

/* Marquee horizontal */
.marquee {
  display: flex;
  gap: 60px;
  align-items: center;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ─── Encerramento ──────────────────────────────── */
.encerramento-slide {
  background: #020C2A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(40px, 10vh, 120px) clamp(32px, 6vw, 80px) clamp(40px, 6vh, 72px);
  position: relative;
  overflow: hidden;
}

.encerramento__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vh, 44px);
  width: min(90vw, 900px);
  opacity: 0;
  animation: encerramento-fade 1s ease forwards 0.3s;
  position: relative;
  z-index: 3;
}

.encerramento__logo {
  width: 92%;
  height: auto;
}

.encerramento__slogan {
  font-family: 'Just Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 44px);
  line-height: 1.25;
  color: rgba(255, 255, 255, .90);
  margin: 0;
  letter-spacing: -0.005em;
  text-align: center;
  width: 100%;
}
.encerramento__slogan em {
  color: var(--faj-orange-soft);
  font-style: normal;
  font-weight: 600;
}

.encerramento__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  opacity: 0;
  animation: encerramento-fade 1s ease forwards 0.7s;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}

.enc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-family: 'Just Sans', sans-serif;
  font-size: clamp(11px, 0.9vw, 15px);
  font-weight: 400;
  letter-spacing: 0.03em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}
.enc-link svg {
  width: clamp(14px, 1.2vw, 18px);
  height: clamp(14px, 1.2vw, 18px);
  flex-shrink: 0;
}
.enc-link:hover {
  border-color: rgba(255,255,255,.6);
  color: #fff;
  background: rgba(255,255,255,.06);
}

@keyframes encerramento-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Slogan Morph ─────────────────────────────── */
.slogan-morph-slide {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.slogan-morph__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 83%;
  opacity: 0.12;
  mix-blend-mode: multiply;
}

.slogan-morph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(32px, 5vw, 80px);
  padding-top: clamp(60px, 14vh, 180px);
}

.slogan-morph__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(32px, 5vw, 80px);
  padding-top: clamp(16px, 2vh, 28px);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition:
    opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    filter  0.75s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.slogan-morph__layer.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  pointer-events: auto;
}

.slogan-morph__layer.is-leaving {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-14px);
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    filter  0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.slogan-morph__text {
  font-family: 'Just Sans', sans-serif;
  font-size: clamp(24px, 4.5vw, 72px);
  font-weight: 300;
  color: #041942;
  line-height: 1.1;
  text-align: center;
  width: 100%;
  margin: 0;
  letter-spacing: -0.01em;
}

.slogan-morph__text em {
  font-style: normal;
  font-weight: 600;
  color: #81b6ff;
}

.slogan-morph__typewriter {
  display: inline;
}
.slogan-morph__typewriter::after {
  content: '|';
  margin-left: 3px;
  color: #81b6ff;
  animation: cursor-blink 0.65s step-start infinite;
}
.slogan-morph__typewriter.is-done::after {
  display: none;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Loader */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #041942;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out, visibility 0.5s;
}
body.loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #041942;
}

/* Mobile: alguns browsers mostram fundo cinza no <video> antes do autoplay
   e nas áreas de letterbox do object-fit:contain. Forçamos o navy em cima
   do próprio elemento + no container pra selar as laterais. */
@media (max-width: 860px) {
  .loader { background: #041942 !important; }
  .loader__video {
    background: #041942 !important;
    background-color: #041942 !important;
    object-fit: cover;
  }
}