/* 
 * KissBooK Loading Screen CSS
 * Complete Loading Screen Module — All 20 Animations & 10 Transitions
 */

:root {
  --kb-loading-bg: #0f172a;
  --kb-loading-opacity: 0.95;
  --kb-loading-accent: #059669;
  --kb-loading-text: #e2e8f0;
  --kb-loading-size: 80px;
}

/* ==========================================================================
   1. Base Loading Screen Overlay
   ========================================================================== */
#kb-loading-screen,
.kb-loading-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 999999999 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  visibility: visible !important;
  overflow: hidden !important;
  perspective: 1000px;
  background-color: var(--kb-loading-bg, #0f172a);
  pointer-events: all;
  transform: none !important;
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}

.kb-loading-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--kb-loading-bg, #0f172a);
  opacity: var(--kb-loading-opacity, 0.95);
  z-index: -1;
}

.kb-loading-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: auto !important;
  padding: 20px !important;
  gap: 18px !important;
  transform-style: preserve-3d !important;
  width: 100% !important;
  max-width: 320px !important;
  box-sizing: border-box !important;
}

.kb-loading-logo,
.kb-loading-img,
.kbc-preview-logo {
  width: var(--kb-loading-size, 80px) !important;
  height: var(--kb-loading-size, 80px) !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
}

.kb-loading-text {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.kb-loading-progress-container,
.kb-progress-container {
  margin: 0 auto !important;
}

/* ==========================================================================
   2. 10 Generic Animations (Aliased for all selector styles)
   ========================================================================== */
.kb-anim-spin, .anim-spin, .kb-loading-anim-spin, [data-anim="spin"] {
  animation: kbSpin 1.4s linear infinite;
}
@keyframes kbSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.kb-anim-pulse, .anim-pulse, .kb-loading-anim-pulse, [data-anim="pulse"] {
  animation: kbPulse 1.5s ease-in-out infinite;
}
@keyframes kbPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.85; filter: drop-shadow(0 0 12px var(--kb-loading-accent, #059669)); }
}

.kb-anim-bounce, .anim-bounce, .kb-loading-anim-bounce, [data-anim="bounce"] {
  animation: kbBounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}
@keyframes kbBounce {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  35%      { transform: translateY(-30px) scaleY(1.08) scaleX(0.95); }
  85%      { transform: translateY(0) scaleY(0.85) scaleX(1.12); }
  92%      { transform: translateY(-4px) scaleY(1.02); }
}

.kb-anim-shake, .anim-shake, .kb-loading-anim-shake, [data-anim="shake"] {
  animation: kbShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
@keyframes kbShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(-8px) rotate(-4deg); }
  40%      { transform: translateX(8px) rotate(4deg); }
  60%      { transform: translateX(-5px) rotate(-2deg); }
  80%      { transform: translateX(5px) rotate(2deg); }
}

.kb-anim-float, .anim-float, .kb-loading-anim-float, [data-anim="float"] {
  animation: kbFloat 2.2s ease-in-out infinite;
}
@keyframes kbFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 5px 8px rgba(0,0,0,0.3)); }
  50%      { transform: translateY(-16px); filter: drop-shadow(0 20px 15px rgba(0,0,0,0.15)); }
}

