/* ===================================
   PARADISE PARK HERO INTERSTITIAL
   Anime-inspired "Paradise Above the Clouds"
   =================================== */

/* ===================================
   TUNING VARIABLES (ADJUST THESE!)
   =================================== */
:root {
    /* === HAND POSITIONING === */
    /* Left hand - tucked deep into top-left corner */
    --pp-left-hand-top: -19%;
    --pp-left-hand-left: -17%;
    --pp-left-hand-width: 75vw;
    --pp-left-hand-max-width: 850px;
    --pp-left-hand-rotate: 10deg;
    /* Pointing towards the center button */

    /* Right hand - tucked deep into bottom-right corner */
    --pp-right-hand-bottom: -40%;
    --pp-right-hand-right: -15%;
    --pp-right-hand-width: 70vw;
    --pp-right-hand-max-width: 900px;
    --pp-right-hand-rotate: 2deg;
    /* Pointing towards the center button */

    /* === MOTION SETTINGS === */
    /* Idle floating animation */
    --pp-float-amplitude: 14px;
    /* Vertical drift range */
    --pp-float-rotation: 1.5deg;
    /* Rotation drift range */
    --pp-float-duration-left: 6s;
    /* Left hand cycle duration */
    --pp-float-duration-right: 7s;
    /* Right hand cycle duration (offset for natural feel) */

    /* Mouse parallax */
    --pp-parallax-strength: 15px;
    /* Max mouse parallax shift */

    /* Scroll parallax */
    --pp-scroll-parallax-strength: 30px;
    /* Max scroll parallax shift */

    /* === SAFE ZONE (CENTER CONTENT AREA) === */
    --pp-safe-zone-width: 42%;
    /* Center content width */
    --pp-safe-zone-max-width: 600px;

    /* === COLOR PALETTE (Paradise Theme) === */
    --pp-bg-primary: #FDF8F3;
    /* Warm off-white */
    --pp-bg-secondary: #FFF9F0;
    /* Soft ivory */
    --pp-accent-peach: #f3f4f6;
    /* Neutral light gray instead of peach */
    --pp-accent-sky: #fefce8;
    /* Very pale yellow instead of sky blue */
    --pp-accent-sakura: #fef9c3;
    /* Pale yellow instead of sakura */
    --pp-text-primary: #000;
    --pp-text-secondary: #4b5563;
    --pp-button-color: #facc15;
    --pp-button-border: rgba(250, 204, 21, 0.4);
    --pp-button-hover-bg: rgba(250, 204, 21, 0.08);
}

/* ===================================
   MAIN SECTION
   =================================== */
.paradise-park {
    position: relative;
    width: 100%;
    min-height: 90vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    /* Branded Background Asset */
    background-image: url('../assets/landing/foundation-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    /* Fallback */
}

/* ===================================
   GOLD ORNAMENTAL BORDERS
   =================================== */

/* Top Gold Border */
.pp-top-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.pp-top-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(250, 204, 21, 0.15) 10%,
            rgba(253, 224, 71, 0.5) 30%,
            rgba(250, 204, 21, 0.8) 50%,
            rgba(253, 224, 71, 0.5) 70%,
            rgba(250, 204, 21, 0.15) 90%,
            transparent 100%);
}

