/* Arbebus shared chrome — mobile + page background unified to Plans etalon */
:root {
  --arb-cyan: #00ddff;
  --arb-lime: #98ff1f;
  --arb-blue: #3b82ff;
  --arb-violet: #ca63ff;
}

.page-background {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image: url("../plans/arbebus-plans-bg.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.page-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(1, 7, 24, 0.67),
    rgba(1, 7, 24, 0.81) 48%,
    rgba(1, 7, 24, 0.93)
  );
  animation: arbBackgroundBreath 7s ease-in-out infinite;
}

body.arb-unified {
  background: #02040b !important;
  background-image: none !important;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Disable page-local pseudo background layers (stars/glow) */
body.arb-unified::before,
body.arb-unified::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  filter: none !important;
}

/* Hide page-specific decorative background systems when unified */
body.arb-unified .stars,
body.arb-unified .stars2,
body.arb-unified .glow-orbs,
body.arb-unified .background {
  display: none !important;
}

/* Soft hero glow instead of dark text boxes */
.arb-hero-glow {
  position: relative;
  isolation: isolate;
}

.arb-hero-glow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(880px, 96vw);
  height: 430px;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 200, 255, 0.2) 0%,
    rgba(76, 91, 255, 0.12) 34%,
    rgba(0, 0, 0, 0) 72%
  );
  filter: blur(10px);
}

@keyframes arbBackgroundBreath {
  0%, 100% { opacity: 0.52; }
  50% { opacity: 0.66; }
}

@keyframes arbFadeDown {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes arbFadeUp {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes arbFadeUpTitle {
  0% { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes arbLogoFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 18px rgba(0, 220, 255, 0.42)); }
  50% { transform: translateY(-8px); filter: drop-shadow(0 0 36px rgba(0, 220, 255, 0.72)); }
}

@keyframes arbTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 13px rgba(35, 190, 255, 0.38)); }
  50% { filter: drop-shadow(0 0 26px rgba(104, 231, 255, 0.72)); }
}

/* Shared entry motion — applied via utility classes */
.arb-anim-nav {
  opacity: 0;
  animation: arbFadeDown 0.72s cubic-bezier(0.2, 0.75, 0.25, 1) 0.05s forwards;
}

.arb-anim-logo {
  opacity: 0;
  animation:
    arbFadeUp 0.88s cubic-bezier(0.2, 0.75, 0.25, 1) 0.18s forwards,
    arbLogoFloat 5.2s ease-in-out 1.1s infinite;
}

.arb-anim-title {
  opacity: 0;
  animation:
    arbFadeUpTitle 0.96s cubic-bezier(0.2, 0.75, 0.25, 1) 0.34s forwards,
    arbTitleGlow 4.2s ease-in-out 1.35s infinite;
}

.arb-anim-text {
  opacity: 0;
  animation: arbFadeUp 1.02s cubic-bezier(0.2, 0.75, 0.25, 1) 0.52s forwards;
}

.arb-anim-cta {
  opacity: 0;
  animation: arbFadeUp 0.92s cubic-bezier(0.2, 0.75, 0.25, 1) 0.68s forwards;
}

.arb-anim-cta-2 {
  opacity: 0;
  animation: arbFadeUp 0.92s cubic-bezier(0.2, 0.75, 0.25, 1) 0.82s forwards;
}

.arb-anim-cta-3 {
  opacity: 0;
  animation: arbFadeUp 0.92s cubic-bezier(0.2, 0.75, 0.25, 1) 0.96s forwards;
}

/* Neon title utility matching Plans gradient */
.arb-neon-title {
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.05em;
  background: linear-gradient(90deg, #b8ff31 0%, #25f5ff 34%, #5d9cff 64%, #e56cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 22px rgba(0, 221, 255, 0.7));
}

.arb-hero-copy {
  color: #fff;
  font-weight: 600;
  line-height: 1.45;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 12px #000, 0 0 18px rgba(255, 255, 255, 0.2);
}

/* Mobile unification — Plans etalon */
@media (max-width: 700px) {
  .page-background {
    background-position: center center;
    background-size: cover;
  }

  /* Nav pills match Plans */
  body.arb-unified .nav,
  body.arb-unified .topbar,
  body.arb-unified .main-nav {
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  body.arb-unified .nav a,
  body.arb-unified .main-nav a,
  body.arb-unified .lang-btn,
  body.arb-unified .links a {
    padding: 9px 12px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    min-height: 40px;
  }

  body.arb-unified .lang-switch {
    width: 100%;
    justify-content: center !important;
    margin-left: 0 !important;
  }

  /* Logo size match Plans mobile */
  body.arb-unified .hero-logo-main,
  body.arb-unified .hero-logo {
    width: min(390px, 88vw) !important;
    max-width: 520px !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  /* Hero titles */
  body.arb-unified .hero-subheadline,
  body.arb-unified .hero-title,
  body.arb-unified .ai-title,
  body.arb-unified .service-title {
    font-size: clamp(2.8rem, 12vw, 5rem) !important;
    font-weight: 900 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.05em !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  body.arb-unified .subtitle,
  body.arb-unified .lead,
  body.arb-unified .hero p,
  body.arb-unified .arb-hero-copy {
    font-size: clamp(1.05rem, 4.7vw, 1.35rem) !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    max-width: 34rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  body.arb-unified .quick strong,
  body.arb-unified .hero-pills span,
  body.arb-unified .store-btn span {
    font-size: clamp(1.05rem, 4.8vw, 1.35rem) !important;
    font-weight: 800 !important;
  }

  body.arb-unified .hero,
  body.arb-unified .hero-inner,
  body.arb-unified .hero-content {
    text-align: center !important;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  }

  /* No dark boxes around hero text */
  body.arb-unified .hero .card,
  body.arb-unified .hero .card-panel,
  body.arb-unified .hero-inner,
  body.arb-unified .hero-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Hide AI premium large secondary A illustration on mobile if present */
  body.arb-unified .ai-chip,
  body.arb-unified .hero-visual,
  body.arb-unified .big-a,
  body.arb-unified .ai-orb {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-overlay,
  .arb-anim-nav,
  .arb-anim-logo,
  .arb-anim-title,
  .arb-anim-text,
  .arb-anim-cta,
  .arb-anim-cta-2,
  .arb-anim-cta-3 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}