@font-face {
    font-family: "Circular Std";
    src: url("/about/circular-std-medium-500.ttf") format("truetype");
}

@font-face {
    font-family: "Megan June";
    src: url("/about/meganjune.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

:root {
  --bg-image: url("/about/marco-style-desktop.png");
  --bg-size: cover;
  --bg-position: center top;

  --font: "Circular Std", system-ui, sans-serif;

  --glass-width: 720px;
  --glass-border: rgba(255,255,255,.20);

  --text-main: rgba(255,255,255,.92);
  --text-soft: rgba(255,255,255,.74);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text-main);
  background: #050509;
}

body {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 32px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;

  background-image:
    linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.44)),
    var(--bg-image);
  background-repeat: no-repeat;
  background-size: cover, var(--bg-size);
  background-position: center, var(--bg-position);

  opacity: 0;
  transform: scale(1.035);
  animation: bgIn 2.8s ease forwards;
}

.glass-card {
  position: relative;
  z-index: 1;

  width: min(100%, var(--glass-width));
  padding: 34px 38px;
  border: 1px solid var(--glass-border);
  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(35,22,18,.74) 0%,
      rgba(15,16,24,.72) 45%,
      rgba(18,24,36,.70) 100%
    );

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);

  box-shadow: 0 24px 80px rgba(0,0,0,.48);

  opacity: 0;
  transform: translateY(34px);
  animation: cardIn 2.4s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: .55s;
}

.name,
.contact {
  margin: 0 0 30px;
  font-size: 1.8rem;
  letter-spacing: -0.04em;
  font-weight: 500;
  line-height: 1.2;
  font-weight: 500;
  color: white;
  margin-bottom: 30px;
}

.name::after {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  margin-top: 16px;
  background: rgba(128, 235, 255, .65);
  box-shadow: 0 0 16px rgba(128, 235, 255, .45);
}

.contact {
  font-size: 1.2rem;
  margin-top: 26px;
  text-align: right;
  position: relative;
}

.contact::before {
  content: "";
  display: block;

  width: 52px;
  height: 1px;

  margin-left: auto;
  margin-bottom: 14px;

  background: rgba(128,235,255,.65);
  box-shadow: 0 0 16px rgba(128,235,255,.45);

  animation: quietPulse 14s ease-in-out 4s infinite;
}

p {
  margin: 0 0 22px;
  font-size: 1.08rem;
  line-height: 1.68;
  color: var(--text-soft);
  max-width: 58ch;
}

.portal-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin: 26px 0 34px;
}

.portal {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  opacity: 0;
  transform: translateY(16px);
  animation: portalIn 1.4s cubic-bezier(.16, 1, .3, 1) forwards;

  cursor: pointer;
  text-decoration: none;
}

.portal:nth-child(1) { animation-delay: 1.55s; }
.portal:nth-child(2) { animation-delay: 1.67s; }
.portal:nth-child(3) { animation-delay: 1.79s; }
.portal:nth-child(4) { animation-delay: 1.91s; }
.portal:nth-child(5) { animation-delay: 2.03s; }
.portal:nth-child(6) { animation-delay: 2.15s; }

.portal img {
  width: 25px;
  height: 25px;

  filter:
    brightness(0)
    saturate(100%)
    invert(81%)
    sepia(29%)
    saturate(1824%)
    hue-rotate(159deg)
    brightness(104%)
    contrast(102%);

  opacity: .84;

  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    opacity .35s ease,
    filter .35s ease;
}

.portal:hover,
.portal:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.12);
}

.portal:hover img,
.portal:focus-visible img {
  opacity: 1;
  transform: scale(1.12);
}

.portal-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  width: 190px;
  padding: 15px 16px;
  border-radius: 18px;

  background: rgba(8, 9, 15, .78);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  color: rgba(255,255,255,.74);
  font-size: .86rem;
  line-height: 1.45;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .28s ease .12s, transform .28s ease .12s;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

.portal-card strong {
  display: block;
  margin-bottom: 6px;
  color: white;
  font-size: .95rem;
  font-weight: 500;
}

