/* achoo.collective
   Colours and type are taken from the 2024–2026 portfolio.
   Change the variables below to restyle the whole site. */

@font-face {
  font-family: "commonSans";
  src: local("commonSans"), local("commonSans notRegular"),
       url("/assets/fonts/commonsans-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0430f8;
  --green: #a0fa89;
  --paper: #ffffff;
  --ink: var(--blue);

  /* commonSans has no Chinese characters, so CJK falls through to system fonts */
  --font: "commonSans", "Helvetica Neue", Helvetica, Arial,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --gutter: clamp(16px, 3vw, 32px);
  --max-width: 1240px;

  --cursor: url("/assets/img/cursor.svg") 10 10, auto;
  --cursor-link: url("/assets/img/cursor-link.svg") 20 14, pointer;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.4;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--green);
  color: var(--blue);
}

/* Green dot cursor (mouse only; touch devices keep their default) */

@media (hover: hover) and (pointer: fine) {
  html {
    cursor: var(--cursor);
  }

  a {
    cursor: var(--cursor-link);
  }
}

/* Blue header / footer strips, as on the portfolio pages */

.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 24px;
  margin: 0 var(--gutter);
  padding: 6px 10px;
  background: var(--blue);
  color: var(--green);
  font-size: 16px;
}

header.bar {
  margin-top: var(--gutter);
}

footer.bar {
  margin-bottom: var(--gutter);
}

.bar a {
  text-decoration: none;
}

.bar a:hover,
.bar a:focus-visible,
.bar a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.langs {
  display: flex;
  gap: 14px;
}

/* Layout */

main {
  flex: 1;
  display: flex;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 8vw, 96px) 0;
}

/* Intro */

.name {
  margin: 0 0 0.45em;
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: normal;
  line-height: 1;
  letter-spacing: -0.01em;
}

.name .dot {
  color: var(--green);
  -webkit-text-stroke: 1px var(--blue);
}

.about {
  max-width: 44em;
  margin-bottom: 2.2em;
  font-size: clamp(17px, 1.6vw, 21px);
}

.about p {
  margin: 0 0 1em;
}

/* Buttons */

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}

.pill {
  display: inline-block;
  color: var(--blue);
  font-size: 22px;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.pill:hover,
.pill:focus-visible {
  text-decoration-color: var(--blue);
}

/* a… a… achoo! A small sneeze when the pointer arrives */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pill:hover {
    animation: sneeze 0.5s ease-out;
  }
}

@keyframes sneeze {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.94, 1.04); }
  55%  { transform: scale(0.92, 1.06); }
  70%  { transform: scale(1.08, 0.94) translateX(2px); }
  85%  { transform: scale(0.98, 1.02) translateX(-1px); }
  100% { transform: scale(1); }
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Mobile */

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .bar {
    font-size: 14px;
  }

  .links {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* Sneeze intro: "a… a… aaa… CHOOOOOO!" once, then the site.
   Only shown when intro.js adds the "sneezing" class to <html>.
   --sneeze is the length of the sneeze itself; the rest follows from it. */

.intro-overlay {
  display: none;
}

.sneezing body {
  overflow: hidden;
}

.sneezing .intro-overlay {
  --sneeze: 1.1s;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--blue);
  animation:
    shake 0.35s linear calc(var(--sneeze) * 0.56),
    intro-out 0.3s ease-in var(--sneeze) forwards;
}

.sneeze {
  position: relative;
  display: flex;
  align-items: flex-end;
  font-size: clamp(32px, 8vw, 100px);
  line-height: 1;
  transform-origin: 20% 80%;
  animation: jolt var(--sneeze) both;
}

.sneeze > span {
  display: block;
}

.s-a {
  transform-origin: 50% 100%;
  animation: inhale var(--sneeze) both;
}

.s-ch,
.s-oo,
.s-o {
  overflow: hidden;
  white-space: nowrap;
}

/* "ch" + "oo" burst out and stay */
.s-ch,
.s-oo {
  animation: burst var(--sneeze) both;
}

/* the extra "oooooooooo" stretch out and stay */
.s-o {
  animation: stretch var(--sneeze) both;
}

/* droplets */
.spray {
  position: absolute;
  left: 0.55em;
  top: 45%;
}

.spray i {
  position: absolute;
  width: 0.17em;
  height: 0.17em;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  animation: spray var(--sneeze) ease-out both;
}

.spray i:nth-child(1) { --x: 6em; --y: -1.6em; }
.spray i:nth-child(2) { --x: 9.5em; --y: -0.9em; width: 0.24em; height: 0.24em; }
.spray i:nth-child(3) { --x: 7.5em; --y: 1em; }
.spray i:nth-child(4) { --x: 4.5em; --y: -2em; width: 0.12em; height: 0.12em; }
.spray i:nth-child(5) { --x: 11em; --y: 0.1em; width: 0.14em; height: 0.14em; }
.spray i:nth-child(6) { --x: 5.5em; --y: 1.5em; width: 0.2em; height: 0.2em; }
.spray i:nth-child(7) { --x: 10em; --y: -1.7em; width: 0.1em; height: 0.1em; }

/* a … a … aaa … (breathing in, head tipping back) */
@keyframes inhale {
  0%   { transform: none; }
  14%  { transform: scale(1.1, 1.16) rotate(-4deg) translateY(-3%); }
  20%  { transform: scale(1.02); }
  30%  { transform: scale(1.14, 1.22) rotate(-5deg) translateY(-4%); }
  35%  { transform: scale(1.06); }
  46%  { transform: scale(1.24, 1.38) rotate(-9deg) translateY(-8%); }
  49%  { transform: scale(1.26, 1.36) rotate(-7deg) translateY(-8%); }
  52%  { transform: scale(1.25, 1.4) rotate(-9deg) translateY(-9%); }
  56%  { transform: scale(0.84, 1.04) rotate(5deg); }
  66%, 100% { transform: none; }
}

/* CH! */
@keyframes burst {
  0%, 53%   { max-width: 0; }
  57%, 100% { max-width: 1.4em; }
}

/* oooo */
@keyframes stretch {
  0%, 56%   { max-width: 0; }
  74%, 100% { max-width: 6.5em; }
}

/* the whole word jerks forward */
@keyframes jolt {
  0%, 53%  { transform: none; }
  57%      { transform: translateX(4%) scale(1.16) rotate(-4deg); }
  63%      { transform: translateX(-2%) scale(0.98) rotate(2deg); }
  70%      { transform: translateX(1%) rotate(-1deg); }
  78%, 100% { transform: none; }
}

@keyframes spray {
  0%, 55% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  58%     { opacity: 1; }
  85%     { opacity: 1; }
  100%    { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -1px); }
}

@keyframes intro-out {
  to { opacity: 0; visibility: hidden; }
}