/*
 * Anime Orbit | Home atmosphere v1.0
 * Decorative-only enhancement of the existing editorial top page.
 * Scoped to #ao-navigation-home: article posts, taxonomies, works and characters remain unchanged.
 * Original artwork: SVG files in the same /assets folder.
 */
#container #ao-navigation-home {
  --ao-star: #c5a77c;
  --ao-mist: #eee9f6;
  --ao-glow: #d6c7eb;
}
#container #ao-navigation-home .ao-home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: clamp(22px,4vw,46px);
  margin: 6px 0 36px;
  padding: clamp(29px,4.3vw,56px) clamp(25px,4.5vw,55px);
  border: 1px solid #e0dcec;
  border-radius: 14px;
  background: linear-gradient(90deg,rgba(255,252,252,.69),rgba(255,252,252,.13)),
    url("./ao-home-orbit-scene.svg") center right / cover no-repeat, #f5f1fb;
  box-shadow: 0 14px 38px rgba(58,39,82,.06);
}
#container #ao-navigation-home .ao-home-hero-copy,
#container #ao-navigation-home .ao-home-reading { position: relative; z-index: 1; }
#container #ao-navigation-home .ao-home-hero-copy > .ao-navigation-eyebrow {
  color: #6b5789;
  text-shadow: 0 1px 2px rgba(255,255,255,.7);
}
#container #ao-navigation-home .ao-home-title {
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
#container #ao-navigation-home .ao-home-title span {
  box-shadow: inset 0 -.16em 0 rgba(206,229,223,.8);
}
#container #ao-navigation-home .ao-home-hero .ao-navigation-search-row input {
  border: 1px solid #b8a9c8;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
}
#container #ao-navigation-home .ao-home-hero .ao-navigation-search-row button {
  border-radius: 8px;
}
#container #ao-navigation-home .ao-home-quick > a {
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(42,31,62,.05);
}
#container #ao-navigation-home .ao-home-reading {
  border: 1px solid rgba(172,155,198,.47);
  border-top: 3px solid #9378ad;
  border-radius: 9px;
  background: rgba(252,250,255,.88);
  box-shadow: 0 7px 22px rgba(63,41,87,.045);
}
/* One recurring star mark, not a motif beside every line of text. */
#container #ao-navigation-home .ao-home-section-head {
  position: relative;
  padding-inline-start: 23px;
}
#container #ao-navigation-home .ao-home-section-head::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 15px;
  height: 15px;
  background: linear-gradient(145deg,#c5a879,#8f79b9);
  clip-path: polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
  opacity: .82;
}
#container #ao-navigation-home .ao-home-section { border-top-color: #e9e1ec; }
#container #ao-navigation-home .ao-home-section-head h2 { letter-spacing: .012em; }
/* Find your story: an editorial first impression with soft paper-like highlights. */
#container #ao-navigation-home .ao-home-discover {
  position: relative;
  border-top-color: #e7dfed;
}
#container #ao-navigation-home .ao-discover-card {
  overflow: hidden;
  border-radius: 10px;
  background-image: radial-gradient(circle at 91% 13%,rgba(255,255,255,.77) 0,rgba(255,255,255,0) 47%);
  box-shadow: 0 5px 18px rgba(64,48,81,.035);
}
#container #ao-navigation-home .ao-discover-icon { box-shadow: 0 3px 9px rgba(80,63,93,.04); }
/* FAQ tiles retain their clean functionality. */
#container #ao-navigation-home .ao-home-purpose-grid > a {
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 4px 16px rgba(53,39,69,.025);
}
#container #ao-navigation-home .ao-home-purpose-grid > a::before {
  content: "";
  position: absolute;
  top: -31px;
  right: -30px;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(164,147,191,.22);
  border-radius: 50%;
  pointer-events: none;
}
#container #ao-navigation-home .ao-home-purpose-grid > a::after {
  content: "";
  position: absolute;
  top: -17px;
  right: -17px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(164,147,191,.12);
  border-radius: 50%;
  pointer-events: none;
}
/* Genre-specific original illustrations: six scenes in one lightweight SVG. */
#container #ao-navigation-home .ao-home-genre {
  isolation: isolate;
  overflow: hidden;
  border-radius: 11px;
  background-image: linear-gradient(130deg,rgba(255,255,255,.48),rgba(255,255,255,0));
  box-shadow: 0 6px 20px rgba(53,39,69,.035);
}
#container #ao-navigation-home .ao-home-genre::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 53%;
  pointer-events: none;
  background-image: url("./ao-home-genre-scenes.svg");
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: 0 0;
  opacity: .78;
}
#container #ao-navigation-home .ao-home-genre:nth-child(2)::before { background-position: 50% 0; }
#container #ao-navigation-home .ao-home-genre:nth-child(3)::before { background-position: 100% 0; }
#container #ao-navigation-home .ao-home-genre:nth-child(4)::before { background-position: 0 100%; }
#container #ao-navigation-home .ao-home-genre:nth-child(5)::before { background-position: 50% 100%; }
#container #ao-navigation-home .ao-home-genre:nth-child(6)::before { background-position: 100% 100%; }
#container #ao-navigation-home .ao-home-genre :is(h3,p,.ao-home-genre-index,.ao-home-genre-works,.ao-home-arrow) {
  position: relative;
  z-index: 1;
}
#container #ao-navigation-home .ao-home-genre h3 {
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
#container #ao-navigation-home .ao-home-genre p {
  max-width: 78%;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
