/* Preloader, announcement bar, hero, ticker, showcases, stat band, scroll reveals. */

/* ---------------------------------------------------------------------------
   Preloader
   ------------------------------------------------------------------------ */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--navy-900);
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px solid rgba(147, 180, 245, .22);
  border-top-color: #93b4f5;
  animation: preloadSpin .8s linear infinite;
}
@keyframes preloadSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Announcement bar
   ------------------------------------------------------------------------ */

.announce {
  background: #f1f5fb;
  border-bottom: 1px solid #e2e9f4;
  color: var(--ink-muted);
  font-size: .85rem;
}
.announce p {
  max-width: 1120px;
  margin: 0 auto;
  padding: .55rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
}
.announce svg { width: 16px; height: 16px; color: var(--brand); flex: none; }

/* ---------------------------------------------------------------------------
   Sticky header state
   ------------------------------------------------------------------------ */

.topbar-public {
  transition: box-shadow .3s ease, padding .3s ease, background-color .3s ease;
}
.topbar-public.is-stuck { box-shadow: 0 6px 24px rgba(4, 14, 32, .32); }
.topbar-public.is-stuck .topbar-inner { padding-top: .6rem; padding-bottom: .6rem; }

.btn-pill { border-radius: 999px; }
.btn-pill svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------------
   Scroll reveals
   ------------------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out, ease), transform .7s var(--ease-out, ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Headline split into words, each rising in turn. */
[data-split].is-split .line { display: block; overflow: hidden; }
[data-split].is-split .word {
  display: inline-block;
  animation: wordRise .85s cubic-bezier(.22, .9, .3, 1) both;
  animation-delay: calc(.15s + var(--w) * .07s);
}
@keyframes wordRise {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */

.hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, .42fr);
  align-items: center;
  gap: 2.5rem;
}

.hero-copy h1 { margin-bottom: 1.1rem; }

.hero-figure { display: flex; justify-content: center; }
.hero-art {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 26px 50px rgba(3, 12, 26, .42));
  animation: floatArt 7s ease-in-out 1s infinite;
}
@keyframes floatArt {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.hero-stats { display: grid; gap: 2.25rem; }
.hero-stat-value {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-stat-label {
  font-size: .87rem;
  color: #a9c5e6;
  margin-top: .5rem;
  max-width: 15rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Ticker
   ------------------------------------------------------------------------ */

.ticker {
  display: flex;
  overflow: hidden;
  background: var(--brand);
  color: #fff;
  padding: .9rem 0;
  user-select: none;
}
.ticker-track {
  display: flex;
  flex: none;
  gap: 2.75rem;
  padding-right: 2.75rem;
  animation: tickerScroll 38s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  white-space: nowrap;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.ticker-item svg { width: 15px; height: 15px; opacity: .65; }
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------------------------------------------------------------------------
   Showcase (image beside copy)
   ------------------------------------------------------------------------ */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 3.5rem;
  align-items: center;
}
.showcase-reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.showcase-art { display: flex; justify-content: center; }
.showcase-art img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 20px;
}
.showcase-copy .section-lead { margin-bottom: 1.5rem; }
.showcase-copy .hero-actions { margin: 1.75rem 0 0; }

.section-dark {
  background: linear-gradient(160deg, var(--navy-900), #12294a);
  color: #fff;
}
.section-dark .section-lead { color: #bcd2e8; }
.section-dark .check-list li { color: #d3e1f2; }
.section-dark .check-list li::before {
  background: rgba(147, 180, 245, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393b4f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section-dark .showcase-art img { box-shadow: 0 24px 60px rgba(3, 12, 26, .5); }

/* ---------------------------------------------------------------------------
   Stat band
   ------------------------------------------------------------------------ */

.stats-band { background: #fff; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.band-stat { text-align: center; }
.band-value {
  font-size: clamp(2.1rem, 3.2vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.band-label {
  font-size: .9rem;
  color: var(--ink-muted);
  margin-top: .6rem;
  max-width: 15rem;
  margin-inline: auto;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .hero-stats {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .hero-stat-label { max-width: none; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-figure { order: -1; }
  .hero-art { max-width: 280px; }
  .showcase, .showcase-reverse { grid-template-columns: 1fr; gap: 2.25rem; }
  .showcase-art { order: -1; }
}

@media (max-width: 640px) {
  .announce p { font-size: .8rem; padding: .5rem 1rem; }
  .hero-stats { grid-template-columns: 1fr; gap: 1.35rem; }
  .ticker-item { font-size: .88rem; }
  .ticker-track { gap: 1.85rem; padding-right: 1.85rem; }
  .stat-row { gap: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art { animation: none; }
  .ticker-track { animation: none; }
  [data-split].is-split .word { animation: none; opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .preloader-ring { animation-duration: 2s; }
}