/* Homepage splash layout for the Express-served `/` document.
   Visual language matches client/src/styles/splash.big-top.scss.
   Tokens are duplicated so this file does not depend on landing-big-top.css. */

:root {
  --bt-cream: #fff8ec;
  --bt-deep-purple: #5238a8;
  --bt-gold: #ffd166;
  --bt-ink: #2b1d4a;
  --bt-meta: #6b5b7a;
  --bt-lavender: #c9b8e8;
  --bt-shadow: #2b1d4a;
  --bt-check: #2ec4b6;
  --bt-display-font: 'Grandstander', cursive;
  --splash-scale: 1.75;
}

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

html {
  color-scheme: light;
}

body.splash-body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bt-cream);
  color: var(--bt-ink);
  font-family: 'Chakra Petch', sans-serif;
}

.splash {
  position: relative;
  min-height: 100vh;
  background-color: var(--bt-cream);
  padding:
    clamp(calc(0.75rem * var(--splash-scale)), calc(2.5vw * var(--splash-scale)), calc(1.5rem * var(--splash-scale)))
    clamp(calc(1rem * var(--splash-scale)), calc(4vw * var(--splash-scale)), calc(2.5rem * var(--splash-scale)))
    clamp(calc(1rem * var(--splash-scale)), calc(2.5vw * var(--splash-scale)), calc(1.5rem * var(--splash-scale)));
  overflow: hidden;
}

.splash__topnav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.85rem 1.15rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.splash__topnav a {
  color: var(--bt-deep-purple);
  text-decoration: none;
}

.splash__topnav a:hover,
.splash__topnav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.splash__layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(calc(0.5rem * var(--splash-scale)), calc(1.25vw * var(--splash-scale)), calc(0.75rem * var(--splash-scale)));
  width: 100%;
  max-width: min(92vw, 80rem);
  margin: 0 auto;
  min-height: calc(
    100vh - clamp(calc(2.5rem * var(--splash-scale)), calc(6vw * var(--splash-scale)), calc(4rem * var(--splash-scale)))
  );
}

.splash__main {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas:
    'header tent'
    'tagline tent'
    'cta tent';
  align-items: start;
  gap: clamp(calc(0.75rem * var(--splash-scale)), calc(3vw * var(--splash-scale)), calc(2rem * var(--splash-scale)));
}

.splash__header {
  grid-area: header;
  text-align: left;
}

.splash__hero-block {
  display: contents;
}

.splash__title-line {
  display: block;
}

.splash__title {
  font-family: var(--bt-display-font);
  font-weight: 700;
  font-size: clamp(calc(2rem * var(--splash-scale)), calc(7vw * var(--splash-scale)), calc(3.75rem * var(--splash-scale)));
  color: var(--bt-ink);
  margin: 0 0 calc(0.5rem * var(--splash-scale));
  letter-spacing: 0.02em;
  text-shadow: calc(3px * var(--splash-scale)) calc(3px * var(--splash-scale)) 0 rgba(43, 29, 74, 0.12);
}

.splash__copy {
  grid-area: tagline;
}

.splash__tagline {
  font-size: clamp(calc(0.95rem * var(--splash-scale)), calc(2.4vw * var(--splash-scale)), calc(1.25rem * var(--splash-scale)));
  font-weight: 500;
  color: var(--bt-meta);
  margin: 0;
  line-height: 1.35;
  max-width: 42ch;
}

.splash__tagline-line {
  display: block;
}

.splash__lead {
  margin: 0.65rem 0 0;
  font-size: clamp(0.95rem, 2vw, 1.08rem);
  font-weight: 500;
  line-height: 1.45;
  color: var(--bt-ink);
  max-width: 46ch;
}

.splash__cta-block {
  grid-area: cta;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.35rem * var(--splash-scale));
  min-width: 0;
  margin-top: 2%;
}

.splash__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bt-display-font);
  font-weight: 700;
  font-size: clamp(calc(0.85rem * var(--splash-scale)), calc(2.2vw * var(--splash-scale)), calc(1.05rem * var(--splash-scale)));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: calc(6px * var(--splash-scale));
  border: calc(2px * var(--splash-scale)) solid var(--bt-shadow);
  background-color: var(--bt-gold);
  color: var(--bt-ink);
  box-shadow: calc(4px * var(--splash-scale)) calc(4px * var(--splash-scale)) 0 var(--bt-shadow);
  padding: calc(0.7rem * var(--splash-scale)) calc(1.35rem * var(--splash-scale));
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  white-space: nowrap;
}

.splash__cta:hover,
.splash__cta:focus-visible {
  color: var(--bt-ink);
  transform: translateY(calc(-2px * var(--splash-scale)));
  box-shadow: calc(5px * var(--splash-scale)) calc(5px * var(--splash-scale)) 0 var(--bt-shadow);
}

.splash__cta:active {
  transform: translateY(calc(2px * var(--splash-scale)));
  box-shadow: calc(1px * var(--splash-scale)) calc(1px * var(--splash-scale)) 0 var(--bt-shadow);
}

