/* ========================================
   Premium Styles – kiwebsites.com
   
   NOTE: These styles are now merged into generic.css.
   This file is kept for the CSS import in head.php
   but contains only supplementary premium effects.
   ======================================== */

/* ---- Premium Orbs (Decorative floating orbs) ---- */
.premium-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  transition: opacity 0.6s ease;
}

body.revealed .premium-orb {
  opacity: 0;
}

.premium-orb--1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: -100px;
  background: radial-gradient(circle, rgba(223, 34, 50, 0.06) 0%, transparent 70%);
  animation: orbFloat 8s ease-in-out infinite alternate;
}

.premium-orb--2 {
  width: 200px;
  height: 200px;
  bottom: 20%;
  left: -50px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  animation: orbFloat 10s ease-in-out infinite alternate-reverse;
}

@keyframes orbFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-30px) scale(1.1); }
}

/* ---- Scroll reveal for sections ---- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}