@import url("./home-foundation.css");

/* Discovery visibility guard: custom preview hosts must still respect tab state. */
#templates .template-grid .template-card.home-vocab-host[hidden],
#templates .template-grid .template-card.home-vocab-host:not(.is-active-discovery) {
  display: none !important;
}

#templates .template-grid .template-card.home-vocab-host.is-active-discovery {
  display: block !important;
}

/*
 * The vocabulary host replaces a normal template-card with its own grid.
 * The base discovery rule positions every direct > div absolutely; reset that
 * here so the vocabulary strip participates in normal flow instead of escaping
 * the section and covering the carousel / other tab previews.
 */
#templates .template-grid .template-card.home-vocab-host > .home-vocab-strip {
  position: static !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: min(100%, 960px) !important;
  max-width: 960px !important;
  height: auto !important;
  margin: 0 auto !important;
  transform: none !important;
}

/* UI vocabulary stays a compact 3:4 preview rather than a tall catalog card. */
#templates .home-vocab-card {
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#templates .home-vocab-card .entry-card-inner,
#templates .home-vocab-card .entry-card-face,
#templates .home-vocab-card .entry-card-body {
  min-height: 0 !important;
  height: 100% !important;
}

#templates .home-vocab-card .entry-card-body {
  padding: 15px 14px 13px !important;
  overflow: hidden !important;
}

#templates .home-vocab-card .entry-card-meta {
  gap: 7px !important;
  font-size: 9px !important;
}

#templates .home-vocab-card .entry-flip-tag {
  padding: 5px 7px !important;
  font-size: 9px !important;
}

#templates .home-vocab-card .favorite-button {
  font-size: 18px !important;
}

#templates .home-vocab-card h3 {
  margin: 12px 0 7px !important;
  font-size: 21px !important;
}

#templates .home-vocab-card h3 em {
  font-size: 10px !important;
}

#templates .home-vocab-card .entry-ask {
  min-height: 34px !important;
  margin: 0 0 9px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

#templates .home-vocab-card .entry-visual {
  min-height: 0 !important;
  height: auto !important;
  flex: 1 1 0 !important;
  padding: 9px !important;
}

#templates .home-vocab-card .entry-tags {
  gap: 5px !important;
  margin: 8px 0 9px !important;
}

#templates .home-vocab-card .entry-tags span {
  padding: 4px 6px !important;
  font-size: 9px !important;
}

#templates .home-vocab-card .copy-prompt {
  min-height: 34px !important;
  font-size: 10px !important;
}

@media (max-width: 900px) {
  #templates .template-grid .template-card.home-vocab-host > .home-vocab-strip {
    width: 100% !important;
    max-width: none !important;
  }
}

