/* Compact release card: original artwork, localized copy and cover-colored light. */
.hero-release {
  --hr-color-one: #ff2acb;
  --hr-color-two: #00d9ff;
  --hr-color-three: #c6ff24;
  --hr-seconds: 5s;
  --hr-strength: .55;
  --hr-cover-size: 84px;
  --hr-title-size: 26px;
  --hr-title-mobile-size: 22px;
  --hr-radius: 16px;
  --hr-padding: 16px;
  --hr-cover-render: var(--hr-cover-size);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--hr-cover-render) minmax(0, 1fr) 18px;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 24px 0 0;
  padding: var(--hr-padding);
  overflow: hidden;
  border: 1px solid #53677a;
  border-color: color-mix(in srgb, var(--hr-color-two) 52%, #53677a);
  border-radius: var(--hr-radius);
  background: linear-gradient(120deg, #111725f5, #11121cf5);
  box-shadow: 0 0 24px color-mix(in srgb, var(--hr-color-one) 10%, transparent), 0 0 18px color-mix(in srgb, var(--hr-color-two) 9%, transparent);
  color: #fff;
  text-align: left;
  text-decoration: none;
  line-height: 1.4;
  transition: border-color .2s ease, background-color .2s ease;
}
.hero-release[data-has-cover=false] { grid-template-columns: minmax(0, 1fr) 18px; }
.hero-release:hover { border-color: var(--hr-color-two); }
.hero-release:focus-visible { outline: 3px solid var(--hr-color-three); outline-offset: 5px; }
.hero-release-cover, .hero-release-copy, .hero-release-arrow { position: relative; z-index: 2; min-width: 0; }
.hero-release-cover {
  display: block;
  width: var(--hr-cover-render);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: max(3px, calc(var(--hr-radius) * .4));
  background: #05070c;
  box-shadow: 0 0 0 1px #ffffff25, 0 0 15px color-mix(in srgb, var(--hr-color-two) 18%, transparent);
}
.hero-release-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-release-copy { display: flex; flex-direction: column; gap: 5px; overflow-wrap: anywhere; }
.hero-release-label {
  display: block;
  color: #edf7ff;
  font: 700 9px/1.55 Inter, Arial, sans-serif;
  letter-spacing: .11em;
}
.hero-release-title {
  display: block;
  margin: 0;
  color: #fff;
  font-family: Sora, Manrope, Arial, sans-serif;
  font-size: var(--hr-title-size);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero-release-subtitle { display: block; color: #c4cbd9; font: 500 10px/1.55 Inter, Arial, sans-serif; letter-spacing: .025em; }
.hero-release-arrow { display: flex; align-items: center; justify-content: center; color: var(--hr-color-three); }
.hero-release-arrow svg { display: block; width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; }
.hero-release-lights, .hero-release-sheen, .hero-release-sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; }
.hero-release-lights {
  background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--hr-color-one) 43%, transparent), transparent 52%), radial-gradient(ellipse at 100% 90%, color-mix(in srgb, var(--hr-color-three) 22%, transparent), transparent 48%), linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--hr-color-two) 10%, transparent), transparent 75%);
  opacity: calc(var(--hr-strength) * .7);
}
.hero-release-sheen {
  background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--hr-color-two) 24%, transparent) 45%, #ffffff45 50%, color-mix(in srgb, var(--hr-color-one) 20%, transparent) 55%, transparent 65%);
  opacity: var(--hr-strength);
  transform: translateX(-145%);
}
.hero-release-spark {
  position: absolute;
  width: 13px;
  height: 13px;
  color: var(--hr-color-two);
  background: currentColor;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  opacity: 0;
  transform: scale(.35) rotate(-15deg);
}
.hero-release-spark-1 { top: 10%; left: 10%; color: var(--hr-color-one); --hr-delay: -.4; }
.hero-release-spark-2 { top: 15%; right: 14%; width: 10px; height: 10px; --hr-delay: -.7; }
.hero-release-spark-3 { bottom: 12%; right: 7%; color: var(--hr-color-three); --hr-delay: -.15; }
.hero-release-spark-4 { bottom: 8%; left: 37%; width: 8px; height: 8px; color: var(--hr-color-one); --hr-delay: -.9; }
.hero-release-spark-5 { top: 9%; left: 57%; width: 7px; height: 7px; color: var(--hr-color-three); --hr-delay: -.5; }
.hero-release[data-animation=sparkle] .hero-release-sheen { animation: hr-sheen calc(var(--hr-seconds) * 1.4) ease-in-out infinite; }
.hero-release[data-animation=sparkle] .hero-release-spark { animation: hr-spark calc(var(--hr-seconds) * 1.4) ease-in-out infinite; animation-delay: calc(var(--hr-seconds) * var(--hr-delay)); }
.hero-release:is([data-animation=sparkle], [data-animation=glow]) .hero-release-lights { animation: hr-aura var(--hr-seconds) ease-in-out infinite alternate; }
.hero-release[data-animation=none] *, .hero-release[data-static=true] * { animation: none !important; }
.hero-release[data-static=true] .hero-release-sheen, .hero-release[data-static=true] .hero-release-sparkles { display: none; }
@keyframes hr-sheen { 0%, 45% { transform: translateX(-145%); } 85%, 100% { transform: translateX(145%); } }
@keyframes hr-spark { 0%, 40%, 100% { opacity: 0; transform: scale(.35) rotate(-15deg); } 60% { opacity: calc(var(--hr-strength) * .9); transform: scale(1) rotate(15deg); } 80% { opacity: calc(var(--hr-strength) * .25); transform: scale(.65) rotate(25deg); } }
@keyframes hr-aura { from { opacity: calc(var(--hr-strength) * .45); } to { opacity: calc(var(--hr-strength) * .95); } }
@media (max-width: 600px) {
  .hero-release { --hr-cover-render: min(var(--hr-cover-size), 84px); gap: 12px; margin-top: 21px; }
  .hero-release-title { font-size: var(--hr-title-mobile-size); }
  .hero-release-label { font-size: 8px; letter-spacing: .08em; }
  .hero-release-subtitle { font-size: 9px; }
}
@media (max-width: 360px) {
  .hero-release { --hr-cover-render: min(var(--hr-cover-size), 68px); grid-template-columns: var(--hr-cover-render) minmax(0, 1fr); gap: 10px; }
  .hero-release[data-has-cover=false] { grid-template-columns: minmax(0, 1fr); }
  .hero-release-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-release, .hero-release * { animation: none !important; transition: none !important; }
  .hero-release-sheen, .hero-release-sparkles { display: none; }
}