/* ============================================================
   Berbernest · Dark Atlas design system
   Plain-CSS mirror of src/app/globals.css so prototypes port
   into the Next.js app as a translation, not a redesign.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap");

:root {
  --background: 30 18% 5%;
  --foreground: 36 38% 92%;
  --card: 30 14% 8%;
  --popover: 30 14% 8%;
  --primary: 42 52% 54%;
  --secondary: 30 10% 14%;
  --muted: 30 8% 18%;
  --muted-foreground: 36 20% 60%;
  --accent: 16 60% 50%;
  --border: 30 10% 16%;
  --ring: 42 52% 54%;
  --radius: 0.25rem;

  --gold: 42 52% 54%;
  --gold-light: 42 48% 68%;
  --gold-dark: 42 56% 38%;
  --terracotta: 16 60% 50%;
  --indigo-atlas: 220 40% 30%;
  --sand: 36 20% 60%;
  --charcoal: 30 18% 5%;
  --cream: 36 38% 92%;
  --stone: 30 8% 18%;

  --shadow-soft: 0 4px 24px -4px hsl(0 0% 0% / 0.4);
  --shadow-gold: 0 4px 32px -8px hsl(42 52% 54% / 0.15);
  --shadow-elevated: 0 8px 40px -8px hsl(0 0% 0% / 0.6);

  --font-display: "Cormorant Garamond", serif;
  --font-body: "Inter", system-ui, sans-serif;

  --shell: 1400px;
}

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

* { margin: 0; border-color: hsl(var(--border)); }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at top, hsl(var(--secondary) / 0.9), transparent 34%),
    linear-gradient(180deg, hsl(var(--background)) 0%, hsl(30 18% 4%) 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection {
  background: hsl(var(--gold) / 0.28);
  color: hsl(var(--foreground));
}

/* ── Layout ───────────────────────────────────────────────── */

.page-shell {
  margin-inline: auto;
  max-width: var(--shell);
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .page-shell { padding-inline: 3rem; }
}

/* A page that crowds its own sections reads as anxious to sell. This is the
   cheapest premium signal available and the one we were shortest on. */
.section { padding-block: 8rem; }
.section--tight { padding-block: 5.5rem; }
@media (max-width: 760px) {
  .section { padding-block: 5rem; }
  .section--tight { padding-block: 3.75rem; }
}
.section--card { background: hsl(var(--card)); }

/* ── Type ─────────────────────────────────────────────────── */

.eyebrow {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: hsl(var(--gold));
}

.step-label {
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: hsl(var(--muted-foreground));
}

/* The jump between the largest and smallest type is most of what reads as
   expensive, and it costs nothing. Tighter leading so a two-line headline reads as
   one object rather than two lines. */
.heading-display {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6.2vw, 5.25rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.heading-section {
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lede {
  font-size: 1rem;
  line-height: 1.85;
  color: hsl(var(--muted-foreground));
  max-width: 52ch;
}

.muted { color: hsl(var(--muted-foreground)); }
.gold { color: hsl(var(--gold)); }
em.gold, .gold em { font-style: italic; }

.divider-gold {
  width: 3rem;
  height: 1px;
  background: hsl(var(--gold));
  opacity: 0.5;
}

/* ── Buttons ──────────────────────────────────────────────── */

/* Presence comes from size, not decoration.
 *
 * These carried a gradient, a lit top edge, a darker bottom edge, a border, an
 * outer shadow and a two-pixel lift — six decisions to say "press me", around
 * artwork that is already the most beautiful thing on the screen. The studios this
 * brand is measured against spend almost nothing on their controls.
 *
 * 11px letterspaced at .22em is also genuinely hard to read; it looked considered
 * and behaved like fine print. */
.btn-atlas,
.btn-ghost-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.15rem 2.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  border-radius: 2px;
  transition: background-color 0.45s cubic-bezier(0.2, 0.6, 0.2, 1),
              border-color 0.45s, color 0.45s;
}

/* Gold as leaf rather than paint: a shallow vertical gradient, a lit top edge and a
   darker bottom one. Flat fill read as a coloured rectangle; this reads as a
   surface with a light source, which is the register the rest of the site is in. */
.btn-atlas {
  background: hsl(var(--gold));
  color: hsl(var(--charcoal));
  border: 0;
}
/* Nothing translates. A control that jumps under the cursor performs; one that
   warms confirms — and confirmation is the whole job of a hover state. */
.btn-atlas:hover { background: hsl(var(--gold-light)); }
.btn-atlas:active { background: hsl(38 50% 47%); }

.btn-ghost-gold {
  border: 1px solid hsl(var(--gold) / 0.28);
  color: hsl(var(--foreground));
  background: transparent;
}
.btn-ghost-gold:hover { border-color: hsl(var(--gold) / 0.7); color: hsl(var(--gold)); }
.btn-ghost-gold:active { background: hsl(var(--gold) / 0.1); }

/* A true inline secondary — the thing next to the decision, not a second decision.
   A ruled link is what it always was; a bordered box gave it equal billing. */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px solid hsl(var(--gold) / 0.4);
  border-radius: 0;
  background: none;
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.4s, border-color 0.4s;
}
.btn-quiet:hover { color: hsl(var(--gold)); border-bottom-color: hsl(var(--gold)); }

