/* #what — hub animado (home) */
.home-what {
  position: relative;
  overflow: hidden;
}

.home-what__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.home-what__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.45;
  animation: what-orb-drift 18s ease-in-out infinite alternate;
}
.home-what__orb--a {
  width: min(42vw, 420px);
  height: min(42vw, 420px);
  top: -8%;
  right: -6%;
  background: rgba(239, 90, 110, 0.14);
}
.home-what__orb--b {
  width: min(36vw, 360px);
  height: min(36vw, 360px);
  bottom: -12%;
  left: -8%;
  background: rgba(14, 23, 54, 0.08);
  animation-delay: -6s;
}

.home-what > .wrap {
  position: relative;
  z-index: 1;
}

.home-what__photo {
  overflow: visible;
}
.home-what__photo img {
  position: relative;
  z-index: 1;
}
.home-what__hub-ring {
  position: absolute;
  inset: 10% 4% 10% 18%;
  border-radius: 50%;
  border: 2px solid rgba(239, 90, 110, 0.22);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.home-what__hub-ring::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px dashed rgba(14, 23, 54, 0.14);
  animation: what-spin 32s linear infinite;
}
.home-what.is-live .home-what__hub-ring {
  opacity: 1;
  transform: scale(1);
  animation: what-pulse-ring 3.6s ease-in-out infinite;
}

.home-what__chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  font-family: "Space Grotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--t-strong);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.home-what__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-tint);
  flex: none;
}
.home-what__chip--1 { top: 10%; right: 2%; transition-delay: 0.15s; }
.home-what__chip--2 { bottom: 16%; left: -4%; transition-delay: 0.28s; }
.home-what__chip--3 { top: 44%; right: -8%; transition-delay: 0.4s; }
.home-what.is-live .home-what__chip {
  opacity: 1;
  transform: none;
  animation: what-float 4.8s ease-in-out infinite;
}
.home-what.is-live .home-what__chip--2 { animation-delay: 0.7s; }
.home-what.is-live .home-what__chip--3 { animation-delay: 1.4s; }

/* Flow marquee */
.home-what__flow {
  margin: clamp(18px, 2.5vw, 28px) 0 clamp(22px, 3vw, 34px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-what__flow-inner {
  display: flex;
  width: max-content;
  animation: what-flow-marquee 36s linear infinite;
}
.home-what__flow:hover .home-what__flow-inner {
  animation-play-state: paused;
}
.home-what__flow-track {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding-right: clamp(12px, 2vw, 18px);
}
.home-what__flow-item {
  flex: none;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  font-family: "Space Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t-strong);
  letter-spacing: 0.01em;
}

/* Connector + cards */
.home-what__matrix {
  position: relative;
}
.home-what__svg {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  width: 100%;
  height: 72px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
@media (min-width: 901px) {
  .home-what__svg { display: block; }
}
.home-what__path {
  fill: none;
  stroke: rgba(239, 90, 110, 0.35);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.home-what__path--mid { stroke: rgba(14, 23, 54, 0.16); }
.home-what.is-live .home-what__path { stroke-dashoffset: 0; }
.home-what.is-live .home-what__path--l { transition-delay: 0.08s; }
.home-what.is-live .home-what__path--mid { transition-delay: 0.18s; }
.home-what.is-live .home-what__path--r { transition-delay: 0.28s; }

.home-what__grid {
  position: relative;
  z-index: 1;
}
.home-what__card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease),
    border-color 0.45s ease;
}
.home-what__card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent, rgba(239, 90, 110, 0.55), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.home-what__card.is-spot {
  transform: translateY(-6px);
  border-color: rgba(239, 90, 110, 0.28);
  box-shadow: 0 14px 36px rgba(14, 23, 54, 0.1), 0 4px 14px rgba(239, 90, 110, 0.12);
}
.home-what__card.is-spot::after {
  opacity: 1;
  animation: what-shimmer 2.4s ease-in-out infinite;
}
.home-what__card:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 23, 54, 0.12);
  box-shadow: var(--sh);
}

.home-what__step {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--orange), var(--orange-600));
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--sh-orange);
}

.home-what__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(18px, 2.5vw, 24px);
}
.home-what__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line-2);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s ease, width 0.25s var(--ease);
}
.home-what__dot.is-on {
  width: 22px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--orange), var(--orange-600));
}

@keyframes what-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-24px, 18px) scale(1.08); }
}
@keyframes what-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes what-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 90, 110, 0.18); }
  50% { box-shadow: 0 0 0 10px rgba(239, 90, 110, 0); }
}
@keyframes what-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes what-flow-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes what-shimmer {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (max-width: 900px) {
  .home-what__chip--3 { right: 0; }
  .home-what__dots { margin-top: 16px; }
}