:root {
  --as-magenta: #f0008b;
}

.as-home-logo-mark image {
  image-rendering: auto;
}

.as-ip-flight {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}

.as-ip-flight__depth {
  position: absolute;
  inset: 0;
  z-index: var(--as-flight-layer-z);
  pointer-events: none;
}

.as-ip-flight__lane {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  animation: as-ip-flight-up-left var(--as-flight-duration) linear infinite;
  animation-delay: var(--as-flight-delay);
  will-change: transform;
}

.as-ip-flight__sprite {
  display: block;
  width: var(--as-flight-size);
  max-width: none;
  height: var(--as-flight-size);
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-40deg);
  transform-origin: center;
  image-rendering: pixelated;
  pointer-events: none;
}

.p-home_stage_cover {
  z-index: 20;
  height: 4rem;
  background: linear-gradient(
    to bottom,
    rgb(247 247 247 / 0%) 0%,
    rgb(247 247 247 / 20%) 28%,
    rgb(247 247 247 / 78%) 72%,
    #f7f7f7 100%
  );
  pointer-events: none;
}

.p-home_stage_logo_img[data-home-stage-image="curry"] {
  width: clamp(235px, 14vw, 290px) !important;
  height: auto !important;
  aspect-ratio: 101 / 200 !important;
  line-height: 0;
}

.as-home-arcade-machine {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.as-curry-gif-explode-layer {
  position: absolute;
  inset: 0;
  z-index: 29;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}

.as-curry-gif-particle {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: center;
  contain: layout paint style;
}

.as-curry-gif-particle img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
  rotate: 0deg !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  pointer-events: none;
}

.p-home_stage_logo_img[data-home-stage-image="bear"] {
  width: clamp(300px, 32vw, 520px) !important;
  height: auto !important;
  aspect-ratio: 3471 / 1032 !important;
  line-height: 0;
}

.p-home_stage_logo_img_item.as-home-header-wordmark-stage {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
}

/* The legacy stage defaults to the square mark. Start the reordered cycle on
   the wordmark; GSAP's inline transforms take over after the first drag. */
.p-home_stage_logo_img[data-home-stage-image="logo"] {
  transform: scale(0);
}

.p-home_stage_logo_img[data-home-stage-image="bear"] {
  transform: none;
}

/*
 * 首屏文字与导航不再等待 WebGL 飞行纹理完成才出现。
 * 飞行元素仍在后台异步准备，页面基础信息会先稳定显示。
 */
.p-home-kv__copy {
  opacity: 1;
}

