/* =========================================================
   ABOUT — Split layout + single-trace SVG edge with inner glow
   One moving segment; seamless loop; Firefox-safe dash math.
========================================================= */

#about{
  /* Theme tokens */
  --ab-text:   #e9eef7;
  --ab-dim:    #a7b4d6;
  --ab-border: rgba(255,255,255,.16);

  /* Cards */
  --ab-card-base: #16161d;
  --ab-shadow: 0 26px 70px rgba(0,0,0,.46);

  /* Edge tracer (avoid calc() inside dasharray for Firefox) */
  --ab-edge-color: #44ccff;   /* default; overridden per-card */
  --ab-edge-width: 2px;       /* core tracer thickness */
  --ab-seg-len: 84;           /* visible segment length (0..1000) */
  --ab-gap-len: 916;          /* MUST be 1000 - seg length */
  --ab-speed: 8s;             /* lap time (lower = faster) */

  /* Inner glow (path behind the core stroke) */
  --ab-glow-width: 13px;      /* ~6.5× core if edge-width is 2px */
  --ab-glow-blur:  14px;
  --ab-glow-alpha: 0.38;

  /* BG flourishes */
  --ab-carbon: rgba(255,255,255,.04);

  position: relative;
  isolation: isolate;
  padding: clamp(56px, 8vw, 120px) 0;
  color: var(--ab-text);
  overflow: clip;
}

@keyframes ab-aurora{
  0%{   transform: translate3d(-1%,-1%,0) scale(1.02); }
  50%{  transform: translate3d( 1%, 1%,0) scale(1.05); }
  100%{ transform: translate3d(-1%,-1%,0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  #about .ab-bg{ animation: none; }
}

/* ------- Layout ------- */
#about .ab-container{
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px);
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 980px){
  #about .ab-container{ grid-template-columns: 1fr; }
}

/* Heading */
#about .ab-title{
  margin: 0 0 10px;
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.05; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #9feaff, #e6fff6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent;
  text-shadow: 0 6px 26px rgba(0,0,0,.35);
}
#about .ab-tagline{
  margin: 0 0 18px;
  color: var(--ab-dim);
  font-weight: 700;
  font-size: clamp(16px, 2.6vw, 22px);
}

/* ------- Left column (photo-backed panel) ------- */
#about .ab-main{
  position: relative; border-radius: 18px; overflow: clip;
  padding: clamp(18px, 3vw, 26px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  /* set your image via CSS var or inline: --ab-photo-url: url('/path.jpg') */
}
#about .ab-main .ab-photo{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ab-photo-url, url('/images/edinburgh.jpg'));
  background-position: var(--ab-photo-pos, center);
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(105%) contrast(104%);
}

/* scrim for readability over the photo */
#about .ab-main::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(8,12,22,.50), rgba(8,12,22,.75)),
    linear-gradient(180deg, rgba(8,12,22,.55), rgba(8,12,22,.82));
  pointer-events: none;
}
/* elevate content above the photo */
#about .ab-main > *{ position: relative; z-index: 1; }

/* Left copy */
#about .ab-copy{ max-width: 68ch; }
#about .ab-copy p{
  color: #eef3ff; text-shadow: 0 1px 2px rgba(0,0,0,.55);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.78; letter-spacing: .1px;
  margin: 0 0 14px; text-wrap: pretty;
}
#about .ab-copy p strong{ color: #f6f9ff; }
#about .ab-tagline{ color: #cfe0ff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }

/* Focus chips under the left column */
#about .ab-chips{
  margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0; list-style: none;
}
#about .ab-chips li{
  font: 800 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #e6f9ff; padding: 8px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,229,255,.18), rgba(0,229,255,.09));
  border: 1px solid rgba(0,229,255,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ------- Right column ------- */
#about .ab-side{ display: grid; gap: clamp(16px, 2.4vw, 22px); }

/* ------- Cards ------- */
#about .ab-card{
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--ab-card-base);
  border: 1px solid rgba(255,255,255,.08);
  padding: clamp(18px, 2.6vw, 26px);
  box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.02);
  isolation: isolate;
}
#about .ab-card__title{
  margin: 0 0 10px;
  font: 800 19px/1.2 "Kumbh Sans", system-ui, sans-serif;
  letter-spacing: .2px; color: #eef4ff; text-wrap: balance;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
