/* =========================================================================
   Grand Valley — Motion Enhancement Layer
   Additional (non-destructive) file riding on top of the React build.
   Does not touch the minified code. Can be removed anytime without breaking
   the site. Created: 2026-06-22
   ========================================================================= */

/* ---- Color tokens (aligned with the brand: orange #ff6b00) ---- */
:root {
  --gv-accent: #ff6b00;
  --gv-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================================
   1. SCROLL REVEAL
   Elements are hidden via JS (.gv-reveal class), then revealed on entering
   the viewport (.gv-in). If JS is off, elements are NEVER hidden (the class
   is only added by JS), so content always stays visible.
   ========================================================================= */
.gv-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s var(--gv-ease-spring);
  transition-delay: var(--gv-delay, 0s);
}
.gv-reveal.gv-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   2. 3D CARD TILT
   Perspective container + smoothing. rotateX/Y set via JS inline styles.
   ========================================================================= */
.gv-tilt {
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.gv-tilt.gv-tilt-active {
  transition: transform 0.05s linear; /* responsive while the mouse moves */
}

/* =========================================================================
   3. MAGNETIC BUTTON
   ========================================================================= */
.gv-magnetic {
  transition: transform 0.25s var(--gv-ease-spring);
  will-change: transform;
}

/* =========================================================================
   4. CUSTOM CURSOR
   Two elements: dot (tracks precisely) + ring (follows with lag/lerp).
   Only shown on devices with a mouse (see media query below).
   ========================================================================= */
.gv-cursor-dot,
.gv-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.gv-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--gv-accent);
}
.gv-cursor-ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--gv-accent);
  transition: width 0.25s ease, height 0.25s ease,
              background 0.25s ease, opacity 0.25s ease;
}
/* grows when hovering interactive elements */
.gv-cursor-ring.gv-cursor-hover {
  width: 56px;
  height: 56px;
  background: rgba(255, 107, 0, 0.12);
}

/* =========================================================================
   5. PARALLAX — hardware acceleration hint (transform set via JS)
   ========================================================================= */
.gv-parallax {
  will-change: transform;
}

/* =========================================================================
   DEVICE & ACCESSIBILITY RULES
   ========================================================================= */

/* Hide the custom cursor & disable tilt/magnetic on touch screens */
@media (hover: none), (pointer: coarse) {
  .gv-cursor-dot,
  .gv-cursor-ring {
    display: none !important;
  }
}

/* Honor users who prefer minimal animation */
@media (prefers-reduced-motion: reduce) {
  .gv-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .gv-tilt,
  .gv-magnetic,
  .gv-parallax {
    transform: none !important;
  }
  .gv-cursor-dot,
  .gv-cursor-ring {
    display: none !important;
  }
}

/* =========================================================================
   6. PREMIUM PASS (2026-07-09)
   Hero legibility, operator identity, microinteractions, progress bar.
   All additive — safe to remove without breaking the React build.
   ========================================================================= */

/* ---- 6a. Hero legibility: text-shadow only ----
   No scrim/overlay box: any gradient layer over the animated background
   showed faint rectangular edges on some GPUs. Layered shadows do the job
   with full transparency. */
.hero-title {
  text-shadow:
    0 2px 30px rgba(18, 10, 0, 0.65),
    0 2px 8px rgba(18, 10, 0, 0.45),
    0 1px 2px rgba(18, 10, 0, 0.4);
  letter-spacing: -0.015em;
}
.hero-subtitle {
  color: rgba(255, 255, 255, 0.96);
  text-shadow:
    0 1px 18px rgba(18, 10, 0, 0.7),
    0 1px 6px rgba(18, 10, 0, 0.5),
    0 1px 2px rgba(18, 10, 0, 0.45);
}
.hero-subtitle span {
  text-wrap: balance;
}

/* ---- 6b. Brand eyebrow (injected by gv-enhance.js) ---- */
.gv-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-bottom: 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 10px rgba(18, 10, 0, 0.6);
}
.gv-eyebrow::before,
.gv-eyebrow::after {
  content: "";
  height: 1px;
  width: 34px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55));
}
.gv-eyebrow::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), transparent);
}

