/* ============================================================
   PAVUNA COMMUNITY — motion.css v2
   Clean, Professional Motion System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;900&family=Oswald:wght@500;600;700&display=swap');

:root {
  --gold: #D4A017;
  --gold-light: #F0C040;
}

/* ============================================================
   HERO V2 — Characters + Title Layout
   ============================================================ */
/* ============================================================
   HERO V2 — Artwork Background + Layout
   ============================================================ */
.hero-v2 {
  position: relative;
  background: #080706;
  min-height: calc(100vh - var(--nav-h, 76px));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 30px 0;
}

/* Fundo Principal Artwork — Pavuna RP (1920x1080 Full Hero Wallpaper) */
.hero-bg-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-bg-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  opacity: 1;
  animation: heroArtFade 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroArtFade {
  from {
    opacity: 0;
    transform: scale(1.04) translateX(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

/* Gradiente de fusão: escurece a metade esquerda para os textos e preserva a arte com a personagem à direita */
.hero-bg-art-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, 
      rgba(8, 7, 6, 0.98) 0%, 
      rgba(8, 7, 6, 0.94) 30%, 
      rgba(8, 7, 6, 0.70) 48%, 
      rgba(8, 7, 6, 0.22) 68%, 
      transparent 88%
    ),
    linear-gradient(to bottom, 
      rgba(8, 7, 6, 0.6) 0%, 
      transparent 14%, 
      transparent 80%, 
      #080706 100%
    );
  pointer-events: none;
}

/* Hero content stays left, z above the background */
.hero-v2 .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  padding: 10px 0;
}

/* Title: BEM-VINDO on top, À PAVUNA on its own line */
.display-hero {
  line-height: 0.88;
  letter-spacing: -1px;
}

.hero-title-line2 {
  display: block;
  /* Slightly larger than parent to make PAVUNA feel massive */
  font-size: 1.05em;
}

/* ============================================================
   TYPOGRAPHY — Enhanced, not overblown
   ============================================================ */

/* fire text: subtle warm glow, no pulsing */
.text-fire {
  color: var(--fire);
  text-shadow: 0 0 24px rgba(255,107,0,0.35);
}

/* label prefix bar */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.label::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--fire);
  flex-shrink: 0;
}

/* section underline accent */
.section-header .display-xl {
  position: relative;
}
.section-header .display-xl::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 48px; height: 3px;
  background: var(--fire);
  box-shadow: 0 0 8px rgba(255,107,0,0.5);
  border-radius: 1px;
}

/* ============================================================
   HERO STATS
   ============================================================ */
.hero-stats::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--fire), transparent);
  opacity: 0.4;
}

/* ============================================================
   FEATURE CARDS — Subtle, tasteful hover
   ============================================================ */
.feature-card {
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
/* Override any exaggerated motion.js 3D tilt — just a clean lift */
.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--fire);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,107,0,0.2);
}

/* Corner accent lines on hover */
.feature-card::before,
.feature-card::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  transition: width 0.25s ease, height 0.25s ease;
}
.feature-card::before {
  top: 0; left: 0;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
}
.feature-card::after {
  bottom: 0; right: 0;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
}
.feature-card:hover::before {
  width: 20px; height: 20px;
  border-top-color: var(--fire);
  border-left-color: var(--fire);
}
.feature-card:hover::after {
  width: 20px; height: 20px;
  border-bottom-color: rgba(255,107,0,0.4);
  border-right-color: rgba(255,107,0,0.4);
}

/* Icon — gentle float, no rotation */
.feature-icon {
  animation: iconFloat 4s ease-in-out infinite;
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.feature-card:nth-child(2) .feature-icon { animation-delay: -1s; }
.feature-card:nth-child(3) .feature-icon { animation-delay: -2s; }
.feature-card:nth-child(4) .feature-icon { animation-delay: -0.5s; }
.feature-card:nth-child(5) .feature-icon { animation-delay: -1.5s; }
.feature-card:nth-child(6) .feature-icon { animation-delay: -2.5s; }

/* ============================================================
   VIP SECTION — Card Image Showcase
   ============================================================ */
.vip-card-showcase {
  position: relative;
  width: 340px;
  margin: 0 auto;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  transform-style: preserve-3d;
}

.vip-card-img {
  width: 100%;
  border-radius: 0;
  display: block;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 20px 35px rgba(0,0,0,0.75)) drop-shadow(0 0 25px rgba(230, 0, 160, 0.25));
  animation: vipCardFloat 5s ease-in-out infinite;
}
@keyframes vipCardFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Price overlay below card */
.vip-card-price-tag {
  margin-top: 20px;
  text-align: center;
  background: rgba(255,107,0,0.06);
  border: 1px solid rgba(255,107,0,0.2);
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.vip-price-old {
  font-size: 13px;
  color: var(--bone-dim);
  text-decoration: line-through;
}
.vip-price-main {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--bone);
  line-height: 1;
}
.vip-price-main sup {
  font-size: 22px;
  color: var(--fire);
}
.vip-price-per {
  font-size: 13px;
  color: var(--bone-dim);
  align-self: center;
}

/* ============================================================
   STEP NUMBERS — Gentle pulse
   ============================================================ */
