/* ── Profile card (public NFC page) ── */
body.profile-page {
  background: var(--p-body-bg, linear-gradient(145deg, #0c1628 0%, #192742 100%));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  padding: 0;
}

.profile-page-content {
  flex: 1;
  display: flex;
  align-items: var(--p-body-align, center);
  justify-content: center;
  padding: 32px 16px;
}

.profile-card {
  background: var(--p-card-bg, #ffffff);
  border-radius: var(--p-card-r, 24px);
  box-shadow: var(--p-card-sh, 0 24px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.25));
  padding: var(--p-card-pad, 44px 28px 36px);
  width: 100%;
  max-width: var(--p-card-maxw, 380px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--p-stripe-h, 4px);
  background: linear-gradient(90deg, var(--p-accent-1, #2563eb) 0%, var(--p-accent-2, #06b6d4) 100%);
}

.profile-photo {
  width: var(--p-photo-size, 108px);
  height: var(--p-photo-size, 108px);
  border-radius: var(--p-photo-r, 50%);
  object-fit: cover;
  margin: 0 auto 22px;
  display: block;
  border: none;
  box-shadow: var(--p-photo-ring, 0 4px 20px rgba(0,0,0,.15));
  transition: box-shadow 0.25s;
}

.profile-photo-placeholder {
  width: var(--p-photo-size, 108px);
  height: var(--p-photo-size, 108px);
  border-radius: var(--p-photo-r, 50%);
  background: linear-gradient(135deg, var(--p-accent-1, #0f172a), var(--p-accent-2, #2563eb));
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: var(--p-photo-ring, 0 4px 20px rgba(0,0,0,.15));
  transition: box-shadow 0.25s;
}

/* ── Flip card: profile photo → QR code on click ── */
.flip-card {
  width: var(--p-photo-size, 108px);
  height: var(--p-photo-size, 108px);
  perspective: 700px;
  cursor: pointer;
  margin: 0 auto 22px;
  display: block;
}
@keyframes flip-peek {
  0%   { transform: rotateY(0deg); }
  35%  { transform: rotateY(28deg); }
  65%  { transform: rotateY(0deg); }
  100% { transform: rotateY(0deg); }
}
.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  body.anim-peek .flip-card:not(.is-flipped):not(.was-clicked) .flip-card-inner {
    animation: flip-peek 1.1s ease-in-out 2s 2;
  }
}
.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flip-card-back {
  transform: rotateY(180deg);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.profile-qr-img { display: block; width: calc(var(--p-photo-size, 108px) - 14px); height: auto; border-radius: 6px; }
.flip-card-front .profile-photo,
.flip-card-front .profile-photo-placeholder { margin: 0; }

.profile-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--p-text, #0f172a);
  margin-bottom: 5px;
}

.profile-sub {
  font-size: 14px;
  color: var(--p-muted, #64748b);
  margin-bottom: 0;
}

.profile-actions {
  margin: 24px 0;
}

.profile-actions .btn {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  width: 100%;
  background: linear-gradient(135deg, var(--p-accent-1, #2563eb), var(--p-accent-2, #06b6d4));
  color: #ffffff;
  border: none;
  letter-spacing: 0.1px;
  box-shadow: 0 2px 10px rgba(0,0,0,.20);
  transition: opacity 0.15s, transform 0.1s;
}

.profile-actions .btn:hover {
  opacity: 0.88;
  color: #ffffff;
  transform: translateY(-1px);
  text-decoration: none;
}

.profile-actions .btn-secondary {
  background: transparent;
  color: var(--p-accent-1, #2563eb);
  border: 2px solid var(--p-accent-1, #2563eb);
  box-shadow: none;
}

.profile-actions .btn-secondary:hover {
  background: var(--p-accent-1, #2563eb);
  color: #ffffff;
  opacity: 1;
}

.profile-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--p-link-pad, 13px 16px);
  border-radius: var(--p-link-r, 12px);
  background: var(--p-link-bg, #f8fafc);
  border: none;
  border-bottom: var(--p-link-bdb, none);
  font-size: 14px;
  color: var(--p-text, #1e293b);
  text-decoration: none;
  transition: filter 0.12s;
  text-align: left;
}

.profile-link:hover {
  filter: brightness(0.95);
  color: var(--p-text, #0f172a);
  text-decoration: none;
}

.link-icon { font-size: 18px; flex-shrink: 0; }
.link-icon-img { display: block; width: 20px; height: 20px; min-width: 20px; min-height: 20px; object-fit: contain; flex-shrink: 0; }
.link-icon-svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--p-muted, #64748b); }

/* ── Profile banner (inside card) ── */
.profile-banner {
  margin: calc(-1 * var(--p-card-pt, 44px) + var(--p-banner-top, 0px)) calc(-1 * var(--p-card-ph, 28px) + var(--p-banner-gap, 0px)) 0;
  overflow: hidden;
  border-radius: var(--p-banner-tr, var(--p-card-r, 24px)) var(--p-banner-tr, var(--p-card-r, 24px)) 0 0;
}
.profile-banner-img {
  width: 100%;
  height: auto;
  max-height: 240px;
  display: block;
  object-fit: contain;
}
.profile-photo--over-banner,
.profile-photo-placeholder.profile-photo--over-banner {
  border: 3px solid var(--p-card-bg, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.profile-card--has-banner::before { display: none; }

/* ── Profile footer (privacy · report · brand) ── */
.profile-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--p-divider, #f1f5f9);
}

.profile-footer-link {
  font-size: 11px;
  color: var(--p-muted, #64748b);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.profile-footer-link::-webkit-details-marker { display: none; }
.profile-footer-link:hover { color: var(--p-text, #0f172a); }

.profile-footer-sep {
  font-size: 11px;
  color: var(--p-muted, #64748b);
  opacity: 0.5;
}

.profile-footer-report {
  position: relative;
}

.profile-footer-report .profile-report-form {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: var(--p-card, #fff);
  border: 1px solid var(--p-divider, #e2e8f0);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 10;
}

.profile-footer-thanks {
  font-size: 11px;
  color: var(--p-sub, #94a3b8);
}

.profile-report-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-report-form select,
.profile-report-form textarea,
.profile-report-form input[type="email"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--p-divider, #e2e8f0);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  background: var(--p-link-bg, #f8fafc);
  color: var(--p-text, #0f172a);
  box-sizing: border-box;
}

.profile-report-form button {
  padding: 7px 14px;
  background: var(--p-sub, #94a3b8);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  align-self: flex-start;
}
.profile-report-form button:hover { opacity: 0.85; }

/* ── Profile brand footer ── */
.profile-brand {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--p-divider, #f1f5f9);
}

.profile-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--p-sub, #94a3b8);
  text-decoration: none;
  font-weight: 500;
}

.profile-brand-link:hover { color: var(--p-muted, #64748b); text-decoration: none; }

/* ── Bio on public profile ── */
.profile-bio {
  font-size: 13px;
  color: var(--p-muted, #475569);
  line-height: 1.65;
  margin: 12px 0 0;
  padding: 0 4px;
  white-space: pre-wrap;
}

/* Scan notice on profile page */
.scan-notice {
  font-size: 10px;
  color: var(--p-sub, #94a3b8);
  text-align: center;
  margin-top: 14px;
}

.scan-notice a { color: var(--p-sub, #94a3b8); text-decoration: underline; }

/* ── Animationer (valbara per profil: theme_anim_*) ──────────────
   Styrs av body-klasser: anim-enter-float | anim-enter-fade | anim-enter-none,
   anim-shimmer, anim-bg-particles, anim-peek.
   Entrén spelas en gång per flik/session (html.anim-seen sätts via sessionStorage).
   Allt respekterar prefers-reduced-motion. */

@keyframes card-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sheen-sweep {
  0%   { transform: translateX(-160%) skewX(-18deg); }
  46%  { transform: translateX(260%)  skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}
@keyframes particles-rise {
  from { transform: translateY(0); }
  to   { transform: translateY(-100vh); }
}

.profile-page-content { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {

  /* ── Entré: Svävande ── */
  html:not(.anim-seen) body.anim-enter-float .profile-card {
    animation: card-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html:not(.anim-seen) body.anim-enter-float .profile-card .flip-card,
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-name,
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-sub,
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-bio,
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-actions,
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link,
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-footer {
    animation: rise-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html:not(.anim-seen) body.anim-enter-float .profile-card .flip-card        { animation-delay: 0.12s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-name     { animation-delay: 0.22s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-sub      { animation-delay: 0.30s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-bio      { animation-delay: 0.36s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-actions  { animation-delay: 0.42s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link:nth-child(1)  { animation-delay: 0.50s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link:nth-child(2)  { animation-delay: 0.55s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link:nth-child(3)  { animation-delay: 0.60s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link:nth-child(4)  { animation-delay: 0.65s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link:nth-child(5)  { animation-delay: 0.70s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link:nth-child(6)  { animation-delay: 0.74s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link:nth-child(7)  { animation-delay: 0.78s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-link:nth-child(n+8) { animation-delay: 0.82s; }
  html:not(.anim-seen) body.anim-enter-float .profile-card .profile-footer   { animation-delay: 0.88s; }

  /* ── Entré: Ton in ── */
  html:not(.anim-seen) body.anim-enter-fade .profile-card {
    animation: fade-enter 0.7s ease both;
  }

  /* ── Reflektion: ljussvep över länkplattor + primärknappen ── */
  body.anim-shimmer .profile-link,
  body.anim-shimmer .profile-actions .btn-primary {
    position: relative;
    overflow: hidden;
  }
  body.anim-shimmer .profile-link::after,
  body.anim-shimmer .profile-actions .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 55%;
    background: linear-gradient(105deg,
      transparent 25%,
      var(--p-sheen-soft, rgba(255,255,255,0.16)) 46%,
      var(--p-sheen-hi,   rgba(255,255,255,0.30)) 52%,
      var(--p-sheen-soft, rgba(255,255,255,0.16)) 58%,
      transparent 75%);
    transform: translateX(-160%) skewX(-18deg);
    animation: sheen-sweep 5.6s ease-in-out infinite;
    pointer-events: none;
  }
  /* Primärknappen är alltid accentfärgad — vit glans syns bäst där oavsett tema */
  body.anim-shimmer .profile-actions .btn-primary::after {
    background: linear-gradient(105deg,
      transparent 25%,
      rgba(255, 255, 255, 0.18) 46%,
      rgba(255, 255, 255, 0.34) 52%,
      rgba(255, 255, 255, 0.18) 58%,
      transparent 75%);
  }
  body.anim-shimmer .profile-actions .btn-primary::after { animation-delay: 0.4s; }
  body.anim-shimmer .profile-link:nth-child(even)::after  { animation-delay: 1.6s; }
  body.anim-shimmer .profile-link:nth-child(odd)::after   { animation-delay: 2.8s; }

  /* ── Bakgrund: partiklar (mjuka ljuspunkter som stiger långsamt) ── */
  body.anim-bg-particles .profile-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  body.anim-bg-particles .profile-particles::before,
  body.anim-bg-particles .profile-particles::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: transparent;
    /* två band (0–100vh och 100–200vh) med samma mönster → sömlös loop */
    box-shadow:
      8vw   12vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 26%, transparent),
      22vw  78vh 4px 2px color-mix(in srgb, var(--p-particle, #fff) 14%, transparent),
      35vw  34vh 2px 0   color-mix(in srgb, var(--p-particle, #fff) 30%, transparent),
      48vw  90vh 3px 1px color-mix(in srgb, var(--p-particle, #fff) 18%, transparent),
      61vw  22vh 5px 2px color-mix(in srgb, var(--p-particle, #fff) 12%, transparent),
      74vw  58vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 24%, transparent),
      88vw  42vh 3px 1px color-mix(in srgb, var(--p-particle, #fff) 16%, transparent),
      94vw  84vh 2px 0   color-mix(in srgb, var(--p-particle, #fff) 22%, transparent),
      8vw  112vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 26%, transparent),
      22vw 178vh 4px 2px color-mix(in srgb, var(--p-particle, #fff) 14%, transparent),
      35vw 134vh 2px 0   color-mix(in srgb, var(--p-particle, #fff) 30%, transparent),
      48vw 190vh 3px 1px color-mix(in srgb, var(--p-particle, #fff) 18%, transparent),
      61vw 122vh 5px 2px color-mix(in srgb, var(--p-particle, #fff) 12%, transparent),
      74vw 158vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 24%, transparent),
      88vw 142vh 3px 1px color-mix(in srgb, var(--p-particle, #fff) 16%, transparent),
      94vw 184vh 2px 0   color-mix(in srgb, var(--p-particle, #fff) 22%, transparent);
    animation: particles-rise 38s linear infinite;
  }
  body.anim-bg-particles .profile-particles::after {
    width: 3px; height: 3px;
    box-shadow:
      14vw  52vh 1px 0 color-mix(in srgb, var(--p-particle, #fff) 20%, transparent),
      29vw   8vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 14%, transparent),
      42vw  68vh 1px 0 color-mix(in srgb, var(--p-particle, #fff) 24%, transparent),
      55vw  30vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 10%, transparent),
      68vw  92vh 1px 0 color-mix(in srgb, var(--p-particle, #fff) 18%, transparent),
      81vw  16vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 14%, transparent),
      14vw 152vh 1px 0 color-mix(in srgb, var(--p-particle, #fff) 20%, transparent),
      29vw 108vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 14%, transparent),
      42vw 168vh 1px 0 color-mix(in srgb, var(--p-particle, #fff) 24%, transparent),
      55vw 130vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 10%, transparent),
      68vw 192vh 1px 0 color-mix(in srgb, var(--p-particle, #fff) 18%, transparent),
      81vw 116vh 2px 1px color-mix(in srgb, var(--p-particle, #fff) 14%, transparent);
    animation-duration: 56s;
  }
}

/* ── Dela-knapp (profilkortet) ────────────────────────────────────────── */
.profile-share {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--p-card-bg);
  color: var(--p-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  transition: color .15s, transform .15s;
}
.profile-share:hover { color: var(--p-text); transform: scale(1.06); }
.profile-share:focus-visible { outline: 2px solid var(--p-text); outline-offset: 2px; }
.profile-share svg { width: 18px; height: 18px; }
.profile-share-toast {
  position: fixed;
  top: 64px;
  right: 14px;
  z-index: 5;
  background: var(--p-card-bg);
  color: var(--p-text);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.profile-share-toast.show { opacity: 1; }