.kb-anim-breathe, .anim-breathe, .kb-loading-anim-breathe, [data-anim="breathe"] {
  animation: kbBreathe 2s ease-in-out infinite;
}
@keyframes kbBreathe {
  0%, 100% { transform: scale(0.88); opacity: 0.55; }
  50%      { transform: scale(1.12); opacity: 1; filter: drop-shadow(0 0 15px var(--kb-loading-accent, #059669)); }
}

.kb-anim-swing, .anim-swing, .kb-loading-anim-swing, [data-anim="swing"] {
  transform-origin: top center;
  animation: kbSwing 1.6s ease-in-out infinite;
}
@keyframes kbSwing {
  0%, 100% { transform: rotate(18deg); }
  50%      { transform: rotate(-18deg); }
}

.kb-anim-glitch, .anim-glitch, .kb-loading-anim-glitch, [data-anim="glitch"] {
  animation: kbGlitch 0.6s steps(2, start) infinite;
}
@keyframes kbGlitch {
  0%, 100% { transform: translate(0); filter: none; }
  20%      { transform: translate(-4px, 2px); filter: hue-rotate(90deg) saturate(2); }
  40%      { transform: translate(4px, -2px); filter: hue-rotate(180deg) invert(0.2); }
  60%      { transform: translate(-2px, 3px); filter: hue-rotate(270deg); }
  80%      { transform: translate(2px, -3px); filter: hue-rotate(45deg); }
}

.kb-anim-morph, .anim-morph, .kb-loading-anim-morph, [data-anim="morph"] {
  animation: kbMorph 3s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes kbMorph {
  0%   { border-radius: 50%; transform: scale(1); }
  25%  { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: scale(1.05) rotate(5deg); }
  50%  { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(0.95) rotate(-5deg); }
  75%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.08) rotate(3deg); }
  100% { border-radius: 50%; transform: scale(1); }
}

.kb-anim-flip, .anim-flip, .kb-loading-anim-flip, [data-anim="flip"] {
  animation: kbFlip 1.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  transform-style: preserve-3d;
}
@keyframes kbFlip {
  0%   { transform: perspective(500px) rotateY(0deg); }
  50%  { transform: perspective(500px) rotateY(180deg) scale(1.1); }
  100% { transform: perspective(500px) rotateY(360deg); }
}

/* ==========================================================================
   3. 10 Book-Themed Animations
   ========================================================================== */
.kb-anim-book-flip, .anim-book-flip, .kb-loading-anim-book-flip, [data-anim="book-flip"] {
  animation: kbBookFlip 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  transform-style: preserve-3d;
}
@keyframes kbBookFlip {
  0%   { transform: perspective(600px) rotateY(0deg); }
  50%  { transform: perspective(600px) rotateY(180deg) scale(1.12); }
  100% { transform: perspective(600px) rotateY(360deg); }
}

.kb-anim-book-shake, .anim-book-shake, .kb-loading-anim-book-shake, [data-anim="book-shake"] {
  animation: kbBookShake 0.45s ease-in-out infinite;
}
@keyframes kbBookShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-4px) rotate(-3deg); }
  75%      { transform: translateX(4px) rotate(3deg); }
}

