/* Component effects that Tailwind utilities can't express: shine buttons, nav underline, tooltips, modal, range, rotating badge, timeline beam, toast */

/* button light sweep */
.btn-shine{position:relative;overflow:hidden;isolation:isolate}
.btn-shine::before{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-20deg);z-index:-1;pointer-events:none}
.btn-shine:hover::before{animation:shine 1.1s var(--ease-out-expo)}
.btn-shine-auto::before{animation:shine 3.2s var(--ease-out-expo) 1.5s infinite}
.btn-shine-auto:hover::before{animation:shine 1.1s var(--ease-out-expo)}

/* magnetic buttons: js/interactions.js writes --tx/--ty */
[data-magnetic]{transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .35s var(--ease-out-expo),background-color .3s,color .3s,box-shadow .3s,border-color .3s}

/* arrow nudges on hover */
.arrow-nudge [data-lucide],.arrow-nudge svg{transition:transform .3s var(--ease-out-expo)}
.arrow-nudge:hover [data-lucide],.arrow-nudge:hover svg.lucide{transform:translate(3px,-3px)}
.arrow-nudge-x:hover [data-lucide],.arrow-nudge-x:hover svg.lucide{transform:translateX(4px)}

/* nav underline */
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#a3e635;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out-expo)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1);transform-origin:left}

/* header gains depth after scrolling */
.header-scrolled{box-shadow:0 10px 30px -18px rgba(2,44,34,.35)}

/* tooltips: add data-tip="..." to any element; data-tip-pos="bottom" flips it */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);white-space:nowrap;background:#022c22;color:#fafaf9;font:600 11px/1 Manrope,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:8px 10px;border:1px solid rgba(163,230,53,.25);box-shadow:0 10px 30px -10px rgba(2,44,34,.6);opacity:0;pointer-events:none;transition:opacity .25s var(--ease-out-expo),transform .25s var(--ease-out-expo);z-index:40}
[data-tip]::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);width:8px;height:8px;background:#022c22;transform:translate(-50%,6px) rotate(45deg);opacity:0;transition:opacity .25s,transform .25s var(--ease-out-expo);z-index:41}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;transform:translate(-50%,0) rotate(45deg)}
[data-tip-pos="bottom"]::after{bottom:auto;top:calc(100% + 10px);transform:translate(-50%,-6px)}
[data-tip-pos="bottom"]::before{bottom:auto;top:calc(100% + 4px);transform:translate(-50%,-6px) rotate(45deg)}
[data-tip-tone="lime"]::after{background:#a3e635;color:#022c22;border-color:#a3e635}
[data-tip-tone="lime"]::before{background:#a3e635}
svg [data-tip]::after,svg [data-tip]::before{display:none}

/* smooth expand for card details (replaces h-0 → h-auto jump) */
.expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out-expo),margin .5s var(--ease-out-expo)}
.expand>*{overflow:hidden}
.group:hover .expand,.group:focus-within .expand{grid-template-rows:1fr;margin-top:1rem}

/* card spotlight border */
.card-glow{position:relative}
.card-glow::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(163,230,53,.7),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.card-glow:hover::before{opacity:1}

/* rotating circular text badge */
.orbit-text{animation:spin-slow 18s linear infinite}
.orbit-text text{font:600 10.5px Unbounded,sans-serif;letter-spacing:.18em;text-transform:uppercase}

/* timeline light beam travelling down the rail */
.rail-beam{position:absolute;left:-1px;width:3px;height:15%;background:linear-gradient(to bottom,transparent,#a3e635,transparent);box-shadow:0 0 12px rgba(163,230,53,.8);animation:beam 4s var(--ease-standard) infinite}

/* modal (native <dialog>) */
dialog.modal{padding:0;border:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%;overflow:visible}
dialog.modal[open]{animation:modal-in .6s var(--ease-out-expo)}
dialog.modal::backdrop{background:rgba(2,44,34,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:backdrop-in .4s ease}

/* range slider */
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:linear-gradient(to right,#a3e635 var(--fill,50%),#e7e5e4 var(--fill,50%));outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:#022c22;border:4px solid #a3e635;border-radius:9999px;cursor:pointer;box-shadow:0 0 0 6px rgba(163,230,53,.2);transition:transform .2s}
.range::-webkit-slider-thumb:hover{transform:scale(1.15)}
.range::-moz-range-thumb{width:16px;height:16px;background:#022c22;border:4px solid #a3e635;border-radius:9999px;cursor:pointer}

/* input focus ring glow */
.input-glow:focus{box-shadow:0 0 0 4px rgba(163,230,53,.18)}

/* copy toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:80;transition:opacity .3s,transform .3s var(--ease-out-expo)}
.toast.is-on{opacity:1;transform:translate(-50%,0);animation:toast-in .4s var(--ease-out-expo)}

/* type-scale rows accent bar */
.row-accent{position:relative}
.row-accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#a3e635;transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-out-expo)}
.row-accent:hover::before{transform:scaleY(1)}

/* focus visibility for keyboard users */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #a3e635;outline-offset:3px}