/* Morphism - motion, dock header, kinetic layer (after cinematic.css) */

:root {
 --header-h: 68px;
}

/* ── Dock header (light pages) ─────────────────────── */
#morphism-header {
 height: var(--header-h);
 padding: 0 28px;
 background: rgba(255, 255, 255, 0.72);
 -webkit-backdrop-filter: blur(18px) saturate(1.4);
 backdrop-filter: blur(18px) saturate(1.4);
 border-bottom: 1px solid rgba(18, 20, 28, 0.07);
 transition:
 background 0.35s ease,
 border-color 0.35s ease,
 box-shadow 0.35s ease,
 transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#morphism-header.header-scrolled {
 background: rgba(255, 255, 255, 0.92);
 box-shadow: 0 1px 0 rgba(18, 20, 28, 0.05), 0 18px 48px rgba(18, 20, 28, 0.06);
}

#morphism-header.header-hidden {
 transform: translateY(-100%);
}

.logo {
 font-family: var(--sans);
 font-size: 1.25rem;
 font-weight: 700;
 letter-spacing: -0.04em;
 text-transform: none;
 color: var(--ink);
 gap: 12px;
}

.logo-img {
 height: 30px;
 max-width: 148px;
 background: transparent;
 border: 0;
 box-shadow: none;
}

/* Dark header: prefer a light wordmark asset; avoid brightness(0) which can
 paint a black box around transparent PNGs in some engines. */
body.page-hero--dark .logo-img {
 filter: invert(1);
}

.logo-mark svg path:first-of-type {
 stroke: currentColor;
}

.nav-link {
 font-family: var(--sans);
 font-size: 0.8125rem;
 font-weight: 500;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 padding: 8px 14px;
 border-radius: 999px;
 position: relative;
 color: var(--ink-muted);
}

.nav-link::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: 4px;
 width: 0;
 height: 2px;
 border-radius: 2px;
 background: var(--violet);
 transform: translateX(-50%);
 transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::after,
.nav-link.nav-active::after {
 width: calc(100% - 28px);
}

.nav-link.nav-active {
 color: var(--ink);
}

.nav-cta {
 font-family: var(--sans);
 font-size: 0.75rem;
 font-weight: 600;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 padding: 10px 20px;
 border-radius: 999px;
 margin-left: 12px;
 background: linear-gradient(135deg, #1a1a22 0%, #2d2d38 100%);
 border: 1px solid rgba(255, 255, 255, 0.08);
 box-shadow: 0 4px 20px rgba(91, 61, 232, 0.15);
}

.nav-cta:hover {
 background: linear-gradient(135deg, #5b3de8 0%, #7c6cf0 100%);
}

/* Run diagnostics - live qualify flow (pulses for visibility) */
.nav-link--diagnostic {
 color: var(--violet) !important;
 font-weight: 700;
 letter-spacing: 0.1em;
}

.nav-link--diagnostic::after {
 background: var(--violet);
 opacity: 0.35;
}

@media (prefers-reduced-motion: no-preference) {
 .nav-link--diagnostic {
 animation: nav-diagnostic-pulse 2.2s ease-in-out infinite;
 }
}

@keyframes nav-diagnostic-pulse {
 0%,
 100% {
 box-shadow: 0 0 0 0 rgba(91, 61, 232, 0);
 color: var(--violet);
 }
 50% {
 box-shadow:
 0 0 0 3px rgba(91, 61, 232, 0.35),
 0 0 28px rgba(91, 61, 232, 0.35);
 color: #4a2fd4;
 }
}

.mob-link--diagnostic {
 color: var(--violet) !important;
 font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
 .mob-link--diagnostic {
 animation: mob-diagnostic-pulse 2.2s ease-in-out infinite;
 }
}

@keyframes mob-diagnostic-pulse {
 0%,
 100% {
 text-shadow: 0 0 0 rgba(91, 61, 232, 0);
 opacity: 1;
 }
 50% {
 text-shadow: 0 0 12px rgba(91, 61, 232, 0.65);
 opacity: 1;
 }
}

@media (prefers-reduced-motion: reduce) {
 .nav-link--diagnostic,
 .mob-link--diagnostic {
 animation: none;
 }
}

.nav-burger span {
 background: var(--ink);
}

/* ── Dark hero pages (MorphDesk, Dynamic Pages, …) ──── */
body.page-hero--dark #morphism-header {
 background: rgba(10, 12, 18, 0.72);
 border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.page-hero--dark #morphism-header.header-scrolled {
 background: rgba(14, 16, 24, 0.9);
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.45);
}

body.page-hero--dark .logo {
 color: #fff;
}

body.page-hero--dark .nav-link {
 color: rgba(255, 255, 255, 0.5);
}

body.page-hero--dark .nav-link:hover {
 color: #fff;
 background: rgba(255, 255, 255, 0.06);
}

