/* Intro FX: additive layers for the seal intro. See intro-fx.js. */

.site-intro {
  --intro-ready: 0;
  --dial-size: calc((min(68vw, 68vh) / 2 + 14px) / 0.47);
}

/* ---------- WebGL line field ---------- */
.site-intro__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.site-intro.has-line-field .site-intro__grid {
  opacity: 0.14;
}

/* ---------- Dial ---------- */
.site-intro__dial {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dial-size);
  height: var(--dial-size);
  max-width: none;
  overflow: visible;
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86) rotate(-24deg);
  transition:
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s linear;
  pointer-events: none;
}

html.is-intro-loading .site-intro__dial,
html.is-intro-ready .site-intro__dial {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.site-intro__dial-spin {
  transform-origin: 500px 500px;
  animation: intro-dial-spin 90s linear infinite;
}

.site-intro__dial-ticks line {
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.32;
}

.site-intro__dial-ticks line.is-major {
  opacity: 0.85;
}

.site-intro__dial-labels text {
  fill: currentColor;
  font: 700 12px/1 Consolas, "Courier New", monospace;
  opacity: 0.42;
}

.site-intro__dial-track,
.site-intro__dial-arc {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
  transform-origin: 500px 500px;
  transform: rotate(-90deg);
}

.site-intro__dial-track {
  stroke-width: 1;
  opacity: 0.12;
}

.site-intro__dial-arc {
  stroke-width: 2;
  stroke-dasharray: 0 1;
  transition: opacity 0.6s linear 0.25s;
}

html.is-intro-ready .site-intro__dial-arc {
  opacity: 0.25;
}

/* ---------- Corner registration marks ---------- */
.site-intro__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid var(--ink);
  opacity: 0;
  transition:
    opacity 0.4s linear 0.2s,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.site-intro__corner--tl { left: 10px; top: 10px; border-width: 1px 0 0 1px; transform: translate(-8px, -8px); }
.site-intro__corner--tr { right: 10px; top: 10px; border-width: 1px 1px 0 0; transform: translate(8px, -8px); }
.site-intro__corner--bl { left: 10px; bottom: 10px; border-width: 0 0 1px 1px; transform: translate(-8px, 8px); }
.site-intro__corner--br { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; transform: translate(8px, 8px); }

html.is-intro-loading .site-intro__corner,
html.is-intro-ready .site-intro__corner {
  opacity: 0.7;
  transform: none;
}

/* ---------- Big counter ---------- */
.site-intro__count {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  overflow: hidden;
  transform: translateX(-50%);
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-size: clamp(64px, 10vw, 148px);
  line-height: 0.86;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.site-intro__count span {
  display: block;
  padding-top: 0.04em;
  transform: translateY(102%);
  animation: intro-count-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

html.is-intro-ready .site-intro__count span {
  transform: translateY(0);
  animation: intro-count-out 0.5s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* ---------- Seal ---------- */
html.is-intro-ready .site-intro__seal {
  transform:
    translate(
      calc(-50% + var(--seal-mx, 0px)),
      calc(-50% + var(--seal-my, 0px))
    )
    scale(1);
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s linear;
}

.site-intro__seal-caption {
  position: absolute;
  left: 50%;
  top: calc(50% - 20px);
  width: 240px;
  height: 240px;
  max-width: none;
  overflow: visible;
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-40deg) scale(0.92);
  transition:
    opacity 0.5s linear 0.2s,
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  pointer-events: none;
}

.site-intro__seal-caption text {
  fill: currentColor;
  font: 700 9px/1 Consolas, "Courier New", monospace;
  text-transform: uppercase;
}

html.is-intro-ready .site-intro__seal-caption {
  opacity: 0.72;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.site-intro__seal-caption text {
  transform-origin: 100px 100px;
  animation: intro-dial-spin 24s linear infinite;
}

.site-intro__seal:hover .site-intro__seal-caption text,
.site-intro.is-seal-near .site-intro__seal-caption text {
  animation-duration: 7s;
}

html.is-intro-revealing .site-intro__seal-caption {
  opacity: 0;
  transition-delay: 0s;
}

/* ---------- Meta labels ---------- */
.site-intro__meta--top {
  top: calc(var(--gap) + 16px);
  bottom: auto;
}

/* Clear of the corner marks, on a paper chip so the lines never cross the text. */
.site-intro .site-intro__meta--left {
  left: calc(var(--gap) + 34px);
}

.site-intro .site-intro__meta--right {
  right: calc(var(--gap) + 34px);
}

.site-intro__meta span,
.site-intro__meta strong,
.site-intro__hint {
  justify-self: start;
  padding: 2px 4px;
  background: var(--paper);
}

.site-intro__meta--right span,
.site-intro__meta--right strong {
  justify-self: end;
}

/* Soften with colour instead of opacity, so the paper chip stays opaque. */
.site-intro .site-intro__meta {
  opacity: 1;
  color: color-mix(in srgb, var(--ink) 58%, var(--paper));
}

.site-intro .site-intro__meta span {
  color: inherit;
}

/* ---------- Hint ---------- */
.site-intro__hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--gap) + 16px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 8px/1 Consolas, "Courier New", monospace;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition:
    opacity 0.4s linear,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-intro__hint i {
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

html.is-intro-ready .site-intro__hint {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0.6s;
  animation: intro-hint-pulse 2.4s ease-in-out 1.2s infinite;
}

/* ---------- Cursor crosshair ---------- */
.site-intro__cursor {
  --cx: -100px;
  --cy: -100px;
  position: absolute;
  inset: var(--gap);
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s linear;
}

.site-intro.has-cursor .site-intro__cursor {
  opacity: 1;
}

.site-intro__cursor-x,
.site-intro__cursor-y {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: var(--ink);
  opacity: 0.18;
}

.site-intro__cursor-x {
  width: 100%;
  height: 1px;
  transform: translateY(calc(var(--cy) - var(--gap)));
}

.site-intro__cursor-y {
  width: 1px;
  height: 100%;
  transform: translateX(calc(var(--cx) - var(--gap)));
}

/* Same trailing dot as the hero wave field (.wave-field::before). */
.site-intro__dot {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--ink);
  transform: translate(-100px, -100px);
  will-change: transform;
}

.site-intro.has-line-field {
  cursor: crosshair;
}

.site-intro.has-line-field .site-intro__seal {
  cursor: pointer;
}

.site-intro__cursor span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 5px;
  background: var(--ink);
  color: var(--paper);
  font: 700 8px/1 Consolas, "Courier New", monospace;
  white-space: nowrap;
  transform: translate(calc(var(--cx) - var(--gap) + 14px), calc(var(--cy) - var(--gap) + 14px));
}

/* ---------- Enter transition ---------- */
html.is-intro-revealing .site-intro {
  --field-opacity: 1;
  animation-delay: 0.5s;
}

html.is-intro-revealing .site-intro__dial {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.25) rotate(30deg);
  transition:
    transform 1s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.5s linear 0.15s;
}

html.is-intro-revealing .site-intro__orbit {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  transition:
    transform 0.7s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.5s linear;
}

html.is-intro-revealing .site-intro__meta,
html.is-intro-revealing .site-intro__hint,
html.is-intro-revealing .site-intro__cursor {
  opacity: 0;
  transition: opacity 0.3s linear;
  animation: none;
}

@keyframes intro-dial-spin {
  to { transform: rotate(360deg); }
}

@keyframes intro-count-in {
  to { transform: translateY(0); }
}

@keyframes intro-count-out {
  to { transform: translateY(-104%); }
}

@keyframes intro-hint-pulse {
  0%, 100% { color: color-mix(in srgb, var(--ink) 62%, var(--paper)); }
  50% { color: color-mix(in srgb, var(--ink) 25%, var(--paper)); }
}

@media (max-width: 700px) {
  .site-intro__meta--top span {
    display: block;
  }

  .site-intro__meta--top strong {
    display: none;
  }

  .site-intro__hint {
    bottom: calc(var(--gap) + 44px);
  }

  .site-intro__dial-labels {
    display: none;
  }

  .site-intro__enter-label::after {
    display: none;
  }

  .site-intro__seal-caption {
    width: 236px;
    height: 236px;
  }
}

@media (hover: none), (pointer: coarse) {
  .site-intro__cursor {
    display: none;
  }

  .site-intro__hint {
    font-size: 0;
  }

  .site-intro__hint::after {
    content: "TAP THE SEAL TO ENTER";
    font-size: 8px;
  }

  .site-intro__hint i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro__count span {
    transform: none;
  }

  .site-intro__dial-spin,
  .site-intro__seal-caption text {
    animation: none;
  }
}