/* ==========================================================================
   Your Company — AURORA theme preset
   public/css/themes/aurora.css     (loaded after site.css, preset "aurora")

   Deep indigo night sky, frosted glass surfaces and a violet → teal gradient.
   Nothing here uses the classic LED dot grid: the background is three large,
   slowly drifting colour blobs behind a very light noise film, and every panel
   is a blurred glass card with a 20px radius.

   Palette — ten custom properties on [data-theme="aurora"]; every other colour
   in this file derives from them with var() / color-mix(). Admin → Theme & style
   → Colours overrides them from outside the file (:root[data-theme="aurora"]):
     --t-bg       #0b0a1a   --t-surface   #16142b   --t-border    #2a2747
     --t-text     #ecebff   --t-muted     #a7a3c9
     --t-accent   #7c5cff   --t-accent-2  #00d4c8   --t-accent-3  #ff7ab6
     --t-btn-bg   #7c5cff   --t-btn-text  #ffffff

   Three more groups are declared on the same block, each defaulting to the
   palette above so the preset still looks exactly like this file's artwork
   until someone recolours them in Admin → Theme & style:
     --t-loader-bg / --t-loader-accent / --t-loader-accent-2 / --t-loader-text
     --t-anim-1 / --t-anim-2 / --t-anim-3          the drifting colour blobs
     --t-strip-bg / --t-strip-text / --t-strip-accent   the strips

   Fonts
     Sora 600 (headings, normal case, -0.02em) · Inter (body)

   Hooks
     [data-theme="aurora"]              on <html> (set by views/partials/site-head.ejs)
     [data-motion="full|subtle|off"]    on <html> — animation intensity
     html.tc-anim                       added by /js/themes/_core.js only when
                                        motion is allowed — the sole permission
                                        this file has to hide anything on reveal
                                        (so nothing is hidden when JavaScript is
                                        unavailable, motion is off or the
                                        visitor asked for reduced motion)
     .is-in                             added to a revealed block/card by _core.js
     --i                                stagger index set by _core.js
   ========================================================================== */

/* ---------------------------------------------------------------- */
/* 1. palette + variables shared with site.css                       */
/* ---------------------------------------------------------------- */

