/* =====================================================================
   v8.css — merge layer: v7 Alps hero + v3 body, simplified & polished.
   Loaded after style.css + v3.css. Only adds what the merge needs.
   ===================================================================== */

/* ---------- COMPONENT 1 — Alps ASCII hero (lifted from v7) ---------- */
.alps-hero{
  position:relative;min-height:100svh;overflow:hidden;
  background:var(--hero-bg);color:var(--hero-ink);
  display:flex;align-items:flex-end;
  --ink:rgba(240,232,218,.72); --glow:var(--amber); --field-bg:#141210;
}
.alps-hero > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  /* veiled look: recognisable but softened, warm-biased */
  filter:blur(3px) saturate(1.12) contrast(1.04) brightness(.92);transform:scale(1.05)}
/* transparent canvas: dark backdrop is painted into the bitmap so the local
   cursor reveal can erase it and show the crisp video beneath */
.alps-hero .ascii-tile-canvas{z-index:1 !important;background:transparent !important}
.alps-hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(135% 108% at 16% 112%,rgba(18,14,11,.92),rgba(18,14,11,.4) 46%,transparent 72%),
    linear-gradient(to top,rgba(18,14,11,.5),transparent 42%);
}
.alps-hero__inner{position:relative;z-index:3;width:100%;padding-block:0 clamp(54px,8vh,104px)}
.alps-hero .hero__meta{color:rgba(244,239,231,.72)}
.alps-hero h1{
  font-family:var(--f-display);font-weight:340;font-optical-sizing:auto;
  font-size:clamp(2.9rem,7.8vw,6.6rem);line-height:.96;letter-spacing:-.02em;max-width:14ch;
  text-shadow:0 2px 40px rgba(10,7,5,.5);
}
.alps-hero h1 em{font-style:italic;color:var(--amber)}
.alps-hero .hero__lead{margin-top:26px;max-width:52ch;color:#ece5d9;
  font-size:clamp(1.02rem,1.4vw,1.24rem);line-height:1.55;text-shadow:0 1px 20px rgba(10,7,5,.5)}
