/* =====================================================================
   DataMagic – home (2026) "Precision Field" hero + scroll choreography
   Homepage-scoped. Loaded only by index.html / en/ / de/ .
   Dark-purple brand. Always-on circle+hand motif. Lenis-driven page.
   ===================================================================== */

.home-hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background-color: var(--bg);
  z-index: 1;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(139,121,250,.22), transparent 60%),
    radial-gradient(90% 80% at 80% 110%, rgba(45,220,177,.10), transparent 60%),
    var(--bg);
}

.home-hero__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
  display: block;
  pointer-events: none;
  opacity: .45;
  animation: heroImgIn 1s ease both, heroFloat 8s ease-in-out infinite;
}
@keyframes heroImgIn { from { opacity: 0; } to { opacity: .45; } }
@keyframes heroFloat { 0%, 100% { transform: translateY(-42px); } 50% { transform: translateY(-30px); } }

.home-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity .9s ease;
  animation: heroFloat 8s ease-in-out infinite;
}
.home-hero__canvas.is-live { opacity: 1; }

.home-hero.is-imageonly .home-hero__canvas { display: none; }
.home-hero.is-imageonly .home-hero__img { --mr: 0px !important; opacity: 1; }

/* Centre-text scrim band: darkens the text column, keeps wheel/hand glow. */
.home-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(120% 52% at 50% 56%, rgba(7,7,26,.62) 0%, rgba(7,7,26,.30) 46%, transparent 72%),
    linear-gradient(180deg, rgba(7,7,26,.42) 0%, transparent 26% 58%, var(--bg) 100%);
}

.home-hero__content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  pointer-events: none;
}
.home-hero__content a,
.home-hero__content .hero-badges { pointer-events: auto; }

.home-hero .hero-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1.4rem;
}

.home-hero h1 {
  font-size: clamp(2.5rem, 7.2vw, 5.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.home-hero h1 .accent {
  position: relative;
  color: var(--primary);
  white-space: nowrap;
}
.home-hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.02em;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.8,.2,1) .55s;
}
.home-hero.is-ready h1 .accent::after { transform: scaleX(1); }

.home-hero .hero-lead {
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  line-height: 1.6;
  color: var(--primary-2);
  max-width: 620px;
  margin: 0 auto 2rem;
}

.home-hero h1 { text-shadow: 0 2px 22px rgba(7,7,26,.65), 0 1px 2px rgba(7,7,26,.5); }
.home-hero .hero-lead { text-shadow: 0 1px 12px rgba(7,7,26,.7); }
.home-hero .hero-badge { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.home-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* mask reveal: each block clips up into place on load */
.home-hero__reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(.2,.8,.2,1);
}
.home-hero.is-ready .home-hero__reveal {
  opacity: 1;
  transform: none;
}
.home-hero.is-ready .home-hero__reveal:nth-child(2) { transition-delay: .08s; }
.home-hero.is-ready .home-hero__reveal:nth-child(3) { transition-delay: .18s; }
.home-hero.is-ready .home-hero__reveal:nth-child(4) { transition-delay: .28s; }

/* scroll cue */
.home-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  transition: opacity .4s ease;
}
.home-hero__cue span {
  display: inline-block;
  animation: heroCueBob 1.8s ease-in-out infinite;
}
.home-hero.is-scrolled .home-hero__cue { opacity: 0; }
@keyframes heroCueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* =====================================================================
   Scroll-reveal choreography for the page below the hero
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .9s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal="scale"]   { transform: translateY(34px) scale(.96); }
[data-reveal="scale"].is-in { transform: none; }
[data-reveal="left"]    { transform: translateX(-40px); }
[data-reveal="left"].is-in  { transform: none; }
[data-reveal="right"]   { transform: translateX(40px); }
[data-reveal="right"].is-in { transform: none; }

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .7s cubic-bezier(.2,.8,.2,1),
    transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal-group].is-in > * {
  opacity: 1;
  transform: none;
}

/* magnetic CTA – JS nudges --mx/--my, CSS rides the spring */
.btn.is-magnetic {
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s, border-color .2s, color .2s;
  will-change: transform;
}

/* =====================================================================
   Responsive + accessibility
   ===================================================================== */
@media (max-width: 760px) {
  .home-hero { height: 100svh; min-height: 560px; }
  .home-hero h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__reveal,
  .home-hero h1 .accent::after,
  [data-reveal],
  [data-reveal-group] > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .home-hero__cue span { animation: none; }
  .home-hero__canvas { transition: none; display: none; }
  .home-hero__img { --mr: 0px !important; animation: none; opacity: 1; }
}