html[data-theme='aurora'] {
  /* the palette: ten tokens, the only place this theme's colours are declared.
     Admin → Theme & style → Colours prints :root[data-theme="aurora"]{--t-…}
     after this stylesheet, which overrides them without editing the file. */
  --t-bg: #0b0a1a;
  --t-surface: #16142b;
  --t-text: #ecebff;
  --t-muted: #a7a3c9;
  --t-border: #2a2747;
  --t-accent: #7c5cff;
  --t-accent-2: #00d4c8;
  --t-accent-3: #ff7ab6;
  --t-btn-bg: #7c5cff;
  --t-btn-text: #ffffff;

  /* the loading screen, the drifting blobs and the strips carry their own
     tokens so Admin → Theme & style can recolour them independently; they all
     default to the palette above, so the shipped look is unchanged */
  --t-loader-bg: var(--t-bg);
  --t-loader-accent: var(--t-accent);
  --t-loader-accent-2: var(--t-accent-2);
  --t-loader-text: var(--t-text);
  --t-anim-1: var(--t-accent);
  --t-anim-2: var(--t-accent-2);
  --t-anim-3: var(--t-accent-3);
  --t-strip-bg: var(--t-surface);
  --t-strip-text: var(--t-text);
  --t-strip-accent: var(--t-accent);

  /* aurora's own tokens — every one derived from the palette above */
  --a-bg: var(--t-bg);
  --a-bg-deep: color-mix(in srgb, var(--t-bg) 65%, #000);
  --a-surface: color-mix(in srgb, var(--t-surface) 74%, transparent);
  --a-surface-2: color-mix(in srgb, var(--t-surface) 92%, transparent);
  --a-border: var(--t-border);
  --a-border-strong: color-mix(in srgb, var(--t-text) 24%, transparent);
  --a-text: var(--t-text);
  --a-muted: var(--t-muted);
  --a-muted-dim: color-mix(in srgb, var(--t-muted) 72%, var(--t-bg));
  --a-warm: var(--t-accent-3);
  --a-grad: linear-gradient(120deg, var(--t-accent) 0%, var(--t-accent-2) 100%);
  --a-grad-soft: linear-gradient(
    120deg,
    color-mix(in srgb, var(--t-accent) 22%, transparent),
    color-mix(in srgb, var(--t-accent-2) 18%, transparent)
  );
  --a-glass: blur(18px) saturate(140%);
  --a-shadow: 0 24px 60px color-mix(in srgb, var(--t-bg) 70%, #000);
  --a-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");

  /* remap the site.css variables: this is what recolours most of the page */
  --bg: var(--t-bg);
  --bg-deep: var(--a-bg-deep);
  --bg-soft: color-mix(in srgb, var(--t-bg) 80%, var(--t-surface));
  --panel: var(--a-surface);
  --panel-2: var(--a-surface-2);

  --text: var(--t-text);
  --muted: var(--t-muted);
  --muted-dim: var(--a-muted-dim);

  --accent: var(--t-accent);
  --secondary: var(--t-accent-2);
  /* --accent-rgb / --secondary-rgb keep the values site.css declares: a hex
     custom property cannot be split into channels, so the glows that used them
     are rebuilt below with color-mix() from the tokens instead. */

  --line: var(--t-border);
  --line-strong: color-mix(in srgb, var(--t-accent) 55%, transparent);

  --glow-sm: 0 0 14px color-mix(in srgb, var(--t-accent) 45%, transparent);
  --glow-md: 0 0 28px color-mix(in srgb, var(--t-accent) 38%, transparent);
  --glow-lg: 0 0 60px color-mix(in srgb, var(--t-accent) 30%, transparent);

  /* the LED dot grid is the classic theme's signature — aurora has none */
  --dot-grid: none;
  --dot-pitch: 0px;

  --font-heading: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-accent: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Inter', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --radius: 20px;
  --bracket: 0px; /* kills the classic corner brackets everywhere */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- */
/* 2. base: indigo canvas, no dot grid, Sora/Inter                   */
/* ---------------------------------------------------------------- */

html[data-theme='aurora'] {
  background-color: var(--a-bg);
  scroll-behavior: smooth;
}

[data-theme='aurora'] body {
  background-color: transparent;
  background-image: none;
  color: var(--a-text);
  font-family: var(--font-body);
  letter-spacing: 0.005em;
}

/* three blurred colour blobs, fixed behind everything and slowly drifting.
   They are the looping background light, so they read --t-anim-1 / -2 / -3
   (blob 1, 2, 3) rather than the page accents. */
html[data-theme='aurora']::before {
  content: '';
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--t-anim-1) 55%, transparent), transparent 72%),
    radial-gradient(closest-side, color-mix(in srgb, var(--t-anim-2) 34%, transparent), transparent 70%),
    radial-gradient(closest-side, color-mix(in srgb, var(--t-anim-3) 30%, transparent), transparent 72%);
  background-repeat: no-repeat;
  background-position: 8% 12%, 92% 8%, 46% 96%;
  background-size: 62vmax 62vmax, 54vmax 54vmax, 58vmax 58vmax;
  filter: blur(28px) saturate(120%);
  animation: aurora-drift-a 26s ease-in-out infinite alternate;
}

[data-theme='aurora'] body::before {
  content: '';
  position: fixed;
  inset: -18vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--t-anim-2) 28%, transparent), transparent 72%),
    radial-gradient(closest-side, color-mix(in srgb, var(--t-anim-3) 24%, transparent), transparent 70%);
  background-repeat: no-repeat;
  background-position: 84% 62%, 12% 78%;
  background-size: 48vmax 48vmax, 44vmax 44vmax;
  filter: blur(34px);
  animation: aurora-drift-b 32s ease-in-out infinite alternate;
}

