/* —— First-load Immerso mark intro (~4.5s dual copper square-load) —— */
#immerso-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none; /* shown via html.intro-pending / .is-on */
  align-items: center;
  justify-content: center;
  background: #F5F3EF; /* sandstone ground — no copper */
  opacity: 1; /* overlay never fades in from transparent — kills start snap */
  pointer-events: auto;
}
html.intro-pending #immerso-intro,
#immerso-intro.is-on,
#immerso-intro.is-leaving {
  display: flex;
}
html.intro-pending #immerso-intro {
  transition: none;
}
#immerso-intro.is-on {
  pointer-events: auto;
}
#immerso-intro.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
html.intro-done #immerso-intro {
  display: none !important;
}
/* Mid-size centered mark; aspect matches immerso-logo-intro.svg */
#immerso-intro .intro-mark-wrap {
  position: relative;
  width: min(56vw, 720px);
  aspect-ratio: 410.55 / 145.52;
  opacity: 0;
  transform: none;
  transition: opacity 0.4s ease;
}
#immerso-intro.is-on .intro-mark-wrap {
  opacity: 1;
  transform: none;
}
#immerso-intro.is-leaving .intro-mark-wrap {
  opacity: 0;
  transform: none;
  transition: opacity 0.4s ease;
}
#immerso-intro .intro-mark {
  width: 100%;
  height: auto;
  display: block;
  /* navy frame + wordmark + horizon blue line stay in the SVG */
}
/* Dual copper square-loaders on navy frame: TL + BR, grow from dots, travel in sync */
#immerso-intro .intro-frame-loader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#immerso-intro.is-on .intro-frame-loader {
  opacity: 1;
}
#immerso-intro.is-leaving .intro-frame-loader {
  opacity: 0;
  transition: opacity 0.4s ease;
}
#immerso-intro .intro-frame-path {
  fill: none;
  stroke: #BF4E30;
  stroke-width: 4.5; /* between 5.5 and navy frame */
  stroke-linecap: round; /* short dash reads as a circle */
  stroke-linejoin: round;
  /* Perimeter ≈ 740.9; start tiny (~circle), grow while traveling */
  stroke-dasharray: 6 734.9;
  stroke-dashoffset: 0;
}
/* A starts top-left (path origin). B starts opposite corner (bottom-right ≈ 370.45 along path). */
#immerso-intro .intro-frame-path-a {
  stroke-dashoffset: 0;
}
#immerso-intro .intro-frame-path-b {
  stroke-dashoffset: -370.45;
}
#immerso-intro.is-on .intro-frame-path-a {
  animation: immerso-intro-frame-a 3.6s 0.3s ease-in-out forwards;
}
#immerso-intro.is-on .intro-frame-path-b {
  animation: immerso-intro-frame-b 3.6s 0.3s ease-in-out forwards;
}
#immerso-intro.is-leaving .intro-frame-path {
  animation: none;
}
/* Synchronized: grow dash length + travel half-perimeter (stay opposite) */
@keyframes immerso-intro-frame-a {
  0%   { stroke-dasharray: 6 734.9; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 210 530.9; stroke-dashoffset: -370.45; }
}
@keyframes immerso-intro-frame-b {
  0%   { stroke-dasharray: 6 734.9; stroke-dashoffset: -370.45; }
  100% { stroke-dasharray: 210 530.9; stroke-dashoffset: -740.9; }
}
/* Freeze mid-intro for screenshots (?shot=intro → html.shot-intro) */
html.shot-intro #immerso-intro,
html.shot-intro #immerso-intro.is-on,
html.shot-intro #immerso-intro.is-leaving {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}
html.shot-intro #immerso-intro .intro-mark-wrap {
  opacity: 1 !important;
  transform: scale(1) !important;
  transition: none !important;
}
html.shot-intro #immerso-intro .intro-frame-loader {
  opacity: 1 !important;
  transition: none !important;
}
html.shot-intro #immerso-intro .intro-frame-path {
  animation: none !important;
  stroke-dasharray: 140 600.9 !important;
}
html.shot-intro #immerso-intro .intro-frame-path-a {
  stroke-dashoffset: -120 !important;
}
html.shot-intro #immerso-intro .intro-frame-path-b {
  stroke-dashoffset: -490.45 !important;
}
@media (prefers-reduced-motion: reduce) {
  #immerso-intro,
  #immerso-intro .intro-mark-wrap,
  #immerso-intro .intro-frame-loader {
    transition: none !important;
  }
  #immerso-intro .intro-frame-path {
    animation: none !important;
    stroke-dasharray: none;
    opacity: 0;
  }
}