#about .ab-card__body{
  margin: 0; color: #cfd6ea;
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  line-height: 1.72; letter-spacing: .1px; white-space: pre-line;
}
#about .ab-card__note{
  margin: 2px 0 12px; color: #9fb0c9;
  font-size: 12.5px; letter-spacing: .2px; opacity: .9;
}
/* Simple green highlight (no background block) */
#about .ink{ color: #60ffa8; font-weight: 800; }

/* ------- SVG edge tracer (single stroke + inner glow) ------- */
#about .ab-edge{ position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#about .ab-edge svg{ width: 100%; height: 100%; display: block; }
#about .ab-edge path{ fill: none; vector-effect: non-scaling-stroke; }

/* Glow path (behind core) */
#about .ab-edge__glow{
  stroke: var(--ab-edge-color);
  stroke-width: var(--ab-glow-width);
  stroke-linecap: butt; stroke-linejoin: round;
  stroke-dasharray: var(--ab-seg-len) var(--ab-gap-len);
  stroke-dashoffset: 0;
  opacity: var(--ab-glow-alpha); filter: blur(var(--ab-glow-blur));
  mix-blend-mode: screen;
  animation: ab-dash-move var(--ab-speed) linear infinite;
  paint-order: stroke;
}
/* Core stroke */
#about .ab-edge__stroke{
  stroke: var(--ab-edge-color);
  stroke-width: var(--ab-edge-width);
  stroke-linecap: butt; stroke-linejoin: round;
  stroke-dasharray: var(--ab-seg-len) var(--ab-gap-len);
  stroke-dashoffset: 0;
  animation: ab-dash-move var(--ab-speed) linear infinite;
  will-change: stroke-dashoffset;
}
@keyframes ab-dash-move{ to{ stroke-dashoffset: -1000; } }

/* Per-card accent colours */
#about .ab-card--mres  { --ab-edge-color: #60ffa8; } /* mint */
#about .ab-card--tools { --ab-edge-color: #44ccff; } /* cyan */

@media (prefers-reduced-motion: reduce){
  #about .ab-edge__stroke,
  #about .ab-edge__glow{ animation: none; }
}

/* ------- Tools card: clean definition list with colour accents ------- */
#about .stack-def{
  margin: 0; padding: 0; display: grid; gap: 12px;
}
#about .stack-def .row{
  position: relative;
  display: grid;
  grid-template-columns: clamp(120px, 28%, 200px) 1fr;
  gap: 8px 14px; align-items: baseline;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--row-accent, #44ccff) 10%, transparent),
      transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
/* Left accent bar */
#about .stack-def .row::before{
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--row-accent, #44ccff); opacity: .9;
}
/* First row has no top border spacing effect */
#about .stack-def .row:first-child{ }

/* Labels */
#about .stack-def dt{
  margin: 0; color: color-mix(in oklab, var(--row-accent, #44ccff) 80%, #e9f2ff);
  font-weight: 800; letter-spacing: .2px; line-height: 1.25;
  white-space: normal; word-break: break-word;
}
/* Items */
#about .stack-def dd{
  margin: 0; color: #d4def3; line-height: 1.6;
  display: flex; flex-wrap: wrap; gap: 6px 10px; min-width: 0;
}
/* “•” separators */
#about .stack-def dd span + span::before{
  content: "•"; margin-right: 10px; color: var(--row-accent, #44ccff); opacity: .75;
}
/* Subtle note after Web */
#about .stack-def .muted{
  color: color-mix(in oklab, var(--row-accent, #44ccff) 55%, #9fb0c9);
  font-size: 12.5px; letter-spacing: .2px; margin-left: 8px; white-space: nowrap;
}
@media (max-width: 560px){
  #about .stack-def .muted{ display: block; margin-left: 0; margin-top: 2px; }
}

/* Per-row accents (order: Web, Mobile, Game Dev, Data) */
#about .ab-card--tools .stack-def .row:nth-child(1){ --row-accent: #44ccff; } /* Web: cyan */
#about .ab-card--tools .stack-def .row:nth-child(2){ --row-accent: #64d2ff; } /* Mobile: light blue */
#about .ab-card--tools .stack-def .row:nth-child(3){ --row-accent: #ffd166; } /* Game Dev: warm gold */
#about .ab-card--tools .stack-def .row:nth-child(4){ --row-accent: #60ffa8; } /* Data: mint */

/* Mobile: stack label above content */
@media (max-width: 720px){
  #about .stack-def .row{ grid-template-columns: 1fr; gap: 6px; }
  #about .stack-def .row::before{ top: 6px; bottom: 6px; }
}



#about{
  background-image:url('/images/edinburgh.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}