/* ============================================================
   VEHIX — Homepage v3 · ADAPTIVE APP GALLERY
   App-index squares · bright per-app "worlds" · directional
   reveals · the click-to-launch color-wipe transition.
   Designed to scale to any number of apps (data-driven).
   ============================================================ */

/* ---------- HERO (short & direct) ---------- */
.hero-lite { position: relative; padding-top: clamp(3rem, 2rem + 5vw, 5.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); text-align: center; overflow: hidden; }
.hero-lite::after {
  content: ""; position: absolute; left: 50%; top: -10%; transform: translateX(-50%);
  width: min(1200px, 130vw); height: 640px; z-index: 0; pointer-events: none; filter: blur(10px);
  background:
    radial-gradient(40% 46% at 26% 32%, rgba(31,77,255,.16), transparent 70%),
    radial-gradient(38% 44% at 60% 26%, rgba(255,196,0,.16), transparent 72%),
    radial-gradient(40% 46% at 80% 40%, rgba(255,59,48,.13), transparent 70%);
}
.hero-lite .wrap { position: relative; z-index: 2; }
.hero-lite .kicker { margin-bottom: 22px; }
.hero-lite .display { max-width: 18ch; margin-inline: auto; font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem); line-height: 1.07; }
.hero-lite .lead { max-width: 40ch; margin: 30px auto 0; }

