/* Nastagia shared brand layer — additive on top of each page's theme.
   Logo, icon sizing, and refined motion. Pages: <link rel="stylesheet" href="/brand.css">. */

/* --- logo --- */
[data-logo] { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ng-mark { display: inline-flex; filter: drop-shadow(0 0 10px rgba(91, 140, 255, .35)); }
.ng-mark svg { display: block; animation: ng-mark-in .7s cubic-bezier(.2, .7, .3, 1) both; }
.ng-word {
  font-weight: 800; letter-spacing: 3.5px; font-size: 16px;
  background: linear-gradient(100deg, #eaf3fb, #9fc6ff 60%, #c9a3ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes ng-mark-in {
  from { opacity: 0; transform: rotate(-12deg) scale(.7); }
  to { opacity: 1; transform: none; }
}
[data-logo]:hover .ng-mark { animation: ng-pulse 1.4s ease-in-out infinite; }
@keyframes ng-pulse { 50% { filter: drop-shadow(0 0 16px rgba(122, 160, 255, .7)); } }

/* --- icons (inherit color + sized by parent box) --- */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
[data-icon] svg { width: 1em; height: 1em; pointer-events: none; }  /* clicks pass to the button */
[data-icon].lg svg { width: 22px; height: 22px; }
.back svg { width: 19px; height: 19px; pointer-events: none; }

/* --- refined motion --- */
@keyframes ng-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ng-reveal { animation: ng-rise .55s cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; } }

/* nav links: animated icon glow + slide affordance */
.navlink .ic, .navlink [data-icon] { transition: transform .25s cubic-bezier(.2, .7, .3, 1), color .2s; }
.navlink:hover .ic, .navlink:hover [data-icon] { transform: scale(1.14); color: var(--cyan, #5ad7ff); }
.navlink .ar { transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
.navlink:hover .ar { transform: translateX(4px); }

/* buttons: micro-lift + sheen */
button, .btn { transition: transform .14s cubic-bezier(.2, .7, .3, 1), filter .2s, box-shadow .2s; }
button:hover, .btn:hover { transform: translateY(-1px); }
button:active, .btn:active { transform: translateY(0) scale(.98); }

/* loading shimmer */
.ng-shimmer {
  background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .03) 70%);
  background-size: 200% 100%; animation: ng-shim 1.3s linear infinite;
}
@keyframes ng-shim { to { background-position: -200% 0; } }

/* --- Higgsfield ambient hero backdrop --- */
.ng-hero {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('/assets/hero.png') center/cover no-repeat;
  opacity: .14; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  animation: ng-hero-drift 40s ease-in-out infinite;
}
@keyframes ng-hero-drift { 50% { transform: scale(1.06) translateY(-1.5%); opacity: .2; } }