/* very light noise film over the whole page (kills gradient banding) */
[data-theme='aurora'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--a-noise);
  background-size: 160px 160px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

@keyframes aurora-drift-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(3vmax, -2.5vmax, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-2.5vmax, 2vmax, 0) scale(0.96);
  }
}

@keyframes aurora-drift-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1.02);
  }
  50% {
    transform: translate3d(-3vmax, 2vmax, 0) scale(0.94);
  }
  100% {
    transform: translate3d(2vmax, -3vmax, 0) scale(1.06);
  }
}

/* ---------------------------------------------------------------- */
/* 3. typography — Sora 600 headings, normal case, tight tracking    */
/* ---------------------------------------------------------------- */

[data-theme='aurora'] h1,
[data-theme='aurora'] h2,
[data-theme='aurora'] h3,
[data-theme='aurora'] h4,
[data-theme='aurora'] h5 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--t-text);
}

[data-theme='aurora'] h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

[data-theme='aurora'] h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  letter-spacing: -0.025em;
}

[data-theme='aurora'] h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

[data-theme='aurora'] h4,
[data-theme='aurora'] h5 {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

[data-theme='aurora'] p,
[data-theme='aurora'] li {
  color: var(--a-muted);
}

[data-theme='aurora'] strong,
[data-theme='aurora'] b {
  color: var(--a-text);
  font-weight: 600;
}

[data-theme='aurora'] ::selection {
  background: color-mix(in srgb, var(--t-accent) 55%, transparent);
  color: var(--t-text);
}

[data-theme='aurora'] :focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--t-accent-2) 18%, transparent);
}

[data-theme='aurora'] .skip-link {
  background: var(--a-grad);
  color: var(--t-bg);
  border-radius: 999px;
}

/* the classic mono/technical styling becomes Inter with a little tracking */
[data-theme='aurora'] :is(.mono, .status, .news-meta, .article-meta, .work-meta, .job-meta,
    .filter-count, .filter-group label, .breadcrumbs, .stat-label, .team-role, .field label,
    .office-label, .hero-meta, .footer-bottom, .footer-col h3, .mega-num, .work-client) {
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}

/* ---------------------------------------------------------------- */
/* 4. header, navigation, announcement                               */
/* ---------------------------------------------------------------- */

/* the bar is a strip: it reads --t-strip-bg / --t-strip-text /
   --t-strip-accent, never the page accents */
[data-theme='aurora'] .announcement {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--t-strip-accent) 22%, transparent), color-mix(in srgb, var(--t-strip-accent) 8%, transparent) 60%, transparent),
    color-mix(in srgb, var(--t-strip-bg) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--t-strip-accent) 28%, transparent);
  color: var(--t-strip-text);
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

[data-theme='aurora'] .announcement .wrap > span {
  color: color-mix(in srgb, var(--t-strip-accent) 55%, var(--t-strip-text));
}

[data-theme='aurora'] .announcement a {
  color: var(--t-strip-text);
  border-bottom: 1px solid color-mix(in srgb, var(--t-strip-accent) 55%, transparent);
}

[data-theme='aurora'] .announcement a:hover {
  color: var(--t-strip-accent);
  border-color: var(--t-strip-accent);
}

[data-theme='aurora'] .site-header {
  background: color-mix(in srgb, var(--t-bg) 62%, transparent);
  border-bottom: 1px solid var(--a-border);
  -webkit-backdrop-filter: var(--a-glass);
  backdrop-filter: var(--a-glass);
}

[data-theme='aurora'] .site-header.is-scrolled {
  background: color-mix(in srgb, var(--t-bg) 86%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--t-bg) 55%, transparent);
}

[data-theme='aurora'] .brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--t-text);
}

