/* =========================================================
   HUMANBOTS — 3D MODELING PAGE ONLY
   Loads after global.css and service.css. Labels, titles,
   buttons, hero base, word-fill, process timeline and the
   inline CTA come from service.css; this file only holds
   what is unique to this page.
========================================================= */


/* =========================================================
   1. HERO LAYOUT + VISUAL
========================================================= */

.hb3-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
  align-items:center;
}

/* hero visual */
.hb3-visual{
  position:relative;
  min-height:560px;
  display:grid;
  place-items:center;
}

.hb3-orb{
  position:relative;
  width:min(480px, 92%);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,77,22,.08), rgba(255,255,255,.015) 55%, transparent 70%);
}

.hb3-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-15deg);
}
.hb3-ring.r1{width:92%;height:56%}
.hb3-ring.r2{width:70%;height:92%;transform:translate(-50%,-50%) rotate(35deg)}
.hb3-ring.r3{width:52%;height:52%;border-color:rgba(255,77,22,.2)}

.hb3-shape{
  position:relative;
  width:230px;
  height:230px;
  border-radius:32% 68% 62% 38% / 40% 35% 65% 60%;
  background:linear-gradient(145deg, #ff7b4b 0%, var(--orange) 43%, #7c1800 100%);
  box-shadow:
    0 40px 90px rgba(255,77,22,.18),
    inset 20px 20px 50px rgba(255,255,255,.09),
    inset -20px -20px 50px rgba(0,0,0,.4);
  transform:rotate(-12deg) skewY(-3deg);
  animation:hb3Float 5s ease-in-out infinite;
}
.hb3-shape::before{
  content:"";
  position:absolute;
  right:34px;
  top:22px;
  width:86px;
  height:86px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.35), rgba(255,255,255,.08) 30%, transparent 65%);
  filter:blur(2px);
}
@keyframes hb3Float{
  0%,100%{transform:rotate(-12deg) skewY(-3deg) translateY(0)}
  50%{transform:rotate(-8deg) skewY(-1deg) translateY(-16px)}
}

.hb3-float-tag{
  position:absolute;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(5,5,5,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#d6d6d6;
  font-size:11px;
  line-height:1.3;
  box-shadow:0 16px 40px rgba(0,0,0,.3);
}
.hb3-float-tag strong{
  display:block;
  margin-bottom:3px;
  color:var(--orange);
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:500;
}
.hb3-float-tag.t1{left:0;top:18%}
.hb3-float-tag.t2{right:0;top:36%}
.hb3-float-tag.t3{left:6%;bottom:16%}


/* =========================================================
   2. WHAT WE MODEL (grid and cards from .svc-grid / .svc-card)
========================================================= */

.hb3-card-top{display:flex;justify-content:space-between;align-items:flex-start}
.hb3-card-top .svc-mono{color:var(--orange)}




/* =========================================================
   3. TYPES OF RENDERS
========================================================= */

.hb3-renders{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}

.hb3-render{
  padding:26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  transition:transform .35s ease, border-color .35s ease;
}
.hb3-render:hover{transform:translateY(-4px);border-color:rgba(255,77,22,.3)}

.hb3-render-art{
  position:relative;
  height:205px;
  margin-bottom:24px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:radial-gradient(circle, rgba(255,77,22,.11), transparent 50%), #000;
  overflow:hidden;
}
.hb3-render-art::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:36px 36px;
}
.hb3-render-art > *{position:absolute}

.hb3-render .svc-mono{display:block;margin-bottom:10px;color:var(--orange)}
.hb3-render h3{
  margin-bottom:10px;
  color:#fff;
  font-size:24px;
  line-height:1.1;
  font-weight:580;
  letter-spacing:-.035em;
}
.hb3-render p{max-width:470px;color:var(--dim);font-size:13px;line-height:1.65}

/* abstract drawings, one per render type */
.art-product{
  left:50%;top:54%;
  width:115px;height:145px;
  transform:translate(-50%,-50%) rotate(-9deg);
  border-radius:26px 26px 34px 34px;
  background:linear-gradient(145deg, #ff7a48, var(--orange) 45%, #771800);
  box-shadow:0 22px 55px rgba(255,77,22,.18), inset 14px 12px 25px rgba(255,255,255,.1);
}
.art-product::before{
  content:"";position:absolute;left:28px;top:-22px;
  width:58px;height:32px;border-radius:10px 10px 4px 4px;background:#d63b0e;
}

.art-room{
  inset:32px 54px;
  border-left:1px solid rgba(255,77,22,.7);
  border-bottom:1px solid rgba(255,77,22,.7);
  transform:skewY(-8deg);
}
.art-room::before{
  content:"";position:absolute;left:42px;bottom:0;
  width:100px;height:50px;border:1px solid rgba(255,255,255,.3);border-radius:6px 6px 0 0;
}

.art-building{
  left:44%;bottom:34px;
  width:155px;height:105px;
  transform:translateX(-50%);
  border:1px solid rgba(255,77,22,.65);
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:24px 24px;
}
.art-building::before{
  content:"";position:absolute;right:-42px;bottom:0;
  width:105px;height:75px;border:1px solid rgba(255,255,255,.24);
}

.art-lifestyle{
  left:50%;top:50%;
  width:120px;height:120px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), rgba(255,77,22,.28) 30%, rgba(255,77,22,.05) 65%, transparent 70%);
}
.art-lifestyle::after{
  content:"";position:absolute;left:37px;top:22px;
  width:46px;height:80px;border-radius:13px;background:var(--orange);
  box-shadow:0 15px 30px rgba(255,77,22,.2);
}

