/* about: styles for js/fx/about.js. Everything is scoped to .fx-about, which the module sets on #about. */

/* ---------- terminal ---------- */
.fx-about .termbox{position:relative;isolation:isolate}
/* faint scanlines; decorative only, under the legibility of the text */
.fx-about .termbox::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px)}
/* a soft phosphor glow on the text */
.fx-about .term{text-shadow:0 0 6px #85e0ed2e}
.fx-about .term .o{color:#ffffffe0}

/* title-bar dots take the palette colours on hover and focus */
.fx-about .tbar i{transition:background .35s,box-shadow .35s}
.fx-about .termbox:is(:hover,:focus-visible) .tbar i:nth-child(1){background:#85e0ed;box-shadow:0 0 6px #85e0ed80}
.fx-about .termbox:is(:hover,:focus-visible) .tbar i:nth-child(2){background:#93a8e1;box-shadow:0 0 6px #93a8e180;transition-delay:.06s}
.fx-about .termbox:is(:hover,:focus-visible) .tbar i:nth-child(3){background:#a9c78f;box-shadow:0 0 6px #a9c78f80;transition-delay:.12s}

/* the module makes the box a replay button (when motion is allowed) */
.fx-about .termbox[role=button]{cursor:pointer}
.fx-about .termbox:focus-visible{outline:2px solid var(--aqua6);outline-offset:4px}
.fx-about .tbar{position:relative}
.fx-about .termbox[role=button] .tbar::after{content:"↻ replay";position:absolute;left:76px;top:50%;transform:translateY(-50%);
  color:#ffffffb8;opacity:0;transition:opacity .3s}
.fx-about .termbox[role=button]:is(:hover,:focus-visible) .tbar::after{opacity:1}

/* power-on: a short glow of the frame and a brightness settle of the screen */
.fx-about .termbox.fx-boot{animation:fx-about-glow 1.4s cubic-bezier(.2,.7,.2,1) both}
.fx-about .termbox.fx-boot .term{animation:fx-about-on .9s ease-out both}
.fx-about .termbox.fx-boot::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;z-index:2;pointer-events:none;
  background:var(--aqua);box-shadow:0 0 18px 4px #85e0ed66;transform-origin:center;animation:fx-about-line .55s ease-out both}
@keyframes fx-about-glow{
  0%{box-shadow:0 40px 80px -40px #03323888,0 0 0 1px #85e0ed00,0 0 0 #85e0ed00}
  25%{box-shadow:0 40px 80px -40px #03323888,0 0 0 1px #85e0ed99,0 0 46px #85e0ed55}
  100%{box-shadow:0 40px 80px -40px #03323888,0 0 0 1px #85e0ed00,0 0 0 #85e0ed00}}
@keyframes fx-about-on{0%{opacity:0;filter:brightness(2)}35%{opacity:1;filter:brightness(1.5)}100%{opacity:1;filter:none}}
@keyframes fx-about-line{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(1) scaleY(0);opacity:0}}

/* ---------- about image ---------- */
/* the clip reveal replaces the generic .rv fade for this figure */
.js .fx-about .aimg[data-reveal=off]{opacity:1;transform:none}
.fx-about .aimg.fx-par img{transform:translate3d(0,var(--fx-py,0%),0) scale(1.1);will-change:transform}
.fx-about .aimg.fx-clip{clip-path:inset(9% 7% round 6px);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1)}
.fx-about .aimg.fx-clip img{transition:filter 1.3s,opacity 1.3s;filter:saturate(.7);opacity:.7}
.fx-about .aimg.fx-clip.fx-shown{clip-path:inset(0 round 6px)}
.fx-about .aimg.fx-clip.fx-shown img{filter:none;opacity:1}

/* ---------- situation list ---------- */
.fx-about .situ li{position:relative;isolation:isolate}
.fx-about .situ li::before{content:"";position:absolute;inset:0 -14px;z-index:-1;border-radius:4px;background:#85e0ed1f;opacity:0;transition:opacity .3s}
.fx-about .situ li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--aqua6);
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fx-about .situ li i{transition:transform .35s cubic-bezier(.2,.7,.2,1),color .35s}
.fx-about .situ li:focus-within::before{opacity:1}
.fx-about .situ li:focus-within::after{transform:scaleX(1)}
.fx-about .situ li:focus-within i{transform:translateX(6px);color:var(--deep2)}
@media(hover:hover){
  .fx-about .situ li:hover::before{opacity:1}
  .fx-about .situ li:hover::after{transform:scaleX(1)}
  .fx-about .situ li:hover i{transform:translateX(6px);color:var(--deep2)}
}
@media(max-width:620px){.fx-about .situ li::before{inset:0 -8px}}

/* ---------- reduced motion: static and complete ---------- */
@media(prefers-reduced-motion:reduce){
  .fx-about .termbox,.fx-about .termbox .term,.fx-about .termbox::before{animation:none!important}
  .fx-about .termbox.fx-boot::before{content:none}
  .fx-about .aimg img{transform:none!important;filter:none!important;opacity:1!important}
  .fx-about .aimg{clip-path:none!important}
  .fx-about .situ li::before,.fx-about .situ li::after,.fx-about .situ li i,.fx-about .tbar i{transition:none}
}