/* ============================================================
   VELIOLABS — PACKAGES PAGE
   Premium motion-studio offering. No pricing anywhere.
   Reuses the shared vl-redesign system (vars, buttons, reveals).
   ============================================================ */

/* ---------- Hero ---------- */
.pkg-hero {
  padding: 20vh 0 var(--vl-sec-sm);
  position: relative;
  background: transparent;
  font-family: var(--vl-font);
  color: var(--vl-text);
  overflow: hidden;
}

.pkg-hero-glow {
  position: absolute;
  inset: -30% -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 34% at 72% 8%, rgba(215, 45, 82, 0.16), transparent 68%),
    radial-gradient(30% 26% at 20% 32%, rgba(240, 77, 120, 0.07), transparent 70%);
}

@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .pkg-hero-glow {
    animation: pkgGlowBreath 9s ease-in-out infinite alternate;
  }
}

@keyframes pkgGlowBreath {
  from { opacity: 0.75; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 1;   transform: translate3d(0, -2.5%, 0) scale(1.05); }
}

.pkg-hero .vl-wrap { position: relative; z-index: 1; }

.pkg-hero-title {
  font-size: clamp(4rem, 14vw, 17rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.82;
  margin: 2.4rem 0 0;
  max-width: 12ch;
}

.pkg-hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  color: var(--vl-muted);
  max-width: 52ch;
  margin-top: 2.8rem;
  line-height: 1.65;
}

.pkg-hero-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 4.5vh;
  flex-wrap: wrap;
}

.pkg-hero-nav a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vl-muted);
  text-decoration: none !important;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}

.pkg-hero-nav a b {
  font-weight: 500;
  color: var(--vl-accent);
  font-size: 13px;
}

.pkg-hero-nav a:hover { color: var(--vl-text); }
.pkg-hero-nav a:hover b { color: var(--vl-highlight); }

.pkg-hero-nav .pkg-hero-nav-line {
  width: 34px;
  height: 1px;
  background: var(--vl-line);
  flex: 0 0 auto;
}

/* ---------- Section head ---------- */
.pkg-sec {
  position: relative;
  background: transparent;
  padding: var(--vl-sec-sm) 0 var(--vl-sec);
  font-family: var(--vl-font);
  color: var(--vl-text);
}

.pkg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: clamp(48px, 6vh, 84px);
}

.pkg-head h2 {
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.92;
  margin: 2rem 0 0;
  max-width: 14ch;
}

.pkg-head p {
  color: var(--vl-muted);
  max-width: 36ch;
  line-height: 1.6;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  margin: 0;
}

/* ---------- Package cards ---------- */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vl-gap);
  align-items: stretch;
}

.pkg-card {
  position: relative;
  border: 1px solid var(--vl-line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.02);
  padding: clamp(2rem, 3vw, 3rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition:
    border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s ease,
    background 0.6s ease;
  will-change: transform;
}

.pkg-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(72% 46% at 88% 4%, rgba(215, 45, 82, 0.1), transparent 62%),
    radial-gradient(50% 40% at 8% 96%, rgba(240, 77, 120, 0.06), transparent 66%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.pkg-card-num {
  position: absolute;
  top: -0.24em;
  right: 0.06em;
  font-size: clamp(9rem, 16vw, 15rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(215, 45, 82, 0.22);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.pkg-card-num-flare {
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, var(--vl-accent), transparent);
  opacity: 0.6;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.pkg-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.pkg-card-label {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--vl-accent);
  font-weight: 500;
}

.pkg-card-indicator {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vl-highlight);
  border: 1px solid rgba(240, 77, 120, 0.32);
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.pkg-card-indicator--flagship {
  color: var(--vl-glow);
  border-color: rgba(215, 45, 82, 0.5);
  background: rgba(215, 45, 82, 0.08);
}

.pkg-card h3 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: clamp(2rem, 3vh, 2.6rem) 0 0;
  max-width: 14ch;
}

.pkg-card-desc {
  position: relative;
  z-index: 1;
  color: var(--vl-muted);
  line-height: 1.62;
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  margin: 1.6rem 0 0;
  max-width: 42ch;
}

.pkg-features {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: clamp(2rem, 3vh, 2.6rem) 0 0;
  padding: clamp(2rem, 3vh, 2.6rem) 0 0;
  border-top: 1px solid var(--vl-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkg-features li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--vl-text);
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.pkg-features li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vl-accent);
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(215, 45, 82, 0.7);
}

.pkg-card-cta {
  position: relative;
  z-index: 1;
  margin-top: clamp(2.2rem, 3.4vh, 3rem);
  align-self: flex-start;
}

/* Feature card #02 — slightly more prominent */
.pkg-card--featured {
  border-color: rgba(215, 45, 82, 0.34);
  background: rgba(255, 255, 255, 0.03);
}

.pkg-card--featured::after { opacity: 0.5; }

/* Flagship #03 — strongest treatment, same grid cell */
.pkg-card--flagship {
  border-color: rgba(215, 45, 82, 0.4);
  background: rgba(255, 255, 255, 0.03);
}

.pkg-card--flagship::after { opacity: 0.8; }

.pkg-card--flagship .pkg-card-num { font-size: clamp(9rem, 12vw, 14rem); }

.pkg-card--flagship h3 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }

.pkg-card--flagship .pkg-card-desc { max-width: 48ch; }

