/* ============================================================
   JAVIR — PREMIUM PASS v2
   World-class polish: motion, depth, micro-interaction, focus.
   Loaded LAST — refines without rewriting.
============================================================ */

/* ---------- Global craft ---------- */
::selection {
  background: rgba(103, 232, 249, .28);
  color: #fff;
}

html { scrollbar-color: rgba(117,239,255,.25) rgba(7,17,31,.8); }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #050b18; }
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(55,183,255,.35), rgba(117,239,255,.18));
  border-radius: 8px;
  border: 2px solid #050b18;
}

:focus-visible {
  outline: 2px solid rgba(103, 232, 249, .65);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3, .section-title { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Ambient depth: cinematic vignette ---------- */
.bg-fixed::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140% 90% at 50% 0%, transparent 55%, rgba(2, 5, 12, .55) 100%);
  pointer-events: none;
}

/* Aurora sweep — slow, expensive-feeling */
.bg-grad::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 180deg at 50% 50%,
      transparent 0deg,
      rgba(55,183,255,.05) 80deg,
      rgba(124,92,245,.05) 160deg,
      transparent 240deg,
      rgba(117,239,255,.04) 320deg,
      transparent 360deg);
  animation: aurora-rotate 60s linear infinite;
  pointer-events: none;
}
@keyframes aurora-rotate { to { transform: rotate(360deg); } }

/* ---------- Reveal: add cinematic blur ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(6px);
  transition:
    opacity .9s var(--ease-out),
    transform 1s var(--ease-out),
    filter .9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---------- Hero headline: staggered line entrance ---------- */
.hero-title .line {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  animation: line-in 1s var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) { animation-delay: .1s; }
.hero-title .line:nth-child(2) { animation-delay: .26s; }
.hero-title .line:nth-child(3) { animation-delay: .46s; }
@keyframes line-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Gradient text — living sheen */
.gradient-text {
  background: linear-gradient(120deg, #f7fbff 0%, #bcf7ff 30%, #67e8f9 55%, #bcf7ff 80%, #f7fbff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheen-slide 7s ease-in-out infinite;
}
@keyframes sheen-slide {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* ---------- Buttons: world-class touch ---------- */
.btn {
  transform-style: preserve-3d;
  transition:
    transform .3s var(--ease-spring),
    box-shadow .35s ease,
    border-color .3s,
    background .3s;
}
.btn:active { transform: translateY(0) scale(.97) !important; }

.btn-primary {
  position: relative;
  background: linear-gradient(135deg, #29a6ff 0%, #68d9ff 60%, #8ee9ff 100%);
  background-size: 160% 100%;
  transition:
    transform .3s var(--ease-spring),
    box-shadow .35s ease,
    background-position .5s ease;
}
.btn-primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow:
    0 22px 56px rgba(55,183,255,.5),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 1px 0 rgba(255,255,255,.55) inset;
}

/* Subtle ring pulse on primary CTAs (hero + final only) */
.hero-actions .btn-primary::after,
.cta-shell .btn-primary::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1.5px solid rgba(117, 239, 255, .5);
  opacity: 0;
  animation: cta-ring 3.2s ease-out infinite;
  pointer-events: none;
}
@keyframes cta-ring {
  0%, 60% { opacity: 0; transform: scale(1); }
  70%     { opacity: .8; transform: scale(1); }
  100%    { opacity: 0; transform: scale(1.12); }
}

/* ---------- Card spotlight (cursor-aware, set via JS vars) ---------- */
.value-card, .usecase-card, .int-card, .javira-trait,
.workflow-step, .contact-card, .faq-item {
  position: relative;
  overflow: hidden;
}
.value-card::after, .usecase-card::after, .int-card::after,
.workflow-step::after, .contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(117, 239, 255, .08),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 0;
}
.value-card:hover::after, .usecase-card:hover::after,
.int-card:hover::after, .workflow-step:hover::after,
.contact-card:hover::after { opacity: 1; }

/* Ensure inner content stays above the spotlight */
.value-card > *, .usecase-card > *, .int-card > *,
.workflow-step > *, .contact-card > * { position: relative; z-index: 1; }

/* ---------- Consistent hover elevation ---------- */
.value-card, .usecase-card { transition:
  transform .4s var(--ease-spring),
  border-color .35s ease,
  box-shadow .45s ease; }
.value-card:hover, .usecase-card:hover {
  transform: translateY(-7px);
  border-color: rgba(117,239,255,.38);
  box-shadow:
    0 30px 70px rgba(0,0,0,.5),
    0 0 60px rgba(55,183,255,.14),
    inset 0 1px 0 rgba(255,255,255,.07);
}

/* Icon lift on card hover */
.value-card:hover .num,
.usecase-card:hover .usecase-icon,
.javira-trait:hover .javira-trait-icon {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 26px rgba(55,183,255,.32);
}
.value-card .num, .usecase-icon, .javira-trait-icon {
  transition: transform .35s var(--ease-spring), box-shadow .35s ease;
}

/* ---------- Navbar: glass refinement + active link ---------- */
.navbar {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(10, 22, 41, .72), rgba(7, 17, 31, .58));
}
.navbar.scrolled {
  background:
    linear-gradient(180deg, rgba(6, 13, 26, .9), rgba(5, 11, 22, .82));
}
.nav-links a.active {
  color: var(--white);
}
.nav-links a.active::after { transform: scaleX(1); }

