/* ═══════════════════════════════════════════════════════════════════════
   HOME HERO: FULL-BLEED PHOTO (index.html)
   The photo fills the right of the hero edge to edge and melts into the
   background on its left, so the headline sits in open space beside it.
   Motion: slow zoom, gentle scroll parallax (site.js data-para), staggered
   text, floating glass chips, scroll cue. All off for reduced motion.
   ═══════════════════════════════════════════════════════════════════════ */

#home.hero-x--bleed {
  min-height: min(100svh, 900px); display: flex; align-items: center;
  padding-top: clamp(120px, 12vw, 150px); padding-bottom: clamp(96px, 9vw, 128px);
}
.hero-x--bleed { --hero-w: 1480px; }
.hero-x--bleed .hero-x-inner { grid-template-columns: 1fr; width: 100%; max-width: var(--hero-w); }
.hero-x--bleed .hero-x-copy { max-width: 560px; }
.hero-x--bleed .hero-desc { font-size: clamp(.95rem, 1.1vw, 1.04rem); line-height: 1.7; max-width: 46ch; }

/* Photo layer */
.hero-x.grain > .hb {
  position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 58%;
  pointer-events: none;
}
.hb-media {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 40%);
  animation: hb-in 1.4s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
/* a light veil at the very bottom so the photo meets the band below softly */
.hb-media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 22%;
  background: linear-gradient(to top, rgba(221,236,248,.55), transparent);
}
.hb-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 38%; display: block;
  transform-origin: 60% 45%;
  animation: hb-zoom 28s ease-in-out infinite alternate;
}
/* Wide screens: keep the photo inside the content frame (mirroring the copy's
   left edge) instead of running to the viewport edge, and fade its right side */
@media (min-width: 1281px) {
  .hero-x.grain > .hb {
    --hb-gap: max(0px, calc((100% - var(--hero-w)) / 2 - 40px));
    right: var(--hb-gap); width: calc((100% - 2 * var(--hb-gap)) * .62);
  }
  .hb-media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 40%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 18%, #000 40%, #000 86%, transparent 100%);
  }
  .hb .hb-chip--2 { right: 10%; }
}
/* Large monitors: the hero frame is wider than the rest of the page, so
   scale the copy up with it rather than leaving it small in the middle */
@media (min-width: 1600px) {
  .hero-x--bleed .hero-x-copy { max-width: 640px; }
  #home.hero-x--bleed h1 { font-size: clamp(4.9rem, 4.4vw, 6rem); }
  .hero-x--bleed .hero-desc { font-size: 1.12rem; max-width: 48ch; }
}
@keyframes hb-in   { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes hb-zoom { from { transform: scale(1.04); } to { transform: scale(1.14); } }

/* Glass chips floating over the photo */
.hb-chip {
  position: absolute; display: flex; align-items: center; gap: 11px; pointer-events: auto;
  padding: 10px 16px 10px 10px; border-radius: 16px; line-height: 1.25; white-space: nowrap;
  background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 18px 40px -16px rgba(12,35,65,.4);
  font-size: .84rem; font-weight: 700; color: var(--ink);
}
.hb-chip span { display: block; font-weight: 400; font-size: .74rem; color: var(--muted); }
.hb-chip > i {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--navy-700); color: #fff;
}
.hb-chip > i svg { width: 17px; height: 17px; }
.hb-chip--1 { left: 13%; top: 17%;
  animation: hb-chip-in .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) .7s both, hb-bob 7s ease-in-out 1.6s infinite; }
.hb-chip--2 { right: 4%; bottom: 9%;
  animation: hb-chip-in .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) .9s both, hb-bob 8.5s ease-in-out 2.2s infinite; }
@keyframes hb-chip-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hb-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -9px; rotate: -.6deg; } }