.pp-border-pattern-top {
    width: 100%;
    height: 70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='goldT' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23B8860B;stop-opacity:0'/%3E%3Cstop offset='15%25' style='stop-color:%23B8860B;stop-opacity:0.5'/%3E%3Cstop offset='50%25' style='stop-color:%23D4AF37;stop-opacity:0.85'/%3E%3Cstop offset='85%25' style='stop-color:%23B8860B;stop-opacity:0.5'/%3E%3Cstop offset='100%25' style='stop-color:%23B8860B;stop-opacity:0'/%3E%3C/linearGradient%3E%3CradialGradient id='goldDot' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23D4AF37;stop-opacity:0.9'/%3E%3Cstop offset='100%25' style='stop-color:%23B8860B;stop-opacity:0.4'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M200 5 L192 18 L200 31 L208 18 Z' fill='none' stroke='url(%23goldT)' stroke-width='1.2'/%3E%3Cpath d='M200 10 L196 18 L200 26 L204 18 Z' fill='url(%23goldDot)'/%3E%3Ccircle cx='200' cy='18' r='2' fill='%23D4AF37' fill-opacity='0.8'/%3E%3Ccircle cx='200' cy='36' r='2.5' fill='none' stroke='url(%23goldT)' stroke-width='0.8'/%3E%3Ccircle cx='200' cy='36' r='1' fill='%23D4AF37' fill-opacity='0.6'/%3E%3Ccircle cx='188' cy='32' r='1.5' fill='%23B8860B' fill-opacity='0.5'/%3E%3Ccircle cx='212' cy='32' r='1.5' fill='%23B8860B' fill-opacity='0.5'/%3E%3Cpath d='M180 22 C170 16 160 22 150 18 C140 14 130 20 120 16' fill='none' stroke='url(%23goldT)' stroke-width='1'/%3E%3Cpath d='M180 22 C175 28 165 26 155 30 C145 34 135 28 125 32' fill='none' stroke='url(%23goldT)' stroke-width='0.8'/%3E%3Cpath d='M115 16 C100 20 85 14 70 20 C55 26 40 18 25 24' fill='none' stroke='url(%23goldT)' stroke-width='0.6'/%3E%3Cpath d='M120 32 C105 28 90 34 75 28 C60 22 45 30 30 24' fill='none' stroke='url(%23goldT)' stroke-width='0.5'/%3E%3Ccircle cx='180' cy='22' r='2' fill='url(%23goldDot)'/%3E%3Ccircle cx='150' cy='18' r='1.8' fill='%23B8860B' fill-opacity='0.6'/%3E%3Ccircle cx='155' cy='30' r='1.5' fill='%23B8860B' fill-opacity='0.5'/%3E%3Ccircle cx='120' cy='16' r='1.5' fill='%23B8860B' fill-opacity='0.4'/%3E%3Ccircle cx='125' cy='32' r='1.3' fill='%23B8860B' fill-opacity='0.4'/%3E%3Ccircle cx='85' cy='14' r='1.2' fill='%23B8860B' fill-opacity='0.3'/%3E%3Ccircle cx='90' cy='34' r='1' fill='%23B8860B' fill-opacity='0.3'/%3E%3Cpath d='M165 20 Q160 15 155 20 Q160 25 165 20' fill='%23B8860B' fill-opacity='0.3'/%3E%3Cpath d='M135 24 Q130 19 125 24 Q130 29 135 24' fill='%23B8860B' fill-opacity='0.25'/%3E%3Cpath d='M100 22 Q95 17 90 22 Q95 27 100 22' fill='%23B8860B' fill-opacity='0.2'/%3E%3Cpath d='M220 22 C230 16 240 22 250 18 C260 14 270 20 280 16' fill='none' stroke='url(%23goldT)' stroke-width='1'/%3E%3Cpath d='M220 22 C225 28 235 26 245 30 C255 34 265 28 275 32' fill='none' stroke='url(%23goldT)' stroke-width='0.8'/%3E%3Cpath d='M285 16 C300 20 315 14 330 20 C345 26 360 18 375 24' fill='none' stroke='url(%23goldT)' stroke-width='0.6'/%3E%3Cpath d='M280 32 C295 28 310 34 325 28 C340 22 355 30 370 24' fill='none' stroke='url(%23goldT)' stroke-width='0.5'/%3E%3Ccircle cx='220' cy='22' r='2' fill='url(%23goldDot)'/%3E%3Ccircle cx='250' cy='18' r='1.8' fill='%23B8860B' fill-opacity='0.6'/%3E%3Ccircle cx='245' cy='30' r='1.5' fill='%23B8860B' fill-opacity='0.5'/%3E%3Ccircle cx='280' cy='16' r='1.5' fill='%23B8860B' fill-opacity='0.4'/%3E%3Ccircle cx='275' cy='32' r='1.3' fill='%23B8860B' fill-opacity='0.4'/%3E%3Ccircle cx='315' cy='14' r='1.2' fill='%23B8860B' fill-opacity='0.3'/%3E%3Ccircle cx='310' cy='34' r='1' fill='%23B8860B' fill-opacity='0.3'/%3E%3Cpath d='M235 20 Q240 15 245 20 Q240 25 235 20' fill='%23B8860B' fill-opacity='0.3'/%3E%3Cpath d='M265 24 Q270 19 275 24 Q270 29 265 24' fill='%23B8860B' fill-opacity='0.25'/%3E%3Cpath d='M300 22 Q305 17 310 22 Q305 27 300 22' fill='%23B8860B' fill-opacity='0.2'/%3E%3Cpath d='M185 42 L175 44 M215 42 L225 44' stroke='%23B8860B' stroke-opacity='0.3' stroke-width='0.5'/%3E%3Cpath d='M170 47 L155 50 M230 47 L245 50' stroke='%23B8860B' stroke-opacity='0.25' stroke-width='0.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 900px 70px;
    opacity: 1;
}