.splash__cta-sublabel {
  margin: 0;
  font-size: clamp(calc(0.72rem * var(--splash-scale)), calc(1.8vw * var(--splash-scale)), calc(0.82rem * var(--splash-scale)));
  font-weight: 500;
  color: var(--bt-meta);
  line-height: 1.3;
  max-width: 32ch;
  text-align: left;
}

.splash__tent-col {
  grid-area: tent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  margin-top: calc(0.65rem * var(--splash-scale));
  overflow: visible;
}

.splash__tent-link {
  display: flex;
  justify-content: center;
  text-decoration: none;
  overflow: visible;
}

.splash__tent {
  width: clamp(calc(130px * var(--splash-scale)), calc(30vw * var(--splash-scale)), calc(300px * var(--splash-scale)));
  height: clamp(calc(130px * var(--splash-scale)), calc(30vw * var(--splash-scale)), calc(300px * var(--splash-scale)));
  object-fit: contain;
  cursor: pointer;
  user-select: none;
  animation: splash-tent-pulse 3s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
  margin: 0;
  transform: translate(-10%, -20%) scale(1.3);
  transform-origin: center top;
}

.splash__tent-link:hover .splash__tent,
.splash__tent-link:focus-visible .splash__tent {
  filter: brightness(1.1) drop-shadow(0 0 calc(20px * var(--splash-scale)) rgba(255, 209, 102, 0.6));
}

.splash__topics-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.65rem * var(--splash-scale));
  padding-top: calc(0.375rem * var(--splash-scale));
  border-top: 1px solid rgba(43, 29, 74, 0.12);
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
}

.splash__topics-label {
  margin: 0;
  font-size: calc(0.75rem * var(--splash-scale));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bt-meta);
}

.splash__topics {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.5rem * var(--splash-scale));
  width: 100%;
}

@media (min-width: 600px) {
  .splash__topics {
    flex-direction: row;
    justify-content: center;
    gap: calc(1.5rem * var(--splash-scale));
  }
}

.splash__topic-link {
  font-size: clamp(calc(0.9rem * var(--splash-scale)), calc(2vw * var(--splash-scale)), calc(1rem * var(--splash-scale)));
  font-weight: 600;
  color: var(--bt-meta);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.splash__topic-link:hover,
.splash__topic-link:focus-visible {
  color: var(--bt-deep-purple);
  text-decoration: underline;
  text-underline-offset: calc(3px * var(--splash-scale));
}

.splash__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: calc(0.35rem * var(--splash-scale));
}

.splash__footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.splash__footer-legal a {
  color: var(--bt-deep-purple);
  text-underline-offset: 2px;
}

.splash__footer-credits {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(0.3rem * var(--splash-scale));
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: calc(0.5rem * var(--splash-scale));
  font-weight: 500;
  color: var(--bt-meta);
  opacity: 0.72;
  text-align: center;
  line-height: 1.4;
}

.splash__footer-credits span {
  max-width: 52ch;
}

.splash__footer-credits a {
  color: var(--bt-lavender);
}

.splash__footer-credits:hover,
.splash__footer-credits:focus-within {
  opacity: 1;
  color: var(--bt-ink);
}

.splash__footer-credits:hover a,
.splash__footer-credits:focus-within a {
  color: var(--bt-deep-purple);
}

.splash a:focus-visible,
.splash__cta:focus-visible {
  outline: 3px solid var(--bt-check);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .splash {
    padding: clamp(0.75rem, 3vw, 1.25rem) clamp(0.85rem, 4vw, 1.25rem) clamp(0.85rem, 3vw, 1.25rem);
  }

  .splash__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
  }

  .splash__hero-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: -0.45rem;
  }

  .splash__header {
    width: 100%;
    text-align: center;
  }

  .splash__title {
    font-size: clamp(2.5rem, 13vw, 3.5rem);
    margin-bottom: 0.35rem;
    text-align: center;
  }

  .splash__copy {
    width: 100%;
    text-align: center;
  }

  .splash__tagline {
    max-width: none;
    text-align: center;
  }

  .splash__lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .splash__tent-col {
    margin-top: 0;
    width: 100%;
  }

  .splash__tent {
    width: clamp(200px, 54vw, 280px);
    height: clamp(200px, 54vw, 280px);
    transform: none;
    transform-origin: center center;
    animation: splash-tent-pulse-mobile 3s ease-in-out infinite;
  }

  .splash__cta-block {
    align-items: center;
    width: 80%;
    margin-top: 0.65rem;
  }

  .splash__cta {
    width: 100%;
    font-size: clamp(0.82rem, 3.6vw, 0.98rem);
    padding: 0.6rem 1rem;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }

  .splash__cta-sublabel {
    font-size: clamp(0.76rem, 3.4vw, 0.88rem);
    max-width: none;
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash__tent {
    animation: none;
  }
}

@keyframes splash-tent-pulse {
  0%,
  100% {
    transform: translate(-10%, -20%) scale(1.3);
  }

  50% {
    transform: translate(-10%, -20%) scale(1.326);
  }
}

@keyframes splash-tent-pulse-mobile {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}