/* =========================================================
   Markus Wcislo — homepage styles
   1. Tokens       2. Base & backdrop   3. Hero banner
   4. Profile      5. Cards             6. Share button & toast
   7. Footer       8. Motion            9. Responsive
   ========================================================= */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ---------- 1. Tokens ---------- */
:root {
  /* Colours */
  --bg: #050506;
  --bg-2: #0d0e10;
  --text: #f5f5f5;
  --muted: rgba(255,255,255,.58);
  --faint: rgba(255,255,255,.42);
  --accent: #818890;
  --accent-2: #d9dcdf;
  --border: rgba(255,255,255,.13);
  --border-strong: rgba(255,255,255,.18);
  --glass: linear-gradient(120deg, rgba(255,255,255,.085), rgba(255,255,255,.032));
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.12);
  --focus: rgba(217,220,223,.55);

  /* Layout */
  --max-width: 580px;
  --gutter: 34px;
  --radius: 22px;
  --page-top: clamp(300px, 40vh, 380px);
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Card sizing */
  --card-h: 76px;
  --icon: 46px;
  --icon-radius: 15px;

  /* Banner */
  --banner-image: url("../banner.webp");
  --banner-width: min(100vw, 1920px);
  --banner-size: cover;
  --banner-position-y: 55%;
  --banner-side-fade: 9%;
  --banner-fade-start: 36%;
  --banner-floor: #0b0c0e;      /* the photo's blacks are lifted to this tone */
  --banner-saturate: .82;       /* 1 = original colours */
  --hero-height: clamp(560px, 66vh, 760px);

  /* Eased ("scrim") fades — far smoother than a few linear stops. */
  --banner-mask-y: linear-gradient(to bottom,
    #000 0%,
    #000 var(--banner-fade-start),
    rgba(0,0,0,.987) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .0667),
    rgba(0,0,0,.951) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .1333),
    rgba(0,0,0,.896) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .2),
    rgba(0,0,0,.825) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .2667),
    rgba(0,0,0,.741) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .3333),
    rgba(0,0,0,.648) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .4),
    rgba(0,0,0,.550) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .4667),
    rgba(0,0,0,.450) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .5333),
    rgba(0,0,0,.352) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .6),
    rgba(0,0,0,.259) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .6667),
    rgba(0,0,0,.175) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .7333),
    rgba(0,0,0,.104) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .8),
    rgba(0,0,0,.049) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .8667),
    rgba(0,0,0,.013) calc(var(--banner-fade-start) + (100% - var(--banner-fade-start)) * .9333),
    transparent 100%);
  --banner-mask-x: linear-gradient(to right,
    transparent 0%,
    rgba(0,0,0,.05) calc(var(--banner-side-fade) * .2),
    rgba(0,0,0,.22) calc(var(--banner-side-fade) * .4),
    rgba(0,0,0,.50) calc(var(--banner-side-fade) * .6),
    rgba(0,0,0,.80) calc(var(--banner-side-fade) * .8),
    #000 var(--banner-side-fade),
    #000 calc(100% - var(--banner-side-fade)),
    rgba(0,0,0,.80) calc(100% - var(--banner-side-fade) * .8),
    rgba(0,0,0,.50) calc(100% - var(--banner-side-fade) * .6),
    rgba(0,0,0,.22) calc(100% - var(--banner-side-fade) * .4),
    rgba(0,0,0,.05) calc(100% - var(--banner-side-fade) * .2),
    transparent 100%);
}


/* ---------- 2. Base & backdrop ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: transparent; /* the fixed backdrop below shows through */
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient backdrop pinned to the viewport: it never stretches with the
   page length, so no gradient edge shows while scrolling. */
body::after {
  content: "";
  position: fixed;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% -12%, rgba(145,153,162,.13) 0%, rgba(145,153,162,.07) 35%, rgba(145,153,162,.025) 62%, transparent 85%),
    radial-gradient(ellipse 60% 45% at 0% 92%, rgba(255,255,255,.015) 0%, rgba(255,255,255,.006) 50%, transparent 80%),
    linear-gradient(180deg, var(--bg-2) 0%, #0a0b0d 40%, #070708 75%, var(--bg) 100%);
}

/* Fine film grain: hides gradient banding on dark screens. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: url("data:image/png;base64,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");
  background-size: 32px 32px;
  mix-blend-mode: soft-light;
  opacity: .10;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}


/* ---------- 3. Hero banner ----------
   One layer holds the photo and its readability shade, faded out on every
   side by an eased alpha mask. Nothing opaque is painted over the page, so
   there is no seam: the photo simply dissolves into the backdrop. */