/* Bottom Gold Border */
.pp-bottom-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.pp-bottom-border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(250, 204, 21, 0.15) 10%,
            rgba(253, 224, 71, 0.5) 30%,
            rgba(250, 204, 21, 0.8) 50%,
            rgba(253, 224, 71, 0.5) 70%,
            rgba(250, 204, 21, 0.15) 90%,
            transparent 100%);
}

.pp-border-pattern-bottom {
    width: 100%;
    height: 70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='goldB' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23B8860B;stop-opacity:0'/%3E%3Cstop offset='15%25' style='stop-color:%23B8860B;stop-opacity:0.5'/%3E%3Cstop offset='50%25' style='stop-color:%23D4AF37;stop-opacity:0.85'/%3E%3Cstop offset='85%25' style='stop-color:%23B8860B;stop-opacity:0.5'/%3E%3Cstop offset='100%25' style='stop-color:%23B8860B;stop-opacity:0'/%3E%3C/linearGradient%3E%3CradialGradient id='goldDotB' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' style='stop-color:%23D4AF37;stop-opacity:0.9'/%3E%3Cstop offset='100%25' style='stop-color:%23B8860B;stop-opacity:0.4'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M200 65 L192 52 L200 39 L208 52 Z' fill='none' stroke='url(%23goldB)' stroke-width='1.2'/%3E%3Cpath d='M200 60 L196 52 L200 44 L204 52 Z' fill='url(%23goldDotB)'/%3E%3Ccircle cx='200' cy='52' r='2' fill='%23D4AF37' fill-opacity='0.8'/%3E%3Ccircle cx='200' cy='34' r='2.5' fill='none' stroke='url(%23goldB)' stroke-width='0.8'/%3E%3Ccircle cx='200' cy='34' r='1' fill='%23D4AF37' fill-opacity='0.6'/%3E%3Ccircle cx='188' cy='38' r='1.5' fill='%23B8860B' fill-opacity='0.5'/%3E%3Ccircle cx='212' cy='38' r='1.5' fill='%23B8860B' fill-opacity='0.5'/%3E%3Cpath d='M180 48 C170 54 160 48 150 52 C140 56 130 50 120 54' fill='none' stroke='url(%23goldB)' stroke-width='1'/%3E%3Cpath d='M180 48 C175 42 165 44 155 40 C145 36 135 42 125 38' fill='none' stroke='url(%23goldB)' stroke-width='0.8'/%3E%3Cpath d='M115 54 C100 50 85 56 70 50 C55 44 40 52 25 46' fill='none' stroke='url(%23goldB)' stroke-width='0.6'/%3E%3Cpath d='M120 38 C105 42 90 36 75 42 C60 48 45 40 30 46' fill='none' stroke='url(%23goldB)' stroke-width='0.5'/%3E%3Ccircle cx='180' cy='48' r='2' fill='url(%23goldDotB)'/%3E%3Ccircle cx='150' cy='52' r='1.8' fill='%23B8860B' fill-opacity='0.6'/%3E%3Ccircle cx='155' cy='40' r='1.5' fill='%23B8860B' fill-opacity='0.5'/%3E%3Ccircle cx='120' cy='54' r='1.5' fill='%23B8860B' fill-opacity='0.4'/%3E%3Ccircle cx='125' cy='38' r='1.3' fill='%23B8860B' fill-opacity='0.4'/%3E%3Ccircle cx='85' cy='56' r='1.2' fill='%23B8860B' fill-opacity='0.3'/%3E%3Ccircle cx='90' cy='36' r='1' fill='%23B8860B' fill-opacity='0.3'/%3E%3Cpath d='M165 50 Q160 55 155 50 Q160 45 165 50' fill='%23B8860B' fill-opacity='0.3'/%3E%3Cpath d='M135 46 Q130 51 125 46 Q130 41 135 46' fill='%23B8860B' fill-opacity='0.25'/%3E%3Cpath d='M100 48 Q95 53 90 48 Q95 43 100 48' fill='%23B8860B' fill-opacity='0.2'/%3E%3Cpath d='M220 48 C230 54 240 48 250 52 C260 56 270 50 280 54' fill='none' stroke='url(%23goldB)' stroke-width='1'/%3E%3Cpath d='M220 48 C225 42 235 44 245 40 C255 36 265 42 275 38' fill='none' stroke='url(%23goldB)' stroke-width='0.8'/%3E%3Cpath d='M285 54 C300 50 315 56 330 50 C345 44 360 52 375 46' fill='none' stroke='url(%23goldB)' stroke-width='0.6'/%3E%3Cpath d='M280 38 C295 42 310 36 325 42 C340 48 355 40 370 46' fill='none' stroke='url(%23goldB)' stroke-width='0.5'/%3E%3Ccircle cx='220' cy='48' r='2' fill='url(%23goldDotB)'/%3E%3Ccircle cx='250' cy='52' r='1.8' fill='%23B8860B' fill-opacity='0.6'/%3E%3Ccircle cx='245' cy='40' r='1.5' fill='%23B8860B' fill-opacity='0.5'/%3E%3Ccircle cx='280' cy='54' r='1.5' fill='%23B8860B' fill-opacity='0.4'/%3E%3Ccircle cx='275' cy='38' r='1.3' fill='%23B8860B' fill-opacity='0.4'/%3E%3Ccircle cx='315' cy='56' r='1.2' fill='%23B8860B' fill-opacity='0.3'/%3E%3Ccircle cx='310' cy='36' r='1' fill='%23B8860B' fill-opacity='0.3'/%3E%3Cpath d='M235 50 Q240 55 245 50 Q240 45 235 50' fill='%23B8860B' fill-opacity='0.3'/%3E%3Cpath d='M265 46 Q270 51 275 46 Q270 41 265 46' fill='%23B8860B' fill-opacity='0.25'/%3E%3Cpath d='M300 48 Q305 53 310 48 Q305 43 300 48' fill='%23B8860B' fill-opacity='0.2'/%3E%3Cpath d='M185 28 L175 26 M215 28 L225 26' stroke='%23B8860B' stroke-opacity='0.3' stroke-width='0.5'/%3E%3Cpath d='M170 23 L155 20 M230 23 L245 20' stroke='%23B8860B' stroke-opacity='0.25' stroke-width='0.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 900px 70px;
    opacity: 1;
}