@keyframes as-ip-flight-up-left {
  from {
    transform: translate3d(
      var(--as-flight-start-x),
      var(--as-flight-start-y),
      0
    );
  }

  24% {
    transform: translate3d(
      var(--as-flight-bend-1-x),
      var(--as-flight-bend-1-y),
      0
    );
  }

  52% {
    transform: translate3d(
      var(--as-flight-bend-2-x),
      var(--as-flight-bend-2-y),
      0
    );
  }

  76% {
    transform: translate3d(
      var(--as-flight-bend-3-x),
      var(--as-flight-bend-3-y),
      0
    );
  }

  to {
    transform: translate3d(var(--as-flight-end-x), var(--as-flight-end-y), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .as-ip-flight {
    display: none;
  }
}

.as-header-wordmark {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.l-nav__link[data-as-nav-label="astronstar"] {
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .l-header__logo {
    transform: translateX(-70px);
  }
}

.as-astronstar-page {
  min-height: 100dvh;
  padding: clamp(120px, 16vh, 180px) clamp(24px, 7vw, 112px) 96px;
  color: #000;
  background: #f7f7f7;
}

.as-astronstar-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  min-height: calc(100dvh - 240px);
}

.as-astronstar-hero__eyebrow {
  margin: 0 0 18px;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.as-astronstar-hero h1 {
  margin: 0;
  font-size: clamp(64px, 10vw, 168px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.08em;
}

.as-astronstar-hero__copy > p:not(.as-astronstar-hero__eyebrow) {
  max-width: 720px;
  margin: 32px 0 0;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.9;
}

.as-astronstar-hero__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 38px;
  padding: 0 24px;
  border: 2px solid #000;
  border-radius: 999px;
  color: #000;
  background: #fff;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.as-astronstar-hero__mark {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 5px solid #000;
  border-radius: 32px;
  background: var(--as-magenta);
  box-shadow: 16px 16px 0 #000;
}

.as-astronstar-hero__mark img {
  width: min(62%, 360px);
  height: auto;
  image-rendering: pixelated;
}

.as-astronstar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.as-astronstar-grid article {
  min-height: 220px;
  padding: clamp(24px, 3vw, 40px);
  border: 2px solid #000;
  border-radius: 24px;
  background: #fff;
}

.as-astronstar-grid span {
  font-size: 14px;
  font-weight: 900;
}

.as-astronstar-grid h2 {
  margin: 34px 0 12px;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 900;
  line-height: 1;
}

.as-astronstar-grid p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
}

.as-language-trigger {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.l-hambergerMenu .as-language-trigger {
  color: #000;
}

.as-language-dialog {
  position: fixed;
  inset: auto;
  z-index: 100000;
  width: min(320px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  color: #000;
  background: transparent;
}

.as-language-panel {
  padding: 22px;
  border: 1px solid #000;
  border-radius: 8px;
  background: #f4f4f4;
  box-shadow: 0 14px 40px rgb(0 0 0 / 16%);
}

.as-language-dialog[open] .as-language-panel {
  animation: as-language-enter 180ms ease-out both;
}

.as-language-dialog.is-closing .as-language-panel {
  animation: as-language-leave 180ms ease-in both;
  pointer-events: none;
}

.as-language-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 18px;
}

.as-language-title {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

.as-language-close {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.as-language-close::before,
.as-language-close::after {
  position: absolute;
  top: 19px;
  left: 12px;
  width: 16px;
  height: 2px;
  background: #000;
  content: "";
}

.as-language-close::before {
  transform: rotate(45deg);
}

.as-language-close::after {
  transform: rotate(-45deg);
}

.as-language-options {
  display: grid;
  gap: 8px;
}

.as-language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #000;
  background: #fff;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.as-language-option:hover,
.as-language-option:focus-visible {
  border-color: #000;
  outline: none;
}

.as-language-option.is-active {
  border-color: #000;
  box-shadow: inset 5px 0 0 var(--as-magenta);
}

.as-language-option-label {
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.as-language-option-indicator {
  width: 12px;
  height: 12px;
  border: 2px solid #000;
  border-radius: 50%;
  background: transparent;
}

.as-language-option.is-active .as-language-option-indicator {
  border-color: var(--as-magenta);
  background: var(--as-magenta);
  box-shadow: inset 0 0 0 2px #fff;
}

@keyframes as-language-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes as-language-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.as-project-logo {
  display: block;
  width: 87.7232%;
  height: auto;
  aspect-ratio: 393 / 288;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

.p-home-project .p-home-project-brnds__image img {
  width: 100%;
  aspect-ratio: 930 / 528;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

/* Keep the adapted product tiles on the same stable footprint as the reference cards. */
.p-home-project .p-home-project-collabo__itemImage,
.p-home-project .p-home-project-social__itemImage {
  margin: 0;
  overflow: hidden;
}

.p-home-project .p-home-project-collabo__itemImage > img,
.p-home-project .p-home-project-social__itemImage > img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
}

.p-home-project .as-home-project-group .p-home-project-collabo__list {
  display: grid;
  grid-template-columns: repeat(var(--as-home-project-columns, 4), minmax(0, 1fr));
}

.p-home-project .as-home-project-group[data-item-count="1"] .p-home-project-collabo__list {
  max-width: 29.7rem;
}

.p-home-project .as-home-project-group[data-item-count="2"] .p-home-project-collabo__list {
  max-width: 59.4rem;
}

.p-home-project .as-home-project-group .p-home-project-collabo__item {
  min-width: 0;
}

.p-home-project .as-home-project-group .p-home-project-collabo__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

.p-home-project .as-home-project-group .p-home-project-collabo__itemImage {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-home-project .as-home-project-group .p-home-project-collabo__itemImage > img {
  aspect-ratio: 1.18;
  border-radius: 2rem 2rem 0 0;
}

.p-home-project .as-home-project-group .p-home-project-collabo__item .p-home-project-collabo__itemCaption {
  position: static;
  bottom: auto;
  display: block;
  min-height: 3.2rem;
  padding: 0.6rem 1rem 1rem;
  line-height: 1.35;
  text-align: center;
  background: #fff;
}

.p-home-project .as-home-project-group .p-home-project-collabo__body {
  margin-top: 0;
  border-radius: 2rem;
}

.p-home-project .p-home-project-brnds__link .c-icon-instagram[hidden] {
  display: none !important;
}

.as-brand-logo-wall .as-brand-logo-wall__tile {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  background: #fff;
}

.as-brand-logo-wall .as-brand-logo-wall__logo {
  display: block;
  width: 52%;
  max-width: 52%;
  height: auto;
  max-height: 52%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}

.as-brand-logo-wall .as-brand-logo-wall__logo--wordmark {
  width: 72%;
  max-width: 72%;
  max-height: 34%;
}

.as-brand-logo-wall .as-brand-logo-wall__logo--icon,
.as-brand-logo-wall .as-brand-logo-wall__logo--square {
  width: 42%;
  max-width: 42%;
  max-height: 42%;
}

.as-brand-logo-wall .as-brand-logo-wall__logo--brand {
  width: 66%;
  max-width: 66%;
  max-height: 46%;
}

.as-brand-logo-wall .as-brand-logo-wall__logo--super-cube {
  width: 74%;
  max-width: 74%;
  max-height: 34%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.as-news-logo {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain !important;
  background: #fff;
}

.l-footer__logo {
  height: 132px;
  text-decoration: none;
}

@media (min-width: 768px) {
  .l-header-nav {
    right: auto;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);
  }
}

@media (min-width: 1200px) {
  .p-home-missionStatement {
    height: 1080.8125px;
  }
}

/*
 * 项目区的黑色视觉底板。保留原版的尺寸、sticky 停留和横向偏移，
 * 但不再使用原项目的心形容器或 SVG 图形。
 */
.as-project-backdrop {
  position: absolute;
  position: sticky;
  top: 0;
  width: 160.9rem;
  overflow: hidden;
  border-radius: 2.4rem;
}

.as-project-backdrop img {
  position: relative;
  left: -18rem;
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  will-change: transform;
}

/*
 * 首页项目区三层图片固定沿用原版展示框，不受后台图片原始宽高影响。
 * 图片仅负责 cover 填充，实际可视高度始终由该展示框比例决定。
 */
.p-home-project .p-home-project__layers {
  width: 100%;
  aspect-ratio: 1440 / 980;
}

.p-home-project .p-home-project__layersInner,
.p-home-project .p-home-project__layersList {
  width: 100%;
  height: 100%;
}

.p-home-project .p-home-project__layersItem,
.p-home-project .p-home-project__layersItem picture,
.p-home-project .p-home-project__layersItem img {
  width: 100%;
  height: 100%;
}

.p-home-project .p-home-project__layersItem img {
  object-fit: cover;
}

/*
 * 旧站项目区的心形容器已从模板删除。保留这条保护规则，防止历史脚本或
 * 缓存模板意外插入同名节点时在首屏短暂显示原版图形。
 */
.p-home-project__heart {
  display: none !important;
}

@media (max-width: 767px) {
  .as-project-backdrop {
    top: 4rem;
    width: 85rem;
    border-radius: 1.6rem;
  }

  .as-project-backdrop img {
    left: -32rem;
  }

  .p-home-project .p-home-project__layers {
    aspect-ratio: 390 / 380;
  }

  .as-astronstar-page {
    padding: 112px 18px 64px;
  }

  .as-astronstar-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .as-astronstar-hero h1 {
    letter-spacing: -0.06em;
  }

  .as-astronstar-hero__mark {
    max-width: 320px;
    margin-inline: auto;
    border-radius: 20px;
    box-shadow: 10px 10px 0 #000;
  }

  .as-astronstar-grid {
    grid-template-columns: 1fr;
  }

  .as-language-panel {
    padding: 16px;
  }

  .as-language-header {
    margin-bottom: 14px;
  }

  .p-home-project-brnds.as-project-card--1 {
    min-height: 177.1795vw;
  }

  .p-home-project-brnds.as-project-card--2 {
    min-height: 170.5128vw;
  }

  .p-home-project-brnds.as-project-card--3 {
    min-height: 194.1026vw;
  }

  .p-home-project-collabo {
    min-height: 158.7179vw;
  }

  .p-home-project-social {
    min-height: 121.7949vw;
  }

  .p-home-news {
    min-height: 268.7179vw;
  }

  .p-home-careers {
    height: 102.0513vw;
  }

  .l-footer__logo {
    height: 123.75px;
  }
}
