/* ==========================================================================
   RETINNO 1.5.0 — delight layer (pairs with assets/js/delight.js)
   Same palette, same words. Only light, depth and motion are added.
   Everything animated is behind prefers-reduced-motion: no-preference.
   ========================================================================== */

::selection { background: rgba(59, 130, 246, .28); color: inherit; }
html { scrollbar-color: #9DB4D8 transparent; scrollbar-width: thin; }

/* Scroll progress: a thin path line across the top of the page. */
.rt-progress {
  position: fixed; z-index: 1100; inset-block-start: 0; inset-inline: 0; height: 3px;
  transform: scaleX(0); transform-origin: right center; pointer-events: none;
  background: linear-gradient(90deg, #2563EB, #60A5FA 60%, #BFDBFE);
  box-shadow: 0 0 14px rgba(59, 130, 246, .55);
}
[dir="ltr"] .rt-progress { transform-origin: left center; }

/* Header settles when you scroll. */
.site-header { transition: box-shadow 240ms ease, background-color 240ms ease; }
.site-header.is-scrolled { background: rgba(255, 255, 255, .8); box-shadow: 0 10px 34px rgba(11, 19, 36, .07); }

/* Capacity badge: a calm pulse only when there is room. */
.capacity-badge.is-available > span { position: relative; }
.capacity-badge.is-available > span::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: 0;
}

/* Spotlight + constellation layers sit behind the content of dark sections. */
.rt-has-spot { position: relative; isolation: isolate; }
.rt-has-spot > .container { position: relative; z-index: 2; }
.rt-spot {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 400ms ease;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 40%), rgba(96, 165, 250, .16), rgba(59, 130, 246, .05) 38%, transparent 62%);
}
.rt-spot.is-on { opacity: 1; }
.rt-constellation { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .7; contain: strict; }

/* Dashboard glare (large screens, mouse only — transform stays as before otherwise). */
.rt-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 300ms ease; border-radius: inherit;
  background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 30%), rgba(191, 219, 254, .16), transparent 60%);
  mix-blend-mode: screen;
}
.hero-dashboard.is-lit .rt-glare { opacity: 1; }
@media (min-width: 1051px) {
  .rt-js .hero-dashboard {
    transform: perspective(1200px) rotateY(calc(-3deg + var(--rt-ry, 0deg))) rotateX(calc(1deg + var(--rt-rx, 0deg)));
    transition: transform 220ms ease-out; will-change: transform;
  }
}

/* Card light that follows the cursor. */
.rt-card-glow {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 260ms ease;
  background: radial-gradient(300px circle at var(--cx, 50%) var(--cy, 50%), rgba(59, 130, 246, .10), transparent 62%);
}
.feature-card:hover .rt-card-glow, .consultant-card:hover .rt-card-glow, .article-card:hover .rt-card-glow { opacity: 1; }

/* Primary buttons get a soft sheen. */
.hero-primary-cta, .closing-cta--signature .button--light { position: relative; overflow: hidden; }
.hero-primary-cta::after, .closing-cta--signature .button--light::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent); transform: skewX(-18deg); opacity: 0;
}
.hero-primary-cta:hover::after, .closing-cta--signature .button--light:hover::after { opacity: 1; inset-inline-start: 130%; transition: inset-inline-start 650ms ease, opacity 120ms ease; }
.button { will-change: auto; }

/* Motion (only when the visitor has not asked for less). */
@media (prefers-reduced-motion: no-preference) {
  /* Headline words rise in (specific selectors beat the earlier h1 span colour rule). */
  .hero-section--signature .hero-copy h1.rt-split .rt-word { display: inline-block; color: #F8FAFC; text-shadow: none;
    animation: rt-word-in 700ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(120ms + var(--i, 0) * 85ms); }
  .hero-section--signature .hero-copy h1.rt-split span .rt-word { color: transparent; text-shadow: none;
    background: linear-gradient(100deg, #8ABEFF 20%, #DCEBFF 48%, #8ABEFF 76%) 100% 0 / 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: rt-word-in 700ms cubic-bezier(.2, .8, .2, 1) both, rt-shimmer 6s ease-in-out infinite;
    animation-delay: calc(120ms + var(--i, 0) * 85ms), 1.8s; }

  /* The path draws itself; nodes pop as the line reaches them. */
  .rt-draw .hero-path-art__path, .rt-draw .hero-path-art__underlay { stroke-dasharray: var(--len, 700); stroke-dashoffset: var(--len, 700);
    animation: rt-draw 1.9s cubic-bezier(.45, .05, .25, 1) .5s forwards; }
  .rt-draw .hero-path-art__trail { opacity: 0; animation: rt-fade 800ms ease 2s forwards, retinno-trail-flow 9s linear 2s infinite; }
  .rt-draw circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: rt-pop 620ms cubic-bezier(.2, .9, .3, 1.35) var(--d, 1s) forwards; }
  .rt-draw .hero-path-art__ring--final { animation: rt-pop 620ms cubic-bezier(.2, .9, .3, 1.35) var(--d, 1s) forwards, retinno-node-pulse 3.4s ease-in-out 2.8s infinite; }

  /* Section dashes grow in when the heading reveals. */
  html.has-retinno-motion .section-heading .eyebrow__dash { transform: scaleX(0); transform-origin: right center; transition: transform 700ms cubic-bezier(.2, .8, .2, 1) 200ms; }
  html.has-retinno-motion .section-heading[data-revealed="true"] .eyebrow__dash { transform: scaleX(1); }

  /* Cards rise with a small stagger. */
  .rt-rise { opacity: 0; translate: 0 22px; transition: opacity 650ms cubic-bezier(.2, .8, .2, 1) var(--rt-stagger, 0ms), translate 650ms cubic-bezier(.2, .8, .2, 1) var(--rt-stagger, 0ms), box-shadow 180ms ease, border-color 180ms ease; }
  .rt-rise.is-in { opacity: 1; translate: 0 0; }

  /* Availability pulse. */
  .capacity-badge.is-available > span::after { animation: rt-ping 2.4s ease-out infinite; }
}

@keyframes rt-word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rt-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes rt-draw { to { stroke-dashoffset: 0; } }
@keyframes rt-fade { to { opacity: 1; } }
@keyframes rt-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes rt-ping { 0% { transform: scale(.6); opacity: .65; } 70%, 100% { transform: scale(2.1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rt-constellation, .rt-spot, .rt-glare { display: none; }
}
@media (max-width: 820px) {
  .rt-constellation { opacity: .55; }
}
@media (forced-colors: active) {
  .rt-progress, .rt-spot, .rt-glare, .rt-card-glow, .rt-constellation { display: none; }
  .hero-section--signature .hero-copy h1.rt-split .rt-word, .hero-section--signature .hero-copy h1.rt-split span .rt-word { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; }
}