/* The footer dragon lands on an engraved crag instead of flying in as a cut-out.
   The scene sits behind the footer copy; its edges fade into the footer's own dark. */

.b-footer.nb-crag{overflow:hidden}
.b-footer.nb-crag .b-footer-landing,.b-footer.nb-crag>.nb-range{display:none!important}

/* Copy always sits above the scene */
.b-footer.nb-crag>:is(.b-footer-closing,.b-footer-bottom,nav,button){position:relative;z-index:2}

/* Inner pages share the footer in a cream finish; the crag needs the homepage's night */
.b-footer.nb-crag.b-insights-footer{background:#181f1a!important;color:#f3eddf}
.b-footer.nb-crag.b-insights-footer :is(.case-logo,.b-socials,.b-socials a){color:#f3eddf}
.b-footer.nb-crag.b-insights-footer .b-footer-bottom{border-top-color:#f3eddf50}
.b-footer.nb-crag .b-insights-dragon-landing{visibility:hidden}

/* Footer rules style every child div as a flow block, so take the scene back out of the flow */
.b-legendary .b-footer.nb-crag>.nb-crag-scene{position:absolute;display:block;margin:0;padding:0;min-height:0}

/* A soft top edge while the dragon flies in, so its wings fade into the night; a crisp one once it perches */
@property --crag-top{syntax:'<percentage>';inherits:false;initial-value:4%}
.nb-crag-scene{position:absolute;z-index:1;pointer-events:none;--crag-top:4%;transition:--crag-top 1.2s ease;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 var(--crag-top),#000 84%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 94%,transparent),linear-gradient(180deg,transparent 0,#000 var(--crag-top),#000 84%,transparent);
 mask-composite:intersect}
.nb-crag-scene.nb-flying{--crag-top:16%}
.nb-crag-scene>*{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;display:block}
.nb-crag-scene video{opacity:0;transition:opacity .3s ease}
.nb-crag-scene video.nb-on{opacity:1}
.nb-crag-scene video+video{transition-duration:.8s}
.nb-crag-scene .nb-crag-perch{opacity:0}
.nb-crag-scene.nb-still .nb-crag-perch{opacity:1}
.nb-crag-scene.nb-still video{display:none}