/* ============================================================
   EXPERIENCE LAYER — shared across all Conveyance pages
   Depends on: css/style.css loaded first
   ============================================================ */

/* Hide default cursor */
* { cursor: none !important; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--onyx);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(26,26,26,0.25);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1),
              height 0.35s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s;
  will-change: left, top;
}
.cursor-ring.enlarged { width: 52px; height: 52px; border-color: rgba(26,26,26,0.15); }
.cursor-ring.onyx-section { border-color: rgba(242,237,227,0.2); }
.cursor-dot.onyx-section  { background: var(--cream); }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 9997; background: transparent;
}
.scroll-bar-fill {
  height: 100%; width: 0%;
  background: var(--cream-dark);
  transition: width 0.08s linear;
}

/* ============================================================
   NOISE GRAIN OVERLAY
   ============================================================ */
.grain {
  position: fixed; top: -100px; left: -100px;
  width: calc(100% + 200px); height: calc(100% + 200px);
  pointer-events: none; z-index: 9996; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: grain-shift 0.4s steps(1) infinite;
}
@keyframes grain-shift {
  0%  { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(2px, -3px); }
  60% { transform: translate(-1px, 3px); }
  80% { transform: translate(3px, 1px); }
  100%{ transform: translate(-2px, -1px); }
}

/* ============================================================
   HERO ENTRANCE (concept.html / index)
   ============================================================ */
.hero { overflow: hidden; }
.hero-eyebrow-wrap,
.hero-h1-wrap,
.hero-sub-wrap,
.hero-actions-wrap { overflow: hidden; }

.hero-eyebrow-inner,
.hero-h1-inner,
.hero-sub-inner,
.hero-actions-inner {
  transform: translateY(100%);
  opacity: 0;
  display: block;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease;
}
.hero-h1-inner { line-height: 1.08; }
.hero-eyebrow-inner.up { transform: translateY(0); opacity: 1; }
.hero-h1-inner.up      { transform: translateY(0); opacity: 1; transition-delay: 0.12s; }
.hero-sub-inner.up     { transform: translateY(0); opacity: 1; transition-delay: 0.24s; }
.hero-actions-inner.up { transform: translateY(0); opacity: 1; transition-delay: 0.36s; }

/* Hero scroll hint */
.hero-scroll { animation: float 2.5s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============================================================
   PAGE HERO ENTRANCE (inner pages)
   ============================================================ */
.page-hero-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.page-hero-item.page-hero-up { opacity: 1; transform: translateY(0); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
.reveal-d5 { transition-delay: 0.40s; }
.reveal-d6 { transition-delay: 0.48s; }

/* Stat counter */
.stat-number { opacity: 0; transition: opacity 0.4s ease; }
.stat-number.counted { opacity: 1; }

/* ============================================================
   MARQUEE BAND
   ============================================================ */
.marquee-band {
  background: var(--onyx);
  border-top: 1px solid #2A2A2A;
  border-bottom: 1px solid #2A2A2A;
  padding: 12px 0;
  overflow: hidden;
  user-select: none;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee-item {
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3A3A3A;
  padding: 0 28px;
}
.marquee-item span { color: #2A2A2A; margin: 0 8px; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================
   SECTION GHOST NUMBERS
   ============================================================ */
.ghost-num {
  position: absolute;
  right: -10px; top: 50%;
  transform: translateY(-50%);
  font-size: 22vw;
  line-height: 1;
  color: rgba(26,26,26,0.028);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  z-index: 0;
}
.section-dark .ghost-num { color: rgba(242,237,227,0.03); }

.section, .section-surface, .section-dark {
  position: relative;
  overflow: hidden;
}
.section > .container,
.section-surface > .container,
.section-dark > .container {
  position: relative;
  z-index: 1;
}

/* page-hero ghost number */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero-ghost {
  position: absolute;
  right: -20px; bottom: -20px;
  font-size: 28vw;
  line-height: 1;
  color: rgba(242,237,227,0.03);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.06em;
}

/* ============================================================
   SYSTEM CARD HOVER
   ============================================================ */
.system-card {
  transition: border-color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.25s;
}
.system-card:hover {
  border-color: var(--onyx);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}

/* ============================================================
   NAV LINK UNDERLINE DRAW
   ============================================================ */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0%; height: 1px;
  background: var(--cream);
  transition: width 0.25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* ============================================================
   STEP CARDS — ghost number accent + hover fill
   ============================================================ */
.step {
  transition: background 0.2s;
  overflow: hidden;
}
.step:hover { background: var(--cream); }
.step::before {
  content: attr(data-step);
  position: absolute;
  right: 20px; bottom: -8px;
  font-size: 80px;
  line-height: 1;
  color: rgba(26,26,26,0.04);
  pointer-events: none;
  letter-spacing: -0.04em;
}

/* ============================================================
   STAT BAR — subtle hover
   ============================================================ */
.stat-item { transition: background 0.2s; }
.stat-item:hover { background: rgba(242,237,227,0.03); }

/* ============================================================
   CTA BUTTON — fill from left
   ============================================================ */
.btn-cream {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn-cream::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--cream-mid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
  z-index: -1;
}
.btn-cream:hover::before { transform: scaleX(1); }
.btn-cream:hover { opacity: 1; }

/* ============================================================
   PHILOSOPHY / DARK SECTION — large italic quote
   ============================================================ */
.section-dark .lead {
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.75;
}

/* ============================================================
   GENERIC CARD HOVER (pricing, about cards, etc.)
   ============================================================ */
.card {
  transition: box-shadow 0.2s, transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

/* Linked cards — remove default anchor styling */
a.step, a.system-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ============================================================
   FAQ ITEM — smooth open/close
   ============================================================ */
.faq-item { transition: background 0.15s; }
.faq-item:hover { background: rgba(26,26,26,0.02); }

/* ============================================================
   MOBILE: disable cursor effects
   ============================================================ */
@media (hover: none) {
  * { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none; }
}