/* =================================================================
   About section (homepage, second screen)
   Palette & type follow the main site: #a1bde5 accent, Plus Jakarta
   Sans headings, Mulish body, dark translucent surfaces.
   Hidden "before" states only apply when JS is running (.w-mod-js is
   added by Webflow's inline head script), so the content is always
   readable without JavaScript.
================================================================= */

@property --about-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.about-section {
  position: relative;
  /* Scrollify pins every .section to exactly one viewport height via an
     inline style; let this one grow when its content is taller
     (stacked mobile layout, short laptop screens). */
  height: auto !important;
  min-height: 100svh;
}

.about {
  --accent: #a1bde5;
  --accent-soft: rgba(161, 189, 229, .16);
  --text: #fff;
  --muted: rgba(255, 255, 255, .62);
  --line: rgba(255, 255, 255, .12);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 110px 20px 60px;
  background-image: linear-gradient(var(--section-overlay), var(--section-overlay));
  overflow: hidden;
  color: var(--text);
  font-family: Mulish, sans-serif;
}


.about-inner {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 72px;
}

/* ---------- Photo ---------- */
.about-visual {
  position: relative;
  justify-self: center;
  width: min(420px, 100%, calc((100svh - 230px) * .8));
  min-width: 260px;
  perspective: 1200px;
}

.about-photo {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-out);
  will-change: transform;
}

.about-photo-glow {
  position: absolute;
  inset: 8% -6% -6% 8%;
  border-radius: 32px;
  background: radial-gradient(ellipse at 55% 55%, rgba(255, 255, 255, .10), transparent 65%);
  transform: translateZ(-40px);
}

.about-photo-frame {
  position: relative;
  padding: 2px;
  border-radius: 26px;
  isolation: isolate;
}

/* Rotating light running along the frame */
.about-photo-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--about-angle), rgba(255, 255, 255, .08) 0 60%, rgba(255, 255, 255, .55) 76%, rgba(255, 255, 255, .08) 92%);
  animation: about-spin 9s linear infinite;
  z-index: -1;
}

.about-photo-clip {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #111;
}

.about-photo-clip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: about-kenburns 20s ease-in-out infinite alternate;
}


/* Floating tech chips around the photo.
   .about-chip = position + depth; .about-chip-float = the pill + bobbing */
.about-chip {
  position: absolute;
  z-index: 2;
}
.about-chip-float {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  background: rgba(12, 12, 12, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  animation: about-float 6s ease-in-out infinite;
}
.about-chip-float::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
/* Scattered over and around the photo, keeping clear of the face and centre */
.chip-1 { top: 4%;  left: -12%; transform: translateZ(60px); }
.chip-2 { top: 13%; left: 66%;  transform: translateZ(90px); }
.chip-3 { top: 31%; left: 4%;   transform: translateZ(50px); }
.chip-4 { top: 37%; left: 80%;  transform: translateZ(70px); }
.chip-5 { top: 53%; left: -16%; transform: translateZ(80px); }
.chip-6 { top: 63%; left: 52%;  transform: translateZ(60px); }
.chip-7 { top: 79%; left: 8%;   transform: translateZ(70px); }
.chip-8 { top: 90%; left: 62%;  transform: translateZ(50px); }
.chip-2 .about-chip-float { animation-delay: -.8s; }
.chip-3 .about-chip-float { animation-delay: -1.6s; }
.chip-4 .about-chip-float { animation-delay: -2.4s; }
.chip-5 .about-chip-float { animation-delay: -3.2s; }
.chip-6 .about-chip-float { animation-delay: -4s; }
.chip-7 .about-chip-float { animation-delay: -4.8s; }
.chip-8 .about-chip-float { animation-delay: -5.4s; }

/* ---------- Copy ---------- */
.about-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
}

.about-role-line {
  display: block;
  margin-top: 6px;
  font-size: .8em;
  white-space: nowrap;
  min-height: 1.2em;
}

