/* ---------- Animated "frosted-glass panels" hero background ----------
   Linked only on inner pages (never index.html or knowing-qcs.html). Markup, first child of the hero:
     <div class="hab" aria-hidden="true"> 3 x .hab__blob, then .hab__stage holding 8 x .hab__panel </div>
   The hero itself gets .hab-hero, which lifts its existing content above the layer. Article-based pages (case
   studies, blog posts) use .hab--top: the layer is a band across the top of the article that fades to white. */

.hab-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; } /* clip: same clipping, keeps sticky descendants working */
.hab-hero > :not(.hab):not(.gt__wash) { position: relative; z-index: 1; }
.hab-hero > .gt__wash { display: none; } /* contact page: the panels replace its static wash */

.hab {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* warm peach → lavender → sky blue */
  background: linear-gradient(90deg, #FCE3C8 0%, #F3DFEA 28%, #DCD8F8 52%, #CFE0FC 76%, #BEDFFD 100%);
}
/* bottom fade into pale cool grey keeps the headline and copy readable */
.hab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 2;
  background: linear-gradient(180deg, rgba(241, 243, 246, 0) 0%, rgba(241, 243, 246, .82) 62%, #F1F3F6 100%);
}
.hab--top { bottom: auto; height: min(100%, 720px); }
.hab--top::after { height: 60%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 60%, #fff 100%); }

/* depth: three very blurred colour blobs drifting slowly behind the panels */
.hab__blob {
  position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(70px);
  animation: hab-blob var(--t) ease-in-out var(--d) infinite alternate; will-change: translate;
}
.hab__blob--1 { left: -12%; top: 18%; width: 48%; background: rgba(255, 186, 120, .55); --t: 14.7s; --d: -2.7s; --bx: 6%; --by: -8%; }
.hab__blob--2 { left: 30%; top: -30%; width: 44%; background: rgba(164, 146, 250, .45); --t: 17.3s; --d: -7.3s; --bx: -7%; --by: 9%; }
.hab__blob--3 { left: 66%; top: -6%; width: 50%; background: rgba(110, 176, 255, .5); --t: 13.3s; --d: -4.7s; --bx: -5%; --by: -6%; }
@keyframes hab-blob { from { translate: 0 0; } to { translate: var(--bx) var(--by); } }

/* Speed: every loop runs at 1.5x its original pace (panels 6.3-9.3s, glows 13.3-17.3s); same distances and easing,
   so the motion stays smooth and subtle, just livelier. */

/* the panels: translucent white, vertical sides, top and bottom slanting down to the right at 20deg */
.hab__stage { position: absolute; inset: 0; z-index: 1; }
.hab__panel {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  transform: skewY(20deg); transform-origin: 0 0;
  background:
    /* faint highlight on the left edge, fading out with the panel */
    linear-gradient(180deg, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 80%) left top / 1.5px 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .38) 38%, rgba(255, 255, 255, .1) 72%, rgba(255, 255, 255, 0) 100%);
  animation: hab-float var(--t) cubic-bezier(.45, 0, .55, 1) var(--d) infinite alternate; will-change: translate;
}
/* neighbours run in opposite directions */
.hab__panel:nth-child(even) { animation-direction: alternate-reverse; }
@keyframes hab-float { from { translate: 0 calc(var(--amp) * -1); } to { translate: 0 var(--amp); } }

/* top row: six stepped panels; lower row: two (positions are % of the hero) */
.hab__panel--1 { --x: -6%; --y: 4%;   --w: 22%; --h: 46%; --t: 6.3s;  --d: -1.3s;   --amp: 16px; }
.hab__panel--2 { --x: 12%; --y: -8%;  --w: 20%; --h: 44%; --t: 8s;    --d: -4s;   --amp: 20px; }
.hab__panel--3 { --x: 28%; --y: 8%;   --w: 22%; --h: 48%; --t: 7s;    --d: -.7s;   --amp: 18px; }
.hab__panel--4 { --x: 46%; --y: -6%;  --w: 20%; --h: 44%; --t: 9s;    --d: -5.3s;   --amp: 22px; }
.hab__panel--5 { --x: 62%; --y: 6%;   --w: 22%; --h: 46%; --t: 7.3s;  --d: -3s; --amp: 17px; }
.hab__panel--6 { --x: 80%; --y: -10%; --w: 26%; --h: 48%; --t: 9.3s;  --d: -6.7s;  --amp: 21px; }
.hab__panel--7 { --x: 30%; --y: 40%;  --w: 22%; --h: 46%; --t: 6.7s;  --d: -2s;   --amp: 15px; }
.hab__panel--8 { --x: 60%; --y: 44%;  --w: 24%; --h: 44%; --t: 8.3s;  --d: -4.7s;   --amp: 19px; }

/* narrow screens: widen the stage so the panels keep a generous size instead of turning into slivers */
@media (max-width: 767px) {
  .hab__stage { left: -45%; right: -45%; }
  .hab__blob { filter: blur(50px); }
}

/* Pre-footer ribbon drift on these pages: 1.5x its base pace too. This file loads after custom.css and is never linked
   from index.html or knowing-qcs.html, so those two keep the original speed. */
section[class*="pre-footer-bg.svg"]::after {
  animation: pf-drift-move 12.7s ease-in-out infinite, pf-drift-zoom 8.7s ease-in-out infinite, pf-drift-tilt 15.3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hab__blob, .hab__panel { animation: none; }
  section[class*="pre-footer-bg.svg"]::after { animation: none; }
}