/* ============================================================
   GlobleMatch — motion.css
   Competition-grade motion that surpasses typical agency polish.
   Hooks existing classes only. Respects prefers-reduced-motion.
   ============================================================ */

html[data-brand="globlematch"] {
  --gm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gm-ease-soft: cubic-bezier(0.22, 0.8, 0.2, 1);
}

/* ---- cinematic hero stage ---- */
html[data-brand="globlematch"] .hero.hero--art {
  min-height: min(92vh, 920px);
  display: flex;
  align-items: center;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(48px, 7vw, 88px);
}
html[data-brand="globlematch"] .hero.hero--art::before {
  background:
    radial-gradient(900px 480px at 18% 10%, rgba(222, 210, 192,0.16), transparent 58%),
    radial-gradient(720px 420px at 88% 18%, rgba(236,228,215,0.22), transparent 60%),
    linear-gradient(180deg, rgba(248, 240, 227,0.2), rgba(248, 240, 227,0.92));
}

html[data-brand="globlematch"] .hero-art {
  isolation: isolate;
}
html[data-brand="globlematch"] .hero-art img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 28px;
  transform: translateZ(0) scale(1.02);
  transition: transform 1.2s var(--gm-ease-out), filter 0.6s var(--gm-ease-soft);
  filter: saturate(1.05) contrast(1.04);
  box-shadow:
    0 20px 50px rgba(24, 1, 2,0.18),
    0 2px 0 rgba(255,255,255,0.35) inset;
}
html[data-brand="globlematch"] .hero-art:hover img {
  transform: scale(1.05);
  filter: saturate(1.1) contrast(1.06);
}
html[data-brand="globlematch"] .hero-art::before {
  content: "";
  position: absolute;
  inset: -8% -6% auto auto;
  width: 48%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,228,215,0.35), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  animation: gm-orb 7s ease-in-out infinite alternate;
}
@keyframes gm-orb {
  from { transform: translate(0, 0) scale(0.95); opacity: 0.7; }
  to { transform: translate(-12%, 10%) scale(1.12); opacity: 1; }
}

/* staged hero entrance */
html[data-brand="globlematch"] .hero-copy .eyebrow,
html[data-brand="globlematch"] .hero-copy h1,
html[data-brand="globlematch"] .hero-copy .lede,
html[data-brand="globlematch"] .hero-copy .hero-cta,
html[data-brand="globlematch"] .hero-art {
  opacity: 0;
  transform: translateY(28px);
  animation: gm-rise 0.9s var(--gm-ease-out) forwards;
}
html[data-brand="globlematch"] .hero-copy .eyebrow { animation-delay: 0.05s; }
html[data-brand="globlematch"] .hero-copy h1 { animation-delay: 0.16s; }
html[data-brand="globlematch"] .hero-copy .lede { animation-delay: 0.28s; }
html[data-brand="globlematch"] .hero-copy .hero-cta { animation-delay: 0.4s; }
html[data-brand="globlematch"] .hero-art { animation-delay: 0.22s; }
@keyframes gm-rise {
  to { opacity: 1; transform: none; }
}

/* headline shimmer on accent span */
html[data-brand="globlematch"] .hero h1 span {
  background-size: 200% 100%;
  animation: gm-sheen 5.5s ease-in-out infinite;
}
@keyframes gm-sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- button magnetic sheen ---- */
html[data-brand="globlematch"] .btn-primary {
  position: relative;
  overflow: hidden;
}
html[data-brand="globlematch"] .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.28) 48%, transparent 70%);
  transform: translateX(-120%);
  transition: none;
}
html[data-brand="globlematch"] .btn-primary:hover::after {
  animation: gm-sheen-sweep 0.85s var(--gm-ease-out);
}
@keyframes gm-sheen-sweep {
  to { transform: translateX(120%); }
}

/* ---- scroll reveal upgrades ---- */
html[data-brand="globlematch"] .reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.7s var(--gm-ease-out),
    transform 0.7s var(--gm-ease-out),
    filter 0.7s var(--gm-ease-out);
}
html[data-brand="globlematch"] .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}
html[data-brand="globlematch"] .card.reveal:nth-child(2) { transition-delay: 0.08s; }
html[data-brand="globlematch"] .card.reveal:nth-child(3) { transition-delay: 0.16s; }
html[data-brand="globlematch"] .card.reveal:nth-child(4) { transition-delay: 0.24s; }
html[data-brand="globlematch"] .card.reveal:nth-child(5) { transition-delay: 0.32s; }
html[data-brand="globlematch"] .card.reveal:nth-child(6) { transition-delay: 0.4s; }

/* ---- card lift + glow ---- */
html[data-brand="globlematch"] a.card {
  position: relative;
  overflow: hidden;
}
html[data-brand="globlematch"] a.card::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(236,228,215,0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--gm-ease-soft);
  pointer-events: none;
}
html[data-brand="globlematch"] a.card:hover::before { opacity: 1; }
html[data-brand="globlematch"] a.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(24, 1, 2,0.12);
}

