/* HAS+A DESIGN LAB — V110 3D / INTERACTIVE LAYER
   Additive only. No original content, markup or artwork is changed. */

/* ---------- Hero 3D masterplan canvas (sits behind all hero content) ---------- */
.h3d-hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
}
.h3d-hero-canvas.is-live{opacity:var(--h3d-hero-o,1)}
.hero.h3d-hero-on{cursor:grab}
.hero.h3d-hero-on.h3d-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.hero.h3d-hero-on a,.hero.h3d-hero-on button{cursor:pointer}
@media(max-width:700px){.h3d-hero-canvas{--h3d-hero-o:.4}}

/* ---------- Floating morphing 3D model ---------- */
.h3d-widget{
  position:fixed;left:16px;bottom:16px;width:96px;height:96px;z-index:7900;
  opacity:0;pointer-events:none;transform:translateY(14px) scale(.9);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.h3d-widget.is-live{opacity:1;pointer-events:auto;transform:none}
.h3d-orb{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 50% 38%,rgba(196,43,53,.34),rgba(8,8,8,.82) 72%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:box-shadow .3s,border-color .3s;
}
.h3d-orb:hover{border-color:rgba(196,43,53,.8);box-shadow:0 14px 40px rgba(161,29,39,.45),inset 0 0 0 1px rgba(0,0,0,.4)}
.h3d-orb:active{cursor:grabbing}
.h3d-orb canvas{display:block;width:100%;height:100%}
.h3d-x{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:#111;color:#fff;font:700 14px/1 Arial,sans-serif;
  display:grid;place-items:center;padding:0 0 2px;cursor:pointer;opacity:0;transform:scale(.7);
  transition:opacity .2s,transform .2s,background .2s;
}
.h3d-widget:hover .h3d-x,.h3d-x:focus-visible{opacity:1;transform:none}
.h3d-x:hover{background:#a11d27}
@media(hover:none){.h3d-x{opacity:.85;transform:none}}
@media(max-width:700px){.h3d-widget{width:70px;height:70px;left:10px;bottom:10px}}

/* ---------- Scroll progress ---------- */
.h3d-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:10001;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#a11d27,#ff4b57);
  box-shadow:0 0 12px rgba(255,75,87,.65);
}

/* ---------- Cursor ring ---------- */
.h3d-cursor,.h3d-cursor-dot{
  position:fixed;left:0;top:0;pointer-events:none;z-index:100001;
  border-radius:50%;mix-blend-mode:difference;opacity:0;transition:opacity .3s;
}
.h3d-cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid #fff;
  transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s}
.h3d-cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
.h3d-cursor.is-on,.h3d-cursor-dot.is-on{opacity:1}
.h3d-cursor.is-hot{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(255,255,255,.28)}
.h3d-cursor.is-down{width:26px;height:26px;margin:-13px 0 0 -13px}

/* ---------- 3D card tilt (overrides hover transform only while pointer is on the card) ---------- */
.h3d-tilt{
  transform:perspective(1000px) translateY(-7px) rotateX(var(--h3d-rx,0deg)) rotateY(var(--h3d-ry,0deg)) !important;
  transition:transform .12s ease-out,box-shadow .3s,border-color .3s !important;
  will-change:transform;
}
.h3d-tilt-out{
  transform:perspective(1000px) rotateX(0deg) rotateY(0deg) !important;
  transition:transform .55s cubic-bezier(.2,.7,.2,1) !important;
}
.h3d-glare{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:6;
  background:radial-gradient(circle at var(--h3d-gx,50%) var(--h3d-gy,50%),rgba(255,255,255,.28),transparent 58%);
  mix-blend-mode:soft-light;transition:opacity .25s;
}
.h3d-tilt>.h3d-glare{opacity:1}

/* ---------- Lightbox: image floats in 3D ---------- */
.project-lightbox .lightbox-stage img,
.project-lightbox .lightbox-stage .lightbox-video{will-change:transform}

/* ---------- Print / reduced motion / touch ---------- */
@media print{.h3d-widget,.h3d-progress,.h3d-cursor,.h3d-cursor-dot,.h3d-hero-canvas{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .h3d-widget,.h3d-hero-canvas{transition:none}
  .h3d-tilt,.h3d-tilt-out{transform:none!important}
  .h3d-glare{display:none}
}
@media(hover:none),(pointer:coarse){.h3d-cursor,.h3d-cursor-dot{display:none}}

/* ---------- Header fit on 1024–1400px laptops (original header wrapped the CTA button) ---------- */
@media(min-width:901px) and (max-width:1400px){
  header .links{gap:clamp(12px,1.6vw,22px)}
  header .links li{white-space:nowrap}
  header .links .cta{white-space:nowrap;padding:12px 14px}
  header .nav-tagline{margin-left:14px;padding-left:14px;letter-spacing:.12em}
  header .nav-tagline small{letter-spacing:.04em}
}
@media(min-width:901px) and (max-width:1180px){
  header .links{gap:9px;font-size:9.5px;letter-spacing:.7px}
  header .links .cta{padding:11px 10px}
  header .nav-tagline{margin-left:10px;padding-left:10px;letter-spacing:.06em;font-size:9px}
  header .nav-tagline small{font-size:7.5px;letter-spacing:.02em}
  header .brand img{width:50px;height:50px}
}