/* Blue Dial Guy. The page is a sunburst blue dial: radial light falloff, fine sunray
   texture, a slow light sweep, and nothing else. No supporting copy on purpose. */

@font-face {
  font-family: Archivo;
  src: url('/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --bg: #06142E;
  --text: #F1F5FB;
  --muted: rgba(241, 245, 251, .5);
  --hair: rgba(241, 245, 251, .16);
  --accent: #DCEAFF;
  --sweep: 48s;
  --rays: 260s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- the dial */

.dial {
  position: fixed;
  inset: -20vmax;
  z-index: 0;
  pointer-events: none;
  /* light falling off from just above centre, the way a dial catches a window */
  background:
    radial-gradient(circle at 50% 42%,
      #5C93E8 0%,
      #3A72CC 16%,
      #1E4E9E 34%,
      #10306E 54%,
      #071B41 74%,
      #020914 100%);
}

/* fine sunray texture, faded out at the edges so it never looks like a pinwheel */
.rays {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, .14) 0deg 1.15deg,
    rgba(0, 0, 0, .12) 1.15deg 3.4deg);
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 34%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,1) 0%, rgba(0,0,0,.85) 34%, rgba(0,0,0,0) 78%);
  animation: spin var(--rays) linear infinite;
}

/* a slow bright arc crossing the dial, like light moving over brushed metal */
.sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg at 50% 42%,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0) 200deg,
    rgba(190, 220, 255, .16) 232deg,
    rgba(255, 255, 255, .30) 250deg,
    rgba(190, 220, 255, .14) 268deg,
    rgba(255, 255, 255, 0) 300deg,
    rgba(255, 255, 255, 0) 360deg);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: spin var(--sweep) linear infinite;
}

/* very faint minute-track rings, for dial depth */
.rings {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 50% 42%,
      rgba(255, 255, 255, .07) 0 1px,
      rgba(255, 255, 255, 0) 1px 26px);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 96%);
  mask-image: radial-gradient(circle at 50% 42%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 96%);
  opacity: .8;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 46%, rgba(0,0,0,.55) 100%);
}

/* fine grain. Adds a little material, and breaks up gradient banding on 8-bit panels. */
.grain {
  position: absolute;
  inset: 0;
  opacity: .075;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- type */

main { position: relative; z-index: 1; }

.hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 72px);
}

/* The Instagram feature. Instagram's embed is a white panel and cannot be themed dark, so it
   is presented deliberately instead: a framed plate resting on the dial, with a follow link. */
.ig {
  display: grid;
  justify-items: center;
  gap: clamp(16px, 3vw, 26px);
  padding: 0 clamp(20px, 6vw, 72px) clamp(64px, 12vh, 140px);
}

/* Instagram's embed is a fixed header plus a three-column grid of square tiles, and it does not
   resize itself. Measured: header ~162px, then each row of tiles is one third of the width. So
   the height is computed rather than guessed, which keeps the card tight at every screen width
   instead of leaving a big white void under the grid. */
/* The wrapper exists so the card's percentage padding resolves against the card's OWN width.
   Without it, the percentage resolves against .ig (much wider) and the card inflates. */
.cardwrap {
  width: 100%;
  max-width: 520px;
}

.card {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: calc(160px + 66.667%);
  background: #fff;
  border: 1px solid rgba(241, 245, 251, .18);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(2, 8, 20, .55);
}

.card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.handle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(241, 245, 251, .35);
  transition: color .2s ease, border-color .2s ease;
}

.handle:hover,
.handle:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

h1 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.04em;
  line-height: .82;
  font-size: clamp(66px, 21vw, 190px);
  text-align: center;
  text-shadow: 0 2px 30px rgba(2, 9, 20, .38);
}

h1 span {
  display: block;
  opacity: 0;
  animation: rise .95s cubic-bezier(.16, .84, .3, 1) forwards;
  animation-delay: var(--d);
}

h1 .accent {
  color: var(--accent);
  text-shadow: 0 0 38px rgba(150, 196, 255, .55);
}

footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 20px clamp(28px, 6vh, 56px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: fade 1.2s ease forwards;
  animation-delay: .75s;
}

/* -------------------------------------------------------------- animation */

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

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rays, .sweep { animation: none; }
  h1 span, footer { opacity: 1; animation: none; }
}