[data-theme='aurora'] .brand .brand-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--a-grad);
  box-shadow: 0 0 18px color-mix(in srgb, var(--t-accent) 85%, transparent), 0 0 34px color-mix(in srgb, var(--t-accent-2) 45%, transparent);
}

[data-theme='aurora'] .primary-nav {
  font-family: var(--font-body);
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
  gap: 4px;
  flex-wrap: nowrap;
}

[data-theme='aurora'] .primary-nav > a,
[data-theme='aurora'] .primary-nav > .nav-item > button {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--a-muted);
  letter-spacing: 0.01em;
  /* a label never breaks in two: the whole menu stays on one line */
  white-space: nowrap;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}

[data-theme='aurora'] .primary-nav > a:hover,
[data-theme='aurora'] .primary-nav > .nav-item > button:hover {
  color: var(--t-text);
  background: color-mix(in srgb, var(--t-text) 7%, transparent);
  border-color: var(--a-border);
  text-shadow: none;
}

[data-theme='aurora'] .primary-nav > a.is-active {
  color: var(--t-text);
  background: color-mix(in srgb, var(--t-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--t-accent) 45%, transparent);
}

[data-theme='aurora'] .mega,
[data-theme='aurora'] .drop {
  background: color-mix(in srgb, var(--t-surface) 94%, transparent);
  border: 1px solid var(--a-border);
  border-radius: 20px;
  -webkit-backdrop-filter: var(--a-glass);
  backdrop-filter: var(--a-glass);
  box-shadow: var(--a-shadow);
}

[data-theme='aurora'] .mega::before,
[data-theme='aurora'] .drop::before {
  display: none;
}

[data-theme='aurora'] .mega-card {
  border-radius: 14px;
  background: color-mix(in srgb, var(--t-text) 4%, transparent);
  border: 1px solid transparent;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

[data-theme='aurora'] .mega-card:hover {
  background: color-mix(in srgb, var(--t-text) 9%, transparent);
  border-color: var(--a-border);
}

[data-theme='aurora'] .mega-card strong {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
}

[data-theme='aurora'] .mega-tags span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--t-accent) 30%, transparent);
}

[data-theme='aurora'] .drop a {
  border-radius: 10px;
}

[data-theme='aurora'] .drop a:hover {
  background: color-mix(in srgb, var(--t-text) 8%, transparent);
  color: var(--t-text);
  text-shadow: none;
}

[data-theme='aurora'] .mega-all {
  border-radius: 999px;
}

[data-theme='aurora'] .mega-all:hover {
  text-shadow: none;
  color: var(--secondary);
}

[data-theme='aurora'] .hamburger {
  border-radius: 12px;
  border-color: var(--a-border);
}

[data-theme='aurora'] .hamburger span {
  border-radius: 2px;
  background: var(--t-text);
}

[data-theme='aurora'] .scroll-track span {
  background: color-mix(in srgb, var(--t-text) 10%, transparent);
  border-radius: 999px;
}

[data-theme='aurora'] .scroll-track span.is-on {
  background: var(--a-grad);
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-accent) 70%, transparent);
}

/* ---------------------------------------------------------------- */
/* 5. buttons — pills, gradient fill, soft glow                      */
/* ---------------------------------------------------------------- */

[data-theme='aurora'] .btn {
  min-height: 46px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid var(--a-border-strong);
  background: color-mix(in srgb, var(--t-text) 5%, transparent);
  color: var(--a-text);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}

/* the classic bracket corners are gone */
[data-theme='aurora'] .btn::before {
  display: none;
}

[data-theme='aurora'] .btn:hover {
  color: var(--t-text);
  border-color: color-mix(in srgb, var(--t-text) 40%, transparent);
  background: color-mix(in srgb, var(--t-text) 12%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--t-accent) 28%, transparent);
}

