/* ============================================================
   UTAC.TV — mobile-first landing page layout
   Base rules target mobile phones; min-width queries enhance
   the layout upward for tablets and desktops. Loaded last so it
   takes precedence over the legacy (desktop-first) stylesheet.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
}

/* ---------- Page shell (mobile baseline) ---------- */
body.body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;

  color: #cfcfcf;
  font-family: Lato, Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.5;

  background-color: #222;
  background-image: url("../images/camo-smoke-2560.png");
  background-position: center top;
  background-repeat: repeat-y;
  background-size: auto;
  /* fixed attachment is unreliable / janky on mobile Safari & Chrome */
  background-attachment: scroll;

  /* full-bleed on phones — no rounded viewport corners */
  border: 0;
  border-radius: 0;

  /* respect notches / rounded display cutouts */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---------- Logo ---------- */
.heading {
  margin: 0;
  padding-top: max(28px, env(safe-area-inset-top));
  text-align: center;
}

.image {
  width: 42vw;
  max-width: 150px;
  height: auto;
  max-height: none;
}

/* ---------- Content column ---------- */
.container.w-container {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 20px 18px calc(36px + env(safe-area-inset-bottom));
}

.heading-2 {
  margin: 16px 0 0;
  font-size: 1.85rem;
  line-height: 1.1;
}

.paragraph {
  margin: 8px 0 24px;
  font-size: 1rem;
}

/* ---------- Social / action buttons ---------- */
/* Full-width, touch-friendly pills (>=48px tap target). Brand
   colours come from the legacy .button-N rules; layout is here. */
.container .w-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin: 12px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 24px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, filter 0.15s ease;
}

/* Press feedback on touch (no hover) */
.container .w-button:active {
  transform: scale(0.96);
}

.text-block {
  margin-top: 30px;
  font-size: 1rem;
}

.section {
  margin-top: 10px;
}

.html-embed {
  margin-top: 26px;
}

/* ---------- Button rollover "pop" ---------- */
.container .w-button {
  /* springy easing on transform gives the hover a satisfying overshoot pop */
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.15s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .container .w-button:hover {
    transform: translateY(-3px) scale(1.045);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
    filter: brightness(1.13);
  }
  /* quick press-in when clicked */
  .container .w-button:active {
    transform: translateY(-1px) scale(0.99);
    transition-duration: 0.06s;
  }
}

/* ============================================================
   Animation layer — only when the user hasn't asked for less
   motion. All content is visible by default; these rules just
   add entrance + ambient motion on top.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes utac-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes utac-logo-in {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes utac-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
  }
  @keyframes utac-glow {
    0%, 100% { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); }
    50%      { filter: drop-shadow(0 0 16px rgba(214, 40, 40, 0.45)); }
  }

  /* Logo: fade+scale in, then gently float (on parent) and pulse a
     reticle-red glow (on the image) — a subtle nod to the scope theme. */
  .heading {
    animation: utac-float 6.5s ease-in-out 0.8s infinite;
  }
  .image {
    animation:
      utac-logo-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both,
      utac-glow 4.5s ease-in-out 1s infinite;
  }

  /* Staggered entrance for the content column. `backwards` fill hides each
     element during its delay but releases control after it finishes, so it does
     NOT pin transform — leaving the button :hover pop free to work. */
  .container > * {
    animation: utac-fade-up 0.55s ease backwards;
  }
  .container > *:nth-child(1)  { animation-delay: 0.12s; }
  .container > *:nth-child(2)  { animation-delay: 0.20s; }
  .container > *:nth-child(3)  { animation-delay: 0.30s; }
  .container > *:nth-child(4)  { animation-delay: 0.37s; }
  .container > *:nth-child(5)  { animation-delay: 0.44s; }
  .container > *:nth-child(6)  { animation-delay: 0.51s; }
  .container > *:nth-child(7)  { animation-delay: 0.58s; }
  .container > *:nth-child(8)  { animation-delay: 0.66s; }
  .container > *:nth-child(9)  { animation-delay: 0.73s; }
  .container > *:nth-child(10) { animation-delay: 0.78s; }
  .container > *:nth-child(11) { animation-delay: 0.84s; }
}

/* ---------- Tablet and up ---------- */
@media (min-width: 768px) {
  body.body {
    font-size: 20px;
    border-radius: 15px;
  }

  .heading {
    padding-top: 44px;
  }

  .image {
    width: auto;
    max-width: 100%;
    max-height: 160px;
  }

  .heading-2 {
    font-size: 2.3rem;
  }

  .container.w-container {
    max-width: 480px;
  }
}