/* =========================================================
   MinamoWorks — DIGITAL RIPPLE / Motion primitives
   Ripple background, grid, line-mask headings, marquee.
   All gated so JS-off / reduced-motion still reads fine.
   ========================================================= */

/* ---- Ripple background layer (radial gradients + faint grid) ---- */
.ripple-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ripple-bg::before{
  content:"";position:absolute;inset:-20% -10%;
  background:
    radial-gradient(closest-side,rgba(66,232,208,.14),transparent 70%) 72% 24%/60% 60% no-repeat,
    radial-gradient(closest-side,rgba(53,120,255,.12),transparent 70%) 22% 78%/55% 55% no-repeat;
  filter:blur(6px);
}
.ripple-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 78%);
}
/* concentric ripple rings (SVG stroke draw handled in markup; CSS pulse fallback) */
.ripple-rings{position:absolute;left:50%;top:42%;translate:-50% -50%;width:min(120vh,1200px);aspect-ratio:1;opacity:.5}
.ripple-rings circle{fill:none;stroke:rgba(66,232,208,.16);transform-origin:center;animation:rippleExpand 7s var(--mw-ease-out) infinite}
.ripple-rings circle:nth-child(2){animation-delay:1.4s;stroke:rgba(53,120,255,.14)}
.ripple-rings circle:nth-child(3){animation-delay:2.8s}
.ripple-rings circle:nth-child(4){animation-delay:4.2s;stroke:rgba(53,120,255,.12)}
@keyframes rippleExpand{
  0%{transform:scale(.2);opacity:0}
  20%{opacity:.9}
  100%{transform:scale(1);opacity:0}
}

/* ---- Marquee (info bar) ---- */
.marquee{overflow:hidden;position:relative}
.marquee-track{display:flex;width:max-content;gap:0;animation:marqueeMove 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .mgroup{display:flex;flex:none}
@keyframes marqueeMove{to{transform:translateX(-50%)}}

/* ---- Line-mask heading reveal ---- */
.js .mask-line{display:inline-block;overflow:hidden;vertical-align:top}
.js .mask-line>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--mw-ease-out)}
.js .mask-line.is-in>span{transform:none}
.js .mask-line.d1>span{transition-delay:.1s}
.js .mask-line.d2>span{transition-delay:.22s}
.js .mask-line.d3>span{transition-delay:.34s}

/* ---- Count / draw helpers ---- */
.draw-path{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.6s var(--mw-ease-out)}
.is-in .draw-path{stroke-dashoffset:0}

/* ---- Cursor (pointer devices only) ---- */
.mw-cursor{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;translate:-50% -50%;
  width:34px;height:34px;border:1.5px solid rgba(66,232,208,.7);border-radius:50%;
  transition:width .25s var(--mw-ease),height .25s var(--mw-ease),background .25s,border-color .25s,opacity .3s}
.mw-cursor.hover{width:56px;height:56px;background:rgba(66,232,208,.1)}
.mw-cursor.label{width:64px;height:64px;background:var(--mw-aqua);border-color:transparent}
.mw-cursor .ct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mw-sans);font-size:.6rem;font-weight:700;letter-spacing:.1em;color:var(--mw-ink-950);opacity:0;transition:opacity .2s}
.mw-cursor.label .ct{opacity:1}
@media(hover:none),(pointer:coarse){.mw-cursor{display:none}}
@media(prefers-reduced-motion:reduce){
  .ripple-rings circle{animation:none;opacity:.25;transform:scale(.7)}
  .marquee-track{animation:none}
  .mw-cursor{display:none}
}

/* ---- Mobile sticky CTA ---- */
.sticky-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:none;
  transform:translateY(140%);transition:transform .4s var(--mw-ease)}
.sticky-cta.show{transform:none}
.sticky-cta .btn{width:100%;box-shadow:0 12px 30px rgba(7,28,38,.28)}
.sticky-cta .close{position:absolute;top:-10px;right:-2px;width:28px;height:28px;border-radius:50%;background:var(--mw-ink-950);color:#fff;font-size:1rem;display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.sticky-cta{display:block}}
@media(max-height:520px){.sticky-cta{display:none!important}}