.hero {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--hero-height);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: var(--banner-width);
  transform: translateX(-50%);
  background:
    /* soft shade so the name and tagline stay readable */
    radial-gradient(ellipse 70% 55% at 50% 78%, rgba(11,12,14,.42) 0%, rgba(11,12,14,.22) 45%, rgba(11,12,14,0) 100%),
    linear-gradient(180deg,
      rgba(11,12,14,.18) 0%,
      rgba(11,12,14,0) 18%,
      rgba(11,12,14,0) 42%,
      rgba(11,12,14,.10) 56%,
      rgba(11,12,14,.26) 70%,
      rgba(11,12,14,.44) 84%,
      rgba(11,12,14,.58) 100%),
    /* lifts pure blacks to the page tone, so dark rooftops can't outline the fade */
    linear-gradient(var(--banner-floor), var(--banner-floor)),
    var(--banner-image) center var(--banner-position-y) / var(--banner-size) no-repeat;
  background-blend-mode: normal, normal, lighten, normal;
  /* cinematic grade: a little calmer and cooler, to match the graphite palette */
  filter: saturate(var(--banner-saturate)) contrast(1.06) brightness(.9);
  -webkit-mask-image: var(--banner-mask-y), var(--banner-mask-x);
  -webkit-mask-composite: source-in;
  mask-image: var(--banner-mask-y), var(--banner-mask-x);
  mask-composite: intersect;
}

/* Ambient wash: a heavily blurred copy of the photo behind the sharp one,
   carrying the skyline's colour out to the screen edges on wide displays. */
.hero::after {
  content: "";
  position: absolute;
  inset: -60px -60px 0;
  z-index: 0;
  background: var(--banner-image) center var(--banner-position-y) / cover no-repeat;
  filter: blur(48px) saturate(.7) brightness(.55);
  opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,.7) 52%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.1) 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,.7) 52%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.1) 86%, transparent 100%);
}


/* ---------- Page ---------- */
.page {
  position: relative;
  z-index: 1;
  width: min(calc(100% - var(--gutter)), var(--max-width));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    calc(var(--page-top) + env(safe-area-inset-top, 0px))
    0
    calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}


/* ---------- 4. Profile ---------- */
.profile {
  margin-bottom: 28px;
  text-align: center;
}

.name {
  margin: 0;
  font-size: clamp(40px, 7vw, 76px);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 900;
  /* Seamless shimmer: the gradient repeats exactly twice across a tile twice
     the text's width, and the animation shifts it by one repeat, so the last
     frame matches the first and the loop never jumps. */
  background: linear-gradient(90deg, #ffffff 0%, #aeb4ba 25%, #ffffff 50%, #aeb4ba 75%, #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
}

.tagline {
  max-width: 420px;
  margin: 16px auto 0;
  color: rgba(255,255,255,.88);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
  text-wrap: balance;
}

.topics {
  max-width: 520px;
  margin: 12px auto 0;
  color: rgba(255,255,255,.55);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-wrap: balance;
}


/* ---------- 5. Cards ---------- */
.links {
  display: grid;
  gap: 12px;
}

.group { margin-top: 18px; }

.group-label {
  margin: 0 0 9px 4px;
  color: rgba(255,255,255,.40);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: var(--icon) minmax(0,1fr) 28px;
  align-items: center;
  gap: 12px;
  min-height: var(--card-h);
  padding: 13px 16px 13px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .22s var(--ease),
    border-color .22s ease,
    background-color .22s ease;
  touch-action: manipulation;
}

/* soft light along the bottom edge */
.card::after {
  content: "";
  position: absolute;
  inset: auto 8% -62% 8%;
  z-index: -1;
  height: 90px;
  border-radius: 50%;
  background: rgba(210,215,220,.42);
  filter: blur(32px);
  opacity: .055;
  pointer-events: none;
}

.card-icon {
  width: var(--icon);
  height: var(--icon);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--icon-radius);
  background: rgba(255,255,255,.07);
  color: #e3e6e8;
}

.card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

.card-icon .icon-youtube { width: 20px; height: 20px; }

.card-icon img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.icon-stroke {
  fill: none !important;
  stroke: currentColor;
}

.card-icon .icon-stroke { width: 20px; height: 20px; }

.card-text {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.card-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.card-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-arrow {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
  font-size: 17px;
}

/* Contact card: the mail link is stretched over the whole card, and the
   copy button sits above it — no nested interactive elements. */
.card-contact {
  grid-template-columns: var(--icon) minmax(0,1fr) 42px;
  padding-right: 13px;
}

.card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.card-link:focus-visible { outline: none; }
.card-contact:has(.card-link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.copy-btn {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.78);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
  touch-action: manipulation;
}

.copy-btn svg { width: 18px; height: 18px; }

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translate3d(0,-3px,0);
    background-color: rgba(255,255,255,.09);
    border-color: var(--border-strong);
  }

  .copy-btn:hover {
    transform: translate3d(0,-2px,0);
    background-color: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.16);
  }
}