.about-role {
  background: linear-gradient(90deg, var(--accent), #fff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-caret {
  display: inline-block;
  width: 3px;
  height: .95em;
  margin-left: 4px;
  vertical-align: -.1em;
  background: var(--accent);
  border-radius: 2px;
  animation: about-blink 1s steps(1) infinite;
}

.about-text {
  max-width: 520px;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
}
.about-text strong { color: #fff; font-weight: 700; }

/* RPA -> Low-code -> Agentic AI progression.
   Steps are as wide as their text and centred over it; the first step starts
   at the paragraph's left edge, the last ends at its right edge. The line
   between two dots = right half of a step + the .link + left half of the next. */
.about-track {
  --seg: .6s;
  display: flex;
  align-items: flex-start;
  max-width: 520px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.about-track .step {
  position: relative;
  flex: 0 1 auto;
  max-width: 34%;
  padding-top: 28px;
  text-align: center;
}
.about-track .link {
  position: relative;
  flex: 1 1 auto;
  min-width: 14px;
  height: 2px;
  margin-top: 7px;
}
/* line segments: track (grey) + fill (accent) */
.about-track .link,
.about-track .step:not(:first-child)::before,
.about-track .step:not(:last-of-type)::after {
  background-color: var(--line);
}
.about-track .step:not(:first-child)::before,
.about-track .step:not(:last-of-type)::after {
  content: '';
  position: absolute;
  top: 7px;
  height: 2px;
  width: 50%;
}
.about-track .step:not(:first-child)::before { left: 0; }
.about-track .step:not(:last-of-type)::after { left: 50%; }
.about-track .link,
.about-track .step::before,
.about-track .step::after {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: var(--fill, 100%) 100%;
  transition: background-size var(--seg) linear;
}

.about-track .node {
  position: absolute;
  top: 0;
  left: calc(50% - 8px);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid var(--accent);
  z-index: 1;
  transition: background .4s, box-shadow .4s, transform .5s var(--ease-out);
}
.about-track .step.is-now .node {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(161, 189, 229, .6);
  animation: about-pulse 2.2s ease-out infinite 4.6s;
}
.about-track strong {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  color: #fff;
}
.about-track small {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* Nav: highlight the section currently in view */
.nav-link.is-active { color: #a1bde5; }
/* AI CV keeps its pill look: white by default, accent blue while you're
   on the AI-CV view. Same spacing to its neighbours on both sides. */
.button-primary.nav-cv {
  margin-left: 0;
  background-color: #fff;
}
.button-primary.nav-cv:hover { background-color: rgba(255, 255, 255, .75); }
.button-primary.nav-cv.is-active,
.button-primary.nav-cv.is-active:hover { background-color: #a1bde5; }

/* Anchor targets clear the fixed 70px navbar */
#about, #ai-cv, #Footer { scroll-margin-top: 70px; }

/* ---------- Entrance choreography (JS only) ---------- */
.w-mod-js .about [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.w-mod-js .about.is-in [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}


.w-mod-js .about .about-chip {
  opacity: 0;
  scale: .6;
  transition: opacity .6s var(--ease-out), scale .7s cubic-bezier(.34, 1.56, .64, 1);
}
.w-mod-js .about.is-in .about-chip { opacity: 1; scale: 1; }
.w-mod-js .about.is-in .chip-1 { transition-delay: 1.0s; }
.w-mod-js .about.is-in .chip-2 { transition-delay: 1.1s; }
.w-mod-js .about.is-in .chip-3 { transition-delay: 1.2s; }
.w-mod-js .about.is-in .chip-4 { transition-delay: 1.3s; }
.w-mod-js .about.is-in .chip-5 { transition-delay: 1.4s; }
.w-mod-js .about.is-in .chip-6 { transition-delay: 1.5s; }
.w-mod-js .about.is-in .chip-7 { transition-delay: 1.6s; }
.w-mod-js .about.is-in .chip-8 { transition-delay: 1.7s; }

/* Line draws left to right, segment by segment; dots pop as it reaches them */
.w-mod-js .about .about-track .link,
.w-mod-js .about .about-track .step::before,
.w-mod-js .about .about-track .step::after { --fill: 0%; }
.w-mod-js .about.is-in .about-track .link,
.w-mod-js .about.is-in .about-track .step::before,
.w-mod-js .about.is-in .about-track .step::after { --fill: 100%; }
.w-mod-js .about.is-in .about-track .step:nth-child(1)::after  { transition-delay: .6s; }
.w-mod-js .about.is-in .about-track .link:nth-child(2)         { transition-delay: 1.2s; }
.w-mod-js .about.is-in .about-track .step:nth-child(3)::before { transition-delay: 1.8s; }
.w-mod-js .about.is-in .about-track .step:nth-child(3)::after  { transition-delay: 2.4s; }
.w-mod-js .about.is-in .about-track .link:nth-child(4)         { transition-delay: 3.0s; }
.w-mod-js .about.is-in .about-track .step:nth-child(5)::before { transition-delay: 3.6s; }
.w-mod-js .about .about-track .node { transform: scale(0); }
.w-mod-js .about.is-in .about-track .step:nth-child(1) .node { transform: scale(1); transition-delay: .5s; }
.w-mod-js .about.is-in .about-track .step:nth-child(3) .node { transform: scale(1); transition-delay: 2.3s; }
.w-mod-js .about.is-in .about-track .step:nth-child(5) .node { transform: scale(1); transition-delay: 4.1s; }

/* Looping animations pause while the section is off screen (class set in about.js) */
.about:not(.is-visible) *,
.about:not(.is-visible) *::before { animation-play-state: paused !important; }

/* ---------- Keyframes ---------- */
@keyframes about-spin { to { --about-angle: 360deg; } }
@keyframes about-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.5%, -1%); } }
@keyframes about-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes about-blink { 50% { opacity: 0; } }
@keyframes about-pulse {
  0% { box-shadow: 0 0 0 0 rgba(161, 189, 229, .6); }
  80%, 100% { box-shadow: 0 0 0 14px rgba(161, 189, 229, 0); }
}

/* ---------- Responsive ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .about { padding-left: 40px; padding-right: 40px; }
  .about-inner { gap: 56px; }
  .chip-1 { left: -6%; }
  .chip-5 { left: 0; }
}

@media (max-width: 991px) {
  .about { padding: 100px 24px 70px; min-height: 0; }
  .about-inner { grid-template-columns: 1fr; gap: 56px; max-width: 620px; }
  .about-visual { width: min(340px, 72vw); min-width: 0; }
  .about-chip-float { font-size: 12px; padding: 7px 12px; }
}

@media (max-width: 767px) {
  .chip-1 { left: -4%; }
  .chip-5 { left: -6%; }
  .chip-4 { left: 72%; }
  .about-text { font-size: 16px; }
}

@media (max-width: 479px) {
  .about-chip-float { font-size: 11px; padding: 6px 10px; gap: 6px; }
  .about-chip-float::before { width: 6px; height: 6px; }
  .about-track small { font-size: 11.5px; }
}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .about *, .about *::before, .about *::after {
    animation: none !important;
    transition: none !important;
  }
  .w-mod-js .about [data-reveal],
  .w-mod-js .about .about-chip {
    opacity: 1; transform: none; filter: none; scale: 1;
  }
  .w-mod-js .about .about-track .node { transform: none; }
  .about-caret { display: none; }
}

/* Screen-reader text (the animated role line is aria-hidden) */
.about-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}