/* A cinematic 3D scene gives the IP character a physical space. */
.home-page { --hero-gutter: var(--page-gutter); }
.home-page .brand-divider { color: #a855f7; }
.home-page .brand-cn { font-size: .78em; font-weight: 700; }
.home-page .site-header.is-scrolled { color: var(--ink); }

.hero-immersive {
  isolation: isolate;
  display: block;
  min-height: max(780px, 100svh);
  padding: 0;
  color: #f7f4fa;
  background: #101116;
}

.hero-immersive::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(140px, 21svh, 260px);
  content: "";
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(17, 17, 23, .16) 26%,
    rgba(17, 17, 23, .72) 71%,
    #111117 100%);
  pointer-events: none;
}

.hero-space,
.hero-space-wash {
  position: absolute;
  inset: 0;
}

.hero-space {
  overflow: hidden;
  pointer-events: none;
  background: #101116;
}

.hero-space::before {
  position: absolute;
  z-index: 1;
  inset: 0 46% 0 0;
  content: "";
  background:
    radial-gradient(ellipse 65% 55% at 34% 52%, rgba(114, 62, 174, .29), transparent 78%),
    linear-gradient(rgba(185, 129, 245, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185, 129, 245, .065) 1px, transparent 1px);
  background-size: auto, 92px 92px, 92px 92px;
  mask-image: linear-gradient(90deg, #000 6%, #000 54%, transparent 100%);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  will-change: transform;
  z-index: 0;
  animation: sceneBreath 16s ease-in-out infinite alternate;
}

.hero-figure-stage {
  position: absolute;
  z-index: 3;
  right: max(24px, calc((100vw - 1720px) / 2 - 60px));
  bottom: 2%;
  width: min(123svh, 1500px);
  height: min(82svh, 1000px);
}

.hero-orbit-line {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(var(--tools-x, 0px), var(--tools-y, 0px), 0);
  transition: transform 220ms ease-out;
}

.hero-orbit-line--front { z-index: 1; }

.hero-orbit-line path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hero-orbit-line__halo {
  stroke: #a855f7;
  stroke-width: 20;
  opacity: .28;
  filter: blur(9px);
}

.hero-orbit-line__core {
  stroke: url(#hero-orbit-gradient);
  stroke-width: 3.2;
  opacity: .7;
  filter: drop-shadow(0 0 7px #ae5bff);
}

.hero-orbit-line__spark {
  stroke: #f1d6ff;
  stroke-width: 3.2;
  stroke-dasharray: 14 986;
  opacity: .45;
  filter: drop-shadow(0 0 8px #d091ff);
  animation: orbitSpark 12s linear infinite;
}

.hero-orbit-line--front .hero-orbit-line__halo {
  stroke-width: 24;
  opacity: .58;
}

.hero-orbit-line--front .hero-orbit-line__core {
  stroke: url(#hero-orbit-front-gradient);
  stroke-width: 4;
  opacity: 1;
}

.hero-orbit-line--front .hero-orbit-line__spark { opacity: .95; }

.hero-figure-stage::before {
  position: absolute;
  z-index: 0;
  left: 70%;
  bottom: -.4%;
  width: 32%;
  height: 7%;
  content: "";
  transform: translate3d(calc(-50% + var(--character-x, 0px)), 0, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(3, 2, 10, .88) 0%, rgba(16, 5, 24, .58) 38%, rgba(106, 42, 143, .2) 65%, transparent 78%);
  filter: blur(9px);
  transition: transform 320ms cubic-bezier(.18, .7, .2, 1);
}

.hero-ground-contact {
  position: absolute;
  z-index: 0;
  width: 18%;
  height: 4.2%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .97) 0 26%, rgba(8, 3, 15, .82) 45%, rgba(100, 42, 151, .28) 69%, transparent 82%);
  filter: blur(3px);
  transform: translate3d(calc(-50% + var(--character-x, 0px)), 0, 0);
  transition: transform 320ms cubic-bezier(.18, .7, .2, 1);
}

.hero-ground-contact::after {
  position: absolute;
  top: 56%;
  right: 15%;
  left: 15%;
  height: 160%;
  content: "";
  background: radial-gradient(ellipse at top, rgba(191, 92, 255, .25), rgba(255, 122, 47, .1) 38%, transparent 76%);
  filter: blur(8px);
}

.hero-ground-contact--rear { left: 63.5%; bottom: 3.2%; }
.hero-ground-contact--front { left: 78%; bottom: -1.4%; }

.hero-character-float {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 70% 99%;
  animation: characterIdle 7s ease-in-out infinite;
  will-change: transform;
}

.hero-backdrop-image,
.hero-character {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  will-change: transform;
}

.hero-backdrop-image {
  transform: translate3d(var(--look-x, 0px), var(--look-y, 0px), 0) scale(1.03);
  transition: transform 420ms ease-out;
}

.hero-character {
  object-fit: contain;
  transform-origin: 70% 99%;
  transform:
    translate3d(var(--character-x, 0px), 0, 0)
    rotateY(var(--character-turn, 0deg))
    rotateZ(var(--character-tilt, 0deg));
  transition: transform 320ms cubic-bezier(.18, .7, .2, 1);
}

.hero-space-wash {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(16, 17, 22, .42) 0%, rgba(16, 17, 22, .28) 36%, rgba(16, 17, 22, .04) 64%, transparent 82%),
    linear-gradient(0deg, rgba(16, 17, 22, .34), transparent 24%);
}

.hero-tools,
.hero-tools-back {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--tools-x, 0px), var(--tools-y, 0px), 0);
  transition: transform 220ms ease-out;
}