/* ---- 6c. Operator status chips (injected by gv-enhance.js) ---- */
.gv-status-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  opacity: 0;
  animation: gv-strip-in 0.8s ease 0.35s forwards;
}
@keyframes gv-strip-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 8, 3, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.gv-chip:hover {
  border-color: rgba(255, 107, 0, 0.55);
  background: rgba(20, 12, 4, 0.55);
}
.gv-chip .gv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  flex: none;
}
.gv-chip.gv-chip-live .gv-dot {
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5);
  animation: gv-pulse 2.2s ease-out infinite;
}
@keyframes gv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ---- 6d. Hero CTA: stronger affordance ---- */
.hero-cta .btn-primary {
  border: 1px solid rgba(255, 107, 0, 0.5);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-cta .btn-primary:hover {
  border-color: var(--gv-accent);
  box-shadow: 0 0 30px rgba(255, 107, 0, 0.35), 0 8px 26px rgba(0, 0, 0, 0.35);
}

/* ---- 6e. Scroll progress bar (injected by gv-enhance.js) ---- */
.gv-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 99998;
  pointer-events: none;
  background: linear-gradient(90deg, #ff6b00, #ffb454);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---- 6f. Nav links: underline slide ---- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: var(--gv-accent);
  transition: right 0.28s var(--gv-ease-spring);
}
.nav-link:hover::after {
  right: 0;
}

/* ---- 6g. "More" button: glass + accent on hover ---- */
.more-btn-fixed .more-btn-content {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.more-btn-fixed:hover .more-btn-content {
  border-color: rgba(255, 107, 0, 0.55);
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.22);
}

/* ---- 6h. Intro & blog card text contrast ---- */
section.intro .intro-text {
  color: rgba(255, 255, 255, 0.9);
}
.blog-card-title,
.blog-card-description,
.blog-card-date {
  text-shadow: 0 1px 10px rgba(70, 25, 0, 0.35);
}

/* ---- 6i. Cookie banner: more compact on small screens ---- */
@media (max-width: 640px) {
  .cookie-consent {
    font-size: 13px;
  }
  .cookie-consent .cookie-btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ---- 6j. Reduced motion for the premium-pass features ---- */
@media (prefers-reduced-motion: reduce) {
  .gv-status-strip {
    opacity: 1;
    animation: none;
  }
  .gv-chip.gv-chip-live .gv-dot {
    animation: none;
    box-shadow: none;
  }
  .gv-progress {
    display: none;
  }
  .nav-link::after {
    transition: none;
  }
}

/* =========================================================================
   7. PROJECT CARD — Stake button + live metrics (injected by gv-enhance.js)
   ========================================================================= */
.gv-stake-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 16px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 209, 87, 0.55);
  background: linear-gradient(180deg, rgba(255, 156, 78, 0.16), rgba(255, 156, 78, 0.06));
  color: #ffd157;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease,
    box-shadow 0.25s ease, transform 0.15s ease;
}
.gv-stake-btn:hover {
  border-color: #ffd157;
  background: linear-gradient(180deg, rgba(255, 156, 78, 0.28), rgba(255, 156, 78, 0.12));
  box-shadow: 0 6px 22px rgba(255, 156, 78, 0.22);
}
.gv-stake-btn:active {
  transform: translateY(1px);
}
.gv-stake-btn svg {
  width: 13px;
  height: 13px;
  flex: none;
}
/* Touch screens: the card description panel renders open, and the full-width
   "STAKE 0G" bar collides with it (overlapping the panel border). The STAKE
   button inside the panel is available → hide the duplicate bar. */
@media (hover: none), (pointer: coarse) {
  .gv-stake-btn {
    display: none !important;
  }
}

/* Project category tabs: fit one row on narrow screens (ARCHIVE stays up) */
@media (max-width: 640px) {
  .category-tabs {
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-tabs::-webkit-scrollbar {
    display: none;
  }
  .category-tab {
    font-size: clamp(17px, 5.2vw, 26px);
    white-space: nowrap;
    flex: none;
  }
}

/* STAKE button in the card hover panel (.hover-buttons row, next to X/WEB) */
.social-btn.gv-stake-mini {
  color: #ffd157;
  border-color: rgba(255, 209, 87, 0.55) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.social-btn.gv-stake-mini:hover {
  border-color: #ffd157 !important;
  box-shadow: 0 4px 16px rgba(255, 156, 78, 0.25);
}

/* marker for values that have been updated live */
.gv-live-value {
  position: relative;
}
.gv-live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: #4ade80;
  vertical-align: middle;
  animation: gv-pulse 2.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gv-live-dot { animation: none; }
  .gv-stake-btn { transition: none; }
}

/* Narrow screens: keep the chips tidy */
@media (max-width: 480px) {
  .gv-status-strip {
    gap: 8px;
    margin-top: 24px;
  }
  .gv-chip {
    font-size: 10.5px;
    padding: 7px 11px;
  }
  .gv-eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .gv-eyebrow::before,
  .gv-eyebrow::after {
    width: 20px;
  }
}

/* =========================================================================
   8. VALLEY MESH — partners network visual (injected by gv-enhance.js)
   Replaces the floating bubbles with a canvas mesh: GV hub in the center,
   partner logos as orbiting nodes, packets traveling along the edges.
   The original bubbles stay in the DOM (hidden) as the data source and as
   the fallback when the canvas cannot start.
   ========================================================================= */
/* Canvas sits BEHIND the original bubbles and only draws the connective
   lines + traveling packets; the sharp, organic, floating bubbles remain
   the nodes. */
.gv-mesh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.partners-iframe.gv-mesh-active .partners-bubbles {
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .gv-mesh-canvas { display: none !important; }
}