/* ══════════════════════════════════════════════════════════════════════════
   Hnoss Capital — hnosscapital.com

   The visual system is inherited wholesale from the Hnoss trading terminal:
   the same porcelain ground, the same single champagne-gold accent, the same
   Inter / JetBrains Mono pairing, and the same animation grammar (a rune that
   draws itself into the stone, a 105° specular sweep, a slow glow pulse).
   Nothing here invents a second Hnoss language.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Type ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;          /* variable */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrainsmono-latin-var.woff2') format('woff2');
  font-weight: 100 800;          /* variable */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens (identical to the terminal's :root) ──────────────────── */
:root {
  --bg:            #e9ebe6;
  --card:          #ffffff;
  --border:        rgba(120, 96, 44, 0.20);
  --border-strong: rgba(120, 96, 44, 0.38);
  --accent:        #8a6d2e;
  --gold:          #8a6d2e;
  --gold-bright:   #6f5622;
  --gold-deep:     #6E4708;
  --text:          #171d1f;
  --dim:           #4c5a5f;
  --muted:         #7d8a8e;

  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, 'Courier New', monospace;

  /* the stone, as a CSS shape — used to clip the specular sweep */
  --hex: polygon(50% 10%, 84.65% 30%, 84.65% 70%, 50% 90%, 15.35% 70%, 15.35% 30%);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

/* ── Ground ─────────────────────────────────────────────────────────────── */
body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  /* the terminal's two atmospheric washes: gold from the upper right,
     a cool one from the upper left */
  background-image:
    radial-gradient(1100px 480px at 82% -8%, rgba(138, 109, 46, 0.05), transparent 60%),
    radial-gradient(820px 460px at 0% 0%,   rgba(44, 107, 135, 0.04), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Decorative layers ------------------------------------------------------ */
#dust {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* The pool of light that follows the pointer. Moved only via transform, so
   it stays on the compositor. */
#lightfall {
  position: fixed;
  top: 0;
  left: 0;
  width: 60vmax;
  height: 60vmax;
  margin: -30vmax 0 0 -30vmax;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side,
              rgba(138, 109, 46, 0.10), rgba(138, 109, 46, 0.04) 45%, transparent 72%);
  transition: opacity 1.2s ease;
  will-change: transform;
}
#lightfall.on { opacity: 1; }

/* ── Composition ────────────────────────────────────────────────────────── */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;

  /* One source of truth for the lockup's geometry: the name is placed off the
     stone's own radius, so the stone itself sits on the exact centre of the
     viewport at every size and the name hangs beneath it. */
  --gem-size:   clamp(172px, 30vmin, 376px);
  --lockup-gap: clamp(26px, 4.6vmin, 54px);
}

/* ── The stone ──────────────────────────────────────────────────────────── */
.gem-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: var(--gem-size);
  aspect-ratio: 1;
}

.gem-glow {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side,
              rgba(138, 109, 46, 0.20), rgba(138, 109, 46, 0.07) 42%, transparent 70%);
  opacity: 0;
  animation: glow-in 1.4s ease 1.05s forwards, glow-breathe 7s ease-in-out 2.4s infinite;
  will-change: opacity;
}

.gem-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform: perspective(900px);   /* JS adds rotateX/rotateY on top */
  transform-style: preserve-3d;
  will-change: transform;
}

.gem {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Kept deliberately tight: the facet fills change while the pointer moves,
     which re-runs this filter, so the blur radius is the cost. Writes are
     skipped when a facet's colour is unchanged (see js/gem.js), so at rest
     the filtered result stays cached. */
  filter: drop-shadow(0 8px 18px rgba(110, 71, 8, 0.15));
}

/* specular sweep — the terminal's 105° highlight band, clipped to the stone */
.gem-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: var(--hex);
  opacity: 0;
  animation: glint-in 0.8s ease 1.9s forwards;
}
.gem-glint-band {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: 0;
  width: 60%;
  background-image: linear-gradient(105deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-110%);
  animation: glint 7s ease-in-out 2.6s infinite;
  will-change: transform;
}

/* Intro — the rune draws into the stone, then the facets take the light.
   Same curve and stagger as the terminal's boot splash. */