/* ---------- Stats strip: counter-ready, hover states ---------- */
.stats-item {
  transition: background .3s ease;
  border-radius: 14px;
}
.stats-item:hover { background: rgba(117,239,255,.04); }
.stats-value { position: relative; }

/* ---------- Section header rhythm ---------- */
.section-title { margin-top: 18px; }
.section-subtitle { margin-top: 4px; }

/* ---------- Eyebrow: refined ---------- */
.eyebrow {
  font-size: .72rem;
  letter-spacing: .16em;
  padding: 9px 16px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.eyebrow:hover {
  border-color: rgba(117,239,255,.4);
  box-shadow: 0 0 24px rgba(55,183,255,.14);
}

/* ---------- Chat burst: refine bubble entrance physics ---------- */
.cb-bubble {
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
}
.cb-agent {
  box-shadow:
    0 16px 40px rgba(55,183,255,.42),
    0 0 70px rgba(117,239,255,.16),
    inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- Workflow steps: connected feel ---------- */
.workflow-visual { position: relative; }
.workflow-step {
  transition:
    transform .4s var(--ease-spring),
    border-color .35s ease,
    box-shadow .45s ease,
    background .35s ease;
}
.workflow-step:hover {
  transform: translateY(-7px);
  background: linear-gradient(180deg, rgba(55,183,255,.08), rgba(255,255,255,.02));
}
.workflow-icon {
  transition: transform .35s var(--ease-spring), box-shadow .35s ease;
}
.workflow-step:hover .workflow-icon {
  transform: scale(1.1) rotate(-4deg);
  box-shadow: 0 0 36px rgba(55,183,255,.4);
}

/* ---------- Integration hub: breathing presence ---------- */
.int-hub-inner img { will-change: transform; }
.int-hub {
  animation: hub-breathe 5s ease-in-out infinite;
}
@keyframes hub-breathe {
  0%, 100% { box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 60px rgba(55,183,255,.28),
    inset 0 1px 0 rgba(255,255,255,.08); }
  50% { box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 0 90px rgba(55,183,255,.45),
    inset 0 1px 0 rgba(255,255,255,.08); }
}

/* ---------- FAQ: smoother accordion affordance ---------- */
.faq-item { transition: border-color .3s ease, box-shadow .35s ease, background .3s ease; }
.faq-item:hover {
  border-color: rgba(117,239,255,.3);
  background: rgba(117,239,255,.025);
}
.faq-icon { transition: transform .35s var(--ease-spring), background .3s, color .3s; }
.faq-item.active .faq-icon { transform: rotate(45deg); }

/* ---------- Pro/cons: recommended card halo ---------- */
.procons-card.javira-card {
  animation: card-halo 6s ease-in-out infinite;
}
@keyframes card-halo {
  0%, 100% { box-shadow:
    var(--shadow-lg),
    0 0 60px rgba(55,183,255,.16); }
  50% { box-shadow:
    var(--shadow-lg),
    0 0 100px rgba(55,183,255,.3); }
}

/* ---------- Contact cards: lively CTAs ---------- */
.contact-card { transition: transform .4s var(--ease-spring), border-color .35s, box-shadow .45s; }
.contact-card:hover {
  transform: translateY(-6px);
  border-color: rgba(117,239,255,.34);
}
.contact-value {
  background: linear-gradient(120deg, #fff, #bcf7ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Footer logo shimmer ---------- */
.footer-card img { transition: transform .5s var(--ease-spring), filter .5s ease; }
.footer-card:hover img {
  transform: rotateX(0) rotateY(0) scale(1.08);
  filter:
    drop-shadow(0 10px 22px rgba(190,60,220,.5))
    drop-shadow(0 0 26px rgba(55,183,255,.55));
}

/* ---------- Back-to-top affordance ---------- */
#backToTop {
  position: fixed;
  right: 22px;
  bottom: 90px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 22, 41, .85);
  border: 1px solid rgba(117,239,255,.28);
  color: #dff5ff;
  font-size: 1.05rem;
  cursor: pointer;
  z-index: 60;
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .35s ease, transform .4s var(--ease-spring), border-color .3s;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
#backToTop.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#backToTop:hover {
  border-color: rgba(117,239,255,.5);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 30px rgba(55,183,255,.25);
}

/* ---------- Marquee trust strip (hero bottom) ---------- */
.trust-marquee {
  margin-top: 56px;
  overflow: hidden;
  position: relative;
  padding: 16px 0;
  border-top: 1px solid rgba(117,239,255,.08);
  border-bottom: 1px solid rgba(117,239,255,.08);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.trust-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee-slide 28s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state: paused; }
@keyframes marquee-slide { to { transform: translateX(-50%); } }
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}
.trust-item .ti-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan-300);
  box-shadow: 0 0 8px var(--cyan-300);
}

/* ---------- Performance hint for mobile ---------- */
@media (max-width: 720px) {
  .bg-grad::after { display: none; }
  .value-card::after, .usecase-card::after, .int-card::after { display: none; }
  #backToTop { bottom: 84px; right: 14px; }
}

/* ---------- Reduced motion respects everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-title .line { animation: none; opacity: 1; transform: none; filter: none; }
  .gradient-text { animation: none; }
  .trust-track { animation: none; }
  .bg-grad::after { display: none; }
}