/* ═══════════════════════════════════════════════════════════════════
   Aivisory Design System – shared across all pages
   Complements Tailwind CDN; do not duplicate Tailwind utilities here.
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────────────── */
:root {
  /* Typography families */
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'Manrope', sans-serif;

  /* Centralized typography scale based on hero section */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: clamp(1.875rem, 3.2vw, 2.5rem);
  --font-4xl: clamp(2.5rem, 6vw, 4.5rem);
  --font-copy-lead: 1rem;
  --font-copy-section: 1rem;
  --font-copy-body: 1rem;

  /* Highlight palette */
  --hl-start: #b6a0ff;
  /* primary purple */
  --hl-end: #00e3fd;
  /* secondary cyan */
}

/* ── Semantic Typography Mapping ───────────────────────────────── */

body {
  font-size: var(--font-base);
}

h1 {
  font-size: var(--font-4xl);
  line-height: 1.1;
}

h2 {
  font-size: var(--font-3xl);
  line-height: 1.15;
}

h3 {
  font-size: var(--font-2xl);
  line-height: 1.2;
}

h4 {
  font-size: var(--font-xl);
  line-height: 1.25;
}

h5 {
  font-size: var(--font-lg);
  line-height: 1.3;
}

h6 {
  font-size: var(--font-base);
  line-height: 1.35;
}

p {
  font-size: var(--font-copy-body);
  line-height: 1.6;
}

button,
label {
  font-size: var(--font-sm);
}

small,
caption {
  font-size: var(--font-xs);
}

/* Token mapping for common Tailwind text-size utilities */
.text-xs {
  font-size: var(--font-xs);
}

.text-sm {
  font-size: var(--font-sm);
}

.text-base {
  font-size: var(--font-base);
}

.text-lg {
  font-size: var(--font-lg);
}

.text-xl {
  font-size: var(--font-xl);
}

.text-2xl {
  font-size: var(--font-2xl);
}

.text-3xl {
  font-size: var(--font-3xl);
}

.text-4xl,
.text-5xl,
.text-6xl,
.text-7xl,
.text-8xl,
.md\:text-4xl,
.md\:text-5xl,
.md\:text-6xl,
.md\:text-7xl,
.lg\:text-8xl {
  font-size: var(--font-4xl);
}

.hero-paragraph {
  font-size: var(--font-copy-lead);
}

/* Paragraph scale follows parent heading hierarchy */
h1 + p,
.hero-paragraph {
  font-size: var(--font-copy-lead);
}

h2 + p {
  font-size: var(--font-copy-section);
}

h3 + p,
h4 + p,
h3 + ul + p,
h4 + ul + p {
  font-size: var(--font-copy-body);
}

/* Keep paragraph copy consistent even when utility classes are present */
p.text-xs,
p.text-sm,
p.text-base,
p.text-lg,
p.text-xl {
  font-size: var(--font-copy-body);
}

@media (max-width: 768px) {
  p,
  p.text-xs,
  p.text-sm,
  p.text-base,
  p.text-lg,
  p.text-xl {
    font-size: var(--font-copy-body);
    line-height: 1.65;
  }
}

button,
a[class*="px-"][class*="py-"][class*="rounded"] {
  font-size: var(--font-base);
}

/* Keep header/nav actions smaller than page CTAs */
nav button,
nav a[class*="px-"][class*="py-"][class*="rounded"] {
  font-size: var(--font-sm);
}


/* ── Text Highlight System ─────────────────────────────────────── */

/*
  Usage rules:
  - .text-gradient / .hl  → key feature words in body copy (gradient)
  - .hl-primary           → UI labels, accent text (flat purple)
  - .hl-secondary         → action/CTA labels (flat cyan)
  - Never use <strong> alone for emphasis — wrap in one of the above
*/

