/* =========================================================================
   EIGIER — eigier.com home page (static hub)
   Landing styles. Tokens come from tokens.css.
   Direction: refined restraint · reverent & stately · engraved, not bordered.
   ========================================================================= */

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fg-1);
  background:
    radial-gradient(120% 90% at 50% 18%, #14283f 0%, #0B1B2E 46%, #060F1C 100%);
  background-attachment: fixed;
  font-family: var(--font-body);
  /* oldstyle figures + true ligatures — lettering carries the dignity */
  font-feature-settings: "onum" 1, "liga" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* faint paper grain */
body.eg-backdrop::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.05; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* soft vignette */
body.eg-vignette::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,0.55);
}

/* ---- LANDING ----------------------------------------------------------- */
/* Varied rhythm: generous air above the lede, tighter within each group.   */
.eg-landing {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(28px, 4.5vh, 56px) 24px clamp(26px, 4vh, 44px);
  gap: 0;
}

/* ---- CREST ------------------------------------------------------------- */
.eg-crest-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  opacity: 0; animation: eg-enter 1100ms var(--ease-emphasis) 60ms forwards;
}
.eg-crest-hero::before {
  content: ""; position: absolute; width: 128%; height: 128%; left: -14%; top: -14%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(199,162,76,0.26), rgba(199,162,76,0.07) 55%, transparent 72%);
  pointer-events: none;
}
.eg-crest-hero img {
  position: relative; display: block;
  width: clamp(270px, 38vw, 468px); height: auto;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,0.55));
}
.eg-crest-hero::after {
  /* one-time gold sheen sweep across the arms on load */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,244,214,0.30) 50%, transparent 62%);
  mix-blend-mode: screen; opacity: 0;
  animation: eg-sheen 1600ms 760ms var(--ease-standard) 1;
}
@keyframes eg-sheen {
  0%   { opacity: 0; transform: translateX(-40%); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(40%); }
}
/* combined fade + rise — opacity & transform only */
@keyframes eg-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes eg-rule-draw { from { opacity: 0; transform: scaleX(0.4); } to { opacity: 1; transform: scaleX(1); } }

/* ---- LEDE -------------------------------------------------------------- */
.lede {
  text-align: center; max-width: 34rem;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  margin-top: clamp(18px, 2.6vh, 30px);
  opacity: 0; animation: eg-enter 900ms var(--ease-emphasis) 420ms forwards;
}
.lede .greet {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(29px, 4.2vw, 44px); line-height: 1.12;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-1); text-wrap: balance;
}
.lede p {
  margin: 0; max-width: 38ch;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(17px, 1.5vw, 19px); line-height: 1.62; letter-spacing: 0.01em;
  color: var(--fg-2); text-wrap: pretty;
}

/* ---- FLEURON RULE ------------------------------------------------------ */
.eg-rule {
  display: flex; align-items: center; gap: 16px; color: var(--gold-500);
  margin-top: clamp(18px, 2.4vh, 26px);
  opacity: 0; transform-origin: center;
  animation: eg-rule-draw 800ms var(--ease-emphasis) 320ms forwards;
}
.eg-rule .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline) 22%, var(--hairline) 78%, transparent); }
.eg-rule .di { font-size: 12px; opacity: 0.92; }

/* ---- THE THREE HALLS — engraved registry plates ------------------------ */
.eg-modules {
  display: flex; gap: clamp(14px, 1.6vw, 22px); flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 860px;
  margin-top: clamp(26px, 3.4vh, 42px);
}
.eg-module {
  position: relative; flex: 1 1 230px; max-width: 268px;
  display: grid; grid-template-columns: 1fr auto; align-content: start;
  background: rgba(18, 39, 64, 0.55);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  padding: 22px 22px 20px;
  text-decoration: none; color: inherit;
  opacity: 0; transform: translateY(16px);
  animation: eg-enter 760ms var(--ease-emphasis) forwards;
  transition: transform var(--dur-med) var(--ease-emphasis),
              border-color var(--dur-med) var(--ease-standard),
              background-color var(--dur-med) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard);
}
/* staggered arrival, left to right */
.eg-module:nth-child(1) { animation-delay: 620ms; }
.eg-module:nth-child(2) { animation-delay: 720ms; }
.eg-module:nth-child(3) { animation-delay: 820ms; }

.eg-module:hover,
.eg-module:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold-500);
  background: rgba(22, 46, 74, 0.72);
  box-shadow: var(--shadow-2);
  outline: none;
}
.eg-module:focus-visible { box-shadow: var(--ring-gold), var(--shadow-2); }

/* roman numeral — heraldic enumeration */
.eg-module .idx {
  grid-column: 1; align-self: center;
  font-family: var(--font-display); font-weight: 500; font-size: 13px;
  letter-spacing: 0.18em; color: var(--gold-500);
}
/* heraldic mark */
.eg-module .mk {
  grid-column: 2; justify-self: end; align-self: center;
  font-size: 21px; line-height: 1; color: var(--gold-500);
  transition: color var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-emphasis);
}
.eg-module:hover .mk, .eg-module:focus-visible .mk { color: var(--gold-300); transform: translateY(-1px); }

.eg-module .nm {
  grid-column: 1 / -1; margin-top: var(--space-5);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-1);
}
.eg-module .sub {
  grid-column: 1 / -1; margin-top: var(--space-2);
  font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.4;
  color: var(--fg-2);
}
/* "Enter" sits below an engraved keyline (1px top rule — never a side stripe) */
.eg-module .enter {
  grid-column: 1 / -1; margin-top: var(--space-5);
  padding-top: var(--space-4); border-top: 1px solid var(--hairline-soft);
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-400);
  display: flex; align-items: center; gap: 8px;
  transition: color var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard);
}
.eg-module .arw { transition: transform var(--dur-med) var(--ease-emphasis); }
.eg-module:hover .enter, .eg-module:focus-visible .enter { color: var(--gold-300); border-top-color: var(--hairline); }
.eg-module:hover .arw, .eg-module:focus-visible .arw { transform: translateX(6px); }

/* ---- FOOTER ------------------------------------------------------------ */
.eg-foot {
  font-family: var(--font-serif); font-style: italic; font-size: 14px;
  letter-spacing: 0.04em; color: var(--fg-3); text-align: center;
  margin-top: clamp(24px, 3.2vh, 40px);
  opacity: 0; animation: eg-enter 900ms var(--ease-emphasis) 980ms forwards;
}

/* ---- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 640px) {
  .eg-modules { flex-direction: column; align-items: stretch; gap: 12px; max-width: 380px; }
  .eg-module { max-width: none; width: 100%; }
}

/* ---- REDUCED MOTION ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eg-crest-hero, .lede, .eg-rule, .eg-modules, .eg-module, .eg-foot {
    animation: none; opacity: 1; transform: none;
  }
  .eg-crest-hero::after { animation: none; content: none; }
  .eg-module, .eg-module .mk, .eg-module .enter, .eg-module .arw { transition: none; }
}