/* ==========================================================================
   VYYBE — Coming Soon — design tokens
   ========================================================================== */
:root {
  --cream: #EDE9E2;
  --ink: #141414;
  /* #6B6B66 measured 4.43:1 on the cream — just under the 4.5:1 AA floor for
     body text. Darkened a touch to clear it without changing the tone. */
  --muted: #64645E;
  --hairline: #C9C4B8;
  /* drives both the wordmark and its tagline — see .brand-logo */
  --brand-logo-h: clamp(30px, min(3.91vw, 5.86vh), 64px);
}

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

.vyybe-shell {
  min-height: 100vh;
  /* anchor for the social group, which is lifted to the page's top-right */
  position: relative;
}

img {
  max-width: 100%;
}

/* Visible keyboard focus. Two-tone ring so it reads on both the cream field
   and the darker CTA fill. */
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.cta-pill:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   LEFT PANEL
   ========================================================================== */
/* NB deliberately not positioned: the social group inside it is absolutely
   placed against .vyybe-shell so it can reach the page's right edge. */
.left-panel {
  background: var(--cream);
  display: flex;
  align-items: stretch;
}

.left-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* asymmetric like the reference: content runs close to the column's right edge */
  padding: clamp(1.5rem, 5vh, 3.75rem) clamp(1rem, 2.4vw, 2rem)
           clamp(1.5rem, 5vh, 3.75rem) clamp(1.5rem, 5vw, 4.5rem);
  gap: clamp(0.75rem, 2.5vh, 2rem);
}

/* Brand */
/* Sized from the reference, where the wordmark is 60px tall on a 1536x1024
   frame (3.91vw / 5.86vh). The asset is trimmed to its ink, so this height is
   the wordmark itself rather than a padded box. */
.brand-logo {
  height: var(--brand-logo-h);
  width: auto;
  display: block;
}

/* In the reference the tagline is set to the wordmark's own width (170 vs
   173px) and sits 16px below it. Deriving both from the logo height keeps that
   relationship at every viewport instead of drifting as the clamps diverge. */
.brand-tagline {
  margin: calc(var(--brand-logo-h) * 0.267) 0 0;
  font-size: calc(var(--brand-logo-h) * 0.2287);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: clamp(0.66rem, 0.82vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 clamp(0.5rem, 1.8vh, 1.4rem);
}

.eyebrow-dots {
  display: inline-flex;
  gap: 5px;
  flex-shrink: 0;
}

.eyebrow-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  display: inline-block;
}

/* Headline */
.headline {
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.025em;
  font-size: clamp(2.5rem, min(8.2vw, 11vh), 8.5rem);
  margin: 0;
}

.headline span {
  display: block;
}

/* Divider */
.divider-rule {
  width: 58px;
  height: 3px;
  background: var(--ink);
  margin: clamp(0.7rem, 2.2vh, 1.75rem) 0 clamp(0.7rem, 2vh, 1.5rem);
}