[data-theme='aurora'] .btn--primary {
  background: linear-gradient(120deg, var(--t-btn-bg) 0%, color-mix(in srgb, var(--t-btn-bg) 62%, var(--t-accent-2)) 100%);
  border-color: transparent;
  color: var(--t-btn-text);
  font-weight: 600;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--t-accent) 36%, transparent), 0 4px 14px color-mix(in srgb, var(--t-accent-2) 22%, transparent);
}

[data-theme='aurora'] .btn--primary:hover {
  background: linear-gradient(120deg, var(--t-btn-bg) 0%, color-mix(in srgb, var(--t-btn-bg) 62%, var(--t-accent-2)) 100%);
  border-color: transparent;
  color: var(--t-btn-text);
  filter: brightness(1.06);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--t-accent) 50%, transparent), 0 6px 22px color-mix(in srgb, var(--t-accent-2) 34%, transparent);
}

[data-theme='aurora'] .btn--ghost {
  background: transparent;
  border-color: var(--a-border-strong);
  color: var(--a-text);
}

[data-theme='aurora'] .btn--ghost:hover {
  background: color-mix(in srgb, var(--t-text) 8%, transparent);
  box-shadow: none;
}

[data-theme='aurora'] .btn--sm {
  min-height: 38px;
  padding: 9px 18px;
  font-size: 0.8rem;
}

[data-theme='aurora'] .text-link {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--secondary);
  text-shadow: none;
}

[data-theme='aurora'] .text-link:hover {
  color: var(--t-text);
}

[data-theme='aurora'] .kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-text) 6%, transparent);
  border: 1px solid var(--a-border);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: color-mix(in srgb, var(--t-text) 78%, var(--t-accent));
  text-shadow: none;
}

[data-theme='aurora'] .kicker::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a-grad);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-accent-2) 80%, transparent);
  animation: aurora-pulse 3s ease-in-out infinite;
}

@keyframes aurora-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.82);
  }
}

/* ---------------------------------------------------------------- */
/* 6. glass surfaces — every card becomes a frosted panel            */
/* ---------------------------------------------------------------- */

[data-theme='aurora'] :is(
    .feature-card,
    .step,
    .discipline,
    .team-card,
    .work-card,
    .news-card,
    .office,
    .stat,
    .job,
    .event-tile,
    .brand-tile,
    .aside-card,
    .testimonial-slider,
    .empty-state,
    .form-notice,
    .login-card,
    .project-cover,
    .article-hero,
    .tech-media,
    .detail-media,
    .about-media,
    .discipline-media,
    .service-hero-media,
    .video-embed,
    .map-frame
  ) {
  border-radius: var(--radius);
  border: 1px solid var(--a-border);
  background-color: var(--a-surface);
  background-image: none;
  -webkit-backdrop-filter: var(--a-glass);
  backdrop-filter: var(--a-glass);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--t-bg) 45%, transparent);
  overflow: hidden;
}

/* the classic corner brackets and segmented rules are replaced by the glass */
[data-theme='aurora'] :is(
    .feature-card,
    .step,
    .discipline,
    .team-card,
    .work-card,
    .news-card,
    .office,
    .stat,
    .job,
    .event-tile,
    .brand-tile,
    .aside-card,
    .testimonial-slider,
    .empty-state,
    .form-notice,
    .map-frame,
    .project-cover,
    .article-hero,
    .tech-media,
    .detail-media,
    .about-media,
    .discipline-media,
    .service-hero-media,
    .video-embed,
    .hero-box
  )::before {
  display: none !important;
}

/* grids that were drawn with 1px hairlines now get real gaps */
[data-theme='aurora'] .card-grid,
[data-theme='aurora'] .stats,
[data-theme='aurora'] .clients-grid {
  gap: clamp(12px, 1.6vw, 18px);
  background: transparent;
  border: 0;
}

/* the client logo wall is a strip: the tiles, their text and the hover
   blush read the strip tokens, never the page accents */
