/* riff — brand tokens (from the riff Brand Guidelines and the Figma "Landing page" frame) */
:root {
  --page: #08040F;          /* page background (Figma frame) */
  --lavender: #BB9CFA;      /* signature */
  --soft-white: #EFEAF9;    /* light */
  --ultraviolet: #5B3FC4;   /* accent */

  --font-sans: 'Google Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Sizes follow the 1920 × 1080 Figma frame and scale down with the window */
  --edge: clamp(20px, 5.208vw, 100px);       /* 100px margins */
  --logo-h: clamp(32px, 2.5vw, 48px);         /* 48px logo */
  --text-sm: clamp(16px, 1.25vw, 24px);       /* 24px email + description */
  --text-lg: clamp(34px, 3.333vw, 64px);      /* 64px tagline */
  --symbol: clamp(190px, 16.7vw, 320px);      /* 3D area; the symbol itself is ~200px wide at 1920 */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Redaction italics, from the smooth cut to the most pixelated (SIL Open Font License) */
@font-face { font-family: 'Redaction';     src: url('assets/fonts/redaction-latin-400-italic.woff2') format('woff2');     font-style: italic; font-display: swap; }
@font-face { font-family: 'Redaction 20';  src: url('assets/fonts/redaction-20-latin-400-italic.woff2') format('woff2');  font-style: italic; font-display: swap; }
@font-face { font-family: 'Redaction 35';  src: url('assets/fonts/redaction-35-latin-400-italic.woff2') format('woff2');  font-style: italic; font-display: swap; }
@font-face { font-family: 'Redaction 50';  src: url('assets/fonts/redaction-50-latin-400-italic.woff2') format('woff2');  font-style: italic; font-display: swap; }
@font-face { font-family: 'Redaction 70';  src: url('assets/fonts/redaction-70-latin-400-italic.woff2') format('woff2');  font-style: italic; font-display: swap; }
@font-face { font-family: 'Redaction 100'; src: url('assets/fonts/redaction-100-latin-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; }

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--soft-white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Background: animated shader rings ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--page);
}

#bg {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  transition: opacity 2.4s ease-out, transform 3s var(--ease-out), filter 2.4s ease-out;
}

#bg.is-ready { opacity: 1; transform: scale(1); filter: blur(0); }

/* Big, very blurred purple orbs drifting slowly around the page (orbs.js) */
.orbs { position: absolute; inset: 0; opacity: 0; transition: opacity 3s ease-out; }
.orbs.is-ready { opacity: 1; }

.orb {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform;
}

/* Darkens the bottom a touch so the text always reads clearly */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(8, 4, 15, 0.75), transparent 80%);
}

/* ---------- Entrance: rise, un-blur and fade in, one after another ---------- */
/* "backwards" holds the start state during the delay, then lets go of the
   filter once finished */
.reveal {
  animation: reveal 1.6s var(--ease-out) backwards;
}

.logo        { animation-delay: 0.15s; }
.contact     { animation-delay: 0.25s; }
.stage       { animation-delay: 0.35s; }
.tagline     { animation-delay: 0.65s; }
.description { animation-delay: 0.85s; }

@keyframes reveal {
  from { opacity: 0; transform: translateY(18px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ---------- Header: logo left, email right ---------- */
.top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: var(--edge) var(--edge) 0;
}

.logo { display: inline-block; color: var(--soft-white); }
.logo svg { display: block; height: var(--logo-h); width: auto; fill: currentColor; }

.contact {
  margin: 0;
  font-size: var(--text-sm);
}

.contact a {
  color: var(--soft-white);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: color 0.3s;
}

.contact a:hover,
.contact a:focus-visible { color: var(--lavender); }

a:focus-visible { outline: 2px solid var(--lavender); outline-offset: 4px; border-radius: 2px; }

/* ---------- Symbol ---------- */
.hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.stage {
  position: relative;
  width: var(--symbol);
  aspect-ratio: 1;
}

/* Soft light behind the symbol */
.stage::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239, 234, 249, 0.06), rgba(187, 156, 250, 0.03) 50%, transparent);
  filter: blur(24px);
  opacity: 0;
  transition: opacity 2s ease-out;
}

.stage.is-ready::before { opacity: 1; }

.stage .shader-mount { position: absolute; inset: 0; }

.stage canvas,
.stage spline-viewer {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1.6s ease-out, filter 1.6s ease-out;
}

.stage.is-ready canvas,
.stage.is-ready spline-viewer { opacity: 1; filter: blur(0); }

/* ---------- Tagline + description ---------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 0 var(--edge) 48px;
}

.tagline {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.25;
  color: var(--soft-white);
  white-space: nowrap;
}

/* "riff": "ri" in smooth Redaction, then each "f" a step more pixelated */
.tagline-riff { font-style: italic; }
.tagline-riff .r0   { font-family: 'Redaction', Georgia, serif; }
.tagline-riff .r20  { font-family: 'Redaction 20', Georgia, serif; }
.tagline-riff .r35  { font-family: 'Redaction 35', Georgia, serif; }
.tagline-riff .r50  { font-family: 'Redaction 50', Georgia, serif; }
.tagline-riff .r70  { font-family: 'Redaction 70', Georgia, serif; }
.tagline-riff .r100 { font-family: 'Redaction 100', Georgia, serif; }

/* While an "f" flickers (riff-text.js) it turns lavender and softens a touch,
   then eases back to white once it settles */
.tagline-riff > span { display: inline-block; transition: color 0.7s ease-out, opacity 0.12s ease-out, filter 0.12s ease-out; }
.tagline-riff > span.is-ticking { color: var(--lavender); opacity: 0.85; filter: blur(0.4px); transition: color 0.1s ease-out, opacity 0.12s ease-out, filter 0.12s ease-out; }

.description {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.25;
  color: var(--soft-white);
}

/* ---------- Wider screens: symbol in the centre, text in one row at the bottom ---------- */
@media (min-width: 700px) {
  .hero {
    position: fixed;
    inset: 0;
    padding: 0;
    pointer-events: none;
  }

  .intro {
    margin-top: auto;
    position: relative;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: clamp(32px, 7.6vh, 82px);
  }

  .description { padding-bottom: 0.45em; }
}

/* ---------- Respect "reduce motion" settings ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; }
  #bg, .stage canvas, .stage spline-viewer { transition: opacity 0.6s; transform: none; filter: none; }
}