/* Camada comum: a decoração nunca intercepta cliques do perfil. */
.profile-card {
  position: relative;
  isolation: isolate;
}

.profile-effect-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 4;
  border-radius: inherit;
  contain: layout style paint;
}

.profile-content,
.profile-banner,
.profile-avatar {
  position: relative;
}

.profile-content {
  z-index: 2;
}

.profile-effect-layer.is-paused *,
.profile-effect-layer.is-reduced * {
  animation-play-state: paused !important;
}

.profile-effect-layer.is-reduced .sakura-petal {
  opacity: 0.35;
  animation: none;
}

/* Sakura — arte vetorial própria e partículas CSS, sem imagem animada. */
.effect-sakura {
  --sakura-pink: #f5a9cf;
  --sakura-light: #ffd8eb;
  --sakura-branch: rgba(74, 46, 65, 0.88);
}

.sakura-branch {
  position: absolute;
  width: 114%;
  height: 42%;
  top: -5%;
  left: -7%;
  overflow: visible;
  opacity: 0.86;
  transform: translate3d(0, 0, 0);
  animation: sakura-branch-sway 9s ease-in-out infinite;
}

.sakura-branch path {
  fill: none;
  stroke: var(--sakura-branch);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sakura-branch-main path:first-child {
  stroke-width: 8;
}

.sakura-branch-main path:last-child {
  stroke-width: 3;
}

.sakura-branch-side {
  width: 28%;
  height: 90%;
  left: auto;
  right: -5%;
  top: -7%;
  opacity: 0.64;
  animation-delay: -3s;
}

.sakura-branch-side path:first-child {
  stroke-width: 6;
}

.sakura-branch-side path:last-child {
  stroke-width: 2.5;
}

.sakura-blossoms {
  position: absolute;
  z-index: 1;
  color: var(--sakura-light);
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(245, 169, 207, 0.55);
  animation: sakura-blossom-breathe 4.5s ease-in-out infinite;
}

.blossom-a { top: 6%; left: 20%; transform: rotate(-18deg); }
.blossom-b { top: 10%; right: 22%; font-size: 19px; animation-delay: -1.4s; }
.blossom-c { top: 31%; left: 7%; font-size: 16px; animation-delay: -2.2s; }
.blossom-d { top: 24%; right: 5%; font-size: 14px; animation-delay: -3.1s; }

.sakura-petals {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.sakura-petal {
  position: absolute;
  top: var(--petal-top);
  left: var(--petal-x);
  width: var(--petal-size);
  height: calc(var(--petal-size) * 0.7);
  display: block;
  border-radius: 80% 15% 80% 15%;
  background: linear-gradient(135deg, var(--sakura-light), var(--sakura-pink));
  box-shadow: 0 1px 4px rgba(245, 169, 207, 0.24);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0);
  animation: sakura-petal-fall var(--petal-duration) linear var(--petal-delay) infinite;
  will-change: transform, opacity;
}

@keyframes sakura-petal-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12px, 0) rotate(0deg) scale(0.7);
  }
  9% { opacity: var(--petal-opacity); }
  50% {
    opacity: var(--petal-opacity);
    transform: translate3d(var(--petal-drift), 52%, 0) rotate(var(--petal-rotate)) scale(1);
  }
  88% { opacity: calc(var(--petal-opacity) * 0.75); }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--petal-drift) * -0.45), 125%, 0) rotate(calc(var(--petal-rotate) * -1)) scale(0.82);
  }
}

@keyframes sakura-branch-sway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); }
  50% { transform: translate3d(2px, 1px, 0) rotate(0.4deg); }
}

@keyframes sakura-blossom-breathe {
  0%, 100% { opacity: 0.78; transform: scale(0.96) rotate(-3deg); }
  50% { opacity: 1; transform: scale(1.04) rotate(3deg); }
}

/* Cards de seleção e prévia. */
.profile-effects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.profile-effect-option {
  min-height: 92px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--text-muted);
  text-align: center;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.profile-effect-option:hover {
  background: var(--bg-2);
  border-color: var(--bg-hover);
  transform: translateY(-1px);
}

.profile-effect-option.active {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.profile-effect-option.disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.profile-effect-option .effect-preview-icon {
  font-size: 25px;
  line-height: 1;
}

.profile-effect-option small {
  color: var(--text-dim);
  font-size: 10px;
}

.profile-effect-preview {
  max-width: 460px;
  margin-bottom: 18px;
}

@media (max-width: 620px) {
  .profile-effects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sakura-branch,
  .sakura-blossoms,
  .sakura-petal {
    animation: none !important;
  }
  .sakura-petal {
    opacity: 0.35;
  }
}