/* ---- launchpad tiles cascade ---- */
html[data-brand="globlematch"] .lp-home-tile {
  opacity: 0;
  transform: translateY(18px);
}
html[data-brand="globlematch"] .lp-home.is-inview .lp-home-tile {
  animation: gm-tile-in 0.55s var(--gm-ease-out) forwards;
}
html[data-brand="globlematch"] .lp-home.is-inview .lp-home-tile:nth-child(1) { animation-delay: 0.02s; }
html[data-brand="globlematch"] .lp-home.is-inview .lp-home-tile:nth-child(2) { animation-delay: 0.05s; }
html[data-brand="globlematch"] .lp-home.is-inview .lp-home-tile:nth-child(3) { animation-delay: 0.08s; }
html[data-brand="globlematch"] .lp-home.is-inview .lp-home-tile:nth-child(4) { animation-delay: 0.11s; }
html[data-brand="globlematch"] .lp-home.is-inview .lp-home-tile:nth-child(5) { animation-delay: 0.14s; }
html[data-brand="globlematch"] .lp-home.is-inview .lp-home-tile:nth-child(6) { animation-delay: 0.17s; }
html[data-brand="globlematch"] .lp-home.is-inview .lp-home-tile:nth-child(n+7) { animation-delay: 0.2s; }
@keyframes gm-tile-in {
  to { opacity: 1; transform: none; }
}

/* floating gold dust on launchpad */
html[data-brand="globlematch"] .lp-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(236,228,215,0.55), transparent),
    radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(236,228,215,0.4), transparent),
    radial-gradient(2px 2px at 85% 60%, rgba(255,255,255,0.25), transparent);
  background-size: 100% 100%;
  animation: gm-dust 12s linear infinite;
  pointer-events: none;
  opacity: 0.55;
}
@keyframes gm-dust {
  from { transform: translateY(0); }
  to { transform: translateY(-18px); }
}

/* ---- partner band photo wash ---- */
html[data-brand="globlematch"] .gm-partner-band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(248, 240, 227,0.96) 0%, rgba(248, 240, 227,0.9) 42%, rgba(248, 240, 227,0.55) 68%, rgba(24, 1, 2,0.28) 100%),
    url("/assets/img/partner-light.jpg") right center / cover no-repeat;
  min-height: 220px;
}
html[data-brand="globlematch"] .gm-partner-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 240px at 88% 50%, rgba(236,228,215,0.18), transparent 70%);
  pointer-events: none;
}
html[data-brand="globlematch"] .gm-partner-band-in { position: relative; z-index: 1; }

/* ---- section soft atmosphere images ---- */
html[data-brand="globlematch"] #how.section {
  position: relative;
  overflow: clip;
}
html[data-brand="globlematch"] #how.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(248, 240, 227,0.92), rgba(248, 240, 227,0.96)),
    url("/assets/img/section-routes.jpg") center top / cover no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
html[data-brand="globlematch"] #how.section > .container { position: relative; z-index: 1; }

html[data-brand="globlematch"] .lp-home {
  background:
    linear-gradient(135deg, rgba(24, 1, 2,0.92) 0%, rgba(24, 1, 2,0.88) 48%, rgba(24, 1, 2,0.9) 100%),
    url("/assets/img/launchpad-mosaic.jpg") center / cover no-repeat;
}

/* ---- golden hare subtle pulse ---- */
html[data-brand="globlematch"] .gh-banner-thumb img {
  animation: gm-hare-glow 3.2s ease-in-out infinite;
}
@keyframes gm-hare-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236,228,215,0.35); }
  50% { box-shadow: 0 0 0 8px rgba(236,228,215,0); }
}

/* ---- marquee-like strip energy on badges ---- */

/* ---- footer fade-in edge ---- */
html[data-brand="globlematch"] .site-footer {
  position: relative;
}
html[data-brand="globlematch"] .site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,228,215,0.55), transparent);
}

@media (max-width: 640px) {
  html[data-brand="globlematch"] .hero.hero--art { min-height: auto; }
  html[data-brand="globlematch"] .hero-art img { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-brand="globlematch"] .hero-copy .eyebrow,
  html[data-brand="globlematch"] .hero-copy h1,
  html[data-brand="globlematch"] .hero-copy .lede,
  html[data-brand="globlematch"] .hero-copy .hero-cta,
  html[data-brand="globlematch"] .hero-art,
  html[data-brand="globlematch"] .lp-home-tile,
  html[data-brand="globlematch"] .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  html[data-brand="globlematch"] .hero.hero--art::before,
  html[data-brand="globlematch"] .lp-home::after,
  html[data-brand="globlematch"] .hero h1 span,
  html[data-brand="globlematch"] .gh-banner-thumb img,
  html[data-brand="globlematch"] .hero-art::before {
    animation: none !important;
  }
}