/* Home-page profile header: a photo that tilts toward the cursor and opens enlarged (see profile.js) */
.profile { display: flex; align-items: center; gap: 18px; margin: 0 0 30px; }
.profile-name { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.profile-sub { font-size: 15px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

.profile-photo {
  position: relative; flex: none; display: block; width: 92px; height: 92px; padding: 0; margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 26px; overflow: hidden; cursor: zoom-in;
  background: var(--avatar-bg); -webkit-tap-highlight-color: transparent;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.7);
  transform: perspective(520px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.profile-photo.is-tracking { transition: transform 0.08s linear, box-shadow 0.4s ease, border-color 0.3s ease; }
.profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Light that follows the cursor across the photo */
.profile-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(70px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.4), transparent 70%);
}
.profile-photo:is(.is-tracking, :focus-visible)::after { opacity: 1; }
.profile-photo:is(.is-tracking, :focus-visible) { border-color: var(--copper); box-shadow: 0 0 0 3px var(--copper-glow), 0 18px 34px -16px rgba(0, 0, 0, 0.7); }
.profile-photo:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.profile-photo:active { --sc: 0.96; }
.profile-photo.is-hidden { opacity: 0; }
.profile-photo.is-measuring { transition: none !important; transform: none !important; }
@media (max-width: 420px) { .profile-photo { width: 80px; height: 80px; border-radius: 23px; } .profile-name { font-size: 22px; } }

/* Enlarged view */
html.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.lb[hidden] { display: none; }
.lb:not([data-ready]) { visibility: hidden; }
.lb-backdrop {
  position: absolute; inset: 0; cursor: zoom-out; opacity: 0; transition: opacity 0.38s ease;
  background: rgba(var(--bg-rgb), 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.lb-fig {
  position: relative; margin: 0; cursor: default;
  width: min(86vw, calc(84vh * 0.8), 440px); transform-origin: 0 0;
  border-radius: 22px; overflow: hidden; background: var(--avatar-bg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.lb-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.lb-close {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(10, 16, 30, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.lb.is-in .lb-backdrop { opacity: 1; }
.lb.is-in .lb-close { opacity: 1; transition-delay: 0s, 0s, 0.3s; }
.lb-close:hover { background: rgba(10, 16, 30, 0.7); transform: scale(1.08); }
.lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: no-preference) {
  /* slide only, no fade: the photo is visible from the very first frame */
  @keyframes profile-in { from { transform: translateY(10px); } }
  .profile { animation: profile-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-photo, .profile-photo::after, .lb-close, .lb-backdrop { transition: none; }
}

/* Header wave (home page): "tarang" means wave. It draws in once, then flows gently; hover deepens it. */
.wave-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 104px; height: 44px; line-height: 0; cursor: default; display: flex; align-items: center;   /* tall box: room for the plucked swing */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.wave-mark svg { display: block; width: 100%; height: 26px; overflow: visible; transform-origin: 50% 50%; }
.wave-path {
  fill: none; stroke: var(--copper-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 3px var(--copper-glow));
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wave-mark:hover .wave-path { transform: scaleY(1.7); }
@media (prefers-reduced-motion: no-preference) {
  .wave-mark svg { animation: wave-reveal 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) 0.2s backwards; }
  .wave-flow { animation: wave-flow 3.4s linear infinite; }
}
@keyframes wave-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wave-flow { to { transform: translateX(-40px); } }   /* one period of the wave: seamless loop */