/* App design discovery layout only. Image sources are owned by discovery-asset-paths.css. */
.discovery-strip .template-card:nth-child(1).is-active-discovery {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.discovery-strip .template-card:nth-child(1).is-active-discovery > img,
.discovery-strip .template-card:nth-child(1).is-active-discovery > .template-card-shade,
.discovery-strip .template-card:nth-child(1).is-active-discovery > small,
.discovery-strip .template-card:nth-child(1).is-active-discovery > div {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-sizing: border-box;
  background-color: #f6f6f6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.discovery-strip .template-card:nth-child(1).is-active-discovery > img {
  object-fit: cover !important;
  object-position: center top !important;
}

.discovery-strip .template-card:nth-child(1).is-active-discovery > small {
  padding: 0;
  font-size: 0;
}

.discovery-strip .template-card:nth-child(1).is-active-discovery > div {
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

.discovery-strip .template-card:nth-child(1).is-active-discovery > div > *,
.discovery-strip .template-card:nth-child(1).is-active-discovery > i {
  display: none !important;
}

@media (max-width: 900px) {
  .discovery-strip .template-card:nth-child(1).is-active-discovery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Design tools discovery: show the four supplied 3:4 references together. */
.discovery-strip .template-card:nth-child(4).is-active-discovery {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.discovery-strip .template-card:nth-child(4).is-active-discovery > img,
.discovery-strip .template-card:nth-child(4).is-active-discovery > .template-card-shade,
.discovery-strip .template-card:nth-child(4).is-active-discovery > small,
.discovery-strip .template-card:nth-child(4).is-active-discovery > div {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-sizing: border-box;
  background-color: #f6f6f6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.discovery-strip .template-card:nth-child(4).is-active-discovery > img {
  content: url("../../../assets/home/discovery/tool-1.png");
  object-fit: cover !important;
  object-position: center top !important;
}

.discovery-strip .template-card:nth-child(4).is-active-discovery > .template-card-shade {
  background: url("../../../assets/home/discovery/tool-2.png") center top / cover no-repeat;
}

.discovery-strip .template-card:nth-child(4).is-active-discovery > small {
  padding: 0;
  font-size: 0;
  background: url("../../../assets/home/discovery/tool-3.png") center top / cover no-repeat;
}

.discovery-strip .template-card:nth-child(4).is-active-discovery > div {
  background: url("../../../assets/home/discovery/tool-4.png") center top / cover no-repeat;
}

.discovery-strip .template-card:nth-child(4).is-active-discovery > div > *,
.discovery-strip .template-card:nth-child(4).is-active-discovery > i {
  display: none !important;
}

@media (max-width: 900px) {
  .discovery-strip .template-card:nth-child(4).is-active-discovery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .discovery-strip .template-card:nth-child(4).is-active-discovery {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Design Skill discovery: keep the tab in-page and show four 3:4 skill cards together. */
.discovery-strip .template-card:nth-child(3).is-active-discovery {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.discovery-strip .template-card:nth-child(3).is-active-discovery > img,
.discovery-strip .template-card:nth-child(3).is-active-discovery > .template-card-shade,
.discovery-strip .template-card:nth-child(3).is-active-discovery > small,
.discovery-strip .template-card:nth-child(3).is-active-discovery > div {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  box-sizing: border-box;
  background-color: #f6f6f6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.discovery-strip .template-card:nth-child(3).is-active-discovery > img {
  content: url("../../../assets/home/discovery/skill-1.png");
  object-fit: cover !important;
  object-position: center top !important;
}

.discovery-strip .template-card:nth-child(3).is-active-discovery > .template-card-shade {
  background: url("../../../assets/home/discovery/skill-2.png") center top / cover no-repeat;
}

.discovery-strip .template-card:nth-child(3).is-active-discovery > small {
  padding: 0;
  font-size: 0;
  background: url("../../../assets/home/discovery/skill-3.png") center top / cover no-repeat;
}

.discovery-strip .template-card:nth-child(3).is-active-discovery > div {
  background: url("../../../assets/home/discovery/skill-4.png") center top / cover no-repeat;
}

.discovery-strip .template-card:nth-child(3).is-active-discovery > div > *,
.discovery-strip .template-card:nth-child(3).is-active-discovery > i {
  display: none !important;
}

@media (max-width: 900px) {
  .discovery-strip .template-card:nth-child(3).is-active-discovery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* GSAP discovery-card depth: preserve the static layout while allowing the four-up previews to move independently. */
.home-motion-active .discovery-strip .template-card:nth-child(1).is-active-discovery > img,
.home-motion-active .discovery-strip .template-card:nth-child(1).is-active-discovery > .template-card-shade,
.home-motion-active .discovery-strip .template-card:nth-child(1).is-active-discovery > small,
.home-motion-active .discovery-strip .template-card:nth-child(1).is-active-discovery > div,
.home-motion-active .discovery-strip .template-card:nth-child(3).is-active-discovery > img,
.home-motion-active .discovery-strip .template-card:nth-child(3).is-active-discovery > .template-card-shade,
.home-motion-active .discovery-strip .template-card:nth-child(3).is-active-discovery > small,
.home-motion-active .discovery-strip .template-card:nth-child(3).is-active-discovery > div,
.home-motion-active .discovery-strip .template-card:nth-child(4).is-active-discovery > img,
.home-motion-active .discovery-strip .template-card:nth-child(4).is-active-discovery > .template-card-shade,
.home-motion-active .discovery-strip .template-card:nth-child(4).is-active-discovery > small,
.home-motion-active .discovery-strip .template-card:nth-child(4).is-active-discovery > div {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .home-motion-active .discovery-strip .template-card:nth-child(1).is-active-discovery > img,
  .home-motion-active .discovery-strip .template-card:nth-child(1).is-active-discovery > .template-card-shade,
  .home-motion-active .discovery-strip .template-card:nth-child(1).is-active-discovery > small,
  .home-motion-active .discovery-strip .template-card:nth-child(1).is-active-discovery > div,
  .home-motion-active .discovery-strip .template-card:nth-child(3).is-active-discovery > img,
  .home-motion-active .discovery-strip .template-card:nth-child(3).is-active-discovery > .template-card-shade,
  .home-motion-active .discovery-strip .template-card:nth-child(3).is-active-discovery > small,
  .home-motion-active .discovery-strip .template-card:nth-child(3).is-active-discovery > div,
  .home-motion-active .discovery-strip .template-card:nth-child(4).is-active-discovery > img,
  .home-motion-active .discovery-strip .template-card:nth-child(4).is-active-discovery > .template-card-shade,
  .home-motion-active .discovery-strip .template-card:nth-child(4).is-active-discovery > small,
  .home-motion-active .discovery-strip .template-card:nth-child(4).is-active-discovery > div {
    will-change: auto;
  }
}

/* Unified Ant-inspired Chinese section-heading system for Home. */
html[lang="zh-CN"] body.project-home {
  --home-zh-heading-size: clamp(36px, 4vw, 54px);
  --home-zh-heading-size-mobile: clamp(32px, 9vw, 42px);
  --home-zh-heading-weight: 500;
  --home-zh-heading-tracking: -.012em;
  --home-zh-heading-line-height: 1.22;
  --home-zh-heading-dark: rgba(0, 0, 0, .88);
  --home-zh-heading-light: rgba(255, 255, 255, .92);
}

html[lang="zh-CN"] .template-gallery-heading h2,
html[lang="zh-CN"] #capabilities .section-heading h2,
html[lang="zh-CN"] .project-cta h2 {
  color: var(--home-zh-heading-dark);
  font-size: var(--home-zh-heading-size);
  font-weight: var(--home-zh-heading-weight);
  letter-spacing: var(--home-zh-heading-tracking);
  line-height: var(--home-zh-heading-line-height);
  text-wrap: balance;
}

html[lang="zh-CN"] .showcase-copy h2,
html[lang="zh-CN"] .system-explainer-heading h2,
html[lang="zh-CN"] .featured-cases-heading h2 {
  color: var(--home-zh-heading-light);
  font-size: var(--home-zh-heading-size);
  font-weight: var(--home-zh-heading-weight);
  letter-spacing: var(--home-zh-heading-tracking);
  line-height: var(--home-zh-heading-line-height);
  text-wrap: balance;
}

#capabilities .section-heading {
  max-width: 760px;
  margin-bottom: 48px;
}

#capabilities .section-heading h2 {
  max-width: 740px;
}

@media (max-width: 720px) {
  html[lang="zh-CN"] .template-gallery-heading h2,
  html[lang="zh-CN"] #capabilities .section-heading h2,
  html[lang="zh-CN"] .showcase-copy h2,
  html[lang="zh-CN"] .system-explainer-heading h2,
  html[lang="zh-CN"] .featured-cases-heading h2,
  html[lang="zh-CN"] .project-cta h2 {
    font-size: var(--home-zh-heading-size-mobile);
    line-height: 1.24;
  }

  #capabilities .section-heading {
    margin-bottom: 36px;
  }
}

/* Final CTA: keep one clear statement and let Home JS type it once on entry. */
.project-cta h2 {
  position: relative;
  transform: none;
}

.project-cta h2::after {
  display: inline-block;
  width: .055em;
  height: .82em;
  margin-left: .06em;
  background: #73f2a7;
  content: "";
  opacity: 0;
  vertical-align: -.06em;
}

.project-cta h2.is-typing::after {
  opacity: 1;
  animation: project-cta-caret .74s steps(1, end) infinite;
}

.project-cta h2.is-typed::after {
  animation: project-cta-caret .74s steps(1, end) 4 forwards;
}

@keyframes project-cta-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .project-cta h2::after {
    display: none;
    animation: none !important;
  }
}