/**
 * home-hero.css — Start splash: top-half hero crop, pointer parallax, load reveal.
 *
 * Art is scaled ~2× viewport height so the waist lands on the bottom edge:
 * top half fully visible, bottom half clipped below the fold.
 */

.c-welcome[data-aimy-splash-only] {
  --aimy-splash-ground: #E7CBFF;
  --hero-art-shift-y: 5.5vh;
  --hero-art-height: 172vh;
  --hero-art-width: min(94vw, calc(var(--hero-art-height) * 0.72));
  --hero-art-scale: 0.935;
  --hero-logo-width: min(58vw, 34rem);
  --hero-logo-scale: 1.08;
  --hero-wordmark-opacity: 0.86;
  --hero-hand-shift-x: 18px;
  --hero-hand-shift-y: 14px;
  --hero-hand-tilt: 3.4deg;
  --hero-hand-depth: 58px;
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  overflow: hidden !important;
  isolation: isolate;
  background-color: var(--aimy-splash-ground) !important;
  background-image: none !important;
}

html:has(body.spa-view-start),
body.spa-view-start {
  background-color: var(--aimy-splash-ground, #E7CBFF) !important;
}

html:has(body.spa-view-start),
body.spa-view-start {
  background-color: var(--aimy-splash-ground, #E7CBFF) !important;
}

html.spa-route-not-start:has(body.spa-view-work),
html.spa-route-not-start:has(body.spa-view-insights),
html.spa-route-not-start:has(body.spa-view-me),
html.spa-route-not-start:has(body.spa-view-contact),
html.spa-route-not-start:has(body.spa-view-work) body,
html.spa-route-not-start:has(body.spa-view-insights) body,
html.spa-route-not-start:has(body.spa-view-me) body,
html.spa-route-not-start:has(body.spa-view-contact) body {
  background-color: var(--pk-bg) !important;
}

html.spa-route-not-start .c-welcome[data-aimy-splash-only],
html.spa-route-not-start .page.home-page {
  visibility: hidden !important;
  pointer-events: none !important;
}

.c-welcome[data-aimy-splash-only] .-w {
  position: relative;
  height: 100svh;
  height: 100vh;
  min-height: 100svh;
  min-height: 100vh;
  overflow: hidden;
}

body.spa-view-start .site-header[data-aimy-chrome] .aimy-chrome-type-logo {
  display: none !important;
}

.c-welcome[data-aimy-splash-only] .-w .stone.aimy-hero-splash {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  transform-style: preserve-3d;
  perspective: 1000px;
  translate: none !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform-origin: 50% 78% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(1.01) !important;
  will-change: transform, opacity;
}

.c-welcome[data-aimy-splash-only] .-w .stone.aimy-hero-splash.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-welcome[data-aimy-splash-only] .-w .stone .aimy-hero-splash__logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  translate: -50% -50% !important;
  width: var(--hero-logo-width) !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  transform-origin: center center !important;
  transform-style: preserve-3d;
  transform: scale(var(--hero-logo-scale)) translateZ(0) !important;
  opacity: var(--hero-wordmark-opacity, 0.86);
}

.c-welcome[data-aimy-splash-only] .aimy-wordmark-holo {
  width: 100%;
  --card-opacity: 0.78;
}

.c-welcome[data-aimy-splash-only] .aimy-wordmark-holo-wrap {
  width: 100%;
  pointer-events: none;
}

.c-welcome[data-aimy-splash-only] .aimy-wordmark-holo .aimy-type-logo__sticker {
  width: 100%;
}

.c-welcome[data-aimy-splash-only] .-w .stone .aimy-hero-splash__logo .aimy-type-logo__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1557 / 1318;
  transform-style: preserve-3d;
  transform: none !important;
}

