/* HELL-MU ETAP 20 — seamlessly feathered approved header, true crest effects.
 * Only the masthead artwork/effects are affected. CMS URLs, other modules and
 * the site's shared ultrawide background remain unchanged.
 */
.hell-theme .masthead,
body[data-hell-mode="preview"] .masthead {
  position:relative!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
  isolation:isolate!important;
  height:350px!important;
  min-height:350px!important;
}
/* Original image with feathered alpha. A little smaller inside a 350px frame.
 * No sharp seam where the masthead meets the wide page background. */
.hell-theme .masthead::before,
body[data-hell-mode="preview"] .masthead::before {
  content:""!important;display:block!important;position:absolute!important;
  inset:0!important;width:100%!important;height:100%!important;
  background-image:url('../images/hell-header-v20-feathered.webp')!important;
  background-position:center center!important;
  background-size:auto 93%!important;
  background-repeat:no-repeat!important;
  opacity:1!important;filter:none!important;transform:none!important;
  mask-image:none!important;-webkit-mask-image:none!important;
  animation:none!important;pointer-events:none!important;z-index:0!important;
}
/* Supersede the old v19 pseudo overlay: its !important opacity prevented
 * animation keyframes from changing the glow at all. A dedicated HTML layer
 * owns the animation so the pulse actually runs in browsers. */
.hell-theme .masthead::after,
body[data-hell-mode="preview"] .masthead::after {
  content:none!important;display:none!important;animation:none!important;
}
/* A separate alpha cut of the APPROVED original crest shines in sync with
 * the static logo, instead of animating a barely visible radial gradient. */
.hell-theme .masthead .hell-masthead-glow,
body[data-hell-mode="preview"] .masthead .hell-masthead-glow {
  display:block;position:absolute;inset:0;
  background:url('../images/hell-logo-v20-glow.webp') center center/auto 93% no-repeat;
  mix-blend-mode:screen;
  opacity:.10;
  pointer-events:none;z-index:1;
  animation:hell20-crest-pulse 4.8s ease-in-out infinite;
}
@keyframes hell20-crest-pulse {
  0%,100%{opacity:.10;filter:brightness(1.1) saturate(1.25)}
  38%{opacity:.38;filter:brightness(1.45) saturate(1.8)}
  54%{opacity:.60;filter:brightness(1.8) saturate(2)}
  68%{opacity:.31;filter:brightness(1.3) saturate(1.6)}
}
/* Animated crown ember and luminous pinpricks, kept behind functional links. */
.hell-theme .masthead .hell-masthead-fx,
body[data-hell-mode="preview"] .masthead .hell-masthead-fx {
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 8% 18% at 50% 33%,rgba(255,47,8,.24),transparent 80%),
    radial-gradient(2px 2px at 23% 68%,#ffa24a 36%,transparent 80%),
    radial-gradient(2px 2px at 35% 83%,#f45123 40%,transparent 80%),
    radial-gradient(2px 2px at 63% 25%,#fda85b 40%,transparent 80%),
    radial-gradient(2px 2px at 78% 60%,#f54a23 40%,transparent 80%),
    radial-gradient(3px 3px at 53% 80%,#f8872b 40%,transparent 85%);
  background-repeat:no-repeat;
  opacity:.34;
  animation:hell20-sparks 7.4s ease-in-out infinite alternate;
}
@keyframes hell20-sparks {
  0%{opacity:.14;transform:translateY(9px)}
  40%{opacity:.48}
  100%{opacity:.72;transform:translateY(-14px)}
}
.hell-theme .masthead .utility-bar,
body[data-hell-mode="preview"] .masthead .utility-bar {
  z-index:15!important;
}
@media(max-width:980px){
  .hell-theme .masthead,body[data-hell-mode="preview"] .masthead{
    height:270px!important;min-height:270px!important;
  }
  .hell-theme .masthead::before,body[data-hell-mode="preview"] .masthead::before{
    background-size:auto 100%!important;
  }
  .hell-theme .masthead .hell-masthead-glow,
  body[data-hell-mode="preview"] .masthead .hell-masthead-glow{
    background-size:auto 100%;
  }
}
@media(max-width:760px){
  .hell-theme .masthead,body[data-hell-mode="preview"] .masthead{
    height:220px!important;min-height:220px!important;
  }
}
@media(max-width:440px){
  .hell-theme .masthead,body[data-hell-mode="preview"] .masthead{
    height:175px!important;min-height:175px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .hell-theme .masthead .hell-masthead-glow,
  body[data-hell-mode="preview"] .masthead .hell-masthead-glow,
  .hell-theme .masthead .hell-masthead-fx,
  body[data-hell-mode="preview"] .masthead .hell-masthead-fx {
    animation:none!important;opacity:.25!important;transform:none!important;
  }
}