/* Minimal Iris-inspired homepage — scoped to #feng-home to avoid changing articles. */
:root {
  --home-bg: #0a0d14;
  --home-card: rgba(18, 23, 34, .78);
  --home-card-hover: rgba(23, 30, 44, .94);
  --home-line: rgba(151, 168, 201, .14);
  --home-text: #f4f7fb;
  --home-muted: #9aa6b8;
  --home-blue: #7ca7ff;
  --home-purple: #ad8cff;
  --home-green: #67d9a4;
}

/* The landing page uses quiet atmosphere instead of continuously animated particles. */
body:has(#feng-home) #tech-particles,
body:has(#feng-home) #tech-hud-frame { display: none !important; }
body:has(#feng-home)::before { opacity: .12 !important; animation: none !important; }
body:has(#feng-home) {
  background:
    radial-gradient(50rem 32rem at 72% -5%, rgba(95, 108, 215, .13), transparent 70%),
    radial-gradient(38rem 30rem at 18% 12%, rgba(51, 131, 190, .10), transparent 72%),
    var(--home-bg) !important;
}

.feng-home { color: var(--home-text); padding: 0 0 1rem; }
.feng-home *, .feng-home *::before, .feng-home *::after { box-sizing: border-box; }
.feng-home a { text-decoration: none !important; }

.feng-hero {
  position: relative;
  left: 50%;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  margin-left: -50vw;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--home-line);
  background:
    radial-gradient(44rem 34rem at 68% 22%, rgba(105, 99, 220, .12), transparent 72%),
    radial-gradient(40rem 30rem at 28% 44%, rgba(44, 129, 194, .09), transparent 72%);
}
.feng-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(151,168,201,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151,168,201,.055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}
.feng-hero-inner {
  width: min(1080px, calc(100% - 3rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  padding: clamp(5rem, 10vh, 7.5rem) 0;
}
.feng-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.15rem, 3vh, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  color: #66748a !important;
  font: 650 .56rem/1 ui-monospace, monospace;
  letter-spacing: .18em;
  transform: translateX(-50%);
}
.feng-scroll-cue i {
  width: 1px;
  height: 24px;
  background: linear-gradient(var(--home-blue), transparent);
  transform-origin: top;
  animation: feng-scroll-line 1.8s ease-in-out infinite;
}
.feng-eyebrow, .feng-section-head p, .feng-post-heading p {
  margin: 0 0 .8rem; color: var(--home-blue); font: 700 .7rem/1.3 ui-monospace, monospace;
  letter-spacing: .18em;
}
.feng-eyebrow { display: flex; align-items: center; gap: .7rem; }
.feng-eyebrow span { width: 24px; height: 1px; background: var(--home-blue); box-shadow: 0 0 10px rgba(124,167,255,.5); }
.feng-hero h1 { margin: 0; color: #fff !important; font-size: clamp(2.8rem, 6vw, 5.4rem); line-height: 1.02; letter-spacing: -.055em; }
.feng-hero h1 em { color: var(--home-blue); font-style: normal; }
.feng-wave { display: inline-block; font-size: .55em; transform-origin: 70% 70%; animation: feng-wave 2.8s ease-in-out 1s 2; }
.feng-lead { margin: 1.5rem 0 .45rem; color: #e7ecf5; font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 650; }
.feng-description { max-width: 570px; margin: 0; color: var(--home-muted); font-size: .98rem; line-height: 1.9; }
.feng-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.feng-button {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .65rem 1.15rem; color: #dfe7f5 !important; border: 1px solid var(--home-line);
  border-radius: 12px; background: rgba(255,255,255,.035); transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.feng-button.primary { color: #09101c !important; border-color: transparent; background: #8bb1ff; font-weight: 750; }
.feng-button:hover { transform: translateY(-2px); border-color: rgba(139,177,255,.48); background: rgba(124,167,255,.09); }
.feng-button.primary:hover { background: #a1c0ff; }
.feng-social { display: flex; align-items: center; gap: .6rem; margin-top: 1.35rem; color: #566278; font-size: .82rem; }
.feng-social a { color: #8f9bad !important; transition: color .2s ease; }
.feng-social a:hover { color: #dce7fa !important; }

.feng-profile-card {
  position: relative; overflow: hidden; padding: 1.35rem; border: 1px solid var(--home-line); border-radius: 22px;
  background: linear-gradient(145deg, rgba(24,30,44,.86), rgba(13,17,26,.82));
  box-shadow: 0 24px 70px rgba(0,0,0,.24); transition: transform .25s ease, border-color .25s ease;
}
.feng-profile-card::before { content:""; position:absolute; width:180px; height:180px; right:-70px; top:-90px; border-radius:50%; background:rgba(111,106,220,.12); filter:blur(1px); }
.feng-profile-card:hover { transform: translateY(-4px); border-color: rgba(139,177,255,.3); }
.feng-profile-top { position:relative; display:flex; align-items:center; gap:.8rem; padding-bottom:1.15rem; border-bottom:1px solid var(--home-line); }
.feng-avatar { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:#111827; background:linear-gradient(135deg,#a8c4ff,#9e91ff); font-size:1.15rem; font-weight:850; }
.feng-profile-top strong { display:block; color:#fff; font-size:1rem; }
.feng-profile-top small { display:block; margin-top:.2rem; color:#758297; font:600 .6rem/1.2 ui-monospace,monospace; letter-spacing:.1em; }
.feng-online { margin-left:auto; width:8px; height:8px; border-radius:50%; background:#62daa1; box-shadow:0 0 0 5px rgba(98,218,161,.1); }
.feng-profile-card > p { margin:1.15rem 0; color:#cbd4e2; font-size:.9rem; }
.feng-profile-card dl { margin:0; }
.feng-profile-card dl div { display:flex; justify-content:space-between; gap:1rem; padding:.48rem 0; font-size:.78rem; }
.feng-profile-card dt { color:#77849a; }
.feng-profile-card dd { margin:0; color:#cbd4e2; text-align:right; }
.feng-profile-card .is-online { color:#73dfaa; }
.feng-terminal { margin-top:1rem; padding:.65rem .75rem; border-radius:9px; color:#8e9cb1; background:#090c12; font:600 .68rem/1 ui-monospace,monospace; }
.feng-terminal span { margin-right:.5rem; color:#72daa6; }
.feng-terminal i { display:inline-block; width:5px; height:12px; margin-left:4px; vertical-align:-2px; background:#72839e; animation:feng-blink 1.1s steps(1) infinite; }

.feng-section { padding: clamp(3rem, 7vw, 5.5rem) 0 2rem; }
.feng-section-head, .feng-post-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.feng-section-head h2, .feng-post-heading h2 { margin:0; color:#f6f8fc !important; font-size:clamp(1.65rem,3vw,2.2rem); letter-spacing:-.03em; }
.feng-section-head > span { color:rgba(137,154,186,.16); font:800 3.4rem/1 ui-monospace,monospace; }
.feng-bento { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.feng-card {
  min-height:175px; position:relative; display:flex; align-items:flex-start; gap:1rem; padding:1.25rem;
  color:inherit !important; border:1px solid var(--home-line); border-radius:18px; background:var(--home-card);
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.feng-card:hover { transform:translateY(-3px); border-color:rgba(139,177,255,.3); background:var(--home-card-hover); box-shadow:0 16px 40px rgba(0,0,0,.15); }
.feng-card-icon { flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; font:750 1rem/1 ui-monospace,monospace; }
.feng-card-icon.blue { color:#9dbbff; background:rgba(89,131,226,.14); }
.feng-card-icon.purple { color:#c1aaff; background:rgba(151,111,226,.14); }
.feng-card-icon.green { color:#78deb0; background:rgba(78,190,137,.13); }
.feng-card-icon.amber { color:#efc47b; background:rgba(210,151,57,.13); }
.feng-card-icon.cyan { color:#79d9e8; background:rgba(64,178,198,.13); }
.feng-card small { color:#718096; font:650 .6rem/1.2 ui-monospace,monospace; letter-spacing:.12em; }
.feng-card h3 { margin:.35rem 0 .5rem; color:#eff3fa !important; font-size:1.05rem; }
.feng-card p { margin:0; color:#8e9aac; font-size:.78rem; line-height:1.7; }
.feng-card > b { margin-left:auto; color:#64738a; font-weight:400; transition:transform .2s ease,color .2s ease; }
.feng-card:hover > b { color:#a9c3fa; transform:translate(2px,-2px); }
.feng-featured { grid-row:span 2; min-height:360px; align-items:flex-end; overflow:hidden; }
.feng-featured::before { content:"408"; position:absolute; top:38px; right:-2px; color:rgba(124,167,255,.055); font:900 8rem/1 ui-monospace,monospace; letter-spacing:-.12em; }
.feng-featured > .feng-card-icon { position:absolute; top:1.25rem; left:1.25rem; }
.feng-featured > div { position:relative; }
.feng-featured p { max-width:360px; }
.feng-latest { grid-column:1/-1; min-height:130px; align-items:center; }
.feng-pills { display:flex; flex-wrap:wrap; gap:.4rem; }
.feng-pills span { padding:.28rem .5rem; border:1px solid var(--home-line); border-radius:999px; color:#aab5c7; background:rgba(255,255,255,.025); font-size:.66rem; }


/* Phase 2/3 content portals */
.feng-portal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.feng-portal{position:relative;min-height:190px;display:flex;align-items:flex-start;gap:1rem;padding:1.35rem;color:inherit!important;border:1px solid var(--home-line);border-radius:20px;background:linear-gradient(145deg,rgba(19,25,38,.84),rgba(12,17,26,.78));overflow:hidden;transition:border-color .22s ease,background .22s ease,box-shadow .22s ease}
.feng-portal:hover{border-color:rgba(139,177,255,.35);background:var(--home-card-hover);box-shadow:0 18px 44px rgba(0,0,0,.16)}
.feng-portal.wide{grid-column:1/-1;min-height:220px;align-items:flex-end;background:radial-gradient(36rem 20rem at 90% 0,rgba(93,109,230,.16),transparent 70%),var(--home-card)}
.feng-portal>i{flex:0 0 auto;color:rgba(145,170,220,.35);font:800 .72rem/1 ui-monospace,monospace;font-style:normal;letter-spacing:.1em}
.feng-portal>div{min-width:0;flex:1}.feng-portal small{color:var(--home-blue);font:700 .6rem/1 ui-monospace,monospace;letter-spacing:.14em}.feng-portal h3{margin:.55rem 0 .55rem;color:#f3f6fc!important;font-size:1.12rem}.feng-portal p{margin:0;color:#8996aa;font-size:.79rem;line-height:1.75}.feng-portal>b{align-self:flex-end;color:#7788a2;font-size:.7rem;white-space:nowrap}.feng-portal.categories{grid-column:span 1;min-height:270px}
.feng-category-links,.feng-tag-links{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem}.feng-category-links a,.feng-tag-links a{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .55rem;border:1px solid var(--home-line);border-radius:9px;color:#aeb9ca!important;background:rgba(255,255,255,.025);font-size:.68rem}.feng-category-links a span{color:#66758c}.feng-tag-links a{border-radius:999px;color:#8795aa!important}.feng-category-links a:hover,.feng-tag-links a:hover{color:#dce7fa!important;border-color:rgba(139,177,255,.34)}.feng-empty{color:#66758c;font-size:.72rem}
.feng-advanced{padding-top:clamp(3rem,7vw,5rem)}.feng-advanced-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.feng-advanced-card{min-height:112px;display:flex;align-items:center;gap:1rem;padding:1.1rem;border:1px solid var(--home-line)!important;border-radius:17px!important;color:inherit!important;background:rgba(15,21,32,.74)!important;text-align:left;cursor:pointer;box-shadow:none!important;transition:border-color .2s ease,background .2s ease!important}.feng-advanced-card:first-child{grid-column:1/-1}.feng-advanced-card:hover{border-color:rgba(139,177,255,.35)!important;background:rgba(24,31,45,.9)!important}.feng-advanced-card>span{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#a7c0fb;background:rgba(107,146,230,.12);font:700 1.15rem/1 ui-monospace,monospace}.feng-advanced-card>div{min-width:0;flex:1}.feng-advanced-card h3{margin:0 0 .35rem;color:#eef3fb!important;font-size:.95rem}.feng-advanced-card p{margin:0;color:#7f8da3;font-size:.72rem}.feng-advanced-card>b{color:#66768e;font:600 .62rem/1 ui-monospace,monospace;white-space:nowrap}

.feng-stats { display:flex; align-items:center; justify-content:space-around; margin:1.5rem 0 5rem; padding:1.1rem; border-top:1px solid var(--home-line); border-bottom:1px solid var(--home-line); }
.feng-stats div { display:flex; align-items:baseline; gap:.45rem; }
.feng-stats strong { color:#e8eef8; font-size:1.05rem; }
.feng-stats span { color:#748197; font-size:.68rem; }
.feng-stats i { width:1px; height:20px; background:var(--home-line); }
.feng-post-heading { margin-bottom:1.2rem; }
.feng-post-heading a { color:#8593a8 !important; font-size:.76rem; }
.feng-post-heading a:hover { color:#a9c3fa !important; }

/* Make Stellar's existing cards visually continue the landing page. */
body:has(#feng-home) .post-list .post-card { border-radius:16px !important; background:rgba(18,23,34,.72) !important; border-color:var(--home-line) !important; box-shadow:none !important; }
body:has(#feng-home) .post-list .post-card:hover { border-color:rgba(139,177,255,.28) !important; box-shadow:0 14px 35px rgba(0,0,0,.15) !important; }


/* Homepage desktop layout: give the landing page the entire area beside
   Stellar's left navigation instead of centering it in the narrow article column. */
@media (min-width: 769px) {
  body:has(#feng-home) .l_body.index {
    width: 100%;
    max-width: none;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-gap: 0;
    margin: 0;
  }
  body:has(#feng-home) .l_body.index > .l_left { grid-column: 1; }
  body:has(#feng-home) .l_body.index > .l_main {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  body:has(#feng-home) .l_body.index > .l_right { display: none !important; }
  body:has(#feng-home) .feng-hero {
    left: auto;
    width: 100%;
    margin-left: 0;
  }
  body:has(#feng-home) .feng-section,
  body:has(#feng-home) .feng-stats,
  body:has(#feng-home) .feng-post-heading,
  body:has(#feng-home) .post-list,
  body:has(#feng-home) .paginator,
  body:has(#feng-home) .nav-tabs {
    width: min(1080px, calc(100% - 3rem));
    margin-left: auto;
    margin-right: auto;
  }
}

/* Scroll-linked typography. JS only updates two custom properties in one rAF;
   transforms/opacity stay on the compositor and do not trigger layout. */
.feng-scroll-text {
  --feng-scroll-scale: 1;
  --feng-scroll-opacity: 1;
  --feng-scroll-y: 0px;
  --feng-scroll-blur: 0px;
  opacity: var(--feng-scroll-opacity);
  filter: blur(var(--feng-scroll-blur));
  transform: translate3d(0, var(--feng-scroll-y), 0) scale(var(--feng-scroll-scale));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.feng-hero-copy.feng-scroll-text { transform-origin: left center; }
.feng-scroll-text.is-scroll-idle { will-change: auto; }

@keyframes feng-wave { 0%,100%{transform:rotate(0)} 25%{transform:rotate(14deg)} 50%{transform:rotate(-8deg)} 75%{transform:rotate(12deg)} }
@keyframes feng-blink { 50%{opacity:0} }
@keyframes feng-scroll-line { 0%,100%{transform:scaleY(.35);opacity:.35} 50%{transform:scaleY(1);opacity:1} }

@media (max-width: 760px) {
  .feng-home { padding-top:0; }
  .feng-hero { left:auto; width:100%; margin-left:0; min-height:100vh; min-height:100svh; }
  .feng-hero-inner { width:min(100% - 2rem, 560px); grid-template-columns:1fr; gap:2.2rem; padding:5rem 0 4.5rem; }
  .feng-hero h1 { font-size:clamp(2.55rem,14vw,4rem); }
  .feng-description br { display:none; }
  .feng-profile-card { max-width:460px; }
  .feng-bento,.feng-portal-grid,.feng-advanced-grid { grid-template-columns:1fr; }
  .feng-portal.wide,.feng-advanced-card:first-child { grid-column:auto; }
  .feng-featured { grid-row:auto; min-height:250px; }
  .feng-latest { grid-column:auto; }
  .feng-stats { margin-bottom:3.5rem; padding:.9rem .25rem; }
  .feng-stats div { display:block; text-align:center; }
  .feng-stats strong,.feng-stats span { display:block; }
  .feng-stats span { margin-top:.22rem; }
}
@media (max-width: 420px) {
  .feng-actions { flex-direction:column; }
  .feng-button { width:100%; }
  .feng-card { min-height:160px; }
  .feng-stats div:last-child,.feng-stats i:last-of-type { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .feng-home *, .feng-home *::before, .feng-home *::after { animation:none !important; transition:none !important; }
}