/* GooseMug splash — design tokens and layout.
   Single-screen static page; every scenery layer is absolutely positioned
   against .scene, whose fixed 100svh height anchors their percentage offsets. */

:root {
  /* Scenery */
  --sky: linear-gradient(180deg, #F3C9A6 0%, #F9DEC2 34%, #FDEEDC 62%, #FFF7EC 100%);
  --sun: radial-gradient(circle, #FFE0B8 0%, #FBD3AC 55%, rgba(251, 211, 172, 0) 72%);
  --ridge-far: #A38FB8;
  --ridge-near: #6E5D8C;
  --sand-back: #EFD9B8;
  --sand-front: #E6C99F;
  --agave: #4E6B4F;

  /* Brand */
  --terracotta: #C9603F;
  --terracotta-dark: #A84A2C;
  --sage: #5F7F63;
  --ink: #40312B;
  --ink-body: #5B4A42;
  --dusk: #6E5D8C;
  --page: #FFF7EC;
  --cream: #FFFBF3;

  /* Type */
  --font-display: Fredoka, ui-sans-serif, sans-serif;
  --font-text: Karla, ui-sans-serif, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--page);
}

a {
  color: var(--terracotta);
  text-decoration: none;
}

a:hover {
  color: var(--terracotta-dark);
}

/* ---------------------------------------------------------------- scene */

/* height (not min-height) is load-bearing: the layers below anchor with
   percentage `bottom` values and resolve against the wrong box if it grows. */
.scene {
  position: relative;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: var(--sky);
  font-family: var(--font-text);
  color: var(--ink);
}

.layer {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
}

.sun {
  position: absolute;
  left: 50%;
  top: 20%;
  width: clamp(160px, 26vw, 300px);
  aspect-ratio: 1;
  margin-left: -13vw;
  border-radius: 50%;
  background: var(--sun);
  animation: gm-sun 9s ease-in-out infinite;
}

.ridge-far {
  bottom: 14%;
  height: clamp(110px, 20vh, 260px);
}

.ridge-near {
  bottom: 12%;
  height: clamp(90px, 15vh, 200px);
}

.sand {
  bottom: 0;
  height: clamp(150px, 22vh, 260px);
}

.flora {
  bottom: 0;
  height: clamp(180px, 26vh, 300px);
}

.gosling {
  position: absolute;
  left: 0;
  bottom: 5%;
  z-index: 3;
  animation: gm-cross 34s linear infinite;
}

.gosling__body {
  animation: gm-waddle 0.52s ease-in-out infinite;
  transform-origin: 50% 90%;
}

.gosling svg {
  display: block;
  overflow: visible;
}

/* ---------------------------------------------------------------- column */

/* bottom: 36vh must stay clear of the far ridge's peak (14% + 20vh = 34vh).
   If either number changes, preserve that 2vh gap — body copy over #A38FB8
   measures ~1.5:1 contrast. Fix contrast by moving this band, never by
   recolouring the mountains. */
.column {
  position: absolute;
  top: 2vh;
  bottom: 36vh;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 760px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vh, 24px);
  text-align: center;
}

.badge {
  width: clamp(84px, min(21vw, 12.5vh), 230px);
  filter: drop-shadow(0 14px 22px rgba(110, 93, 140, 0.28));
  animation: gm-bob 5.5s ease-in-out infinite;
}

.badge__mark {
  display: block;
  width: 100%;
  height: auto;
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, min(11vw, 8.6vh), 116px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.wordmark__mug {
  color: var(--terracotta);
}

.kicker {
  margin: 0;
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dusk);
}

/* The tagline is a single display line and is deliberately exempt from the
   column's 760px cap — that cap exists for the reading column. Two things keep
   it on one line:
     1. `width: max-content` + a viewport-width `max-width`, so it may run wider
        than 760px on large screens instead of wrapping inside it;
     2. a third term in the font-size `min()` that caps type to the width the
        line actually needs. The string measures ~21.9x its font-size in Fredoka
        400 (including the HONK pill); 22.5 leaves margin for font fallback.
   Below ~470px wide the 21px floor wins and it wraps to two lines, which is the
   right call on a phone — one line there would mean ~16px type under a 43px
   wordmark. */
.tagline {
  margin: clamp(2px, 1vh, 14px) 0 0;
  width: max-content;
  max-width: calc(100vw - 40px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, min(4.4vw, 4.2vh, calc((100vw - 40px) / 22.5)), 44px);
  line-height: 1.24;
  color: var(--ink);
  text-wrap: pretty;
}

.honk {
  display: inline-block;
  font-weight: 700;
  color: var(--cream);
  background: var(--terracotta);
  padding: 0.04em 0.34em 0.1em;
  border-radius: 12px;
  transform: rotate(-2.6deg);
}

.dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dots span:nth-child(1) { background: var(--terracotta); }
.dots span:nth-child(2) { background: var(--sage); }
.dots span:nth-child(3) { background: var(--dusk); }

/* Like .tagline, exempt from a width cap so it holds one line. The design's
   34ch reading measure is what wrapped it — the column has far more room than
   the line needs (492px at the largest size, against 760px available).
   The outer min() caps the design's own scale by the width the line requires
   (~23.4x font-size in Karla 400; 23.8 leaves fallback margin), so type dips
   below the 15px minimum only on viewports too narrow to honour both. The 13px
   floor stops that at ~349px wide, below which it wraps rather than shrink
   further. */
.body-copy {
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 40px);
  font-size: max(13px, min(clamp(15px, min(2vw, 2.4vh), 21px), calc((100vw - 40px) / 23.8)));
  line-height: 1.45;
  color: var(--ink-body);
}

.closer {
  margin: clamp(2px, 1vh, 12px) 0 0;
  font-style: italic;
  font-size: clamp(13px, min(1.7vw, 2vh), 18px);
  color: var(--dusk);
}

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

@keyframes gm-bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-9px) rotate(1.2deg); }
}

@keyframes gm-cross {
  from { transform: translateX(-16vw); }
  to   { transform: translateX(112vw); }
}

@keyframes gm-waddle {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(7deg) translateY(-3px); }
}

@keyframes gm-sun {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.04); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}