@font-face { font-family: 'DM Sans'; font-weight: 100 1000; font-display: swap; src: url(fonts/dm-sans.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-display: swap; src: url(fonts/instrument-serif.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-display: swap; src: url(fonts/instrument-serif-italic.woff2) format('woff2'); }

:root {
  --green: #34573d;
  --deep: #293a31;
  --night: #1a251f;
  --cream: #f8f7ef;
  --muted: rgb(248 247 239 / .68);
  --faint: rgb(248 247 239 / .12);
  --gold: #bd9956;
  --gold-light: #e3c88f;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, rgb(52 87 61 / .85), transparent 65%),
    linear-gradient(170deg, var(--deep) 0%, var(--night) 70%);
  color: var(--cream);
  font: 16px/1.6 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The background: atoms drifting, a few lighting up (site.js), and veils of light. */
.atoms { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.veils { position: fixed; inset: -20%; pointer-events: none; filter: blur(70px); opacity: .5; }
.veils span { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; }
.veils span:nth-child(1) { top: 8%; left: 6%; background: radial-gradient(closest-side, rgb(143 183 154 / .5), transparent); animation: drift-a 22s ease-in-out infinite alternate; }
.veils span:nth-child(2) { right: 4%; top: 30%; background: radial-gradient(closest-side, rgb(189 153 86 / .32), transparent); animation: drift-b 26s ease-in-out infinite alternate; }
.veils span:nth-child(3) { left: 30%; bottom: 0; background: radial-gradient(closest-side, rgb(108 168 204 / .22), transparent); animation: drift-a 30s ease-in-out infinite alternate-reverse; }

.top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 22px 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Instrument Serif', Georgia, serif; font-size: 24px; }
.brand svg { width: 26px; height: 26px; }
.brand path { fill: var(--cream); }
.brand .diamond { fill: var(--gold); }
.languages { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--faint); border-radius: 999px; background: rgb(31 44 37 / .5); backdrop-filter: blur(10px); }
.languages button { padding: 4px 11px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 12px/1.4 'DM Sans', sans-serif; letter-spacing: .06em; cursor: pointer; }
.languages button[aria-pressed='true'] { background: var(--cream); color: var(--deep); }

/* The hero: the logo on its tile of glass, the name, and what is coming. */
.hero { position: relative; z-index: 1; display: grid; justify-items: center; max-width: 1080px; margin: 0 auto; padding: 7vh 24px 80px; text-align: center; }
.mark { position: relative; width: 92px; height: 92px; margin: 16px 0 46px; }
.mark svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 16px rgb(0 0 0 / .3)); }
.mark path { fill: var(--cream); transform-box: fill-box; }
.logo-i { transform-origin: bottom; animation: rise 640ms var(--ease) 120ms both; }
.logo-t { transform-origin: top left; animation: unfold 700ms var(--ease) 320ms both; }
.mark .logo-diamond { fill: var(--gold); transform-origin: center; animation: pop 640ms cubic-bezier(.3, 1.6, .5, 1) 760ms both; }
.mark-glass {
  position: absolute;
  inset: -22%;
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: 30%;
  background: linear-gradient(150deg, rgb(255 255 255 / .2), rgb(255 255 255 / .05) 46%, rgb(0 0 0 / .1)), rgb(31 44 37 / .5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 18px 40px rgb(0 0 0 / .35);
  backdrop-filter: blur(10px) saturate(1.3);
  overflow: hidden;
  animation: tile 700ms var(--ease) both;
}
.mark-glass::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .22) 50%, transparent 62%); animation: sheen 6s ease-in-out 1.4s infinite; }
h1 { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(64px, 12vw, 120px); font-weight: 400; line-height: .95; letter-spacing: -.01em; animation: lift 700ms var(--ease) 880ms both; }
.tagline { margin: 10px 0 0; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(22px, 3.4vw, 30px); font-style: italic; color: var(--muted); animation: lift 700ms var(--ease) 1000ms both; }
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 30px 0 0;
  padding: 9px 18px 9px 14px;
  border: 1px solid rgb(227 200 143 / .35);
  border-radius: 999px;
  background: rgb(189 153 86 / .12);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: lift 700ms var(--ease) 1150ms both;
}
.soon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 0 0 rgb(227 200 143 / .6); animation: beat 2.4s ease-out infinite; }
.lead { max-width: 560px; margin: 22px 0 0; color: var(--muted); font-size: 17px; animation: lift 700ms var(--ease) 1250ms both; }

/* What InTrain is: three panes of glass. */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 64px; }
.pillar {
  padding: 24px 22px;
  border: 1px solid var(--faint);
  border-radius: 18px;
  background: linear-gradient(160deg, rgb(52 87 61 / .38), rgb(31 44 37 / .45));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1);
  backdrop-filter: blur(12px);
  text-align: left;
  animation: lift 700ms var(--ease) both;
  transition: translate 300ms var(--ease), border-color 300ms ease;
}
.pillar:nth-child(2) { animation-delay: 1350ms; }
.pillar:nth-child(3) { animation-delay: 1450ms; }
.pillar:nth-child(4) { animation-delay: 1550ms; }
.pillar:hover { translate: 0 -3px; border-color: rgb(227 200 143 / .3); }
.pillar svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { margin: 12px 0 6px; font-size: 17px; }
.pillar p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.bottom { position: relative; z-index: 1; display: flex; justify-content: center; gap: 12px; padding: 28px 24px 34px; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.bottom span + span::before { content: '·'; margin-right: 12px; }

@keyframes rise { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes unfold { from { transform: scale(.2) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(0) rotate(-90deg); opacity: 0; } 70% { transform: scale(1.35) rotate(10deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes tile { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes lift { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheen { 0%, 60% { translate: -60% 0; } 100% { translate: 60% 0; } }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgb(227 200 143 / .55); } 70%, 100% { box-shadow: 0 0 0 10px rgb(227 200 143 / 0); } }
@keyframes drift-a { to { transform: translate(18%, 12%) scale(1.12); } }
@keyframes drift-b { to { transform: translate(-16%, -10%) scale(.9); } }

@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; margin-top: 44px; }
  .hero { padding-top: 5vh; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }