/* Homepage Hero 4: transparent canvas, layered toolbox, and service-icon landing cells. */
.hero--toolbox-sequence {
  --hero-inline: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
  align-items: center;
  gap: clamp(24px, 3vw, 52px);
  min-height: 100svh;
  padding: calc(var(--nav-h) + 28px) var(--hero-inline) 28px;
  overflow-x: clip;
  overflow-y: visible;
  background:
    radial-gradient(
      ellipse 70% 120% at 100% 42%,
      oklch(32% 0.16 292) 0%,
      oklch(20% 0.10 290) 48%,
      transparent 78%
    ),
    var(--bg);
}

.hero--toolbox-sequence::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-color: transparent;
  background-image: url("../media/header-backgrounds/image-gen-2(20260919-224358)-hero.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  opacity: 0.48;
  -webkit-mask-image: radial-gradient(
    ellipse 54% 72% at 18% 48%,
    rgb(0 0 0 / 0.68) 0%,
    rgb(0 0 0 / 0.68) 44%,
    #000 78%
  );
  mask-image: radial-gradient(
    ellipse 54% 72% at 18% 48%,
    rgb(0 0 0 / 0.68) 0%,
    rgb(0 0 0 / 0.68) 44%,
    #000 78%
  );
  pointer-events: none;
}

.hero--toolbox-sequence .hero__content {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero--toolbox-sequence .hero__content-inner {
  max-width: 600px;
}

.hero--toolbox-sequence .hero__content::before {
  display: none;
}

.hero--toolbox-sequence .hero__scroll {
  display: none;
}

.hero--toolbox-sequence .hero__title {
  font-size: clamp(2.76rem, 1.656rem + 5.52vw, 6.9rem);
  font-weight: 750;
}

@media (min-width: 901px) {
  html[data-site-lang="es"] .hero--toolbox-sequence .hero__title {
    max-width: none;
    font-size: clamp(1.2rem, 2.25vw, 1.8rem);
    line-height: 0.98;
    white-space: nowrap;
  }
}

.hero--toolbox-sequence .spill-scene {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: min(100%, 680px);
  min-width: 0;
  aspect-ratio: 1448 / 1086;
}

.hero--toolbox-sequence .spill-scene::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 76%;
  right: 4%;
  width: 54%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, oklch(0% 0 0 / 0.42), transparent 70%);
  opacity: 0.22;
  transform: scaleX(0.96);
  transform-origin: center;
  pointer-events: none;
}

.hero--toolbox-sequence .spill-entry {
  position: absolute;
  z-index: 2;
  top: 24%;
  left: 22%;
  width: 76%;
  aspect-ratio: 1448 / 1086;
  isolation: isolate;
  transform-origin: 62% 100%;
}

.hero--toolbox-sequence .spill-box {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: 1448 / 1086;
  isolation: isolate;
  transform-origin: 62% 58%;
}

.hero--toolbox-sequence .spill-box__back,
.hero--toolbox-sequence .spill-box__front {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hero--toolbox-sequence .spill-box__back { z-index: 1; }
.hero--toolbox-sequence .spill-box__front { z-index: 5; }

.hero--toolbox-sequence .spill-tool {
  position: absolute;
  z-index: 2;
  left: var(--tool-x);
  top: var(--tool-y);
  width: var(--tool-width);
  height: auto;
  transform: translate(var(--move-x, 0px), var(--move-y, 0px)) rotate(var(--tool-rotation, 0deg));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hero--toolbox-sequence .spill-tool--training {
  --tool-x: 2.2%;
  --tool-y: 18%;
  --tool-width: 33%;
  --move-x: -2px;
  --move-y: -6px;
}

.hero--toolbox-sequence .spill-tool--chart {
  --tool-x: 21.6%;
  --tool-y: 21.8%;
  --tool-width: 24.9%;
  --move-x: 2px;
}

.hero--toolbox-sequence .spill-tool--magnifier {
  --tool-x: 29.1%;
  --tool-y: 38.5%;
  --tool-width: 22%;
  --move-y: 2px;
}

.hero--toolbox-sequence .spill-tool--store {
  --tool-x: 37.8%;
  --tool-y: 29%;
  --tool-width: 35.9%;
  --tool-rotation: 14deg;
}

.hero--toolbox-sequence .spill-tool--speaking {
  --tool-x: 50.3%;
  --tool-y: 37.8%;
  --tool-width: 28.2%;
}

.hero--toolbox-sequence .spill-tool--planner {
  --tool-x: 66%;
  --tool-y: 39%;
  --tool-width: 31%;
  --tool-rotation: 58deg;
}

.hero--toolbox-sequence .spill-scene.is-arriving .spill-entry,
.hero--toolbox-sequence .spill-scene.is-arriving .spill-tool {
  will-change: transform, translate, rotate;
}

.hero--toolbox-sequence .spill-scene.is-arriving::after {
  animation: homepage-spill-impact-shadow 1050ms linear both;
}

.hero--toolbox-sequence.is-running .spill-box {
  will-change: transform;
}

.hero--toolbox-sequence.is-running .spill-tool {
  will-change: transform, opacity;
}

@keyframes homepage-spill-impact-shadow {
  0%, 8% { opacity: 0.03; transform: scaleX(0.5); }
  55% { opacity: 0.13; transform: scaleX(0.74); }
  64% { opacity: 0.38; transform: scaleX(1.04); }
  76% { opacity: 0.18; transform: scaleX(0.86); }
  86% { opacity: 0.31; transform: scaleX(1); }
  93% { opacity: 0.2; transform: scaleX(0.92); }
  100% { opacity: 0.22; transform: scaleX(0.96); }
}

.homepage-services {
  position: relative;
  z-index: 1;
}

.homepage-services .svc-list--home {
  gap: 0;
  border-color: #000;
  background: #000;
}

.homepage-services .svc-list--home .svc-item {
  --home-card-surface: #000;
}

.homepage-services .svc-list--home .svc-item.reveal {
  --home-reveal-delay: 0ms;
  opacity: 1;
  transform: none;
}

.homepage-services .svc-list--home .svc-item.reveal-d2 { --home-reveal-delay: 160ms; }
.homepage-services .svc-list--home .svc-item.reveal-d3 { --home-reveal-delay: 240ms; }
.homepage-services .svc-list--home .svc-item.reveal-d4 { --home-reveal-delay: 320ms; }
.homepage-services .svc-list--home .svc-item.reveal-d5 { --home-reveal-delay: 400ms; }
.homepage-services .svc-list--home .svc-item.reveal-d6 { --home-reveal-delay: 480ms; }

.homepage-services .svc-list--home .svc-item.reveal > .svc-item__left,
.homepage-services .svc-list--home .svc-item.reveal > .svc-item__tool {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-slower) var(--ease-out-expo) var(--home-reveal-delay),
    transform var(--dur-slower) var(--ease-out-expo) var(--home-reveal-delay);
}

.homepage-services .svc-list--home .svc-item.reveal.visible > .svc-item__left,
.homepage-services .svc-list--home .svc-item.reveal.visible > .svc-item__tool {
  opacity: 1;
  transform: none;
}

.homepage-services .svc-list--home .svc-item:hover,
.homepage-services .svc-list--home .svc-item:focus-within {
  --home-card-surface: var(--surface-high);
}

.homepage-services .svc-list--home .svc-item__tool {
  position: relative;
  z-index: 0;
  display: grid;
  grid-row: 2;
  min-width: 0;
  place-items: center;
  padding: 4px 22px 18px;
  background: var(--home-card-surface);
  transition:
    opacity var(--dur-slower) var(--ease-out-expo) var(--home-reveal-delay, 0ms),
    transform var(--dur-slower) var(--ease-out-expo) var(--home-reveal-delay, 0ms),
    background-color var(--dur-base);
}

.homepage-services .svc-list--home .svc-item__tool::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--home-card-surface) 20%, transparent), var(--home-card-surface) 78%);
  pointer-events: none;
}

.homepage-services .svc-list--home .svc-item__tool img {
  --result-scale: 1;
  position: relative;
  display: block;
  width: min(60%, 190px);
  height: 138px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px oklch(0% 0 0 / 0.32));
  opacity: 1;
  transform: scale(var(--result-scale));
  pointer-events: none;
  user-select: none;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.homepage-services .svc-list--home .svc-item:hover .svc-item__tool img,
.homepage-services .svc-list--home .svc-item:focus-within .svc-item__tool img {
  transform: scale(calc(var(--result-scale) + 0.04));
}

.hero--toolbox-sequence.is-scroll-linked + .homepage-services .svc-item__tool img {
  opacity: 0;
  transition: none;
}

@media (min-width: 901px) {
  .hero--toolbox-sequence {
    --hero-inline: max(24px, calc((100vw - var(--max-w)) / 2 + var(--gutter) - 150px));
  }

  .hero--toolbox-sequence .spill-entry {
    top: calc(24% - 60px);
    left: calc(4% + 40px);
    width: 111%;
  }

  .hero--toolbox-sequence .spill-tool--planner {
    --tool-x: 64.5%;
    --tool-y: 36.5%;
  }
}

@media (min-width: 769px) {
  .homepage-services .svc-list--home {
    border-color: var(--border);
    background: #000;
  }

  .homepage-services .svc-list--home .svc-item {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .homepage-services .svc-list--home .svc-item:nth-child(2n) {
    border-right: 0;
  }

  .homepage-services .svc-list--home .svc-item:nth-child(n + 5) {
    border-bottom: 0;
  }
}

@media (min-width: 1025px) {
  .homepage-services .svc-list--home .svc-item:nth-child(3n) {
    border-right: 0;
  }

  .homepage-services .svc-list--home .svc-item:nth-child(n + 4) {
    border-bottom: 0;
  }
}

@media (max-width: 900px) {
  .hero--toolbox-sequence::before {
    background-position: 56% center;
    opacity: 0.42;
  }

  .hero--toolbox-sequence {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 48px);
    padding-bottom: 24px;
  }

  .hero--toolbox-sequence .hero__content {
    grid-column: 1;
    grid-row: 1;
  }

  .hero--toolbox-sequence .hero__content-inner {
    max-width: 680px;
  }

  .hero--toolbox-sequence .spill-scene {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 620px);
  }
}

@media (max-width: 768px) {
  .hero--toolbox-sequence {
    --hero-inline: var(--gutter);
    min-height: auto;
  }

  .hero--toolbox-sequence .hero__title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  html[data-site-lang="es"] .hero--toolbox-sequence .hero__title {
    font-size: clamp(1.45rem, 7.2vw, 3rem);
  }

  .homepage-services .svc-list--home .svc-item {
    grid-template-rows: auto 108px;
  }

  .homepage-services .svc-list--home .svc-item__tool {
    padding: 0 16px 12px;
  }

  .homepage-services .svc-list--home .svc-item__tool img {
    width: min(50%, 150px);
    height: 96px;
  }
}

@media (max-width: 420px) {
  .hero--toolbox-sequence {
    padding-top: calc(var(--nav-h) + 18px);
    padding-inline: 16px;
    padding-bottom: 16px;
    overflow-x: clip;
  }

  .hero--toolbox-sequence .hero__title {
    max-width: 100%;
    margin-bottom: 16px;
    font-size: clamp(2.2rem, 11vw, 2.7rem);
    line-height: 0.98;
  }

  html[data-site-lang="es"] .hero--toolbox-sequence .hero__title {
    font-size: clamp(1.6rem, 7.95vw, 2.18rem);
  }

  .hero--toolbox-sequence .hero__sub {
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.5;
  }

  .hero--toolbox-sequence .hero__actions {
    gap: 8px;
  }

  .hero--toolbox-sequence .spill-scene {
    width: 94%;
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-services .svc-list--home .svc-item.reveal > .svc-item__left,
  .homepage-services .svc-list--home .svc-item.reveal > .svc-item__tool {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero--toolbox-sequence .spill-scene::after {
    animation: none !important;
  }
}

@media (scripting: none) {
  .homepage-services .svc-list--home .svc-item.reveal > .svc-item__left,
  .homepage-services .svc-list--home .svc-item.reveal > .svc-item__tool {
    opacity: 1;
    transform: none;
    transition: none;
  }
}