.kb-anim-book-glow, .anim-book-glow, .kb-loading-anim-book-glow, [data-anim="book-glow"] {
  animation: kbBookGlow 2s ease-in-out infinite;
}
@keyframes kbBookGlow {
  0%, 100% { filter: drop-shadow(0 0 6px var(--kb-loading-accent, #059669)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 25px #fbbf24) drop-shadow(0 0 45px #f59e0b); transform: scale(1.1); }
}

.kb-anim-book-open, .anim-book-open, .kb-loading-anim-book-open, [data-anim="book-open"] {
  animation: kbBookOpen 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate;
  transform-origin: center center;
}
@keyframes kbBookOpen {
  0%   { transform: perspective(600px) rotateY(0deg) scale(0.95); }
  100% { transform: perspective(600px) rotateY(-40deg) rotateX(15deg) scale(1.1); }
}

.kb-anim-book-pages, .anim-book-pages, .kb-loading-anim-book-pages, [data-anim="book-pages"] {
  animation: kbBookPagesFlutter 1.6s ease-in-out infinite alternate;
}
@keyframes kbBookPagesFlutter {
  0%   { transform: perspective(500px) rotateY(0deg) translateY(0); }
  50%  { transform: perspective(500px) rotateY(-25deg) translateY(-8px); }
  100% { transform: perspective(500px) rotateY(25deg) translateY(-4px); }
}

.kb-anim-book-spiral, .anim-book-spiral, .kb-loading-anim-book-spiral, [data-anim="book-spiral"] {
  animation: kbBookSpiral 3.5s linear infinite;
  transform-style: preserve-3d;
}
@keyframes kbBookSpiral {
  0%   { transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

.kb-anim-book-bounce, .anim-book-bounce, .kb-loading-anim-book-bounce, [data-anim="book-bounce"] {
  animation: kbBookBounce 1.4s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}
@keyframes kbBookBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-35px) scale(1.08); }
  85%      { transform: translateY(0) scaleY(0.88) scaleX(1.1); }
}

.kb-anim-book-morph, .anim-book-morph, .kb-loading-anim-book-morph, [data-anim="book-morph"] {
  animation: kbBookMorph 2.5s ease-in-out infinite alternate;
}
@keyframes kbBookMorph {
  0%   { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); }
  50%  { transform: scale(1.15) rotate(10deg); filter: hue-rotate(60deg) drop-shadow(0 0 15px #a855f7); }
  100% { transform: scale(0.9) rotate(-10deg); filter: hue-rotate(-60deg) drop-shadow(0 0 15px #06b6d4); }
}

.kb-anim-book-magic, .anim-book-magic, .kb-loading-anim-book-magic, [data-anim="book-magic"] {
  animation: kbBookMagic 2.2s ease-in-out infinite;
}
@keyframes kbBookMagic {
  0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 0 8px #fde047); }
  33%      { transform: translateY(-15px) rotate(6deg); filter: drop-shadow(0 0 22px #a855f7); }
  66%      { transform: translateY(-8px) rotate(-6deg); filter: drop-shadow(0 0 25px #38bdf8); }
}

.kb-anim-book-stack, .anim-book-stack, .kb-loading-anim-book-stack, [data-anim="book-stack"] {
  animation: kbBookStack 1.8s ease-in-out infinite alternate;
}
@keyframes kbBookStack {
  0%   { transform: translateY(8px) scale(0.96); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }
  100% { transform: translateY(-14px) scale(1.04); filter: drop-shadow(0 18px 14px rgba(0,0,0,0.2)); }
}

/* ==========================================================================
   4. 10 Exit Transitions (Aliased for all selector formats)
   ========================================================================== */
.kb-loading-overlay.kbc-hidden.trans-fade,
.kb-loading-overlay.kb-loading-exit.trans-fade,
.kb-loading-overlay.kbc-hidden.kb-exit-fade,
.kb-loading-overlay.kb-loading-exit.kb-exit-fade,
.trans-fade.kbc-hidden,
.preview-exit-fade {
  animation: kbExitFade 0.5s ease forwards !important;
}
@keyframes kbExitFade {
  0%   { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-slide-up,
.kb-loading-overlay.kb-loading-exit.trans-slide-up,
.kb-loading-overlay.kbc-hidden.kb-exit-slide-up,
.kb-loading-overlay.kb-loading-exit.kb-exit-slide-up,
.trans-slide-up.kbc-hidden,
.preview-exit-slide-up {
  animation: kbExitSlideUp 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
@keyframes kbExitSlideUp {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-slide-down,
.kb-loading-overlay.kb-loading-exit.trans-slide-down,
.kb-loading-overlay.kbc-hidden.kb-exit-slide-down,
.kb-loading-overlay.kb-loading-exit.kb-exit-slide-down,
.trans-slide-down.kbc-hidden,
.preview-exit-slide-down {
  animation: kbExitSlideDown 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
@keyframes kbExitSlideDown {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-zoom-out,
.kb-loading-overlay.kb-loading-exit.trans-zoom-out,
.kb-loading-overlay.kbc-hidden.kb-exit-zoom-out,
.kb-loading-overlay.kb-loading-exit.kb-exit-zoom-out,
.trans-zoom-out.kbc-hidden,
.preview-exit-zoom-out {
  animation: kbExitZoomOut 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
@keyframes kbExitZoomOut {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.3); opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-zoom-in,
.kb-loading-overlay.kb-loading-exit.trans-zoom-in,
.kb-loading-overlay.kbc-hidden.kb-exit-zoom-in,
.kb-loading-overlay.kb-loading-exit.kb-exit-zoom-in,
.trans-zoom-in.kbc-hidden,
.preview-exit-zoom-in {
  animation: kbExitZoomIn 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
@keyframes kbExitZoomIn {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-curtain,
.kb-loading-overlay.kb-loading-exit.trans-curtain,
.kb-loading-overlay.kbc-hidden.kb-exit-curtain,
.kb-loading-overlay.kb-loading-exit.kb-exit-curtain,
.trans-curtain.kbc-hidden,
.preview-exit-curtain {
  animation: kbExitCurtain 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
@keyframes kbExitCurtain {
  0%   { transform: scaleY(1); opacity: 1; }
  50%  { opacity: 0.9; }
  100% { transform: scaleY(0); opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-circle,
.kb-loading-overlay.kb-loading-exit.trans-circle,
.kb-loading-overlay.kbc-hidden.kb-exit-circle,
.kb-loading-overlay.kb-loading-exit.kb-exit-circle,
.trans-circle.kbc-hidden,
.preview-exit-circle {
  animation: kbExitCircle 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
@keyframes kbExitCircle {
  0%   { clip-path: circle(100% at 50% 50%); opacity: 1; }
  100% { clip-path: circle(0% at 50% 50%); opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-blur,
.kb-loading-overlay.kb-loading-exit.trans-blur,
.kb-loading-overlay.kbc-hidden.kb-exit-blur,
.kb-loading-overlay.kb-loading-exit.kb-exit-blur,
.trans-blur.kbc-hidden,
.preview-exit-blur {
  animation: kbExitBlur 0.6s ease forwards !important;
}
@keyframes kbExitBlur {
  0%   { filter: blur(0px); opacity: 1; }
  100% { filter: blur(35px); opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-flip-away,
.kb-loading-overlay.kb-loading-exit.trans-flip-away,
.kb-loading-overlay.kbc-hidden.kb-exit-flip-away,
.kb-loading-overlay.kb-loading-exit.kb-exit-flip-away,
.trans-flip-away.kbc-hidden,
.preview-exit-flip-away {
  transform-origin: top center;
  animation: kbExitFlipAway 0.7s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
@keyframes kbExitFlipAway {
  0%   { transform: perspective(800px) rotateX(0deg); opacity: 1; }
  100% { transform: perspective(800px) rotateX(90deg); opacity: 0; visibility: hidden; pointer-events: none; }
}

.kb-loading-overlay.kbc-hidden.trans-shatter,
.kb-loading-overlay.kb-loading-exit.trans-shatter,
.kb-loading-overlay.kbc-hidden.kb-exit-shatter,
.kb-loading-overlay.kb-loading-exit.kb-exit-shatter,
.trans-shatter.kbc-hidden,
.preview-exit-shatter {
  animation: kbExitShatter 0.65s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
@keyframes kbExitShatter {
  0%   { filter: blur(0) contrast(1); transform: scale(1); opacity: 1; }
  40%  { filter: blur(6px) contrast(2.5); transform: scale(1.12); opacity: 0.85; }
  100% { filter: blur(25px) contrast(6); transform: scale(1.6); opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ==========================================================================
   5. Progress Bar & Styles
   ========================================================================== */
.kb-loading-progress-container,
.kb-progress-container,
.kbc-preview-progress {
  width: 200px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}

.kb-loading-progress-bar,
.kb-progress-bar,
.kbc-preview-progress-bar {
  height: 100%;
  width: 60%;
  background: var(--kb-loading-accent, #059669);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Gradient progress style */
.kb-progress-style-gradient .kb-progress-bar,
.kb-loading-progress-bar.style-gradient {
  background: linear-gradient(90deg, transparent, var(--kb-loading-accent, #059669), transparent);
  background-size: 200% 100%;
  animation: kbProgressBarGradient 1.8s infinite linear;
}
@keyframes kbProgressBarGradient {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   6. Loading Text
   ========================================================================== */
.kb-loading-text,
.kbc-preview-text {
  color: var(--kb-loading-text, #e2e8f0);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   7. Admin Gallery / Grid Logo Item Preview Card
   ========================================================================== */
.kbc-logo-preview {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #ffffff;
  padding: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.kbc-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* ==========================================================================
   8. Responsive (Mobile / GSM Center Alignment)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --kb-loading-size: 70px;
  }
  #kb-loading-screen,
  .kb-loading-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .kb-loading-content {
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
    max-width: 85vw !important;
  }
  .kb-loading-logo,
  .kb-loading-img {
    margin: 0 auto !important;
  }
  .kb-loading-text, .kbc-preview-text {
    font-size: 14px !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .kb-loading-progress-container, .kb-progress-container, .kbc-preview-progress {
    width: 180px !important;
    max-width: 75vw !important;
    margin: 0 auto !important;
  }
}