.pkg-card--flagship .pkg-features { grid-template-columns: 1fr 1fr; }

/* Hover: lift, brighter border, more glow, features shift, CTA pops.
   Desktop fine-pointer only; deliberately subtle — no tilt, no 3D. */
@media (hover: hover) and (pointer: fine) {
  .pkg-card:hover {
    transform: translateY(-8px);
    border-color: rgba(240, 77, 120, 0.5);
    box-shadow: 0 30px 90px -34px rgba(215, 45, 82, 0.55);
  }

  .pkg-card:hover::after { opacity: 1; }

  .pkg-card:hover .pkg-features { transform: translateY(-6px); }

  .pkg-card:hover .pkg-card-cta {
    background: var(--vl-highlight);
    border-color: var(--vl-highlight);
    box-shadow: 0 0 70px -15px rgba(240, 77, 120, 0.8);
  }

  .pkg-card:hover .pkg-card-num-flare { width: 100%; opacity: 1; }

  /* Active card = visual focus; the others step back. */
  .pkg-grid.has-active .pkg-card { opacity: 0.4; transition: opacity 0.5s ease, border-color 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease; }
  .pkg-grid.has-active .pkg-card.is-active { opacity: 1; }
}

/* ---------- Detail strip — one production philosophy ---------- */
.pkg-strip {
  position: relative;
  background: transparent;
  padding: var(--vl-sec-sm) 0 var(--vl-sec-sm);
  border-top: 1px solid var(--vl-line);
  font-family: var(--vl-font);
  color: var(--vl-text);
}

.pkg-strip h2 {
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.92;
  margin: 2rem 0 0;
  max-width: 14ch;
}

.pkg-strip-copy {
  color: var(--vl-muted);
  max-width: 60ch;
  line-height: 1.62;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  margin: 2.2rem 0 0;
}

.pkg-strip-list {
  list-style: none;
  margin: clamp(2.6rem, 4vh, 4rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 0;
}

.pkg-strip-list li {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--vl-text);
  padding: 10px 26px;
  border: 1px solid var(--vl-line);
  border-radius: 999px;
  margin-right: 18px;
  transition: border-color 0.5s ease, color 0.5s ease, background 0.5s ease;
}

.pkg-strip-list li:hover { border-color: rgba(240, 77, 120, 0.5); color: var(--vl-highlight); }

/* ---------- What happens inside every package ---------- */
.pkg-process-head h2 {
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 0.92;
  margin: 2rem 0 0;
  max-width: 15ch;
}

.pkg-process {
  list-style: none;
  margin: clamp(48px, 6vh, 84px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vl-gap);
}

.pkg-process-item {
  border-top: 1px solid var(--vl-line);
  padding-top: 2rem;
  position: relative;
}

.pkg-process-num {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--vl-accent);
  font-weight: 500;
}

.pkg-process-item h3 {
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 1.4rem 0 0;
}

.pkg-process-item p {
  color: var(--vl-muted);
  line-height: 1.55;
  font-size: 14px;
  margin: 0.8rem 0 0;
  max-width: 32ch;
}

/* ---------- Final CTA (stronger glow, still elegant) ---------- */
.pkg-cta::before {
  background: radial-gradient(58% 92% at 50% 112%, rgba(215, 45, 82, 0.3), transparent 64%);
}

/* ---------- Reveal choreography for this page ---------- */
html.vl-anim .pkg-hero .vl-label { transition-delay: 0.04s; }
html.vl-anim .pkg-hero-sub { transition-delay: 0.22s; }
html.vl-anim .pkg-hero-nav { transition-delay: 0.36s; }

/* ---------- Mobile (<=768px): native, flat, no animation ---------- */
@media (max-width: 768px) {
  .pkg-hero { padding: 16vh 0 var(--vl-sec-sm); }

  .pkg-hero-glow { animation: none !important; }

  .pkg-hero-nav { gap: 16px; margin-top: 4vh; }
  .pkg-hero-nav a { font-size: 11px; letter-spacing: 0.18em; gap: 8px; }
  .pkg-hero-nav .pkg-hero-nav-line { display: none; }

  .pkg-head { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .pkg-head p { max-width: 42ch; }

  .pkg-grid { grid-template-columns: 1fr; gap: var(--vl-gap); }

  .pkg-card { padding: 2rem 1.6rem; }
  .pkg-card-num { font-size: 7rem; }
  .pkg-card--flagship .pkg-card-num { font-size: 10rem; }

  .pkg-card--flagship { grid-column: auto; }
  .pkg-card--flagship .pkg-features { grid-template-columns: 1fr; }
  .pkg-card--flagship h3 { font-size: clamp(2rem, 9vw, 3rem); }

  .pkg-features { grid-template-columns: 1fr; gap: 12px; }

  .pkg-process { grid-template-columns: 1fr; gap: 2rem; }

  .pkg-strip-list { gap: 12px 10px; }
  .pkg-strip-list li { margin-right: 0; padding: 9px 18px; font-size: 11px; }

  /* Safety net: kill any transform/opacity leftovers */
  .pkg-card { transform: none !important; }
  .pkg-card:hover { transform: none !important; }
  .pkg-features { transform: none !important; }
  .pkg-grid.has-active .pkg-card { opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pkg-hero-glow { animation: none !important; }
}