/* ELVARIS SOFTWARE LTD — intro.css
   FIRST-ENTRY INTRO ANIMATION ONLY.

   This file is entirely additive. It never touches `.site-loader`, which
   remains the ordinary internal-page loader with its original design,
   colours, progress line, dimensions and duration.

   The intro overlay sits above the ordinary loader and is only rendered when
   the pre-paint head script adds `html.is-intro` (first entry in a session,
   or a forced `?intro=1` preview).

   Timeline (~3.0s total, inside the 2.6–3.2s target):
     0.00–0.45  background settles, technical grid + system nodes appear
     0.35–1.15  fine blue/coral lines construct the ELVARIS "E"
     1.05–1.40  the mark resolves sharply, destination node lands
     1.30–1.90  a blue→coral signal travels through the mark
     1.55–2.30  ELVARIS wordmark reveals letter by letter
     2.05–2.50  SOFTWARE LTD appears in smaller tracked type
     2.30–2.80  a short data-path / workflow detail completes
     2.78–3.05  the screen wipes open into the page
*/

/* ---------------------------------------------------------------- layout */
.site-intro__grid,
.site-intro__nodes,
.site-intro__inner { position: absolute; }

.site-intro__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  width: min(420px, 84vw);
  padding-inline: 1.5rem;
}

