/* ============================================================
   ePlanet Technologies — Premium Animations & Transitions
   ============================================================ */

/* ── PAGE TRANSITION OVERLAY ──────────────────────────────── */

#eplanet-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-110%);
  will-change: transform;
}

#eplanet-overlay .eo-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #030816 0%, #04143c 35%, #092a82 70%, #4183e0 100%);
}

/* Entering: sweeps from left to cover the whole page */
#eplanet-overlay.covering {
  pointer-events: all;
  animation: eoSweepIn 0.72s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* Pre-cover state: immediately on-screen (at start of new page load) */
#eplanet-overlay.covered {
  transform: translateX(0%);
  transition: none;
  pointer-events: all;
}

/* Exiting: sweeps out to the right revealing the new page */
#eplanet-overlay.uncovering {
  pointer-events: none;
  animation: eoSweepOut 0.75s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes eoSweepIn {
  0%   { transform: translateX(-110%) skewX(-3deg); }
  100% { transform: translateX(0%)    skewX(0deg);  }
}

@keyframes eoSweepOut {
  0%   { transform: translateX(0%)    skewX(0deg);  }
  100% { transform: translateX(110%)  skewX(3deg);  }
}

/* Brand mark shown at centre of overlay */
#eplanet-overlay .eo-brand {
  position: relative;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.35s ease 0.25s, transform 0.35s ease 0.25s;
}

#eplanet-overlay.covering  .eo-brand,
#eplanet-overlay.covered   .eo-brand { opacity: 1; transform: scale(1); }
#eplanet-overlay.uncovering .eo-brand { opacity: 0; transform: scale(1.1); transition-delay: 0s; }

/* Pulsing rings inside overlay */
.eo-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(171, 205, 215, 0.3);
  transform: translate(-50%, -50%) scale(0.8);
  animation: eoRipple 2.2s ease-out infinite;
}
.eo-ring:nth-child(1) { width:  80px; height:  80px; animation-delay: 0s;   }
.eo-ring:nth-child(2) { width: 140px; height: 140px; animation-delay: 0.35s;}
.eo-ring:nth-child(3) { width: 200px; height: 200px; animation-delay: 0.7s; }

@keyframes eoRipple {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0;   }
}

/* Progress bar at top of page (appears on link click) */
#eplanet-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 100000;
  background: linear-gradient(90deg, #abcdd7, #4183e0, #818cf8);
  box-shadow: 0 0 12px rgba(65, 131, 224, 0.8);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  opacity: 0;
}
#eplanet-progress.active { opacity: 1; }


/* ── SCROLL ANIMATION SYSTEM ─────────────────────────────── */

[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-anim="fade-up"]    { transform: translateY(40px); }
[data-anim="fade-down"]  { transform: translateY(-40px); }
[data-anim="fade-left"]  { transform: translateX(-50px); }
[data-anim="fade-right"] { transform: translateX(50px); }
[data-anim="scale-in"]   { transform: scale(0.85); }
[data-anim="zoom-up"]    { transform: scale(0.8) translateY(25px); }
[data-anim="flip-up"]    { transform: perspective(600px) rotateX(25deg) translateY(20px); transform-origin: bottom; }

[data-anim].anim-in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotateX(0deg);
  transition:
    opacity  0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-anim][data-delay="0"] { transition-delay:   0ms; }
[data-anim][data-delay="1"] { transition-delay:  90ms; }
[data-anim][data-delay="2"] { transition-delay: 180ms; }
[data-anim][data-delay="3"] { transition-delay: 270ms; }
[data-anim][data-delay="4"] { transition-delay: 360ms; }
[data-anim][data-delay="5"] { transition-delay: 450ms; }
[data-anim][data-delay="6"] { transition-delay: 540ms; }
[data-anim][data-delay="7"] { transition-delay: 630ms; }

/* ── COMPATIBLE WITH EXISTING .reveal CLASSES ─────────────── */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(65, 131, 224, 0.7);
  outline-offset: 3px;
  border-radius: 6px;
}