:root {
  color-scheme: light;
  background: #fff;
  --design-width: min(100vw, 177.7778vh);
  --design-height: min(100vh, 56.25vw);
}

@font-face {
  font-family: "OCR A";
  src: url("./assets/fonts/OCR_A.TTF") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

#stage {
  position: absolute;
  width: var(--design-width);
  height: var(--design-height);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: visible;
  background: #fff;
  isolation: isolate;
}

#cube-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  cursor: grab;
}

#brand-art {
  position: absolute;
  left: 38.85%;
  top: 6.2%;
  width: 22.3%;
  height: 87.6%;
  z-index: 1;
  background: transparent;
  pointer-events: none;
}

#brand-mark,
#brand-wordmark {
  position: absolute;
  overflow: visible;
}

#brand-mark {
  left: 24.7%;
  top: 0;
  width: 59%;
  height: 29.5%;
  background: #fff;
  box-shadow: 0 0 0 8px #fff;
  opacity: 1;
  transition: opacity 850ms ease;
}

#brand-wordmark {
  left: 0;
  top: 37.6%;
  width: 100%;
  height: 62.4%;
}

#mark-svg,
#wordmark-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#mark-svg .st0 { fill: #232120; }
#mark-svg .st1 { fill: #1f38d6; }
#mark-svg .st2 { fill: #35fe2d; }
#mark-svg .st3 { fill: #bd2c2f; }
#mark-svg .st4 { fill: #fffd1c; }
#mark-svg .st5 { fill: #04fcf9; }
#mark-svg .st6 { fill: #8307b5; }

#mark-svg .st1,
#mark-svg .st2,
#mark-svg .st3,
#mark-svg .st4,
#mark-svg .st5,
#mark-svg .st6 {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

#brand-art.is-playing #mark-svg .st1,
#brand-art.is-playing #mark-svg .st2,
#brand-art.is-playing #mark-svg .st3,
#brand-art.is-playing #mark-svg .st4,
#brand-art.is-playing #mark-svg .st5,
#brand-art.is-playing #mark-svg .st6 {
  animation: facet-in 560ms cubic-bezier(.2,.75,.25,1) forwards;
}

#brand-art.is-playing #mark-svg .st1 { animation-delay: 0ms; }
#brand-art.is-playing #mark-svg .st2 { animation-delay: 150ms; }
#brand-art.is-playing #mark-svg .st3 { animation-delay: 300ms; }
#brand-art.is-playing #mark-svg .st4 { animation-delay: 450ms; }
#brand-art.is-playing #mark-svg .st5 { animation-delay: 600ms; }
#brand-art.is-playing #mark-svg .st6 { animation-delay: 750ms; }

#mark-svg .st0 {
  opacity: 0;
  transition: opacity 650ms ease 1.05s;
}

#brand-art.is-playing #mark-svg .st0 { opacity: 1; }

.letter,
.media-dot {
  opacity: 0;
  fill: #000;
}

.design-row {
  transition: opacity 600ms ease;
}

#contact-at {
  fill: none;
  stroke: #000;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 600ms ease;
}

#brand-art.is-contact .design-row { opacity: 0; }
#brand-art.is-contact #contact-at { opacity: 1; }

.contact-mail-overlay {
  position: absolute;
  top: 0;
  left: -2%;
  width: 130%;
  height: 73%;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

.contact-mail-overlay div {
  width: 100%;
  height: 100%;
  background: transparent;
}

.contact-mail-overlay:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

#contact-trigger {
  position: fixed;
  right: clamp(14px, 3vw, 40px);
  bottom: clamp(14px, 3vw, 36px);
  z-index: 3;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #000;
  font-family: "OCR A", monospace;
  font-size: clamp(28px, 3vw, 40px);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 650ms ease;
  cursor: pointer;
}

#contact-trigger.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#contact-trigger:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

#brand-art.is-typing .letter {
  animation: letter-in 380ms ease-out forwards;
  animation-delay: calc(var(--letter-order) * 68ms);
}

#brand-art.is-typing .media-dot {
  animation: letter-in 380ms ease-out forwards;
  animation-delay: calc(11 * 68ms);
}

#brand-art.is-fading #brand-mark { opacity: 0; }
#cube-canvas.is-prepared { opacity: 1; }
#cube-canvas.is-visible { pointer-events: auto; }
#cube-canvas.is-dragging { cursor: grabbing; }

@keyframes facet-in {
  from { opacity: 0; transform: translateY(-9%) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1.08); }
}

@keyframes letter-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #brand-mark { transition-duration: 250ms; }
  #brand-art.is-playing #mark-svg .st1,
  #brand-art.is-playing #mark-svg .st2,
  #brand-art.is-playing #mark-svg .st3,
  #brand-art.is-playing #mark-svg .st4,
  #brand-art.is-playing #mark-svg .st5,
  #brand-art.is-playing #mark-svg .st6,
  #brand-art.is-typing .letter,
  #brand-art.is-typing .media-dot { animation-duration: 1ms; }
  #mark-svg .st0 { transition-duration: 1ms; transition-delay: 0ms; }
  #brand-art.is-typing .letter,
  #brand-art.is-typing .media-dot { animation-delay: 0ms; }
}