/* =========================================================
   Virgil C. portfolio - shared styles (4 pages)
   Each page sets its own accent colour through body.page-*
   ========================================================= */
:root{
  --bg: #05080f;
  --ink: #eef1fb;
  --muted: #a3adc9;
  --accent: #1f70c1;
  --accent-2: #6fb1ff;
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

body.page-home      { --accent:#1f70c1; --accent-2:#6fb1ff; --bg:#040a16; }
body.page-about     { --accent:#12b5a6; --accent-2:#6ff2e2; --bg:#03100f; }
body.page-experience{ --accent:#a259ff; --accent-2:#d2b0ff; --bg:#0b0616; }
body.page-connect   { --accent:#ff7a1a; --accent-2:#ffc08a; --bg:#140a04; }

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  animation:pageIn .6s ease both;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

@keyframes pageIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- IBM-style striped background word ---------- */
.stripe-bg{
  position:fixed; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:.55;
}
.stripe-bg svg{ width:100%; height:auto; max-height:100%; }
.stripe-bg::after{               /* soft vignette so the content stays readable */
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, var(--bg) 100%);
}

/* ---------- Layout ---------- */
.wrap{
  position:relative; z-index:1;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  padding:0 16px;
}
.nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  padding:16px 0 8px;
}
.nav a{
  padding:9px 16px;
  border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius:999px;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  background:rgba(0,0,0,.35);
  transition:background .2s, transform .2s, color .2s;
}
.nav a:hover, .nav a:focus-visible{ background:var(--accent); color:#fff; transform:translateY(-2px); outline:none; }
.nav a[aria-current="page"]{ background:var(--accent); color:#fff; }

main{
  flex:1;
  width:100%; max-width:980px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:24px 0 40px;
  gap:22px;
}
h1, h2{ font-family:var(--font-display); margin:0; line-height:1.1; }
h1{ font-size:clamp(2rem, 7vw, 3.6rem); }
h2{ font-size:clamp(1.8rem, 6vw, 3rem); }
.accent-text{
  background:linear-gradient(100deg, var(--accent-2), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.footer{ position:relative; z-index:1; text-align:center; color:var(--muted); font-size:.8rem; padding:0 16px 16px; }

.btn{
  display:inline-block;
  padding:13px 24px;
  border-radius:12px;
  font-family:var(--font-display); font-weight:700;
  background:var(--accent); color:#fff;
  border:2px solid var(--accent);
  transition:transform .2s, background .2s, color .2s;
}
.btn:hover, .btn:focus-visible{ transform:translateY(-2px); background:transparent; color:var(--accent-2); outline:none; }
.btn--ghost{ background:rgba(0,0,0,.35); color:var(--ink); }

/* ---------- Home ---------- */
.portrait{
  width:min(300px, 72vw); aspect-ratio:1; border-radius:50%;
  padding:6px;
  background:conic-gradient(var(--accent), var(--accent-2), var(--accent));
  box-shadow:0 0 40px color-mix(in srgb, var(--accent) 55%, transparent);
}
.portrait img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------- About ---------- */
.about-text{
  max-width:720px; font-size:clamp(1rem, 2.6vw, 1.15rem); color:var(--ink);
  background:rgba(0,0,0,.45); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:16px; padding:22px 22px; text-align:left;
}
.about-text p{ margin:0 0 .9em; }
.about-text p:last-child{ margin-bottom:0; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0; padding:0; list-style:none; }
.tags li{
  padding:6px 14px; border-radius:999px; font-size:.85rem; font-weight:600;
  border:1px solid var(--accent); color:var(--accent-2); background:rgba(0,0,0,.35);
}

/* ---------- Animated LinkedIn link (about + connect) ---------- */
.linkedin-card{
  background:#f4f7fb; border-radius:18px; padding:14px 22px 18px;
  box-shadow:0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
}
.linkedin-link{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
}

.linkedin-link img{
    width:220px;
    margin:-38px 0 -36px;   /* the PNG has transparent padding above/below the logo */
    animation:pulse 1.2s infinite;
}

.linkedin-link span{
    color:#0A66C2;
    font-weight:700;
    font-family:Segoe UI,sans-serif;
    margin-top:10px;
    animation:fadeText 1.2s infinite;
}
.linkedin-link span small{ display:block; font-size:.9rem; font-weight:600; }

@keyframes pulse{
    0%,100%{
        transform:scale(1);
    }
    30%{
        transform:scale(1.08);
    }
}

@keyframes fadeText{
    0%,40%{
        opacity:0;
    }
    60%,100%{
        opacity:1;
    }
}

/* ---------- Experience (slideshow) ---------- */
.stage{ width:100%; max-width:900px; width:min(100%, calc((100vh - 380px) * 1.95)); min-width:min(100%, 320px); }
@supports (height:100dvh){ .stage{ width:min(100%, calc((100dvh - 380px) * 1.95)); min-width:min(100%, 320px); } }
.frame{
  position:relative; width:100%; aspect-ratio:16/8.2;
  border:3px solid var(--accent); border-radius:14px; overflow:hidden;
  background:#000;
  box-shadow:0 0 0 0 var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 50%, transparent);
}
.frame.beat{ animation:beat .26s ease-out; }
@keyframes beat{
  0%{ box-shadow:0 0 0 0 var(--accent-2), 0 0 60px var(--accent); }
  100%{ box-shadow:0 0 0 14px transparent, 0 0 34px color-mix(in srgb, var(--accent) 50%, transparent); }
}
.slide{
  position:absolute; inset:0; margin:0;
  opacity:0;
  transition:opacity .5s linear;            /* 0.5 s crossfade, like a video cut */
}
.slide.is-prev{ opacity:1; z-index:1; transition:none; }   /* old picture stays until the new one is fully in */
.slide.is-active{ opacity:1; z-index:2; }
.slide img{ width:100%; height:100%; object-fit:contain; }
.slide figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px;
  background:linear-gradient(transparent, rgba(0,0,0,.8));
  font-family:var(--font-display); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  text-align:left; font-size:.95rem;
}
.hud{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.leds{ display:flex; gap:4px; }
.leds span{ width:10px; height:10px; border-radius:2px; background:rgba(255,255,255,.15); }
.leds span:nth-child(4n+1){ background:rgba(255,255,255,.28); }
.leds span.on{ background:var(--accent-2); box-shadow:0 0 8px var(--accent); }
.dots{ display:flex; gap:7px; }
.dots span{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.2); transition:background .3s, transform .3s; }
.dots span.on{ background:var(--accent); transform:scale(1.35); }
.sound-btn{
  font:inherit; font-family:var(--font-display); font-weight:700; cursor:pointer;
  padding:9px 18px; border-radius:999px; color:#fff; background:var(--accent);
  border:2px solid var(--accent);
}
.sound-btn:hover, .sound-btn:focus-visible{ background:transparent; color:var(--accent-2); outline:none; }
.hint{ color:var(--muted); font-size:.85rem; margin:0; min-height:1.3em; }

/* ---------- Experience: numbers box ---------- */
.stats{
  width:100%; max-width:900px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px;
  padding:18px; border-radius:16px;
  background:rgba(0,0,0,.5);
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 0 28px color-mix(in srgb, var(--accent) 25%, transparent);
}
.stat{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:14px 8px; border-radius:12px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
}
.stat strong{
  font-family:var(--font-display); font-size:clamp(1.5rem, 5vw, 2rem); line-height:1.1;
  background:linear-gradient(100deg, var(--accent-2), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{ color:var(--muted); font-size:.85rem; font-weight:600; }
.stats__note{ grid-column:1 / -1; margin:2px 0 0; color:var(--ink); font-weight:600; }
@media (max-width:520px){ .stats{ grid-template-columns:1fr 1fr; } .stat:nth-of-type(5){ grid-column:1 / -1; } }

/* ---------- Connect ---------- */
.contact-list{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:440px; }
.contact-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:14px; text-align:left;
  background:rgba(0,0,0,.5); border:1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  font-weight:600; transition:transform .2s, background .2s;
  word-break:break-word;
}
.contact-item:hover, .contact-item:focus-visible{ transform:translateY(-2px); background:color-mix(in srgb, var(--accent) 30%, #000); outline:none; }
.contact-item svg{ width:26px; height:26px; flex:none; fill:var(--accent-2); }

@media (prefers-reduced-motion: reduce){
  body{ animation:none; }
  .slide{ transition:opacity .2s !important; }
  .frame.beat{ animation:none; }
}