/* ==========================================================================
   Eliana Capital v14: the hero scene, the 3D phone, calmer layout, smooth motion (loaded after v13.css)
   Remove the v14 links in tools/build.py layout() to go back to v13.
   ========================================================================== */

/* ---------- calmer page: one object, one headline, air ---------- */
.rail{display:none!important}
.mk-slot::before{display:none}
.hero--v10 .hero-word,.hero--v10 .rp{display:none}
html.smooth{scroll-behavior:auto!important}

/* ---------- hero scene (js/hero-scene.js) ---------- */
.hero-photo.scene-on img,.hero-photo.scene-on .hero-sun,.hero-photo.scene-on::before,.hero-photo.scene-on::after{display:none}
.scene-wrap{position:absolute;inset:0;overflow:hidden}
.dscene{position:absolute;inset:0;width:100%;height:100%;display:block}
.dscene .L{transform-box:view-box;opacity:0;translate:0 70px;transition:opacity 1.6s ease,translate 2.2s cubic-bezier(.2,.7,.2,1);will-change:transform}
.scene-in .dscene .L{opacity:1;translate:0 0}
.scene-in .dscene .L:nth-child(2){transition-delay:.1s}.scene-in .dscene .L:nth-child(3){transition-delay:.2s}
.scene-in .dscene .L:nth-child(4){transition-delay:.3s}.scene-in .dscene .L:nth-child(5){transition-delay:.4s}
.scene-in .dscene .L:nth-child(6){transition-delay:.5s}.scene-in .dscene .L:nth-child(7){transition-delay:.62s}
.scene-in .dscene .L:nth-child(8){transition-delay:.76s}.scene-in .dscene .L:nth-child(9){transition-delay:.9s}
.dscene .rays .spin{animation:rays 140s linear infinite;transform-box:view-box;transform-origin:0 0}
@keyframes rays{to{rotate:360deg}}
.dscene .win{animation:win 5s ease-in-out infinite alternate}
@keyframes win{from{opacity:.55}to{opacity:.95}}
.dscene .clouds .c1{animation:cl 60s ease-in-out infinite alternate}
.dscene .clouds .c2{animation:cl 80s ease-in-out infinite alternate-reverse}
.dscene .clouds .c3{animation:cl 70s ease-in-out infinite alternate}
@keyframes cl{to{translate:140px 0}}
.dscene .gr path,.dscene .gr g path{transform-box:fill-box}
.dscene .gr .b0{fill:#1f5a35}.dscene .gr .b1{fill:#2f7a45}.dscene .gr .b2{fill:#5fa052}
.dscene .gl .b0{fill:#0d3b2a}.dscene .gl .b1{fill:#1d5a38}.dscene .gl .b2{fill:#2f7a45}
.dscene .hd path{fill:#f3d58c}.dscene .hd .pl2{fill:#fff1c4}
.dscene .sway{transform-box:fill-box;transform-origin:50% 100%}
.dscene .s1{animation:sw 11s ease-in-out infinite alternate}
.dscene .s2{animation:sw 7s ease-in-out infinite alternate}
.dscene .s3{animation:sw 9s ease-in-out infinite alternate-reverse}
@keyframes sw{from{rotate:-1.1deg}to{rotate:1.5deg}}
.hero-photo{-webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
.hero-photo::after{display:none}

/* ---------- hero layout: headline lifts away as you scroll ---------- */
.hero--v10 h1{color:var(--blue);translate:0 calc(var(--hs,0) * -70px);opacity:calc(1 - var(--hs,0) * .9)}
.hero--v10 .chip-live{opacity:calc(1 - var(--hs,0) * 1.4)}
.hero--v10{--slot:clamp(280px,52vh,500px)}
.hero--v10 .hero-stage{--slot:clamp(280px,50vh,480px);margin-top:-34px}
.hero--v10 .hs-left,.hero--v10 .hs-right{background:rgba(254,254,241,.84)}
.hero--v10 .hs-right{align-self:end;margin-bottom:6vh}
.hero--v10 .hs-left{align-self:end;margin-bottom:6vh}

/* ---------- the 3D phone sits in the .mk the hands used to ---------- */
.mk.has-3d>svg{display:none}
.mk .mk-phone{display:block;width:100px;height:100px;filter:drop-shadow(0 20px 22px rgba(1,3,149,.28))}
.mk.on-dark .mk-phone{filter:drop-shadow(0 18px 22px rgba(0,0,30,.5))}
.mk-slot{--s:clamp(190px,21vw,300px)}
.mk-slot--c{--s:clamp(170px,18vw,230px)}
.mk-slot--cta{--s:clamp(230px,30vw,400px)}

/* ---------- callouts around the phone, joined by dotted lines ---------- */
.hero-slot .orbit{position:absolute;z-index:3;white-space:nowrap;background:rgba(254,254,241,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(1,3,149,.14);animation:none;translate:calc(var(--px,0) * 8px) calc(var(--py,0) * 6px)}
.hero-slot .orbit::after{content:"";position:absolute;top:50%;height:0;width:var(--len,70px);border-top:1.5px dashed rgba(1,3,149,.4)}
.hero-slot .o1{right:86%;left:auto;top:14%;bottom:auto;--len:clamp(40px,6vw,110px)}
.hero-slot .o1::after{left:100%}
.hero-slot .o2{left:88%;right:auto;top:22%;bottom:auto;--len:clamp(40px,6vw,110px)}
.hero-slot .o2::after{right:100%}
.hero-slot .o3{right:90%;left:auto;bottom:16%;top:auto;--len:clamp(40px,6vw,110px)}
.hero-slot .o3::after{left:100%}
@media (max-width:1100px){.hero-slot .orbit{display:none}}
.hero--v10 .hero-slot .orbit{opacity:calc(1 - var(--hs,0) * 1.6)}

/* ---------- cursor ring ---------- */
.cur{position:fixed;left:0;top:0;z-index:9999;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .3s}
.cur.on{opacity:1}
.cur::before{content:"";position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);mix-blend-mode:difference;
  transition:width .35s var(--ease),height .35s var(--ease),left .35s var(--ease),top .35s var(--ease),background .35s}
.cur.is-link::before{left:-30px;top:-30px;width:60px;height:60px;background:rgba(255,255,255,.18)}
.cur.is-view::before{left:-46px;top:-46px;width:92px;height:92px;background:#fefef1;border-color:#fefef1;mix-blend-mode:normal;box-shadow:0 8px 30px rgba(1,3,149,.22)}
.cur span{position:absolute;left:-46px;top:-9px;width:92px;text-align:center;font:500 .8rem/18px var(--font);color:var(--blue);opacity:0;transition:opacity .25s}
.cur.is-view span{opacity:1}

/* ---------- the giant band leans into the scroll ---------- */
.giant-track span{display:inline-block;transform:skewX(calc(var(--vel,0) * -.28deg))}

@media (max-width:960px){
  .hero--v10,.hero--v10 .hero-stage{--slot:min(78vw,380px)}
  .hero--v10 .hero-stage{margin-top:22px}
  .hero--v10 .hs-left,.hero--v10 .hs-right{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .dscene .L{opacity:1;translate:none;transition:none}
  .dscene .rays .spin,.dscene .win,.dscene .clouds *,.dscene .sway{animation:none}
  .hero--v10 h1,.hero--v10 .chip-live,.hero--v10 .hero-slot .orbit{translate:none;opacity:1}
}
