/* Landing-page motion layer. transform/opacity only; every effect is gated
   behind .motion-ready (JS) and respects prefers-reduced-motion. */
:root{--ease-out:cubic-bezier(.22,.8,.24,1)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}

/* ── Header ───────────────────────────────────────── */
.land-header{background:transparent;transition:background-color .3s,box-shadow .3s,backdrop-filter .3s}
.land-header.is-solid{background:rgba(250,249,245,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 15px rgba(6,78,59,.06)}
.nav-link{position:relative;padding:.25rem 0}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#059669;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}
.nav-link.is-active{color:#003527}

/* Mobile menu */
.menu-btn{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:9999px}
.menu-btn span{display:block;width:20px;height:2px;background:#003527;border-radius:2px;position:relative;transition:transform .3s var(--ease-out),background .2s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#003527;border-radius:2px;transition:transform .3s var(--ease-out)}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-btn[aria-expanded=true] span{background:transparent}
.menu-btn[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:80px 0 auto 0;z-index:49;background:#faf9f5;padding:1rem 1.5rem 1.5rem;box-shadow:0 20px 40px rgba(0,0,0,.08);
  transform:translate3d(0,-12px,0);opacity:0;visibility:hidden;transition:transform .3s var(--ease-out),opacity .25s,visibility 0s .3s}
.mobile-menu.is-open{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--ease-out),opacity .25s}
.mobile-menu a{display:block;padding:.85rem 0;border-bottom:1px solid rgba(0,0,0,.06);font-weight:600}

/* ── Hero ─────────────────────────────────────────── */
.hero-3d{pointer-events:none;background:
  radial-gradient(60% 50% at 78% 28%,rgba(5,150,105,.10),transparent 70%),
  radial-gradient(45% 40% at 15% 70%,rgba(199,154,44,.10),transparent 70%)}
.three-canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s}
.three-canvas.is-ready{opacity:1}
.hero-glow{position:absolute;left:0;top:0;width:400px;height:400px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(5,150,105,.16),transparent 65%);transition:opacity .4s;will-change:transform}
@keyframes hero-up{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.hero-in{animation:hero-up .8s var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes bar-grow{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
.bar{transform-origin:bottom;animation:bar-grow 1s var(--ease-out) both;animation-delay:calc(500ms + var(--i,0)*70ms)}

/* ── Scroll reveals ───────────────────────────────── */
.motion-ready [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.motion-ready [data-reveal=scale]{transform:scale(.96) translate3d(0,16px,0)}
.motion-ready [data-reveal=left]{transform:translate3d(-28px,0,0)}
.motion-ready [data-reveal=right]{transform:translate3d(28px,0,0)}
.motion-ready [data-reveal].is-in{opacity:1;transform:none}
/* once revealed, hand `transform` back to hover/tilt */
.motion-ready [data-reveal].is-in.card-lift{transition:transform .35s var(--ease-out),box-shadow .35s,opacity .75s}

/* ── Cards ────────────────────────────────────────── */
.card-lift{position:relative;overflow:hidden}
.card-lift::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(5,150,105,.10),transparent 70%)}
@media (hover:hover){
  .card-lift:hover{box-shadow:0 18px 40px rgba(6,78,59,.12)}
  .card-lift:hover::before{opacity:1}
  .card-lift .icon-pop{transition:transform .35s var(--ease-out)}
  .card-lift:hover .icon-pop{transform:scale(1.12) rotate(-4deg)}
  .btn-lift{transition:transform .3s var(--ease-out),box-shadow .3s}
  .btn-lift:hover{box-shadow:0 14px 34px rgba(5,150,105,.28)}
}
[data-magnetic]{will-change:transform;transition:transform .25s var(--ease-out)}

/* ── Back to top ──────────────────────────────────── */
.to-top{position:fixed;left:1.5rem;bottom:1.5rem;z-index:50;width:44px;height:44px;border-radius:9999px;background:#003527;color:#fff;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:translate3d(0,12px,0);pointer-events:none;transition:opacity .3s,transform .3s var(--ease-out)}
.to-top.is-shown{opacity:1;transform:none;pointer-events:auto}

html.menu-open{overflow:hidden}
@media (min-width:1024px){.menu-btn,.mobile-menu{display:none}}

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero-in,.bar{animation:none}
  .motion-ready [data-reveal]{opacity:1;transform:none;transition:none}
  .nav-link::after,.land-header,.three-canvas,.to-top,.card-lift,.mobile-menu{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
.reduce-motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}

/* Landing-only icon subset (~3 KB) replaces the 1.1 MB full Material Symbols
   file on this page. If you add a new icon name to the landing page or its
   partials, regenerate this file (see README "Landing page motion"). */
@font-face{font-family:'Masji Icons';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/masji-icons-landing.woff2) format('woff2')}
.material-symbols-outlined{font-family:'Masji Icons'!important}