/* VoyraOps landing — supplemental styles (Tailwind handles the rest) */

:root { --aegean-950: #071a30; }

html, body { scroll-behavior: smooth; }
body.is-loading { overflow: hidden; }

/* ---- Preloader fade-out ---- */
#preloader { transition: opacity .6s ease, visibility .6s ease; }
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- Header ---- */
#siteHeader { backdrop-filter: blur(0); }
#siteHeader.is-scrolled {
  background: rgba(7, 26, 48, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(40, 114, 189, .22);
}

/* ---- Hero canvas ---- */
.hero-stage { background: var(--aegean-950); }
#heroCanvas { display: block; }

/* hero text reveal base state (GSAP animates these in) */
.hero-eyebrow, .hero-title, .hero-sub, .hero-cta { will-change: transform, opacity; }

.scroll-hint { animation: hintFade 2.4s ease-in-out infinite; }
@keyframes hintFade { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* ---- Mobile hero fallback (subtle Ken Burns loop) ---- */
.hero-fallback-img { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns {
  0%   { transform: scale(1.05) translate3d(0,0,0); }
  100% { transform: scale(1.16) translate3d(-2%, -2%, 0); }
}

/* ---- Pricing skeletons ---- */
.pricing-skeleton {
  background: linear-gradient(100deg, rgba(28,74,128,.25) 30%, rgba(40,114,189,.4) 50%, rgba(28,74,128,.25) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border: 1px solid rgba(40,114,189,.18);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- Pricing card ---- */
.price-card {
  position: relative;
  border-radius: 1rem;
  border: 1px solid rgba(40,114,189,.28);
  background: rgba(11,42,74,.55);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.price-card:hover { transform: translateY(-6px); border-color: rgba(255,176,31,.4); }
.price-card.is-popular {
  border-color: rgba(255,176,31,.7);
  background: linear-gradient(180deg, rgba(28,74,128,.7), rgba(11,42,74,.7));
  box-shadow: 0 30px 70px -30px rgba(255,176,31,.5);
}
.plan-tagline {
  font-size: 0.8rem;
  opacity: 0.65;
  margin: 0.1rem 0 0.4rem;
  font-style: italic;
}
/* First-load entrance — pure CSS, cannot get stuck like a ScrollTrigger tween */
@keyframes cardIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.cards-animate .price-card { animation: cardIn .55s cubic-bezier(.2,.7,.2,1) both; }
.cards-animate .price-card:nth-child(2) { animation-delay: .08s; }
.cards-animate .price-card:nth-child(3) { animation-delay: .16s; }
.cards-animate .price-card:nth-child(4) { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .cards-animate .price-card { animation: none; } }

.price-card .feat-on  { color: #eaf4ff; }
.price-card .feat-off { color: #5d7da0; text-decoration: line-through; opacity: .65; }

/* ---- Feature cards ---- */
.feature-card {
  border-radius: 1rem;
  border: 1px solid rgba(40,114,189,.22);
  background: rgba(11,42,74,.4);
  padding: 1.5rem;
  transition: transform .35s, border-color .35s, background .35s;
}
.feature-card:hover { transform: translateY(-4px); border-color: rgba(255,176,31,.35); background: rgba(28,74,128,.4); }

/* ---- Marquee ---- */
.marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; gap: 3rem; white-space: nowrap; padding-left: 3rem; animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; color: rgba(173,208,240,.55); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- Modal ---- */
#contractModal.is-open { display: flex; }
#customModal.is-open { display: flex; }
#planModal.is-open { display: flex; }

/* Floating WhatsApp — hidden until the hero is scrolled past */
.wa-float {
  opacity: 0;
  transform: translateY(1rem) scale(.9);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease;
}
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: opacity .2s ease; } .wa-float:hover { transform: none; } }

.cp-input {
  width: 100%;
  border-radius: 0.6rem;
  border: 1px solid rgba(40,114,189,.4);
  background: rgba(7,26,48,.6);
  color: #fff;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  outline: none;
  transition: border-color .2s;
}
.cp-input:focus { border-color: #ffb01f; }
.cp-input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }

.cp-addon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(40,114,189,.3);
  border-radius: 0.6rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.cp-addon:hover { border-color: rgba(255,176,31,.4); }
.cp-addon.cp-disabled { opacity: .4; cursor: not-allowed; }
.cp-addon.cp-disabled input { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-fallback-img, .marquee-track, .scroll-hint { animation: none !important; }
}

/* ===== Value-first homepage (v2) ===== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.flow-step { display: flex; gap: .9rem; align-items: flex-start;
  border: 1px solid rgba(40,114,189,.22); background: rgba(11,42,74,.4);
  border-radius: 1rem; padding: 1rem 1.1rem; transition: border-color .3s, transform .3s; }
.flow-step:hover { border-color: rgba(255,176,31,.35); transform: translateY(-3px); }
.flow-num { flex: none; height: 2rem; width: 2rem; border-radius: .6rem; display: grid; place-items: center;
  font-weight: 800; color: #0b2a4a; background: linear-gradient(135deg,#ffc043,#ffb01f); }

.report-chip { border: 1px solid rgba(40,114,189,.22); background: rgba(11,42,74,.35);
  border-radius: .8rem; padding: .7rem .9rem; font-size: .9rem; color: #d6eaf8;
  display: flex; align-items: center; gap: .55rem; transition: border-color .3s; }
.report-chip:hover { border-color: rgba(255,176,31,.35); }
.report-chip::before { content: ""; height: .45rem; width: .45rem; border-radius: 50%; background: #ffb01f; flex: none; }

.vc-ic { height: 2.25rem; width: 2.25rem; border-radius: .75rem; display: grid; place-items: center;
  font-weight: 900; color: #ffb01f; background: rgba(27,62,106,.6); margin-bottom: .75rem; }

.feat-on-list li { position: relative; padding-left: 1.5rem; color: #eaf4ff; }
.feat-on-list li::before { content: "✓"; position: absolute; left: 0; color: #ffb01f; font-weight: 800; }

.ba-x, .ba-ok { position: relative; padding-left: 1.5rem; }
.ba-x::before { content: "✕"; position: absolute; left: 0; color: #f87171; font-weight: 700; }
.ba-ok::before { content: "✓"; position: absolute; left: 0; color: #ffb01f; font-weight: 800; }