/* =========================================================
   SILANDE — PAGE TRANSITION
   A short brand mark between pages, not a loading screen.

   THE ORDER IS THE WHOLE POINT:
   the RED comes first. It draws itself at the right end of the
   track, alone, and only once it is there does the BLUE draw
   out of it toward the left. There is never a blue line that a
   red piece is added to.

   The line it lands on is the site's own rule: blue on the
   physical LEFT, the short red on the physical RIGHT, 70 / 30
   -- measured off the reference, and the same orientation
   .cat-rule, .tech-rule, .pr-rule and .about__rule already use.

   Geometry, so the two can never drift apart:
     track   170px  (centred in the window)
     red      51px  anchored right, scales out from its right edge
     blue    119px  anchored to the red's left edge, scales out
                    from ITS right edge -- i.e. leftward, away
                    from the red
   Both grow from the same side, so the blue's right edge is
   always exactly the red's left edge, by construction.

   js/page-transition.js owns the classes. The one-liner in
   <head> adds .sil-nav to <html> before the page paints.
   Without JavaScript nothing is ever hidden and every link is
   just a link.
   ========================================================= */

:root {
  --sil-blue: #005E8E;        /* the site's own rule blue */
  --sil-red: #CC2F3A;         /* the site's own rule red  */
  --sil-line: 170px;
  --sil-lead: 51px;           /* the red, 30% */
  --sil-trail: 119px;         /* the blue, 70% */
  --sil-thick: 3px;
  --sil-veil: 180ms;          /* the page fading toward white */
  --sil-red-draw: 150ms;
  --sil-blue-draw: 360ms;
  --sil-blue-wait: 100ms;     /* the blue waits for the red */
  --sil-enter: 450ms;         /* the new page settling */
  --sil-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------
   1 — THE WHITE
   A wash, not a cover. 72% white over a 4px backdrop blur:
   the page underneath stays readable and recognisable, it is
   just set back a step. Fully opaque white turned this into a
   loading screen, which is the one thing it must not be.
   --------------------------------------------------------- */
.sil-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  /* It must never be able to swallow a click, in any state. */
  pointer-events: none;
  opacity: 0;
}

.sil-veil.is-covering {
  opacity: 1;
  transition: opacity var(--sil-veil) var(--sil-ease);
}

/* ---------------------------------------------------------
   2 — THE LINE
   --------------------------------------------------------- */
.sil-veil__line {
  position: relative;
  width: var(--sil-line);
  height: var(--sil-thick);
}

/* PHYSICAL right on both, and transform-origin right on both:
   the line is built from the right, with the reading, and
   transform-origin is never flipped by direction. */
.sil-veil__red {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--sil-lead);
  background-color: var(--sil-red);
  transform: scaleX(0);
  transform-origin: right center;
}

.sil-veil__blue {
  position: absolute;
  top: 0;
  bottom: 0;
  /* starts where the red ends */
  right: var(--sil-lead);
  width: var(--sil-trail);
  background-color: var(--sil-blue);
  transform: scaleX(0);
  transform-origin: right center;
}

/* The draw: red first, then the blue out of it. The blue's
   delay is what makes the order readable rather than implied. */
.sil-veil.is-drawing .sil-veil__red {
  transform: scaleX(1);
  transition: transform var(--sil-red-draw) var(--sil-ease);
}

.sil-veil.is-drawing .sil-veil__blue {
  transform: scaleX(1);
  transition: transform var(--sil-blue-draw) var(--sil-ease) var(--sil-blue-wait);
}

/* ---------------------------------------------------------
   3 — ARRIVING
   The veil opens on the finished line and takes itself off
   with a CSS animation rather than a class, so a white sheet
   can never be left over the site if a script stumbles.
   --------------------------------------------------------- */
@keyframes sil-veil-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.sil-veil.is-landing {
  animation: sil-veil-out 380ms var(--sil-ease) both;
}

.sil-veil.is-landing .sil-veil__red,
.sil-veil.is-landing .sil-veil__blue {
  transform: scaleX(1);
}

/* ---------------------------------------------------------
   4 — THE NEW PAGE
   Animations, not classes, for the same reason: a page must
   never depend on a script having loaded in order to be
   visible. Opacity on <body> makes a stacking context but not
   a containing block, so the fixed veil above is unaffected;
   the 8px rise is on <main> alone, which keeps the transform
   off any ancestor of the veil.
   --------------------------------------------------------- */
@keyframes sil-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sil-main-in {
  from { transform: translateY(8px); }
  to   { transform: translateY(0); }
}

.sil-nav body {
  animation: sil-page-in var(--sil-enter) var(--sil-ease) both;
}

.sil-nav main {
  animation: sil-main-in var(--sil-enter) var(--sil-ease) both;
}

/* ---------------------------------------------------------
   5 — WHERE IT DOES NOT RUN
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sil-nav body,
  .sil-nav main { animation: none; }
  .sil-veil { display: none; }
}