.biin-category-gateway {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  overflow: hidden;
  direction: ltr;
  background: var(--biin-brand-cream, #f2ebe3);
}

.biin-category-gateway *,
.biin-category-gateway *::before,
.biin-category-gateway *::after { box-sizing: border-box; }

.biin-category-gateway__panel {
  position: relative;
  min-width: 0;
  height: clamp(430px, 36vw, 620px);
  overflow: hidden;
  direction: rtl;
  background: #f2ebe3;
}

.biin-category-gateway__media,
.biin-category-gateway__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.biin-category-gateway__media {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 91%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 91%, transparent);
}

.biin-category-gateway__media img {
  object-fit: cover;
  transition: transform 1100ms cubic-bezier(.22, 1, .36, 1), opacity 900ms ease;
}

.biin-category-gateway__panel--slippers img { object-position: 50% 66%; }
.biin-category-gateway__panel--bags img { object-position: 52% 50%; }

.biin-category-gateway__panel::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.biin-category-gateway__panel--slippers::after {
  background: linear-gradient(270deg, rgb(242 235 227 / .2), transparent 54%);
}

.biin-category-gateway__panel--bags::after {
  background: linear-gradient(90deg, rgb(242 235 227 / .16), transparent 50%);
}

.biin-category-gateway__copy {
  position: absolute;
  z-index: 3;
  top: 25%;
  width: min(48%, 380px);
  color: #282d22;
  font-family: var(--font-biin-ar);
  text-shadow: 0 1px 13px rgb(242 235 227 / .6);
}

.biin-category-gateway__panel--slippers .biin-category-gateway__copy {
  right: clamp(32px, 6vw, 112px);
  text-align: right;
}

.biin-category-gateway__panel--bags .biin-category-gateway__copy {
  top: 29%;
  left: clamp(32px, 4.5vw, 82px);
  text-align: left;
}

.biin-category-gateway__copy h2 {
  margin: 0;
  color: #282d22;
  font-size: clamp(38px, 3.5vw, 60px);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: 0;
}

.biin-category-gateway__copy p {
  margin: 7px 0 20px;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.48;
}

.biin-category-gateway__copy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgb(66 70 54 / .16);
  border-radius: 2px;
  background: rgb(242 235 227 / .88);
  color: #292e23;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1), opacity 650ms ease, background-color 300ms ease, border-color 300ms ease;
}

.biin-category-gateway__copy a span:last-child {
  display: inline-block;
  transition: transform 250ms ease;
}

.biin-category-gateway__copy a:hover,
.biin-category-gateway__copy a:focus-visible {
  border-color: rgb(66 70 54 / .42);
  background: #f2ebe3;
}

.biin-category-gateway__copy a:hover span:last-child,
.biin-category-gateway__copy a:focus-visible span:last-child { transform: translateX(-5px); }

.biin-category-gateway__copy a:focus-visible { outline: 2px solid #424636; outline-offset: 3px; }

.biin-category-gateway__signature {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: #f2ebe3;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .38;
}

.biin-category-gateway__signature--mobile { display: none; }

.biin-category-gateway.is-motion-ready:not(.is-visible) .biin-category-gateway__media img {
  transform: scale(1.038);
  opacity: .88;
}

.biin-category-gateway.is-motion-ready:not(.is-visible) .biin-category-gateway__copy > * {
  transform: translateY(16px);
  opacity: 0;
}

.biin-category-gateway__copy > h2,
.biin-category-gateway__copy > p {
  transition: transform 650ms cubic-bezier(.22, 1, .36, 1), opacity 650ms ease;
}

.biin-category-gateway.is-visible .biin-category-gateway__copy h2 { transition-delay: 700ms; }
.biin-category-gateway.is-visible .biin-category-gateway__copy p { transition-delay: 850ms; }
.biin-category-gateway.is-visible .biin-category-gateway__copy a { transition-delay: 1000ms, 0ms, 0ms; }
.biin-category-gateway.is-visible .biin-category-gateway__panel--bags .biin-category-gateway__copy h2 { transition-delay: 820ms; }
.biin-category-gateway.is-visible .biin-category-gateway__panel--bags .biin-category-gateway__copy p { transition-delay: 970ms; }
.biin-category-gateway.is-visible .biin-category-gateway__panel--bags .biin-category-gateway__copy a { transition-delay: 1120ms, 0ms, 0ms; }

.biin-category-gateway__signature path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1650ms cubic-bezier(.37, 0, .27, 1) 250ms;
}

.biin-category-gateway.is-motion-ready:not(.is-visible) .biin-category-gateway__signature path { stroke-dashoffset: 1; }
.biin-category-gateway.is-visible .biin-category-gateway__signature { animation: biin-category-signature-drift 12s ease-in-out 2s infinite alternate; }

@keyframes biin-category-signature-drift {
  from { transform: translate3d(-2px, 1px, 0); }
  to { transform: translate3d(2px, -2px, 0); }
}

@media (hover: hover) and (pointer: fine) {
  .biin-category-gateway__panel:hover img { transform: scale(1.025); }
}

@media (max-width: 700px) {
  .biin-category-gateway { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .biin-category-gateway__panel--slippers .biin-category-gateway__media {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 100%);
  }
  .biin-category-gateway__panel--bags .biin-category-gateway__media {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
  }
  .biin-category-gateway__signature--desktop { display: none; }
  .biin-category-gateway__signature--mobile { display: block; stroke-width: 1; opacity: .3; }
  .biin-category-gateway__panel { height: clamp(330px, 88vw, 430px); }
  .biin-category-gateway__panel--slippers img { object-position: 42% 63%; }
  .biin-category-gateway__panel--bags img { object-position: 63% 50%; }
  .biin-category-gateway__copy { top: 13%; width: min(52%, 225px); }
  .biin-category-gateway__panel--slippers .biin-category-gateway__copy { right: 24px; }
  .biin-category-gateway__panel--bags .biin-category-gateway__copy { top: 15%; left: 24px; width: min(48%, 190px); }
  .biin-category-gateway__copy h2 { font-size: clamp(31px, 8vw, 38px); }
  .biin-category-gateway__copy p { margin: 6px 0 15px; font-size: 13px; }
  .biin-category-gateway__copy a { min-height: 38px; padding: 8px 11px; gap: 9px; font-size: 12px; }
  .biin-category-gateway.is-motion-ready:not(.is-visible) .biin-category-gateway__copy > * { transform: translateY(12px); }
}

@media (prefers-reduced-motion: reduce) {
  .biin-category-gateway__media img,
  .biin-category-gateway__copy > *,
  .biin-category-gateway__signature path,
  .biin-category-gateway__copy a,
  .biin-category-gateway__copy a span:last-child { transition: none; }
  .biin-category-gateway__signature { animation: none !important; }
}