.c-welcome[data-aimy-splash-only] .-w .stone .aimy-hero-splash__base,
.c-welcome[data-aimy-splash-only] .-w .stone .aimy-hero-splash__hand {
  position: absolute !important;
  display: block !important;
  left: 50% !important;
  right: auto !important;
  top: var(--hero-art-shift-y) !important;
  bottom: auto !important;
  width: var(--hero-art-width) !important;
  height: var(--hero-art-height) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  translate: -50% 0 !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform-origin: 50% 18% !important;
  backface-visibility: hidden !important;
}

.c-welcome[data-aimy-splash-only] .-w .stone .aimy-hero-splash__hand {
  z-index: 2 !important;
  transform:
    translate3d(
      calc(var(--hand-mx, var(--mx, 0)) * -1 * var(--hero-hand-shift-x)),
      calc(var(--hand-my, var(--my, 0)) * -1 * var(--hero-hand-shift-y)),
      var(--hero-hand-depth)
    )
    rotateX(calc(var(--hand-my, var(--my, 0)) * -1 * var(--hero-hand-tilt)))
    rotateY(calc(var(--hand-mx, var(--mx, 0)) * var(--hero-hand-tilt)))
    scale(var(--hero-art-scale)) !important;
}

.c-welcome[data-aimy-splash-only] .-w .stone .aimy-hero-splash__base {
  z-index: 1 !important;
  transform:
    translate3d(calc(var(--mx, 0) * -4px), calc(var(--my, 0) * -3px), 36px)
    rotateX(calc(var(--my, 0) * -0.9deg))
    rotateY(calc(var(--mx, 0) * 0.9deg))
    scale(var(--hero-art-scale)) !important;
}

.aimy-splash-tagline {
  position: absolute;
  left: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left, 0px));
  bottom: max(clamp(1rem, 3vh, 2rem), env(safe-area-inset-bottom, 0px));
  z-index: 4;
  margin: 0;
  max-width: min(22rem, 58vw);
  font-family: var(--spa-font-sans, "DM Sans", "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: clamp(0.6875rem, 1.55vw, 0.8125rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  letter-spacing: 0.045em;
  color: color-mix(in srgb, var(--pk-text) 68%, transparent);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.aimy-splash-tagline.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .c-welcome[data-aimy-splash-only] {
    --hero-art-shift-y: 6.5vh;
    --hero-art-height: 174vh;
    --hero-art-width: min(92vw, calc(var(--hero-art-height) * 0.72));
    --hero-logo-width: min(52vw, 36rem);
    --hero-logo-scale: 1.02;
    --hero-hand-shift-x: 20px;
    --hero-hand-shift-y: 16px;
    --hero-hand-tilt: 3.8deg;
  }
}

@media (max-width: 767px) {
  .c-welcome[data-aimy-splash-only] {
    --hero-art-shift-y: 5vh;
    --hero-art-height: 166vh;
    --hero-art-width: min(96vw, calc(var(--hero-art-height) * 0.72));
    --hero-logo-width: min(88vw, 26rem);
    --hero-logo-scale: 0.96;
    --hero-hand-shift-x: 16px;
    --hero-hand-shift-y: 13px;
    --hero-hand-tilt: 3deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-welcome[data-aimy-splash-only] .-w .stone.aimy-hero-splash,
  .c-welcome[data-aimy-splash-only] .-w .stone.aimy-hero-splash.is-revealed {
    transition: none;
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .c-welcome[data-aimy-splash-only] .-w .stone .aimy-hero-splash__base,
  .c-welcome[data-aimy-splash-only] .-w .stone .aimy-hero-splash__hand {
    transform: scale(var(--hero-art-scale)) !important;
  }

  .aimy-splash-tagline {
    transition: none;
  }
}

body.spa-view-start {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (prefers-color-scheme: dark) {
  .c-welcome[data-aimy-splash-only] {
    --aimy-splash-ground: var(--pk-bg);
  }

  html:has(body.spa-view-start),
  body.spa-view-start,
  .c-welcome[data-aimy-splash-only] {
    background-color: var(--pk-bg) !important;
  }
}