/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.blue {
	color:#29A1DB;
}

.pink {
	background-color: #FF409D;
    padding: 5px;
}

.pink_text {
	color: #FF409D;
}


.typewritter {
  /* 1. Makes the span behave like a box so we can animate width */
  display: inline-block; 
  
  /* 2. aligns the pink box with the text "Experience" */
  vertical-align: bottom; 
  
  /* 3. Ensures the pink padding is hidden when width is 0 */
  box-sizing: border-box; 
  
  /* 4. Hides the text "Something" initially */
  overflow: hidden;
  white-space: nowrap;
  
  /* 5. Start at 0 width */
  width: 0;
  
  /* 6. The Animation */
  /* 1.5s is speed. steps(10) creates the jerky typing feel */
  animation: typing-reveal 1.5s steps(10, end) forwards;
}

@keyframes typing-reveal {
  from { 
    width: 0; 
  }
  to { 
    /* 
       IMPORTANT: 
       "Something" is 9 letters. We use 'ch' (character units).
       We use 11ch to allow a tiny bit of extra space for the padding.
       If the text gets cut off, change 11ch to 12ch or 120px.
    */
    width: 10ch; 
  }
}


.hover_text_slides, .hover_text {
	display:none;
}

body:has(.hover-camden_2:hover) .hover_text_slides {
    display: block;
}

body:has(.hover-camden_1:hover) .hover_text {
    display: block;
}

.hover_text-1, .hover_text-2, .hover_text-3 {
	display:none;
}

.hover_container:hover .hover_text {
	display:block;
}

.hover_container:hover .hover_text_slides {
	display:block;
}

/* When the body sees the trigger being hovered, show the target */
body:has(.hover-trigger-1:hover) .hover_text-1 {
    display: block;
}
body:has(.hover-trigger-2:hover) .hover_text-2 {
    display: block;
}
body:has(.hover-trigger-3:hover) .hover_text-3 {
    display: block;
}







body {
    /* 1. Deep Dark Base Color */
    background-color: #0b0f16 !important;
    
    /* Need these to keep the blobs contained properly */
    position: relative; 
    overflow-x: hidden; 
}

/* 2. Base settings for BOTH floating blobs */
body::before,
body::after {
    content: "";
    position: fixed; /* Keeps them on screen even if the user scrolls */
    width: 60vw; /* Blob size */
    height: 60vh;
    z-index: -1; /* Pushes them behind your text/images */
    filter: blur(120px); /* THE LAVA LAMP SECRET: Massive blur for soft, glowing edges */
    opacity: 0.4; /* Keeps them moody and not blinding */
    border-radius: 50%; /* Makes them round */
}

/* 3. The Pink Blob */
body::before {
    background-color: #ff2690;
    top: -10%;
    left: -10%;
    /* 35 seconds, alternating back and forth */
    animation: floatPink 15s ease-in-out infinite alternate;
}

/* 4. The Green Blob */
body::after {
    background-color: #56bec7;
    bottom: -10%;
    right: -10%;
    /* 40 seconds so they unsync from the pink blob and look random */
    animation: floatGreen 10s ease-in-out infinite alternate;
}

/* 5. Pink Movement Path (Moves from Top-Left toward Bottom-Right) */
@keyframes floatPink {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(40vw, 20vh) scale(1.3); } 
    66%  { transform: translate(20vw, 50vh) scale(0.8); } 
    100% { transform: translate(60vw, 40vh) scale(1.1); }
}

/* 6. Green Movement Path (Moves from Bottom-Right toward Top-Left) */
@keyframes floatGreen {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-30vw, -40vh) scale(1.2); } 
    66%  { transform: translate(-50vw, -10vh) scale(0.9); } 
    100% { transform: translate(-20vw, -60vh) scale(1.1); }
}


/* 7. Mobile Adjustments for Vibrancy */
@media (max-width: 768px) {
    body::before,
    body::after {
        width: 140vw; /* Make the blobs much wider to fill the narrow screen */
        height: 60vh; /* Keep them tall enough */
        filter: blur(80px); /* Reduce the blur so the color stays concentrated */
        opacity: 0.65; /* Bump up the base opacity for more vibrancy */
    }

    /* Optional: Keep the pink blob a bit higher on mobile so it doesn't get lost */
    body::before {
        top: -5%;
        left: -20%;
    }

    /* Optional: Keep the green blob anchored better at the bottom */
    body::after {
        bottom: -5%;
        right: -20%;
    }
}