#container #ao-navigation-home .ao-home-genre:hover {
  box-shadow: 0 9px 24px rgba(70,48,93,.09);
}
/* New articles remain the stars. Their actual thumbnails are untouched. */
#container #ao-latest .ao-recent-card {
  overflow: hidden;
  border-color: #e4dfea;
  border-radius: 11px;
  box-shadow: 0 7px 24px rgba(54,37,75,.055);
}
#container #ao-latest .ao-recent-card:hover {
  border-color: #b5a4cc;
  box-shadow: 0 10px 28px rgba(54,37,75,.10);
}
#container #ao-latest .ao-recent-media { border-radius: 10px 10px 0 0; }
#container #ao-latest .ao-recent-more { border-radius: 9px; }
/* Hina's existing illustration remains authentic; only the surrounding setting changes. */
#container #ao-navigation-home .ao-navigation-about {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
  padding: clamp(23px,3.5vw,38px);
  border: 1px solid #e7e0ed;
  border-radius: 13px;
  background: url("./ao-home-hina-scene.svg") right center / cover no-repeat, #faf8fd;
}
#container #ao-navigation-home .ao-hina-introduction,
#container #ao-navigation-home .ao-navigation-site-links {
  position: relative;
  z-index: 1;
}
#container #ao-navigation-home .ao-hina-portrait img {
  border: 4px solid #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px #ddd3e9, 0 8px 20px rgba(63,40,89,.09);
}
#container #ao-navigation-home .ao-home-film-note {
  border-radius: 10px;
  background: radial-gradient(circle at 88% 18%,rgba(147,128,189,.16),transparent 36%),#342e3c;
}
/* Responsive visual density: clean, readable mobile cards. */
@media (max-width: 760px) {
  #container #ao-navigation-home .ao-home-hero {
    margin: 0 0 27px;
    padding: 25px 22px 23px;
    gap: 19px;
    background-position: center right;
  }
  #container #ao-navigation-home .ao-home-hero-copy {
    padding: 0 2px;
  }
  #container #ao-navigation-home .ao-home-reading {
    padding: 19px 20px;
    background: rgba(253,251,255,.92);
  }
  #container #ao-navigation-home .ao-home-section-head { padding-inline-start: 19px; }
  #container #ao-navigation-home .ao-home-section-head::before { width: 12px; height: 12px; top: 9px; }
  #container #ao-navigation-home .ao-home-genre {
    padding-right: 21px;
  }
  #container #ao-navigation-home .ao-home-genre::before { width: 50%; opacity: .67; }
  #container #ao-navigation-home .ao-home-genre p { max-width: 81%; }
}
@media (max-width: 480px) {
  #container #ao-navigation-home .ao-home-hero {
    padding: 23px 18px 20px;
    border-radius: 11px;
    background-image: linear-gradient(90deg,rgba(255,253,254,.90),rgba(255,253,254,.58)),
      url("./ao-home-orbit-scene.svg");
  }
  #container #ao-navigation-home .ao-home-hero .ao-home-title { text-shadow: 0 1px 2px #fff; }
  #container #ao-navigation-home .ao-home-reading { border-radius: 8px; }
  #container #ao-navigation-home .ao-home-genre {
    min-height: 158px;
    padding: 20px 18px 28px;
  }
  #container #ao-navigation-home .ao-home-genre p { max-width: 82%; }
  #container #ao-navigation-home .ao-navigation-about { padding: 23px 18px; }
  #container #ao-latest .ao-recent-card { border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #container #ao-navigation-home .ao-home-genre,
  #container #ao-latest .ao-recent-card { transition: none !important; }
}