.gem-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: gem-draw 1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.15s forwards;
}
.gem-draw.d2 { animation-delay: 0.35s; }
.gem-draw.d3 { animation-delay: 0.55s; }

/* the interior strokes sink into the seams once drawn, so the stone comes to
   rest as the canonical Hnoss mark rather than an outlined solid */
.gem-draw.settle {
  animation:
    gem-draw   1.1s cubic-bezier(0.6, 0, 0.3, 1) 0.35s forwards,
    rune-settle 1.3s ease 1.55s forwards;
}
.gem-draw.d3.settle { animation-delay: 0.55s, 1.75s; }
@keyframes rune-settle { to { opacity: 0; } }

.facet {
  opacity: 0;
  animation: gem-fade 0.7s ease 1.0s forwards;
}

@keyframes gem-draw    { to { stroke-dashoffset: 0; } }
@keyframes gem-fade    { to { opacity: 1; } }
@keyframes glow-in     { to { opacity: 1; } }
@keyframes glint-in    { to { opacity: 1; } }
@keyframes glint       {
  0%        { transform: translateX(-110%); }
  55%, 100% { transform: translateX(185%); }   /* sweep, then rest */
}
@keyframes glow-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── The name ───────────────────────────────────────────────────────────── */
.lockup {
  position: absolute;
  left: 0;
  right: 0;
  /* directly below the stone: half its height, plus the lockup gap */
  top: calc(50% + (var(--gem-size) / 2) + var(--lockup-gap));
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(11px, 1.9vmin, 20px);
  opacity: 0;
  animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) 1.35s forwards;
}

.wordmark {
  display: block;
  /* tied to the stone's own width, so the name reads as clearly subordinate
     to the mark at every viewport rather than overtaking it on small screens */
  width: calc(var(--gem-size) * 0.84);
  height: auto;
  color: var(--gold-deep);
  stroke-linecap: square;
}

.capital {
  font-size: clamp(0.66rem, 1.42vmin, 0.94rem);
  font-weight: 600;
  letter-spacing: 0.44em;
  /* letterspacing pads the right edge; pull it back so the word stays
     optically centred under the wordmark */
  text-indent: 0.44em;
  text-transform: uppercase;
  /* --gold (#8a6d2e) measures only 4.07:1 on the porcelain ground; the
     terminal's deeper gold clears AA at 5.78:1 and reads identically */
  color: var(--gold-bright);
  white-space: nowrap;
}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0 20px calc(clamp(22px, 4.2vh, 46px) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
  pointer-events: none;   /* only the link itself is clickable */
}

.contact a {
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.3vmin, 0.84rem);
  font-weight: 400;
  letter-spacing: 0.07em;
  /* --muted is only 2.97:1 here — quiet enough, but not readable enough.
     --dim keeps the line recessive at a compliant 5.96:1. */
  color: var(--dim);
  text-decoration: none;
  padding: 8px 4px;                 /* comfortable tap target */
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 50% calc(100% - 6px);
  background-repeat: no-repeat;
  transition: color 0.35s ease, background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact a:hover,
.contact a:focus-visible { color: var(--gold-bright); background-size: 100% 1px; }
.contact a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: rgba(138, 109, 46, 0.18); color: var(--text); }

/* ── Short / landscape viewports: keep the whole lockup on one screen ───── */
@media (max-height: 560px) and (orientation: landscape) {
  .stage  { --gem-size: clamp(118px, 32vmin, 196px); --lockup-gap: clamp(14px, 2.6vmin, 24px); }
  .lockup { gap: clamp(7px, 1.4vmin, 12px); }
}

/* ── Very large screens: the mark holds its scale rather than ballooning ── */
@media (min-width: 2200px) {
  .stage { --gem-size: 400px; }
}

/* ── Reduced motion: everything resolves to its finished state ──────────── */
@media (prefers-reduced-motion: reduce) {
  .gem-draw        { stroke-dashoffset: 0; animation: none; }
  .gem-draw.settle { opacity: 0; }          /* resolve straight to the mark */
  .facet    { opacity: 1; animation: none; }
  .gem-glow { opacity: 1; animation: none; }
  .gem-glint{ display: none; }
  .lockup,
  .contact  { opacity: 1; animation: none; }
  #lightfall{ display: none; }
  .contact a{ transition: color 0.2s ease; }
}