/* ============================================================
   TECHSOLUX — hero-show.css
   ApeChain hero, ported to the TechSolux site.
   WebGL2 bent-card wheel + topographic contour background +
   bottom-anchored overlay (HOT · title · description · CTA · thumbs).
   ============================================================ */

@font-face{
  font-family:"Manuka";
  src:url("fonts/manuka.otf") format("opentype");
  font-display:swap;
}

/* ---- section : full-bleed, bottom-anchored overlay ---- */
.hxa{
  position:relative;
  min-height:100svh;
  width:100%;
  overflow:clip;
  background:#0a0a0a;
  color:#fff;
  display:flex;
  --hero-idle:0;
}

/* cross-fading per-slide gradient layers (under everything) */
.hxa__bg{ position:absolute; inset:0; z-index:0; }
.hxa__bg-layer{
  position:absolute; inset:0; opacity:0;
  transition:opacity .7s ease-out;
}
.hxa__bg-layer.is-on{ opacity:1; }
/* darkening veil over the slide gradients so the 3D wheel + text stand out */
.hxa__bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(4,6,14,.55) 0%, rgba(4,6,14,.32) 40%, rgba(4,6,14,.5) 100%),
    radial-gradient(70% 60% at 60% 42%, transparent 0%, rgba(4,6,14,.35) 100%);
}

/* topographic contour lines (white 20%, cursor-reactive) */
.hxa__contour{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; display:block;
  pointer-events:none; touch-action:none;
}

/* WebGL card wheel — fills the hero, draggable */
.hxa__wheel{
  position:absolute; inset:0; z-index:10;
  width:100%; height:100%; display:block;
  cursor:move; touch-action:pan-y; user-select:none;
}

/* legibility scrim for the bottom overlay */
.hxa::after{
  content:""; position:absolute; inset:0; z-index:12; pointer-events:none;
  background:linear-gradient(to top, rgba(7,8,11,.78) 0%, rgba(7,8,11,.25) 22%, transparent 46%);
}

/* ---- right-edge prev/next ---- */
.hxa__nav{
  position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%);
  z-index:30; display:none; flex-direction:column; align-items:center; gap:16px;
}
@media (min-width:768px){ .hxa__nav{ display:flex; } }
.hxa__navbtn{
  position:relative; width:64px; height:64px;
  background:transparent; border:0; cursor:pointer;
  display:grid; place-items:center;
}
.hxa__navbtn .ring{
  position:absolute; left:-16px; top:-16px; pointer-events:none;
}
.hxa__navbtn .ring .echo{ opacity:0; transition:opacity .3s; }
.hxa__navbtn:hover .ring .echo{ opacity:.4; }
.hxa__navbtn .ring .fill{ opacity:0; transition:opacity .3s; }
.hxa__navbtn:hover .ring .fill{ opacity:1; }
.hxa__navbtn .tri{
  position:relative; width:12px; height:12px; color:#fff;
}

/* ---- overlay grid (bottom-anchored) ---- */
.hxa__overlay{
  position:relative; z-index:20;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter); padding-bottom:44px; padding-top:100px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
  pointer-events:none;
}
.hxa__overlay > *{ pointer-events:auto; }

/* left block */
.hxa__left{
  display:flex; flex-direction:column; gap:16px;
  align-items:flex-start; max-width:min(60vw,640px);
}
.hxa__hot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hxa__fire{ width:21px; height:28px; display:block; flex:none; }
.hxa__hotword{
  font-family:"Manuka", var(--font-display);
  font-size:32px; line-height:1.12; text-transform:uppercase; margin-right:8px;
}
.hxa__cat{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.92);
}
.hxa__title{
  font-family:"Manuka", var(--font-display);
  font-weight:400;
  font-size:clamp(56px, 9.5vw, 120px);
  line-height:.785; letter-spacing:0; text-transform:uppercase;
  margin:0;
}
.hxa__desc{
  font-family:var(--font-mono);
  font-size:12px; line-height:1.3; letter-spacing:.24px;
  text-transform:uppercase; color:rgba(255,255,255,.86);
  max-width:320px; min-height:28px; margin:0;
}

