/* Про мене: оформлення та анімації (2026-10-27) */
#about.about-x{position:relative;overflow:hidden;isolation:isolate}
#about.about-x::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:46rem;height:46rem;right:-18rem;top:-14rem;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--color-accent) 11%,transparent),transparent 72%)}
#about.about-x::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:32rem;height:32rem;left:-14rem;bottom:-12rem;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--color-accent) 7%,transparent),transparent 72%)}

/* фото: декоративна рамка + плаваючий чіп */
#about .about-photo{position:relative}
#about .about-photo-frame{position:absolute;inset:0;transform:translate(14px,14px);border:1px solid color-mix(in oklab,var(--color-accent) 45%,var(--color-border));border-radius:var(--radius-lg);pointer-events:none;z-index:0;transition:transform var(--dur-4) var(--ease-rise)}
#about .about-image-wrap{position:relative;z-index:1;box-shadow:var(--shadow-soft-lg)}
#about .about-photo:hover .about-photo-frame{transform:translate(8px,8px)}
#about .about-chip{position:absolute;z-index:2;left:1rem;bottom:1.25rem;display:inline-flex;align-items:center;gap:.5rem;max-width:calc(100% - 2rem);padding:.6rem 1rem .6rem .7rem;border:1px solid color-mix(in oklab,var(--color-accent) 25%,var(--color-border));border-radius:var(--radius-pill);background:color-mix(in oklab,var(--color-surface) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-soft-md);font-family:var(--font-serif);font-style:italic;font-size:.975rem;line-height:1.2;color:var(--color-ink)}
#about .about-chip-ic{display:inline-grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:color-mix(in oklab,var(--color-accent) 14%,transparent);color:var(--color-accent)}
#about .about-chip-ic svg{width:1rem;height:1rem}

/* заголовок: дуга-«брова» під курсивом + легкий перелив */
#about .about-title em{position:relative;display:inline-block;padding-bottom:.12em;color:var(--color-ink);background:linear-gradient(100deg,var(--color-ink) 0%,var(--color-ink) 38%,var(--color-accent) 50%,var(--color-ink) 62%,var(--color-ink) 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#about .about-title em::after{content:"";position:absolute;left:-.04em;right:.2em;bottom:-.14em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 16C45 3 120 1 197 10' fill='none' stroke='%23b8674b' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;opacity:.85;pointer-events:none}

/* абзаци */
#about .about-paras p:first-child{font-size:1.125rem}
#about .about-paras p:first-child::first-letter{font-family:var(--font-serif);color:var(--color-accent);font-size:1.15em}

/* факти */
#about .about-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:2rem;max-width:40rem}
#about .about-fact{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1rem 1.05rem;background:color-mix(in oklab,var(--color-surface) 55%,#fff);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft-md);transition:transform var(--dur-2) var(--ease-soft),box-shadow var(--dur-2) var(--ease-soft),border-color var(--dur-2) var(--ease-soft)}
#about .about-fact-ic{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;margin-bottom:.5rem;border-radius:50%;background:color-mix(in oklab,var(--color-accent) 12%,transparent);color:var(--color-accent)}
#about .about-fact-ic svg{width:1.05rem;height:1.05rem}
#about .about-fact-t{font-family:var(--font-serif);font-size:1.2rem;line-height:1.15;color:var(--color-ink)}
#about .about-fact-s{font-size:.8125rem;line-height:1.35;color:var(--color-muted)}
html[lang="ru"] #about .about-facts,html[lang="ru"] #about .about-chip{display:none}

/* пункти як картки */
#about .about-points{max-width:40rem!important}
#about .about-points>li+li{margin-top:.75rem}
#about .about-point{align-items:flex-start;gap:.9rem!important;padding:1rem 1.15rem;border:1px solid var(--color-border);border-left:3px solid var(--color-accent);border-radius:var(--radius-md);background:color-mix(in oklab,var(--color-surface) 40%,#fff);line-height:1.55;transition:transform var(--dur-2) var(--ease-soft),box-shadow var(--dur-2) var(--ease-soft)}
#about .about-point-ic{flex:none;display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:color-mix(in oklab,var(--color-accent) 12%,transparent);color:var(--color-accent)}
#about .about-point-ic svg{width:1rem;height:1rem}

@media (hover:hover){
  #about .about-fact:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft-lg);border-color:color-mix(in oklab,var(--color-accent) 35%,var(--color-border))}
  #about .about-point:hover{transform:translateX(4px);box-shadow:var(--shadow-soft-md)}
}

/* сітка: на планшеті вже дві колонки, фото «липке» */
@media (min-width:768px){
  #about .about-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.5rem}
  #about .about-photo{position:sticky;top:6.5rem}
  #about .about-chip{left:auto;right:-.75rem;bottom:2rem}
}
@media (min-width:1024px){
  #about .about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:5rem}
  #about .about-chip{right:-1.75rem}
}
@media (max-width:767px){
  #about .about-photo-frame{transform:translate(8px,8px)}
  #about .about-paras p:first-child{font-size:1.0625rem}
}
@media (max-width:479px){
  #about .about-facts{grid-template-columns:1fr;gap:.6rem}
  #about .about-fact{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:.75rem;padding:.8rem 1rem}
  #about .about-fact-ic{margin-bottom:0}
  #about .about-fact-s{flex-basis:100%;padding-left:2.85rem;margin-top:-.35rem}
}

/* анімації: лише коли JS додав .ab-js і користувач не просив менше руху */
@media (prefers-reduced-motion:no-preference){
  #about.ab-js [data-ab]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-rise),transform .7s var(--ease-rise);transition-delay:calc(var(--d,0) * 90ms)}
  #about.ab-js [data-ab].ab-in{opacity:1;transform:none}
  #about.ab-js .about-fact.ab-in,#about.ab-js .about-point.ab-in{transition:opacity .7s var(--ease-rise) calc(var(--d,0) * 90ms),transform var(--dur-2) var(--ease-soft),box-shadow var(--dur-2) var(--ease-soft),border-color var(--dur-2) var(--ease-soft)}
  #about.ab-js .about-title em::after{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-rise) .55s}
  #about.ab-js .about-title.ab-in em::after{clip-path:inset(0 0 0 0)}
  #about.ab-js .about-title.ab-in em{animation:ab-shimmer 2.4s var(--ease-soft) .5s 1 both}
  #about.ab-js .about-chip{opacity:0;transform:translateY(10px) scale(.96);transition:opacity .8s var(--ease-rise) .5s,transform .8s var(--ease-rise) .5s}
  #about.ab-js.ab-seen .about-chip{opacity:1;transform:none;animation:ab-float 6s ease-in-out 1.6s infinite}
  #about.ab-js .about-photo-frame{transform:translate(0,0);opacity:0;transition:transform 1.1s var(--ease-rise) .3s,opacity .8s var(--ease-rise) .3s}
  #about.ab-js.ab-seen .about-photo-frame{transform:translate(14px,14px);opacity:1}
  #about.ab-js.ab-seen .about-photo:hover .about-photo-frame{transform:translate(8px,8px);transition-delay:0s}
  @media (max-width:767px){#about.ab-js.ab-seen .about-photo-frame{transform:translate(8px,8px)}}
}
@keyframes ab-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes ab-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (prefers-reduced-motion:reduce){
  #about .about-chip,#about .about-title em{animation:none!important}
  #about .about-fact,#about .about-point,#about .about-photo-frame{transition:none!important}
}