/* packetslave.com -- everything except the glitch effect, which is in glitch.css.
   Values carried over from the Next.js build this replaced: body #f6fbff /
   Open Sans-turned-Poppins, headings #333, name 72px, the 70px white frame. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #f6fbff;
  color: #7d7789;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

/* The white frame the original drew with two fixed 70px bars. */
.frame::before,
.frame::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 70px;
  background: #fff;
  z-index: 10;
}
.frame::before { left: 0; }
.frame::after { right: 0; }

/* Top bar with the wordmark. The original hid this below 1040px and swapped in
   a hamburger topbar; there is no menu any more, so it simply stays. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  padding: 0 70px;
  background: #fff;
  z-index: 11;
  display: flex;
  align-items: center;
}

.logo {
  color: #000;
  font-size: 25px;
  font-weight: 800;
  line-height: 70px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Opening curtain. Timings match the original's setTimeout choreography:
   the line draws over 1000ms, fades from 800ms, the halves split at 1300ms
   over 300ms, and the whole thing is out of the way by 1600ms. */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  pointer-events: none;
  animation: curtain-done 0s linear 1600ms forwards;
}
#preloader::before,
#preloader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #000;
  animation: curtain-open 300ms ease-in-out 1300ms forwards;
}
#preloader::after {
  left: auto;
  right: 0;
}
#preloader .loader_line {
  margin: auto;
  width: 1px;
  height: 250px;
  position: relative;
  overflow: hidden;
  animation: line-fade 300ms ease 800ms forwards;
}
#preloader .loader_line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0;
  transform: translateY(-50%);
  background: #fff;
  animation: line-height 1000ms ease-in-out forwards;
}

@keyframes line-height { from { height: 0; } to { height: 100%; } }
@keyframes line-fade   { to { opacity: 0; } }
@keyframes curtain-open { from { width: 50%; } to { width: 0; } }
@keyframes curtain-done { to { visibility: hidden; } }

.stage {
  position: absolute;
  inset: 70px;
  overflow: hidden;
}

/* Container geometry the original supplied from custom.css, which loaded after
   glitch.css and overrode it. Without these, glitch.css's 100vw/100vh .glitch
   escapes the 70px-inset stage. The 2.jpg background custom.css also set is not
   carried over: .glitch__item:nth-child(1) is an opaque copy of the portrait
   covering the whole box, so that image was never visible. */
.glitch-author-image .glitch_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.glitch-author-image .glitch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* glitch.css positions .glitch-author-image at left:0 width:40%. */
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  display: flex;
  align-items: center;
  padding-left: 100px;
  z-index: 16;
}

.name {
  margin: 0 0 30px;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: #333;
}

.rule {
  display: block;
  width: 70px;
  height: 5px;
  margin-bottom: 30px;
  background: #333;
}

.job {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #333;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  padding: 0 70px;
  background: #fff;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer p { margin: 0; color: #333; }

.social {
  display: flex;
  gap: 15px;
  align-items: center;
}
.social a {
  display: flex;
  opacity: 0.75;
  transition: opacity 0.3s;
}
.social a:hover,
.social a:focus-visible { opacity: 1; }
.social img { width: 15px; height: 15px; display: block; }

/* The original stepped the name down at 1600px and 1040px and hid the footer
   on narrow screens behind a hamburger. There is no menu any more, so the
   portrait moves behind the text instead of beside it and the footer stays. */
@media (max-width: 1600px) {
  .content { padding-left: 50px; }
  .name { font-size: 55px; margin-bottom: 25px; }
}

@media (max-width: 1040px) {
  .frame::before,
  .frame::after { display: none; }
  .stage { inset: 70px 0; }
  .header { padding: 0 24px; }
  .logo { font-size: 17px; letter-spacing: 1px; }
  .content {
    width: 100%;
    padding: 0 24px;
    background: linear-gradient(90deg, rgba(246, 251, 255, 0.92) 55%, rgba(246, 251, 255, 0.55));
  }
  .name { font-size: 40px; }
  .job { font-size: 19px; }
  .footer { padding: 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch .glitch__item:nth-child(n + 2) { animation: none; }
  #preloader { display: none; }
}