.portal:hover .portal-card,
.portal:focus-visible .portal-card {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.contact {
  margin-top: 0;
  line-height: 1.2;
  font-weight: 500;
  color: white;
  text-align: right;
}

body.reset-hover .portal-card {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(8px) !important;
  pointer-events: none !important;
}

@keyframes bgIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes portalIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-card {
  animation:
    cardIn 2.4s cubic-bezier(.16,1,.3,1) forwards,
    glassBreathing 18s ease-in-out 3s infinite;
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;

  background:
    radial-gradient(circle at 18% 22%, rgba(128,235,255,.16), transparent 22%),
    radial-gradient(circle at 82% 76%, rgba(255,255,255,.08), transparent 24%);

  opacity: 0;
  animation: glassTwinkle 14s ease-in-out 4s infinite;
}

.name::after {
  animation: quietPulse 14s ease-in-out 3.5s infinite;
}

.portal {
  animation:
    portalIn 1.4s cubic-bezier(.16,1,.3,1) forwards,
    portalDrift 16s ease-in-out 4s infinite;
}

.portal:nth-child(2n) {
  animation-duration: 1.4s, 19s;
}

.portal:nth-child(3n) {
  animation-duration: 1.4s, 22s;
}

@keyframes glassBreathing {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 24px 80px rgba(0,0,0,.48);
  }

  42% {
    transform: translateY(-2px) scale(1.008);
    box-shadow: 0 28px 92px rgba(0,0,0,.52);
  }

  62% {
    transform: translateY(-2px) scale(1.008);
  }
}

@keyframes glassTwinkle {
  0%, 68%, 100% {
    opacity: 0;
  }

  74% {
    opacity: .55;
  }

  81% {
    opacity: .18;
  }
}

@keyframes quietPulse {
  0%, 100% {
    opacity: .75;
    box-shadow: 0 0 16px rgba(128, 235, 255, .45);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 28px rgba(128, 235, 255, .7);
  }
}

@keyframes portalDrift {
  0%, 100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -1.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-card::before,
  .name::after,
  .portal {
    animation: none !important;
  }
}

@media (max-width: 700px) {
  :root {
    --bg-image: url("/about/marco-style.png");
    --bg-size: auto 112vh;
    --bg-position: center top;
    --glass-width: 100%;
  }

  body {
    padding: 18px;
  }

  .glass-card {
    padding: 22px 20px;
    border-radius: 24px;
  }

  .name {
    margin-bottom: 18px;
    font-size: 1.28rem;
  }

  p {
    margin-bottom: 10px;
    font-size: .94rem;
    line-height: 1.48;
  }

  .portal-row {
    gap: 9px;
    margin: 16px 0 18px;
  }

  .portal {
    width: 43px;
    height: 43px;
    border-radius: 14px;
  }

  .portal img {
    width: 21px;
    height: 21px;
  }

  .portal-card {
    width: 165px;
    font-size: .8rem;
  }

  .contact {
    font-size: 1.28rem;
  }
}

.wanderer {
  position: fixed;
  bottom: -5px;

  width: 72px;
  height: 72px;

  background-image: url("/about/spritesheet.png");
  background-repeat: no-repeat;
  background-size: 576px 72px;

  image-rendering: pixelated;
  pointer-events: none;
  z-index: 2;

  animation: wandererSteps .8s steps(8) infinite;
}

.wanderer.from-right {
  left: calc(100vw + 80px);
  animation:
    wandererSteps .8s steps(8) infinite,
    wandererTravelRight 26s linear forwards;
}

.wanderer.from-left {
  left: -120px;
  transform: scaleX(-1);
  animation:
    wandererSteps .8s steps(8) infinite,
    wandererTravelLeft 26s linear forwards;
}

@keyframes wandererSteps {
  from { background-position: 0 0; }
  to { background-position: -576px 0; }
}

@keyframes wandererTravelRight {
  from { left: calc(100vw + 80px); }
  to { left: -120px; }
}

@keyframes wandererTravelLeft {
  from { left: -120px; }
  to { left: calc(100vw + 80px); }
}

.wanderer.is-walking {
  opacity: 1;
  animation:
    wandererSteps .8s steps(8) infinite,
    wandererTravel 26s linear forwards;
}

@media (prefers-reduced-motion: reduce) {
  .wanderer {
    display: none;
  }
}

.wanderer-debug {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9999;

  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(128,235,255,.35);
  color: rgba(128,235,255,.9);

  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;

  pointer-events: none;
}