/* MoveBuddy — teaser
   ==========================================================================
   One screen, one idea. The photograph carries the mood; type stays out of its
   way. Everything is cool steel and white except one word of the headline, which
   carries the brand ember gradient. Warmth in the image is the light itself —
   never an overlay, and never a glow.
   ========================================================================== */

:root {
  --void:  #06090b;   /* page black, cool-leaning */
  --haze:  #9aacb2;   /* secondary text */
  --ice:   #eef3f4;   /* primary text */
  --ember: #ff4200;   /* brand orange, straight off the logo — fallback fill */
  /* Brand ember gradient, lifted from tokens/colors.css. One word, one place. */
  --ember-grad: linear-gradient(135deg, #ff8a3c 0%, #ff6b2c 42%, #ff3b1f 100%);

  --pad: clamp(1.35rem, 5vw, 4.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--void);
  color: var(--ice);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Language: both variants ship in the markup with real `lang` attributes;
   the root `data-lang` decides which one renders. No layout shift, no JS
   needed for first paint, and screen readers still get correct language. */
html[data-lang="en"] [lang="pl"],
html[data-lang="pl"] [lang="en"] { display: none; }


/* ---------------------------------------------------------------- stage --- */

.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

/* Hero art. Declared as a background so the landscape and portrait crops can be
   swapped by media query with only the matching file ever fetched — the plain
   url() line is the fallback for engines without image-set(), and it is
   overridden before anything loads. */
.stage__img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 55% 50%;
  background-image: url("img/bar-wide.jpg");
  background-image: image-set(url("img/bar-wide.avif") type("image/avif"),
                              url("img/bar-wide.jpg") type("image/jpeg"));
  /* Very slow drift so the room feels alive without ever reading as motion. */
  animation: drift 48s var(--ease) infinite alternate;
}

/* Legibility scrim — the only layer over the photograph, and it exists solely
   so the headline can be read. No grain, no light overlays: the render already
   carries its own dust and its own warm shaft, and stacking more on top read as
   an artificial filter. */
.stage__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,9,11,.80) 0%, rgba(6,9,11,.28) 26%,
                            rgba(6,9,11,.20) 46%, rgba(6,9,11,.72) 76%,
                            rgba(6,9,11,.95) 100%),
    radial-gradient(130% 92% at 50% 42%, transparent 32%, rgba(6,9,11,.62) 100%);
}


/* ---------------------------------------------------------------- shell --- */

/* Full-bleed and left-aligned. A centred max-width container left the whole
   composition floating in the middle of wide screens, which read as an
   accident rather than a margin. */
.shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: clamp(1.1rem, 3.4vw, 2.4rem) var(--pad) clamp(1.5rem, 3.6vw, 2.8rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(2rem, 5vw, 3rem);
}


/* ------------------------------------------------------------------ bar --- */

.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: block; line-height: 0; }

/* A mark, not a billboard — the headline is what should carry the page. */
.brand img {
  display: block;
  width: clamp(126px, 11vw, 168px);
  height: auto;
}

.lang { display: flex; align-items: center; gap: .55rem; }

.lang__btn {
  appearance: none;
  border: 0;
  background: none;
  padding: .3rem .15rem;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: color-mix(in srgb, var(--haze) 72%, transparent);
  cursor: pointer;
  transition: color .25s var(--ease);
}

.lang__btn:hover { color: var(--ice); }
.lang__btn[aria-pressed="true"] { color: var(--ice); }

.lang__sep {
  width: 1px;
  height: .72rem;
  background: rgba(238, 243, 244, .22);
}

:where(a, button):focus-visible {
  outline: 1px solid rgba(238, 243, 244, .6);
  outline-offset: 4px;
  border-radius: 2px;
}


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

.hero {
  align-self: end;              /* poster layout: type anchored low */
  max-width: 22ch;
}

/* Line breaks come from explicit <br> in the markup, so the measure is fixed at
   18ch (the longest line in either language). Per-breakpoint sizes below are
   capped so that line always fits its column — no wrapping, no overflow. */
.title {
  margin: 0;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
}

/* The single hit of brand colour in the whole page: the ember gradient, clipped
   to one word. Flat colour is the fallback; there is no glow in either path. */
.title em { font-style: normal; color: var(--ember); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .title em {
    background: var(--ember-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* The answer to the headline's implicit question. It carries the punch, so it
   sits close under the type and stays bright — but well below the headline in
   weight, or the pair stops reading as question and answer. */
.lede {
  margin: clamp(.9rem, 2vw, 1.25rem) 0 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -.005em;
  color: color-mix(in srgb, var(--ice) 88%, transparent);
}

/* Pure signage: who it is for, and that it is close. Deliberately the quietest
   thing on the page so it never competes with the line above it. */
.meta {
  margin: clamp(.7rem, 1.6vw, 1rem) 0 0;
  max-width: 62ch;              /* 46ch broke this small a line across three rows */
  font-size: clamp(.78rem, .95vw, .88rem);
  font-weight: 400;
  letter-spacing: .015em;
  color: color-mix(in srgb, var(--haze) 68%, transparent);
}

.meta__soon {
  color: color-mix(in srgb, var(--haze) 92%, transparent);
  white-space: nowrap;
}


/* ----------------------------------------------------------------- foot --- */

/* Stacked, not spread. Pushing the label and the icons to opposite ends left a
   chasm between them on wide screens; reading order is label then icons, so
   that is how they sit. */
.foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding-top: clamp(1.2rem, 3vw, 1.8rem);
  border-top: 1px solid rgba(238, 243, 244, .1);
}

.foot__label {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--haze) 78%, transparent);
}