.card:active { transform: scale(.985); transition-duration: .08s; }
.copy-btn:active { transform: scale(.94); transition-duration: .06s; }
.card-contact:has(.copy-btn:active) { transform: none; }

@media (hover: none) and (pointer: coarse) {
  .card:active {
    transform: scale(.972);
    background-color: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.17);
    transition-duration: .06s;
  }
}


/* ---------- 6. Share button & toast ---------- */
.share-btn {
  position: fixed;
  z-index: 30;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 17px;
  color: #fff;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  transition: transform .22s var(--ease), border-color .22s ease, background-color .22s ease;
  touch-action: manipulation;
}

.share-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .share-btn:hover {
    transform: translate3d(0,-3px,0);
    background-color: rgba(255,255,255,.09);
    border-color: var(--border-strong);
  }
}

.share-btn:active { transform: scale(.94); transition-duration: .06s; }

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  max-width: calc(100vw - 28px);
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #fff;
  background: rgba(12,12,16,.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%,10px,0);
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate3d(-50%,0,0);
}


/* ---------- 7. Footer ---------- */
.footer {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.7;
}

.footer a {
  display: inline-block;
  margin-top: 3px;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  transition: color .2s ease;
}

.footer a:hover { color: var(--accent-2); }


/* ---------- 8. Motion ---------- */
@keyframes shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.js .reveal {
  opacity: 0;
  translate: 0 12px;
}

.js .reveal.is-visible {
  animation: reveal .44s var(--ease) forwards;
}

@keyframes reveal {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    translate: 0 0;
    animation: none !important;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---------- 9. Responsive ---------- */

/* Ultra-wide: the photo stops at 1920px, so feather its sides longer and
   let the ambient wash carry on beyond it. */
@media (min-width: 1921px) {
  :root { --banner-side-fade: 20%; }
}

/* Phones */
@media (max-width: 520px) {
  :root {
    --gutter: 24px;
    --page-top: clamp(262px, 33svh, 296px);
    --radius: 19px;
    --card-h: 68px;
    --icon: 42px;
    --icon-radius: 14px;

    --banner-width: 100vw;
    --banner-size: 132% auto;   /* zoom into the skyline instead of empty sky */
    --banner-position-y: 88%;
    --banner-side-fade: 5%;
    --banner-fade-start: 40%;
    --hero-height: clamp(400px, 52svh, 460px);
  }

  body { touch-action: pan-y; }
  body::before { opacity: .08; }

  /* No ambient wash needed: the photo already spans the screen. */
  .hero::after { content: none; }

  .page { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }

  .profile { margin-bottom: 22px; }

  .name {
    font-size: clamp(34px, 10.5vw, 46px);
    line-height: .98;
    text-wrap: balance;
  }

  .tagline {
    max-width: 94%;
    margin-top: 13px;
    font-size: 16px;
  }

  .topics {
    max-width: 96%;
    margin-top: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    letter-spacing: .13em;
  }

  .links { gap: 10px; }
  .group { margin-top: 16px; }
  .group-label { margin-bottom: 8px; }

  .card {
    grid-template-columns: var(--icon) minmax(0,1fr) 26px;
    gap: 10px;
    padding: 11px 13px 11px 11px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .card-contact {
    grid-template-columns: var(--icon) minmax(0,1fr) 40px;
    padding-right: 11px;
  }

  .card-title { font-size: 14px; }
  .card-sub { font-size: 12px; }

  .card-arrow {
    width: 26px;
    height: 26px;
    font-size: 16px;
  }

  .copy-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .share-btn {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 48px;
    height: 48px;
    border-radius: 15px;
  }

  .share-btn svg { width: 19px; height: 19px; }

  .toast { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 9px 13px; }

  .footer { margin-top: 26px; padding-top: 16px; }
}

/* Extra-narrow phones */
@media (max-width: 360px) {
  :root {
    --gutter: 20px;
    --page-top: 258px;
    --card-h: 64px;
    --icon: 40px;
    --hero-height: 410px;
  }

  .name { font-size: clamp(31px, 10vw, 38px); }

  .card {
    grid-template-columns: var(--icon) minmax(0,1fr) 24px;
    padding-left: 10px;
    padding-right: 11px;
  }

  .share-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .share-btn svg { width: 18px; height: 18px; }
}

/* Phones held sideways: keep the hero from eating the whole screen. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  :root {
    --gutter: 30px;
    --page-top: 150px;
    --banner-width: min(100vw, 760px);
    --hero-height: 250px;
  }

  .profile { margin-bottom: 20px; }

  .share-btn {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 46px;
    height: 46px;
  }
}