.hero-tools { z-index: 2; }
.hero-tools-back { z-index: 0; }

.hero-tool {
  position: absolute;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid var(--tool-line);
  border-radius: 20px;
  color: var(--tool-ink);
  background: var(--tool-bg);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .36), 0 0 25px var(--tool-glow), inset 0 1px 0 rgba(255, 255, 255, .2);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.07em;
  text-shadow: 0 0 18px var(--tool-glow);
  animation: toolFloat var(--float-time) ease-in-out infinite;
  will-change: transform;
}

.hero-tools.is-orbiting .hero-tool,
.hero-tools-back.is-orbiting .hero-tool {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  translate: -50% -50%;
  animation: toolTilt var(--float-time) ease-in-out infinite;
}

.hero-tool::after {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 15px;
  content: "";
}

.hero-tool--ps {
  top: 17%;
  left: 50%;
  --tool-line: rgba(49, 168, 255, .6);
  --tool-ink: #71c9ff;
  --tool-bg: linear-gradient(145deg, #092b4d, #001728 75%);
  --tool-glow: rgba(49, 168, 255, .38);
  --float-time: 6.8s;
  --tilt-start: -11deg;
  --tilt-end: -3deg;
}

.hero-tool--ai {
  top: 27%;
  right: 10%;
  --tool-line: rgba(255, 154, 0, .62);
  --tool-ink: #ffaf42;
  --tool-bg: linear-gradient(145deg, #4a2109, #221008 75%);
  --tool-glow: rgba(255, 122, 47, .4);
  --float-time: 7.6s;
  --tilt-start: 8deg;
  --tilt-end: 1deg;
}

.hero-tool--c4d {
  right: 12%;
  bottom: 20%;
  width: 84px;
  height: 84px;
  border-radius: 23px;
  --tool-line: rgba(191, 173, 255, .55);
  --tool-ink: #e9e4ff;
  --tool-bg: linear-gradient(145deg, #35304f, #151521 78%);
  --tool-glow: rgba(168, 85, 247, .36);
  --float-time: 8.2s;
  --tilt-start: -7deg;
  --tilt-end: 3deg;
}

.hero-tool--c4d span { font-size: 25px; letter-spacing: -.08em; }

.hero-layout {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: max(780px, 100svh);
  padding: 116px var(--hero-gutter) 82px;
}

.hero-intro {
  width: min(100%, 730px);
  transform: translateY(12px);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 28px;
  color: #b9abc7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  white-space: nowrap;
}

.hero-eyebrow-line {
  flex: 0 0 26px;
  height: 2px;
  background: #ff7a2f;
  box-shadow: 0 0 18px rgba(255, 122, 47, .4);
}

.hero-eyebrow-divider { color: #796981; }

.hero-statement {
  max-width: 730px;
  margin: 0;
  color: #faf8fa;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  font-size: clamp(64px, 6vw, 102px);
  font-weight: 850;
  line-height: 1.13;
  letter-spacing: -.065em;
  text-wrap: nowrap;
}

.hero-statement span { color: #c995ff; }

.hero-positioning {
  max-width: 650px;
  margin: 30px 0 0;
  color: #cec8d1;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.82;
  letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .62);
}

.hero-immersive-actions {
  display: flex;
  align-items: center;
  gap: 31px;
  margin-top: 36px;
}

.hero-explore,
.hero-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 750;
  transition: transform 220ms ease, color 220ms ease;
}

.hero-explore:hover,
.hero-contact:hover { transform: translateY(-3px); }
.hero-explore { color: #faf8fb; }

.hero-explore-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #1b1124;
  background: #bc79fb;
  box-shadow: 0 0 0 1px rgba(195, 135, 250, .34), 0 0 30px rgba(168, 85, 247, .31);
  font-size: 22px;
  font-weight: 400;
  transition: background 220ms ease, box-shadow 220ms ease;
}

.hero-explore:hover .hero-explore-icon {
  background: #d7acff;
  box-shadow: 0 0 40px rgba(168, 85, 247, .48);
}

.hero-contact { padding: 14px 0; color: #d4c7de; }
.hero-contact span { color: #ff9a65; font-size: 19px; font-weight: 400; }

.hero-disciplines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 700px);
  column-gap: 24px;
  row-gap: 22px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(203, 174, 237, .27);
}
.hero-disciplines > div { min-width: 0; }
.hero-disciplines span {
  display: block;
  margin-bottom: 9px;
  color: #ff9a65;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.hero-disciplines strong {
  display: block;
  color: #faf8fb;
  font-size: 17px;
  font-weight: 700;
}
.hero-disciplines small {
  display: block;
  margin-top: 5px;
  color: #aa9dad;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.hero-bottomline {
  position: absolute;
  right: var(--hero-gutter);
  bottom: 34px;
  left: var(--hero-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9a8e9e;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .2em;
}

.hero-bottomline b { margin: 0 11px; color: #ff7a2f; font-size: 11px; }
.hero-scroll-cue { display: inline-flex; align-items: center; gap: 18px; }
.hero-scroll-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 35px;
  overflow: hidden;
  background: rgba(188, 121, 251, .3);
}
.hero-scroll-cue i::after {
  position: absolute;
  top: -16px;
  left: 0;
  width: 1px;
  height: 16px;
  content: "";
  background: #c995ff;
  animation: ipScroll 2.5s ease-in-out infinite;
}

.hero-immersive a:focus-visible,
.home-page .site-header a:focus-visible { outline-color: #c995ff; }

@keyframes ipScroll {
  to { transform: translateY(52px); }
}

@keyframes sceneBreath {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, -3px, 0) scale(1.008); }
}

@keyframes characterIdle {
  0%, 100% { transform: scaleY(.997) rotate(-.18deg); }
  50% { transform: scaleY(1.003) rotate(.18deg); }
}

@keyframes toolFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt-start)); }
  50% { transform: translate3d(0, -16px, 0) rotate(var(--tilt-end)); }
}