.social { display: flex; align-items: center; gap: .35rem; margin-inline-start: -.8rem; }

.social__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;                     /* comfortable touch target */
  padding: .5rem .8rem;
  border-radius: 999px;
  color: var(--haze);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}

.social__link:hover,
.social__link:focus-visible {
  color: var(--ice);
  background: rgba(238, 243, 244, .07);
}

.social__icon { flex: none; }


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

@keyframes drift {
  from { transform: scale(1.005); }
  to   { transform: scale(1.055) translate3d(-1.2%, -.6%, 0); }
}

/* Lights coming up in an empty room. */
@keyframes lights {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 15px, 0); }
  to   { opacity: 1; transform: none; }
}

.stage { animation: lights 1.5s var(--ease) both; }

.reveal {
  animation: rise .9s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 110ms + 320ms);
}


/* --------------------------------------------------------------- layout --- */

/* Phones: poster stack — beam visible up top, type anchored to the bottom. */
@media (max-width: 720px) {
  /* Phone viewports are far narrower than the 4:5 render, so `cover` crops the
     sides — bias left to keep the shaft and its floor pool in frame. */
  .stage__img {
    background-position: 50% 50%;
    background-image: url("img/bar-portrait.jpg");
    background-image: image-set(url("img/bar-portrait.avif") type("image/avif"),
                                url("img/bar-portrait.jpg") type("image/jpeg"));
  }

  /* Type rides in the middle band on phones: pinned to the bottom it buried the
     barbell, pinned to the top it crowded the logo. The barbell lands in the
     lower third of the portrait crop, so the scrim opens there and darkens
     again under the footer. */
  .stage__scrim {
    background:
      linear-gradient(180deg, rgba(6,9,11,.80) 0%, rgba(6,9,11,.56) 20%,
                              rgba(6,9,11,.70) 38%, rgba(6,9,11,.68) 58%,
                              rgba(6,9,11,.22) 70%, rgba(6,9,11,.12) 80%,
                              rgba(6,9,11,.52) 90%, rgba(6,9,11,.88) 100%);
  }

  .hero {
    max-width: none;
    align-self: center;
  }

  /* 8.8vw keeps the longest line ("co musisz dźwignąć,") inside the column all
     the way down to a 320px viewport, with room to spare. */
  .title { font-size: clamp(1.95rem, 8.8vw, 3.4rem); }

  /* Phones have no room for a wordmark to be subtle at 126px — nudge it up. */
  .brand img { width: clamp(140px, 40vw, 168px); }

  .social { margin-inline-start: -.7rem; }
  .social__link { padding-inline: .7rem; }
}

/* Desktop: type holds the dark left third, the light stays on the right. */
@media (min-width: 721px) {
  .shell { grid-template-rows: auto 1fr auto; }

  /* The headline is the poster. The column is wide enough that a full 18ch line
     fits at 7rem, so type — not the photograph — leads the composition. */
  .hero {
    align-self: center;
    max-width: min(86%, 68rem);
  }

  .title { font-size: clamp(2.8rem, 7.4vw, 7rem); }

  /* Deeper through the middle than before: the headline now runs most of the
     width, so it crosses the lit part of the frame. */
  .stage__scrim {
    background:
      linear-gradient(96deg, rgba(6,9,11,.92) 0%, rgba(6,9,11,.83) 26%,
                             rgba(6,9,11,.54) 52%, rgba(6,9,11,.28) 74%,
                             rgba(6,9,11,.40) 100%),
      linear-gradient(180deg, rgba(6,9,11,.55) 0%, transparent 24%,
                              transparent 60%, rgba(6,9,11,.85) 100%);
  }
}

/* Short-and-wide viewports (laptops in landscape) run out of vertical room long
   before horizontal — trade headline size for a visible footer. */
/* Only genuinely short landscape viewports need to trade size for a visible
   footer — a three-line headline still clears 800px of height at full scale. */
@media (min-width: 721px) and (max-height: 700px) {
  .title { font-size: min(6.2vw, 5.5rem, 11vh); }
  .shell { gap: clamp(1rem, 2.6vh, 1.75rem); }
  .brand img { width: clamp(150px, 18vw, 240px); }
}


/* --------------------------------------------------------------- a11y ----- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }}