/* About intro: the name alone, then three rows, words on the right and a picture on the left (after the layout rama sent).
   Each row is one block of text in the same size and colour beside an artwork; row one melts into the page, rows two and
   three sit in a frame. The profile button closes the section.
   The pictures are alive: a slow drift-and-zoom, a red glow that breathes over the sphere (its centre is --gx/--gy on the
   figure), sparks of dust rising through the frame, and a light parallax with the scroll (--py, js/sections/about-art.js). */
.ab-intro.ab-split{max-width:1280px;margin-inline:auto;display:grid;gap:clamp(40px,5vw,72px)}
.ab-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ab-split>.ab-name{margin-bottom:0}
.ab-split>.ab-more{margin-top:0;justify-self:start}
/* the three blocks share one size and colour */
.ab-copy p{font-size:clamp(var(--fs-19),1.55vw,var(--fs-26));line-height:1.9;color:var(--head);max-width:40ch}

.ab-art{position:relative;margin:0;width:100%;max-width:600px;justify-self:center;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:#0b0506}
.ab-art>img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;display:block;
  filter:saturate(.72) brightness(.95);   /* the pictures' red, toned down to sit calmly on the page */
  translate:0 var(--py,0px);animation:ab-drift 22s ease-in-out infinite alternate;will-change:transform}
@keyframes ab-drift{from{scale:1.04;transform:translateX(-1%)}to{scale:1.12;transform:translateX(1.2%)}}
/* breathing light over the sphere */
.ab-glow{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(26% 32% at var(--gx,50%) var(--gy,45%),rgba(255,90,112,.55),rgba(227,37,66,.18) 55%,transparent 75%);
  animation:ab-breathe 5.5s ease-in-out infinite}
@keyframes ab-breathe{0%,100%{opacity:.15}50%{opacity:.45}}
/* dust: two layers of sparks rising at different speeds */
.ab-dust{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen}
.ab-dust::before,.ab-dust::after{content:"";position:absolute;inset:-100% 0 0;background-repeat:repeat;
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,#ffd6dc,transparent),radial-gradient(1px 1px at 37% 64%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 58% 32%,#ff8a9a,transparent),radial-gradient(1px 1px at 81% 76%,#fff,transparent),
    radial-gradient(2px 2px at 69% 9%,#ff5a70,transparent),radial-gradient(1px 1px at 24% 88%,#ffd6dc,transparent),
    radial-gradient(1.5px 1.5px at 91% 44%,#fff,transparent);
  background-size:100% 50%;animation:ab-rise 26s linear infinite,ab-twinkle 3.2s ease-in-out infinite;opacity:.7}
.ab-dust::after{background-size:70% 35%;animation-duration:17s,2.4s;animation-delay:0s,-1.1s;opacity:.5}
@keyframes ab-rise{to{transform:translateY(50%)}}
@keyframes ab-twinkle{50%{opacity:.25}}

/* row one: no frame, the edges fade into the page */
.ab-art-glow{background:none;border-radius:var(--r-16);
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:-webkit-mask-size 2.4s var(--ease-out),mask-size 2.4s var(--ease-out)}
/* under the pointer the picture opens to its full frame: the fade grows away and a red edge lights up, slowly */
.ab-art::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;
  border:1px solid rgba(255,90,112,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 50px rgba(227,37,66,.35);transition:opacity 2.2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ab-art-glow:hover{-webkit-mask-size:320% 320%;mask-size:320% 320%}
  .ab-art:hover::after{opacity:1}
}
.ab-art-card{border-radius:var(--r-16);border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(227,37,66,.35)}

@media (max-width:860px){
  .ab-row{grid-template-columns:1fr}
  .ab-row .ab-art{order:-1;max-width:560px;width:100%;justify-self:center}
  .ab-copy p{font-size:var(--fs-18)}
}
@media (prefers-reduced-motion:reduce){.ab-art>img,.ab-glow,.ab-dust::before,.ab-dust::after{animation:none}.ab-art>img{translate:none}}
/* scroll entrance: each row's text comes in first, its picture right after; the row itself does not wait for the ones above */
.js .ab-split>.ab-row.reveal{opacity:1;transform:none;transition:none}
.js .ab-row>.reveal{transition-duration:.9s;transition-delay:calc(var(--i,0) * .25s)}