/* ===================================
   ANIMATED BACKGROUND LAYERS
   =================================== */
.pp-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Cloud layer - drifting clouds */
.pp-clouds {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cellipse cx='20' cy='10' rx='15' ry='6' fill='rgba(255,255,255,0.5)'/%3E%3Cellipse cx='70' cy='12' rx='20' ry='7' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E") repeat-x;
    background-size: 200px 40px;
    opacity: 0.6;
    animation: pp-cloud-drift 80s linear infinite;
}

.pp-clouds-2 {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 25' preserveAspectRatio='none'%3E%3Cellipse cx='40' cy='15' rx='25' ry='8' fill='rgba(255,255,255,0.35)'/%3E%3Cellipse cx='100' cy='10' rx='18' ry='6' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E") repeat-x;
    background-size: 300px 50px;
    background-position: 50% 30%;
    opacity: 0.5;
    animation: pp-cloud-drift-reverse 100s linear infinite;
}

@keyframes pp-cloud-drift {
    0% {
        background-position: 0 50%;
    }

    100% {
        background-position: 200px 50%;
    }
}

@keyframes pp-cloud-drift-reverse {
    0% {
        background-position: 300px 30%;
    }

    100% {
        background-position: 0 30%;
    }
}

/* Sun rays / glow */
.pp-sun-glow {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 60%;
    background: radial-gradient(ellipse at center top,
            rgba(255, 223, 186, 0.4) 0%,
            rgba(255, 244, 230, 0.2) 30%,
            transparent 70%);
    z-index: 0;
    animation: pp-sun-pulse 8s ease-in-out infinite;
}

