/* Atmospheric layers — clouds, flares, sky canvas (home + inner pages) */

.p4p-atmospheric {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.p4p-home-canvas .p4p-atmospheric {
    z-index: 1;
}

.p4p-atmospheric__sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.p4p-atmospheric__clouds {
    position: absolute;
    inset: -10% 0;
    opacity: 0.55;
}

.p4p-atmospheric__cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(52px);
    background:
        radial-gradient(ellipse 80% 50% at 30% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 70% 45%, rgba(167, 139, 250, 0.08) 0%, transparent 50%),
        radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 72%);
    animation: p4pCloudDrift var(--cloud-dur, 38s) ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

.p4p-atmospheric__cloud--4 {
    width: min(340px, 48vw);
    height: min(140px, 18vw);
    top: 55%;
    right: 8%;
    --cloud-dur: 44s;
    animation-delay: -6s;
}

.p4p-atmospheric__cloud--5 {
    width: min(460px, 58vw);
    height: min(170px, 21vw);
    top: 8%;
    right: 22%;
    --cloud-dur: 52s;
    animation-delay: -20s;
}

.p4p-atmospheric__cloud--6 {
    width: min(300px, 42vw);
    height: min(130px, 16vw);
    bottom: 8%;
    right: 35%;
    --cloud-dur: 40s;
    animation-delay: -11s;
}

.p4p-atmospheric__cloud--1 {
    width: min(420px, 55vw);
    height: min(180px, 22vw);
    top: 12%;
    left: -8%;
    --cloud-dur: 42s;
}

.p4p-atmospheric__cloud--2 {
    width: min(520px, 62vw);
    height: min(200px, 24vw);
    top: 38%;
    right: -12%;
    --cloud-dur: 48s;
    animation-delay: -8s;
    opacity: 0.75;
}

.p4p-atmospheric__cloud--3 {
    width: min(380px, 50vw);
    height: min(160px, 20vw);
    bottom: 18%;
    left: 20%;
    --cloud-dur: 36s;
    animation-delay: -14s;
}

.p4p-atmospheric__flares {
    position: absolute;
    inset: 0;
}

.p4p-atmospheric__flare {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(2px);
    animation: p4pFlarePulse var(--flare-dur, 7s) ease-in-out infinite alternate;
}

.p4p-atmospheric__flare--1 {
    width: 140px;
    height: 140px;
    top: 14%;
    right: 16%;
    background: radial-gradient(circle, rgba(232, 168, 124, 0.35) 0%, transparent 68%);
    --flare-dur: 6s;
}

.p4p-atmospheric__flare--2 {
    width: 100px;
    height: 100px;
    bottom: 22%;
    left: 10%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.28) 0%, transparent 70%);
    --flare-dur: 8s;
    animation-delay: -2s;
}

.p4p-atmospheric__flare--3 {
    width: 80px;
    height: 80px;
    top: 55%;
    right: 28%;
    background: radial-gradient(circle, rgba(134, 239, 172, 0.2) 0%, transparent 72%);
    --flare-dur: 9s;
    animation-delay: -4s;
}

.p4p-atmospheric--home .p4p-atmospheric__cloud {
    opacity: 0.45;
}

.p4p-atmospheric--page {
    opacity: 0.72;
}

@keyframes p4pCloudDrift {
    from { transform: translateX(0) translateY(0); }
    to { transform: translateX(4vw) translateY(-2vh); }
}

@keyframes p4pFlarePulse {
    from { opacity: 0.35; transform: scale(0.92); }
    to { opacity: 0.85; transform: scale(1.08); }
}

/* SVG micro-animations */
.p4p-home-svg .p4p-svg-spin {
    transform-origin: center;
    animation: p4pSvgSpin 14s linear infinite;
}

.p4p-home-svg .p4p-svg-float {
    animation: p4pSvgFloat 4.5s ease-in-out infinite alternate;
}

.p4p-home-svg .p4p-svg-pulse {
    animation: p4pSvgPulse 2.8s ease-in-out infinite alternate;
}

@keyframes p4pSvgSpin {
    to { transform: rotate(360deg); }
}

@keyframes p4pSvgFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-6px); }
}

@keyframes p4pSvgPulse {
    from { opacity: 0.65; }
    to { opacity: 1; }
}

html.p4p-perf-lite .p4p-atmospheric__cloud,
html.p4p-reduced-motion .p4p-atmospheric__cloud,
html.p4p-reduced-motion .p4p-atmospheric__flare {
    animation: none;
}

html.p4p-perf-tier-2 .p4p-atmospheric__sky {
    opacity: 0.5;
}

html.p4p-perf-lite .p4p-home-svg .p4p-svg-spin,
html.p4p-reduced-motion .p4p-home-svg .p4p-svg-spin,
html.p4p-reduced-motion .p4p-home-svg .p4p-svg-float {
    animation: none;
}

/* CSS-only mode — lighter clouds, no canvas cost */
.p4p-atmospheric--css-only .p4p-atmospheric__clouds {
    opacity: 0.38;
}

.p4p-atmospheric--css-only .p4p-atmospheric__cloud {
    filter: blur(40px);
}

html.p4p-perf-lite .p4p-atmospheric__clouds,
html.p4p-perf-tier-2 .p4p-atmospheric__clouds {
    opacity: 0.28;
}