/* Altalus Design System — glassmorphism layer + 3D hero. Load after patterns.css (editorial.css and tone.css follow).
   Opt in with <body class="glass-site">. */

:root {
  --glass-bg: rgb(255 255 255 / 0.56);
  --glass-bg-strong: rgb(255 255 255 / 0.86);
  --glass-bd: rgb(255 255 255 / 0.72);
  --glass-blur: 22px;
  --glass-shadow: 0 22px 50px -26px rgb(10 32 54 / 0.32), 0 2px 6px rgb(10 32 54 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.95);
  --glass-shadow-hover: 0 30px 64px -26px rgb(10 32 54 / 0.42), 0 2px 6px rgb(10 32 54 / 0.06), inset 0 1px 0 #fff;
  --glass-dark-bg: rgb(8 28 48 / 0.42);
  --glass-dark-bd: rgb(255 255 255 / 0.14);
  --hero-1: #0e3a63; --hero-2: #08233d; --hero-3: #061626;
  --page-top: #e7f0f8;      /* the light page colour every dark stage dissolves into */
}

/* ---------- Page canvas: calm colour fields that glass can refract ---------- */
.glass-site {
  background:
    radial-gradient(52rem 38rem at 96% 8%, rgb(26 138 208 / 0.30), transparent 64%),
    radial-gradient(44rem 34rem at -8% 46%, rgb(23 163 155 / 0.20), transparent 64%),
    radial-gradient(46rem 34rem at 72% 96%, rgb(0 112 176 / 0.22), transparent 64%),
    linear-gradient(180deg, var(--page-top), #dbe8f4);
  background-attachment: fixed;
  color: var(--fg);
}
@media (max-width: 60rem) { .glass-site { background-attachment: scroll; } }
.glass-site .section--alt { background: transparent; }
.glass-site .section { position: relative; }

/* ---------- Glass surfaces ---------- */
.glass, .glass-site .card, .glass-site .form, .glass-site .facts, .glass-site .criteria > div {
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: var(--glass-shadow);
}
.glass { border-radius: var(--radius-lg); }
.glass-dark {
  background: var(--glass-dark-bg); border: 1px solid var(--glass-dark-bd); color: #eaf3fb;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 50px -24px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
@media (hover: hover) and (pointer: fine) { .glass-site .card:hover, .glass-site a.glass:hover { box-shadow: var(--glass-shadow-hover); } }
@supports not (backdrop-filter: blur(1px)) {
  .glass, .glass-site .card, .glass-site .form { background: var(--glass-bg-strong); }
  .glass-dark { background: rgb(8 28 48 / 0.85); }
}

/* ---------- Floating glass header (tone states live in tone.css) ---------- */
.glass-site .site-header { position: fixed; inset: 0.75rem 0 auto 0; height: auto; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 70; pointer-events: none; }
.glass-site .site-header .container {
  pointer-events: auto; height: 3.75rem; width: calc(100% - 2 * var(--gutter)); padding-inline: 0.4rem 0.45rem; max-width: calc(var(--container) - 1rem);
  background: var(--glass-bg-strong); border: 1px solid var(--glass-bd); border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  box-shadow: var(--glass-shadow);
}
.glass-site { --header-h: 4.6rem; }
.glass-site .brand-mark { padding: 0.32rem 0.95rem 0.32rem 0.5rem; border-radius: var(--radius-pill); gap: 0.7rem; }
.glass-site .brand-mark img { height: 2.3rem; }
.glass-site .nav { background: transparent; }
.glass-site .nav__link { font-size: 0.94rem; font-weight: 540; letter-spacing: -0.005em; }
@media (max-width: 72rem) {
  .glass-site .nav { inset: calc(3.75rem + 0.5rem) 0 auto 0; margin-inline: var(--gutter); border: 1px solid var(--glass-bd); border-radius: var(--radius-lg);
    background: var(--glass-bg-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); box-shadow: var(--glass-shadow); pointer-events: auto; }
  .glass-site .nav-toggle { background: transparent; border-color: var(--glass-bd); margin-right: 0.2rem; }
}
.glass-site .mega { background: var(--glass-bg-strong); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); }

/* ---------- 3D language switch ---------- */
.lang3d { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--radius-pill); isolation: isolate;
  background: linear-gradient(180deg, rgb(10 32 54 / 0.10), rgb(10 32 54 / 0.04)); box-shadow: inset 0 1px 3px rgb(10 32 54 / 0.28), 0 1px 0 rgb(255 255 255 / 0.9);
  perspective: 520px; transform-style: preserve-3d; font-size: 0.78rem; font-weight: 720; letter-spacing: 0.08em;
  transition: background-color 360ms var(--ease-out), box-shadow 360ms var(--ease-out); }
