/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: f8dsgn
 Author URI: f8dsgn.com 
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* ===================================
   ANIMATED BLOB BACKGROUND
   ===================================
   
   Usage: Add class to Divi section
   Advanced > CSS ID & Classes > CSS Class: animated-blobs
   
   Features:
   - 3 organic blob shapes with smooth animations
   - Customizable colors via CSS variables
   - Beautiful color blending effects
   - Pure CSS animations, no JavaScript complexity
   
   Color themes available:
   - animated-blobs (default: pink, cyan, blue)
   - animated-blobs warm (red, orange, yellow)
   - animated-blobs cool (blue, teal, purple)
   - animated-blobs green (green variations)
*/

/* CSS Custom Properties for Blob Animation */
:root {
  --blob-size: 600px;
  --blob-speed: 12s;
  --blob-speed-scale: calc(0.75 * var(--blob-speed));
  --blob-speed-move: calc(1 * var(--blob-speed));
  --blob-speed-rotate: calc(2 * var(--blob-speed));
  --blob-opacity: 0.5;
  --blob-blur: 70px;
  --blob-color-1: hsl(110, 86%, 38%); /* Pink */
  --blob-color-2: hsl(182, 84%, 43%); /* Cyan */
  --blob-color-3: hsl(216, 89%, 34%); /* Blue */
  --blob-fade-amount: 5%; /* Fade zone size at top/bottom */
}

/* Base animated blobs container */
.animated-blobs {
  position: relative;
  overflow: hidden;
}

.animated-blobs .blobs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  filter: blur(var(--blob-blur));
  pointer-events: none;
  mask: linear-gradient(to bottom,
    transparent 0%,
    black var(--blob-fade-amount),
    black calc(100% - var(--blob-fade-amount)),
    transparent 100%
  );
  -webkit-mask: linear-gradient(to bottom,
    transparent 0%,
    black var(--blob-fade-amount),
    black calc(100% - var(--blob-fade-amount)),
    transparent 100%
  );
}