/* --------------------------------------------- 1. technical grid + nodes */
.site-intro__grid {
  inset: 0;
  z-index: 1;
  opacity: 0;
  background-image:
    linear-gradient(rgba(143,176,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,176,255,0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 50%, #000 8%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 8%, transparent 68%);
  animation: si-grid 900ms ease-out 40ms forwards;
}
@keyframes si-grid {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* Connected system nodes drawn as a light SVG overlay */
.site-intro__nodes {
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.site-intro__nodes line {
  stroke: rgba(143,176,255,0.30);
  stroke-width: 1;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: si-line 1100ms cubic-bezier(0.16,1,0.3,1) forwards;
}
.site-intro__nodes line:nth-of-type(1) { animation-delay: 120ms; }
.site-intro__nodes line:nth-of-type(2) { animation-delay: 210ms; }
.site-intro__nodes line:nth-of-type(3) { animation-delay: 300ms; }
.site-intro__nodes line:nth-of-type(4) { animation-delay: 390ms; }
.site-intro__nodes circle {
  fill: rgba(143,176,255,0.55);
  opacity: 0;
  animation: si-node 520ms ease-out forwards;
}
.site-intro__nodes circle:nth-of-type(1) { animation-delay: 300ms; }
.site-intro__nodes circle:nth-of-type(2) { animation-delay: 400ms; }
.site-intro__nodes circle:nth-of-type(3) { animation-delay: 500ms; }
.site-intro__nodes circle:nth-of-type(4) { animation-delay: 600ms; }
@keyframes si-line { to { stroke-dashoffset: 0; } }
@keyframes si-node { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------- 2–3. the mark constructs */
.site-intro__mark {
  width: clamp(96px, 22vw, 124px);
  height: clamp(96px, 22vw, 124px);
  overflow: visible;
  display: block;
}

/* Fine construction lines draw first, then the real strokes resolve over them */
.site-intro__mark .si-guide {
  stroke: rgba(143,176,255,0.34);
  stroke-width: 0.6;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: si-guide 760ms ease-out 300ms forwards;
}
@keyframes si-guide {
  0%   { stroke-dashoffset: 60; opacity: 1; }
  70%  { stroke-dashoffset: 0;  opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 0; }
}

.site-intro__mark .si-stroke {
  stroke-dasharray: var(--l, 40);
  stroke-dashoffset: var(--l, 40);
  animation: si-draw 780ms cubic-bezier(0.16,1,0.3,1) forwards;
}
.site-intro__mark .si-stroke:nth-of-type(1) { animation-delay: 380ms; }
.site-intro__mark .si-stroke:nth-of-type(2) { animation-delay: 500ms; }
.site-intro__mark .si-stroke:nth-of-type(3) { animation-delay: 620ms; }
.site-intro__mark .si-stroke:nth-of-type(4) { animation-delay: 740ms; }
@keyframes si-draw { to { stroke-dashoffset: 0; } }

.site-intro__mark .si-node {
  opacity: 0;
  transform-origin: center;
  animation: si-pop 460ms cubic-bezier(0.16,1,0.3,1) 1050ms forwards;
}
@keyframes si-pop {
  from { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.28); }
  to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------- 4. blue→coral signal sweep */
.site-intro__mark .si-signal {
  stroke: #8FB0FF;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 6 62;
  stroke-dashoffset: 68;
  opacity: 0;
  animation: si-signal 620ms cubic-bezier(0.45,0,0.35,1) 1300ms forwards;
}
@keyframes si-signal {
  0%   { stroke-dashoffset: 68; opacity: 0; stroke: #4B72FF; }
  15%  { opacity: 1; }
  85%  { opacity: 1; stroke: #F0563A; }
  100% { stroke-dashoffset: 0; opacity: 0; stroke: #F0563A; }
}

/* --------------------------------- 5. wordmark, letter by letter */
.site-intro__word {
  margin: 0.35rem 0 0;
  display: flex;
  gap: 0.02em;
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.05rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  line-height: 1;
  color: #FCFBF8;
}
.site-intro__word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.32em);
  animation: si-letter 480ms cubic-bezier(0.16,1,0.3,1) forwards;
}
.site-intro__word span:nth-child(1) { animation-delay: 1560ms; }
.site-intro__word span:nth-child(2) { animation-delay: 1625ms; }
.site-intro__word span:nth-child(3) { animation-delay: 1690ms; }
.site-intro__word span:nth-child(4) { animation-delay: 1755ms; }
.site-intro__word span:nth-child(5) { animation-delay: 1820ms; }
.site-intro__word span:nth-child(6) { animation-delay: 1885ms; }
.site-intro__word span:nth-child(7) { animation-delay: 1950ms; }
@keyframes si-letter {
  from { opacity: 0; transform: translateY(0.32em); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------- 6. SOFTWARE LTD sub-lockup */
.site-intro__sub {
  margin: 0;
  font-family: var(--font-mono, "IBM Plex Mono", Consolas, monospace);
  font-size: clamp(0.6rem, 2.1vw, 0.68rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(246,243,236,0.62);
  opacity: 0;
  animation: si-sub 520ms ease-out 2060ms forwards;
}
@keyframes si-sub {
  from { opacity: 0; letter-spacing: 0.30em; }
  to   { opacity: 1; letter-spacing: 0.42em; }
}

/* --------------------------------- 7. data-path / workflow detail */
.site-intro__path {
  width: 100%;
  height: 2px;
  margin-top: 0.9rem;
  position: relative;
  background: rgba(246,243,236,0.12);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: si-fade 320ms ease-out 2280ms forwards;
}
.site-intro__path i {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, #2F55F0, #7A63EA 52%, #F0563A);
  animation: si-fill 520ms cubic-bezier(0.5,0.05,0.2,1) 2320ms forwards;
}
@keyframes si-fill { to { right: 0; } }
@keyframes si-fade { to { opacity: 1; } }

.site-intro__steps {
  display: flex;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
  font-family: var(--font-mono, Consolas, monospace);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246,243,236,0.42);
}
.site-intro__steps li {
  margin: 0;
  opacity: 0;
  animation: si-fade 300ms ease-out forwards;
}
.site-intro__steps li:nth-child(1) { animation-delay: 2380ms; }
.site-intro__steps li:nth-child(2) { animation-delay: 2470ms; }
.site-intro__steps li:nth-child(3) { animation-delay: 2560ms; }

/* --------------------------------- 8. wipe open into the page */
html.is-intro-leaving .site-intro {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 300ms cubic-bezier(0.76,0,0.24,1);
}

/* ---------------------------------------------------- reduced motion
   A short, simple branded fade — logo and wordmark visible immediately,
   no construction, sweep, letter stagger or travel. */
@media (prefers-reduced-motion: reduce) {
  .site-intro__grid { animation: none; opacity: 1; transform: none; }
  .site-intro__nodes line { animation: none; stroke-dashoffset: 0; }
  .site-intro__nodes circle { animation: none; opacity: 1; }
  .site-intro__mark .si-guide { animation: none; opacity: 0; }
  .site-intro__mark .si-stroke { animation: none; stroke-dashoffset: 0; }
  .site-intro__mark .si-node { animation: none; opacity: 1; transform: none; }
  .site-intro__mark .si-signal { animation: none; opacity: 0; }
  .site-intro__word span { animation: none; opacity: 1; transform: none; }
  .site-intro__sub { animation: none; opacity: 1; }
  .site-intro__path { animation: none; opacity: 1; }
  .site-intro__path i { animation: none; right: 0; }
  .site-intro__steps li { animation: none; opacity: 1; }
  html.is-intro-leaving .site-intro { transition: opacity 160ms ease; clip-path: none; opacity: 0; }
}

/* =======================================================================
   FAQ PAGE — dark-section accordion support.
   The base .accordion component is shared and unchanged; these rules only
   adapt its colours when it sits inside an `on-dark` section.
   ======================================================================= */
.on-dark .accordion { border-top-color: rgba(246,243,236,0.16); }
.on-dark .accordion-item { border-bottom-color: rgba(246,243,236,0.16); }
.on-dark .accordion-trigger { color: var(--white); }
.on-dark .accordion-trigger:hover { color: var(--luminous); }
.on-dark .accordion-panel p { color: rgba(246,243,236,0.74); }
.on-dark .accordion-panel a { color: var(--luminous); }

/* Category accent on the open item, using the existing brand colours */
.accordion-item[data-open="true"] > h3 > .accordion-trigger { color: var(--cobalt-dark); }
.on-dark .accordion-item[data-open="true"] > h3 > .accordion-trigger { color: var(--luminous); }

/* Keep the heading wrapper visually neutral — the button carries the styling */
.accordion-item > h3 {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: inherit;
}

/* Reduced motion: the panel must open instantly rather than relying on a
   max-height transition completing, so answers stay reachable when animation
   is unavailable or suppressed. Additive — the shared component is untouched. */
@media (prefers-reduced-motion: reduce) {
  .accordion-panel { transition: none !important; }
  .accordion-item[data-open="true"] .accordion-panel { max-height: 4000px; }
}