/* ============================================================
   Home page: the morphing form sits behind the page
   Loads after style.css, only on index.html
   ============================================================ */

/* fixed canvas behind everything, content above it */
#world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.hero,.stats,.marquee,section,footer{position:relative;z-index:1}

/* sections that had solid backgrounds now let the form show through */
.proof,.recog{background:linear-gradient(180deg,rgba(10,32,32,0),rgba(10,32,32,.55) 20%,rgba(10,32,32,.55) 80%,rgba(10,32,32,0))}
.stats,.marquee{background:rgba(10,32,32,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.now-card,.exp-card,.art-card,.terminal,.badge{background:rgba(18,48,48,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.exp-card:hover,.art-card:hover{background:rgba(18,48,48,.9)}

/* a soft vignette behind text-heavy columns so copy stays readable over the form */
.hero-grid>div:first-child,.about-grid,.tl,.speak-grid,.proof-copy,.sec-head{position:relative}
.hero-grid>div:first-child::before,.about-grid::before,.tl::before,.speak-grid::before,.proof-copy::before,.sec-head::before{content:'';position:absolute;inset:-40px -60px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(12,38,38,.95),rgba(12,38,38,.6) 60%,rgba(12,38,38,0))}
.rec-row{background:rgba(10,32,32,.55)}
.rec-row:hover{background:rgba(201,169,106,.14)}
.cta::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 50% 45%,rgba(10,32,32,.9),rgba(10,32,32,0));pointer-events:none}

/* journey line: a touch more presence over the form */
.tl-progress{box-shadow:0 0 14px rgba(201,169,106,.6)}

@media(max-width:900px){
  .hero-grid>div:first-child::before,.about-grid::before,.tl::before,.speak-grid::before,.proof-copy::before,.sec-head::before{inset:-20px}
}

/* ---------- hero portrait: large, dissolving into the page, chair and all ---------- */
.hero{overflow:hidden}
.hero-grid{grid-template-columns:1fr 1fr;align-items:end}
.portrait-wrap{width:100%;max-width:620px;justify-self:end;align-self:end;margin-bottom:-70px}
.portrait-frame{display:none}
.portrait{border:none;border-radius:0;aspect-ratio:900/1187;height:min(90vh,940px);width:auto;max-width:100%;margin-left:auto;background:transparent;
  -webkit-mask-image:radial-gradient(ellipse 52% 64% at 50% 40%,#000 48%,rgba(0,0,0,.55) 78%,transparent 100%);
  mask-image:radial-gradient(ellipse 52% 64% at 50% 40%,#000 48%,rgba(0,0,0,.55) 78%,transparent 100%)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:none;filter:saturate(.9) contrast(1.06) brightness(.97)}
.portrait::after{background:linear-gradient(180deg,rgba(12,38,38,0) 50%,rgba(12,38,38,.5) 80%,rgba(12,38,38,.95))}
.badge{left:auto;right:-6px;bottom:120px;z-index:2}
.hero-grid>div:first-child{align-self:center;padding-bottom:60px}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .portrait-wrap{max-width:420px;justify-self:center;margin-bottom:-40px}
  .portrait{height:min(70vh,640px)}
  .badge{right:0;bottom:90px}
}