@keyframes toolTilt {
  0%, 100% { transform: rotate(var(--tilt-start)); }
  50% { transform: rotate(var(--tilt-end)); }
}

@keyframes orbitSpark {
  to { stroke-dashoffset: -1000; }
}

@media (min-width: 1700px) {
  .home-page { --hero-gutter: clamp(180px, 12vw, 360px); }
  .home-page .site-header { padding-inline: var(--hero-gutter); }
}

@media (max-width: 1100px) {
  .hero-figure-stage {
    right: -12px;
    width: min(114svh, 1140px);
    height: min(76svh, 760px);
  }
  .hero-statement { font-size: clamp(57px, 7.1vw, 81px); }
  .hero-tool { width: 62px; height: 62px; border-radius: 17px; font-size: 27px; }
  .hero-tool--c4d span { font-size: 21px; }
  .hero-space-wash {
    background: linear-gradient(90deg, rgba(16, 17, 22, .75) 0%, rgba(16, 17, 22, .52) 41%, transparent 85%);
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .hero-scroll-cue { display: none; }
}

@media (max-width: 980px) {
  .home-page .site-header { grid-template-columns: auto 1fr auto; }
  .home-page .main-nav { justify-content: center; }
}

@media (max-width: 900px) {
  .hero-backdrop { inset: 0 0 auto; height: 510px; }
  .hero-backdrop-image { object-position: 70% top; }
  .hero-figure-stage {
    top: 0;
    right: 4vw;
    bottom: auto;
    width: min(81svh, 735px);
    height: min(54svh, 490px);
  }
  .hero-space-wash {
    background: linear-gradient(0deg, #101116 30%, rgba(16, 17, 22, .94) 42%, rgba(16, 17, 22, .24) 67%, transparent 86%);
  }
  .hero-layout { justify-content: flex-end; padding-top: 450px; }
  .hero-positioning { max-width: 660px; }
  .hero-tool--ps { top: 15%; left: 47%; }
  .hero-tool--ai { top: 16%; right: 10%; }
  .hero-tool--c4d { top: 60%; right: 11%; bottom: auto; }
}

@media (max-width: 680px) {
  .home-page .site-header { grid-template-columns: auto 1fr auto; gap: 18px; }
  .home-page .main-nav { display: flex; justify-content: end; }
  .home-page .brand-divider,
  .home-page .brand-cn,
  .home-page .main-nav a:nth-child(2) { display: none; }

  .hero-immersive,
  .hero-layout { min-height: max(950px, 100svh); }

  .hero-layout {
    justify-content: flex-end;
    padding: 290px 22px 78px;
  }

  .hero-space {
    background: #101116;
  }

  .hero-backdrop {
    inset: 0 0 auto;
    height: 440px;
  }

  .hero-backdrop-image { object-position: 73% center; }
  .hero-figure-stage {
    top: 0;
    right: 0;
    width: min(79.5svh, 667.5px);
    height: min(53svh, 445px);
  }

  .hero-tool { width: 48px; height: 48px; border-radius: 13px; font-size: 21px; }
  .hero-tool::after { inset: 4px; border-radius: 9px; }
  .hero-tool--ps { top: 20%; left: 42%; }
  .hero-tool--ai { top: 29%; right: 12%; }
  .hero-tool--c4d { top: 70%; right: auto; left: 43%; }
  .hero-tool--c4d span { font-size: 16px; }

  .hero-space-wash {
    background: linear-gradient(0deg, #101116 39%, rgba(16, 17, 22, .97) 46%, rgba(16, 17, 22, .44) 61%, transparent 78%);
  }

  .hero-intro { transform: none; }
  .hero-eyebrow { gap: 8px; margin-bottom: 19px; font-size: 9px; letter-spacing: .1em; }
  .hero-eyebrow-line { flex-basis: 16px; }
  .hero-statement { font-size: clamp(43px, 11.6vw, 62px); line-height: 1.14; }
  .hero-positioning { margin-top: 20px; font-size: 14px; line-height: 1.72; }
  .desktop-break { display: none; }
  .hero-immersive-actions { gap: 24px; margin-top: 22px; }
  .hero-explore,
  .hero-contact { font-size: 13px; }
  .hero-explore-icon { width: 45px; height: 45px; }
  .hero-disciplines {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 18px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(203, 174, 237, .27);
  }
  .hero-disciplines span { margin-bottom: 6px; font-size: 9px; }
  .hero-disciplines strong { font-size: 13px; white-space: nowrap; }
  .hero-disciplines small { margin-top: 4px; font-size: 8px; line-height: 1.35; }
  .hero-bottomline { right: 22px; bottom: 20px; left: 22px; font-size: 9px; }
  .hero-bottomline > span:first-child { display: none; }
  .hero-scroll-cue { margin-left: auto; }
  .hero-scroll-cue i { height: 25px; }
}

@media (max-width: 380px) {
  .hero-eyebrow { font-size: 8px; }
  .hero-statement { font-size: 43px; }
  .hero-positioning { font-size: 13.7px; }
}

@media (max-width: 680px) and (max-height: 650px) {
  .hero-figure-stage { top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-backdrop,
  .hero-character-float,
  .hero-tool,
  .hero-orbit-line__spark,
  .hero-scroll-cue i::after { animation: none; }
  .hero-backdrop-image,
  .hero-character,
  .hero-figure-stage::before,
  .hero-ground-contact,
  .hero-tools,
  .hero-tools-back,
  .hero-orbit-line,
  .hero-explore,
  .hero-contact,
  .hero-explore-icon { transition: none; }
}