/* ---------- APP INDEX (the squares) ---------- */
.app-index { padding-bottom: clamp(4rem, 2rem + 6vw, 7rem); }
.app-index .ix-label { text-align: center; margin-bottom: clamp(1.8rem, 1rem + 2vw, 2.8rem); }
.app-index .ix-label .kicker { justify-content: center; }
.ix-grid {
  display: grid; gap: clamp(14px, 1.4vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 1000px; margin-inline: auto;
}
/* keep them squarish but never absurdly tall */
.app-square {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1 / 1; min-height: 200px;
  padding: clamp(20px, 2vw, 30px); border-radius: var(--r-lg);
  background: var(--c); color: var(--sq-ink, #fff); text-decoration: none; overflow: hidden;
  box-shadow: var(--elev-1);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.app-square::after { /* grain on color */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.app-square:hover { transform: translateY(-7px); box-shadow: var(--elev-2); }
.app-square .sq-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.app-square .sq-num { font-family: var(--serif); font-style: italic; font-size: 1.05rem; opacity: .8; }
.app-square .sq-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; opacity: .55; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.app-square:hover .sq-arrow { opacity: 1; transform: translate(2px,-2px); }
.app-square .sq-name { position: relative; z-index: 2; font-family: var(--serif); font-weight: var(--w-med); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); line-height: 1.04; letter-spacing: -.01em; }
.app-square .sq-tag { position: relative; z-index: 2; margin-top: 8px; font-family: var(--sans); font-weight: var(--w-med); font-size: .98rem; opacity: .9; }

/* ---------- BRIGHT APP "WORLDS" ---------- */
.app-world {
  position: relative; overflow: hidden;
  background: var(--c); color: var(--aw-ink);
  padding-block: var(--section-y);
  display: flex; align-items: center; min-height: min(92vh, 840px);
}
.app-world::after { /* grain keeps brights from feeling flat/cheap */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.app-world .wrap { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2.5rem, 1rem + 6vw, 7rem); width: 100%; }
.app-world.flip .aw-media { order: 2; }
.aw-body { max-width: 33rem; }
.aw-num { font-family: var(--serif); font-style: italic; font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem); line-height: 1; opacity: .75; }
.aw-kicker { margin-top: 8px; font-family: var(--sans); font-size: var(--fs-cap); font-weight: var(--w-bold); letter-spacing: var(--tr-kicker); text-transform: uppercase; opacity: .85; }
.aw-question { margin-top: 20px; font-family: var(--serif); font-weight: var(--w-med); font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.015em; }
.aw-question em { font-style: italic; }
.aw-blurb { margin-top: 22px; font-family: var(--sans); font-size: var(--fs-lead); line-height: 1.5; color: var(--aw-ink-2); }
.aw-price { margin-top: 20px; font-size: 1.05rem; font-weight: var(--w-semi); }
.aw-price b { font-weight: var(--w-bold); }
.aw-cta { margin-top: 30px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
/* button inverts to the app color: white-on-blue world → white pill w/ blue text */
.aw-btn {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; cursor: pointer; border: none;
  font-family: var(--sans); font-weight: var(--w-semi); font-size: 1.04rem;
  padding: 14px 28px; border-radius: var(--r-pill);
  background: var(--aw-ink); color: var(--c); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.aw-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.aw-btn:active { transform: scale(.97); }
.aw-ghost {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  font-family: var(--sans); font-weight: var(--w-semi); font-size: 1.04rem; color: var(--aw-ink);
  text-decoration: none; opacity: .85; background: none; border: none;
}
.aw-ghost:hover { opacity: 1; }
.aw-ghost .chev { transition: transform var(--dur-fast) var(--ease); }
.aw-ghost:hover .chev { transform: translateX(4px); }
.aw-media { display: flex; justify-content: center; position: relative; }
.aw-media::before { /* soft white halo lifts the device off the color */
  content: ""; position: absolute; width: 84%; height: 84%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 68%); filter: blur(26px); z-index: 0;
}
.aw-media > * { position: relative; z-index: 1; }

/* ---------- DIRECTIONAL REVEALS ---------- */
.reveal-l { transform: translateX(calc(-1 * var(--rv))); }
.reveal-r { transform: translateX(var(--rv)); }
.reveal-u { transform: translateY(var(--rv)); }
.reveal-d { transform: translateY(calc(-1 * var(--rv))); }
.reveal.in { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal-l, .reveal-r, .reveal-u, .reveal-d { transform: none !important; opacity: 1 !important; }
}

/* ---------- CONTINUOUS MOTION (little movement everywhere) ---------- */
@keyframes vx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes vx-drift { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(20px); } }
@keyframes vx-bob   { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(7px); opacity: 1; } }
/* device mocks breathe once revealed */
.aw-media > *, .fhero-media > * { animation: vx-float 6.5s var(--ease) infinite; }
.hero-lite::after { animation: vx-drift 16s ease-in-out infinite; }
/* scroll cue */
.scroll-cue { margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-3); font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue svg { animation: vx-bob 1.8s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) {
  .aw-media > *, .fhero-media > *, .hero-lite::after, .scroll-cue svg { animation: none !important; }
}

/* ---------- LAUNCH TRANSITION (color wipe) ---------- */
#wipe {
  position: fixed; inset: 0; z-index: 90; background: var(--wipe, #1f4dff);
  transform: scaleY(0); transform-origin: bottom; pointer-events: none;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
}
#wipe .wipe-mark { width: 56px; height: 56px; opacity: 0; transition: opacity .3s var(--ease) .15s; }
#wipe .wipe-label { display: none; }
body.unloading #wipe { transition: transform .5s var(--ease-out); transform: scaleY(1); }
body.unloading #wipe .wipe-mark, body.unloading #wipe .wipe-label { opacity: 1; }
body.unloading main { transition: opacity .42s var(--ease), transform .52s var(--ease); opacity: 0; transform: translateY(-26px); }
body.unloading .nav { transition: opacity .3s var(--ease), transform .4s var(--ease); opacity: 0; transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  body.unloading #wipe { transition: none; }
  body.unloading main, body.unloading .nav { transition: none; opacity: 1; transform: none; }
}

/* ---------- RESPONSIVE ---------- */
.app-world, .app-index, .about, .faq, .contact { scroll-margin-top: 80px; }
@media (max-width: 860px) {
  .app-world { min-height: 0; }
  .app-world .wrap { grid-template-columns: 1fr; gap: clamp(2.4rem, 8vw, 3.2rem); }
  .app-world.flip .aw-media { order: 0; }
  .aw-body { max-width: 100%; }
  .ix-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@media (max-width: 460px) {
  .app-square { aspect-ratio: auto; min-height: 0; }
}