[data-theme='aurora'] .client {
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--t-strip-accent) 22%, transparent);
  background: var(--t-strip-bg);
  color: var(--t-strip-text);
  -webkit-backdrop-filter: var(--a-glass);
  backdrop-filter: var(--a-glass);
}

[data-theme='aurora'] .client:hover {
  background: color-mix(in srgb, var(--t-strip-bg) 88%, var(--t-strip-text));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--t-bg) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--t-strip-accent) 45%, transparent),
    0 0 34px color-mix(in srgb, var(--t-strip-accent) 22%, transparent);
}

[data-theme='aurora'] .client span {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--t-strip-text);
}

[data-theme='aurora'] .client:hover span {
  color: var(--t-strip-accent);
}

[data-theme='aurora'] .client img {
  filter: grayscale(1) brightness(1.6);
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}

[data-theme='aurora'] .client:hover img {
  filter: grayscale(1) brightness(1.8) drop-shadow(0 0 14px color-mix(in srgb, var(--t-strip-accent) 80%, transparent));
}

/* hover: lift + gradient border shimmer */
[data-theme='aurora'] :is(
    .feature-card,
    .step,
    .discipline,
    .team-card,
    .work-card,
    .news-card,
    .office,
    .job,
    .event-tile,
    .aside-card
  ):hover {
  transform: translateY(-6px);
  background-color: var(--a-surface-2);
  border-color: transparent;
  box-shadow: 0 26px 60px color-mix(in srgb, var(--t-bg) 62%, transparent), 0 0 0 1px color-mix(in srgb, var(--t-accent) 45%, transparent),
    0 0 34px color-mix(in srgb, var(--t-accent-2) 18%, transparent);
}

/* the shimmering gradient edge (a second, thin ring painted over the border) */
[data-theme='aurora'] :is(.feature-card, .step, .discipline, .team-card, .work-card, .news-card, .event-tile, .brand-tile)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--a-grad);
  opacity: 0;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 0.35s var(--ease);
  z-index: 4;
}

[data-theme='aurora'] :is(.feature-card, .step, .discipline, .team-card, .work-card, .news-card, .event-tile, .brand-tile):hover::after {
  opacity: 1;
}

/* the brand logo wall is a strip too: the tiles keep the glass radius but
   their ground, text, hairline and hover glow come from the strip tokens */
[data-theme='aurora'] .brand-tile {
  background-color: var(--t-strip-bg);
  border-color: color-mix(in srgb, var(--t-strip-accent) 22%, transparent);
  color: var(--t-strip-text);
}

[data-theme='aurora'] .brand-tile:hover,
[data-theme='aurora'] .brand-tile:focus-visible {
  transform: translateY(-6px);
  background-color: color-mix(in srgb, var(--t-strip-bg) 88%, var(--t-strip-text));
  border-color: transparent;
  box-shadow: 0 26px 60px color-mix(in srgb, var(--t-bg) 62%, transparent), 0 0 0 1px color-mix(in srgb, var(--t-strip-accent) 45%, transparent),
    0 0 34px color-mix(in srgb, var(--t-strip-accent) 22%, transparent);
}

/* the edge shimmer of a tile is a strip accent, not the page gradient */
[data-theme='aurora'] .brand-tile::after {
  background: linear-gradient(120deg, var(--t-strip-accent) 0%, color-mix(in srgb, var(--t-strip-accent) 45%, var(--t-strip-text)) 100%);
}

[data-theme='aurora'] .brand-name {
  color: color-mix(in srgb, var(--t-strip-text) 62%, var(--t-strip-bg));
}

[data-theme='aurora'] .brand-tile:hover .brand-name,
[data-theme='aurora'] .brand-tile:focus-visible .brand-name {
  color: var(--t-strip-accent);
}

[data-theme='aurora'] .brand-tile:hover .brand-logo,
[data-theme='aurora'] .brand-tile:focus-visible .brand-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 14px color-mix(in srgb, var(--t-strip-accent) 85%, transparent));
}

