/* ============================================================
   tier1.css — smooth-scroll + morphing cursor + magnetic layer
   ============================================================ */

/* let smooth.js own the scroll; drop CSS smooth so they don't stack */
html.has-cursor{scroll-behavior:auto;}

/* ---- custom cursor ---- */
@media (hover:hover) and (pointer:fine){
  html.has-cursor,html.has-cursor *{cursor:none !important;}
  html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:text !important;}
  html.has-cursor select{cursor:none !important;}
}
.cur{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s ease;
  mix-blend-mode:normal;}
.cur.on{opacity:1;}
.cur-ring,.cur-dot,.cur-label{position:absolute;left:0;top:0;will-change:transform;}
.cur-ring{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(150,190,255,.7);
  transition:width .28s cubic-bezier(.22,1,.36,1),height .28s cubic-bezier(.22,1,.36,1),
    background .28s ease,border-color .28s ease,opacity .28s ease;}
.cur-dot{width:5px;height:5px;border-radius:50%;background:#cfe0ff;
  box-shadow:0 0 10px rgba(120,170,255,.9);transition:width .2s ease,height .2s ease,opacity .2s ease;}
.cur-label{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;
  font-family:var(--display,sans-serif);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#eaf2ff;opacity:0;transform-origin:center;transition:opacity .25s ease;}

/* hover an interactive element → ring grows, dot fades */
.cur.hover .cur-ring{width:58px;height:58px;background:rgba(120,170,255,.1);border-color:rgba(150,190,255,.5);}
.cur.hover .cur-dot{width:3px;height:3px;}
/* over media (project / mission card) → filled disc + label */
.cur.view .cur-ring{width:76px;height:76px;background:rgba(34,131,198,.9);border-color:transparent;
  box-shadow:0 8px 30px rgba(34,131,198,.5);}
.cur.view .cur-dot{opacity:0;}
.cur.view .cur-label{opacity:1;}
/* text field → thin caret-ish bar */
.cur.text .cur-ring{width:3px;height:26px;border-radius:2px;background:rgba(190,215,255,.8);border-color:transparent;}
.cur.text .cur-dot{opacity:0;}
/* press feedback */
.cur.down .cur-ring{transform-origin:center;filter:brightness(1.15);}
.cur.down .cur-dot{width:8px;height:8px;}

/* ---- cursor glow: ambient light trailing the pointer ---- */
#cur-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle,rgba(34,131,198,.22),rgba(19,183,166,.09) 42%,transparent 70%);
  filter:blur(26px);mix-blend-mode:screen;will-change:transform;}
#cur-glow.on{opacity:1;}
body.focus-mode #cur-glow{opacity:.3;background:radial-gradient(circle,rgba(34,131,198,.13),transparent 66%);}

/* magnetic elements ease under JS transforms */
.btn,.round-btn,.pill-btn,.accent-btn,.gate-enter,.cta-btn,.ui-nav,.tagpill,.nav .cta{
  will-change:transform;}