/* ============================================================
   CUSTOM STYLES – Meta-Analysis Academy
   Tailwind handles utilities; this file covers:
   - scroll-reveal animation
   - stagger delays
   - smooth scroll
   - navbar dropdown
============================================================ */

html {
  scroll-behavior: smooth;
}

/* ---------- Scroll-reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Gradient button ---------- */
.btn-gradient {
  background: linear-gradient(135deg, #2d4fa1 0%, #111c36 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transition: all 0.6s ease;
  z-index: -1;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(45, 79, 161, 0.3);
}

.btn-gradient:hover::before {
  left: 100%;
}

/* Tech points effect on hover */
.btn-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 15px 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-gradient:hover::after {
  opacity: 1;
}

.btn-gradient:active {
  transform: scale(.97);
}

/* ---------- Navbar dropdown ---------- */

/* Garante que o grupo de hover funcione mesmo com gap entre botão e panel */
.group:hover>div[role="menu"],
.group:focus-within>div[role="menu"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) translateX(-50%) !important;
}

/* Bridge invisível que elimina o gap entre botão e dropdown */
.group>div[role="menu"]::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* ---------- Logos carousel ---------- */
.logos-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: max-content;
  animation: logos-scroll 60s linear infinite;
}

.logos-track img {
  height: 3rem;
  width: auto;
  max-width: 220px;
}

@keyframes logos-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-25% - 1.25rem));
  }
}

/* Text-based journal wordmarks (match logo carousel visual weight) */
.journal-wordmark {
  flex-shrink: 0;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Times New Roman', Georgia, serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
}

/* ---------- Mosaic photo carousel (our-mission) ---------- */
.mosaic-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 2.5rem 0;
}

.mosaic-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: max-content;
  padding: 2rem 0;
  will-change: transform;
}

.mosaic-track-top {
  animation: mosaic-scroll 80s linear infinite;
}

.mosaic-track-bottom {
  animation: mosaic-scroll 95s linear infinite;
}

@keyframes mosaic-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.3333%); }
}

.mosaic-card {
  --rotate: 0deg;
  --ty: 0px;
  --push: 0px;
  --scale: 1;
  flex-shrink: 0;
  width: 280px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 10px 25px -6px rgba(10, 17, 32, 0.18), 0 6px 10px -6px rgba(10, 17, 32, 0.12);
  transform: translateX(var(--push)) rotate(var(--rotate)) translateY(var(--ty)) scale(var(--scale));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

.mosaic-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mosaic-card:nth-child(6n)   { --rotate: -2.6deg; }
.mosaic-card:nth-child(6n+1) { --rotate: 1.8deg; }
.mosaic-card:nth-child(6n+2) { --rotate: -1.2deg; --ty: -6px; }
.mosaic-card:nth-child(6n+3) { --rotate: 2.4deg; --ty: 4px; }
.mosaic-card:nth-child(6n+4) { --rotate: -3deg; }
.mosaic-card:nth-child(6n+5) { --rotate: 0.8deg; --ty: -3px; }

.mosaic-card:hover {
  --rotate: 0deg;
  --ty: 0px;
  --scale: 1.45;
  z-index: 30;
  box-shadow: 0 25px 55px -12px rgba(10, 17, 32, 0.45);
}

/* Magnet-push on neighbors */
.mosaic-card:hover + .mosaic-card                                   { --push: 55px; }
.mosaic-card:hover + .mosaic-card + .mosaic-card                    { --push: 22px; }
.mosaic-card:has(+ .mosaic-card:hover)                              { --push: -55px; }
.mosaic-card:has(+ .mosaic-card + .mosaic-card:hover)               { --push: -22px; }

@media (max-width: 640px) {
  .mosaic-card { width: 200px; height: 150px; }
  .mosaic-card:hover { --scale: 1.25; }
  .mosaic-card:hover + .mosaic-card                                 { --push: 30px; }
  .mosaic-card:hover + .mosaic-card + .mosaic-card                  { --push: 12px; }
  .mosaic-card:has(+ .mosaic-card:hover)                            { --push: -30px; }
  .mosaic-card:has(+ .mosaic-card + .mosaic-card:hover)             { --push: -12px; }
}

/* ---------- Floating laptop ---------- */
.float-laptop {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ---------- Stagger children ---------- */
.stagger>*:nth-child(1) {
  transition-delay: .05s;
}

.stagger>*:nth-child(2) {
  transition-delay: .15s;
}

.stagger>*:nth-child(3) {
  transition-delay: .25s;
}

.stagger>*:nth-child(4) {
  transition-delay: .35s;
}

.stagger>*:nth-child(5) {
  transition-delay: .45s;
}

.stagger>*:nth-child(6) {
  transition-delay: .55s;
}

/* ---------- Infinite Marquee (Results & Stories) ---------- */
.section-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.marquee-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  margin-top: 2rem;
}

.marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding: 1rem 0;
  will-change: transform;
}

.marquee-track--left {
  animation: marquee-left 50s linear infinite;
}

.marquee-track--right {
  animation: marquee-right 40s linear infinite;
}

@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Card styles inside marquee */
.result-card,
.profile-card {
  flex: 0 0 350px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.result-card:hover,
.profile-card:hover {
  transform: translateY(-5px);
}

.result-card img,
.profile-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 640px) {
  .result-card {
    flex: 0 0 280px;
  }

  .profile-card {
    flex: 0 0 240px;
  }

  .marquee-track--left {
    animation-duration: 35s;
  }

  .marquee-track--right {
    animation-duration: 28s;
  }

}