@keyframes pp-sun-pulse {

    0%,
    100% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.02);
    }
}

/* Floating particles / petals */
.pp-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.pp-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--pp-accent-sakura);
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
    opacity: 0.6;
    animation: pp-petal-fall linear infinite;
}

.pp-particle:nth-child(1) {
    left: 10%;
    animation-duration: 15s;
    animation-delay: 0s;
    width: 6px;
    height: 6px;
}

.pp-particle:nth-child(2) {
    left: 25%;
    animation-duration: 18s;
    animation-delay: 2s;
    width: 10px;
    height: 10px;
}

.pp-particle:nth-child(3) {
    left: 40%;
    animation-duration: 12s;
    animation-delay: 4s;
}

.pp-particle:nth-child(4) {
    left: 55%;
    animation-duration: 20s;
    animation-delay: 1s;
    width: 5px;
    height: 5px;
}

.pp-particle:nth-child(5) {
    left: 70%;
    animation-duration: 16s;
    animation-delay: 3s;
    width: 7px;
    height: 7px;
}

.pp-particle:nth-child(6) {
    left: 85%;
    animation-duration: 14s;
    animation-delay: 5s;
}

.pp-particle:nth-child(7) {
    left: 15%;
    animation-duration: 22s;
    animation-delay: 7s;
    width: 9px;
    height: 9px;
}

.pp-particle:nth-child(8) {
    left: 60%;
    animation-duration: 17s;
    animation-delay: 8s;
    width: 6px;
    height: 6px;
}

@keyframes pp-petal-fall {
    0% {
        top: -5%;
        transform: rotate(45deg) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        top: 105%;
        transform: rotate(45deg) translateX(100px);
        opacity: 0;
    }
}

/* Film grain overlay */
/* Film grain overlay - Optimized for performance */
.pp-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    /* Reduced opacity */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 10;
    /* performance optimization */
    will-change: opacity;
}

/* Bloom / lens glow effect */
.pp-bloom {
    position: absolute;
    top: 10%;
    right: 15%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(30px);
    animation: pp-bloom-pulse 6s ease-in-out infinite;
    z-index: 1;
}

.pp-bloom-2 {
    top: 60%;
    left: 10%;
    width: 150px;
    height: 150px;
    animation-delay: 3s;
}

@keyframes pp-bloom-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* ===================================
   HAND ASSETS
   =================================== */
