/* Project labels travel with the tiles; their details escape the clipped orbit. */
.creator-hero { overflow: clip; }
.hero-tile__content {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  user-select: none;
  text-align: center;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hero-tile__visual, .hero-tile__frame { display: block; }
.hero-tile__visual img { -webkit-user-drag: none; }
.hero-tile__content .hero-chat { display: flex; text-align: left; }
.hero-tile__content .hero-brand { display: flex; }
.hero-tile__content .hero-spark { display: grid; }
.hero-tile__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  min-height: 30px;
  padding: 6px 11px;
  margin: 10px auto 0;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 80%, white);
  border-radius: 30px;
  background: var(--tile-accent, #d4c3ff);
  color: #171324;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 5px 18px #0004;
  transition: background 160ms ease, border-color 160ms ease;
}
.is-project-active .hero-tile__label {
  background: color-mix(in srgb, var(--tile-accent, #d4c3ff) 78%, white);
  border-color: #ffffffa6;
}
.is-project-active .hero-tile__frame {
  border-color: var(--tile-accent, #d4c3ff);
  box-shadow: 0 12px 36px #0005, 0 0 24px color-mix(in srgb, var(--tile-accent) 16%, transparent);
}
.creator-hero .hero-tile__content:focus-visible { outline: none; }
.hero-tile__content:focus-visible .hero-tile__frame { outline: 3px solid var(--tile-accent); outline-offset: 4px; }
.hero-tile--soran { --tile-width: clamp(165px, 15vw, 220px); --tile-rotation: -7deg; left: 3%; top: 51%; }
.hero-soran { display: grid !important; place-items: center; background: #100e0b; border-color: #b0864d60; }
.hero-soran > img { width: 88%; height: 88%; object-fit: contain; }
.hero-tile.is-keyboard-focus {
  z-index: 4;
  inset: 0 auto auto 0 !important;
  opacity: 1 !important;
  transform: translate3d(var(--project-focus-x), var(--project-focus-y), 0) !important;
}
.creator-hero.is-project-keyboard .creator-hero__orbit { z-index: 4; }

.hero-tile-tooltip {
  position: fixed;
  z-index: 1050;
  width: 288px;
  max-width: calc(100vw - 32px);
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--tile-accent, #c9b8f3) 45%, transparent);
  border-radius: 13px;
  background: #1d172afa;
  box-shadow: 0 14px 38px #0005;
  color: #f9f4ff;
  pointer-events: none;
  font: 400 13px/1.6 var(--font-sans);
}
.hero-tile-tooltip p { margin: 0; }
.hero-tile-tooltip .hero-tile-tooltip__title { margin-bottom: 12px; color: #fffaf5; font-size: 14px; font-weight: 650; line-height: 1.3; }
.hero-tile-tooltip .hero-tile-tooltip__detail { color: #e6deed; }
.hero-tile-tooltip .hero-tile-tooltip__detail + .hero-tile-tooltip__detail { margin-top: 10px; }
.hero-tile-tooltip mark { position: relative; isolation: isolate; display: inline-block; padding: 0 .2em; margin-inline: .03em; background: none; color: #21182c; font-weight: 700; line-height: 1.45; }
.hero-tile-tooltip mark::before { content: ''; position: absolute; z-index: -1; inset: .07em -.05em .01em; background: var(--tile-accent, #dec3ff); transform: rotate(-1.5deg); clip-path: polygon(1% 8%, 98% 0, 100% 86%, 3% 100%, 0 71%); }
.hero-tile-tooltip__detail:nth-of-type(3) mark::before { transform: rotate(.8deg); background: #bbd9bb; }
.hero-tile-tooltip[hidden] { display: none; }

@media (max-width: 960px) {
  .hero-tile--soran { --tile-width: 140px; left: 7%; top: 35%; }
}
@media (max-width: 600px) {
  .hero-tile--soran { --tile-width: 112px; left: -15px; top: 36%; }
  .hero-tile__label { gap: 5px; min-height: 26px; margin-top: 7px; padding: 5px 8px; font-size: 10px; }
  .hero-tile--brand, .hero-tile--spark { --tile-width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tile__label { transition: none; }
}
/* Static fallback at every width: the new, larger tiles must not fall back to
   the old absolute positions, where they cover the headline and each other. */
.creator-hero:not(.is-orbit-ready):not(.is-orbit-initializing) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.creator-hero:not(.is-orbit-ready):not(.is-orbit-initializing) .creator-hero__copy {
  order: 0;
  width: 100%;
  padding: 112px 20px 24px;
}
.creator-hero:not(.is-orbit-ready):not(.is-orbit-initializing) .creator-hero__orbit {
  position: relative;
  inset: auto;
  order: 1;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 24px 24px 36px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 24px;
  touch-action: auto;
  pointer-events: auto;
  clip-path: none;
}
.creator-hero:not(.is-orbit-ready):not(.is-orbit-initializing) .hero-tile {
  position: relative;
  inset: auto !important;
  flex: 0 0 var(--tile-width);
  scroll-snap-align: start;
  opacity: 1 !important;
  transform: none !important;
}
.creator-hero:not(.is-orbit-ready):not(.is-orbit-initializing) .hero-tile__float { transform: none; }
@media (forced-colors: active) {
  .hero-tile__label, .hero-tile-tooltip { border: 1px solid CanvasText; }
}