/* ================================================================
   RUMDIGI v2 — Animations & Scroll Effects
   ================================================================ */

/* === SCROLL REVEAL === */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="down"]  { transform: translateY(-32px); }
[data-reveal="left"]  { transform: translateX(32px); }
[data-reveal="right"] { transform: translateX(-32px); }
[data-reveal="fade"]  { transform: scale(0.97); }

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* Delay variants */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }

/* === HERO PARTICLES / GRID BG === */
.rd-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.rd-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(86,186,220,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86,186,220,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 0%, transparent 80%);
}
.rd-hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(42,111,151,0.15) 0%, rgba(86,186,220,0.05) 40%, transparent 70%);
  animation: rd-pulse-glow 6s ease-in-out infinite;
}
.rd-hero-orb-1 {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86,186,220,0.08) 0%, transparent 70%);
  animation: rd-float 8s ease-in-out infinite;
}
.rd-hero-orb-2 {
  position: absolute;
  bottom: 10%;
  left: 5%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,101,26,0.06) 0%, transparent 70%);
  animation: rd-float 10s ease-in-out infinite reverse;
}

/* === KEYFRAMES === */
@keyframes rd-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-20px) rotate(3deg); }
  66%       { transform: translateY(-10px) rotate(-2deg); }
}
@keyframes rd-pulse-glow {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}
@keyframes rd-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rd-shimmer-text {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes rd-bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes rd-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rd-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* === HERO TYPING CURSOR === */
.rd-hero-cursor::after {
  content: '|';
  animation: rd-blink 0.9s step-end infinite;
  color: var(--rd-accent);
  margin-left: 2px;
}

/* === COUNTER ANIMATION === */
.rd-counter-num { display: inline; }

/* === DECORATED SECTION BG === */
.rd-section-decorated {
  position: relative;
  overflow: hidden;
}
.rd-section-decorated::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42,111,151,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* === HOVER CARD LIFT === */
.rd-hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.rd-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--rd-shadow-lg); }

/* === GRADIENT BORDER === */
.rd-gradient-border {
  position: relative;
  background: var(--rd-bg-card);
  border-radius: var(--rd-radius-lg);
}
.rd-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--rd-radius-lg);
  background: var(--rd-grad-blue);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.rd-gradient-border:hover::before { opacity: 1; }

/* === STATS SECTION DECORATION === */
.rd-stats-bar {
  position: relative;
}
.rd-stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(86,186,220,0.03) 50%, transparent 100%);
  pointer-events: none;
}

/* === LOADING PAGE === */
.rd-page-loader {
  position: fixed;
  inset: 0;
  background: var(--rd-bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s, visibility 0.4s;
}
.rd-page-loader.loaded { opacity: 0; visibility: hidden; }
.rd-loader-ring {
  width: 48px;
  height: 48px;
  border: 3px solid var(--rd-border);
  border-top-color: var(--rd-primary-light);
  border-radius: 50%;
  animation: rd-spin-slow 0.8s linear infinite;
}

/* === READ PROGRESS BAR === */
#rd-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--rd-grad-accent);
  z-index: calc(var(--rd-z-header) + 1);
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* === FLOATING LABEL ANIMATION === */
.rd-float-label { position: relative; }
.rd-float-label input { padding-top: 20px; }
.rd-float-label label {
  position: absolute;
  top: 50%;
  left: var(--rd-space-4);
  transform: translateY(-50%);
  font-size: var(--rd-text-sm);
  color: var(--rd-text-3);
  transition: all 0.2s ease;
  pointer-events: none;
}
.rd-float-label input:focus ~ label,
.rd-float-label input:not(:placeholder-shown) ~ label {
  top: 10px;
  font-size: 11px;
  color: var(--rd-primary-light);
}