.alps-hero .hero__lead b{color:#fff}
.alps-hero .hero__cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.alps-hero__hint{margin-top:24px;color:rgba(244,239,231,.6);font-size:12px;letter-spacing:.04em}
.alps-hero .hero__scroll{color:rgba(244,239,231,.6)}
@media (prefers-reduced-motion:reduce){ .alps-hero > video{opacity:1} }

/* hero clip switcher */
.alps-hero__switch{
  position:absolute;right:var(--pad);bottom:26px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(20,16,12,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);color:rgba(244,239,231,.85);
  font-family:var(--f-mono);border-radius:999px;padding:9px 14px;font-size:12px;letter-spacing:.04em;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.alps-hero__switch:hover{background:rgba(233,169,74,.22);border-color:rgba(233,169,74,.55);color:#fff}
.alps-hero__switch .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.alps-hero__switch kbd{font-family:var(--f-mono);border:1px solid rgba(255,255,255,.32);border-radius:4px;padding:1px 6px;font-size:11px;margin-left:2px;line-height:1.4}
@media (max-width:640px){ .alps-hero__switch{bottom:auto;top:calc(64px + 10px);right:14px;padding:7px 11px;font-size:11px} }

/* ---------- COMPONENT 2 — capability chips under the "feels alive" band ---------- */
.caps{
  margin-top:30px;display:flex;flex-wrap:wrap;gap:9px;
}
.caps span{
  font-size:12px;letter-spacing:.02em;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:999px;padding:7px 13px;
  background:color-mix(in oklab,var(--surface) 60%,transparent);
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.caps span:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* the typed equation — now the band's headline (replaces "Software that feels alive") */
.equation{
  margin:0;font-family:var(--f-mono);font-weight:500;
  font-size:clamp(1.5rem,4.4vw,3.35rem);line-height:1.14;letter-spacing:-.02em;
  color:var(--ink);max-width:24ch;min-height:2.2em;
  text-shadow:0 0 14px var(--paper),0 0 10px var(--paper),0 0 4px var(--paper);
}
.eq__rhs{color:var(--gold);font-weight:500}
.eq__caret{display:inline-block;width:2px;height:1.02em;margin-left:3px;
  background:var(--gold);vertical-align:-0.14em;animation:caretblink 1s steps(1) infinite}
.canvasband .canvasband__sub{margin-top:18px}

/* ---------- COMPONENT 3 — products as a horizontal swipe carousel ---------- */
.work__grid--products{
  display:flex;gap:clamp(16px,2vw,26px);margin-top:clamp(28px,4vw,48px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
  margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 20px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;
}
.work__grid--products::-webkit-scrollbar{display:none}
.work__grid--products.is-dragging{cursor:grabbing;scroll-snap-type:none}
.work__grid--products .tile{flex:0 0 min(430px,80vw);scroll-snap-align:start;margin:0}
.work__grid--products .tile--wide{flex-basis:min(560px,86vw)}
.work__grid--products.is-dragging .tile *{pointer-events:none}
/* at rest let the footage read faintly through the ascii veil (not a solid dark block) */
.work__grid--products .ascii-tile-canvas{background:rgba(23,19,16,.5) !important}
/* short feature description per project */
.tile__desc{margin-top:9px;color:var(--muted);font-size:13.5px;line-height:1.5}
.work__more{margin-top:22px;color:var(--muted);font-size:13px;letter-spacing:.02em}
.work__swipe{margin:4px 0 0;color:var(--muted);font-size:12px;letter-spacing:.04em}
.work__swipe b{color:var(--gold);font-weight:500}

/* image tiles (e.g. FuzeFoot) sample to ASCII like the video tiles */
.tile__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ---------- COMPONENT 4 — merged studio: bio + why-cards in one section ---------- */
/* dynamic "We built ___" typing line */
.studio__typed{
  margin-top:20px;font-family:var(--f-mono);
  font-size:clamp(1rem,2.3vw,1.45rem);color:var(--ink-soft);letter-spacing:-.01em;
  min-height:1.7em;line-height:1.4;
}
.studio__type{color:var(--gold)}
.studio__caret{display:inline-block;width:2px;height:1.05em;margin-left:3px;
  background:var(--gold);vertical-align:-0.16em;animation:caretblink 1s steps(1) infinite}
@keyframes caretblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .studio__caret{animation:none} }

.studio__why{
  margin-top:clamp(34px,5vw,56px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
}
.studio__why .why__card{
  border:1px solid var(--line,rgba(255,255,255,.1));border-radius:var(--r,14px);
  padding:clamp(18px,2vw,26px);background:var(--surface,rgba(255,255,255,.02));
}
.studio__why .why__card .n{font-family:var(--f-mono);font-size:12px;color:var(--gold);letter-spacing:.08em}
.studio__why .why__card h3{margin:10px 0 8px;font-size:1.08rem;font-weight:600}
.studio__why .why__card p{color:var(--muted);font-size:.95rem;line-height:1.5}
@media (max-width:820px){ .studio__why{grid-template-columns:1fr} }

/* ---------- Contact — quiet point-cloud backdrop (echoes v3 hero DNA) ---------- */
.contact--cloud{position:relative;overflow:hidden}
.contact--cloud .wrap{position:relative;z-index:2}
.contact__three{
  position:absolute;top:50%;right:-6%;transform:translateY(-50%);
  width:min(52vw,640px);height:min(52vw,640px);z-index:1;
  opacity:.5;pointer-events:none;
  --three-color:var(--gold);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 45%,transparent 74%);
          mask-image:radial-gradient(circle at 50% 50%,#000 45%,transparent 74%);
}
@media (max-width:820px){ .contact__three{opacity:.28;right:-24%} }
@media (prefers-reduced-motion:reduce){ .contact__three{opacity:.32} }

/* ---------- LOADING INTRO (adapted from the old homepage → new gold/warm-dark) ---------- */
.intro{
  position:fixed;inset:0;z-index:1000;background:var(--hero-bg);color:var(--hero-ink);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad);
  transition:transform 1s var(--ease);
}
.intro.done{transform:translateY(-101%)}
.intro__count{
  position:absolute;top:var(--pad);right:var(--pad);
  font-family:var(--f-mono);font-size:clamp(40px,9vw,120px);line-height:.8;color:var(--hero-ink);
}
.intro__count i{color:var(--amber);font-style:normal;font-size:.4em;vertical-align:super}
.intro__word{
  display:flex;flex-direction:column;line-height:.9;
  font-family:var(--f-display);font-weight:340;letter-spacing:-.02em;
  font-size:clamp(52px,14vw,180px);
}
.intro__word em{font-style:italic;color:var(--amber)}
.intro__word .line{overflow:hidden}
.intro__word .line span{display:block;transform:translateY(110%);animation:introrise .9s var(--ease) forwards}
.intro__word .line:nth-child(2) span{animation-delay:.12s}
@keyframes introrise{to{transform:translateY(0)}}
.intro__bar{margin-top:clamp(18px,3vw,40px);height:2px;background:rgba(244,239,231,.16);width:100%}
.intro__bar i{display:block;height:100%;width:0;background:var(--amber)}
body.intro-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .intro{display:none} }