/* Silent Alarm takes the lead; earlier releases retain their original styling. */
.silent-hero { --midnight-cyan: #ffc276; --midnight-magenta: #ff702e; background: #090604; }
.silent-hero .hero-image { background-image: url('assets/silent-alarm-hero.jpg'); background-position: 55% 52%; filter: brightness(.9); }
.silent-hero .hero-rain, .silent-hero .hero-glow, .silent-hero .call-source { display: none; }
.silent-hero .hero-title, .silent-hero .hero-title span:last-child { color: #ffb65c; text-shadow: 0 0 25px #e9551833; animation: none; }
.silent-hero .hero-shade { background: linear-gradient(90deg, #080503bb, #08050333 65%), linear-gradient(0deg, #090604, transparent 55%); }
.music-release--silent, .silent-credits { --signal: #ff9b51; --line: #ff9b5133; background: radial-gradient(ellipse at 18% 30%, #69280f44, transparent 55%), #090705; }
.music-release--silent .section-label, .music-release--silent .catalogue-prompt, .music-release--silent .catalogue-prompt span, .music-release--silent .platform-link .platform-kicker, .music-release--silent .platform-link::after, .silent-credits .section-label, .silent-credits .credit-list li::before { color: #ffb16c; }
.music-release--silent .platform-link { border-color: #ff9b5133; background: #ff9b5108; }
.music-release--silent .platform-link:hover, .music-release--silent .platform-link:focus-visible { border-color: #ff9b5199; background: #ff9b5118; box-shadow: 0 10px 32px #0005; }

@media (max-width: 700px) { .silent-hero .hero-image { background-position: 58% center; } .silent-hero .hero-title { font-size: clamp(38px, 10vw, 68px); letter-spacing: .1em; } }

/* Reuse the existing logo silhouette with Silent Alarm's warm palette. */
@supports ((mask-image: url("assets/drekmor-logo-midnight.png")) or (-webkit-mask-image: url("assets/drekmor-logo-midnight.png"))) {
  .site-header .wordmark {
    background: linear-gradient(180deg, #ff541f 0%, #ff8a20 52%, #ffd34e 100%);
    -webkit-mask: url("assets/drekmor-logo-midnight.png") center / contain no-repeat;
    mask: url("assets/drekmor-logo-midnight.png") center / contain no-repeat;
  }
  .site-header .wordmark img { opacity: 0; }
}

/* 18-second cycle: calm, interference, one bloom, blackout, recovery. */
.silent-hero .hero-image { animation: alarm-picture 18s linear infinite; }
.silent-hero .alarm-static, .silent-hero .alarm-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.silent-hero .alarm-static {
  z-index: -3;
  background: repeating-linear-gradient(0deg, transparent 0 5px, #ffddaa26 6px, transparent 7px 12px);
  animation: alarm-interference 18s linear infinite;
}
.silent-hero .alarm-flash {
  z-index: -2; background: #fff8ed;
  animation: alarm-bloom 18s linear infinite;
}
.silent-hero .alarm-toggle {
  position: absolute; z-index: 3; left: max(4vw, calc((100vw - 1280px) / 2)); bottom: 28px;
  padding: 10px 14px; border: 1px solid #ffc27655; border-radius: 3px;
  background: #090604b3; color: #ffe2c2; font: 11px var(--mono); cursor: pointer;
}
.silent-hero .alarm-toggle:focus-visible { outline: 2px solid #ffc276; outline-offset: 4px; }
.silent-hero.effect-paused .hero-image,
.silent-hero.effect-paused .alarm-static,
.silent-hero.effect-paused .alarm-flash { animation-play-state: paused; }
@keyframes alarm-picture {
  0%, 39% { opacity: 1; transform: scale(1.06); }
  41% { transform: scale(1.06) translateX(-2px); }
  43% { transform: scale(1.06) translateX(3px); }
  45% { transform: scale(1.06) translate(-4px, 1px) skewX(.25deg); }
  47% { transform: scale(1.06) translate(5px, -2px) skewX(-.3deg); }
  49% { transform: scale(1.06) translate(-6px, 2px); }
  51% { opacity: 1; transform: scale(1.07) translate(3px, -1px); }
  54% { opacity: 0; transform: scale(1.06); }
  72% { opacity: 0; transform: scale(1.06); }
  91%, 100% { opacity: 1; transform: scale(1.06); }
}
@keyframes alarm-interference {
  0%, 38% { opacity: 0; transform: translateY(0); }
  43% { opacity: .25; transform: translateY(4px); }
  49% { opacity: .6; transform: translateY(-6px); }
  52% { opacity: .4; transform: translateY(3px); }
  55%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes alarm-bloom {
  0%, 49% { opacity: 0; }
  54% { opacity: .96; }
  60%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .silent-hero .hero-image { animation: none; opacity: 1; translate: none; transform: scale(1.06); }
  .silent-hero .alarm-static, .silent-hero .alarm-flash, .silent-hero .alarm-toggle { display: none; }
}

/* Stronger analogue signal failure, followed by one white exposure bloom. */
.silent-hero .alarm-static {
  z-index: -3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h240v180H0z'/%3E%3C/svg%3E");
  background-size: 240px 180px;
  filter: contrast(3.5);
  animation: alarm-interference 18s linear infinite, alarm-noise-jump .09s steps(1) infinite;
}
.silent-hero .alarm-static::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 13px, #000b 14px 18px, #ffeddd66 19px 20px, transparent 21px 43px);
  animation: alarm-tracking .16s steps(1) infinite;
}
.silent-hero .alarm-flash { z-index: 0; background: #fff; }
@keyframes alarm-noise-jump {
  0% { background-position: 0 0; }
  25% { background-position: 87px -43px; }
  50% { background-position: -63px 91px; }
  75% { background-position: 139px 27px; }
}
@keyframes alarm-tracking {
  0% { transform: translateY(-12px); }
  33% { transform: translateY(24px); }
  66% { transform: translateY(-37px); }
}
@keyframes alarm-picture {
  0%, 43% { opacity: 1; transform: scale(1.06); }
  43.5% { transform: scale(1.06) translateX(-12px) skewX(1deg); }
  44% { transform: scale(1.06) translate(10px, -4px); }
  44.5% { transform: scale(1.06) translate(-18px, 3px) skewX(-1.5deg); }
  45% { transform: scale(1.06) translateX(16px); }
  45.5% { transform: scale(1.06) translateX(-7px); }
  46% { transform: scale(1.06) translate(20px, -5px) skewX(2deg); }
  46.5% { transform: scale(1.06) translateX(-16px); }
  47% { transform: scale(1.06) translate(8px, 4px); }
  47.5% { transform: scale(1.06) translateX(-22px) skewX(-2deg); }
  48% { opacity: 1; transform: scale(1.08) translateX(15px); }
  50%, 72% { opacity: 0; transform: scale(1.06); }
  91%, 100% { opacity: 1; transform: scale(1.06); }
}
@keyframes alarm-interference {
  0%, 42% { opacity: 0; }
  43% { opacity: .6; }
  46%, 49% { opacity: .85; }
  50%, 100% { opacity: 0; }
}
@keyframes alarm-bloom {
  0%, 48% { opacity: 0; }
  50%, 53% { opacity: 1; }
  59%, 100% { opacity: 0; }
}
.silent-hero.effect-paused .alarm-static::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .silent-hero .hero-image, .silent-hero .alarm-static, .silent-hero .alarm-static::after, .silent-hero .alarm-flash { animation: none; }
}

/* Brief signal break (~0.45s), then a fast white-out (~0.13s). */
@keyframes alarm-picture {
  0%, 43% { opacity: 1; transform: scale(1.06); }
  43.4% { transform: scale(1.06) translateX(-14px) skewX(1deg); }
  43.8% { transform: scale(1.06) translate(16px, -4px); }
  44.2% { transform: scale(1.06) translateX(-19px) skewX(-1.5deg); }
  44.6% { transform: scale(1.06) translate(12px, 3px); }
  45% { transform: scale(1.06) translateX(-16px); }
  45.5% { opacity: 1; transform: scale(1.07) translateX(10px); }
  46.2%, 66% { opacity: 0; transform: scale(1.06); }
  85%, 100% { opacity: 1; transform: scale(1.06); }
}
@keyframes alarm-interference {
  0%, 43% { opacity: 0; }
  43.2% { opacity: .8; }
  45.5% { opacity: .9; }
  46.2%, 100% { opacity: 0; }
}
@keyframes alarm-bloom {
  0%, 45.5% { opacity: 0; }
  46.2%, 49% { opacity: 1; }
  53%, 100% { opacity: 0; }
}

/* Cropped Canvas video replaces the simulated interference. */
.silent-hero .hero-image { animation: none; }
.silent-hero .alarm-static, .silent-hero .alarm-flash { display: none; }
.silent-hero .alarm-video {
  position: absolute; inset: 0; z-index: -4; width: 100%; height: 100%;
  object-fit: cover; object-position: center; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .silent-hero .alarm-video { display: none; } }

/* More pronounced warm pulse on the lettering, keeping its panel steady. */
.silent-hero .released-message { animation: none; color: #ff982e; }
.silent-hero .released-message > span {
  display: inline-block;
  animation: alarm-out-now 3.4s ease-in-out infinite;
}
.silent-hero .released-message::before {
  background: radial-gradient(ellipse, #ff8c2833, transparent 68%);
  animation: alarm-out-halo 3.4s ease-in-out infinite;
}
@keyframes alarm-out-now {
  0%, 100% { transform: scale(1); text-shadow: 0 0 10px #ff710a66; color: #ff982e; }
  50% { transform: scale(1.025); text-shadow: 0 0 6px #ff921f88, 0 0 18px #ff710a77; color: #ffa43d; }
}
@keyframes alarm-out-halo {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50% { opacity: .65; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .silent-hero .released-message > span,
  .silent-hero .released-message::before,
  .silent-hero .released-message::after { animation: none; }
}

/* Warm neon lettering for the Silent Alarm hero title. */
.silent-hero .hero-title,
.silent-hero .hero-title span:last-child {
  color: #ff982e;
  text-shadow: 0 0 2px #ffbb62, 0 0 7px #ff921f, 0 0 17px #ff710a,
    0 0 36px #ff570ab3, 0 0 64px #ff420866;
}
.silent-hero .hero-title { animation: silent-neon-sign 8s linear infinite; }
@keyframes silent-neon-sign {
  0%, 40%, 43%, 76%, 79%, 100% { opacity: 1; }
  41% { opacity: .78; }
  42% { opacity: .94; }
  77% { opacity: .85; }
  78% { opacity: .96; }
}
@media (prefers-reduced-motion: reduce) {
  .silent-hero .hero-title { animation: none; }
}

/* Full-width section: viewport-based padding must not sit inside a capped width. */
.credits.section {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4vw, 64px);
}
.credits .credits-heading, .credits .credit-list { min-width: 0; }
.credits .credit-list li {
  grid-template-columns: 28px minmax(110px, .75fr) minmax(0, 1.25fr);
  gap: 16px;
}
.credits .credit-list strong { grid-column: auto; overflow-wrap: normal; word-break: normal; line-height: 1.2; }
@media (max-width: 900px) {
  .credits.section { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .credits .credit-list li { grid-template-columns: 28px minmax(0, 1fr); gap: 10px 16px; }
  .credits .credit-list strong { grid-column: 2; }
}

.release-details { margin-top: 28px; font-size: 15px; line-height: 1.5; }
.release-details a { color: inherit; text-decoration: underline; text-underline-offset: 5px; }

/* Keep the mobile navigation opaque, independent of the video underneath. */
@media (max-width: 760px) {
  .site-header { mix-blend-mode: normal; }
  #site-nav { background: rgba(16, 11, 8, .45); color: #ffe5c5; overflow-y: auto; visibility: hidden; }
  #site-nav.open { visibility: visible; }
  #site-nav a { color: #ffe5c5; }
  #site-nav a:hover, #site-nav a:focus-visible { color: #ff982e; }

  .menu-toggle { position: relative; }
}
#signal, #midnight-listen, #beacon-listen, #world { scroll-margin-top: 95px; }
@media (max-width: 760px) {
  #site-nav a { font: 600 clamp(22px, 5.7vw, 30px)/1.3 var(--display); letter-spacing: .07em; padding-block: 8px; }
  #site-nav .nav-press { padding: 8px 0; font: 600 clamp(22px, 5.7vw, 30px)/1.3 var(--display); letter-spacing: .07em; }
}

#site-nav .nav-press { border: 0; background: none; }
@media (max-width: 760px) { #site-nav a { text-shadow: 0 2px 8px #000; } }
.video-fallback { text-align: center; padding: 24px 20px; font-size: 15px; }
.video-fallback a { color: #68e7d6; text-decoration: underline; text-underline-offset: 4px; }