/* =========================================================
   lyrics.css — Scarlet Aura Tracklist & Lyrics System (Hybrid)
   Scoped to body.lyrics-page
   ========================================================= */

/* Meta + controls */
body.lyrics-page .lyrics-meta{ margin: 6px 0 12px; opacity: .9; }
body.lyrics-page .lyrics-controls{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 14px; }

/* Hide any legacy modal UI if still present */
body.lyrics-page .lyrics-btn-wrap,
body.lyrics-page .lyrics-modal-overlay{ display:none !important; }

/* =========================================================
   TRACKLIST STRUCTURE + NUMBERING (CSS-only, no :has, no JS)
   Number is attached to the DETAILS card so we can animate on [open].
   ========================================================= */

body.lyrics-page .tracklist-lyrics{
  counter-reset: track;
  padding-left: 0;
  margin-left: 0;
  width: 100%;
}

body.lyrics-page .tracklist-lyrics > li{
  list-style: none;
  position: relative;
  padding: 26px 0;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

body.lyrics-page .tracklist-lyrics > li:last-child{ border-bottom: none; }

/* Card sits in a "right column" with space reserved for number */
body.lyrics-page .tracklist-lyrics > li > details.lyrics-item{
  counter-increment: track; /* IMPORTANT: increment on the element that prints the number */
  margin-left: 44px;
  width: calc(100% - 44px);
  position: relative;
}

/* Track number (animated when open) */
body.lyrics-page .tracklist-lyrics > li > details.lyrics-item::before{
  content: counter(track);
  position: absolute;
  left: -44px;
  top: 50%;
  transform: translate(-16px, -50%) scale(.55) rotate(-14deg);
  color: #e11d48;
  font-weight: 800;
  font-size: 1.15rem;
  width: 34px;
  text-align: left;
  opacity: .2;
  transition: transform .22s cubic-bezier(.22,.61,.36,1),
              opacity .2s ease,
              color .2s ease,
              text-shadow .2s ease;
}

@keyframes trackNumberIgnite{
  0%{
    transform: translate(-20px, -50%) scale(.35) rotate(-18deg);
    opacity: 0;
    text-shadow: 0 0 0 rgba(225,29,72,0);
    filter: blur(2px);
  }
  55%{
    transform: translate(2px, -50%) scale(1.38) rotate(4deg);
    opacity: 1;
    text-shadow: 0 0 16px rgba(225,29,72,.75);
    filter: blur(0);
  }
  100%{
    transform: translate(0, -50%) scale(1.16) rotate(0);
    opacity: 1;
    text-shadow: 0 0 12px rgba(225,29,72,.5);
    filter: blur(0);
  }
}

body.lyrics-page .tracklist-lyrics > li > details.lyrics-item[open]::before{
  transform: translate(0, -50%) scale(1.16);
  color: #fb7185;
  opacity: 1;
  text-shadow: 0 0 12px rgba(225,29,72,.5);
  animation: trackNumberIgnite .48s cubic-bezier(.2,.7,.2,1) both;
}

/* =========================================================
   CARD STYLE
   ========================================================= */

body.lyrics-page details.lyrics-item{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
  transition: border-color .18s ease,
              box-shadow .18s ease,
              transform .18s ease,
              background .18s ease;
}

body.lyrics-page details.lyrics-item:hover{
  border-color: rgba(225, 29, 72, .55);
  box-shadow: 0 10px 34px rgba(225, 29, 72, .12),
              0 12px 44px rgba(0, 0, 0, .28);
  background: linear-gradient(180deg, rgba(225, 29, 72, .10), rgba(255, 255, 255, .03));
  transform: translateY(-1px);
}

body.lyrics-page details.lyrics-item[open]{
  border-color: rgba(225, 29, 72, .45);
  background: linear-gradient(180deg, rgba(225, 29, 72, .14), rgba(255, 255, 255, .03));
}

/* Pixel-perfect hybrid: whole card glows when hovering the YouTube icon.
   (JS adds .yt-hover to details.lyrics-item) */
body.lyrics-page details.lyrics-item.yt-hover{
  border-color: rgba(225, 29, 72, .78) !important;
  box-shadow: 0 12px 42px rgba(225, 29, 72, .26),
              0 12px 44px rgba(0, 0, 0, .28),
              0 0 28px rgba(225,29,72,.34) !important;
  background: linear-gradient(180deg, rgba(225, 29, 72, .18), rgba(255, 255, 255, .04));
  transform: translateY(-2px) scale(1.01);
  animation: ytCardPulse .78s ease-in-out infinite alternate;
}

@keyframes ytCardPulse{
  0%{
    box-shadow: 0 10px 30px rgba(225, 29, 72, .18),
                0 12px 44px rgba(0, 0, 0, .28),
                0 0 18px rgba(225,29,72,.18);
  }
  100%{
    box-shadow: 0 14px 46px rgba(225, 29, 72, .32),
                0 14px 46px rgba(0, 0, 0, .3),
                0 0 34px rgba(225,29,72,.38);
  }
}

body.lyrics-page details.lyrics-item > summary{
  width: 100%;
  padding: 20px 26px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
}

body.lyrics-page details.lyrics-item > summary::-webkit-details-marker{ display:none; }

body.lyrics-page details.lyrics-item > summary::after{
  content: "▾";
  opacity: .85;
  transition: transform .15s ease;
  margin-left: 2px;
}

body.lyrics-page details.lyrics-item[open] > summary::after{ transform: rotate(180deg); }

body.lyrics-page details.lyrics-item > summary .track-name{
  font-weight: 900;
  letter-spacing: .01em;
}

body.lyrics-page .track-meta{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

/* =========================================================
   PREMIUM YOUTUBE ICON — Option 3 + Upgrades
   Minimal white → Scarlet glow on hover + subtle pulse
   Closed = slightly transparent; Open = brighter
   ========================================================= */

body.lyrics-page .track-yt-link,
body.lyrics-page .track-yt-link:visited{
  color: inherit;
  text-decoration: none;
}

body.lyrics-page .track-yt-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.lyrics-page .yt-icon{
  width: 20px;
  height: 20px;
  fill: rgba(255,255,255,.55);
  opacity: .70; /* closed */
  transform: translateZ(0);
  transition: transform .18s ease, fill .18s ease, filter .18s ease, opacity .18s ease;
}

body.lyrics-page details.lyrics-item[open] .yt-icon{
  opacity: 1;
  fill: rgba(255,255,255,.82);
}

@keyframes saPulseGlow{
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(225,29,72,0)); }
  50%  { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(225,29,72,.55)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(225,29,72,0)); }
}

