/*
 * BL Studios — final opening motion.
 * This file is intentionally scoped to the loader and hero. The approved
 * services, work, manifesto, studio, menu and contact systems are untouched.
 */

/* Opening: the official icon resolves from a dim signal into clean white. */
.load{
  display:block!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    radial-gradient(ellipse at 52% 48%,rgba(38,55,176,.22) 0,rgba(9,15,48,.12) 28%,transparent 58%),
    linear-gradient(145deg,#020309 0,#050817 48%,#020309 100%)!important;
}
.load:before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  background:
    linear-gradient(90deg,transparent 49.94%,rgba(152,169,255,.055) 50%,transparent 50.06%),
    linear-gradient(0deg,transparent 49.94%,rgba(152,169,255,.04) 50%,transparent 50.06%)!important;
  opacity:1!important;
  animation:none!important;
}
.load:after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:-35%!important;
  background:linear-gradient(102deg,transparent 40%,rgba(77,96,255,.08) 47%,rgba(224,231,255,.16) 50%,rgba(77,96,255,.07) 53%,transparent 60%)!important;
  filter:blur(24px)!important;
  opacity:.7!important;
  animation:loadSignalSweep 1.85s cubic-bezier(.55,0,.22,1) both!important;
}
.load__aura{
  position:absolute!important;
  z-index:0!important;
  inset:-20%!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(57,73,255,.25),transparent 20%),
    radial-gradient(ellipse at 64% 38%,rgba(24,34,124,.26),transparent 38%),
    transparent!important;
  filter:blur(62px)!important;
  transform:scale(.82)!important;
  opacity:.65!important;
  animation:loadAuraResolve 1.75s cubic-bezier(.16,1,.3,1) both!important;
}
.load-reference__canvas{
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.load__icon-stage{
  position:absolute!important;
  z-index:2!important;
  left:50%!important;
  top:50%!important;
  width:clamp(82px,7.2vw,126px)!important;
  height:clamp(164px,14.4vw,252px)!important;
  transform:translate(-50%,-50%) scale(.982);
  opacity:.12;
  filter:blur(.45px) drop-shadow(0 0 8px rgba(155,174,255,.2));
  animation:loadIconResolve 1.72s cubic-bezier(.16,1,.3,1) .08s both;
}
.load__icon-stage .load__icon{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  opacity:1!important;
  transform:none!important;
  clip-path:inset(0)!important;
  filter:brightness(0) invert(1)!important;
  animation:none!important;
}
.load__identity,.load__count{display:none!important}
.load__line{
  z-index:5!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent 0,#354cff 33%,#eef1ff 50%,#354cff 67%,transparent 100%)!important;
  box-shadow:0 0 18px rgba(75,96,255,.5)!important;
  animation:loadReferenceProgress 1.82s cubic-bezier(.65,0,.2,1) both!important;
}
@keyframes loadSignalSweep{
  from{transform:translateX(-42%);opacity:0}
  28%{opacity:.78}
  to{transform:translateX(42%);opacity:.12}
}
@keyframes loadAuraResolve{
  from{opacity:.12;transform:scale(.5)}
  64%{opacity:.86;transform:scale(1.04)}
  to{opacity:.5;transform:scale(.9)}
}
@keyframes loadIconResolve{
  0%{opacity:.08;filter:brightness(0) invert(1) blur(2.2px) drop-shadow(0 0 0 rgba(130,152,255,0));transform:translate(-50%,-50%) scale(.96)}
  58%{opacity:.2;filter:brightness(0) invert(1) blur(.8px) drop-shadow(0 0 28px rgba(91,112,255,.58))}
  78%{opacity:.88;filter:brightness(0) invert(1) blur(0) drop-shadow(0 0 32px rgba(135,153,255,.72));transform:translate(-50%,-50%) scale(1.015)}
  100%{opacity:1;filter:brightness(0) invert(1) blur(0) drop-shadow(0 0 12px rgba(154,170,255,.24));transform:translate(-50%,-50%) scale(1)}
}
@keyframes loadReferenceProgress{from{width:0;opacity:.2}70%{opacity:1}to{width:100%;opacity:.5}}

/* Hero: autonomous chroma surface, matching the reference's material motion. */
.hero--reel{
  background:#02040b!important;
}
.hero--reel:before{
  background:
    linear-gradient(180deg,rgba(2,4,11,.08) 0,rgba(2,4,11,.02) 44%,rgba(2,4,11,.64) 100%),
    linear-gradient(90deg,rgba(1,3,9,.36) 0,transparent 42%,rgba(2,3,10,.08) 72%,rgba(2,3,10,.28) 100%)!important;
}
.hero__field{
  background:#02040b;
  filter:saturate(1.06) contrast(1.035);
  transform:translateZ(0);
}
.hero__depth{
  overflow:hidden;
  opacity:1!important;
  background:
    radial-gradient(ellipse at 68% 43%,rgba(75,83,255,.13),transparent 24%),
    radial-gradient(ellipse at 43% 61%,rgba(31,61,180,.1),transparent 34%),
    linear-gradient(90deg,rgba(1,2,7,.22),transparent 46%,rgba(5,4,22,.11))!important;
}
.hero__depth:before,.hero__depth:after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  will-change:transform,opacity;
}
.hero__depth:before{
  width:52vw;
  height:34vw;
  right:1vw;
  top:12vh;
  background:radial-gradient(ellipse,rgba(77,84,255,.18),rgba(36,49,161,.06) 42%,transparent 70%);
  filter:blur(46px);
  animation:heroDepthA 9s ease-in-out infinite alternate;
}
.hero__depth:after{
  width:45vw;
  height:31vw;
  left:16vw;
  bottom:3vh;
  background:radial-gradient(ellipse,rgba(41,73,203,.14),transparent 69%);
  filter:blur(58px);
  animation:heroDepthB 11s ease-in-out -4s infinite alternate;
}
@keyframes heroDepthA{to{transform:translate3d(-9vw,8vh,0) scale(1.18);opacity:.68}}
@keyframes heroDepthB{to{transform:translate3d(11vw,-5vh,0) scale(.86);opacity:.52}}

@media(max-width:800px){
  .load__icon-stage{width:82px!important;height:164px!important}
  .hero__field{filter:saturate(1.04) contrast(1.025)}
  .hero__depth:before{width:92vw;height:70vw;right:-22vw;top:18vh}
  .hero__depth:after{width:86vw;height:64vw;left:-18vw;bottom:12vh}
}
@media(prefers-reduced-motion:reduce){
  .load:after,.load__aura,.load__icon-stage,.load__line,.hero__depth:before,.hero__depth:after{animation:none!important}
  .load__icon-stage{opacity:1!important}
  .hero--reel{background:radial-gradient(ellipse at 66% 42%,#182163 0,transparent 38%),#02040b!important}
}