.step-num {
  animation: stepGlow 3s ease-in-out infinite;
}
@keyframes stepGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(255,107,0,0); }
}
.howto-step-mini:nth-child(3) .step-num { animation-delay: -0.75s; }
.howto-step-mini:nth-child(5) .step-num { animation-delay: -1.5s;  }
.howto-step-mini:nth-child(7) .step-num { animation-delay: -2.25s; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.navbar.scrolled {
  background: rgba(10,10,10,0.97);
  box-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.nav-logo:hover img {
  filter: drop-shadow(0 0 6px rgba(255,107,0,0.5));
  transition: filter 0.3s ease;
}

/* ============================================================
   BUTTONS — No animated gradient, just cleaner
   ============================================================ */
.btn-primary {
  background: var(--fire);
}
.btn-primary:hover {
  background: var(--fire-deep);
}

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */
.scroll-arrow {
  animation: arrowBounce 1.8s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: rotate(45deg); opacity: 0.8; }
  50%       { transform: rotate(45deg) translate(4px, 4px); opacity: 0.4; }
}

/* ============================================================
   RESPONSIVE — HERO & BANNERS
   ============================================================ */

/* 1. Telas ultra-largas e TVs (min-width: 2000px) */
/* Se for em TV ou monitor gigante, remove a imagem para evitar over-zoom ou distorção */
@media (min-width: 2000px) {
  .hero-bg-art {
    display: none !important;
  }
  .hero-v2 {
    background: radial-gradient(ellipse 85% 65% at 75% 45%, #2a1404 0%, #140a04 40%, #080706 80%, #040404 100%) !important;
  }
  .hero-v2 .hero-content {
    max-width: 820px !important;
  }
}

/* 2. Telas de notebooks e monitores padrão (901px a 1440px) */
@media (max-width: 1440px) {
  .hero-v2 .hero-content {
    max-width: 550px;
  }
  .hero-bg-art-img {
    object-position: 85% center;
  }
}

@media (max-width: 1180px) {
  .hero-v2 .hero-content {
    max-width: 500px;
  }
  .hero-bg-art-overlay {
    background:
      linear-gradient(to right, 
        rgba(8, 7, 6, 0.98) 0%, 
        rgba(8, 7, 6, 0.94) 38%, 
        rgba(8, 7, 6, 0.78) 58%, 
        rgba(8, 7, 6, 0.35) 78%, 
        transparent 100%
      ),
      linear-gradient(to bottom, rgba(8, 7, 6, 0.6) 0%, transparent 14%, transparent 80%, #080706 100%);
  }
}

/* 3. Laptops com altura reduzida (ex: 1366x768 com barras do navegador) */
@media (max-height: 820px) and (min-width: 901px) {
  .hero-v2 {
    min-height: calc(100vh - 72px);
    padding: 16px 0 !important;
  }
  .display-hero {
    font-size: clamp(38px, min(6.4vw, 9vh), 76px) !important;
    line-height: 0.92 !important;
  }
  .hero-eyebrow {
    margin-bottom: 12px !important;
  }
  .hero-sub {
    font-size: 13.5px !important;
    margin: 10px 0 16px !important;
    line-height: 1.45 !important;
    max-width: 480px !important;
  }
  .hero-actions {
    margin: 14px 0 18px 0 !important;
    gap: 8px !important;
  }
  .hero-actions .btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }
  .hero-stats {
    padding: 12px 0 !important;
    gap: 20px !important;
  }
  .hero-stat-value {
    font-size: 24px !important;
  }
  .hero-stat-label {
    font-size: 11px !important;
  }
  .hero-scroll-hint {
    display: none !important;
  }
}

/* 4. Celular e telas estreitas (<= 900px, incluindo modo DevTools / split screen) */
/* "se celular ficar ruim deixe sem imagem também" */
@media (max-width: 900px) {
  .hero-bg-art {
    display: none !important;
  }
  .hero-v2 {
    min-height: auto;
    padding: 44px 0 36px !important;
    background: radial-gradient(circle at 50% 15%, #241105 0%, #120904 45%, #080706 85%) !important;
  }
  .hero-v2 .hero-content {
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center;
  }
  .hero-eyebrow {
    justify-content: center;
    margin-bottom: 16px !important;
  }
  .display-hero {
    font-size: clamp(34px, 8.5vw, 54px) !important;
    line-height: 0.94 !important;
  }
  .hero-sub {
    font-size: 14px !important;
    margin: 14px auto 24px !important;
    max-width: 460px;
    line-height: 1.6 !important;
  }
  .hero-actions {
    justify-content: center;
    margin: 18px 0 26px 0 !important;
    flex-direction: column;
    gap: 10px !important;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 28px !important;
    padding: 18px 0 !important;
    border-top: 1px solid rgba(255,107,0,0.2) !important;
  }
  .hero-stat {
    text-align: center;
  }
  .hero-stat-divider {
    display: none !important;
  }
  .hero-scroll-hint {
    display: none !important;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-art-img,
  .vip-card-img,
  .feature-icon,
  .step-num,
  #scrollProgress {
    animation: none !important;
    transition: none !important;
  }
}