.lang3d a, .lang3d span.cur { position: relative; z-index: 1; display: grid; place-items: center; min-width: 2.7rem; padding: 0.42rem 0; text-decoration: none; color: var(--fg-muted); transition: color var(--dur-fast) ease; }
.lang3d span.cur { color: #fff; text-shadow: 0 1px 0 rgb(0 40 70 / 0.4); }
.lang3d a:hover { color: var(--brand-strong); }
.lang3d .thumb { position: absolute; z-index: 0; inset: 3px auto 3px 3px; width: calc(50% - 3px); border-radius: var(--radius-pill);
  background: linear-gradient(160deg, #3aa6e6, var(--brand-600) 55%, #005b8f);
  box-shadow: 0 6px 14px -4px rgb(0 112 176 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -2px 3px rgb(0 40 70 / 0.35);
  transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out); transform: translateX(0) rotateY(0deg); transform-origin: center; }
.lang3d[data-active="1"] .thumb { transform: translateX(100%); }
.lang3d[data-switching="true"] .thumb { transform: translateX(100%) rotateY(180deg); }
.lang3d[data-switching="true"][data-active="1"] .thumb { transform: translateX(0) rotateY(180deg); }
@media (hover: hover) and (pointer: fine) { .lang3d:hover .thumb { box-shadow: 0 10px 18px -4px rgb(0 112 176 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 -2px 3px rgb(0 40 70 / 0.35); } }

/* ---------- 3D hero ----------
   The stage (dark gradient + canvas + legibility scrim) is taller than the viewport and dissolves into the
   light page through an eased mask (see tone.css: --fade, .hero3d__stage). Scroll progress --hero-p (0..1)
   is set by site.js and drives a gentle parallax/fade. */
.hero3d { --hero-tail: clamp(5rem, 16vh, 10rem); position: relative; isolation: isolate; color: #eaf3fb; padding-bottom: var(--hero-tail); }
.hero3d__stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 80% at 72% 34%, var(--hero-1) 0%, var(--hero-2) 46%, var(--hero-3) 100%); }
.hero3d__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero3d__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(6 22 38 / 0.92) 0%, rgb(6 22 38 / 0.74) 30%, rgb(6 22 38 / 0.18) 52%, rgb(6 22 38 / 0) 64%); }
@media (max-width: 60rem) { .hero3d__stage::after { background: linear-gradient(180deg, rgb(6 22 38 / 0.94) 0%, rgb(6 22 38 / 0.82) 34%, rgb(6 22 38 / 0.2) 56%, rgb(6 22 38 / 0) 70%); } }
.hero3d.no-webgl .hero3d__stage { background: radial-gradient(60rem 36rem at 75% 40%, rgb(26 138 208 / 0.45), transparent 60%), linear-gradient(180deg, #0a2a47, #061626); }
.hero3d.no-webgl canvas { display: none; }
.hero3d__inner { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-8); padding-block: calc(var(--header-h) + 2.5rem) 2rem; }
.hero3d__copy { max-width: 38rem; }
.hero3d .eyebrow { color: #7fe3d8; }
.hero3d .eyebrow::before { background: #7fe3d8; }
.hero3d h1 { color: #fff; font-size: var(--step-5); max-width: 15ch; margin-bottom: var(--space-5); text-shadow: 0 2px 30px rgb(0 0 0 / 0.3); }
.hero3d h1 .grad { background: linear-gradient(100deg, #86d6ff, #3fe8d0 75%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline; }
.hero3d .lead { color: #c3d6e6; max-width: 33rem; font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.6; }
.hero3d .hero__actions { margin-top: var(--space-6); }
.hero3d .btn { --_bg: rgb(255 255 255 / 0.08); --_fg: #fff; --_bd: rgb(255 255 255 / 0.26); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hero3d .btn--primary { --_bg: var(--brand-500); --_bd: rgb(255 255 255 / 0.3); box-shadow: 0 10px 30px -10px rgb(26 138 208 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.35); }

/* Capability index rail at the foot of the hero */
.hero-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--radius-md); overflow: hidden; max-width: 54rem; }
.hero-index a { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.95rem 1.15rem; text-decoration: none; color: #dce9f4; font-weight: 560; font-size: 0.92rem; line-height: 1.3;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.hero-index a + a { border-left: 1px solid rgb(255 255 255 / 0.1); }
.hero-index__n { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; color: #7fe3d8; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .hero-index a:hover { background: rgb(255 255 255 / 0.08); color: #fff; } }
@media (max-width: 61.99rem) { .hero-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-index a:nth-child(3) { border-left: 0; } .hero-index a:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / 0.1); } }
@media (max-width: 60rem) {
  .hero3d__inner { justify-content: flex-start; min-height: 0; padding-bottom: 0; gap: var(--space-6); }
  .hero3d { padding-bottom: calc(52vh + var(--hero-tail)); }
  .hero-index { display: none; }
}
@media (max-width: 40rem) { .hero3d h1 { font-size: clamp(2.15rem, 9.6vw, 2.9rem); } .hero3d .hero__actions .btn { width: 100%; } }

/* ---------- Tilt (pointer-driven 3D, fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 160ms var(--ease-out), box-shadow var(--dur) var(--ease-out); will-change: transform; }
  .tilt.is-leaving { transition: transform 420ms var(--ease-out), box-shadow var(--dur) var(--ease-out); }
}