/* Bloom Barbell Club
   Colors come from David's brand files: the plum background of the logo
   animation, the lotus pink, and the mint wordmark. --bloom is the mascot's skin. */

:root {
  --night: #1c091f;
  --plum: #2a1230;
  --plum-line: #4a2a50;
  --text: #f0f7f3;
  --muted: #c9bccb;
  --mint: #cde6d8;
  --lotus: #e73b7d;
  --lotus-deep: #b8295f;
  --bloom: #85c4f6;
  --rose: #f3b3c8;

  /* Figtree stands in for Avenir Black, the "BARBELL CLUB" face in the logo */
  --font: "Figtree", "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1160px;
  --measure: 36rem;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--mint);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--rose);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--mint);
  color: var(--night);
  padding: 0.6rem 1rem;
  z-index: 10;
}

.skip-link:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Header ---------- */

.site-header {
  padding: 16px 0;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
}

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

.logo img {
  width: auto;
  height: 46px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  padding: 6px 0;
  display: inline-block;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--lotus);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------- Buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 2px solid var(--lotus);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn-solid {
  background: var(--lotus);
  color: var(--night);
}

.btn-solid:hover {
  background: var(--rose);
  border-color: var(--rose);
  color: var(--night);
}

.btn-line {
  background: transparent;
  color: var(--text);
}

.btn-line:hover {
  background: var(--lotus);
  color: var(--night);
}

/* ---------- Hero ---------- */

.hero {
  padding: 0 0 clamp(64px, 7vw, 96px);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 3vw, 48px);
}

/* As big as the column allows, but never taller than most of the screen */
.hero-mark {
  margin: 0;
  justify-self: center;
  width: min(100%, 720px, 78vh);
}

/* Fade the video's edges into the page so browser color shifts in the
   video background never show as a visible square. The logo sits well
   inside the fully opaque middle. */
.hero-mark video {
  width: 100%;
  aspect-ratio: 1;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

.hero .lede {
  margin: 0;
  max-width: 26rem;
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.hero .sub {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.125rem;
}

/* ---------- Worlds band ---------- */

.worlds {
  position: relative;
  background: var(--lotus-deep);
  color: #fff;
  padding: clamp(48px, 8vw, 96px) 0;
}

.worlds h2 {
  margin: 0;
  max-width: 17ch;
  font-weight: 900;
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.worlds .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 800;
  font-size: 1.1rem;
}

.worlds p {
  max-width: var(--measure);
  margin: 18px 0 0;
  font-size: 1.125rem;
}

.worlds .btn-solid {
  background: #fff;
  border-color: #fff;
  color: var(--lotus-deep);
}

.worlds .btn-solid:hover {
  background: var(--mint);
  border-color: var(--mint);
}

.worlds .btn-line {
  border-color: #fff;
  color: #fff;
}

.worlds .btn-line:hover {
  background: #fff;
  color: var(--lotus-deep);
}

.worlds a:not(.btn) {
  color: #fff;
}

.worlds :focus-visible {
  outline-color: #fff;
}

.fine-print {
  font-size: 0.9rem !important;
  opacity: 0.92;
}

/* ---------- Content sections ---------- */

.section {
  position: relative;
  padding: clamp(64px, 9vw, 112px) 0;
}

.section-alt {
  background: var(--plum);
}

.section h2 {
  margin: 0 0 20px;
  font-weight: 900;
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--mint);
}

.section h3 {
  margin: 40px 0 12px;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
}

.section p {
  max-width: var(--measure);
  margin: 0 0 16px;
}

.section .lead {
  font-size: 1.2rem;
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.split-flip > :first-child {
  order: 2;
}

.photo {
  border-radius: 18px;
  overflow: hidden;
  background: var(--plum-line);
}

.photo img {
  width: 100%;
}

.cutout {
  max-width: 380px;
  justify-self: center;
}

.offer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-list li {
  position: relative;
  padding-left: 22px;
}

.offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lotus);
}

.pricing {
  margin-top: 8px;
  max-width: 960px;
}

.credentials {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-weight: 800;
  color: var(--rose);
}

.credentials li + li {
  margin-top: 4px;
}

.credit {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Contact ---------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.contact-list li + li {
  margin-top: 8px;
}

/* ---------- Shop and 404 pages ---------- */

.page-head {
  padding: clamp(24px, 5vw, 56px) 0 clamp(24px, 4vw, 40px);
}

.page-head h1 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(2.8rem, 7vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--mint);
}

