/* =========================================================
   HUBISLAB — TECHNOLOGY GATEWAY
   Full-bleed four-panel index (dualsonic-style):
   equal columns at rest, the hovered panel expands and its
   artwork lifts, the others recede. Centre wordmark fades out
   while a panel is active so it never fights the copy.
   ========================================================= */

.techgate{
  /* fills the viewport below the fixed bar — this block is now the top of the
     page, matching the reference where the four panels are the first screen */
  /* full viewport: the bar is transparent at the top of this page and floats
     over the panels, exactly like the reference */
  --tg-h:100vh;
  --tg-h:100svh;
  position:relative;
  display:flex;
  height:var(--tg-h);
  min-height:560px;
  overflow:hidden;
  background:#0b0f14;
  isolation:isolate;
}

/* ---------- panel ---------- */
.techgate .tg{
  position:relative;
  /* basis 0, not 25% — with a 25% basis the four panels already fill the row,
     leaving no free space for flex-grow to redistribute on hover */
  flex:1 1 0;
  min-width:0;
  display:block;
  text-decoration:none;
  color:#fff;
  overflow:hidden;
  /* reference timing, measured: "width 1s ease-in-out" */
  transition:flex-grow 1s ease-in-out;
  will-change:flex-grow;
}
/* hairline separators, drawn on the panel itself so they ride the resize */
.techgate .tg + .tg::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;z-index:3;
  background:rgba(255,255,255,.16);transition:opacity .5s ease;
}

/* ---------- artwork ---------- */
.techgate .tg__media{position:absolute;inset:0;z-index:0;overflow:hidden;}
/* No scale, deliberately. Measured on the reference: the img is exactly the panel
   box (639x1305) with transform:none and object-fit:cover. So when the panel
   widens, the image box widens with it and MORE of the photograph is revealed
   left-to-right — the picture gets wider, it does not zoom. Adding a scale here
   would turn that reveal into a crop-and-magnify, which is the wrong effect. */
.techgate .tg__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Reference (dualsonic /main/intro) measured: img{filter:none} and a flat veil of
   rgba(0,0,0,.65) over it. So at REST every panel is dark and carries white type.
   The photograph is never brightened or graded — activating a panel simply clears
   its veil, and the type flips to black because the bare photo is light. */
.techgate .tg__media::after{
  content:"";position:absolute;inset:0;
  background:rgba(8,12,18,.65);
  transition:opacity .55s ease;
}

/* ---------- copy ---------- */
.techgate .tg__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding:0 clamp(14px,1.6vw,26px) clamp(34px,5.5vh,62px);
  text-align:center;
}
.techgate .tg__kr{
  font-size:clamp(11.5px,.86vw,13.5px);font-weight:700;letter-spacing:.03em;
  color:rgba(255,255,255,.9);margin-bottom:9px;white-space:nowrap;
}
.techgate .tg__en{
  font-size:clamp(1.35rem,2.15vw,2.5rem);
  font-weight:400;letter-spacing:-.005em;line-height:1.1;
  color:#fff;
  white-space:nowrap;
}
/* "View more" is revealed by hover / keyboard focus */
.techgate .tg__more{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:clamp(14px,2.2vh,22px);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:5px;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s ease .06s,transform .55s cubic-bezier(.22,.7,.2,1) .06s;
  white-space:nowrap;
}
.techgate .tg__more i{font-style:normal;transition:transform .4s ease;}

/* ---------- centre wordmark ---------- */
.techgate__brand{
  position:absolute;inset:0;z-index:4;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;text-align:center;
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.7,.2,1);
}
.techgate__wordmark{
  font-size:clamp(2rem,4.6vw,4.4rem);font-weight:700;letter-spacing:.02em;
  color:#fff;line-height:1;
}
.techgate__tag{
  margin-top:14px;font-size:clamp(12px,1vw,15px);font-weight:500;
  color:rgba(255,255,255,.86);
}

/* ---------- interaction ----------
   Driven by .is-hover / .on, which techgate.js only sets on pointer-capable
   wide viewports. Gating in JS rather than a @media (hover:hover) block keeps
   the states inspectable and avoids a dead rule on devices that report oddly. */
/* Three panels, so the ratio is retuned. Holding the inactive shrink factor from
   the four-panel layout (25% -> 19.6%, i.e. 0.78x) gives inactive 26.1% and active
   47.8% of the row — a ratio of 1.83:1, hence 1.5 against 0.82. Editing one panel
   count means revisiting these two numbers. */
.techgate.is-hover .tg{flex-grow:.82;}
.techgate.is-hover .tg.on{flex-grow:1.5;}

/* Inactive panels are NOT darkened further: doing so would break the black type
   on a light photo. The active panel leads by width and by clearing its veil. */

/* the active panel simply removes the veil — the photograph is shown untouched.
   Its widening is handled by flex-grow above; the image needs no rule of its own. */
.techgate .tg.on .tg__media::after{opacity:0;}
.techgate .tg.on .tg__more{opacity:1;transform:none;}
.techgate .tg.on:hover .tg__more i{transform:translateX(5px);}

/* ---------- adaptive type colour ----------
   techgate.js samples each photograph once and tags the panel .tg--light when the
   bare photo is bright. It only takes effect while the panel is ACTIVE, because
   that is the only moment the veil is gone and the photo shows at full brightness.
   At rest the veil rules and white type is correct.
   Pure #000 / #fff as measured on the reference, and no text-shadow anywhere. */
.techgate .tg.tg--light.on .tg__en{color:#000;}
.techgate .tg.tg--light.on .tg__kr{color:#000;}
.techgate .tg.tg--light.on .tg__more{color:#000;border-bottom-color:rgba(0,0,0,.5);}

.techgate.is-hover .techgate__brand{opacity:0;transform:scale(.97);}

/* keyboard parity — focus behaves like hover */
.techgate .tg:focus-visible{outline:2px solid #fff;outline-offset:-6px;}
.techgate .tg:focus-visible .tg__more{opacity:1;transform:none;}

/* ---------- entrance ---------- */
.techgate .tg__body>*{opacity:0;transform:translateY(18px);}
.techgate.in .tg__body>*{
  opacity:1;transform:none;
  transition:opacity .7s ease,transform .8s cubic-bezier(.22,.7,.2,1);
  transition-delay:calc(var(--i,0) * .09s + .1s);
}
.techgate.in .tg__more{opacity:0;transform:translateY(12px);}   /* stays hidden until hover */
.techgate__brand{opacity:0;}
.techgate.in .techgate__brand{opacity:1;transition:opacity .9s ease .45s;}
/* must outrank the .in rule above, which would otherwise pin it back to 1 */
.techgate.in.is-hover .techgate__brand{opacity:0;transform:scale(.97);transition:opacity .4s ease,transform .5s cubic-bezier(.22,.7,.2,1);}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .techgate{--tg-h:auto;flex-direction:column;height:auto;}
  .techgate .tg{flex:none;height:clamp(230px,34vh,300px);}
  .techgate .tg + .tg::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;}
  .techgate .tg__more{opacity:1;transform:none;}
  .techgate.in .tg__more{opacity:1;transform:none;}
  .techgate__brand{position:static;padding:clamp(40px,7vh,64px) 20px;opacity:1;}
  .techgate.in .techgate__brand{opacity:1;}
}

@media (prefers-reduced-motion:reduce){
  .techgate .tg,
  .techgate .tg__media img,
  .techgate .tg__body>*,
  .techgate__brand{transition:none !important;}
  .techgate .tg__body>*{opacity:1;transform:none;}
  .techgate .tg__more{opacity:1;transform:none;}
}