.art-explode{
  left:50%;top:50%;
  width:190px;height:110px;
  transform:translate(-50%,-50%);
}
.art-explode span{
  position:absolute;left:50%;
  width:90px;height:25px;
  transform:translateX(-50%);
  border:1px solid rgba(255,77,22,.7);
  background:rgba(255,77,22,.05);
}
.art-explode span:nth-child(1){top:0}
.art-explode span:nth-child(2){top:40px;width:115px}
.art-explode span:nth-child(3){top:80px;width:72px}

.art-orbit{
  left:50%;top:50%;
  width:150px;height:150px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,77,22,.6);
  border-radius:50%;
}
.art-orbit::before,
.art-orbit::after{
  content:"";position:absolute;left:50%;top:50%;
  border:1px solid rgba(255,255,255,.2);border-radius:50%;
  transform:translate(-50%,-50%);
}
.art-orbit::before{width:82px;height:150px}
.art-orbit::after{width:150px;height:72px}
.art-orbit span{
  position:absolute;left:50%;top:50%;
  width:44px;height:64px;
  transform:translate(-50%,-50%);
  border-radius:8px;background:var(--orange);
}


/* =========================================================
   4. PORTFOLIO + LIGHTBOX
========================================================= */

.hb3-meta{
  display:flex;
  justify-content:space-between;
  padding:16px 0;
  margin-bottom:14px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:#666;
  text-transform:uppercase;
}
.hb3-meta strong{color:var(--orange);font-weight:500}

.hb3-gallery{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:12px;
}

.hb3-shot{
  position:relative;
  grid-column:span 6;
  height:470px;
  padding:0;
  border:0;
  border-radius:14px;
  background:var(--card);
  overflow:hidden;
  cursor:zoom-in;
  font:inherit;
  color:inherit;
  text-align:left;
}
/* repeating rhythm: wide + narrow, then two halves */
.hb3-shot:nth-child(7n+1),
.hb3-shot:nth-child(7n+6){grid-column:span 8;height:560px}
.hb3-shot:nth-child(7n+2),
.hb3-shot:nth-child(7n+7){grid-column:span 4;height:560px}

.hb3-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.hb3-shot:hover img{transform:scale(1.045)}

.hb3-shot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.7) 100%);
  opacity:.55;
  transition:opacity .35s ease;
  pointer-events:none;
}
.hb3-shot:hover::after{opacity:.9}

.hb3-shot-num{
  position:absolute;
  left:18px;
  top:18px;
  z-index:1;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:rgba(255,255,255,.75);
  font-size:10px;
}

.hb3-shot-open{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:1;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  font-size:14px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease;
}
.hb3-shot:hover .hb3-shot-open,
.hb3-shot:focus-visible .hb3-shot-open{opacity:1;transform:none}

.hb3-lightbox{
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  background:rgba(0,0,0,.96);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.hb3-lightbox.is-open{opacity:1;visibility:visible}
.hb3-lightbox img{
  max-width:min(1400px, 92vw);
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
}
.hb3-lightbox-count{position:absolute;left:25px;top:30px;color:#777}

.hb3-lightbox button{
  position:absolute;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.hb3-lightbox button:hover{background:var(--orange);border-color:var(--orange)}
.hb3-lb-close{right:25px;top:25px;width:46px;height:46px;font-size:20px}
.hb3-lb-close:hover{transform:rotate(90deg)}
.hb3-lb-prev,
.hb3-lb-next{top:50%;width:50px;height:50px;font-size:18px;transform:translateY(-50%)}
.hb3-lb-prev{left:25px}
.hb3-lb-next{right:25px}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:950px){
  .hb3-hero-grid{grid-template-columns:1fr;gap:20px}
  .hb3-visual{min-height:480px}


  .hb3-shot,
  .hb3-shot:nth-child(7n+1),
  .hb3-shot:nth-child(7n+2),
  .hb3-shot:nth-child(7n+6),
  .hb3-shot:nth-child(7n+7){grid-column:span 6;height:390px}
}

@media (max-width:650px){
  .hb3-visual{min-height:380px}
  .hb3-orb{width:300px}
  .hb3-shape{width:160px;height:160px}
  .hb3-float-tag{padding:9px 10px;font-size:10px}
  .hb3-float-tag.t1{top:12%}
  .hb3-float-tag.t3{left:2%;bottom:8%}

  .hb3-renders{grid-template-columns:1fr}
  .hb3-render{padding:20px}

  .hb3-gallery{gap:8px}
  .hb3-shot,
  .hb3-shot:nth-child(7n+1),
  .hb3-shot:nth-child(7n+2),
  .hb3-shot:nth-child(7n+6),
  .hb3-shot:nth-child(7n+7){grid-column:span 12;height:auto;aspect-ratio:1.25 / 1}
  .hb3-shot-open{opacity:1;transform:none}

  .hb3-lightbox{padding:15px}
  .hb3-lb-prev,.hb3-lb-next{width:42px;height:42px}
  .hb3-lb-prev{left:12px}
  .hb3-lb-next{right:12px}
  .hb3-lb-close{top:15px;right:15px}
}