/* Smart Split — homepage only (linked from index.html alone, so no other page is affected).
   Builds on styles.css's tokens (--bg, --surface, --border, --accent, ...).

   Desktop (>= 1200px): three zones -- dumbbell photography entering from the left, the
   centered hero, and an angled phone on the right. Below that the phone joins the normal
   flow (logo, title, tagline, CTA, phone, features, footer) and decorative photos drop out.

   Imagery: /images/home-dumbbells.jpg (left-side photo, a CSS background) and
   /images/app-home-screen.png (a real 1179x2556 app screenshot inside the phone, see
   index.html). The right side behind the phone is CSS lighting only. */

body.home {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  /* Cinematic lighting on the charcoal base: warm light spilling in from the upper left and
     lower left, a faint warm lift on the right, and a darker falloff toward the edges. The
     center stays at the brand charcoal. */
  background:
    radial-gradient(55vw 55vh at -6% -8%, rgba(255, 190, 0, 0.20), transparent 62%),
    radial-gradient(38vw 42vh at 6% 100%, rgba(255, 190, 0, 0.10), transparent 70%),
    radial-gradient(34vw 60vh at 104% 58%, rgba(255, 214, 10, 0.06), transparent 70%),
    radial-gradient(ellipse 75% 85% at 50% 42%, #1C1C1E 0%, #151517 62%, #0C0C0D 100%);
  background-color: #111113;
}

/* ---------- Decorative photography ---------- */

.home-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-photo-left {
  left: 0;
  /* Full page height at the photo's own 1672:941 aspect ratio (never stretched), then slid
     left so the dumbbells enter from the viewport edge and occupy roughly the left third,
     with the largest one in the lower left. */
  width: auto;
  aspect-ratio: 1672 / 941;
  transform: translateX(-8%);
  /* A light top-down shade (CSS overlay, the photo itself is untouched) calms the brightly
     lit rack in the upper left so it reads as ambient light behind the logo. */
  background-image:
    linear-gradient(to bottom, rgba(12, 12, 13, 0.42) 0%, rgba(12, 12, 13, 0) 45%),
    url('/images/home-dumbbells.jpg');
  background-size: 100% 100%;
  background-position: left top;
  /* Long, eased feather: the dumbbells stay at full strength, then the photo's dark gym
     atmosphere thins out gradually underneath the hero instead of stopping at a visible
     line. The many small steps approximate an ease-out curve so no band stands out. */
  --feather: #000 0%, #000 26%,
    rgba(0, 0, 0, 0.82) 29%, rgba(0, 0, 0, 0.6) 32.5%, rgba(0, 0, 0, 0.4) 36%,
    rgba(0, 0, 0, 0.26) 40%, rgba(0, 0, 0, 0.17) 45%, rgba(0, 0, 0, 0.11) 52%,
    rgba(0, 0, 0, 0.07) 60%, rgba(0, 0, 0, 0.035) 70%, transparent 84%;
  -webkit-mask-image: linear-gradient(to right, var(--feather));
  mask-image: linear-gradient(to right, var(--feather));
  opacity: 0.92;
}

/* Right-side atmosphere: the SAME photo, zoomed into its upper-left corner (golden rack
   lighting and dark gym, no dumbbells), mirrored so that warm light sits toward the right
   edge, then heavily blurred and kept very faint. It reads as out-of-focus gym depth
   behind the phone rather than as a second image. */
.home-scene::before {
  content: '';
  position: absolute;
  top: -8%;
  bottom: -8%;
  right: -6%;
  width: 62%;
  background-image: url('/images/home-dumbbells.jpg');
  background-repeat: no-repeat;
  background-size: 300% auto;
  background-position: 0% 0%;
  transform: scaleX(-1);
  filter: blur(34px) saturate(0.85);
  opacity: 0.26;
  /* Mirrored, so "to right" here runs from the page's right edge in toward the center. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.12) 75%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.12) 75%, transparent 100%);
}

/* Center shade: a soft, borderless darkening behind the hero so the title, tagline and CTA
   always sit on the darkest part of the scene while the atmosphere continues around them. */
.home-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 33% 46% at 50% 42%, rgba(18, 18, 20, 0.7) 0%, rgba(18, 18, 20, 0.4) 55%, rgba(18, 18, 20, 0) 100%);
}

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

.home-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(40px, calc(var(--safe-top) + 24px))
    max(20px, calc(var(--safe-right) + 20px))
    24px
    max(20px, calc(var(--safe-left) + 20px));
  text-align: center;
}

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 640px;
}