.text-gradient,
.hl {
  background: linear-gradient(135deg, var(--hl-start) 0%, var(--hl-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hl-primary {
  color: #b6a0ff;
}

.hl-secondary {
  color: #00e3fd;
}


/* ── Shared Glass / Backdrop Utilities ─────────────────────────── */

.glass-panel {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-card {
  background: rgba(24, 25, 32, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* ── Shared Background Utilities ───────────────────────────────── */

.hero-mesh {
  background-image:
    radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
    radial-gradient(at 50% 0%, hsla(255, 91%, 71%, 0.15) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(185, 100%, 49%, 0.10) 0, transparent 50%);
}


/* ── Partner Logo Section ──────────────────────────────────────── */

.white-filter {
  filter: brightness(0) invert(1);
}

.partner-logo {
  filter: grayscale(1) invert(1) brightness(1.02) contrast(1.08);
  mix-blend-mode: screen;
  display: block;
  transition: filter 0.3s ease-out;
}

/* Slightly less blown-out grey-white (DB) */
.partner-logo--tone-muted {
  filter: grayscale(1) invert(1) brightness(0.9) contrast(1.06);
}

/* Ottobock: a touch whiter than DB muted (idle) */
.partner-logo--otto {
  filter: grayscale(1) invert(1) brightness(0.91) contrast(1.06);
}

/* Ottobock: stronger white on hover */
.partner-tile-otto-hover:hover .partner-logo {
  filter: grayscale(1) invert(1) brightness(1.42) contrast(1.19);
}

/* CINECA: slightly whiter at rest */
.partner-logo--cineca-lift {
  filter: grayscale(1) invert(1) brightness(1.06) contrast(1.09);
}

/* Stronger white pop on hover (Quantum, DB, FF Plus, CINECA) */
.partner-tile-bright-hover:hover .partner-logo {
  filter: grayscale(1) invert(1) brightness(1.32) contrast(1.16);
}

/* NVIDIA wordmark: slightly dimmer at rest */
.partner-logo--nvidia-dim {
  filter: grayscale(1) invert(1) brightness(0.56) contrast(0.94);
}

/* Google wordmark: brighter idle + stronger hover */
.partner-logo--google-lift {
  filter: grayscale(1) invert(1) brightness(1.16) contrast(1.14);
}

.partner-tile-bright-hover:hover .partner-logo--google-lift {
  filter: grayscale(1) invert(1) brightness(1.42) contrast(1.2);
}

/* Microsoft wordmark: brighter idle + stronger hover */
.partner-logo--ms-lift {
  filter: grayscale(1) invert(1) brightness(1.14) contrast(1.12);
}

.partner-tile-bright-hover:hover .partner-logo--ms-lift {
  filter: grayscale(1) invert(1) brightness(1.4) contrast(1.19);
}

/* CINECA: slightly stronger hover than default bright-hover */
.partner-tile-bright-hover.partner-tile-cineca:hover .partner-logo {
  filter: grayscale(1) invert(1) brightness(1.38) contrast(1.17);
}

/* FF Plus: whiter / more prominent at rest (hover still overrides) */
.partner-logo--ff-rest {
  filter: grayscale(1) invert(1) brightness(1.12) contrast(1.12);
}

/* FF Plus: extra-strong white on hover */
.partner-tile-bright-hover.partner-tile-ff-hover:hover .partner-logo {
  filter: grayscale(1) invert(1) brightness(1.92) contrast(1.52);
}

/* Brighter at rest + on hover; extra zoom on wrapper (play.go) */
.partner-logo--playgo {
  filter: grayscale(1) invert(1) brightness(1.14) contrast(1.1);
}

.partner-playgo-tile:hover .partner-logo--playgo {
  filter: grayscale(1) invert(1) brightness(1.28) contrast(1.14);
}

/* Partner logo marquee (index): scroll R→L; pause on hover */
.partner-marquee {
  overflow: hidden;
}

.partner-marquee-track {
  display: flex;
  flex-direction: row;
  width: max-content;
  will-change: transform;
  animation: partner-marquee-scroll 48s linear infinite;
}

.partner-marquee:hover .partner-marquee-track {
  animation-play-state: paused;
}

.partner-marquee-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
}

@keyframes partner-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-marquee-track {
    animation: none;
    transform: none;
  }
}


/* ── Clickable Case Images ─────────────────────────────────────── */

/*
  Wrap the image container <div> with <a class="case-img-link ...">
  to make the entire image clickable with the same target as the button.
*/

.case-img-link {
  display: block;
  cursor: pointer;
  overflow: hidden;
  /* keeps border-radius on the zoomed image */
  text-decoration: none;
}

.case-img-link img {
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.3s ease;
}

.case-img-link:hover img {
  transform: scale(1.04);
  opacity: 0.88;
}

.case-img-link:focus-visible {
  outline: 2px solid #b6a0ff;
  outline-offset: 3px;
  border-radius: 1rem;
}


/* ── Responsive Images ─────────────────────────────────────────── */

/* Prevent layout shift before images load */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* Subtle placeholder colour for lazy images */
/* img[loading="lazy"] {
  background-color: #181920;
} */