body.page-hero--dark .nav-link.nav-active {
 color: #d4c4fd;
}

body.page-hero--dark .nav-link--diagnostic {
 color: #ddd6fe !important;
}

@media (prefers-reduced-motion: no-preference) {
 body.page-hero--dark .nav-link--diagnostic {
 animation-name: nav-diagnostic-pulse-dark;
 }
}

@keyframes nav-diagnostic-pulse-dark {
 0%,
 100% {
 box-shadow: 0 0 0 0 rgba(196, 181, 253, 0);
 color: #ddd6fe;
 }
 50% {
 box-shadow:
 0 0 0 3px rgba(196, 181, 253, 0.45),
 0 0 32px rgba(91, 61, 232, 0.45);
 color: #fff;
 }
}

body.page-hero--dark .mob-link--diagnostic {
 color: #ddd6fe !important;
}

body.page-hero--dark .nav-cta {
 background: linear-gradient(135deg, #5b3de8 0%, #8b7cf0 100%);
 color: #fff;
 border-color: rgba(255, 255, 255, 0.12);
}

body.page-hero--dark .nav-burger span {
 background: #fff;
}

body.page-hero--dark .mobile-nav {
 background: rgba(12, 14, 22, 0.97);
 border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.page-hero--dark .mob-link {
 color: rgba(255, 255, 255, 0.85);
 border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ── Reveal: depth + blur (respect reduced motion) ──── */
@media (prefers-reduced-motion: no-preference) {
 [data-reveal] {
 opacity: 0;
 transform: translateY(28px) scale(0.97);
 filter: blur(10px);
 transition:
 opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
 transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
 filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
 }

 [data-reveal].in-view {
 opacity: 1;
 transform: translateY(0) scale(1);
 filter: blur(0);
 }

 [data-stagger] > * {
 opacity: 0;
 transform: translateY(20px) rotateX(8deg);
 transform-origin: top center;
 transition:
 opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
 transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
 }

 [data-stagger].in-view > * {
 opacity: 1;
 transform: translateY(0) rotateX(0);
 }
}

/* ── Kinetic type ───────────────────────────────────── */
[data-kinetic] .kf {
 display: inline-block;
 opacity: 0;
 transform: translateY(0.35em) rotateZ(-3deg);
 transition:
 opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
 transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-kinetic].kf-ready .kf {
 opacity: 1;
 transform: translateY(0) rotateZ(0);
}

[data-kinetic].kf-ready .kf:nth-child(1) {
 transition-delay: 0.02s;
}
[data-kinetic].kf-ready .kf:nth-child(2) {
 transition-delay: 0.04s;
}
[data-kinetic].kf-ready .kf:nth-child(3) {
 transition-delay: 0.06s;
}
[data-kinetic].kf-ready .kf:nth-child(4) {
 transition-delay: 0.08s;
}
[data-kinetic].kf-ready .kf:nth-child(5) {
 transition-delay: 0.1s;
}
[data-kinetic].kf-ready .kf:nth-child(6) {
 transition-delay: 0.12s;
}
[data-kinetic].kf-ready .kf:nth-child(7) {
 transition-delay: 0.14s;
}
[data-kinetic].kf-ready .kf:nth-child(8) {
 transition-delay: 0.16s;
}
[data-kinetic].kf-ready .kf:nth-child(9) {
 transition-delay: 0.18s;
}
[data-kinetic].kf-ready .kf:nth-child(10) {
 transition-delay: 0.2s;
}
[data-kinetic].kf-ready .kf:nth-child(n + 11) {
 transition-delay: 0.22s;
}

/* ── 3D tilt cards ─────────────────────────────────── */
.tilt-card {
 transform-style: preserve-3d;
 perspective: 1000px;
 transition: box-shadow 0.35s ease;
}

.tilt-card.is-tilting {
 transition: transform 0.08s linear, box-shadow 0.35s ease;
}

/* ── Parallax layers ───────────────────────────────── */
[data-parallax] {
 will-change: transform;
}

/* ── Dark hero atmosphere ──────────────────────────── */
body.page-hero--dark .hero-aurora,
.hero-aurora {
 position: absolute;
 inset: -30% -20% 0;
 pointer-events: none;
 z-index: 0;
 background:
 radial-gradient(ellipse 60% 50% at 20% 30%, rgba(91, 61, 232, 0.35), transparent 55%),
 radial-gradient(ellipse 50% 40% at 85% 20%, rgba(139, 124, 240, 0.2), transparent 50%),
 radial-gradient(ellipse 40% 35% at 60% 80%, rgba(56, 189, 248, 0.08), transparent 45%);
 animation: aurora-drift 16s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
 0% {
 transform: translate(0, 0) scale(1);
 opacity: 0.9;
 }
 100% {
 transform: translate(3%, -2%) scale(1.05);
 opacity: 1;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hero-aurora {
 animation: none;
 }
}