.fire {
  container-name:fire;
  container-type:inline;
  width:var(--w);
  height:var(--h);
  overflow:clip;
  position:relative;
  isolation:isolate;
  margin:15px auto;
  font:var(--fs-body) var(--f-body);
  color:var(--text);
  background:var(--b);
  outline:var(--border2);
  outline-offset:calc(var(--border2-w) * -1);
  & br {
    display:none;
  }
  & *::-webkit-scrollbar {
    width:var(--scroll-w);
  }
  & *::-webkit-scrollbar-thumb {
    background:var(--scroll-b);
  }
  & details {
    background:red;
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    z-index:1;
    & summary {
      width:100%;
      height:100%;
      cursor:pointer;
    }
  }
  & [data-section="image"] {
    position:absolute;
    inset:0;
    z-index:-1;
    width:100%;
    height:100%;
    transition:opacity ease 1s;
    opacity:1;
    &::before, &::after {
      content:'';
      position:absolute;
      isolation:isolate;
      inset:0;
    }
    &::before {
      background:var(--image-c1);
      mix-blend-mode:var(--image-e1);
      z-index:-1;
    }
    &::after {
      background:var(--image-c2);
      mix-blend-mode:var(--image-e2);
      z-index:-2;
    }
    & img {
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      filter:var(--image-f);
      z-index:-3;
      position:relative;
    }
  }
  & [data-section="title"] {
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    & i {
      font:var(--fs-title1) var(--f-title1);
      line-height:1em;
      letter-spacing:.15em;
      text-indent:.15em;
      color:var(--title1);
      position:relative;
      transition:top 1s ease .5s;
      top:0;
    }
    & b {
      position:relative;
      top:0;
      transition:top 1s ease .5s;
      font:var(--fs-title2) var(--f-title2);
      line-height:1em;
      margin-top:-.1em;
      color:transparent;
      background-color:var(--title2-c);
      background-image:var(--title2);
      background-clip:text;
      -webkit-background-clip:text;
      -moz-background-clip:text;
      -webkit-text-stroke:var(--title2-s);
      background-size:120% 150%;
      background-repeat:no-repeat;
      animation:fire var(--anim-speed) infinite;
    }
  }
  & [data-section="body"] {
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    grid-template-rows:var(--quote-h) 1fr var(--song-h);
    grid-template-areas:
      'quote quote'
      'text data'
      'text song';
    gap:var(--gap);
    padding:var(--padding);
    box-sizing:border-box;
    width:100%;
    height:100%;
    & [data-section="quote"] {
      grid-area:quote;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:var(--gap);
      position:relative;
      left:calc(var(--w) * -1);
      transition:left 1s ease 0s;
      & > i {
        font-size:var(--icon-fs);
        color:var(--icon-c);
        background:var(--icon-b);
        height:100%;
        aspect-ratio:1;
        text-align:center;
        place-content:center;
      }
      & > span {
        overflow:auto;
        text-align:justify;
        font-style:italic;
        line-height:1.35em;
        max-height:var(--quote-h);
        & br {
          display:inline;
        }
      }
    }
    & [data-section="text"] {
      grid-area:text;
      overflow:auto;
      position:relative;
      left:calc(var(--w) * -1);
      transition:left 1s ease 0s;
      padding-right:calc(var(--gap) / 2);
      margin-right:calc(var(--gap) / -2);
      text-align:justify;
      line-height:1.35em;
      & br {
        display:inline;
      }
    }
    & [data-section="data"] {
      grid-area:data;
      position:relative;
      left:var(--w);
      transition:left 1s ease 0s;
      & span {
        display:flex;
        justify-content:space-between;
        text-align:right;
        align-items:center;
        &:not(:last-of-type) {
          margin-bottom:calc(var(--gap) / 2);
        }
        & > b {
          font:var(--fs-data1) var(--f-data1);
          text-transform:uppercase;
          padding:.7em 1em;
          line-height:1em;
          border:var(--data1-br);
          background:var(--data1-b);
          color:var(--data1-c);
          min-width:11em;
          box-sizing:border-box;
          text-align:center;
        }
        & > i {
          font-style:normal;
          color:var(--data2-c);
          font:var(--fs-data2) var(--f-data2);
        }
      }
    }
    & [data-section="song"] {
      grid-area:song;
      overflow:hidden;
      display:flex;
      align-items:stretch;
      justify-content:center;
      position:relative;
      left:var(--w);
      text-align:right;
      transition:left 1s ease 0s;
      gap:calc(var(--gap) / 2);
      & > div {
        height:100%;
        aspect-ratio:1;
        flex-shrink:0;
        overflow:hidden;
        position:relative;
        isolation:isolate;
        outline:var(--border1);
        outline-offset:calc(var(--border1-w) * -1);
        &::before, &::after {
      content:'';
      position:absolute;
      isolation:isolate;
      inset:0;
    }
        &::before {
      background:var(--image-c1);
      mix-blend-mode:var(--image-e1);
      z-index:-1;
    }
        &::after {
      background:var(--image-c2);
      mix-blend-mode:var(--image-e2);
      z-index:-2;
    }
        & img {
          width:100%;
          height:100%;
          object-fit:cover;
          object-position:center;
          filter:var(--song-f);
          position:relative;
          z-index:-3;
        }
      }
      & > span {
        flex-grow:1;
        display:flex;
        justify-content:center;
        align-items:flex-end;
        flex-direction:column;
        & > b {
          font:var(--fs-song1) var(--f-song1);
          color:var(--song-c1);
          line-height:1em;
        }
        & > i {
          font:var(--fs-song2) var(--f-song2);
          color:var(--song-c2);
          line-height:1em;
        }
      }
    }
  }
  &:has(details[open]) {
    & details {
      width:var(--quote-h);
      aspect-ratio:1;
      height:auto;
      top:var(--padding);
      left:var(--padding);
    }
    & [data-section="image"] {
      opacity:var(--image-op);
    }
    & [data-section="title"] {
      & i {
        top:-100%;
        transition:top 1s ease 0s;
      }
      & b {
        top:100%;
        transition:top 1s ease 0s;
      }
    }
    & [data-section="body"] > div {
      left:0;
      transition:left 1s ease .5s;
    }
  }
  @container style(--ratio:vertical){
    [data-section="body"] {
      grid-template-columns:1fr;
      grid-template-rows:var(--quote-h) 1fr 2fr var(--song-h);
      grid-template-areas:
        'quote'
        'data'
        'text'
        'song';
      & [data-section="quote"] > span {
        margin-right:calc(var(--gap) / -2);
        padding-right:calc(var(--gap) / 2);
      }
    }
  }
}
@keyframes fire {
  0%, 22%, 51%, 69%, 89%, 100% {
    background-position:0% -10%;
  }
  43%, 55%, 90% {
    background-position:100% 70%;
  }
  10%, 76% {
    background-position:0% 100%;
  }
  25%, 74%, 95% {
    background-position:100% 120%;
  }
}
.ncredit {
  width: 400px;
  text-align: center;
  margin: 0 auto;
  display: block;
  font-size: 10px;
  text-decoration: none;
  font: 8px verdana;
  color:#aaa;
  margin-top:-10px;
}
.fire + br + .ncredit {
  margin-top: -25px;
}
.ncredit:before {
  content: "©";
}