#hero-cinematic {
 position:absolute; inset:0; z-index:38; overflow:hidden; pointer-events:none; contain:layout paint;
}
#hero-cinematic[hidden] { display:none; }
.cinematic-frame {
 position:absolute; overflow:hidden; min-width:0; min-height:0; contain:layout paint;
 --cast-edge: #08182d;
}
.cinematic-backdrop {
 position:absolute; inset:0; opacity:var(--cast-backdrop,0);
 clip-path:polygon(0 0, calc((var(--cast-seam) + .15)*100%) 0, calc((var(--cast-seam) - .11)*100%) 100%, 0 100%);
 background:
   linear-gradient(110deg, transparent 40%, color-mix(in srgb,var(--hero-color) 32%,transparent) 76%, transparent 88%),
   repeating-linear-gradient(110deg, transparent 0 29px, #fff1 30px 31px, transparent 32px 45px),
   linear-gradient(115deg,var(--cast-edge),#11243e 62%,#1a3250);
}
#hero-cinematic:is([data-hero=tidewarden],[data-hero=navigator],[data-full-body=true]) .cinematic-backdrop { display:none; }
#hero-cinematic[data-side=right] .cinematic-backdrop {
 clip-path:polygon(calc((var(--cast-seam) + .11)*100%) 0,100% 0,100% 100%,calc((var(--cast-seam) - .15)*100%) 100%);
 background:
   linear-gradient(110deg, transparent 13%, color-mix(in srgb,var(--hero-color) 32%,transparent) 29%, transparent 48%),
   repeating-linear-gradient(110deg, transparent 0 29px, #fff1 30px 31px, transparent 32px 45px),
   linear-gradient(285deg,var(--cast-edge),#11243e 62%,#1a3250);
}
.cinematic-hero,.cinematic-pose {
 position:absolute; z-index:2; max-width:none; max-height:none; margin:0;
 object-fit:contain; object-position:center; will-change:transform,opacity;
 filter:drop-shadow(0 0 3px var(--hero-color)) drop-shadow(5px 7px 10px #04101dda);
}
.cinematic-pose { display:none; background-repeat:no-repeat; }
.cinematic-frame[data-rigged=true] .cinematic-pose { display:block; }
.cinematic-frame[data-rigged=true] .cinematic-pose[hidden] { display:none; }
.cinematic-frame[data-rigged=true] .cinematic-hero { visibility:hidden; }
.cinematic-title {
 position:absolute; z-index:4; box-sizing:border-box; padding:5px 11px 7px;
 text-align:left; overflow:hidden;
 background:linear-gradient(90deg,#0a1932f2 8%,#142641df 70%,#14264180);
 clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
 border-top:2px solid var(--hero-color); text-shadow:0 2px 6px #081325;
}
#hero-cinematic[data-side=right] .cinematic-title {
 text-align:right; background:linear-gradient(270deg,#0a1932f2 8%,#142641df 70%,#14264180);
 clip-path:polygon(0 0,100% 0,100% 100%,10px 100%);
}
.cinematic-title small {
 display:block; color:var(--hero-color); font-size:10px; font-weight:800; letter-spacing:.1em;
}
.cinematic-title strong {
 display:block; font-family:Georgia,serif; font-size:var(--cast-title-size,24px);
 font-style:italic; line-height:1.05; color:#fff8e9; overflow-wrap:anywhere; margin:2px 0 0;
}
#hero-cinematic[data-paid=true] .cinematic-title { border-top-color:#ffd692; }
.cinematic-action { display:none; position:absolute; z-index:1; overflow:hidden; pointer-events:none; }
#hero-cinematic[data-signature]:not([data-signature=""]):not(.cinematic-calm) .cinematic-action { display:block; }
.cinematic-action path {
 fill:none; stroke:var(--hero-color); stroke-linecap:round; stroke-linejoin:round;
 stroke-dasharray:100; filter:drop-shadow(0 0 6px var(--hero-color));
}
.cinematic-action .action-charge {
 stroke-width:4; stroke-dashoffset:var(--draw-charge,100); opacity:var(--charge-visibility,0);
}
.cinematic-aura,.cinematic-flight { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cinematic-aura { z-index:0; }
.cinematic-flight { z-index:3; }
.cinematic-weather { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#hero-cinematic:is([data-hero=navigator],[data-full-body=true]) .cinematic-flight { z-index:1; }
#hero-cinematic[data-hero=frostwarden] .cinematic-flight { z-index:3; }
#hero-cinematic:is([data-hero=navigator],[data-full-body=true]) .cinematic-title {
 padding:2px 8px 3px; background:#0a1932ce; border-top-width:1px;
}
#hero-cinematic:is([data-hero=navigator],[data-full-body=true]) .cinematic-title small { font-size:9px; }
#hero-cinematic:is([data-hero=navigator],[data-full-body=true]) .cinematic-title strong { font-size:14px; }
.cinematic-calm .cinematic-hero { filter:drop-shadow(0 0 5px var(--hero-color)); }