.pp-hand {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.pp-hand img {
    width: 100%;
    height: auto;
    display: block;
    /* Independent interaction transform */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Interaction State: Zoom hands in */
.paradise-park.pp-interact-active .pp-hand--left img {
    transform: scale(1.12) translate(5%, 5%);
}

.paradise-park.pp-interact-active .pp-hand--right img {
    transform: scale(1.12) translate(-5%, -5%);
}

/* Left hand - top left, reaching diagonally */
.pp-hand--left {
    top: var(--pp-left-hand-top);
    left: var(--pp-left-hand-left);
    width: var(--pp-left-hand-width);
    max-width: var(--pp-left-hand-max-width);
    transform: rotate(var(--pp-left-hand-rotate));
    animation: pp-float-left var(--pp-float-duration-left) ease-in-out infinite;
}

/* Right hand - bottom right */
.pp-hand--right {
    bottom: var(--pp-right-hand-bottom);
    right: var(--pp-right-hand-right);
    width: var(--pp-right-hand-width);
    max-width: var(--pp-right-hand-max-width);
    transform: rotate(var(--pp-right-hand-rotate));
    animation: pp-float-right var(--pp-float-duration-right) ease-in-out infinite;
}

/* Idle floating animations */
@keyframes pp-float-left {

    0%,
    100% {
        transform:
            rotate(var(--pp-left-hand-rotate)) translateY(0) rotate(0deg);
    }

    25% {
        transform:
            rotate(var(--pp-left-hand-rotate)) translateY(calc(var(--pp-float-amplitude) * -0.7)) rotate(calc(var(--pp-float-rotation) * 0.5));
    }

    50% {
        transform:
            rotate(var(--pp-left-hand-rotate)) translateY(calc(var(--pp-float-amplitude) * -1)) rotate(var(--pp-float-rotation));
    }

    75% {
        transform:
            rotate(var(--pp-left-hand-rotate)) translateY(calc(var(--pp-float-amplitude) * -0.5)) rotate(calc(var(--pp-float-rotation) * -0.5));
    }
}

@keyframes pp-float-right {

    0%,
    100% {
        transform:
            rotate(var(--pp-right-hand-rotate)) translateY(0) rotate(0deg);
    }

    30% {
        transform:
            rotate(var(--pp-right-hand-rotate)) translateY(calc(var(--pp-float-amplitude) * 0.8)) rotate(calc(var(--pp-float-rotation) * -0.7));
    }

    60% {
        transform:
            rotate(var(--pp-right-hand-rotate)) translateY(calc(var(--pp-float-amplitude) * 1)) rotate(calc(var(--pp-float-rotation) * -1));
    }

    80% {
        transform:
            rotate(var(--pp-right-hand-rotate)) translateY(calc(var(--pp-float-amplitude) * 0.4)) rotate(calc(var(--pp-float-rotation) * 0.3));
    }
}

/* ===================================
   CENTER CONTENT (SAFE ZONE)
   =================================== */
.pp-content {
    position: relative;
    z-index: 8;
    width: var(--pp-safe-zone-width);
    max-width: var(--pp-safe-zone-max-width);
    text-align: center;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Interaction State: Focus content */
.paradise-park.pp-interact-active .pp-content {
    transform: scale(1.02);
}

/* Minimal backdrop - very subtle, almost invisible */
.pp-content-backdrop {
    display: none;
    /* Remove card entirely for cleaner look */
}

.pp-headline {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 600;
    color: var(--pp-text-primary);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.02em;
}

.pp-headline em {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--pp-text-primary);
}

.pp-microcopy {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: var(--pp-text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 85%;
}

/* CTA Button - Sparkling Star Border */
.pp-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    background: transparent;
    color: var(--pp-button-color);
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    /* Removed solid border */
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.02em;
    overflow: visible;
}

/* Sparkling border container */
.pp-cta::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50px;
    background: transparent;
    /* Removed dashed border per user request */
    pointer-events: none;
}

/* Star particles container */
.pp-cta-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* 8-Point Star Shape (Compass) */
.pp-cta-star {
    position: absolute;
    width: 10px;
    /* Small but visible */
    height: 10px;
    background: #facc15;
    /* Dark Gold */
    /* 4-point star shape (Cross) */
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    animation: pp-btn-star-twinkle var(--star-duration, 2s) ease-in-out infinite;
    animation-delay: var(--star-delay, 0s);
    opacity: 0;
    transform: translate(-50%, -50%);
    /* Centered on coord */
}

@keyframes pp-btn-star-twinkle {

    0%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
    }

    50% {
        opacity: var(--star-opacity, 1);
        transform: translate(-50%, -50%) scale(1) rotate(45deg);
        /* Spin */
    }
}

.pp-cta:hover {
    background: var(--pp-button-hover-bg);
    transform: translateY(-2px);
}

.pp-cta:hover .pp-cta-star {
    animation-duration: 1s;
    /* Faster sparkle on hover */
}

.pp-cta:focus {
    outline: 2px solid var(--pp-button-color);
    outline-offset: 3px;
}

.pp-cta:active {
    transform: translateY(0);
}

/* Animated arrow in CTA */
.pp-cta-arrow {
    display: inline-flex;
    transition: transform 0.3s ease;
}

.pp-cta-arrow svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

.pp-cta:hover .pp-cta-arrow {
    transform: translateX(3px);
}

/* Secondary link */
.pp-secondary-link {
    font-size: 0.875rem;
    color: var(--pp-text-secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.3s ease;
    opacity: 0.8;
}

.pp-secondary-link:hover {
    color: var(--pp-button-gradient-start);
    opacity: 1;
}

.pp-secondary-link svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.pp-secondary-link:hover svg {
    transform: translateY(2px);
}

/* Scroll hint chevron */
.pp-scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: pp-scroll-bounce 2s ease-in-out infinite;
}

.pp-scroll-hint svg {
    width: 24px;
    height: 24px;
    stroke: var(--pp-text-secondary);
    opacity: 0.6;
}

@keyframes pp-scroll-bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(8px);
    }
}

