:root{
  --text: 18 22 28;             /* dark text for bright glass */
  --acc-1: 76 110 245;          /* blue */
  --acc-2: 183 33 255;          /* purple */
  --acc-3: 41 197 169;          /* teal */

  --glass-blur: 22px;
  --glass-bright: 1.25;
  --glass-contrast: 1.05;
  --glass-sat: 1.1;
  --glass-border: 255 255 255;
  --tint: 255 255 255;          /* bright glass */
  --tint-alpha: .55;

  /* compact type scale */
  --step--1: clamp(.75rem, .75rem + .1vw, .9rem);
  --step-0: clamp(.85rem, .85rem + .2vw, 1rem);
  --step-1: clamp(1rem, .95rem + .4vw, 1.2rem);
  --step-2: clamp(1.2rem, 1.1rem + .6vw, 1.5rem);
  --step-3: clamp(1.6rem, 1.4rem + 1vw, 2rem);

  /* background image */
  --bg-image: url('bg.png');
  --bg-darken: 0.12;
  --bg-vignette: 0.12;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: rgb(var(--text));
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow-x: hidden;

  /* couleur de fond pour boucher les trous */
  background-color: #274030;

  /* couches : dégradé bas + image pano */
  background-image:
    linear-gradient(to bottom, transparent 80%, #274030 100%),
    url("bg.png");

  /* positions */
  background-position:
    center bottom,                  /* le dégradé colle en bas */
    calc(50% + var(--bg-x, 0px)) center;

  /* tailles */
  background-size:
    cover,                          /* le dégradé couvre */
    cover;                          /* force l’image à couvrir toute la zone */

  /* répétitions */
  background-repeat:
    no-repeat,
    repeat-x;

  background-attachment:
    scroll,
    scroll;
}

/* Give breathing room at the top */
main{
  width:min(1000px, 94vw);
  z-index: 1;
  padding: clamp(56px, 12vh, 128px) clamp(20px, 3vw, 40px);
}

/* blobs */
.blobs{ position: fixed; inset: -20vmax; filter: blur(60px) saturate(120%); z-index: 0; pointer-events:none; mix-blend-mode: screen; }
.blob{ position:absolute; width:50vmax; height:50vmax; border-radius: 50%; animation: float 24s ease-in-out infinite; }
.b1{ top:8%; left:3%;  background: radial-gradient(closest-side, rgba(var(--acc-1), .45), rgba(var(--acc-1), 0) 70%); }
.b2{ top:65%; left:70%; background: radial-gradient(closest-side, rgba(var(--acc-2), .45), rgba(var(--acc-2), 0) 70%); animation-duration: 28s; }
.b3{ top:40%; left:-10%; background: radial-gradient(closest-side, rgba(var(--acc-3), .45), rgba(var(--acc-3), 0) 70%); animation-duration: 30s; }
@keyframes float{ 0%,100%{ transform: translate3d(0,0,0) scale(1); } 50%{ transform: translate3d(6vmax,-4vmax,0) scale(1.06); } }

.card{
  position: relative;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
  background: rgba(var(--tint), var(--tint-alpha));
  border: 1px solid rgba(var(--glass-border), .28);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-bright)) contrast(var(--glass-contrast)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-bright)) contrast(var(--glass-contrast)) saturate(var(--glass-sat));

  display: grid;
  row-gap: clamp(24px, 4vw, 40px); /* espace vertical entre header / panel / footer */

  /* entrance + tilt base */
  transform: translateY(18px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
  will-change: transform;
  opacity: 0;
}
/* moving light sheen */
.card::before{
  content:""; position:absolute; inset:-1px; border-radius: inherit; pointer-events:none;
  background: radial-gradient(600px 200px at var(--px, 50%) -10%, rgba(255,255,255,.35), transparent 60%);
  mix-blend-mode: screen; opacity: var(--shine, 0); transition: opacity .2s ease;
}

.h2{ margin:.2rem 0 .4rem; font-size:var(--step-2); }

header.profile{ display:grid; gap: 14px; align-items:center; grid-template-columns: 72px 1fr; }
.avatar{
  width:72px; height:72px; border-radius: 50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: #000000; color:#fff; font-weight:800; font-size: 1rem; letter-spacing:.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.role{ font-size: var(--step--1); opacity:.9; margin-top:2px; }
.cta{
  margin-top: clamp(8px, 2vw, 12px);
  margin-bottom: clamp(12px, 2.5vw, 20px); /* plus d’air sous les boutons */
  display:flex; flex-wrap:wrap; gap:8px;
}
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .7rem; border-radius:10px;
  text-decoration:none; font-weight:600; font-size: var(--step--1);
  background: rgba(255,255,255, .35); border:1px solid rgba(var(--glass-border), .28);
  backdrop-filter: blur(8px) saturate(140%); color: inherit;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
/* ripple element */
.btn .ripple{ position:absolute; border-radius:50%; transform: scale(0); background: rgba(0,0,0,.15); animation: ripple .6s ease-out; pointer-events:none; }
@keyframes ripple{ to{ transform: scale(10); opacity:0; } }

.grid{ margin-top: clamp(14px, 2vw, 20px); }
.panel{
  padding: clamp(16px, 3vw, 28px);
  border-radius: 16px;
  background: rgba(255,255,255,.45);
  border:1px solid rgba(var(--glass-border), .20);
  backdrop-filter: blur(calc(var(--glass-blur) - 6px)) brightness(1.15);
  transform: translateY(18px);
  opacity: 0; /* reveal animation base */
}

.about{ margin-top:1rem; font-size:var(--step-0); line-height:1.6; }
.taglist{ display:flex; flex-wrap:wrap; gap:6px; margin: 10px 0 0; padding:0; list-style:none; }
.tag{ font-size: var(--step--1); padding:.3rem .5rem; border-radius: 999px; border:1px solid rgba(var(--glass-border), .22); background: rgba(255,255,255,.6); backdrop-filter: blur(6px); }

.footer{ color:white;margin-top: clamp(20px, 2vw, 28px); opacity:.9; font-size: var(--step--1); text-align:center; }

/* reveal animation states */
.reveal.is-visible{ opacity: 1; transform: translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal:nth-of-type(1).is-visible{ transition-delay: .02s; }
.reveal:nth-of-type(2).is-visible{ transition-delay: .08s; }
.reveal:nth-of-type(3).is-visible{ transition-delay: .12s; }

/* mobile extra padding top */
@media (max-width: 480px){
  main{ padding-top: max(14vh, 80px); }
}