/* ===================================================================
   MARX MIRANDA · MÉTODO DDE
   v4.0 WHITE-DOMINANT — mainstream do nicho (Germano + EAG)
   Paleta Blue Soluções (azul navy + laranja) com branco como base.
   =================================================================== */

:root {
  --canvas:        #FFFFFF;
  --canvas-soft:   #FAFAFA;
  --canvas-cream:  #FAF7F2;
  --ink:           #0E2241;
  --ink-soft:      #1F3050;
  --ink-mute:      #5B6477;
  --ink-faint:     #9AA3B2;
  --accent:        #FF7A1A;
  --accent-deep:   #D85015;
  --accent-soft:   rgba(255, 122, 26, 0.10);
  --accent-glow:   rgba(255, 122, 26, 0.45);
  --dark-band:     #0E2241;
  --dark-band-2:   #061632;
  --on-dark:       #FFFFFF;
  --on-dark-mute:  rgba(255, 255, 255, 0.78);
  --hairline:      rgba(14, 34, 65, 0.08);
  --hairline-dark: rgba(255, 255, 255, 0.12);
}

/* Animations */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes border-spin {
  from { --gradient-angle: 0deg; }
  to   { --gradient-angle: 360deg; }
}
@keyframes ping-accent {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes animStar {
  from { transform: translateY(0px); }
  to   { transform: translateY(-2000px); }
}

/* Parallax stars (used inside dark sections) */
.stars-1 {
  box-shadow:
    234px 124px #fff, 654px 345px #fff, 876px 12px #fff, 1200px 800px #fff,
    400px 1500px #fff, 1800px 200px #fff, 100px 1000px #fff, 900px 1900px #fff,
    500px 600px #fff, 1400px 100px #fff, 300px 400px #fff, 1600px 1200px #fff;
}
.stars-2 {
  box-shadow:
    123px 456px rgba(255,255,255,0.6), 789px 234px rgba(255,255,255,0.6),
    456px 890px rgba(255,255,255,0.6), 1100px 300px rgba(255,255,255,0.6),
    200px 1200px rgba(255,255,255,0.6), 1500px 500px rgba(255,255,255,0.6),
    600px 1700px rgba(255,255,255,0.6), 1300px 900px rgba(255,255,255,0.6);
}

/* Gradient blur at top of page (under fixed nav) */
.gradient-blur-top {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.85), transparent);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

/* Huge outline text (footer signature) */
.text-stroke {
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.20);
  color: transparent;
  text-shadow: 0 0 60px rgba(255, 122, 26, 0.15);
}

/* Rotating circular badge — sticky floating bottom-right CTA */
@keyframes rotate-badge {
  to { transform: rotate(360deg); }
}
.rotating-badge {
  /* Sem position default — fica relative pra herdar do parent (absolute na bio Marx) */
  width: 120px;
  height: 120px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 22, 50, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 122, 26, 0.35);
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 122, 26, 0.22);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 280ms ease;
  text-decoration: none;
}
.rotating-badge:hover {
  transform: scale(1.08);
  box-shadow:
    0 14px 50px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(255, 122, 26, 0.45);
}
.rotating-badge__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Rotação é controlada via JS scroll listener (transform: rotate(Xdeg)) */
  /* Sem animation infinite — gira só quando o user rola */
  transition: transform 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .rotating-badge__svg { transform: none !important; transition: none; }
}
.rotating-badge__center {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #FF7A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background 240ms ease, transform 240ms ease;
}
.rotating-badge:hover .rotating-badge__center {
  background: #D85015;
  transform: scale(1.05);
}
.rotating-badge__center iconify-icon {
  font-size: 20px;
}

/* Mobile: smaller badge */
@media (max-width: 760px) {
  .rotating-badge {
    width: 92px;
    height: 92px;
  }
  .rotating-badge__center {
    width: 36px;
    height: 36px;
  }
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animate-fade-up { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }

.font-manrope { font-family: 'Manrope', sans-serif; }
.font-inter   { font-family: 'Inter', sans-serif; }

/* Shiny CTA Button — dual-color rotating border (Marx Miranda palette)
   Pseudo-element ::before is oversized (inset: -150%) + rotated via transform.
   ::after covers the inner area, leaving only a 2px ring where the rotating
   conic gradient shows through. Works in every browser. */
@keyframes shiny-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.shiny-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0;
  border: none;
  background: #061632;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms ease;
}
.shiny-cta::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -150%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 220deg,
    #FF7A1A 240deg 280deg,
    #FFAE00 280deg 320deg,
    transparent 340deg 360deg
  );
  animation: shiny-rotate 2.5s linear infinite;
}
.shiny-cta::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: inherit;
  background: #061632;
}
.shiny-cta > span {
  position: relative;
  z-index: 2;
  padding: 1rem 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFFFFF;
}
.shiny-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -10px rgba(255, 122, 26, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .shiny-cta::before { animation: none; }
}

/* Pill CTA secondary (white on light bg) */
.pill-cta {
  border-radius: 9999px;
  padding: 16px 32px;
  background: var(--ink);
  color: var(--on-dark);
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: background 220ms ease, transform 220ms ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pill-cta:hover { background: var(--ink-soft); transform: translateY(-1px); }

/* Custom selection */
.selection-accent::selection {
  background: var(--accent);
  color: var(--on-dark);
}
.selection-accent ::selection {
  background: var(--accent);
  color: var(--on-dark);
}

/* ==========================================
   CARD ANIMATIONS — reveal on scroll + hover lift
   Aplicar com classes .reveal + .card-lift
   ========================================== */

/* Reveal on scroll (toggle .is-visible via IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays pra cards em grid (até 6 items) */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }

/* Card lift: hover sutil com glow orange + border accent */
.card-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease,
              background-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.card-lift::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mx-x, 50%) var(--mx-y, 50%),
              rgba(255, 122, 26, 0.10),
              transparent 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card-lift:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 122, 26, 0.45) !important;
  box-shadow: 0 24px 60px -20px rgba(255, 122, 26, 0.25),
              0 8px 30px -10px rgba(0, 0, 0, 0.15);
}
.card-lift:hover::before {
  opacity: 1;
}

/* Card lift versão dark (cards em banda navy) */
.card-lift-dark:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 24px 60px -20px rgba(255, 122, 26, 0.40),
              0 8px 30px -10px rgba(0, 0, 0, 0.5);
}

/* Number reveal — número grande nos cards DDE com pulse sutil */
.card-lift .num-accent {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              text-shadow 0.4s ease;
}
.card-lift:hover .num-accent {
  transform: scale(1.08) translateY(-2px);
  text-shadow: 0 8px 24px rgba(255, 122, 26, 0.4);
}

/* ==========================================
   PROGRAMA HOVER EFFECT — Aceternity-style ghost bg
   Background fantasma voa entre cards no hover
   ========================================== */
.programa-grid {
  position: relative;
}
.programa-ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: rgba(255, 122, 26, 0.10);
  border: 1px solid rgba(255, 122, 26, 0.25);
  border-radius: 1.25rem;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.18s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, width, height, opacity;
  box-shadow: 0 20px 60px -20px rgba(255, 122, 26, 0.25);
}
.programa-ghost.is-active {
  opacity: 1;
}
.programa-item {
  z-index: 1;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .shiny-cta { animation: none; }
  .animate-fade-up { opacity: 1; transform: none; animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-lift:hover { transform: none; }
  .programa-ghost { transition: opacity 0.2s ease; }
}