/* ============================================================
   Solvera Ltd — Coming Soon
   styles/main.css
   ============================================================ */

/* ---------- Font ---------- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-VariableFont.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100svh; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Tokens ---------- */
:root {
  /* color */
  --bg:           #060606;
  --bg-elev:      #0e0e0e;
  --gold-bright:  rgb(210, 150, 74);
  --gold-deep:    rgb(176, 123, 62);
  --gold-glow:    rgba(210, 150, 74, 0.35);
  --cream:        #F4ECDC;
  --cream-dim:    rgba(244, 236, 220, 0.65);
  --hairline:     rgba(244, 236, 220, 0.08);

  /* spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-eyebrow: 0.75rem;
  --fs-headline: clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-subline: clamp(0.9375rem, 1.4vw, 1.125rem);
  --fs-footer: 0.8125rem;

  /* hero logo */
  --hero-logo-w: clamp(280px, 42vw, 620px);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* single-viewport, no scroll */
}

/* ---------- Layout ---------- */
[data-constellation] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  z-index: 0;
  pointer-events: auto; /* receives pointer events for animation */
  background: var(--bg);
}

[data-header],
[data-stage],
[data-footer] {
  position: relative;
  z-index: 1;
  pointer-events: none; /* let canvas receive pointer; re-enable per-element below */
}

[data-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-7);
}

[data-stage] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--s-5);
  gap: var(--s-3);
}

[data-footer] {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-7);
}

/* Re-enable pointer events on interactive children only */
[data-social],
[data-contact] { pointer-events: auto; }

/* ---------- Hero Logo (brand centerpiece) ---------- */
[data-hero-logo] {
  position: relative;
  width: var(--hero-logo-w);
  max-width: 90vw;
  margin-bottom: var(--s-5);
  isolation: isolate;
}

[data-hero-logo] img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(210, 150, 74, 0.35))
          drop-shadow(0 0 60px rgba(210, 150, 74, 0.18));
}

[data-hero-logo-glow] {
  position: absolute;
  inset: -25% -15%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side,
                              rgba(210, 150, 74, 0.28) 0%,
                              rgba(210, 150, 74, 0.10) 35%,
                              rgba(210, 150, 74, 0)    70%);
  filter: blur(8px);
  transform-origin: center;
  animation: hero-glow-pulse 5.2s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes hero-glow-pulse {
  0%, 100% { transform: scale(1);     opacity: 0.85; }
  50%      { transform: scale(1.08);  opacity: 1;    }
}

/* Visually-hidden utility (for SR-only h1) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography ---------- */
[data-eyebrow] {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

[data-headline] {
  margin: 0;
  font-size: var(--fs-headline);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 32ch;
  color: var(--cream);
}

[data-subline] {
  margin: 0;
  font-size: var(--fs-subline);
  font-weight: 400;
  color: var(--cream-dim);
  max-width: 40ch;
}

[data-copyright] {
  font-size: var(--fs-footer);
  color: var(--cream-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------- Footer interactive ---------- */
[data-socials] {
  display: flex;
  gap: var(--s-5);
  align-items: center;
}

[data-social] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cream-dim);
  transition: color 200ms ease;
}

[data-social]:hover,
[data-social]:focus-visible { color: var(--gold-bright); }

[data-contact] {
  position: relative;
  font-size: var(--fs-footer);
  color: var(--cream-dim);
  padding: var(--s-2) var(--s-1);
  transition: color 200ms ease;
}

[data-contact]::after {
  content: "";
  position: absolute;
  left: var(--s-1); right: var(--s-1);
  bottom: 0;
  height: 1px;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}

[data-contact]:hover,
[data-contact]:focus-visible { color: var(--gold-bright); }
[data-contact]:hover::after,
[data-contact]:focus-visible::after { transform: scaleX(1); }

/* ---------- Focus ring (global) ---------- */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  [data-header] {
    padding: var(--s-4) var(--s-5);
    justify-content: center;
  }
  [data-header] [data-copyright] { display: none; }

  [data-footer] {
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-5) var(--s-6);
  }
  [data-socials] { gap: var(--s-4); }
}

@media (max-width: 480px) {
  [data-stage] { gap: var(--s-2); padding: 0 var(--s-4); }
  [data-headline] { max-width: 16ch; }
  [data-subline] { max-width: 28ch; }
}

/* ---------- Reduced motion (CSS-level) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

[data-headline] .word { display: inline-block; will-change: transform, opacity; }