/* Chip polish: a light that orbits the border, a periodic sheen, a gradient icon tile with a live ping */
.hb-chip { isolation: isolate; overflow: hidden; border-color: rgba(255,255,255,.55); transition: scale .35s var(--ease), box-shadow .35s var(--ease); }
.hb-chip::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--orbit), transparent 0 55%, rgba(127,182,220,.9) 78%, #fff 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: orbit-spin 5s linear infinite;
}
.hb-chip--2::before { animation-duration: 6.5s; animation-direction: reverse; }
.hb-chip::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform: translateX(-100%); animation: hb-sheen 6s ease-in-out 2.4s infinite;
}
.hb-chip--2::after { animation-delay: 5.4s; }
@keyframes hb-sheen { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
.hb-chip > i { position: relative; background: linear-gradient(135deg, var(--sky-500), var(--navy-700)); box-shadow: 0 6px 14px -6px rgba(12,35,65,.6); }
.hb-chip > i::after {
  content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: #22B573; box-shadow: 0 0 0 2px #fff; animation: hb-live 2.4s ease-in-out infinite;
}
.hb-chip--2 > i::after { background: var(--sky-400); }
@keyframes hb-live { 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(34,181,115,.18); } }
.hb-chip:hover { scale: 1.04; box-shadow: 0 24px 48px -18px rgba(12,35,65,.5); }

/* Scroll cue */
.hero-x.grain > .hb-scroll {
  position: absolute; z-index: 3; bottom: 28px;
  left: max(var(--pad-x), calc((100% - var(--maxw)) / 2));
  width: 26px; height: 42px; border-radius: 14px; border: 1.5px solid rgba(27,58,92,.35);
  animation: hb-fade 1s ease 1.4s both;
}
.hb-scroll span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--navy-600); animation: hb-wheel 1.8s ease-in-out infinite;
}
.hb-scroll:hover { border-color: var(--navy-600); }
@keyframes hb-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes hb-fade { from { opacity: 0; } to { opacity: 1; } }

/* Mid widths: photo a little wider, chips tucked in */
@media (max-width: 1180px) {
  .hero-x.grain > .hb { width: 60%; }
  .hb-chip--1 { left: 44%; top: 10%; }
  .hb-chip--2 { right: 3%; bottom: 8%; }
  .hb-chip span { display: none; }
}

/* Phones and tablets: photo becomes the top backdrop, text below it */
@media (max-width: 920px) {
  #home.hero-x--bleed { display: block; min-height: 0; padding-top: calc(min(62vw, 440px) + 64px); }
  .hero-x.grain > .hb { top: 0; bottom: auto; width: 100%; height: calc(min(62vw, 440px) + 110px); transform: none !important; }
  .hb-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
  .hb-media::after { display: none; }
  .hb-media img { object-position: 60% 30%; }
  .hb-chip { font-size: .78rem; padding: 7px 12px 7px 7px; gap: 8px; }
  .hb-chip > i { width: 26px; height: 26px; border-radius: 8px; }
  .hb-chip > i svg { width: 14px; height: 14px; }
  .hb-chip--1 { left: auto; right: 24px; top: 22%; }
  .hb-chip--2 { right: 24px; bottom: 19%; }
  .hero-x.grain > .hb-scroll { display: none; }
  .hero-x--bleed .hero-x-copy { max-width: none; }
}

@media (max-width: 560px) { .hb-chip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hb-media, .hb-media img, .hb-chip, .hb-chip::before, .hb-chip::after, .hb-chip > i::after, .hero-x.grain > .hb-scroll, .hb-scroll span { animation: none !important; }
  .hb-chip::after { display: none; }
}

/* "No waitlist" callout between the description and the buttons */
.hero-nowait {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 26px;
  padding: 6px 18px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid rgba(34,181,115,.35);
  box-shadow: 0 10px 26px -14px rgba(20,120,80,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nw-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #1FA971, #128257); color: #fff;
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.nw-badge i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.nw-badge i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: nw-ping 1.8s ease-out infinite; }
@keyframes nw-ping { to { transform: scale(2.8); opacity: 0; } }
.nw-text { font-size: .9rem; font-weight: 600; color: var(--ink); }
@media (max-width: 560px) {
  .hero-nowait { flex-wrap: wrap; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 22px; }
  .nw-text { font-size: .84rem; padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .nw-badge i::after { animation: none; } }
.hero-x .hero-nowait { opacity: 0; animation: fadeUp .8s var(--ease-out) .46s forwards; }
@media (prefers-reduced-motion: reduce) { .hero-x .hero-nowait { opacity: 1; animation: none; } }