:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  font-kerning: normal;
  background: #fff;
  color: #000;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 240px; }

.cover {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 88px 16px;
  overflow: hidden;
}

.brand { position: relative; z-index: 1; width: min(78vw, 460px); margin: 0; line-height: 0; }
.brand-replay {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.brand-replay:disabled { cursor: default; opacity: 1; }
.brand-replay:focus-visible { outline: 1px dashed #888; outline-offset: 22px; }
.brand-stage, .brand-drift { display: block; }
.wordmark { display: block; width: 100%; height: auto; overflow: visible; }
.glyph { transform-box: fill-box; transform-origin: center; }

.contact {
  z-index: 2;
  position: fixed;
  right: 0;
  bottom: calc(clamp(20px, 4vh, 40px) + env(safe-area-inset-bottom, 0px));
  left: 0;
  display: flex;
  justify-content: center;
  padding-right: env(safe-area-inset-right, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  pointer-events: none;
}
.contact-slot { display: grid; place-items: center; width: 64px; height: 56px; pointer-events: auto; }
.contact-entry, .contact-magnet { display: block; }
.contact-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #656565;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.contact-ring { position: absolute; inset: 0; width: 48px; height: 48px; overflow: visible; color: #d8d8d8; }
.contact-icon { position: relative; width: 19px; height: 19px; }
.contact-link:focus-visible { outline: 2px solid #000; outline-offset: 5px; }
.contact-link:active { background: #111; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .contact-link:hover { background: #111; color: #fff; }
  .contact-link:hover .contact-ring { color: #111; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand { --hover-rise: -10px; }
  .brand.is-entering .glyph {
    animation: glyph-assemble 1000ms cubic-bezier(.22,1,.36,1) var(--delay) both;
  }
  .brand.is-entering .glyph--dot {
    animation: dot-arrive 850ms cubic-bezier(.22,1,.36,1) 350ms both;
  }
  .brand.is-entering .brand-drift {
    animation: brand-suspend 5.6s ease-in-out 2600ms infinite;
  }
  .color-intro .contact-entry { animation: contact-arrive 850ms cubic-bezier(.2,.8,.25,1) 2300ms both; }
  .color-intro .contact-ring circle { stroke-dasharray: 1; animation: ring-draw 950ms cubic-bezier(.4,0,.2,1) 2350ms both, ring-color 950ms linear 2350ms both; }
  .color-intro .contact-icon { animation: icon-arrive 650ms cubic-bezier(.2,.8,.25,1) 2500ms both; }
  .contact-link { transition: background-color 220ms, color 220ms, transform 180ms; }
  .contact-ring { transition: color 220ms; }
  .contact-link:active { transform: scale(.91); transition-duration: 70ms; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .brand { --hover-rise: -7px; }
}

@keyframes glyph-assemble {
  0% { opacity: 0; transform: translateX(var(--from-x)) scaleX(.86); }
  28% { opacity: 1; }
  72% { opacity: 1; transform: translateX(calc(var(--from-x) * -.06)) scaleX(1.012); }
  100% { opacity: 1; transform: translateX(0) scaleX(1); }
}

@keyframes dot-arrive {
  0% { opacity: 0; transform: translateY(-22px) scale(.55); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes brand-suspend {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--hover-rise)); }
}
@keyframes contact-arrive {
  0% { opacity: 0; transform: translateY(18px) scale(.55); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ring-draw {
  from { stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
  to { stroke-dashoffset: 0; transform: rotate(0deg); transform-origin: center; }
}
@keyframes icon-arrive {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-height: 280px) {
  .contact { position: static; padding-bottom: 20px; }
  .cover { min-height: 180px; padding-block: 32px; }
}

/* Mirrored colour planes: pink, orange, fuchsia, then the white canvas. */
.intro-colors { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .intro-colors { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .intro-colors span::before, .intro-colors span::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: calc(50% + 2px);
    background: var(--plane-color); transform: translateX(var(--outside));
  }
  .intro-colors span::before { left: 0; --outside: -101%; }
  .intro-colors span::after { right: 0; --outside: 101%; }
  .intro-pink { --plane-color: #f4c5ed; }
  .intro-fuchsia { --plane-color: #e51e91; }
  .intro-orange { --plane-color: #f04e28; }
  .color-intro .intro-pink::before, .color-intro .intro-pink::after { animation: pink-planes 2500ms cubic-bezier(.65,0,.25,1) both; }
  .color-intro .intro-fuchsia::before, .color-intro .intro-fuchsia::after { animation: fuchsia-planes 2500ms cubic-bezier(.65,0,.25,1) both; }
  .color-intro .intro-orange::before, .color-intro .intro-orange::after { animation: orange-planes 2500ms cubic-bezier(.65,0,.25,1) both; }
  .color-intro .wordmark > g { animation: intro-ink 2500ms linear both; }
}
@keyframes pink-planes {
  0%, 76% { transform: translateX(0); }
  100% { transform: translateX(var(--outside)); }
}
@keyframes orange-planes {
  0%, 22% { transform: translateX(var(--outside)); }
  40%, 76% { transform: translateX(0); }
  100% { transform: translateX(var(--outside)); }
}
@keyframes fuchsia-planes {
  0%, 44% { transform: translateX(var(--outside)); }
  62%, 76% { transform: translateX(0); }
  100% { transform: translateX(var(--outside)); }
}
@keyframes intro-ink {
  0%, 22% { fill: #b52d85; }
  40%, 76% { fill: #fff; }
  86%, 100% { fill: #fff; }
}

/* Reveal black ink at the same viewport edge as the outgoing colour planes. */
.brand-drift { position: relative; }
.wordmark--reveal { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .color-intro .wordmark--reveal {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: ink-reveal 2500ms cubic-bezier(.65,0,.25,1) both;
  }
  .color-intro .wordmark--reveal > g { animation: none; fill: #000; }
}
@keyframes ink-reveal {
  0%, 76% { clip-path: inset(0 calc(50% + 2px)); }
  100% { clip-path: inset(0 calc(50% - 50.5vw - .02px)); }
}

@keyframes ring-color {
  0% { stroke: #b52d85; }
  35% { stroke: #f04e28; }
  70% { stroke: #e51e91; }
  100% { stroke: currentColor; }
}