/*
 * XANY UI Contract Core — Home Hero visual paint.
 * Shell owns: grid geometry, overflow, min-height, padding, view routing.
 * UI owns: typography, character visual, animations, button skin in hero context.
 */

/* ========================================================
   TYPOGRAPHY — h1, em gradient, paragraph
   ======================================================== */

.xany-home-hero-view[data-xany-hero-view="home"] h1 {
  max-width: 790px;
  font-size: clamp(50px, 5.35vw, 84px);
  line-height: .89;
  letter-spacing: clamp(-3.2px, -.18vw, -1.4px);
  text-wrap: balance;
}

.xany-home-hero-view[data-xany-hero-view="home"] h1 em {
  position: relative;
  display: inline-block;
  color: transparent;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 54%, #1eb9ff 120%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 18px 34px rgba(109,40,217,.12);
}

.xany-home-hero-view[data-xany-hero-view="home"] p {
  max-width: 700px;
  margin-top: clamp(20px, 1.7vw, 28px);
  color: #65748b;
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.58;
  letter-spacing: -.01em;
}

/* ========================================================
   BUTTON SKIN — hero context overrides
   ======================================================== */

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-btn {
  min-height: 56px;
  padding: 15px 23px;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(15,23,42,.06);
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-btn-primary {
  box-shadow: 0 22px 42px rgba(109,40,217,.24), inset 0 1px 0 rgba(255,255,255,.20);
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-btn-secondary,
.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-btn-soft {
  background: rgba(255,255,255,.88);
  border-color: rgba(139,92,246,.18);
  box-shadow: 0 14px 30px rgba(15,23,42,.05);
}

/* ========================================================
   COPY-CLEAN — visual skin + h1 + em + actions
   ======================================================== */

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-copy-clean {
  position: relative;
  align-self: start;
  z-index: 5;
  max-width: 820px;
  padding-top: clamp(64px, 5.1vw, 108px);
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-copy-clean h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(50px, 4.85vw, 86px);
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-copy-clean h1 em {
  color: transparent;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 52%, #1eb9ff 120%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  line-height: 1.08;
  padding-bottom: .08em;
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-actions-clean {
  margin-top: clamp(32px, 3.1vw, 54px);
  gap: 16px;
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-actions-clean .xany-home-btn {
  min-height: 60px;
  padding: 17px 26px;
  border-radius: 19px;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -.01em;
  box-shadow: 0 16px 32px rgba(15, 23, 42, .07);
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-actions-clean .xany-home-btn-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  box-shadow:
    0 24px 48px rgba(109, 40, 217, .28),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-actions-clean .xany-home-btn-secondary {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(139,92,246,.18);
  color: #6d28d9;
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-actions-clean .xany-home-btn:hover {
  transform: translateY(-3px);
}

/* ========================================================
   CHARACTER VISUAL — contenedor + sombra de suelo
   ======================================================== */

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-character-visual {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: end center;
  min-height: clamp(700px, 52vw, 920px);
  margin-right: clamp(-54px, -2.5vw, -20px);
  transform: translate3d(clamp(-78px, -4.4vw, -38px), clamp(38px, 3.2vw, 68px), 0);
  overflow: visible;
  isolation: isolate;
}

.xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-character-visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 8%;
  right: 4%;
  bottom: clamp(8px, 1.3vw, 22px);
  height: clamp(28px, 4vw, 62px);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, .22), rgba(15, 23, 42, 0) 68%);
  filter: blur(12px);
  pointer-events: none;
}

/* ========================================================
   CHARACTER STAGE + SLIDE + IMG
   ======================================================== */

.xany-home-character-stage {
  position: relative;
  z-index: 2;
  width: min(112%, 1040px);
  height: clamp(690px, 51vw, 910px);
  margin-left: clamp(-34px, -2vw, -10px);
  overflow: visible;
  pointer-events: none;
}

.xany-home-character-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: end center;
  opacity: 0;
  transform: translate3d(44px, 72px, 0) scale(.95) rotate(.65deg);
  filter: blur(12px) saturate(.94);
  transition:
    opacity .78s cubic-bezier(.18, .82, .22, 1),
    transform .78s cubic-bezier(.18, .82, .22, 1),
    filter .78s cubic-bezier(.18, .82, .22, 1);
  backface-visibility: hidden;
}

.xany-home-character-slide.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  filter: none;
}

.xany-home-character-slide.is-leaving {
  opacity: 0;
  transform: translate3d(-42px, 82px, 0) scale(.955) rotate(-.7deg);
  filter: blur(14px) saturate(.9);
}

.xany-home-character-slide img {
  --xany-char-x: -7.6%;
  --xany-char-y: 52px;
  --xany-char-scale: 1.36;
  --xany-char-float-x: -8.05%;
  --xany-char-float-y: 43px;
  --xany-char-float-scale: 1.372;
  --xany-char-enter-x: -1.2%;
  --xany-char-enter-y: 92px;
  --xany-char-enter-scale: 1.26;
  --xany-char-overshoot-x: -8.2%;
  --xany-char-overshoot-y: 42px;
  --xany-char-overshoot-scale: 1.378;
  display: block;
  width: min(112%, 1040px);
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: translate3d(var(--xany-char-x), var(--xany-char-y), 0) scale(var(--xany-char-scale));
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: transform;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 30px 42px rgba(15, 23, 42, .20))
    drop-shadow(0 0 34px rgba(139, 92, 246, .18));
}

.xany-home-character-slide.is-active img {
  animation: xanyHomeCharacterFloat 7.6s ease-in-out .42s infinite;
}

.xany-home-character-stage.is-changing .xany-home-character-slide.is-active img {
  animation:
    xanyHomeCharacterEnter .78s cubic-bezier(.18, .82, .22, 1) both,
    xanyHomeCharacterFloat 7.6s ease-in-out 1.04s infinite;
}

@keyframes xanyHomeCharacterFloat {
  0%, 100% { transform: translate3d(var(--xany-char-x), var(--xany-char-y), 0) scale(var(--xany-char-scale)); }
  50%       { transform: translate3d(var(--xany-char-float-x), var(--xany-char-float-y), 0) scale(var(--xany-char-float-scale)); }
}

@keyframes xanyHomeCharacterEnter {
  0% {
    transform: translate3d(var(--xany-char-enter-x), var(--xany-char-enter-y), 0) scale(var(--xany-char-enter-scale));
    filter:
      saturate(.96)
      contrast(1.02)
      drop-shadow(0 22px 28px rgba(15, 23, 42, .14));
  }
  70% {
    transform: translate3d(var(--xany-char-overshoot-x), var(--xany-char-overshoot-y), 0) scale(var(--xany-char-overshoot-scale));
  }
  100% {
    transform: translate3d(var(--xany-char-x), var(--xany-char-y), 0) scale(var(--xany-char-scale));
  }
}

/* ========================================================
   RESPONSIVE
   ======================================================== */

@media (max-width: 1480px) {
  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-copy-clean h1 {
    font-size: clamp(48px, 4.65vw, 74px);
    line-height: 1.04;
  }

  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-character-visual {
    min-height: clamp(640px, 51vw, 820px);
    transform: translate3d(clamp(-58px, -3.8vw, -30px), clamp(34px, 3vw, 56px), 0);
  }

  .xany-home-character-stage {
    width: min(112%, 960px);
    height: clamp(630px, 50vw, 810px);
  }

  .xany-home-character-slide img {
    --xany-char-x: -7.0%;
    --xany-char-y: 50px;
    --xany-char-scale: 1.32;
    --xany-char-float-x: -7.45%;
    --xany-char-float-y: 42px;
    --xany-char-float-scale: 1.332;
    --xany-char-enter-x: -1.0%;
    --xany-char-enter-y: 86px;
    --xany-char-enter-scale: 1.235;
    --xany-char-overshoot-x: -7.6%;
    --xany-char-overshoot-y: 41px;
    --xany-char-overshoot-scale: 1.338;
    width: min(112%, 960px);
  }
}

@media (max-width: 1180px) {
  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-copy-clean {
    max-width: 860px;
  }

  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-character-visual {
    min-height: clamp(560px, 72vw, 740px);
    margin-right: 0;
    transform: translate3d(0, 24px, 0);
  }

  .xany-home-character-stage {
    width: min(100%, 860px);
    height: clamp(550px, 72vw, 720px);
    margin-left: 0;
  }

  .xany-home-character-slide img {
    --xany-char-x: -3.2%;
    --xany-char-y: 42px;
    --xany-char-scale: 1.20;
    --xany-char-float-x: -3.65%;
    --xany-char-float-y: 35px;
    --xany-char-float-scale: 1.214;
    --xany-char-enter-x: 1.4%;
    --xany-char-enter-y: 70px;
    --xany-char-enter-scale: 1.12;
    --xany-char-overshoot-x: -4.0%;
    --xany-char-overshoot-y: 34px;
    --xany-char-overshoot-scale: 1.22;
    width: min(100%, 860px);
  }
}

@media (max-width: 780px) {
  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-copy-clean h1 {
    font-size: clamp(42px, 12vw, 62px);
    line-height: .9;
  }

  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-actions-clean {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-actions-clean .xany-home-btn {
    width: 100%;
    min-height: 56px;
  }

  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-character-visual {
    min-height: clamp(470px, 104vw, 640px);
    transform: translate3d(0, 8px, 0);
  }

  .xany-home-character-stage {
    height: clamp(460px, 104vw, 620px);
  }

  .xany-home-character-slide,
  .xany-home-character-slide.is-leaving {
    transform: translate3d(18px, 24px, 0) scale(.98);
    filter: blur(8px);
  }

  .xany-home-character-slide.is-active {
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
  }

  .xany-home-character-slide img {
    transform: translate3d(0, 18px, 0) scale(1.10);
  }

  .xany-home-character-slide.is-active img,
  .xany-home-character-stage.is-changing .xany-home-character-slide.is-active img {
    animation: none;
  }
}

@media (max-width: 520px) {
  .xany-home-hero-view[data-xany-hero-view="home"] .xany-home-hero-character-visual {
    min-height: 440px;
  }

  .xany-home-character-stage {
    height: 430px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xany-home-character-slide,
  .xany-home-character-slide img,
  .xany-home-character-slide.is-active img,
  .xany-home-character-stage.is-changing .xany-home-character-slide.is-active img {
    animation: none;
    transition: none;
  }
}