/* Fallback for bacalar-condensed, which exists only at weight 300. The single
   Bold file is declared across the full range so it still matches.
   Clash Display is much wider than Bacalar (7.31x vs 5.80x the font-size for
   "Coming Soon"); size-adjust: 80% brings it to matching metrics so the
   headline can't overflow if the Adobe kit fails to load. */
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/ClashDisplay-Bold.woff2') format('woff2'),
       url('fonts/ClashDisplay-Bold.woff') format('woff');
  font-weight: 100 900;
  size-adjust: 80%;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Medium.woff2') format('woff2'),
       url('fonts/Satoshi-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Bold.woff2') format('woff2'),
       url('fonts/Satoshi-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

:root {
  --blue: #0056b8;
  --blue-light: #76a0d1;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--white);
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 8vh 6vw;
}

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 4vh, 40px);
  max-width: 560px;
}

.icon {
  width: clamp(48px, 8vw, 68px);
  height: auto;
}

.headline {
  font-family: 'bacalar-condensed', 'Clash Display', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  /* Mobile stacks all three words, so "Website" is the longest line (~3.65x
     the font-size) and 22vw clears the 88vw the body padding leaves. */
  font-size: min(22vw, 5.5rem);
}

/* Mobile: "Soon" drops to its own line. */
.headline .rest {
  display: block;
}

@media (min-width: 601px) {
  .headline .rest {
    display: inline;
  }
  /* Two lines now, so "Coming Soon" is longest at ~5.8x the font-size. */
  .headline {
    font-size: min(14.5vw, 5.5rem);
  }
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cta p {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  color: var(--white);
  opacity: 0.9;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 14px 36px;
  border-radius: 999px;
  background: var(--white);
  color: var(--blue);
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--blue-light);
  color: var(--white);
}

/* ---------- Intro animation ---------- */

/* The bear grows up from its feet with a soft overshoot. */
@keyframes rise-in {
  0% {
    opacity: 0;
    transform: translateY(14px) scaleY(0.5) scaleX(0.85);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scaleY(1.06) scaleX(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Words lift into place from behind the line above. */
@keyframes word-up {
  0% {
    opacity: 0;
    transform: translateY(0.5em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Long cycle that is mostly open eyes with a quick double blink at the end. */
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  92.5%, 96.5% { transform: scaleY(0.1); }
  94.5%, 98.5% { transform: scaleY(1); }
}

.icon {
  transform-origin: 50% 100%;
  animation: rise-in 0.75s cubic-bezier(0.34, 1.3, 0.64, 1) 0.1s both;
}

.icon .eye {
  transform-box: fill-box;
  transform-origin: center;
  /* Starts after the intro has settled. */
  animation: blink 5s ease-in-out 1.6s infinite;
}

.word {
  display: inline-block;
  animation: word-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.w1 { animation-delay: 0.36s; }
.w2 { animation-delay: 0.48s; }
.w3 { animation-delay: 0.60s; }

.cta p {
  animation: fade-up 0.6s ease-out 0.82s both;
}

.btn {
  animation: fade-up 0.6s ease-out 0.94s both;
}

@media (prefers-reduced-motion: reduce) {
  .icon,
  .icon .eye,
  .word,
  .cta p,
  .btn {
    animation: none;
  }
}