/* ===== EDNShop extra animations ===== */

/* page fade-in */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn .6s ease-out both; }

/* scroll progress bar */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100;
    background: linear-gradient(90deg, var(--blue-dark), var(--blue-light));
    transform-origin: right center; /* RTL: grows from right */
    transform: scaleX(0);
    pointer-events: none;
}

/* nav: shrink + hide on scroll down */
.nav { transition: transform .35s ease, padding .3s ease, background .3s ease; }
.nav.nav-scrolled { padding-top: 10px; padding-bottom: 10px; background: rgba(10,10,10,.98); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.nav.nav-hidden { transform: translateY(-100%); }
.nav-links a { position: relative; }
.nav-links a::after {
    content: ''; position: absolute; right: 0; bottom: -6px; height: 2px; width: 100%;
    background: var(--blue); transform: scaleX(0); transform-origin: right;
    transition: transform .3s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }

/* hero: glowing orbs + floating particles */
.header { overflow: hidden; }
.hero-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .22;
    pointer-events: none; will-change: transform;
}
.hero-orb.o1 { width: 420px; height: 420px; background: var(--blue); top: 8%; right: 12%; animation: orbFloat 14s ease-in-out infinite; }
.hero-orb.o2 { width: 340px; height: 340px; background: var(--blue-dark); bottom: 6%; left: 10%; animation: orbFloat 18s ease-in-out infinite reverse; }
@keyframes orbFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(40px,-30px) scale(1.1); }
    66% { transform: translate(-30px,35px) scale(.95); }
}
.hero-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-particles i {
    position: absolute; bottom: -20px; width: 6px; height: 6px; border-radius: 2px;
    background: var(--blue-light); opacity: 0;
    animation: particleUp linear infinite;
}
@keyframes particleUp {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: .7; }
    90% { opacity: .5; }
    100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}
.header > *:not(.hero-orb):not(.hero-particles):not(#hero3d) { position: relative; z-index: 2; }

/* logo shimmer on "Shop" */
.logo span {
    display: inline-block;
    letter-spacing: 0;           /* parent has negative spacing -> clipped the last letter */
    padding: 0 .06em .08em;      /* room so background-clip never cuts glyph edges */
    direction: ltr;
    color: var(--blue);          /* fallback if background-clip:text unsupported */
    background-image: linear-gradient(90deg, #3b82f6 0%, #93c5fd 25%, #ffffff 50%, #93c5fd 75%, #3b82f6 100%);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .logo span { background: none; -webkit-text-fill-color: currentColor; }
}
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } } }

/* scroll-down hint */
.scroll-hint {
    position: absolute; bottom: 28px; left: 50%; margin-left: -12px; z-index: 2;
    width: 24px; height: 40px; border: 2px solid rgba(255,255,255,.25); border-radius: 14px;
    opacity: 0; animation: heroFadeUp .8s ease-out 1.1s forwards;
}
.scroll-hint::after {
    content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px;
    border-radius: 2px; background: var(--blue-light); animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* buttons: shine sweep + ripple */
.btn { position: relative; overflow: hidden; }
.btn::before {
    content: ''; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
}
.btn:hover::before { left: 130%; }
.btn-primary { box-shadow: 0 0 0 0 rgba(59,130,246,.5); animation: btnPulse 2.8s ease-out infinite; }
@keyframes btnPulse { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,.45); } 70%,100% { box-shadow: 0 0 0 16px rgba(59,130,246,0); } }
.ripple {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,.35);
    transform: scale(0); animation: rippleAnim .6s ease-out forwards; pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* cards: 3D tilt + glow that follows the cursor */
.tilt { transform-style: preserve-3d; position: relative; }
.tilt, .tilt.reveal { transition: opacity .6s ease-out, transform .18s ease-out, border-color .3s, box-shadow .3s; }
.tilt:hover, .tilt.is-visible:hover {
    transform: perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
    box-shadow: 0 18px 40px rgba(59,130,246,.15);
}
.tilt::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(96,165,250,.14), transparent 60%);
    opacity: 0; transition: opacity .3s;
}
.tilt:hover::after { opacity: 1; }