/* Subcopy */
.subcopy {
  font-size: clamp(0.88rem, 1.08vw, 1.08rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 32rem;
  margin: 0 0 clamp(0.9rem, 3vh, 2.25rem);
}

/* Marketplace */
.label-sm {
  font-size: clamp(0.62rem, 0.76vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(0.5rem, 1.4vh, 1rem);
}

.marketplace-row {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  flex-wrap: wrap;
  margin-bottom: clamp(0.9rem, 3vh, 2.25rem);
}

.mp-divider {
  width: 1px;
  height: clamp(20px, 2.6vh, 30px);
  background: var(--hairline);
}

/* Real marketplace logos. All three assets are trimmed to their tight bounds,
   so an equal box height gives the balance the reference uses (~40px at
   1536px wide). Heights stay equal; only optical nudges differ. */
.mp-logo {
  width: auto;
  display: block;
  flex-shrink: 0;
  height: clamp(20px, 2.55vw, 40px);
}

/* The amazon wordmark occupies only the top ~53% of its box (the swoosh fills
   the rest), so a centred box floats the word high. Nudging down by a share of
   its own height brings the wordmark level with the other two — the same
   offset the reference uses. */
.mp-amazon {
  transform: translateY(22%);
}

/* Flipkart's bag and Myntra's monogram both rise above their wordmarks,
   sitting them slightly low; lift each just enough to even out the row.
   These three offsets put all wordmark x-height centres on one line. */
.mp-flipkart {
  transform: translateY(-11%);
}

.mp-myntra {
  transform: translateY(-4.5%);
}

/* CTA pill */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(0.5rem, 1.3vh, 0.8rem);
  padding-left: clamp(1.1rem, 1.6vw, 1.6rem);
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  width: fit-content;
  /* extra breathing room above so the button sits clear of the logo row */
  margin-top: clamp(0.4rem, 1.6vh, 1.15rem);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cta-pill:hover {
  background: var(--ink);
  color: var(--cream);
}

.cta-icon {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  display: inline-flex;
}

.cta-text {
  font-size: clamp(0.78rem, 0.95vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cta-arrow {
  width: clamp(28px, 2.4vw, 36px);
  height: clamp(28px, 2.4vw, 36px);
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.cta-pill:hover .cta-arrow {
  transform: translateX(3px);
}

/* Footer perks */
.perks-row {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 1.15vw, 1.15rem);
  flex-wrap: wrap;
  row-gap: 0.75rem;
}

.perk {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(0.58rem, 0.7vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.perk i {
  font-size: clamp(1rem, 1.4vw, 1.35rem);
}

.perk-divider {
  width: 1px;
  height: clamp(18px, 2.2vh, 26px);
  background: var(--hairline);
}

/* ==========================================================================
   RIGHT PANEL — seamless continuation of the cream field
   ========================================================================== */
.right-panel {
  position: relative;
  background: var(--cream);
  min-height: 60vh;
}

.right-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.v-watermark {
  position: absolute;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: min(135%, 1250px);
  height: auto;
  /* measured off the reference: the mark sits ~5% over the cream */
  opacity: 0.05;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

/* Must match .tee-photo's framing exactly so the silhouette registers with the
   garment. Same intrinsic size, same object-fit/position. */
.tee-occluder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
  pointer-events: none;
}

.tee-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* The source photo's studio background is 252–255, not pure white, so a raw
     multiply tints the cream and leaves a seam where the image's transparent
     margin ends. Lifting the white point to 255 makes the blend a true no-op. */
  filter: brightness(1.025);
  mix-blend-mode: multiply;
  z-index: 2;
}

.top-overlay {
  position: absolute;
  top: clamp(1.25rem, 4.5vh, 3rem);
  right: clamp(1.5rem, 3vw, 3.5rem);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.35rem);
}

.stay-tuned {
  font-size: clamp(0.66rem, 0.82vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.stay-tuned-line {
  width: clamp(28px, 3vw, 52px);
  height: 1.5px;
  background: var(--ink);
  display: inline-block;
}

.social-icon {
  color: var(--ink);
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* 44x44 hit area for touch; the negative inline margin keeps the glyphs
     spaced as designed rather than pushing them apart. */
  min-width: 44px;
  min-height: 44px;
  margin-inline: -0.55rem;
  transition: opacity 0.2s ease;
}

.social-icon:hover {
  opacity: 0.55;
}

.bottom-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 3.5vh, 2.5rem);
  z-index: 2;
  padding: 0 clamp(1.5rem, 3vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.1vw, 1rem);
  font-size: clamp(0.6rem, 0.78vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  flex-wrap: wrap;
}

.bottom-overlay .bullet {
  color: var(--muted);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* --------------------------------------------------------------------------
   MOBILE / TABLET
   The desktop composition, stacked: brand + social on top, then the copy,
   then the garment as a full-width band beneath it. Every desktop element is
   kept; only the two columns become two rows.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root {
    --brand-logo-h: clamp(28px, 7vw, 44px);
  }

  .brand-tagline {
    font-size: clamp(0.55rem, 1.9vw, 0.75rem);
    letter-spacing: 0.24em;
  }

  /* stack the two panels, copy first, garment below */
  .vyybe-shell .row {
    align-content: flex-start;
  }

  .left-panel {
    order: 0;
  }

  .right-panel {
    order: 1;
    position: relative;
    min-height: 0;
    height: clamp(300px, 54vh, 520px);
  }

  /* header becomes one row: brand left, stay-tuned right */
  .brand-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .top-overlay {
    position: static;
    flex-shrink: 0;
  }

  .left-inner {
    justify-content: flex-start;
    text-align: left;
    align-items: stretch;
    padding: clamp(1.5rem, 6vw, 3rem) clamp(1.25rem, 5vw, 3rem);
    gap: clamp(1.5rem, 6vw, 3rem);
  }

  .headline {
    font-size: clamp(2.6rem, 13vw, 5rem);
  }

  .subcopy {
    max-width: 34rem;
    font-size: clamp(0.9rem, 3.6vw, 1.05rem);
  }

  /* marketplace logos stay a horizontal row, as on desktop */
  .marketplace-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(0.55rem, 2.8vw, 1.5rem);
    max-width: none;
  }

  .mp-logo {
    height: clamp(16px, 4.9vw, 30px);
  }

  .mp-divider {
    width: 1px;
    height: clamp(17px, 5vw, 28px);
    margin: 0;
  }

  /* horizontal row again, so the optical nudges apply as on desktop */
  .mp-amazon { transform: translateY(22%); }
  .mp-flipkart { transform: translateY(-11%); }
  .mp-myntra { transform: translateY(-4.5%); }

  .perks-row {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .perk-divider {
    display: block;
  }

  /* garment fills the band; no edge fade needed now it reaches the panel foot */
  .tee-photo,
  .tee-occluder {
    inset: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* anchor right so the whole garment stays in frame — cropping from the
       left only removes empty backdrop */
    object-position: right top;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* the garment now sits hard right, so shift the mark into the open band on
     its left and let it bleed off the edge, as it does on desktop */
  .v-watermark {
    left: 12%;
    top: 46%;
    width: min(145%, 580px);
  }

  .bottom-overlay {
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(0.7rem, 2.6vw, 1.1rem) clamp(1rem, 4vw, 2rem);
    border-top: none;
    background: linear-gradient(180deg, rgba(237, 233, 226, 0) 0%, rgba(237, 233, 226, 0.92) 62%);
    font-size: clamp(0.52rem, 2.05vw, 0.72rem);
    letter-spacing: 0.12em;
    flex-wrap: nowrap;
    gap: clamp(0.3rem, 1.5vw, 0.7rem);
  }
}

/* Narrow phones: everything stays on screen — tighten rather than hide. */
@media (max-width: 430px) {
  .perk {
    font-size: 0.5rem;
    letter-spacing: 0.03em;
    gap: 0.28rem;
  }

  .perk i {
    font-size: 0.8rem;
  }

  .stay-tuned {
    font-size: 0.55rem;
    letter-spacing: 0.09em;
  }

  .stay-tuned-line {
    width: 16px;
  }

  .top-overlay {
    gap: 0.5rem;
  }

  .social-icon {
    font-size: 0.95rem;
    margin-inline: -0.7rem;
  }
}