body.lyrics-page .track-yt-link:hover .yt-icon{
  fill: #e11d48;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(225,29,72,.6));
  animation: saPulseGlow 1.15s ease-in-out infinite;
  animation-delay: .05s;
}

body.lyrics-page .track-yt-link:active .yt-icon{
  transform: scale(0.95);
  animation: none;
}

/* Touch devices: larger icon, no hover reliance */
@media (hover: none) and (pointer: coarse){
  body.lyrics-page .yt-icon{
    width: 24px;
    height: 24px;
    opacity: .85;
  }
  body.lyrics-page details.lyrics-item[open] .yt-icon{ opacity: 1; }
}

/* =========================================================
   LYRICS CONTENT
   ========================================================= */

body.lyrics-page .lyrics-by{ padding: 10px 26px 0; opacity: .9; }

body.lyrics-page pre.lyrics{
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  padding: 18px 26px 24px;
  margin: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

/* Optional bilingual layout (original + translation) */
body.lyrics-page .lyrics-compare{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px 26px 24px;
  margin: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

body.lyrics-page .lyrics-column{ min-width: 0; }

body.lyrics-page .lyrics-column-title{
  margin: 0 0 10px;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}

body.lyrics-page .lyrics-compare pre.lyrics{
  margin: 0;
  padding: 14px 16px 16px;
  border-top: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.36);
}

@media (max-width: 900px){
  body.lyrics-page .lyrics-compare{
    grid-template-columns: 1fr;
  }
}

body.lyrics-page details.lyrics-item > summary:focus-visible{
  outline: 2px solid rgba(225, 29, 72, .75);
  outline-offset: 3px;
}

/* =========================================================
   MOBILE LAYOUT
   ========================================================= */
@media (max-width: 520px){
  body.lyrics-page .tracklist-lyrics > li > details.lyrics-item{
    margin-left: 38px;
    width: calc(100% - 38px);
  }
  body.lyrics-page .tracklist-lyrics > li > details.lyrics-item::before{
    left: -38px;
    width: 28px;
  }
  body.lyrics-page details.lyrics-item > summary{ padding: 14px 14px; gap: 16px; }
  body.lyrics-page .lyrics-by{ padding: 10px 14px 0; }
  body.lyrics-page pre.lyrics{ padding: 14px 14px 18px; }
  body.lyrics-page .lyrics-compare{ padding: 14px 14px 18px; gap: 12px; }
  body.lyrics-page .lyrics-compare pre.lyrics{ padding: 12px 12px 14px; }
  body.lyrics-page .yt-icon{ width: 22px; height: 22px; }
}

body.lyrics-page details.lyrics-item{
  position: relative;
}

body.lyrics-page details.lyrics-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(225,29,72,.08) 50%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  opacity: 0;
}

body.lyrics-page details.lyrics-item:hover::after{
  transform: translateX(120%);
  opacity: 1;
}

/* Better mobile: make the whole summary easier to tap, and add more breathing room in the meta */

@media (hover:none) and (pointer:coarse){
  body.lyrics-page details.lyrics-item > summary{
    padding: 18px 16px;
  }
  body.lyrics-page .track-meta{
    gap: 14px;
  }
}