[data-theme='aurora'] .feature-card,
[data-theme='aurora'] .step,
[data-theme='aurora'] .discipline,
[data-theme='aurora'] .office,
[data-theme='aurora'] .job {
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

[data-theme='aurora'] .feature-icon,
[data-theme='aurora'] .discipline-icon,
[data-theme='aurora'] .event-tile-icon {
  color: var(--secondary);
  text-shadow: none;
}

[data-theme='aurora'] .feature-card h3,
[data-theme='aurora'] .step h3,
[data-theme='aurora'] .event-tile h3,
[data-theme='aurora'] .news-body h3,
[data-theme='aurora'] .work-body h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* stats + timeline */
[data-theme='aurora'] .stat {
  border-radius: var(--radius);
  border: 1px solid var(--a-border);
  background: var(--a-surface);
}

[data-theme='aurora'] .stat::after {
  display: none;
}

[data-theme='aurora'] .stat-value {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--t-text);
  text-shadow: none;
  background: var(--a-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme='aurora'] .stat-value .suffix {
  -webkit-text-fill-color: var(--secondary);
  color: var(--secondary);
  text-shadow: none;
}

[data-theme='aurora'] .timeline::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-accent) 60%, transparent), color-mix(in srgb, var(--t-accent-2) 15%, transparent)) !important;
}

[data-theme='aurora'] .timeline-item {
  border-bottom: 1px solid var(--a-border);
}

[data-theme='aurora'] .timeline-item::before {
  background: var(--a-grad);
  box-shadow: 0 0 16px color-mix(in srgb, var(--t-accent) 80%, transparent);
  border-radius: 50%;
}

[data-theme='aurora'] .timeline-year,
[data-theme='aurora'] .discipline-num,
[data-theme='aurora'] .step-num {
  font-family: var(--font-heading);
  color: var(--secondary);
  text-shadow: none;
}

[data-theme='aurora'] .pill,
[data-theme='aurora'] .work-tag,
[data-theme='aurora'] .chip,
[data-theme='aurora'] .badge {
  border-radius: 999px;
  border-color: var(--a-border);
  background: color-mix(in srgb, var(--t-text) 5%, transparent);
  color: color-mix(in srgb, var(--t-text) 78%, var(--t-accent));
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  text-transform: none;
}

[data-theme='aurora'] .chip.is-active,
[data-theme='aurora'] .work-tag {
  background: var(--a-grad);
  border-color: transparent;
  color: var(--t-btn-text);
  font-weight: 600;
}

[data-theme='aurora'] .work-tag {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--t-accent) 35%, transparent);
}

[data-theme='aurora'] .work-client {
  color: var(--a-muted-dim);
}

/* ---------------------------------------------------------------- */
/* 7. the loading screen — indigo ground, one drifting glow ring      */
/*                                                                   */
/* The markup, the timed steps and the hard timeout all belong to     */
/* /js/preloader.js; this only repaints it. ::after (from            */
/* site-head.ejs) stays the white completion flash.                   */
/*                                                                   */
/* It reads only the loader tokens: --t-loader-bg for the ground,     */
/* --t-loader-accent / --t-loader-accent-2 for the ring, the frame,   */
/* the progress bar, the dot and their glows, --t-loader-text for the */
/* site name and the status line. The classic pixel wall is hidden —  */
/* the drifting glow is this preset's picture.                        */
/* ---------------------------------------------------------------- */

[data-theme='aurora'] .stage-loader {
  background: var(--t-loader-bg);
  color: var(--t-loader-text);
}

/* the ring: two blurred loader-accent blobs drifting behind the logo */
[data-theme='aurora'] .stage-loader::before {
  content: '';
  position: absolute;
  inset: -30vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--t-loader-accent) 45%, transparent), transparent 70%),
    radial-gradient(closest-side, color-mix(in srgb, var(--t-loader-accent-2) 32%, transparent), transparent 72%);
  background-repeat: no-repeat;
  background-position: 34% 34%, 68% 68%;
  background-size: 58vmax 58vmax, 50vmax 50vmax;
  filter: blur(30px) saturate(120%);
  animation: aurora-loader-drift 15s ease-in-out infinite alternate;
}

