/* Password gate (Figma Luno 301:1294, states 302:1384): the password field under the hero intro on a protected case study.
   While the page is locked (html.is-locked, set by the little script in <head>) only the hero shows, with a SMALLER picture (260px, so the field sits above the fold on computers) and the field;
   the rest of the page (.case-body, footer) is hidden. js/password-gate.js checks the password, then reloads the page unlocked.
   <form class="pw-gate" data-hero-text data-password-gate>
     <div class="pw-gate__field"> lock svg, input.pw-gate__input, span.pw-gate__msg, span.pw-gate__cursor, button.pw-gate__enter </div>
     <div class="pw-gate__skeletor"><img …></div>                      (shown on a wrong password; js/password-gate.js dithers it about 50%)
   </form>
   States (classes on the form): none = empty (placeholder + blinking cursor) · .is-typing = text in the field (enter icon dark) · .is-wrong = "Wrong password, boob!" + Skeletor (enter icon half grey). */

html.is-locked { --hero-image-height: 260px; }
html.is-locked .case-body, html.is-locked .site-footer, html.is-locked .explore--hero, html.is-locked .visual-nav--fixed { display: none !important; }   /* (the docked nav bar sits outside .case-body) */
html.is-locked .case-header--hero { overflow: clip; min-height: 0; padding-bottom: 0; }   /* the locked header is only as tall as its content: no full-screen height, no spare space under it. Skeletor stands on its bottom edge. */
html:not(.is-locked) .pw-gate { display: none; }

.pw-gate { --pw-skel-w: 362px; position: relative; width: min(400px, 100% - 2 * var(--gutter)); margin: 80px auto 0; color: #3f3f3f; font: 500 18px/22px var(--font-text);
  min-height: calc(var(--pw-skel-w) * 248 / 297 - 24px); }   /* computers: just tall enough for Skeletor to stand on the bottom edge with his head 24px above the field (the picture is 297 x 248), so the header never changes height */

.pw-gate__field { position: relative; height: 53px; }
.pw-gate__field::before { content: ""; position: absolute; inset: 0 0 3px; border: 2px solid #3f3f3f; }   /* the box: 50px tall … */
.pw-gate__field::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 3px; background: #3f3f3f; }   /* … and the 3px base under it */

.pw-gate__lock { position: absolute; left: 15px; top: 15px; width: 16px; height: 20px; fill: #3f3f3f; }

.pw-gate__input, .pw-gate__msg {
  position: absolute; left: 59px; right: 52px; top: 0; height: 50px; margin: 0; padding: 0;
  font: inherit; line-height: 50px; color: #3f3f3f; white-space: nowrap;
}
.pw-gate__input { border: 0; border-radius: 0; background: none; outline: 0; caret-color: transparent; appearance: none; -webkit-appearance: none; }   /* the real caret is hidden: .pw-gate__cursor is the blinking one */
.pw-gate__input::placeholder { color: rgba(63, 63, 63, .64); opacity: 1; }
.pw-gate__msg { display: none; pointer-events: none; }

/* the blinking cursor: 1px x 24px. Empty field: 46px from the left, before the placeholder (Figma). With text, js/password-gate.js sets --pw-cursor-x to just after the text. */
.pw-gate__cursor { position: absolute; left: var(--pw-cursor-x, 46px); top: 13px; width: 1px; height: 24px; background: #3f3f3f; animation: pw-blink 1.1s steps(1, end) infinite; pointer-events: none; }
@keyframes pw-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* the enter icon: hidden while the field is empty, dark when there is text, half grey after a wrong password */
.pw-gate__enter { position: absolute; right: 0; top: 0; width: 52px; height: 50px; padding: 0; border: 0; background: none; color: #3f3f3f; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pw-gate__enter svg { position: absolute; left: 19px; top: 18px; width: 13px; height: 15px; fill: currentColor; opacity: 0; transition: opacity .15s; }
.pw-gate.is-typing .pw-gate__enter svg { opacity: 1; }
.pw-gate.is-wrong .pw-gate__enter svg { opacity: .5; }

.pw-gate.is-wrong .pw-gate__msg { display: block; }
.pw-gate.is-wrong .pw-gate__input { opacity: 0; }
.pw-gate.is-wrong .pw-gate__cursor { display: none; }

/* Skeletor: to the right of the field on computers (18px clear of it), standing on the bottom edge of the header (the header is only as tall as the field and him). The picture is a canvas that js/password-gate.js dithers about 50%. */
.pw-gate__skeletor { position: absolute; left: calc(100% + 18px); bottom: 0; width: var(--pw-skel-w); opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: opacity .25s ease-out, transform .35s ease-out, visibility 0s .35s; }
.pw-gate.is-wrong .pw-gate__skeletor { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pw-gate__skeletor img, .pw-gate__skeletor canvas { display: block; width: 100%; height: auto; }
.pw-gate__skeletor canvas { image-rendering: pixelated; }

/* Phones and tablets: the picture sits under the field instead (it is fine for it to scroll below the fold), flush with the bottom of the header. No picture = 40px of air under the field. */
@media (max-width: 900px) {
  .pw-gate { margin: 40px auto 40px; min-height: 0; }
  .pw-gate.is-wrong { margin-bottom: 0; }
  .pw-gate__skeletor { position: static; display: none; width: min(362px, 100%); margin: 24px auto 0; transform: none; }
  .pw-gate.is-wrong .pw-gate__skeletor { display: block; }
}

/* Phones, while the field is being typed in: extra room under the page so the field can scroll up above the on-screen keyboard (js/password-gate.js) */
html.pw-keyboard.is-locked .case-header--hero { padding-bottom: 60vh; padding-bottom: 60svh; }

@media (prefers-reduced-motion: reduce) {
  .pw-gate__cursor { animation: none; }
  .pw-gate__skeletor { transition: none; }
}