/*
UniMatch - about style
https://Unimatch.click
 
@author:  Jacopo Siceri, https://www.linkedin.com/in/edoardo-lo-jacono-a55514210/
*/
/* Sicer's about page reset */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Sicer's page fade-in */
    body.ab-enter { opacity: 0; }
    body.ab-ready { opacity: 1; transition: opacity .55s ease; }

    /* Sicer's scroll-reveal utility */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .75s ease, transform .75s ease;
    }
    .reveal.visible          { opacity: 1; transform: translateY(0); }
    .reveal.d1               { transition-delay: .1s; }
    .reveal.d2               { transition-delay: .2s; }
    .reveal.d3               { transition-delay: .3s; }
    .reveal.d4               { transition-delay: .4s; }

    .ab-hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 7rem 1.5rem 5rem;
      position: relative;
      overflow: hidden;
    }
    .ab-hero .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      z-index: 0;
    }
    .ab-hero .orb-1 {
      width: 520px; height: 520px;
      background: rgba(0,122,255,.11);
      top: -130px; left: -160px;
      animation: orb-drift 9s ease-in-out infinite;
    }
    .ab-hero .orb-2 {
      width: 420px; height: 420px;
      background: rgba(100,210,255,.09);
      bottom: -100px; right: -120px;
      animation: orb-drift 11s ease-in-out infinite reverse;
    }
    .ab-hero .orb-3 {
      width: 280px; height: 280px;
      background: rgba(0,122,255,.07);
      top: 40%; left: 55%;
      animation: orb-drift 14s ease-in-out infinite;
      animation-delay: -5s;
    }
    @keyframes orb-drift {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%       { transform: translate(35px,-45px) scale(1.06); }
      66%       { transform: translate(-25px,22px) scale(.95); }
    }
    .ab-badge {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      padding: .38rem 1rem;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--accent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      margin-bottom: 1.5rem;
      animation: ab-fade-up .65s ease both;
    }
    .ab-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.4; transform:scale(.65); }
    }
    .ab-hero-title {
      position: relative;
      z-index: 1;
      font-size: clamp(3.2rem, 9vw, 6.5rem);
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1.04;
      color: var(--accent);
      animation: ab-fade-up .65s .1s ease both;
    }
    .ab-hero-sub {
      position: relative;
      z-index: 1;
      font-size: clamp(1rem, 2.6vw, 1.2rem);
      color: var(--muted);
      max-width: 540px;
      line-height: 1.65;
      margin: 1.1rem auto 3rem;
      animation: ab-fade-up .65s .2s ease both;
    }
    .ab-scroll-hint {
      position: absolute;
      bottom: 2.2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .45rem;
      cursor: pointer;
      animation: ab-fade-up .65s .55s ease both;
    }
    .ab-scroll-hint span {
      font-size: .72rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .09em;
    }
    .ab-scroll-mouse {
      width: 22px; height: 32px;
      border: 2px solid var(--border);
      border-radius: 11px;
      position: relative;
    }
    .ab-scroll-mouse::after {
      content: '';
      position: absolute;
      top: 5px; left: 50%;
      transform: translateX(-50%);
      width: 4px; height: 7px;
      background: var(--muted);
      border-radius: 2px;
      animation: mouse-scroll 1.6s ease infinite;
    }
    @keyframes mouse-scroll {
      0%   { opacity:1; transform:translateX(-50%) translateY(0); }
      100% { opacity:0; transform:translateX(-50%) translateY(11px); }
    }
    .ab-wrap {
      max-width: 920px;
      margin: 0 auto;
      padding: 5rem 1.5rem;
    }
    .ab-wrap-sm {
      max-width: 700px;
      margin: 0 auto;
      padding: 4rem 1.5rem;
    }
    .ab-label {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      font-size: .74rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--accent);
      margin-bottom: .75rem;
    }
    .ab-label::before {
      content: '';
      width: 20px; height: 2px;
      background: var(--accent);
      border-radius: 1px;
      flex-shrink: 0;
    }
    .ab-section-title {
      font-size: clamp(1.7rem, 4vw, 2.5rem);
      font-weight: 900;
      letter-spacing: -.03em;
      line-height: 1.12;
      margin-bottom: 1rem;
      color: var(--text);
    }
    .ab-body {
      font-size: 1.03rem;
      color: var(--muted);
      line-height: 1.82;
    }
    .ab-body p          { margin-bottom: 1rem; }
    .ab-body p:last-child { margin-bottom: 0; }
    .ab-body strong     { color: var(--text); font-weight: 700; }
    .ab-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 20px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 2rem 2.2rem;
      box-shadow: 0 12px 40px rgba(0,0,0,.07);
    }
    [data-theme="dark"] .ab-card {
      background: rgba(28,28,34,.6);
      border-color: rgba(255,255,255,.12);
    }
    .ab-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4rem;
      margin-top: 1.6rem;
    }
    .ab-icon-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 18px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 1.65rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.06);
      transition: transform .26s ease, box-shadow .26s ease;
    }
    .ab-icon-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 44px rgba(0,0,0,.1);
    }
    [data-theme="dark"] .ab-icon-card {
      background: rgba(28,28,34,.6);
      border-color: rgba(255,255,255,.12);
    }
    .ab-icon        { font-size: 2.1rem; display: block; margin-bottom: .7rem; }
    .ab-icon-card h4 {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -.01em;
      color: var(--text);
      margin-bottom: .35rem;
    }
    .ab-icon-card p {
      font-size: .9rem;
      color: var(--muted);
      line-height: 1.6;
    }
    .ab-skills {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-top: 1.4rem;
    }
    .ab-skill {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .38rem .85rem;
      background: var(--panel-strong);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: .83rem;
      font-weight: 600;
      color: var(--text);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: transform .2s ease;
    }
    .ab-skill:hover { transform: translateY(-2px); }
    .ab-timeline {
      position: relative;
      margin-top: 2.8rem;
      padding-left: 2rem;
    }
    .ab-timeline::before {
      content: '';
      position: absolute;
      left: 7px; top: 8px; bottom: 8px;
      width: 2px;
      background: linear-gradient(to bottom, var(--accent), rgba(0,122,255,0));
      border-radius: 1px;
    }
    .ab-tl-item {
      position: relative;
      margin-bottom: 2.2rem;
      padding-left: 1.6rem;
    }
    .ab-tl-item:last-child { margin-bottom: 0; }
    .ab-tl-dot {
      position: absolute;
      left: -1.93rem; top: 5px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--bg);
      box-shadow: 0 0 0 4px rgba(0,122,255,.18);
    }
    .ab-tl-phase {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--accent);
      margin-bottom: .2rem;
    }
    .ab-tl-title {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.01em;
      margin-bottom: .3rem;
    }
    .ab-tl-text {
      font-size: .92rem;
      color: var(--muted);
      line-height: 1.65;
    }
    .ab-contact-outer {
      max-width: 620px;
      margin: 0 auto;
      padding: 5rem 1.5rem 6rem;
      text-align: center;
    }
    .ab-contact-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 24px;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      padding: 2.8rem 2rem;
      box-shadow: 0 18px 55px rgba(0,0,0,.09);
      margin-top: 1.8rem;
    }
    [data-theme="dark"] .ab-contact-card {
      background: rgba(28,28,34,.6);
      border-color: rgba(255,255,255,.12);
    }
    .ab-contact-emoji { font-size: 2.4rem; display: block; margin-bottom: .7rem; }
    .ab-contact-sub   { font-size: 1rem; color: var(--muted); margin-bottom: 1.4rem; }
    .ab-mail-btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      background: var(--accent);
      color: #fff !important;
      text-decoration: none !important;
      padding: .9rem 2.2rem;
      border-radius: 999px;
      font-size: 1rem;
      font-weight: 700;
      transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
      box-shadow: 0 8px 26px rgba(0,122,255,.28);
    }
    .ab-mail-btn:hover {
      filter: brightness(1.1);
      transform: translateY(-3px);
      box-shadow: 0 14px 36px rgba(0,122,255,.38);
    }
    .ab-contact-note {
      font-size: .83rem;
      color: var(--muted);
      margin-top: 1.1rem;
    }
    .ab-author-line {
      margin-top: 1.4rem;
      padding-top: 1.2rem;
      border-top: 1px solid var(--border);
      font-size: .88rem;
      color: var(--muted);
    }
    .ab-author-link {
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
      transition: opacity .2s ease;
    }
    .ab-author-link:hover { opacity: .75; text-decoration: underline; }
    .ab-divider {
      height: 1px;
      background: var(--border);
      max-width: 920px;
      margin: 0 auto;
    }
    @keyframes ab-fade-up {
      from { opacity:0; transform:translateY(22px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @media (max-width: 720px) {
      .ab-grid-2     { grid-template-columns: 1fr; }
      .ab-hero-title { font-size: 3rem; }
    }
    @media (max-width: 480px) {
      .ab-wrap         { padding: 3.5rem 1.1rem; }
      .ab-card         { padding: 1.4rem 1.2rem; }
      .ab-contact-card { padding: 1.8rem 1.2rem; }
    }
    /*  Prodotto da $1C3Я

███████╗██╗ ██████╗███████╗██████╗ 
██╔════╝██║██╔════╝██╔════╝██╔══██╗
███████╗██║██║     █████╗  ██████╔╝
╚════██║██║██║     ██╔══╝  ██╔══██╗
███████║██║╚██████╗███████╗██║  ██║
╚══════╝╚═╝ ╚═════╝╚══════╝╚═╝  ╚═╝
2027
*/