/*
Theme Name: Zain Beauty
Theme URI: https://zainbeauty.com
Author: Zain Beauty Engineering
Author URI: https://zainbeauty.com
Description: High-performance, luxury beauty & cosmetics WordPress theme with WooCommerce support, deferred assets, optimized Core Web Vitals, and animated brand identity.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zain-beauty
Tags: e-commerce, beauty, makeup, cosmetics, woocommerce, responsive-layout, custom-menu, block-styles, wide-blocks
*/

/* Custom Keyframe Animations for Zain Beauty Logo */
@keyframes zainLetterHop {
  0%, 100% {
    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
  }
  15% {
    transform: translateY(-12px) translateX(3px) scale(1.18) rotate(-6deg);
    color: #ff3300;
  }
  30% {
    transform: translateY(-4px) translateX(-2px) scale(1.08) rotate(3deg);
  }
  45% {
    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
  }
}

@keyframes beautyLetterDance {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-6px) scale(1.12) rotate(4deg);
    color: #ff5522;
  }
  40% {
    transform: translateY(0) scale(1);
  }
}

@keyframes logoSparkleShine {
  0%, 70%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.85;
  }
  15% {
    transform: scale(1.35) rotate(25deg);
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255, 85, 34, 0.8));
  }
}

.animate-zain-hop {
  display: inline-block;
  animation: zainLetterHop 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  transform-origin: bottom center;
}

.animate-beauty-dance {
  display: inline-block;
  animation: beautyLetterDance 4.5s ease-in-out infinite;
  transform-origin: center;
}

.animate-sparkle-shine {
  animation: logoSparkleShine 4.5s ease-in-out infinite;
}

/* Accessibility Screen Reader Text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #111111;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}