/* Mobile gate — see gate.config.js. Active only with html.has-gate (the
   MOBILE_GATE flag) AND a small screen; otherwise it is display: none and
   the site, including every page's own mobile styles, is untouched. */
.gate {
  display: none;
}

@media (max-width: 899.98px), (pointer: coarse) and (max-width: 1023.98px) {
  /* Hide the site (it stays in the DOM); the page paper shows through. */
  html.has-gate body > *:not(.gate) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html.has-gate body {
    overflow: hidden;
  }
  html.has-gate .gate {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
    font-family: "Inter", system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Layout by share of the screen height (from the mockup): message near
   the top, collage in the middle, contact low. Everything is placed
   independently, so opening the bull moves nothing. Short screens get a
   minimum height and scroll instead of overlapping. */
.gate-inner {
  --collage-w: min(89vw, 41svh); /* 41svh ≈ 32% of the height, as width */
  --bull-w: min(29vw, 13.6svh);
  position: relative;
  height: max(100svh, 560px);
}
.gate-message {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: clamp(12px, 3.4vw, 15px);
  font-weight: 300; /* Inter Light */
  line-height: 1.35;
  letter-spacing: -0.04em;
  color: #9a9a9a;
}
.gate-collage {
  position: absolute;
  left: 50%;
  top: 50.5%;
  width: var(--collage-w);
  height: auto;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
}
/* The bull section: from the bull's top (75% of the height) down to the
   LinkedIn label. "Contact Yóu" sits in its middle; the bull at its top. */
.gate-contact {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  height: calc(var(--bull-w) / 1.323 * 1.12 + 6px);
}
.gate-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(14px, 4.1vw, 18px);
  font-weight: 300; /* Inter Light */
  letter-spacing: -0.04em;
  color: #111111;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.gate-contact.is-open .gate-toggle {
  opacity: 0;
  pointer-events: none;
}

/* The bull: ~29% of the width, top at 75% of the height, nudged left so
   the bull + its labels read as centred. */
.gate-bull {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--bull-w);
  aspect-ratio: 1.323;
  transform: translateX(-66%) scale(0.9);
  transform-origin: 50% 50%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.3s;
}
.gate-contact.is-open .gate-bull {
  transform: translateX(-66%) scale(1);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.gate-bull img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

/* Links: body type, grey (Email white on the bull); 44px tap targets. */
.gate-link {
  position: absolute;
  min-height: 44px;
  min-width: 44px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(11px, 3.1vw, 14px);
  font-weight: 400;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  transform: translate(0, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gate-contact.is-open .gate-link {
  opacity: 1;
}
.gate-contact.is-open .gate-link.is-email {
  transition-delay: 0.2s;
}
.gate-contact.is-open .gate-link.is-instagram {
  transition-delay: 0.28s;
}
.gate-contact.is-open .gate-link.is-linkedin {
  transition-delay: 0.36s;
}
.gate-link.is-email {
  left: 48%;
  top: 32%;
  color: #ffffff;
  transform: translate(-50%, -50%);
}
.gate-link.is-instagram {
  left: 100%;
  top: 56%;
}
.gate-link.is-linkedin {
  left: 70%;
  top: 112%;
}

@media (prefers-reduced-motion: reduce) {
  .gate-toggle,
  .gate-bull,
  .gate-link {
    transition: none !important;
  }
}