/* meesto.app landing page
   Brand values mirrored from the app: Theme.accentGreen (#C6FF00), black
   backdrop, SF Rounded heavy type, the taped-collage intro background.
   Copy voice is the app's: lowercase, no em dashes. */

:root {
  --green: #C6FF00;
  --ink: #f5f4ec;          /* Theme.brushInk, dark variant */
  --muted: #9a9aa2;
  --bg: #000;
  --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
             "Segoe UI", system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--rounded);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 7vw, 48px) 24px calc(clamp(36px, 7vw, 48px) + env(safe-area-inset-bottom));
  overflow: hidden;
}

/* The collage is a portrait asset with deliberate empty bands where the
   logo and headline sit. On wide screens a plain `cover` would crop to the
   empty middle, so it stays a centered column and fades out sideways. */
.hero__bg {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 460px);
  background: url("/assets/collage.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

/* dim + vignette so the type stays readable on top of the photos */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 75% at 50% 50%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 70%, #000 100%),
    rgba(0, 0, 0, .22);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 660px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4.4vw, 38px);
}

.logo {
  width: min(68vw, 320px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.9)) drop-shadow(0 6px 18px rgba(0,0,0,.7));
}

/* ------------------------------------------------------------ headline */

/* Sized so "one shared canvas." holds one line inside the 660px column on
   desktop and at 375px on a phone (verified 2026-07-27). `balance` keeps any
   future break even. */
.headline {
  margin: 0;
  font-size: clamp(2.2rem, 9.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

.headline__line {
  display: block;
  text-wrap: balance;
}
.headline__line--accent { color: var(--green); }

.swoosh-wrap {
  position: relative;
  display: inline-block;
}

/* Traced from LogoSwooshUnderline.swift. Two paths alternating on a 1s
   cadence is a nod to the app's two-frame flip. */
.swoosh {
  position: absolute;
  left: 0;
  bottom: -0.24em;
  width: 100%;
  height: 0.28em;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(198, 255, 0, .45));
}

.swoosh path {
  fill: none;
  stroke: var(--green);
  stroke-width: 3.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.swoosh__b { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .swoosh__a { animation: flip 1s steps(1, end) infinite; }
  .swoosh__b { animation: flip 1s steps(1, end) infinite reverse; }
}

@keyframes flip {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 32ch;
}

.hero__lead,
.hero__sub {
  margin: 0;
  line-height: 1.4;
  text-wrap: pretty;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

.hero__lead {
  font-size: clamp(1.05rem, 4.2vw, 1.28rem);
  font-weight: 700;
  color: var(--ink);
  opacity: .95;
}

.hero__sub {
  font-size: clamp(.95rem, 3.7vw, 1.06rem);
  font-weight: 600;
  color: #c4c4cc;
}

/* ----------------------------------------------------------------- cta */

.hero__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cta__note {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--muted);
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

.cta {
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid rgba(198, 255, 0, .55);
  border-radius: 999px;
  background: rgba(198, 255, 0, .08);
  color: var(--green);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
}

/* Filled + interactive once it becomes a real <a href> to the listing. */
a.cta {
  background: var(--green);
  border-color: var(--green);
  color: #000;
  box-shadow: 0 6px 20px rgba(198, 255, 0, .28);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
}

a.cta:hover,
a.cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(198, 255, 0, .4);
}

a.cta:active { transform: scale(.97); }

/* --------------------------------------------------------------- drift */

/* Everything below the hero sits over a drifting collage. The photos are
   background texture, not exhibits: dimmed and blurred well under the copy
   so the page reads busy and alive rather than like a gallery wall.
   `overflow: hidden` is load-bearing: the scraps are oversized and rotated,
   and without it they'd give the body a horizontal scrollbar. */
.lower {
  position: relative;
  overflow: hidden;
}

.drift {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The copy rides above the texture. */
.bits,
.closer {
  position: relative;
  z-index: 1;
}

/* Pushed far back: heavy dim + blur, so no photo ever competes with a
   headline sitting on top of it. Raising either opacity past ~.3 or
   dropping the blur starts costing legibility. */
.drift__photo {
  position: absolute;
  height: auto;
  border-radius: 8px;
  opacity: .26;
  filter: blur(2px) saturate(.85);
  will-change: transform;
}

/* The doodles stay brighter than the photos: they are the moving signal, and
   flat green on black holds up when dim. */
.drift__flip {
  position: absolute;
  height: auto;
  opacity: .5;
  will-change: transform;
}

/* Placed down the outer margins so the centered copy column stays clear.
   Each one gets its own drift duration for the same reason the GIFs do:
   matched timings make the whole layer pulse as one block. */
.drift__photo--defaced { width: 30%; left: -6%;  top: 4%;   animation: drift-a 31s ease-in-out infinite alternate; }
.drift__photo--fridge  { width: 32%; right: -7%; top: 34%;  animation: drift-b 37s ease-in-out infinite alternate; }
.drift__photo--pile    { width: 28%; left: -4%;  bottom: 3%; animation: drift-c 43s ease-in-out infinite alternate; }

.drift__flip--heart { width: 9%;  right: 6%;  top: 12%;    animation: drift-b 23s ease-in-out infinite alternate; }
.drift__flip--crown { width: 10%; left: 8%;   top: 47%;    animation: drift-c 29s ease-in-out infinite alternate; }
.drift__flip--cat   { width: 8%;  right: 9%;  bottom: 12%; animation: drift-a 26s ease-in-out infinite alternate; }

/* The cat is a photo cutout, not line art: at the doodles' opacity its white
   die-cut border reads as a foreground element instead of texture, so it gets
   the photo treatment. */
.drift__flip--cat {
  opacity: .28;
  filter: blur(1px) saturate(.85);
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to   { transform: translate3d(2.5%, -3.5%, 0) rotate(2deg); }
}

@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) rotate(3deg); }
  to   { transform: translate3d(-3%, 3%, 0) rotate(-2.5deg); }
}

