/* ======================================================================
   PROJECT HOOF — LAB
   Overrides on top of base.css + mobile-mmo.css. Lives at /lab/lab.css.
   Loaded LAST so any rule wins via cascade order, not !important.
   ====================================================================== */

/* ---------- #3 Подпись под Join CTA ----------
   Microcopy that removes the "what will it cost me" friction.
   Sits directly under the hero JOIN THE HERD button. */
.hero-cta-fineprint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin-top: .7rem;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-soft, #a7b4d8) 85%, transparent);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.hero-cta-fineprint b {
  font-weight: 600;
  color: var(--gold-2, #ffe278);
}
.hero-cta-fineprint .dot {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Social proof: "Join 147 riders who sealed the contract" */
.hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: .55rem;
  padding: .45rem .9rem;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink, #e8edff);
  background: rgba(10,19,38,.45);
  border: 1px solid color-mix(in srgb, var(--gold, #f0c041) 30%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.hero-social-proof[hidden] { display: none; }
.hero-social-proof .sp-count {
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: .95rem;
  background: linear-gradient(180deg, var(--gold-2, #ffe278), var(--gold, #f0c041));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-social-proof .sp-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-2, #ffe278);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold, #f0c041) 60%, transparent);
  animation: hoof-pulse 2.4s ease-out infinite;
}
@keyframes hoof-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--gold, #f0c041) 60%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0   transparent; }
}

/* ---------- #7 Footer: roadmap-block ----------
   Replaces the 3-column "(SOON)" stack with one honest roadmap row +
   Discord-CTA. The "under construction" smell goes away. */
.footer-roadmap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold, #f0c041) 6%, transparent),
    color-mix(in srgb, var(--gold-dk, #a07a18) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold, #f0c041) 28%, transparent);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 24px rgba(0,0,0,.4);
}
.footer-roadmap-text {
  display: flex; flex-direction: column; gap: .35rem;
}
.footer-roadmap-kicker {
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-2, #ffe278);
}
.footer-roadmap-line {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.45;
  color: var(--ink, #e8edff);
}
.footer-roadmap-line b {
  font-weight: 700;
  background: linear-gradient(90deg, var(--gold-2, #ffe278), var(--gold, #f0c041));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.footer-roadmap-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.4rem;
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1a1408;
  background: linear-gradient(180deg, var(--gold-2, #ffe278), var(--gold, #f0c041) 50%, var(--gold-dk, #a07a18));
  border: 2px solid color-mix(in srgb, var(--gold-2, #ffe278) 70%, white 30%);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 4px 0 var(--gold-dk, #a07a18),
    0 10px 22px rgba(240, 192, 65, .35);
  transition: transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.footer-roadmap-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 6px 0 var(--gold-dk, #a07a18),
    0 14px 28px rgba(240, 192, 65, .55);
}
@media (max-width: 700px) {
  .footer-roadmap {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-roadmap-cta { justify-self: center; }
}

/* Base .footer-grid is 2fr 1fr 1fr 1fr (4 cols). After we collapsed the
   arsenal/open columns into the roadmap-block, only 2 items remain. */
.footer-grid.footer-grid-lab {
  grid-template-columns: 2fr 1fr;
  max-width: 1100px;
}
@media (max-width: 700px) {
  .footer-grid.footer-grid-lab { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- #6 CORKBOARD — Meet the Herd ----------
   Replaces the flat navy ".herd" background with a warm cork surface and
   re-skins every .officer card as a torn paper note pinned to the board.
   We override background/border/shadow/text-colors rather than restructure.
*/

/* Cork backdrop — base brown + procedural SVG grain so the texture is
   crisp at any DPR without shipping a separate asset. */
.herd {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.28  0 0 0 0 0.15  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>"),
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.18), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.32), transparent 55%),
    linear-gradient(180deg, #7a5733, #5a3d22 60%, #4a3018);
  background-size: 320px 320px, auto, auto, auto;
  border-top: 1px solid color-mix(in srgb, #2a1810 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #2a1810 70%, transparent);
  box-shadow:
    inset 0 12px 30px rgba(0,0,0,.45),
    inset 0 -12px 30px rgba(0,0,0,.55);
}

/* Tone the kicker + h2 down so they read against warm cork, not navy. */
.herd .section-head h2 {
  color: #fff6e2;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.herd .section-head h2 em {
  background: linear-gradient(180deg, #ffe278, #f0c041);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.herd .section-head .kicker {
  color: #ffd884;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}

/* Officer card → torn cream paper. Subtle grain + soft cream gradient,
   stronger drop-shadow so the card visually sits ON the board, not in it. */
.herd .officer {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0 0.2  0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"),
    linear-gradient(155deg, #fbf3da 0%, #f1e3bd 60%, #e8d5a4 100%);
  background-size: 200px 200px, auto;
  border: 1px solid rgba(120, 80, 30, .35);
  border-radius: 4px;
  color: #3a2a16;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 14px 22px -10px rgba(0,0,0,.55),
    0 30px 50px -25px rgba(0,0,0,.35);
  /* Perspective so JS-driven tilt feels 3D, not flat skew. */
  transform-style: preserve-3d;
  will-change: transform;
}

/* Frayed-paper edge: subtle inner shadow on top + bottom for a deckle feel. */
.herd .officer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.06);
  border-radius: inherit;
  z-index: 0;
}

/* Override the base hover that just unrotates + lifts 6px — we'll handle
   the tilt via JS so a tiny CSS hover just deepens the shadow. */
.herd .officer:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 18px 32px -10px rgba(0,0,0,.6),
    0 38px 70px -22px rgba(0,0,0,.45);
  border-color: rgba(120, 80, 30, .55);
}

/* Brass pin — replaces the red plastic dot with a warm metallic stud
   that sits in the same place. The original .officer-pin element stays. */
.herd .officer-pin {
  width: 16px; height: 16px;
  top: -8px;
  background:
    radial-gradient(circle at 32% 28%, #fff1bf 0%, #f0c041 28%, #b88820 65%, #5a3d10 100%);
  box-shadow:
    0 0 0 1px rgba(45, 30, 10, .35),
    0 1px 0 rgba(255, 230, 170, .55) inset,
    0 -2px 0 rgba(80, 50, 15, .35) inset,
    0 3px 5px rgba(0,0,0,.45),
    0 6px 14px rgba(0,0,0,.35);
}
.herd .officer-pin::after {
  content: "";
  position: absolute;
  left: 32%; top: 22%;
  width: 30%; height: 24%;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  filter: blur(1px);
}

/* Text inside cards — dark ink on cream paper. */
.herd .officer-head { z-index: 1; position: relative; }
.herd .officer-tags { z-index: 1; position: relative; }
.herd .officer-quote { z-index: 1; position: relative; }

.herd .who-line h3 {
  color: #2a1810;
  font-family: var(--font-display, "Russo One", sans-serif);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.herd .uid { color: rgba(58, 42, 22, .65); }

/* Power number stays gold but darker so it doesn't blow out against cream. */
.herd .power {
  background: linear-gradient(180deg, #b88820, #7d5a18);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.herd .power small { color: rgba(125, 90, 24, .85); -webkit-text-fill-color: currentColor; }

/* Role chips: keep gold for R5 (Khan), give the rest an inked stamp look. */
.herd .role {
  color: #2a1810;
  background: linear-gradient(180deg, #f0c041, #b88820);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 2px 5px rgba(0,0,0,.2);
  border: 1px solid rgba(80, 50, 15, .35);
}
.herd .role-r5 {
  background: linear-gradient(180deg, #ffe278, #f0c041 55%, #a07a18);
  color: #1a1408;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 3px 8px rgba(240, 192, 65, .45);
}

/* Officer quote — slightly darker ink, no harsh gold border on cream. */
.herd .officer-quote {
  font-style: italic;
  color: #4a3a22;
  border-left: 2px solid rgba(120, 80, 30, .35);
  padding-left: .75rem;
  opacity: 1;
}

/* Avatar: keep the photo, but soften the ring to brass on paper. */
.herd .avatar {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .6),
    0 0 0 3px rgba(120, 80, 30, .5),
    0 4px 10px rgba(0,0,0,.35);
}

/* Mobile: less rotation so cards stay readable. */
@media (max-width: 720px) {
  .herd .officer { transform: none !important; }
}

/* Unified transform — composes asymmetric layout offsets (--rot, --tilt-ty),
   the hover-lift, and the JS-driven 3D tilt (--tilt-rx/--tilt-ry).
   Overrides every nth-child rule from base.css + mobile-mmo.css in one go.
   The high-specificity .pinboard > prefix wins over plain .officer rules. */
.herd .pinboard > .officer,
.herd .pinboard > .officer:nth-child(n),
.herd .pinboard > .officer:hover,
.herd .pinboard > .officer:nth-child(n):hover {
  transition: transform .35s cubic-bezier(.2,.7,.25,1), box-shadow .25s ease, border-color .25s;
  transform:
    perspective(1200px)
    rotate(var(--rot, 0deg))
    translateY(var(--tilt-ty, 0px))
    translateZ(0)
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
}
/* Pre-set --tilt-ty per nth-child so the asymmetric "pinned" feel survives. */
.herd .pinboard > .officer:nth-child(2)  { --tilt-ty: 1.5rem; }
.herd .pinboard > .officer:nth-child(4)  { --tilt-ty: .75rem; }
.herd .pinboard > .officer:nth-child(6)  { --tilt-ty: -1rem; }
.herd .pinboard > .officer:nth-child(8)  { --tilt-ty: .6rem; }
.herd .pinboard > .officer:nth-child(9)  { --tilt-ty: -.4rem; }
.herd .pinboard > .officer:nth-child(10) { --tilt-ty: .5rem; }
.herd .pinboard > .officer:nth-child(11) { --tilt-ty: -.5rem; }
/* Hover state: lift, unrotate slightly (we keep --rot via JS reduction). */
.herd .pinboard > .officer.is-hover {
  --tilt-ty: calc(var(--tilt-ty, 0px) - 8px);
}

/* While tilting (active), kill the slow transition so cursor tracking is snappy. */
.herd .pinboard > .officer.is-tilting,
.herd .pinboard > .officer.is-tilting:hover {
  transition: box-shadow .25s ease, border-color .25s;
}

/* ---------- #2 Sticky bottom CTA (mobile) ----------
   Always-visible golden button at the bottom edge once the user has
   scrolled past the hero. Wakes up via .visible class set in lab.js. */
.mobile-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: .8rem max(env(safe-area-inset-left), 1rem) calc(.8rem + env(safe-area-inset-bottom)) max(env(safe-area-inset-right), 1rem);
  background: linear-gradient(180deg,
    rgba(10,19,38,0),
    rgba(10,19,38,.7) 35%,
    rgba(5,10,24,.92));
  backdrop-filter: blur(6px);
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.mobile-sticky-cta.visible {
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-sticky-cta .btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem 1.4rem;
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1a1408;
  background: linear-gradient(180deg, var(--gold-2, #ffe278), var(--gold, #f0c041) 50%, var(--gold-dk, #a07a18));
  border: 2px solid color-mix(in srgb, var(--gold-2, #ffe278) 70%, white 30%);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 4px 0 var(--gold-dk, #a07a18),
    0 10px 24px rgba(240, 192, 65, .45);
}
.mobile-sticky-cta .btn small {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: .65rem;
  letter-spacing: .14em;
  opacity: .75;
}

/* Only show on small viewports. On desktop the hero CTA is always visible. */
@media (min-width: 800px) {
  .mobile-sticky-cta { display: none; }
}

/* ---------- #1 Hero headline overlay ----------
   The 3D scene stays the star; the title sits on top with a soft
   backdrop so the words read against busy parts of the render. */
.hero-headline {
  position: absolute;
  inset: auto 0 auto 0;
  top: calc(var(--nav-h, 72px) + clamp(.75rem, 2vw, 1.75rem));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  padding: 0 var(--pad-i, 1.5rem);
  text-align: center;
  pointer-events: none;
}
.hero-headline-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-2, #ffe278);
  padding: .45rem 1.1rem;
  background: rgba(0,0,0,.45);
  border: 1px solid color-mix(in srgb, var(--gold, #f0c041) 35%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.hero-headline-eyebrow::before,
.hero-headline-eyebrow::after {
  content: "";
  display: block;
  width: 18px; height: 1px;
  background: currentColor;
  opacity: .55;
}
.hero-headline h1 {
  font-family: var(--font-display, "Russo One", sans-serif);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--ink, #e8edff);
  text-shadow:
    0 2px 12px rgba(0,0,0,.85),
    0 8px 40px rgba(0,0,0,.6);
}
.hero-headline h1 em {
  background: linear-gradient(180deg, var(--gold-2, #ffe278), var(--gold, #f0c041));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(240, 192, 65, .35));
}
.hero-headline-tagline {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-weight: 600;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  letter-spacing: .04em;
  color: var(--ink-soft, #a7b4d8);
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  max-width: 32ch;
}

/* The original hero content (button + scroll cue) stays at the bottom band.
   We just put the headline absolute on top — no layout change needed. */
@media (max-width: 700px) {
  .hero-headline {
    top: calc(var(--nav-h, 72px) + 1.25rem);
    gap: .4rem;
  }
  .hero-headline h1 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .hero-headline-tagline { font-size: .9rem; max-width: 26ch; }
}