@keyframes aurora-loader-drift {
  0% {
    transform: translate3d(-1.5vmax, 1vmax, 0) scale(1);
  }
  100% {
    transform: translate3d(1.5vmax, -1vmax, 0) scale(1.06);
  }
}

[data-theme='aurora'] .stage-loader__canvas {
  display: none;
}

[data-theme='aurora'] .stage-loader__corner {
  border-color: color-mix(in srgb, var(--t-loader-accent-2) 55%, transparent);
  border-radius: 12px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--t-loader-accent) 60%, transparent));
}

[data-theme='aurora'] .stage-loader__logo img {
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--t-loader-accent) 60%, transparent))
    drop-shadow(0 0 52px color-mix(in srgb, var(--t-loader-accent) 28%, transparent));
}

[data-theme='aurora'] .stage-loader__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--t-loader-text);
  text-shadow: 0 0 40px color-mix(in srgb, var(--t-loader-accent) 34%, transparent);
}

/* the scanline sweep is the second accent, not plain white */
[data-theme='aurora'] .stage-loader__name::after {
  background-image: linear-gradient(
    104deg,
    transparent 43%,
    color-mix(in srgb, var(--t-loader-accent-2) 90%, transparent) 50%,
    transparent 57%
  );
}

[data-theme='aurora'] .stage-loader__bar span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-loader-accent) 12%, transparent);
}

[data-theme='aurora'] .stage-loader__bar span.is-on {
  background: var(--t-loader-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-loader-accent) 80%, transparent);
}

[data-theme='aurora'] .stage-loader__bar span.is-lead {
  background: var(--t-loader-accent-2);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-loader-accent-2) 90%, transparent),
    0 0 26px color-mix(in srgb, var(--t-loader-accent) 70%, transparent);
}

[data-theme='aurora'] .stage-loader__meta {
  color: var(--t-loader-text);
}

[data-theme='aurora'] .stage-loader__dot {
  border-radius: 50%;
  background: linear-gradient(100deg, var(--t-loader-accent), var(--t-loader-accent-2));
  box-shadow: 0 0 10px color-mix(in srgb, var(--t-loader-accent) 85%, transparent);
}

[data-theme='aurora'] .stage-loader__pct {
  color: var(--t-loader-accent-2);
  text-shadow: 0 0 16px color-mix(in srgb, var(--t-loader-accent) 55%, transparent);
}

/* ---------------------------------------------------------------- */
/* 8. motion settings — off, reduced motion                          */
/*                                                                   */
/* The reveal rules of this preset are armed by `html.tc-anim` only,  */
/* which /js/themes/_core.js adds when motion is allowed — so nothing */
/* here can hide content without it. What is left is the endlessly    */
/* running decoration: the two drifting colour blobs, the drifting    */
/* glow of the loading screen and the pulsing kicker dot. Those must  */
/* stand still when motion is switched off in the admin or when the   */
/* visitor asked for reduced motion.                                  */
/* ---------------------------------------------------------------- */

html[data-theme='aurora'][data-motion='off']::before,
html[data-theme='aurora'][data-motion='off'] body::before,
html[data-theme='aurora'][data-motion='off'] .stage-loader::before,
html[data-theme='aurora'][data-motion='off'] .kicker::before {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme='aurora']::before,
  html[data-theme='aurora'] body::before,
  html[data-theme='aurora'] .stage-loader::before,
  html[data-theme='aurora'] .kicker::before {
    animation: none;
  }

  /* "smooth" scrolling is motion too */
  html[data-theme='aurora'] {
    scroll-behavior: auto;
  }
}