/* icons */
.feature-icon i { display: inline-block; animation: iconFloat 3.2s ease-in-out infinite; }
.feature-card:nth-child(2) .feature-icon i { animation-delay: .4s; }
.feature-card:nth-child(3) .feature-icon i { animation-delay: .8s; }
.feature-card:nth-child(4) .feature-icon i { animation-delay: 1.2s; }
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.info-card li { transition: transform .25s, color .25s; }
.info-card li:hover { transform: translateX(-6px); color: #fff; }

/* section title underline draws in */
.section-title { position: relative; padding-bottom: 18px; }
.section-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 60px; height: 3px; margin-left: -30px;
    border-radius: 3px; background: var(--blue); transform: scaleX(0); transition: transform .7s ease .3s;
}
.section-title.is-visible::after { transform: scaleX(1); }

/* FAQ smoother */
.faq-a { transition: max-height .45s ease; }
.faq-item.active { border-color: rgba(59,130,246,.45); }

/* back to top bounce-in */
.back-top.show { animation: popIn .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes popIn { from { transform: scale(.4); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    .hero-orb, .hero-particles, .scroll-hint { display: none; }
    .logo span { -webkit-text-fill-color: var(--blue); color: var(--blue); background: none; animation: none; }
    .section-title::after { transform: scaleX(1); }
    body { opacity: 1; }
}
@media (max-width: 768px) {
    .hero-orb { opacity: .15; width: 240px !important; height: 240px !important; }
    .scroll-hint { display: none; }
    .tilt:hover, .tilt.is-visible:hover { transform: translateY(-4px); }
}

/* TeamSpeak extras (animation only; layout lives inline in index.php) */
.ts-badge i { animation: iconFloat 2.6s ease-in-out infinite; }
.ts-badge .dot { animation: liveDot 1.6s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 100% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
.ts-main::before { animation: orbFloat 12s ease-in-out infinite; }

/* keep "EDN" + "Shop" in the right order inside the RTL page */
.logo { direction: ltr; unicode-bidi: isolate; }

/* ===== 3D layer ===== */
#hero3d {
    position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 1 !important;
    pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
#hero3d.on { opacity: 1; }

/* sections enter in 3D (tilt back, then settle) */
.section { perspective: 1100px; }
.reveal { transform: translateY(34px) rotateX(16deg) scale(.97); transform-origin: 50% 100%; }
.reveal.is-visible { transform: none; }
.section-title.reveal { transform: translateY(24px) translateZ(-60px) rotateX(10deg); }
.section-title.reveal.is-visible { transform: none; }

/* depth pop inside tilted cards */
.tilt .feature-icon, .tilt .info-card h3, .tilt .product-name, .tilt .feature-title, .tilt .contact-title { transform: translateZ(26px); }
.tilt .contact-icon { transform: translateZ(34px); }
.tilt.contact-card:hover .contact-icon { transform: translateZ(44px) scale(1.1) rotate(8deg); }
.tilt .btn { transform: translateZ(18px); }
.tilt .btn:hover { transform: translateZ(24px) translateY(-2px); }

/* 3D buttons in hero */
.header-btns { perspective: 600px; }
.header-btns .btn-primary { box-shadow: 0 6px 0 var(--blue-dark), 0 14px 26px rgba(29,78,216,.4); }
.header-btns .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--blue-dark), 0 18px 30px rgba(29,78,216,.45); }
.header-btns .btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--blue-dark); }

@media (prefers-reduced-motion: reduce) { #hero3d { display: none; } .reveal { transform: none !important; } }
@media (max-width: 768px) { .reveal { transform: translateY(26px) rotateX(10deg); } }