/*
 * ================================================================
 * ORION MODERN FX - PT ORION TECH INDONESIA
 * ================================================================
 * Shared utility classes for modern visual effects across web pages.
 * Hover lift, glow, fade, pop, ripple, shimmer, parallax, etc.
 * Load on every page via init.php output filter.
 *
 * Class index:
 * .ofx-lift card hover lift
 * .ofx-glow soft gold glow on hover
 * .ofx-ripple button click ripple
 * .ofx-zoom-img image gentle zoom on hover
 * .ofx-fade-in fade-in on mount
 * .ofx-slide-up slide+fade up on mount
 * .ofx-pop spring pop entrance
 * .ofx-tooltip data-tooltip="" hover label
 * .ofx-progressbar top sticky reading progress bar (#orionFxProgress)
 * .ofx-skeleton shimmer placeholder
 * .ofx-pulse gentle pulse loop
 * .ofx-glow-border animated gradient border
 * .ofx-float-label floating label input
 * .ofx-spinner-gold gold dot spinner
 * .ofx-flip-card 3d flip card (.ofx-flip-inner / .ofx-flip-front / .ofx-flip-back)
 * .ofx-shine shine sweep animation on hover
 * .ofx-blur-backdrop modal backdrop with blur
 * .ofx-modal-spring modal entrance with spring
 * .ofx-confetti-host confetti canvas overlay
 * ================================================================
 */

/* Smooth scroll on html (additive, wraps existing) */
html { scroll-behavior: smooth; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
 .ofx-lift, .ofx-glow, .ofx-zoom-img, .ofx-pop, .ofx-fade-in,
 .ofx-slide-up, .ofx-pulse, .ofx-shine, .ofx-modal-spring {
 transition: none !important;
 animation: none !important;
 }
}

/* ========================= HOVER LIFT ========================= */
.ofx-lift {
 transition: transform .35s cubic-bezier(.34,1.56,.64,1),
 box-shadow .35s cubic-bezier(.4,0,.2,1),
 border-color .25s;
 will-change: transform;
}
.ofx-lift:hover {
 transform: translateY(-6px);
 box-shadow: 0 14px 32px rgba(10,37,64,.16),
 0 4px 10px rgba(245,166,35,.18);
}
.ofx-lift-strong:hover {
 transform: translateY(-8px) scale(1.015);
 box-shadow: 0 20px 50px rgba(10,37,64,.22),
 0 6px 14px rgba(245,166,35,.22);
}

/* ========================= GLOW ========================= */
.ofx-glow {
 transition: box-shadow .35s, transform .25s;
}
.ofx-glow:hover {
 box-shadow: 0 0 0 3px rgba(245,166,35,.18),
 0 10px 30px rgba(245,166,35,.28);
 transform: translateY(-2px);
}
.ofx-glow-blue:hover {
 box-shadow: 0 0 0 3px rgba(25,118,210,.18),
 0 10px 30px rgba(25,118,210,.28);
}

/* ========================= RIPPLE (button) ========================= */
.ofx-ripple {
 position: relative;
 overflow: hidden;
 isolation: isolate;
}
.ofx-ripple::after {
 content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
 rgba(255,255,255,.55) 0%, transparent 60%);
 opacity: 0;
 transition: opacity .55s ease-out;
 pointer-events: none;
}
.ofx-ripple.is-ripple::after { opacity: 1; transition: none; }

/* ========================= IMAGE ZOOM ========================= */
.ofx-zoom-img {
 overflow: hidden;
 border-radius: inherit;
}
.ofx-zoom-img > img,
.ofx-zoom-img > picture > img {
 transition: transform .55s cubic-bezier(.2,.7,.3,1), filter .35s;
 display: block;
 width: 100%;
}
.ofx-zoom-img:hover > img,
.ofx-zoom-img:hover > picture > img {
 transform: scale(1.06);
 filter: saturate(1.15) brightness(1.02);
}

