/* Persistent SoundVault load-out intro frame.

   Join contract, taken from SV_Loadout_Intro/render.js:
   top rail y=4px; bottom rail y=viewport-18px; side rails x=4px;
   fixed 30×30px corner cuts; inset ticks 72–205px from each side.

   Slicer rule: corner caps and ticks remain fixed-size. Only the plain rails
   stretch. The component carries no content or vertical padding. */
.sv-intro-frame{
  --sv-frame-blue:rgba(16,104,255,.64);
  --sv-frame-cyan:rgba(38,214,227,.48);
  position:fixed;inset:0;z-index:80;
  pointer-events:none;overflow:hidden;
}

.sv-intro-frame__matte,
.sv-intro-frame__spirit,
.sv-intro-frame__symbol,
.sv-intro-frame__rail,
.sv-intro-frame__corner,
.sv-intro-frame__tick,
.sv-intro-frame__axis{
  position:absolute;display:block;background:var(--sv-frame-blue);
}

/* Solid viewport matte. These pieces cover everything outside the intro's
   chamfered path, so the WebGL/page is visible only inside the HUD frame. */
.sv-intro-frame__matte{z-index:0;background:#000}
.sv-intro-frame__matte--top{left:0;right:0;top:0;height:4px}
.sv-intro-frame__matte--bottom{left:0;right:0;bottom:0;height:18px}
.sv-intro-frame__matte--left{left:0;top:4px;bottom:18px;width:4px}
.sv-intro-frame__matte--right{right:0;top:4px;bottom:18px;width:4px}
.sv-intro-frame__matte--tl{
  left:4px;top:4px;width:30px;height:30px;
  clip-path:polygon(0 0,100% 0,0 100%);
}
.sv-intro-frame__matte--tr{
  right:4px;top:4px;width:30px;height:30px;
  clip-path:polygon(0 0,100% 0,100% 100%);
}
.sv-intro-frame__matte--bl{
  left:4px;bottom:18px;width:30px;height:30px;
  clip-path:polygon(0 0,0 100%,100% 100%);
}
.sv-intro-frame__matte--br{
  right:4px;bottom:18px;width:30px;height:30px;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}

/* Tiny fixed-size sigils live entirely inside the four black corner caps.
   The source artwork is masked, so each mark gets one consistent blue. */
.sv-intro-frame__spirit,
.sv-intro-frame__symbol{
  z-index:2;background:rgba(28,132,255,.94);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  filter:drop-shadow(0 0 2px rgba(24,126,255,.38));
}
.sv-intro-frame__spirit{
  width:16.8px;height:16.8px;filter:none;opacity:.94;
  transform-origin:center;will-change:opacity,transform;
  animation:svCornerSpiritCycle 12s linear infinite;
}
/* Keep the four northern spirit marks in the live frame after the intro.
   Their existing phase offsets let every corner cycle through the full set
   quietly, without competing with the electric background or page content. */
.sv-intro-frame > .sv-intro-frame__spirit{display:block}
.sv-intro-frame__spirit--bird{
  left:4px;top:4px;
  animation-delay:0s;
  clip-path:polygon(0 0,100% 0,100% 78.6%,78.6% 100%,0 100%);
  -webkit-mask-image:url("../tex/boot-spirit-bird.png");
  mask-image:url("../tex/boot-spirit-bird.png");
}
.sv-intro-frame__spirit--tree{
  right:2px;top:4px;
  animation-delay:-3.6s;
  clip-path:polygon(0 0,100% 0,100% 100%,21.4% 100%,0 78.6%);
  -webkit-mask-image:url("../tex/boot-spirit-tree.png");
  mask-image:url("../tex/boot-spirit-tree.png");
}
.sv-intro-frame__spirit--reindeer{
  left:4px;bottom:12px;
  animation-delay:-6.6s;
  clip-path:polygon(0 0,78.6% 0,100% 21.4%,100% 100%,0 100%);
  -webkit-mask-image:url("../tex/boot-spirit-reindeer.png");
  mask-image:url("../tex/boot-spirit-reindeer.png");
}
.sv-intro-frame__spirit--shield{
  right:4px;bottom:12px;
  animation-delay:-9.6s;
  clip-path:polygon(21.4% 0,100% 0,100% 100%,0 100%,0 21.4%);
  -webkit-mask-image:url("../tex/boot-spirit-shield.png");
  mask-image:url("../tex/boot-spirit-shield.png");
}

/* Each corner quietly visits the full four-mark set. The phase offsets keep
   four different symbols on screen while the one-pixel dip hides each swap. */
@keyframes svCornerSpiritCycle{
  0%{
    opacity:.94;transform:translate3d(0,0,0) scale(1);
    -webkit-mask-image:url("../tex/boot-spirit-bird.png");mask-image:url("../tex/boot-spirit-bird.png");
  }
  21%{
    opacity:.94;transform:translate3d(0,0,0) scale(1);
    -webkit-mask-image:url("../tex/boot-spirit-bird.png");mask-image:url("../tex/boot-spirit-bird.png");
  }
  24%{
    opacity:.08;transform:translate3d(0,1px,0) scale(.96);
    -webkit-mask-image:url("../tex/boot-spirit-bird.png");mask-image:url("../tex/boot-spirit-bird.png");
  }
  25%{
    opacity:.08;transform:translate3d(0,1px,0) scale(.96);
    -webkit-mask-image:url("../tex/boot-spirit-tree.png");mask-image:url("../tex/boot-spirit-tree.png");
  }
  28%,46%{
    opacity:.94;transform:translate3d(0,0,0) scale(1);
    -webkit-mask-image:url("../tex/boot-spirit-tree.png");mask-image:url("../tex/boot-spirit-tree.png");
  }
  49%{
    opacity:.08;transform:translate3d(0,1px,0) scale(.96);
    -webkit-mask-image:url("../tex/boot-spirit-tree.png");mask-image:url("../tex/boot-spirit-tree.png");
  }
  50%{
    opacity:.08;transform:translate3d(0,1px,0) scale(.96);
    -webkit-mask-image:url("../tex/boot-spirit-reindeer.png");mask-image:url("../tex/boot-spirit-reindeer.png");
  }
  53%,71%{
    opacity:.94;transform:translate3d(0,0,0) scale(1);
    -webkit-mask-image:url("../tex/boot-spirit-reindeer.png");mask-image:url("../tex/boot-spirit-reindeer.png");
  }
  74%{
    opacity:.08;transform:translate3d(0,1px,0) scale(.96);
    -webkit-mask-image:url("../tex/boot-spirit-reindeer.png");mask-image:url("../tex/boot-spirit-reindeer.png");
  }
  75%{
    opacity:.08;transform:translate3d(0,1px,0) scale(.96);
    -webkit-mask-image:url("../tex/boot-spirit-shield.png");mask-image:url("../tex/boot-spirit-shield.png");
  }
  78%,96%{
    opacity:.94;transform:translate3d(0,0,0) scale(1);
    -webkit-mask-image:url("../tex/boot-spirit-shield.png");mask-image:url("../tex/boot-spirit-shield.png");
  }
  99%{
    opacity:.08;transform:translate3d(0,1px,0) scale(.96);
    -webkit-mask-image:url("../tex/boot-spirit-shield.png");mask-image:url("../tex/boot-spirit-shield.png");
  }
  100%{
    opacity:.08;transform:translate3d(0,1px,0) scale(.96);
    -webkit-mask-image:url("../tex/boot-spirit-bird.png");mask-image:url("../tex/boot-spirit-bird.png");
  }
}

@media (prefers-reduced-motion:reduce){
  .sv-intro-frame__spirit{animation:none}
}
.sv-intro-frame__symbol{
  left:50%;bottom:3px;width:9px;height:12px;
  transform:translateX(-50%);background:rgba(255,255,255,.94);
  filter:drop-shadow(0 0 2px rgba(255,255,255,.28));
  -webkit-mask-image:url("../logo/symbol.svg");
  mask-image:url("../logo/symbol.svg");
}

.sv-intro-frame__rail,
.sv-intro-frame__corner,
.sv-intro-frame__tick,
.sv-intro-frame__axis{z-index:1}
.sv-intro-frame__rail,
.sv-intro-frame__corner{filter:drop-shadow(0 0 5px rgba(16,104,255,.18))}

.sv-intro-frame__rail--top{left:34px;right:34px;top:4px;height:1px}
.sv-intro-frame__rail--bottom{left:34px;right:34px;bottom:18px;height:1px}
.sv-intro-frame__rail--left{left:4px;top:34px;bottom:48px;width:1px}
.sv-intro-frame__rail--right{right:4px;top:34px;bottom:48px;width:1px}

/* Hypotenuse of the intro's 30×30 corner cut. */
.sv-intro-frame__corner{width:42.43px;height:1px;transform-origin:left center}
.sv-intro-frame__corner--tl{left:4px;top:34px;transform:rotate(-45deg)}
.sv-intro-frame__corner--tr{right:4px;top:34px;transform:rotate(45deg);transform-origin:right center}
.sv-intro-frame__corner--bl{left:4px;bottom:48px;transform:rotate(45deg)}
.sv-intro-frame__corner--br{right:4px;bottom:48px;transform:rotate(-45deg);transform-origin:right center}

.sv-intro-frame__tick{
  display:none;
}
.sv-intro-frame__tick--tl{left:72px;top:18px}
.sv-intro-frame__tick--tr{right:72px;top:18px;transform:scaleX(-1)}
.sv-intro-frame__tick--bl{left:72px;bottom:32px;opacity:.82}
.sv-intro-frame__tick--br{right:72px;bottom:32px;opacity:.82;transform:scaleX(-1)}

.sv-intro-frame__axis{
  left:50%;bottom:18px;width:1px;height:34px;
  background:linear-gradient(180deg,transparent,rgba(16,104,255,.72));
  opacity:.72;
}