.page-head p {
  max-width: var(--measure);
  margin: 18px 0 0;
  font-size: 1.15rem;
  color: var(--muted);
}

.page-head .cutout {
  width: 220px;
  margin-bottom: 20px;
}

.store {
  padding-bottom: clamp(56px, 8vw, 104px);
}

.store-pending {
  background: var(--plum);
  border-left: 6px solid var(--lotus);
  border-radius: 0 14px 14px 0;
  padding: 24px clamp(20px, 3vw, 32px);
  max-width: 40rem;
}

.store-pending h2 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 800;
}

.store-pending p {
  margin: 0;
}

.shipping-note {
  max-width: var(--measure);
  margin-top: 32px;
  color: var(--muted);
}

/* Product list (filled in by shop/shop.js) */

.store-status {
  margin: 0 0 20px;
  color: var(--muted);
  font-weight: 700;
}

html:not(.js) .store-status {
  display: none;
}

.product-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.chip {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid var(--plum-line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--lotus);
}

.chip[aria-pressed="true"] {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--night);
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.products[hidden],
.product[hidden] {
  display: none;
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--plum);
  border: 1px solid var(--plum-line);
  border-radius: 18px;
  overflow: hidden;
}

.product-trip {
  border: 2px solid var(--lotus);
}

.product-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--plum-line);
}

.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.product:hover .product-img img {
  transform: scale(1.03);
}

.product-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.badge-trip {
  background: var(--lotus);
  color: var(--night);
}

.badge-out {
  background: var(--plum-line);
  color: var(--text);
}

.product h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}

.product h3 a {
  color: var(--text);
  text-decoration: none;
}

.product h3 a:hover {
  color: var(--rose);
  text-decoration: underline;
}

.product-price {
  margin: 6px 0 16px;
  color: var(--mint);
  font-weight: 800;
}

.product .btn {
  flex: 0 0 auto;
  margin-top: auto;
  min-height: 44px;
  align-self: flex-start;
}

/* Two across on phones, so the whole range is a quick scroll */
@media (max-width: 560px) {
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .product {
    border-radius: 14px;
  }

  .product-body {
    padding: 12px 12px 14px;
  }

  .product h3 {
    font-size: 1rem;
  }

  .product-price {
    margin-bottom: 12px;
  }

  .product .btn {
    min-height: 40px;
    padding: 0 18px;
  }

  .badge {
    font-size: 0.72rem;
    padding: 2px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-img img {
    transition: none;
  }

  .product:hover .product-img img {
    transform: none;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--plum-line);
  padding: 28px 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}

.site-footer p {
  margin: 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Section transitions ----------
   A lotus badge sits on each section boundary and blooms open as it scrolls
   into view, then the section's content rises in. Only runs when JS has
   flagged the page (html.js), so content is never hidden without it. */

.seam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: var(--night);
  border: 1px solid var(--plum-line);
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

.seam img {
  width: 36px;
  height: auto;
  transform-origin: 50% 100%;
}

.js .seam {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 400ms ease, transform 600ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.js .seam img {
  opacity: 0;
  transform: scale(0.35, 0.1);
  transition: opacity 500ms ease 180ms, transform 900ms cubic-bezier(0.2, 0.9, 0.25, 1.15) 180ms;
}

.js .seam.is-in,
.js .seam.is-in img {
  opacity: 1;
  transform: none;
}

.js .reveal > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js .reveal.is-in > * {
  opacity: 1;
  transform: none;
}

.js .reveal.is-in > :nth-child(2) { transition-delay: 90ms; }
.js .reveal.is-in > :nth-child(3) { transition-delay: 180ms; }
.js .reveal.is-in > :nth-child(4) { transition-delay: 270ms; }
.js .reveal.is-in > :nth-child(n+5) { transition-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  .js .seam,
  .js .seam img,
  .js .reveal > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .js .seam,
  .js .seam img,
  .js .reveal > * {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .logo img {
    height: 38px;
  }

  .hero .wrap,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-mark {
    width: min(100%, 520px);
  }

  .split-flip > :first-child {
    order: 0;
  }

  .cutout {
    max-width: 240px;
  }

  .offer-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .btn {
    flex: 1 1 auto;
  }
}