/* ==========================================================================
   NanoQuinn — shared site styles
   Premium "clean sustainable light" system. Pairs with tw-config.js + Tailwind.
   ========================================================================== */

:root {
  --canvas: #FAFAF7;
  --ink: #06182E;
  --sage-700: #4B6150;
  --sage-600: #5E7763;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: #1f2a22;
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv11' 1;
}

/* Manrope display — clean, corporate headings */
.font-display { letter-spacing: -0.018em; }
h1.font-display { letter-spacing: -0.028em; }

/* Selection */
::selection { background: #C9D8C9; color: #1c2a1f; }

/* --- Mono eyebrow / technical micro-label ----------------------------------- */
.eyebrow {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5E7763;
}
.eyebrow-index { color: #9C7A45; }

/* Hairline that fades — a refined industrial detail */
.rule-fade {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, rgba(75,97,80,.28), transparent);
}

/* --- Reveal on scroll ------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s cubic-bezier(.16,.84,.32,1), transform .9s cubic-bezier(.16,.84,.32,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }
.reveal.d6 { transition-delay: .48s; }

/* --- Navigation ------------------------------------------------------------- */
#siteNav {
  transition: background-color .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom: 1px solid transparent;
}
#siteNav.nav-scrolled {
  background: rgba(250,250,247,.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: rgba(75,97,80,.14);
  box-shadow: 0 1px 0 rgba(28,32,26,.02), 0 12px 30px -22px rgba(46,60,49,.25);
}

/* Animated nav underline */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1.5px;
  background: #5E7763; transition: right .35s cubic-bezier(.16,.84,.32,1);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { right: 0; }
.nav-link[aria-current="page"] { color: #4B6150; }

/* --- Cards & interactive surfaces ------------------------------------------ */
.card-hover { transition: transform .4s cubic-bezier(.16,.84,.32,1), box-shadow .4s ease, border-color .4s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 36px 70px -30px rgba(46,60,49,.32); border-color: rgba(94,119,99,.35); }

/* Link with sliding underline (inline text links) */
.link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s cubic-bezier(.16,.84,.32,1); }
.link-underline:hover { background-size: 100% 1.5px; }

/* Buttons (primary CTA shimmer-free, quiet luxury) */
.btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; border-radius: 9999px; transition: transform .25s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease; }
.btn:active { transform: translateY(1px); }
.btn-arrow svg { transition: transform .3s cubic-bezier(.16,.84,.32,1); }
.btn-arrow:hover svg { transform: translateX(4px); }

/* --- Decorative ------------------------------------------------------------- */
.nano-spin { animation: nano-rotate 80s linear infinite; transform-origin: center; }
@keyframes nano-rotate { to { transform: rotate(360deg); } }

.float-slow { animation: floaty 9s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Soft top/bottom fade mask for marquees / motifs */
.mask-fade-x { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* Logo marquee */
.marquee { display: flex; gap: 4rem; width: max-content; animation: marquee 34s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* --- Before / after reveal (hero) ------------------------------------------ */
.ba { --pos: 50%; }
.ba-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(20,30,25,.12); z-index:10; pointer-events:none; }
.ba-grab { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:9999px; background:#fff; display:grid; place-items:center; color:#4B6150; box-shadow:0 10px 24px -8px rgba(20,30,25,.5); }
.ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:ew-resize; z-index:20; touch-action:pan-y; -webkit-appearance:none; appearance:none; background:transparent; }
.ba-range::-webkit-slider-thumb { -webkit-appearance:none; width:48px; height:240px; cursor:ew-resize; }
.ba-range::-moz-range-thumb { width:48px; height:240px; border:0; background:transparent; cursor:ew-resize; }

/* --- Accessibility ---------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #4B6150; outline-offset: 3px; border-radius: 6px;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; background: #06182E; color: #fff; padding: .6rem 1rem; border-radius: 8px; }

svg { shape-rendering: geometricPrecision; }

/* Render the navy wordmark in white on dark sections (footer / dark bands) */
.logo-invert { filter: brightness(0) invert(1); }

/* Balance multi-line headlines */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nano-spin, .float-slow, .marquee { animation: none !important; }
  .chart-line { stroke-dashoffset: 0 !important; transition: none !important; }
  .chart-area, .chart-dot { opacity: 1 !important; transition: none !important; }
  .is-enhanced .feat-panel.active { animation: none !important; }
}

/* --- Feature explorer (APaaS) ---------------------------------------------- */
.feat-tab { transition: background-color .25s ease, box-shadow .25s ease; }
.feat-tab svg { transition: transform .25s ease, color .25s ease; }
.feat-tab.active { background: #F3F7F3; box-shadow: inset 3px 0 0 0 #4B6150, 0 1px 2px rgba(28,32,26,.05); }
.feat-tab.active .feat-num { color: #3A4D3F; }
.feat-tab.active svg { color: #4B6150; transform: translateX(3px); }
.is-enhanced .feat-panel { display: none; }
.is-enhanced .feat-panel.active { display: block; animation: feat-in .5s cubic-bezier(.16,.84,.32,1); }
@keyframes feat-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Economics chart (APaaS) ----------------------------------------------- */
.chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s cubic-bezier(.22,.61,.36,1); }
#costChart.in .chart-line { stroke-dashoffset: 0; }
.chart-area { opacity: 0; transition: opacity 1s ease .7s; }
#costChart.in .chart-area { opacity: 1; }
.chart-dot { opacity: 0; transition: opacity .4s ease 1.7s; }
#costChart.in .chart-dot { opacity: 1; }

/* --- APaaS hero — "Eight into One" octagon (Concept A) --------------------- */
.ho-stage { position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 1 / 1; }
.ho-stage .ho-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ho-node { position: absolute; transform: translate(-50%, -50%); animation: ho-pop .6s cubic-bezier(.16,.84,.32,1) both; }
@keyframes ho-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.ho-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff; color: #4B6150; box-shadow: 0 2px 12px rgba(46,60,49,.14); transition: transform .35s, background .35s, color .35s, box-shadow .35s; }
.ho-ico svg { width: 21px; height: 21px; }
.ho-node.lit .ho-ico { background: #4B6150; color: #fff; transform: scale(1.16); box-shadow: 0 0 0 5px rgba(94,119,99,.18), 0 10px 22px -6px rgba(46,60,49,.4); }
.ho-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 9999px; background: #3A4D3F; color: #B7C9BA; display: grid; place-items: center; box-shadow: 0 20px 44px -16px rgba(46,60,49,.55); z-index: 2; }
.ho-core svg { width: 42px; height: 42px; }
.ho-core .ho-core-mark { width: 56px; height: 56px; display: block; }
.ho-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ho-draw 1.1s ease forwards .3s; }
@keyframes ho-draw { to { stroke-dashoffset: 0; } }
.ho-cap { text-align: center; margin-top: 1.25rem; font-family: 'Manrope', ui-sans-serif, sans-serif; font-weight: 600; font-size: 1.05rem; color: #06182E; min-height: 1.6em; }
.ho-cap small { display: block; font-family: 'Inter', ui-sans-serif, sans-serif; font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #5E7763; margin-top: .35rem; }
@media (prefers-reduced-motion: reduce) {
  .ho-node { animation: none !important; }
  .ho-line { stroke-dashoffset: 0 !important; animation: none !important; }
}