/* ========================= FADE-IN / SLIDE-UP ========================= */
@keyframes ofxFadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes ofxSlideUp {
 from { opacity: 0; transform: translateY(18px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes ofxSlideDown {
 from { opacity: 0; transform: translateY(-18px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes ofxPop {
 0% { opacity: 0; transform: scale(.85); }
 60% { opacity: 1; transform: scale(1.03); }
 100% { transform: scale(1); }
}
.ofx-fade-in { animation: ofxFadeIn .55s ease-out both; }
.ofx-slide-up { animation: ofxSlideUp .55s cubic-bezier(.2,.7,.3,1) both; }
.ofx-slide-down{ animation: ofxSlideDown .55s cubic-bezier(.2,.7,.3,1) both; }
.ofx-pop { animation: ofxPop .55s cubic-bezier(.34,1.56,.64,1) both; }

/* Stagger helpers */
.ofx-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ofx-stagger > *:nth-child(2) { animation-delay: 60ms; }
.ofx-stagger > *:nth-child(3) { animation-delay: 120ms; }
.ofx-stagger > *:nth-child(4) { animation-delay: 180ms; }
.ofx-stagger > *:nth-child(5) { animation-delay: 240ms; }
.ofx-stagger > *:nth-child(6) { animation-delay: 300ms; }
.ofx-stagger > *:nth-child(7) { animation-delay: 360ms; }
.ofx-stagger > *:nth-child(8) { animation-delay: 420ms; }

/* ========================= TOOLTIP ========================= */
[data-tooltip] {
 position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
 position: absolute;
 bottom: calc(100% + 8px);
 left: 50%;
 transform: translateX(-50%) translateY(6px);
 opacity: 0;
 pointer-events: none;
 transition: opacity .2s, transform .2s;
 z-index: 9999;
}
[data-tooltip]::before {
 content: attr(data-tooltip);
 white-space: nowrap;
 background: #0a2540;
 color: #fff;
 padding: 6px 12px;
 border-radius: 8px;
 font-size: .78rem;
 font-weight: 600;
 box-shadow: 0 6px 18px rgba(0,0,0,.25);
 max-width: 240px;
 white-space: normal;
 width: max-content;
}
[data-tooltip]::after {
 content: "";
 border: 6px solid transparent;
 border-top-color: #0a2540;
 bottom: calc(100% + 2px);
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
 opacity: 1;
 transform: translateX(-50%) translateY(0);
}
[data-tooltip-pos="bottom"]::before,
[data-tooltip-pos="bottom"]::after {
 top: calc(100% + 8px);
 bottom: auto;
}
[data-tooltip-pos="bottom"]::after {
 border-top-color: transparent;
 border-bottom-color: #0a2540;
 top: calc(100% + 2px);
}

/* ========================= READING PROGRESS BAR ========================= */
#orionFxProgress {
 position: fixed;
 top: 0;
 left: 0;
 height: 3px;
 background: linear-gradient(90deg, #f5a623 0%, #1976d2 100%);
 width: 0%;
 z-index: 100000;
 transition: width .12s linear;
 box-shadow: 0 0 8px rgba(245,166,35,.55);
 pointer-events: none;
}

/* ========================= SKELETON SHIMMER ========================= */
@keyframes ofxShimmer {
 0% { background-position: -400px 0; }
 100% { background-position: 400px 0; }
}
.ofx-skeleton {
 background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%);
 background-size: 800px 100%;
 animation: ofxShimmer 1.6s linear infinite;
 border-radius: 8px;
 color: transparent !important;
}
.ofx-skeleton-text { height: 14px; margin: 4px 0; border-radius: 6px; }
.ofx-skeleton-img { aspect-ratio: 16 / 9; width: 100%; }

/* ========================= PULSE ========================= */
@keyframes ofxPulse {
 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245,166,35,.55); }
 50% { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(245,166,35,0); }
}
.ofx-pulse { animation: ofxPulse 1.8s ease-in-out infinite; }

/* ========================= GRADIENT BORDER ========================= */
.ofx-glow-border {
 position: relative;
 border-radius: 14px;
 background-clip: padding-box;
}
.ofx-glow-border::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 padding: 2px;
 background: linear-gradient(135deg, #f5a623 0%, #1976d2 50%, #f5a623 100%);
 -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 background-size: 300% 300%;
 animation: ofxGradShift 6s linear infinite;
 pointer-events: none;
}
@keyframes ofxGradShift {
 0% { background-position: 0% 0%; }
 100% { background-position: 300% 0%; }
}

/* ========================= FLOAT LABEL ========================= */
.ofx-float-label {
 position: relative;
 margin-bottom: 14px;
}
.ofx-float-label input,
.ofx-float-label textarea,
.ofx-float-label select {
 width: 100%;
 padding: 18px 12px 8px;
 border: 1.5px solid #cbd5e1;
 border-radius: 10px;
 background: #fff;
 font-size: .9rem;
 transition: border-color .2s, box-shadow .2s;
}
.ofx-float-label label {
 position: absolute;
 left: 12px;
 top: 14px;
 font-size: .9rem;
 color: #64748b;
 pointer-events: none;
 transition: top .18s, font-size .18s, color .18s;
 background: linear-gradient(#fff,#fff);
 padding: 0 4px;
}
.ofx-float-label input:focus,
.ofx-float-label textarea:focus,
.ofx-float-label select:focus {
 outline: none;
 border-color: #f5a623;
 box-shadow: 0 0 0 3px rgba(245,166,35,.18);
}
.ofx-float-label input:focus + label,
.ofx-float-label input:not(:placeholder-shown) + label,
.ofx-float-label textarea:focus + label,
.ofx-float-label textarea:not(:placeholder-shown) + label,
.ofx-float-label select:focus + label,
.ofx-float-label select:valid + label {
 top: -8px;
 font-size: .7rem;
 color: #f5a623;
 font-weight: 700;
}

/* ========================= GOLD SPINNER ========================= */
@keyframes ofxSpinnerRotate {
 to { transform: rotate(360deg); }
}
@keyframes ofxSpinnerDot {
 0%, 80%, 100% { transform: scale(.4); opacity: .4; }
 40% { transform: scale(1); opacity: 1; }
}
.ofx-spinner-gold {
 display: inline-flex;
 gap: 4px;
 align-items: center;
}
.ofx-spinner-gold > span {
 width: 8px; height: 8px; border-radius: 50%;
 background: #f5a623;
 animation: ofxSpinnerDot 1s ease-in-out infinite;
}
.ofx-spinner-gold > span:nth-child(2) { animation-delay: .15s; }
.ofx-spinner-gold > span:nth-child(3) { animation-delay: .3s; }

/* Spinning ring spinner */
.ofx-spinner-ring {
 width: 32px; height: 32px;
 border-radius: 50%;
 border: 3px solid rgba(245,166,35,.18);
 border-top-color: #f5a623;
 animation: ofxSpinnerRotate .85s linear infinite;
 display: inline-block;
}

/* ========================= FLIP CARD (3D) ========================= */
.ofx-flip-card {
 perspective: 1200px;
}
.ofx-flip-inner {
 position: relative;
 width: 100%;
 height: 100%;
 transform-style: preserve-3d;
 transition: transform .65s cubic-bezier(.4,0,.2,1);
}
.ofx-flip-card:hover .ofx-flip-inner,
.ofx-flip-card.is-flipped .ofx-flip-inner {
 transform: rotateY(180deg);
}
.ofx-flip-front,
.ofx-flip-back {
 position: absolute;
 inset: 0;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 border-radius: inherit;
}
.ofx-flip-back {
 transform: rotateY(180deg);
}

/* ========================= SHINE SWEEP ========================= */
.ofx-shine {
 position: relative;
 overflow: hidden;
 isolation: isolate;
}
.ofx-shine::before {
 content: "";
 position: absolute;
 top: 0; bottom: 0;
 left: -150%;
 width: 60%;
 background: linear-gradient(115deg,
 transparent 0%,
 rgba(255,255,255,.0) 30%,
 rgba(255,255,255,.45) 50%,
 rgba(255,255,255,.0) 70%,
 transparent 100%);
 transform: skewX(-18deg);
 transition: left .85s cubic-bezier(.2,.7,.3,1);
 pointer-events: none;
}
.ofx-shine:hover::before { left: 150%; }

/* ========================= MODAL EFFECTS ========================= */
.ofx-blur-backdrop {
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 background: rgba(10,37,64,.45);
}
@keyframes ofxModalSpring {
 0% { opacity: 0; transform: scale(.7) translateY(20px); }
 60% { opacity: 1; transform: scale(1.03) translateY(-2px); }
 100% { transform: scale(1) translateY(0); }
}
.ofx-modal-spring { animation: ofxModalSpring .42s cubic-bezier(.34,1.56,.64,1) both; }

/* ========================= COUNT-UP (number stat) ========================= */
.ofx-counter {
 font-variant-numeric: tabular-nums;
 display: inline-block;
}

/* ========================= LINK UNDERLINE GROW ========================= */
.ofx-link-underline {
 position: relative;
 text-decoration: none;
 display: inline-block;
}
.ofx-link-underline::after {
 content: "";
 position: absolute;
 left: 0;
 bottom: -2px;
 width: 100%;
 height: 2px;
 background: currentColor;
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.ofx-link-underline:hover::after,
.ofx-link-underline:focus-visible::after { transform: scaleX(1); }

/* ========================= ACCORDION SMOOTH ========================= */
.ofx-accordion-item {
 border-radius: 12px;
 background: #fff;
 margin-bottom: 8px;
 overflow: hidden;
 box-shadow: 0 1px 3px rgba(10,37,64,.06);
 transition: box-shadow .25s;
}
.ofx-accordion-item:hover { box-shadow: 0 6px 18px rgba(10,37,64,.1); }
.ofx-accordion-trigger {
 width: 100%;
 text-align: left;
 background: none;
 border: 0;
 padding: 14px 18px;
 font-weight: 700;
 color: #0a2540;
 font-size: .95rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}
.ofx-accordion-trigger .ofx-chevron {
 transition: transform .3s cubic-bezier(.4,0,.2,1);
 color: #f5a623;
}
.ofx-accordion-item.is-open .ofx-chevron { transform: rotate(180deg); }
.ofx-accordion-body {
 max-height: 0;
 overflow: hidden;
 transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .25s;
 padding: 0 18px;
 color: #475569;
 line-height: 1.65;
}
.ofx-accordion-item.is-open .ofx-accordion-body {
 max-height: 800px;
 padding: 0 18px 16px;
}

/* ========================= CONFETTI HOST ========================= */
.ofx-confetti-host {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 100001;
 overflow: hidden;
}
.ofx-confetti-piece {
 position: absolute;
 top: -10px;
 width: 8px;
 height: 14px;
 border-radius: 2px;
 opacity: 0;
 animation: ofxConfettiFall 2.6s cubic-bezier(.2,.7,.5,1) forwards;
}
@keyframes ofxConfettiFall {
 0% { opacity: 0; transform: translate3d(0,-20px,0) rotate(0deg); }
 10% { opacity: 1; }
 100% { opacity: 0; transform: translate3d(var(--confetti-x,60px), 110vh, 0) rotate(var(--confetti-r,720deg)); }
}

/* ========================= TABLE ROW HIGHLIGHT ========================= */
.ofx-table-rows tbody tr {
 transition: background-color .2s, transform .15s;
}
.ofx-table-rows tbody tr:hover {
 background-color: rgba(245,166,35,.06);
}

/* ========================= BUTTON SQUISH ========================= */
.ofx-squish {
 transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
.ofx-squish:active { transform: scale(.96); }

/* ========================= AOS LIGHTWEIGHT FALLBACK ========================= */
/* Used when AOS CDN unavailable. Drives transitions purely via IntersectionObserver
 that toggles [data-ofx-inview] attribute. */
[data-aos]:not([data-ofx-inview]) {
 opacity: 0;
 transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);
}
[data-aos="fade-up"]:not([data-ofx-inview]) { transform: translateY(28px); }
[data-aos="fade-down"]:not([data-ofx-inview]) { transform: translateY(-28px); }
[data-aos="fade-left"]:not([data-ofx-inview]) { transform: translateX(28px); }
[data-aos="fade-right"]:not([data-ofx-inview]) { transform: translateX(-28px); }
[data-aos="zoom-in"]:not([data-ofx-inview]) { transform: scale(.9); }
[data-aos="zoom-out"]:not([data-ofx-inview]) { transform: scale(1.08); }
[data-aos="flip-up"]:not([data-ofx-inview]) { transform: perspective(800px) rotateX(-30deg); }
[data-aos][data-ofx-inview] {
 opacity: 1 !important;
 transform: none !important;
}

/* ========================= IMAGE ZOOM MODAL (lightbox) ========================= */
.ofx-lightbox {
 position: fixed;
 inset: 0;
 background: rgba(10,37,64,.85);
 -webkit-backdrop-filter: blur(4px);
 backdrop-filter: blur(4px);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 100002;
 opacity: 0;
 pointer-events: none;
 transition: opacity .25s;
 padding: 24px;
}
.ofx-lightbox.is-open { opacity: 1; pointer-events: auto; }
.ofx-lightbox img {
 max-width: 96%;
 max-height: 92vh;
 border-radius: 12px;
 box-shadow: 0 30px 80px rgba(0,0,0,.55);
 animation: ofxModalSpring .35s cubic-bezier(.34,1.56,.64,1) both;
}
.ofx-lightbox-close {
 position: absolute;
 top: 18px; right: 22px;
 width: 42px; height: 42px;
 border-radius: 50%;
 background: rgba(255,255,255,.18);
 color: #fff;
 border: 0;
 font-size: 1.3rem;
 cursor: pointer;
 display: flex; align-items: center; justify-content: center;
 transition: background-color .2s, transform .2s;
}
.ofx-lightbox-close:hover {
 background: rgba(245,166,35,.85);
 transform: rotate(90deg);
}

/* ========================= ADMIN STAT CARD POLISH ========================= */
.ofx-stat-card {
 position: relative;
 overflow: hidden;
}
.ofx-stat-card::after {
 content: "";
 position: absolute;
 top: -50%;
 right: -30%;
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(245,166,35,.18), transparent 70%);
 transition: transform .55s cubic-bezier(.34,1.56,.64,1);
 pointer-events: none;
}
.ofx-stat-card:hover::after { transform: scale(1.4); }

/* ========================= NOTIF DOT BLINK ========================= */
@keyframes ofxBlink {
 0%, 100% { opacity: 1; }
 50% { opacity: .35; }
}
.ofx-blink { animation: ofxBlink 1.2s ease-in-out infinite; }

/* ========================= GLASSMORPHISM & NEON ========================= */
.ofx-glass {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 32px 0 rgba(10, 37, 64, 0.1);
}

[data-theme="dark"] .ofx-glass {
  background: rgba(20, 30, 45, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

.ofx-tech-glow {
  box-shadow: 0 0 15px rgba(245, 166, 35, 0.4), 0 0 30px rgba(25, 118, 210, 0.2);
  transition: box-shadow 0.3s ease;
}
.ofx-tech-glow:hover {
  box-shadow: 0 0 25px rgba(245, 166, 35, 0.7), 0 0 50px rgba(25, 118, 210, 0.5);
}

/* ========================= TSPARTICLES CONTAINER ========================= */
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}