/* ===================================
   ASTRAL CONSTELLATION SHIMMER
   =================================== */
.pp-astral-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* DECISIVE LAYER */
    pointer-events: none;
    overflow: hidden;
}

.astral-star {
    position: absolute;
    background: rgba(250, 204, 21, 0.9);
    /* Brighter Gold */
    width: 30px;
    /* Massive base */
    height: 30px;
    /* 4-Point Concave Star Shape */
    clip-path: polygon(50% 0%, 60% 45%, 100% 50%, 60% 55%, 50% 100%, 40% 55%, 0% 50%, 40% 45%);
    opacity: 0;
    pointer-events: none;
    /* REMOVED: filter: drop-shadow - causing heavy GPU lag on scroll */
    /* Alternative light glow using box-shadow won't work with clip-path, relying on bright color */
    animation:
        pp-twinkle var(--shimmer-duration, 2s) ease-in-out infinite,
        pp-star-float var(--float-duration, 15s) ease-in-out infinite;
    animation-delay: var(--shimmer-delay, 0s);
    z-index: 10;
    will-change: transform, opacity;
}

/* Rays removed for simple shape */

@keyframes pp-twinkle {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: var(--star-opacity, 0.5);
        /* Subtle peak opacity */
        transform: scale(1);
    }
}

@keyframes pp-star-float {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: var(--float-x, 15px) var(--float-y, -15px);
    }
}

/* ===================================
   NAV WHITE THEME (When over Paradise Park)
   =================================== */
.nav.nav-light {
    background-color: rgba(253, 248, 243, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav.nav-light .nav-logo img {
    filter: brightness(0) !important;
    /* Black logo */
}

.nav.nav-light .nav-toggle {
    color: #2D3436;
}

.nav.nav-light .hamburger .line {
    background-color: #2D3436;
}

.nav.nav-light .btn-gradient-content {
    background: #2D3436;
    color: #ffffff;
}

.nav.nav-light .nav-cta {
    color: #2D3436;
}

/* ===================================
   ACCESSIBILITY: REDUCED MOTION
   =================================== */
@media (prefers-reduced-motion: reduce) {

    .pp-hand--left,
    .pp-hand--right {
        animation: none !important;
    }

    .pp-clouds,
    .pp-clouds-2 {
        animation: none !important;
    }

    .pp-particle {
        animation: none !important;
        opacity: 0.3;
    }

    .pp-sun-glow,
    .pp-bloom {
        animation: none !important;
    }

    .pp-scroll-hint {
        animation: none !important;
    }

    .pp-cta {
        transition: none !important;
    }
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

/* Tablet */
@media (max-width: 850px) {
    :root {
        /* Bring hands closer visually for tablet */
        --pp-left-hand-top: 20%;
        --pp-left-hand-left: -11%;
        --pp-left-hand-width: 55vw;

        --pp-right-hand-bottom: 20%;
        --pp-right-hand-right: -15%;
        --pp-right-hand-width: 60vw;

        --pp-safe-zone-width: 60%;
    }

    .pp-content {
        padding: 2.5rem 1.5rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        /* Mobile: Hands much more visible/closer */
        --pp-left-hand-top: 20%;
        --pp-left-hand-left: -15%;
        --pp-left-hand-width: 80vw;

        --pp-right-hand-bottom: 20%;
        --pp-right-hand-right: -20%;
        --pp-right-hand-width: 80vw;

        --pp-safe-zone-width: 85%;
        --pp-parallax-strength: 5px;
        --pp-float-amplitude: 8px;
    }

    .paradise-park {
        min-height: 80vh;
        /* Slightly shorter on mobile usually feels better */
    }

    .pp-content {
        padding: 2rem 1.25rem;
    }

    .pp-headline {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
        /* Slightly larger for impact */
    }

    .pp-microcopy {
        max-width: 95%;
    }

    .pp-bloom,
    .pp-bloom-2 {
        display: none;
    }
}

/* Small Mobile */
@media (max-width: 680px) {
    :root {
        --pp-left-hand-width: 65vw;
        --pp-right-hand-width: 65vw;
        --pp-safe-zone-width: 85%;
    }

    .pp-content-backdrop {
        backdrop-filter: blur(15px);
    }

    .pp-scroll-hint {
        bottom: 1rem;
    }
}