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

html, body {
  height: 100%;
  height: 100dvh; /* tracks the actual visible viewport as mobile browser chrome shows/hides */
  overflow: hidden; /* locked while the intro video plays; released once holding page is visible */
  background: #00202e;
}

body.content-visible {
  overflow: auto;
}

/* ---------- Puzzle intro layer ---------- */

.puzzle-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #00202e;
  opacity: 1;
  visibility: visible;
  transition: opacity 2.2s ease;
  z-index: 2;
}

.puzzle-layer.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* Sized to the zap.png aspect ratio so it scales cleanly on any viewport with
   no cropping. Bounded by both viewport width and height (via dvh) so it
   fills as much of the screen as possible without ever overflowing either
   axis. Each tile is a slice of the same image, positioned via the
   background-image sprite technique so the grid reconstructs it exactly. */
.puzzle-frame {
  position: relative;
  width: min(94vw, calc(88dvh * 2200 / 1200));
  aspect-ratio: 2200 / 1200;
}

.puzzle-tile {
  position: absolute;
  background-repeat: no-repeat;
  opacity: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg));
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s),
              opacity 0.6s ease var(--delay, 0s);
  will-change: transform, opacity;
}

.puzzle-frame.is-assembling .puzzle-tile {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* ---------- Holding layer ---------- */

/* Zappaty brand palette/type, matched to zappaty.com's hero (navy #00202e, orange #CF4400, Montserrat) */
.holding-layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: #00202e;
  color: #ffffff;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2.2s ease;
  z-index: 1;
}

.holding-layer.is-visible {
  opacity: 1;
  visibility: visible;
}

.holding-content {
  max-width: 32rem;
}

.logo {
  margin-bottom: 1.5rem;
}

.logo img {
  width: clamp(140px, 24vw, 186px);
  height: auto;
  display: inline-block;
}

.headline {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.tagline {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.75rem;
}

.tagline--cta {
  margin-bottom: 1rem;
}

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.signup-form input[type="email"] {
  flex: 1 1 16rem;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  background: transparent;
  color: #ffffff;
}

.signup-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.signup-form input[type="email"]:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.signup-form button {
  flex: 0 0 auto;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  border: 1px solid #cf4400;
  border-radius: 100px;
  background: #cf4400;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.signup-form button:hover {
  opacity: 0.85;
}

.signup-form button:disabled {
  cursor: default;
  opacity: 0.6;
}

.form-message {
  margin-top: 1rem;
  min-height: 1.25rem;
  font-size: 0.95rem;
  color: #7bdcb5;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .puzzle-layer,
  .holding-layer,
  .puzzle-tile {
    transition-duration: 0.01ms;
  }
}