.animated-blobs .blobs * {
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Individual blob styling */
.blob {
  width: 1000px;
  height: 1000px;
  background-color: var(--blob-color-1);
  border-radius: 50%;
  opacity: var(--blob-opacity);
  mix-blend-mode: normal;
  animation: blob ease-in-out var(--blob-speed-scale) infinite;
}

/* Different colors for each blob */
.blobs > :nth-child(2) .blob {
  background-color: var(--blob-color-2);
  animation-delay: calc(-0.8 * var(--blob-speed-scale));
}

.blobs > :nth-child(3) .blob {
  background-color: var(--blob-color-3);
  animation-delay: calc(-0.2 * var(--blob-speed-scale));
}

/* Blob scaling animation */
@keyframes blob {
  0%, 100% {
    transform: scale(0.8, 2);
  }
  50% {
    transform: scale(1.4, 0.8);
  }
}

/* Rotation container */
.blob-rotate {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: blob-rotate linear var(--blob-speed-rotate) infinite alternate;
}

.blob-rotate:nth-child(2) {
  animation-duration: calc(2 * var(--blob-speed-rotate));
  animation-delay: calc(-1.5 * var(--blob-speed-rotate));
}

.blob-rotate:nth-child(3) {
  animation-direction: alternate-reverse;
  animation-duration: calc(0.8 * var(--blob-speed-rotate));
  animation-delay: calc(-1 * var(--blob-speed-rotate));
}

/* Rotation animation */
@keyframes blob-rotate {
  0% {
    transform: translate3d(-50%, -50%, 0) rotateZ(-28deg);
    transform-origin: 50% 100%;
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotateZ(28deg);
    transform-origin: 50% 0%;
  }
}

/* Movement container */
.blob-move {
  animation: blob-move ease-in-out var(--blob-speed-move) infinite;
}

.blobs > :nth-child(2) .blob-move {
  animation-delay: calc(-0.8 * var(--blob-speed-move));
}

.blobs > :nth-child(3) .blob-move {
  animation-delay: calc(-0.4 * var(--blob-speed-move));
}

/* Movement animation */
@keyframes blob-move {
  0%, 100% {
    transform: translateX(30%);
  }
  50% {
    transform: translateX(-30%);
  }
}

/* Color Theme Variants */
.animated-blobs.warm {
  --blob-color-1: hsl(0deg, 100%, 55%);   /* Red */
  --blob-color-2: hsl(30deg, 100%, 55%);  /* Orange */
  --blob-color-3: hsl(60deg, 100%, 55%);  /* Yellow */
}

.animated-blobs.cool {
  --blob-color-1: hsl(220deg, 100%, 55%); /* Blue */
  --blob-color-2: hsl(180deg, 100%, 55%); /* Teal */
  --blob-color-3: hsl(270deg, 100%, 55%); /* Purple */
}

.animated-blobs.green {
  --blob-color-1: hsl(120deg, 100%, 40%); /* Green */
  --blob-color-2: hsl(160deg, 100%, 45%); /* Teal Green */
  --blob-color-3: hsl(90deg, 100%, 50%);  /* Lime Green */
}

/* Ensure content appears above blobs */
.animated-blobs > .et_pb_row,
.animated-blobs > .et_pb_column,
.animated-blobs > .et_pb_module {
  position: relative;
  z-index: -1;
}

/* Responsive Design */
@media (max-width: 768px) {
  .animated-blobs {
    --blob-size: 400px;
    --blob-blur: 60px;
  }
}

@media (max-width: 480px) {
  .animated-blobs {
    --blob-size: 300px;
    --blob-blur: 40px;
  }
}

/* Performance optimization for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animated-blobs .blob,
  .animated-blobs .blob-rotate,
  .animated-blobs .blob-move {
    animation-duration: calc(var(--blob-speed) * 3);
  }
}

/* Debug Mode - Visible Blobs for Testing */
.animated-blobs.debug .blobs {
  filter: none !important;
  z-index: -1 !important;
}

.animated-blobs.debug .blob {
  background-color: rgba(255, 0, 0, 0.8) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  width: 200px !important;
  height: 200px !important;
  border: 3px solid #00ff00 !important;
  border-radius: 50% !important;
}

/* Fallback for browsers without mix-blend-mode support */
@supports not (mix-blend-mode: multiply) {
  .blob {
    mix-blend-mode: normal;
    opacity: 0.3;
  }
}

/* ===================================
   TYPEWRITER EFFECT
   ===================================

   Usage: Add class to Divi Text module
   Advanced > CSS ID & Classes > CSS Class: typewriter

   Features:
   - Pure CSS character-by-character typing animation
   - Blinking cursor effect
   - Customizable speed, cursor color, and steps
   - Support for multiple sequential lines
   - Responsive and accessible

   Customization with CSS variables:
   --typewriter-speed: Animation duration (default: 3s)
   --typewriter-cursor-color: Cursor color (default: #0c71c3)
   --typewriter-steps: Number of typing steps (default: 40)

   Examples:
   Single line: <h1 class="typewriter">Your text here</h1>

   Multiple lines (sequential):
   <h1 class="typewriter typewriter-line-1">First line</h1>
   <h2 class="typewriter typewriter-line-2">Second line</h2>
   <h3 class="typewriter typewriter-line-3">Third line</h3>
*/

/* CSS Custom Properties for Typewriter */
:root {
  --typewriter-speed: 3s;
  --typewriter-cursor-color: #0c71c3;
  --typewriter-steps: 40;
}

/* Base typewriter effect */
.typewriter {
  overflow: hidden;
  border-right: .15em solid var(--typewriter-cursor-color);
  white-space: nowrap;
  margin: 0;
  letter-spacing: .05em;
  animation:
    typing var(--typewriter-speed) steps(var(--typewriter-steps), end),
    blink-caret .75s step-end infinite;
  animation-fill-mode: forwards;
  display: inline-block;
  max-width: 100%;
}

/* Typing animation */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Blinking cursor animation */
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: var(--typewriter-cursor-color);
  }
}

/* Sequential typing for multiple lines */
.typewriter-line-1 {
  animation-delay: 0s;
}

.typewriter-line-2 {
  animation-delay: 3.5s;
  width: 0; /* Start hidden */
}

.typewriter-line-3 {
  animation-delay: 7s;
  width: 0; /* Start hidden */
}

.typewriter-line-4 {
  animation-delay: 10.5s;
  width: 0; /* Start hidden */
}

/* Remove cursor after typing (add this class to last line) */
.typewriter-final {
  animation: typing var(--typewriter-speed) steps(var(--typewriter-steps), end);
  border-right: none;
}

/* Speed variants */
.typewriter-fast {
  --typewriter-speed: 1.5s;
}

.typewriter-slow {
  --typewriter-speed: 5s;
}

.typewriter-very-slow {
  --typewriter-speed: 8s;
}

/* Color variants */
.typewriter-green {
  --typewriter-cursor-color: #10b981;
}

.typewriter-orange {
  --typewriter-cursor-color: #f97316;
}

.typewriter-purple {
  --typewriter-cursor-color: #a855f7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .typewriter {
    letter-spacing: .03em;
    --typewriter-steps: 30;
  }
}

@media (max-width: 480px) {
  .typewriter {
    letter-spacing: .02em;
    --typewriter-steps: 25;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .typewriter {
    animation: none;
    width: 100%;
    border-right: none;
  }
}