/* white CTA pill with gradient ring */
.hxa__cta{
  position:relative; display:inline-flex; margin-top:8px;
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:#0a0a0a;
}
.hxa__cta .pill{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-width:156px; padding:15px 24px; border-radius:16px; background:#fff;
  overflow:hidden; z-index:1;
}
.hxa__cta .ring{ position:absolute; left:-16px; top:-16px; pointer-events:none; z-index:0; }
.hxa__cta .ring .glow{ opacity:.4; transition:opacity .3s; }
.hxa__cta:hover .ring .glow{ opacity:.9; }
.hxa__cta .lbl{ display:block; transition:transform .3s ease-out; }
.hxa__cta:hover .lbl{ transform:translateY(-2px); }

/* right block */
.hxa__right{
  display:flex; flex-direction:column; align-items:flex-end; gap:16px;
  margin-left:auto; padding-bottom:12px;
}
.hxa__all{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; display:inline-flex; gap:6px; align-items:center;
  opacity:.9; transition:opacity .25s;
}
.hxa__all:hover{ opacity:1; }
.hxa__thumbs{ display:flex; gap:8px; }
.hxa__thumb{
  position:relative; width:48px; height:48px; border-radius:8px; overflow:hidden;
  border:2px solid transparent; background:#0c0f18; cursor:pointer; padding:0;
  transition:border-color .3s, box-shadow .3s;
}
.hxa__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hxa__thumb-veil{
  position:absolute; inset:0; background:#000; opacity:.5; transition:opacity .3s;
}
.hxa__thumb.is-active{ border-color:#fff; box-shadow:0 0 24px rgba(255,255,255,.7); }
.hxa__thumb.is-active .hxa__thumb-veil{ opacity:0; }
.hxa__thumb-bar{
  position:absolute; left:8px; right:8px; bottom:6px; height:2px;
  background:rgba(0,0,0,.2); border-radius:2px; opacity:0; transition:opacity .3s;
}
.hxa__thumb.is-active .hxa__thumb-bar{ opacity:1; }
.hxa__thumb-bar i{
  position:absolute; left:0; top:0; height:100%; width:100%;
  background:#fff; border-radius:2px; transform-origin:left;
  transform:scaleX(var(--hero-idle,0));
}

/* reveal animation on slide change */
@keyframes hxaReveal{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.hxa-reveal{ display:inline-block; animation:hxaReveal .6s cubic-bezier(.22,.61,.36,1) both; }

@media (prefers-reduced-motion:reduce){
  .hxa-reveal{ animation:none; }
  .hxa__thumb-bar i{ transform:scaleX(1); }
}

/* ---- mobile ---- */
@media (max-width:767px){
  /* the wheel sits in the upper area (engine raises it on mobile);
     the whole text block is pushed to the BOTTOM of the hero, below it */
  .hxa__overlay{
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;     /* stack at the bottom, not space-between */
    text-align:center;
    gap:18px;
    padding-top:88px;
    padding-bottom:24px;
  }
  .hxa__left{ align-items:center; max-width:none; width:100%; gap:10px; }
  /* Reserve fixed heights so the text block keeps the SAME height (and so
     the same vertical position) whatever the active project — no jumping. */
  .hxa__hot{ justify-content:center; flex-wrap:wrap; row-gap:6px; }
  .hxa__cat{
    flex-basis:100%; line-height:1.3; min-height:2.6em;
    display:flex; align-items:center; justify-content:center; text-align:center;
  }
  .hxa__title{
    font-size:clamp(38px,11vw,60px); line-height:.92;
    width:100%; min-height:1.84em;            /* 2 lines reserved */
    display:flex; align-items:flex-end; justify-content:center;
  }
  .hxa__desc{
    margin-inline:auto; min-height:2.6em;      /* 2 lines reserved */
    display:flex; align-items:flex-start; justify-content:center;
  }
  .hxa__cta{ margin-top:4px; }
  .hxa__right{ align-items:center; margin-left:0; width:100%; gap:12px; }
  /* deepen the bottom scrim so the bottom-anchored text stays readable */
  .hxa::after{
    background:linear-gradient(to top, rgba(7,8,11,.92) 0%, rgba(7,8,11,.55) 34%, transparent 62%);
  }
}