/* Ambient background — gradients, noise grain, blobs, drifting petals */
.ambient {
    position: fixed; inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(60% 50% at 12% 8%,  #ffe4ea 0%, transparent 60%),
      radial-gradient(55% 45% at 92% 18%, #fde0d8 0%, transparent 65%),
      radial-gradient(80% 60% at 50% 105%, #fbd4dc 0%, transparent 60%),
      linear-gradient(180deg, #fdf6f3 0%, #fbece9 100%);
}
.ambient::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.40  0 0 0 0 0.42  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: .55;
    mix-blend-mode: multiply;
}

.blob {
    position: fixed; z-index: -1; pointer-events: none;
    filter: blur(60px); opacity: .55;
    border-radius: 50%;
    animation: morph 22s ease-in-out infinite alternate;
}
.blob.b1 { top: -6%;    left: -6%;   width: 38vw; height: 38vw; background: radial-gradient(circle at 35% 35%, #ffd1dc, transparent 65%); }
.blob.b2 { bottom: -8%; right: -10%; width: 46vw; height: 46vw; background: radial-gradient(circle at 60% 50%, #ffd9cf, transparent 65%); animation-delay: -8s; }
.blob.b3 { top: 38%;    right: -14%; width: 30vw; height: 30vw; background: radial-gradient(circle at 50% 50%, #f9c8d3, transparent 65%); animation-delay: -14s; }
@keyframes morph {
    0%   { transform: translate(0, 0)     scale(1)    rotate(0deg); }
    50%  { transform: translate(2vw, -2vh) scale(1.06) rotate(8deg); }
    100% { transform: translate(-2vw, 3vh) scale(.96)  rotate(-6deg); }
}

.petals { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.petal {
    position: absolute;
    width: 18px; height: 18px;
    opacity: .55;
    animation: drift linear infinite;
    will-change: transform;
}
.petal svg { width: 100%; height: 100%; display: block; }
@keyframes drift {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);   opacity: 0; }
    10%  { opacity: .6; }
    50%  { transform: translate3d(40px, 50vh, 0) rotate(140deg); }
    90%  { opacity: .55; }
    100% { transform: translate3d(-30px, 110vh, 0) rotate(280deg); opacity: 0; }
}