/* Hamiltonn Cloud — cinematic motion layer v1.1.0 (additive, hc- namespace) */

/* ---------- Scroll progress ---------- */
.hc-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#2B4EDD,#6D4AEF);z-index:1200;pointer-events:none}

/* ---------- Full-screen intro (home, once per session) ---------- */
.hc-intro{position:fixed;inset:0;z-index:1400;background:radial-gradient(880px 600px at 50% 44%,#101A33,#0A0F1E 76%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;animation:hcIntroOut .8s cubic-bezier(.22,.61,.36,1) 2.1s forwards}
.intro-seen .hc-intro{display:none}
.hc-intro-mark{position:relative;width:min(320px,74vw);height:auto;display:grid;place-items:center}
.hc-intro-mark img{display:block;width:100%;height:auto;opacity:0;transform:scale(.9);animation:hcIntroItem .75s cubic-bezier(.22,.61,.36,1) .22s forwards}
.hc-intro-ring{display:none}
.hc-intro-ring::after{display:none}
.hc-intro-word{margin:0;font-size:24px;font-weight:640;color:#fff;letter-spacing:.32em;text-indent:.32em;opacity:0;animation:hcIntroWord 1s cubic-bezier(.22,.61,.36,1) .48s forwards}
.hc-intro-word i{font-style:normal;color:#7D96FF;font-weight:420}
.hc-intro-sub{margin:0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8FA3E8;opacity:0;animation:hcIntroItem .75s cubic-bezier(.22,.61,.36,1) .85s forwards}
@keyframes hcIntroItem{to{opacity:1;transform:none}}
@keyframes hcIntroRing{to{opacity:1;transform:rotate(0deg) scale(1)}}
@keyframes hcIntroWord{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.32em}}
@keyframes hcIntroOut{to{opacity:0;transform:translateY(-3%);visibility:hidden;pointer-events:none}}

/* ---------- Hero: gradient headline + floating mockup ---------- */
.hc-grad{background:linear-gradient(95deg,#2B4EDD 10%,#6D4AEF 55%,#2B4EDD 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hcGrad 8s linear infinite}
@keyframes hcGrad{to{background-position:-200% 0}}
.hero--home .hero-visual .app{animation:hcFloat 7s ease-in-out infinite alternate}
@keyframes hcFloat{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* ---------- Primary button shine ---------- */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .55s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.btn--primary:hover::after{left:130%}

/* ---------- Horizontal product tour (Three clouds, desktop) ---------- */
.hc-rail-wrap{overflow:hidden}
.stack.is-rail{display:flex !important;flex-wrap:nowrap;gap:28px;width:max-content;will-change:transform}
.stack.is-rail .family{width:min(1140px,calc(100vw - 64px));flex:none}
.hc-rail-meta{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
.hc-rail-dots{display:flex;gap:10px}
.hc-rail-dots i{width:34px;height:3px;border-radius:2px;background:#CDD5E1;transition:background .3s}
.hc-rail-dots i.on{background:linear-gradient(90deg,#2B4EDD,#6D4AEF)}
.hc-rail-hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8A93A8;font-weight:640}

/* ---------- Dark-section plexus video ---------- */
.hc-has-video{position:relative;overflow:hidden}
.hc-has-video>.container{position:relative;z-index:1}
.hc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.hc-video.on{opacity:.3}

/* ---------- Mockup tilt ---------- */
.app{transform-style:preserve-3d}

/* ---------- Back to top ---------- */
.hc-top{position:fixed;right:24px;bottom:24px;z-index:900;width:44px;height:44px;border:1px solid #CDD5E1;border-radius:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:#2B4EDD;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s cubic-bezier(.22,.61,.36,1);box-shadow:0 8px 24px rgba(10,15,30,.12)}
.hc-top.show{opacity:1;visibility:visible;transform:none}
.hc-top:hover{background:#2B4EDD;color:#fff;border-color:#2B4EDD}
.hc-top svg{width:17px;height:17px}

@media (prefers-reduced-motion:reduce){
  .hc-intro{display:none}
  .hc-video{display:none}
  .hero--home .hero-visual .app{animation:none}
  .hc-grad{animation:none}
  .btn--primary::after{display:none}
}
@media (max-width:760px){
  .hc-top{right:14px;bottom:14px}
}