.home-logo {
  width: clamp(96px, 8.4vw, 150px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 23%;
  display: block;
  margin: 0 0 clamp(18px, 2vw, 30px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.home-title {
  font-size: clamp(52px, 6.8vw, 112px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-primary);
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  white-space: nowrap;
}

.home-title span {
  color: var(--accent);
}

.home-tagline {
  font-size: clamp(17px, 1.55vw, 26px);
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 24em;
  margin: 0 0 clamp(28px, 2.6vw, 40px);
}

.home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: clamp(260px, 24vw, 420px);
  max-width: 100%;
  min-height: clamp(54px, 3.8vw, 64px);
  padding: 0 28px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 800;
  text-decoration: none;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(255, 214, 10, 0.12);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.home-cta svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform 0.15s ease;
}

.home-cta:hover {
  opacity: 0.93;
}

.home-cta:hover svg {
  transform: translateX(2px);
}

.home-cta:active {
  opacity: 0.85;
  transform: scale(0.99);
}

.home-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Desktop/tablet break after "set," so the tagline sits on two balanced lines, as in the
   reference; on narrow phones it wraps naturally instead. */
@media (max-width: 560px) {
  .home-tagline-break {
    display: none;
  }
}

/* ---------- Feature row ---------- */

.home-features {
  list-style: none;
  margin: clamp(40px, 4.2vw, 64px) 0 0;
  padding: 0;
  width: clamp(480px, 40vw, 660px);
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.home-features li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 6px;
}

.home-feature-icon {
  width: clamp(54px, 4.2vw, 70px);
  height: clamp(54px, 4.2vw, 70px);
  border-radius: 50%;
  background: rgba(44, 44, 46, 0.75);
  border: 1px solid rgba(58, 58, 60, 0.8);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.home-feature-icon svg {
  width: 50%;
  height: 50%;
  display: block;
}

.home-feature-label {
  font-size: clamp(14px, 1.08vw, 17px);
  line-height: 1.4;
  color: #D1D1D6;
}

/* ---------- Phone ---------- */

.home-phone {
  position: relative;
  width: 100%;
  /* Sized so the screen area inside the 3.4% bezel is exactly 1179:2556 -- the screenshot's
     own aspect ratio (iPhone 15/16 Pro native) -- so it fills the display with no crop and
     no distortion: screen height = 0.932W / (1179/2556) = 2.0205W, plus 0.068W of bezel. */
  aspect-ratio: 1 / 2.0885;
  padding: 3.4%;
  border-radius: 15% / 7%;
  background: linear-gradient(145deg, #3A3A3C 0%, #111112 22%, #0A0A0B 70%, #2A2A2C 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08),
    inset 0 0 0 5px #050506,
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.45),
    -18px 0 60px rgba(255, 190, 0, 0.07);
}

/* Side buttons. */
.home-phone::before,
.home-phone::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #2C2C2E;
}

.home-phone::before {
  left: -2px;
  top: 20%;
  height: 7%;
}

.home-phone::after {
  right: -2px;
  top: 27%;
  height: 11%;
}

.home-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12% / 5.6%;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-phone-placeholder {
  width: 26%;
  height: auto;
  border-radius: 23%;
  opacity: 0.9;
}

.home-phone-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The whole screenshot is always shown -- never cropped or stretched. If its aspect ratio
     is narrower than the 1179:2556 screen (the current 794x1981 capture is), the thin side
     margins are filled with the screenshot's own background color, rgb(21, 22, 24), so they
     read as part of the app rather than as bars. */
  object-fit: contain;
  object-position: center;
  background-color: rgb(21, 22, 24);
}

.home-phone-island {
  position: absolute;
  top: 2.2%;
  left: 50%;
  width: 31%;
  height: 4.2%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

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

body.home footer.site-footer {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100% - 40px));
  margin: 0 auto;
  padding: 16px 0 calc(22px + var(--safe-bottom));
  gap: 0;
  border-top: none;
  font-size: 15px;
}

body.home footer.site-footer a {
  padding: 6px 18px;
  line-height: 1.2;
}

/* ---------- Desktop: three-zone composition ---------- */

@media (min-width: 1200px) {
  .home-phone-wrap {
    position: absolute;
    right: 5vw;
    top: 50%;
    width: clamp(230px, 20vw, 340px);
    transform: translateY(-52%) perspective(1800px) rotateY(-14deg) rotateZ(9deg);
    transform-origin: center;
  }
}

/* Narrower desktops: the hero column takes a larger share of the width, so the photo slides
   further left to keep the dumbbells clear of the feature row. */
@media (min-width: 1200px) and (max-width: 1365.98px) {
  .home-photo-left {
    transform: translateX(-15%);
  }
}

/* ---------- Tablet & phone: stacked ---------- */

@media (max-width: 1199.98px) {
  .home-photo,
  .home-scene::before,
  .home-scene::after {
    display: none;
  }

  .home-phone-wrap {
    width: min(210px, 54vw);
    margin: 44px auto 0;
    transform: rotate(4deg);
  }

  .home-features {
    margin-top: 52px;
  }

  body.home footer.site-footer {
    margin-top: 12px;
  }
}

@media (max-width: 560px) {
  .home-main {
    padding-top: max(56px, calc(var(--safe-top) + 32px));
  }

  .home-features {
    width: 100%;
    max-width: 340px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
  }

  body.home footer.site-footer a {
    padding: 8px 12px;
  }
}

/* Very narrow phones (~320px): slightly tighter links so all four stay on one line. */
@media (max-width: 359.98px) {
  body.home footer.site-footer a {
    padding: 8px 7px;
    font-size: 14px;
  }
}