/* swoj.net - modern stylesheet with deep-field border */

:root {
  --bg: #0b1220;
  --surface: #111a2e;
  --surface-2: #17233d;
  --border: #25324d;
  --text: #e9eef7;
  --muted: #9aa8c0;
  --accent: #4c9bff;
  --accent-ink: #06142b;
  --radius: 16px;
  --frame: 40px;
  --sky: url("/images/Region_of_Hubble_Ultra_Deep_Field.jpg");
  --script: "Dancing Script", "Brush Script MT", cursive;
  --display: "Outfit", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #eaf1fc;
  --border: #d6deec;
  --text: #0f1b33;
  --muted: #55647f;
  --accent: #0a55c2;
  --accent-ink: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1080px, 100% - 2 * var(--frame) - 2rem); margin-inline: auto; }

/* Deep-field photo shown as a border down the left and right sides */
.star-frame {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  padding: 0 var(--frame);
  background: #02050c var(--sky) center / cover no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .8rem 0; }
.brand { font: 700 1.9rem/1 var(--script); color: var(--text); text-decoration: none; margin-right: auto; }
.brand:hover { text-decoration: none; color: var(--text); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem; }
.site-nav a { display: block; padding: .4rem .8rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.theme-btn { font: 500 .875rem var(--sans); color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; }
.theme-btn:hover { background: var(--surface-2); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: start; padding: 4.5rem 0 3.5rem; }
.hero h1 { font: 600 clamp(2.2rem, 5.2vw, 3.7rem)/1.08 var(--display); letter-spacing: -.02em; margin: 0 0 1.25rem; text-wrap: balance; }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 34rem; margin: 0 0 2rem; }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn { display: inline-block; padding: .75rem 1.4rem; border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.portrait { margin: 0; }
.portrait img { display: block; width: 100%; height: auto; border-radius: 28px; border: 1px solid var(--border); }

/* ---------- Sections ---------- */
section { padding: 3rem 0; border-top: 1px solid var(--border); }
h2 { font: 600 1.75rem/1.2 var(--display); letter-spacing: -.01em; margin: 0 0 1.5rem; }
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; }
.about p { margin: 0 0 1.1rem; max-width: 62ch; }
.certs { list-style: none; margin: 0; padding: 0; }
.certs li { padding: .9rem 0; border-bottom: 1px solid var(--border); font-weight: 600; }
.certs li:first-child { padding-top: 0; }
.certs li:last-child { border-bottom: 0; }
.certs small { display: block; color: var(--muted); font-weight: 400; }

.projects { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; }
.feature { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; }
.feature h3 { font: 600 1.6rem/1.2 var(--display); margin: 0 0 .75rem; }
.feature p { color: var(--muted); margin: 0 0 1.25rem; }
.feature .tag { display: inline-block; margin-bottom: 1rem; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: .85rem; font-weight: 500; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { border-bottom: 1px solid var(--border); }
.rows li:first-child { border-top: 1px solid var(--border); }
.rows a { display: block; padding: 1.1rem .25rem; text-decoration: none; color: var(--text); }
.rows a:hover { background: var(--surface); }
.rows strong { display: block; font: 600 1.1rem var(--display); }
.rows span { color: var(--muted); font-size: .95rem; }

.hobbies { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.hobbies h3 { font: 600 1.1rem var(--display); margin: 0 0 .35rem; }
.hobbies p { margin: 0; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 2rem 0; color: var(--muted); font-size: .95rem; }
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem 2rem; }
.foot > :last-child { text-align: right; }
.foot p { margin: 0; }
.counter { font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  :root { --frame: 22px; }
  .hero, .about, .projects { grid-template-columns: 1fr; }
  .hero { padding-top: 3rem; gap: 2.5rem; }
  .about { gap: 2.5rem; }
  .brand { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ---------- Bouncing TARDIS in the project card ---------- */
.feature { display: flex; align-items: center; gap: 2rem; }
.feature-text { min-width: 0; }
.tardis-wrap { flex: none; width: 96px; padding-top: 28px; display: grid; justify-items: center; }
.tardis { width: 80px; animation: bounce 1.5s infinite; }
.t-lamp { width: 12px; height: 15px; margin: 0 auto; border-radius: 4px 4px 1px 1px; background: #fff6c2; box-shadow: 0 0 14px 5px rgba(255, 236, 150, .6); animation: lamp 2.2s ease-in-out infinite; }
.t-roof { height: 5px; margin: 0 auto; background: #00294f; border-radius: 2px 2px 0 0; }
.t-roof.a { width: 70%; }
.t-roof.b { width: 84%; }
.t-sign { height: 14px; background: #00294f; border: 1px solid #001d3a; color: #e8f1ff; font: 600 5px/12px var(--display); letter-spacing: .12em; text-align: center; }
.t-body { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; height: 104px; background: #003b6f; border-inline: 3px solid #00294f; }
.t-body i { border-radius: 1px; background: #00508f; box-shadow: inset 0 0 0 1px #00294f; }
.t-body i.glass { background: linear-gradient(#bfe3ff, #7fb8ec); }
.t-base { height: 6px; margin-inline: -4px; background: #00294f; border-radius: 1px; }
.t-shadow { width: 70px; height: 8px; margin-top: 4px; border-radius: 50%; background: rgba(0, 0, 0, .35); animation: shadow 1.5s infinite; }
:root[data-theme="light"] .t-shadow { background: rgba(15, 27, 51, .22); }

@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  50%      { transform: translateY(-24px); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
}
@keyframes shadow {
  0%, 100% { transform: scale(1);  opacity: 1; animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  50%      { transform: scale(.6); opacity: .5; animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
}
@keyframes lamp { 50% { opacity: .55; box-shadow: 0 0 7px 2px rgba(255, 236, 150, .4); } }

@media (max-width: 820px) { .feature { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .tardis, .t-shadow, .t-lamp { animation: none; } }

/* ---------- Click to spin away and back ---------- */
.tardis-wrap { cursor: pointer; }
.tardis.vanish { animation: vanish 2.4s ease-in-out; }
.tardis.vanish + .t-shadow { animation: shadow-gone 2.4s ease-in-out; }
@keyframes vanish {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
  20%      { opacity: .3; transform: scale(1.05) rotate(90deg); }
  45%      { opacity: 0; transform: scale(.2) rotate(540deg); filter: blur(4px); }
  60%      { opacity: 0; transform: scale(.2) rotate(720deg); }
  85%      { opacity: .8; transform: scale(1.04) rotate(1080deg); }
}
@keyframes shadow-gone {
  0%, 100% { opacity: 1; }
  20%, 70% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tardis.vanish, .tardis.vanish + .t-shadow { animation: none; } }

/* ---------- Light mode: cloud photo on the side borders ---------- */
:root[data-theme="light"] .star-frame {
  background:
    url("/images/clouds.jpg") center / cover no-repeat,
    linear-gradient(#78b4ee, #cfe5fa);
}


/* ---------- Weather box ---------- */
.hero-side { display: grid; gap: 1rem; }
.weather { display: flex; align-items: center; justify-content: center; gap: .9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem 1rem; }
.w-temp { font: 600 2.1rem/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.w-info strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.15; margin: 0; }
.w-info span { display: block; color: var(--muted); font-size: .8rem; line-height: 1.15; margin: 0; }

/* ---------- Random quote box ---------- */
.quote-box { position: relative; margin: 4rem 0 0; max-width: 34rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.4rem; }
.quote-box blockquote { margin: 0; font: italic 500 1.05rem/1.55 var(--display); }
.quote-by { margin-top: .5rem; color: var(--muted); font-size: .95rem; text-align: right; }


/* ---------- Content pages (comedy.php) ---------- */
.page { padding: 3.5rem 0 2.5rem; }
.bubble { max-width: 52rem; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 24px; padding: 2.75rem 2.5rem; }
.page-title { font: 700 clamp(1.5rem, 4.5vw, 2.25rem)/1.4 "Courier New", Courier, monospace; text-align: center; margin: 0 0 2.25rem; }
.top-list { margin: 0; padding-left: 1.4rem; }
.top-list li { margin: 0 0 .85rem; }
.bubble hr { margin: 2rem 0 1.25rem; border: 0; border-top: 1px solid var(--border); }
.bubble .mail { margin: 0; }
.mail-link { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none; }
.mail-link:hover { text-decoration: underline; }

@media (max-width: 820px) { .bubble { padding: 1.75rem 1.4rem; border-radius: 20px; } }

.music-row { display: flex; justify-content: flex-end; margin: -.75rem 0 1rem; }
.music-btn { font: 500 .875rem var(--sans); color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; }
.music-btn:hover { background: var(--surface); }

/* ---------- Links page ---------- */
.bubble.wide { max-width: 64rem; }
.page-title.sans { font-family: var(--display); }
.link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem 2.5rem; }
.group-title { font: 600 1rem/1.3 var(--display); text-align: center; margin: 0 0 1rem; padding: .5rem 1rem; background: color-mix(in srgb, var(--accent) 24%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 999px; letter-spacing: 0; }
.link-group ul { list-style: none; margin: 0; padding: 0 .5rem; }
.link-group li { margin: 0 0 .7rem; }

@media (max-width: 900px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .link-grid { grid-template-columns: 1fr; } }

/* ---------- Antivirus & malware dashboard ---------- */
.av-intro { text-align: center; color: var(--muted); max-width: 46rem; margin: -1rem auto 1.5rem; }
.av-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.av-status { color: var(--muted); font-size: .9rem; }
.av-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.av-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.av-card.full { grid-column: 1 / -1; }
.av-h { font: 600 1.15rem/1.3 var(--display); margin: 0 0 1rem; }
.av-sub { font: 600 .95rem/1.3 var(--display); margin: 1.1rem 0 .4rem; color: var(--muted); }
.av-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.av-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: .6rem .8rem; }
.av-stat b { display: block; font: 600 1.5rem/1.1 var(--display); }
.av-stat span { color: var(--muted); font-size: .8rem; }
.av-list { list-style: none; margin: 0; padding: 0; }
.av-list li { padding: .65rem 0; border-top: 1px solid var(--border); font-size: .95rem; overflow-wrap: anywhere; }
.av-list li:first-child { border-top: 0; }
.av-list small { display: block; color: var(--muted); }
.av-pill { display: inline-block; padding: .4rem 1.2rem; border-radius: 999px; font: 600 1.3rem/1.2 var(--display); color: #fff; }
.av-green { background: #1f8a4c; }
.av-yellow { background: #e0b100; color: #1d1400; }
.av-orange { background: #d9650b; }
.av-red { background: #c62828; }
.av-desc { margin: .9rem 0 0; }
.av-tag { display: inline-block; margin-left: .5rem; padding: .05rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #c62828; color: #fff; }
.av-bar-row { display: grid; grid-template-columns: 8rem 1fr 3.5rem; gap: .5rem; align-items: center; margin-top: .45rem; font-size: .85rem; }
.av-first { margin: 0 0 .5rem; color: var(--muted); font-size: .9rem; }
.av-track { height: .6rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.av-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.av-count { text-align: right; color: var(--muted); }
.av-note { color: var(--muted); font-size: .85rem; margin: 1rem 0 0; }

@media (max-width: 820px) { .av-grid { grid-template-columns: 1fr; } }

/* ---------- "Powered by" host badge ---------- */
.host-badge { display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .85rem; text-decoration: none; }
.host-badge:hover { color: var(--text); }
.host-badge strong { color: var(--text); font: 700 1rem var(--display); letter-spacing: .02em; }
.host-badge img { display: block; height: 22px; width: auto; background: #fff; padding: 4px 10px; border-radius: 8px; }

@media (max-width: 820px) {
  .foot { grid-template-columns: 1fr; }
  .foot > :last-child { text-align: left; }
}