/* Disabled buttons had no styling at all, so a gated primary action still looked
   like the thing to press. It now reads as unavailable and stops responding to
   hover, which is what tells someone the decision above it is the one to make. */
.btn-atlas:disabled,
.btn-ghost-gold:disabled,
.btn-atlas[disabled],
.btn-ghost-gold[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: saturate(0.45);
}
.btn-atlas:disabled:hover,
.btn-ghost-gold:disabled:hover {
  transform: none;
  box-shadow: none;
  background: inherit;
}
.btn-atlas:disabled:hover { background: hsl(var(--gold)); }
.btn-ghost-gold:disabled:hover { background: hsl(var(--background) / 0.35); border-color: hsl(var(--gold) / 0.4); }

/* Keyboard users had whatever ring the browser chose, which over a photograph or a
   satellite tile is frequently nothing at all. One visible ring everywhere, and
   only for keyboard focus, so a mouse click never draws it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--gold));
  outline-offset: 3px;
  border-radius: 3px;
}

/* Off-screen until tabbed to — the first stop on the page, ahead of the header. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: hsl(var(--gold));
  color: hsl(var(--charcoal));
  border-radius: var(--radius);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

.btn-sm { padding: 0.625rem 1.125rem; font-size: 0.625rem; letter-spacing: 0.18em; }

/* ── Surfaces ─────────────────────────────────────────────── */

.atlas-panel {
  background: linear-gradient(180deg, hsl(var(--card) / 0.98) 0%, hsl(var(--card) / 0.82) 100%);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
}

.card-frosted {
  background: linear-gradient(180deg, hsl(var(--card) / 0.92) 0%, hsl(var(--card) / 0.76) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid hsl(var(--gold) / 0.25);
  background: hsl(var(--gold) / 0.1);
  color: hsl(var(--gold));
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ── Zellij motif ─────────────────────────────────────────── */

.zellij {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 0l60 60-60 60L0 60z' fill='none' stroke='%23c4905a' stroke-width='.4'/%3E%3Cpath d='M60 20l40 40-40 40L20 60z' fill='none' stroke='%23c4905a' stroke-width='.3'/%3E%3Cpath d='M60 40l20 20-20 20L40 60z' fill='none' stroke='%23c4905a' stroke-width='.2'/%3E%3C/svg%3E");
  animation: zellij-rotate 240s linear infinite, zellij-pulse 8s ease-in-out infinite;
}

@keyframes zellij-rotate { to { transform: rotate(360deg); } }
@keyframes zellij-pulse { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.30; } }
@keyframes chevron-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; animation: fade-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* ── Site chrome ──────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: hsl(var(--background) / 0.72);
  border-bottom: 1px solid hsl(var(--border));
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 68px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wordmark span { color: hsl(var(--gold)); }

.site-nav {
  display: none;
  gap: 2rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 900px) { .site-nav { display: flex; } }
.site-nav a { transition: color 0.25s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: hsl(var(--gold)); }

.site-footer {
  border-top: 1px solid hsl(var(--border));
  padding-block: 3rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* ── Property switcher (prototype-only chrome) ────────────── */

.proto-switch {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: hsl(var(--background) / 0.9);
  border: 1px solid hsl(var(--border));
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-elevated);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.proto-switch a {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  color: hsl(var(--muted-foreground));
  transition: all 0.25s;
  white-space: nowrap;
}
.proto-switch a:hover { color: hsl(var(--foreground)); }
.proto-switch a.is-active {
  background: hsl(var(--gold));
  color: hsl(var(--charcoal));
}