@keyframes drift-c {
  from { transform: translate3d(0, 0, 0) rotate(-2deg); }
  to   { transform: translate3d(3%, 2.5%, 0) rotate(4deg); }
}

/* On a phone the copy column spans nearly the full width, so the texture
   moves to the very edges and thins out further. */
@media (max-width: 700px) {
  .drift__photo { opacity: .2; }
  .drift__flip  { opacity: .4; }
  .drift__flip--cat { opacity: .24; }

  .drift__photo--defaced { width: 52%; left: -20%;  top: 3%;    }
  .drift__photo--fridge  { width: 54%; right: -22%; top: 38%;   }
  .drift__photo--pile    { width: 50%; left: -18%;  bottom: 4%; }

  .drift__flip--heart { width: 16%; right: -3%; top: 16%;    }
  .drift__flip--crown { width: 17%; left: -5%;  top: 52%;    }
  .drift__flip--cat   { width: 15%; right: -2%; bottom: 10%; }
}

/* The GIFs keep flipping (that is the product), but the slow parallax is
   the part that provokes motion sickness, so it stops. */
@media (prefers-reduced-motion: reduce) {
  .drift__photo,
  .drift__flip { animation: none; }
}

/* ---------------------------------------------------------------- bits */

/* Four blocks, so a 2x2 on desktop rather than a row of narrow columns. */
.bits {
  display: grid;
  gap: clamp(52px, 8vw, 72px) clamp(40px, 6vw, 72px);
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(72px, 14vw, 120px) 28px;
}

@media (min-width: 760px) {
  .bits { grid-template-columns: repeat(2, 1fr); }
}

.bit { text-align: center; }

.bit__icon {
  display: block;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 16px;
}

.bit__title {
  margin: 0 0 12px;
  font-size: clamp(1.16rem, 4.6vw, 1.3rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--green);
  text-wrap: balance;
}

.bit__lead,
.bit__aside {
  margin: 0 auto;
  max-width: 32ch;
  line-height: 1.5;
  text-wrap: pretty;
}

.bit__lead {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  opacity: .92;
}

.bit__aside {
  margin-top: 8px;
  font-size: .97rem;
  font-weight: 600;
  color: var(--muted);
}

/* -------------------------------------------------------------- closer */

.closer {
  padding: clamp(24px, 6vw, 40px) 28px clamp(64px, 12vw, 96px);
  text-align: center;
}

.closer__line {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(1.5rem, 6.2vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.22;
  color: var(--green);
  text-wrap: balance;
}

/* -------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 40px 28px calc(40px + env(safe-area-inset-bottom));
  text-align: center;
}

.footer__mark {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--ink);
  opacity: .7;
}

.footer__note {
  margin: 0 auto;
  max-width: 34ch;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

.footer__soon {
  margin: 14px 0 0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  opacity: .75;
}

.footer__links {
  margin-top: 14px;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.footer__links a {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 154, 162, .35);
}

.footer__links a:hover { color: var(--green); border-bottom-color: var(--green); }