/* === ubj61 Effects (auto-generated) === */

/* --- bg-aurora-flow --- */
/* Aurora Flow Background — found on wtnforum.org */
/* Use for: elegant, neon, playful. ~10% of sites */
.ubj61-aurora {
  position: relative;
  overflow: hidden;
}
.ubj61-aurora::before,
.ubj61-aurora::after {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  pointer-events: none;
  z-index: 0;
}
.ubj61-aurora::before {
  background: radial-gradient(ellipse at 30% 50%, var(--accent-glow, rgba(124,58,237,0.15)) 0%, transparent 60%);
  animation: ubj61-aurora-1 12s ease-in-out infinite alternate;
}
.ubj61-aurora::after {
  background: radial-gradient(ellipse at 70% 30%, rgba(0,200,255,0.08) 0%, transparent 55%);
  animation: ubj61-aurora-2 15s ease-in-out infinite alternate-reverse;
}
@keyframes ubj61-aurora-1 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-8%, 5%) rotate(5deg) scale(1.15); }
  100% { transform: translate(5%, -3%) rotate(-3deg) scale(1.05); }
}
@keyframes ubj61-aurora-2 {
  0% { transform: translate(0, 0) rotate(0deg) scale(1.1); }
  50% { transform: translate(6%, -4%) rotate(-4deg) scale(1); }
  100% { transform: translate(-4%, 6%) rotate(3deg) scale(1.2); }
}


/* --- text-gradient-animated --- */
.ubj61-grad-text{background:linear-gradient(90deg,var(--accent),var(--text),var(--accent));background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:ubj61-grad 3s ease-in-out infinite}
@keyframes ubj61-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}


/* --- cards-glass --- */
.ubj61-glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius,12px);transition:all .3s ease}
.ubj61-glass:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);box-shadow:0 8px 32px rgba(0,0,0,.3);transform:translateY(-4px)}


/* --- btn-shimmer --- */
.ubj61-shimmer{position:relative;overflow:hidden}
.ubj61-shimmer::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s}
.ubj61-shimmer:hover::before{left:100%}
.ubj61-shimmer:hover{transform:translateY(-2px);box-shadow:0 0 20px var(--accent-glow)}


/* --- css-scroll-driven --- */
/* CSS Scroll-Driven Animations — NO JavaScript needed */
/* 2026 standard: Chrome 115+, Safari 18+. Graceful fallback with @supports */
/* Use for: minimal, elegant moods where JS overhead isn't wanted */

/* Fade-in on scroll into view */
@supports (animation-timeline: view()) {
  .ubj61-scroll-reveal {
    animation: ubj61-scroll-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  @keyframes ubj61-scroll-fade-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Slide from left */
  .ubj61-scroll-slide-left {
    animation: ubj61-scroll-left linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }

  @keyframes ubj61-scroll-left {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
  }

  /* Scale up */
  .ubj61-scroll-scale {
    animation: ubj61-scroll-scale-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  @keyframes ubj61-scroll-scale-up {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  /* Progress bar that fills based on page scroll */
  .ubj61-scroll-progress {
    animation: ubj61-progress-fill linear;
    animation-timeline: scroll(root);
  }

  @keyframes ubj61-progress-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* Fallback for browsers without scroll-driven animation support */
@supports not (animation-timeline: view()) {
  .ubj61-scroll-reveal,
  .ubj61-scroll-slide-left,
  .ubj61-scroll-scale {
    /* GSAP ScrollTrigger handles these via script.js */
    opacity: 1;
    transform: none;
  }
}