/* =========================================================
   HERO — frame, identity, entrance and live/release rail
   Single source of truth for all standard hero ornamentation.
   ========================================================= */

.home-hero,
.page-hero,
.about-hero {
  position: relative;
  z-index: 0;
}

.home-hero::before,
.page-hero::before,
.about-hero::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid var(--vid-color-taupe, #b7aa94);
  border-radius: 22px;
  pointer-events: none;
  opacity: .92;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position:
    8px 8px,
    calc(100% - 8px) 8px,
    8px calc(100% - 8px),
    calc(100% - 8px) calc(100% - 8px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b7aa94' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b7aa94' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b7aa94' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b7aa94' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-vid-theme="light"] .home-hero::before,
html[data-vid-theme="light"] .page-hero::before,
html[data-vid-theme="light"] .about-hero::before {
  border-color: #7A1F2B;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%237A1F2B' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='20' cy='9' r='2.4'/%3E%3Ccircle cx='20' cy='31' r='2.4'/%3E%3Ccircle cx='9' cy='20' r='2.4'/%3E%3Ccircle cx='31' cy='20' r='2.4'/%3E%3Cpath d='M20 6v14M20 20v14M6 20h14M20 20h14'/%3E%3C/g%3E%3C/svg%3E");
}

/* The old light-theme second ornament layer must never reappear. */
html[data-vid-theme="light"] .home-hero::after,
html[data-vid-theme="light"] .page-hero::after,
html[data-vid-theme="light"] .about-hero::after {
  content: none !important;
  display: none !important;
}

/* Same frame geometry on mobile and desktop. */
@media (max-width: 900px) {
  .home-hero::before,
  .page-hero::before,
  .about-hero::before {
    inset: 10px !important;
    border-radius: 22px !important;
    background-size: 18px 18px !important;
    background-position:
      8px 8px,
      calc(100% - 8px) 8px,
      8px calc(100% - 8px),
      calc(100% - 8px) calc(100% - 8px) !important;
  }
}

/* Home hero entrance: one premium moment, then calm. */
.home-hero .hero-title {
  animation: vidHeroTitleSettle .78s cubic-bezier(.22,.8,.25,1) both;
}
@keyframes vidHeroTitleSettle {
  from { opacity: .55; transform: translateY(8px); letter-spacing: .035em; }
  to   { opacity: 1; transform: none; letter-spacing: inherit; }
}

.hero-kicker-kinetic {
  position: relative;
  width: min(100%, 36rem);
  min-height: 1.55em;
  margin-bottom: .6rem;
  overflow: hidden;
}
.hero-kicker-kinetic__static {
  display: block;
  color: var(--vid-color-accent, #d4b06a);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  opacity: 0;
  animation: vidKickerStatic 1.05s cubic-bezier(.22,.8,.25,1) .12s both;
}
@keyframes vidKickerStatic {
  0%, 70% { opacity: 0; }
  100% { opacity: 1; }
}
.hero-kicker-kinetic__sweep {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  width: max-content;
  color: var(--vid-color-accent, #d4b06a);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(24px);
  animation: vidKickerSweep 1.05s cubic-bezier(.22,.8,.25,1) .12s both;
}
@keyframes vidKickerSweep {
  0% { opacity: 0; transform: translateX(28px); }
  16% { opacity: .82; }
  78% { opacity: .82; }
  100% { opacity: 0; transform: translateX(-28px); }
}

/* DJ / PRODUCER stays fixed; secondary identities rotate. */
.hero-kinetic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .32rem .52rem;
  min-height: 1.55rem;
  margin: .2rem 0 .72rem;
  color: rgba(248,250,252,.94);
  font-size: clamp(.72rem,1.35vw,.86rem);
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-kinetic__primary { font-weight: 700; }
.hero-kinetic__plus { color: var(--vid-color-accent, #d4b06a); font-weight: 700; }
.hero-kinetic__rotator {
  position: relative;
  display: inline-grid;
  min-width: 11.5ch;
  min-height: 1.2em;
  overflow: hidden;
}
.hero-kinetic__role {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(7px);
  pointer-events: none;
  white-space: nowrap;
  animation: vidHeroRoleCycle 11.4s linear infinite;
}
.hero-kinetic__role:nth-child(1) { animation-delay: 0s; }
.hero-kinetic__role:nth-child(2) { animation-delay: 2.85s; }
.hero-kinetic__role:nth-child(3) { animation-delay: 5.70s; }
.hero-kinetic__role:nth-child(4) { animation-delay: 8.55s; }
@keyframes vidHeroRoleCycle {
  0%   { opacity: 0; transform: translateY(7px); }
  3%   { opacity: 1; transform: translateY(0); }
  20%  { opacity: 1; transform: translateY(0); }
  24%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* Release / next-show rail: absent data produces no empty box. */
.hero-status-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: .65rem;
  max-width: 610px;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-status-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: .72rem;
  padding: .55rem .62rem;
  border: 1px solid rgba(212,176,106,.22);
  border-radius: 14px;
  background: rgba(2,6,23,.24);
  color: inherit;
  text-decoration: none;
  backdrop-filter: blur(5px);
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.hero-status-card:hover,
.hero-status-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(212,176,106,.5);
  background: rgba(2,6,23,.38);
  text-decoration: none;
}
.hero-status-card__art {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.05);
}
.hero-status-card__art img { width: 100%; height: 100%; object-fit: cover; }
.hero-status-card__eyebrow {
  display: block;
  margin-bottom: .12rem;
  color: var(--vid-color-accent, #d4b06a);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-status-card__title,
.hero-status-card__meta {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-status-card__title { color: #fff; font-size: .82rem; font-weight: 650; }
.hero-status-card__meta { margin-top: .08rem; color: rgba(248,250,252,.67); font-size: .65rem; }
.hero-status-card__arrow { color: var(--vid-color-accent, #d4b06a); font-size: 1rem; }

@media (max-width: 700px) {
  .hero-kicker-kinetic__static,
  .hero-kicker-kinetic__sweep { font-size: .7rem; letter-spacing: .18em; }
  .hero-kinetic { flex-wrap: nowrap; gap: .27rem .38rem; font-size: clamp(.67rem, 2.8vw, .78rem); letter-spacing: .105em; }
  .hero-kinetic__rotator { min-width: 11.2ch; }
  .hero-status-rail { grid-template-columns: 1fr; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-title,
  .hero-kicker-kinetic__static,
  .hero-kicker-kinetic__sweep { animation: none !important; }
  .hero-kicker-kinetic__static { opacity: 1 !important; }
  .hero-kicker-kinetic__sweep { display: none !important; }
  .hero-kinetic__role { animation: none !important; opacity: 0 !important; transform: none !important; }
  .hero-kinetic__role:first-child { opacity: 1 !important; }
}