/* Chapters — logo build animation
   Types the wordmark, draws the rule, unrolls the ribbon. One shot, 1.7s.
   Requires Newsreader 400 (Google Fonts). Colours: ink #06210d, oxblood #830000.
   Set the size with font-size on .ch-logo — everything scales from it. */

.ch-logo{position:relative;display:inline-block;font-family:Newsreader,Georgia,serif;font-weight:400;font-size:38px;line-height:1;color:#06210d;padding-bottom:.62em;white-space:nowrap}
.ch-logo span{display:inline-block;opacity:0;animation:ch-glyph 1.7s steps(1,end) forwards}
.ch-logo span:nth-child(1){animation-delay:.06s}
.ch-logo span:nth-child(2){animation-delay:.15s}
.ch-logo span:nth-child(3){animation-delay:.24s}
.ch-logo span:nth-child(4){animation-delay:.33s}
.ch-logo span:nth-child(5){animation-delay:.42s}
.ch-logo span:nth-child(6){animation-delay:.51s}
.ch-logo span:nth-child(7){animation-delay:.60s}
.ch-logo span:nth-child(8){animation-delay:.69s}

.ch-logo .ch-rule{position:absolute;left:0;top:.868em;width:1.553em;height:.079em;border-radius:.04em;background:#830000;transform:scaleX(0);transform-origin:left center;animation:ch-rule .35s cubic-bezier(.22,.61,.36,1) .70s forwards}
.ch-logo .ch-ribbon{position:absolute;left:.132em;top:.947em;width:.29em;height:0;background:#830000;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .158em),0 100%);animation:ch-ribbon .57s linear 1.05s forwards}

@keyframes ch-glyph{to{opacity:1}}
@keyframes ch-rule{to{transform:scaleX(1)}}
@keyframes ch-ribbon{
  0%{height:0;animation-timing-function:cubic-bezier(.16,.9,.35,1)}
  44%{height:.466em;animation-timing-function:cubic-bezier(.4,0,.35,1)}
  70%{height:.41em;animation-timing-function:cubic-bezier(.4,0,.35,1)}
  100%{height:.42em}
}

/* --- app icon reveal: three ribbons unroll, 0.8s --- */
.ch-icon{position:relative;display:block;width:104px;height:104px;border-radius:23%;background:#830000;overflow:hidden}
.ch-icon i{position:absolute;top:0;display:block;width:14.4%;height:0;background:#f7eddf;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 12%),0 100%)}
.ch-icon i:nth-child(1){left:20.3%;opacity:.55;animation:ch-rib-a .7s linear forwards}
.ch-icon i:nth-child(2){left:42.2%;animation:ch-rib-b .7s linear .1s forwards}
.ch-icon i:nth-child(3){left:64.1%;opacity:.55;animation:ch-rib-c .7s linear .2s forwards}
@keyframes ch-rib-a{0%{height:0;animation-timing-function:cubic-bezier(.16,.9,.35,1)}45%{height:48%;animation-timing-function:cubic-bezier(.4,0,.35,1)}72%{height:42%}100%{height:43.7%}}
@keyframes ch-rib-b{0%{height:0;animation-timing-function:cubic-bezier(.16,.9,.35,1)}45%{height:86%;animation-timing-function:cubic-bezier(.4,0,.35,1)}72%{height:76%}100%{height:78.1%}}
@keyframes ch-rib-c{0%{height:0;animation-timing-function:cubic-bezier(.16,.9,.35,1)}45%{height:68%;animation-timing-function:cubic-bezier(.4,0,.35,1)}72%{height:60%}100%{height:62.5%}}

@media (prefers-reduced-motion: reduce){
  .ch-logo span,.ch-logo .ch-rule,.ch-logo .ch-ribbon,.ch-icon i{animation:none!important;opacity:1!important;transform:none!important}
  .ch-logo .ch-ribbon{height:.42em}
  .ch-icon i:nth-child(1){height:43.7%}.ch-icon i:nth-child(2){height:78.1%}.ch-icon i:nth-child(3){height:62.5%}
}