/* Lightweight skeuomorphic "liquid glass" vCard styles */
:root{
  --bg: #0b0f14;
  --ink: #0d1b2a;
  --ink-soft: #2a3a4b;
  --card-glass: rgba(255,255,255,0.10);
  --card-stroke: rgba(255,255,255,0.35);
  --card-highlight: rgba(255,255,255,0.6);
  --shadow: rgba(9,14,22,0.55);
  --shadow-soft: rgba(9,14,22,0.35);
  --accent: #3ec5ff;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ color-scheme: dark light; }
body{
  margin:0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
  color: #e9f0f6;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page{
  min-height: 100dvh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}

/* Background with image + subtle vignette and grain */
.bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 70% 20%, rgba(62,197,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(255,180,90,0.12), transparent 60%),
    url("assets/background-tirol.jpg") center/cover no-repeat fixed;
  filter: saturate(1.05) contrast(1.02);
}
.bg::after{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,0.35), transparent 60%),
    linear-gradient(180deg, rgba(7,11,16,0.35), rgba(7,11,16,0.35));
  pointer-events:none;
}

/* Glass card */
.card{
  position:relative;
  width:min(900px, 92vw);
  padding: clamp(1.2rem, 2.8vw, 2rem);
  border-radius: 22px;
  background: linear-gradient( to bottom right,
              rgba(255,255,255,0.14), rgba(255,255,255,0.06) )
              padding-box;
  border: 1px solid var(--card-stroke);
  box-shadow:
    0 10px 30px var(--shadow),
    inset 0 1px 0 var(--card-highlight),
    inset 0 -0.5px 0 rgba(255,255,255,0.25);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  /* Grid layout kicks in on wider screens via media queries */
}

/* Liquid highlight streak */
.card::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: conic-gradient(from 210deg at 20% 10%, rgba(255,255,255,0.40), rgba(255,255,255,0.0) 35%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0.0) 85%);
  filter: blur(22px);
  opacity: .55;
  pointer-events:none;
  mix-blend-mode: soft-light;
}

.avatar-wrap{
  display:flex; justify-content:center;
}
.avatar{
  width: clamp(140px, 22vw, 240px);
  height: clamp(140px, 22vw, 240px);
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 12px 24px var(--shadow-soft),
    inset 0 1px 1.25px rgba(255,255,255,0.6);
  background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.0));
}

.name{
  margin: 1.1rem 0 0.35rem;
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  text-align:center;
  letter-spacing: 0.2px;
}

.tagline{
  margin: 0.25rem auto 0.9rem;
  text-align:center;
  color: #d6e3ed;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  max-width: 40ch;
}

.bio{
  margin: 0.8rem auto 1.2rem;
  max-width: 55ch;
  color: #e9f1f7;
  text-wrap: pretty;
  text-align: center;
}
.bio p{ margin: 0 0 0.9rem; }
.bio p:last-child{ margin-bottom: 0; }

.social{
  margin-top: 1rem;
  display:flex; gap: .6rem;
  justify-content:center;
}
.social-link{
  display:grid; place-items:center;
  width: 44px; height:44px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 6px 14px var(--shadow-soft),
    inset 0 1px 0 rgba(255,255,255,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.95);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.social-link:hover{
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.7);
  color: #ffffff;
}
.social-link:active{ transform: translateY(0); }

/* Icon masks for CSS-colored SVGs */
.icon{ width:24px; height:24px; display:block; background-color: currentColor; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.2)); }
.icon, .icon::before{ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position:center; -webkit-mask-size: contain; mask-size:contain; }
.icon-linkedin{ -webkit-mask-image: url("assets/brand-linkedin.svg"); mask-image: url("assets/brand-linkedin.svg"); }
.icon-instagram{ -webkit-mask-image: url("assets/brand-instagram.svg"); mask-image: url("assets/brand-instagram.svg"); }
.icon-soundcloud{ -webkit-mask-image: url("assets/brand-soundcloud.svg"); mask-image: url("assets/brand-soundcloud.svg"); }

.foot{ position: absolute; bottom: 10px; left: 0; right: 0; text-align:center; color: rgba(255,255,255,0.7); font-size: 12px; }

/* Wide-screen grid layout and typography alignment */
@media (min-width: 680px){
  .card{
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap: clamp(0.6rem, 1.8vw, 1rem);
    grid-row-gap: 0.35rem;
    align-items: center;
  }
  .avatar-wrap{ grid-column: 1; grid-row: 1 / span 3; justify-content: end; align-self: end; }
  .avatar{ width: 220px; height: 220px; }
  .name{ grid-column: 2; grid-row: 1; text-align: left; font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
  .tagline{ grid-column: 2; grid-row: 2; text-align: left; max-width: 50ch; margin: 0.2rem 0 0.3rem; }
  .social{ grid-column: 2; grid-row: 3; justify-content: flex-start; margin-top: 0.3rem; }
  .bio{ grid-column: 1 / -1; max-width: 70ch; }
}


/* Layout tweaks for narrow screens */
@media (max-width: 480px){
  .card{ padding: 1rem; border-radius: 18px; }
  .avatar{ border-radius: 18px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}


/* Mobile: add a gentle separator before the bio for clearer sectioning */
@media (max-width: 679.98px){
  .bio{ margin-top: 1.1rem; }
  .bio::before{
    content: "";
    display: block;
    width: 76px;
    height: 1px;
    margin: 0.5rem auto 1rem;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
    opacity: 0.75;
    border-radius: 1px;
  }
}