/* Demigodse7en homepage experience layer.
   Loaded explicitly by index.html. Owns the perception centerpiece,
   compact directory, shared-moment emphasis and lightweight motion refinements. */

/* --- Hero depth: subtle scroll motion survives on mobile. --- */
body.home-page .hero::after{
  transform:translate3d(0,var(--hero-ghost-y,0px),0);
  will-change:transform;
}
body.home-page .hero-atmosphere{
  transform:translate3d(0,var(--hero-atmosphere-y,0px),0);
  will-change:transform;
}

/* --- Working method: keep the mantra horizontal and compact. --- */
body.home-page .principle{padding:62px 0}
body.home-page .principle-grid{grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);gap:44px}
body.home-page .principle-copy>p:last-child{max-width:680px;line-height:1.62}
body.home-page .principle-stack{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  padding:18px 20px;
  font-size:clamp(.88rem,1.55vw,1.22rem);
  letter-spacing:.01em;
}
body.home-page .principle-stack>*{display:block;margin:0!important;padding:4px 13px;text-align:center;white-space:nowrap}
body.home-page .principle-stack>*+*{border-left:1px solid rgba(217,154,32,.22)}
body.home-page .principle-stack strong{font-size:1em}

/* --- Perception lab: experience first, explanation second. --- */
body.home-page .experience-focus{
  padding:86px 0 88px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 38%,rgba(139,92,246,.10),transparent 24%),
    radial-gradient(circle at 82% 60%,rgba(23,74,139,.08),transparent 30%),
    #fffdf7;
}
body.home-page .experience-focus::after{
  content:"PERCEPTION / 01";
  position:absolute;
  right:-.02em;
  top:10px;
  z-index:-1;
  color:rgba(16,26,50,.028);
  font:900 clamp(4.5rem,12vw,10rem)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:-.09em;
  pointer-events:none;
}
body.home-page .experience-focus .experience-grid{min-height:520px;align-items:center}
body.home-page .experience-focus .experience-visual{
  min-height:440px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:26px;
  padding:50px 28px 27px;
  border:1px solid rgba(139,92,246,.22);
  box-shadow:14px 14px 0 rgba(16,26,50,.045),0 28px 70px rgba(16,26,50,.10);
  background:
    radial-gradient(circle at center,rgba(139,92,246,.08),transparent 44%),
    linear-gradient(135deg,#eee7db,#fffdf7 62%);
}
body.home-page .experience-focus .experience-visual::after{
  content:"LOOK / HOLD / NOTICE";
  position:absolute;
  right:18px;
  top:17px;
  color:rgba(16,26,50,.38);
  font:800 .52rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.16em;
}
body.home-page .experience-focus .blindspot-demo{width:min(390px,82%);flex:0 0 auto}
body.home-page .experience-focus .blindspot-plus,
body.home-page .experience-focus .blindspot-x{
  width:72px;
  height:72px;
  border-radius:2px;
  box-shadow:8px 8px 0 rgba(16,26,50,.055);
}
body.home-page .experience-focus .blindspot-demo i{width:210px;height:210px;border-color:rgba(139,92,246,.24)}
.blindspot-instructions{
  position:relative;
  z-index:3;
  width:min(100%,560px);
  padding:16px 18px 15px;
  border-left:3px solid #8b5cf6;
  background:linear-gradient(90deg,rgba(139,92,246,.075),rgba(255,255,255,.42));
  text-align:left;
}
.blindspot-instructions>span{
  display:block;
  margin-bottom:7px;
  color:#6b4db4;
  font:850 .55rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.blindspot-instructions h3{margin:0 0 8px;font-size:1.18rem;letter-spacing:-.02em}
.blindspot-instructions p{margin:0;color:#424b59;font:560 .78rem/1.6 system-ui,sans-serif}
.blindspot-instructions small{
  display:block;
  margin-top:9px;
  color:#766c5d;
  font:760 .58rem/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.045em;
}
body.home-page .experience-focus .experience-copy h2{max-width:720px;font-size:clamp(2.8rem,5.35vw,4.9rem)}
body.home-page .experience-punch{
  max-width:700px!important;
  margin:20px 0 0!important;
  padding:16px 18px;
  border-left:3px solid #8b5cf6;
  background:linear-gradient(90deg,rgba(139,92,246,.075),transparent);
  color:var(--d7-navy)!important;
  font:650 .9rem/1.65 system-ui,sans-serif!important;
}

/* --- Pick a Thread is a directory, not another chapter. --- */
body.home-page .explore{padding:56px 0 64px}
body.home-page .explore .section-head{margin-bottom:20px}
body.home-page .explore .section-head h2{font-size:clamp(2rem,3.45vw,2.95rem)}
body.home-page .explore .section-head>p{max-width:390px;font-size:.76rem;line-height:1.55}
body.home-page .realm-grid{gap:11px}
body.home-page .realm,
body.home-page .realm-feature{
  min-height:195px;
  padding:18px 17px 16px;
  box-shadow:6px 6px 0 rgba(16,26,50,.035),0 11px 25px rgba(58,42,18,.045);
}
body.home-page .realm-feature{min-height:208px}
body.home-page .realm-icon{
  width:45px;
  height:45px;
  margin-bottom:16px;
  font-size:1.08rem;
  box-shadow:4px 4px 0 color-mix(in srgb,var(--realm-accent),transparent 80%);
}
body.home-page .realm h3{font-size:1.08rem;margin-bottom:6px}
body.home-page .realm p{font-size:.69rem;line-height:1.5}
body.home-page .realm b{padding-top:12px;font-size:.57rem}
body.home-page .realm-index{right:12px;top:12px;font-size:.54rem}

/* --- Selected observations: evergreen framing, kept near the bottom. --- */
body.home-page .latest{padding:78px 0 86px}
body.home-page .latest::before{content:"SELECTED / OBSERVATIONS / 07"}

/* --- Shared Moment belongs near the beginning and should feel important, not endless. --- */
body.home-page .shared-moment{padding:92px 0 98px}
body.home-page .shared-moment h2{font-size:clamp(3rem,5.8vw,5.25rem)}
body.home-page .shared-moment .shared-inner>p:not(.section-kicker){max-width:790px;font-size:.9rem;line-height:1.68}
body.home-page .shared-actions{margin-top:27px}

/* --- Elsewhere remains a footer rail, not another chapter. --- */
body.home-page .connect{
  padding:18px 0 20px;
  text-align:left;
  background:#f2ecdf;
  border-top:1px solid rgba(169,110,16,.16);
}
body.home-page .connect-rail{display:flex;align-items:center;gap:22px}
body.home-page .connect .section-kicker{margin:0;white-space:nowrap}
body.home-page .social-grid{flex:1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}
body.home-page .social-card{
  min-height:38px;
  padding:0 10px;
  flex:0 0 auto;
  border-radius:2px;
  box-shadow:none;
  background:rgba(255,253,247,.55);
}
body.home-page .social-card img{width:17px;height:17px}
body.home-page .social-card span{font-size:.58rem}

@media(max-width:900px){
  body.home-page .principle{padding:54px 0}
  body.home-page .principle-grid{grid-template-columns:1fr;gap:26px}
  body.home-page .principle-stack{max-width:680px}
  body.home-page .experience-focus{padding:72px 0 74px}
  body.home-page .experience-focus .experience-grid{min-height:0}
  body.home-page .experience-focus .experience-visual{min-height:410px}
}
@media(max-width:760px){
  body.home-page .hero-art{
    transform:translate3d(0,var(--scroll-y,0px),0)!important;
    will-change:transform;
  }
  body.home-page .principle-stack{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 8px;font-size:clamp(.66rem,3.3vw,.9rem)}
  body.home-page .principle-stack>*{padding:3px 7px}
  body.home-page .experience-focus{padding:60px 0 62px}
  body.home-page .experience-focus .experience-visual{min-height:365px;padding:48px 18px 20px;gap:18px}
  body.home-page .experience-focus .blindspot-plus,
  body.home-page .experience-focus .blindspot-x{width:60px;height:60px}
  body.home-page .experience-focus .blindspot-demo i{width:168px;height:168px}
  .blindspot-instructions{padding:13px 14px 12px}
  .blindspot-instructions h3{font-size:1rem}
  .blindspot-instructions p{font-size:.7rem}
  body.home-page .explore{padding:48px 0 54px}
  body.home-page .realm,body.home-page .realm-feature{min-height:178px;padding:15px 13px}
  body.home-page .realm-icon{width:41px;height:41px;margin-bottom:13px}
  body.home-page .shared-moment{padding:72px 0 78px}
  body.home-page .shared-moment h2{font-size:3.05rem}
  body.home-page .shared-moment .shared-inner>p:not(.section-kicker){font-size:.8rem}
  body.home-page .connect-rail{align-items:flex-start;gap:12px}
  body.home-page .social-grid{justify-content:flex-start}
}
@media(max-width:470px){
  body.home-page .principle-stack{font-size:.62rem;letter-spacing:-.01em}
  body.home-page .principle-stack>*{padding-inline:5px}
  body.home-page .experience-focus .experience-visual{min-height:340px}
  body.home-page .explore .realm,
  body.home-page .explore .realm-feature{min-height:142px;padding:12px 10px}
  body.home-page .explore .realm p{display:none}
  body.home-page .shared-moment{padding:62px 0 68px}
  body.home-page .shared-moment h2{font-size:2.6rem}
  body.home-page .connect-rail{display:block}
  body.home-page .connect .section-kicker{margin-bottom:10px}
  body.home-page .social-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  body.home-page .social-card{justify-content:flex-start;padding:0 8px}
}
@media(prefers-reduced-motion:reduce){
  body.home-page .experience-focus *{transition:none!important}
}