/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ===== Luxury Shisha: efecte ===== */
html { scroll-behavior: smooth; }
::selection { background: #C9A45C; color: #0E0D0B; }

/* Carduri: ridicare + glow auriu la hover */
.lx-card { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s !important; }
.lx-card:hover { transform: translateY(-10px); border-color: #C9A45C !important; box-shadow: 0 30px 60px -20px rgba(201,164,92,.35); }

/* Poze de produs: zoom lin la hover */
.lx-white { overflow: hidden; }
.lx-white img { transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.lx-white:hover img, .lx-card:hover .lx-white img { transform: scale(1.07); }

/* Butoane: reflex auriu care trece peste */
.elementor-button, a.ls-btn-wa, a.ls-btn-ig { position: relative; overflow: hidden; }
.elementor-button::after, a.ls-btn-wa::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .8s; pointer-events: none; }
.elementor-button:hover::after, a.ls-btn-wa:hover::after { left: 140%; }

/* Hero: lumina aurie care respira + fum animat */
.lx-hero { position: relative; overflow: hidden; }
.lx-hero::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 70% 40%, rgba(201,164,92,.22), transparent 45%), radial-gradient(circle at 20% 80%, rgba(201,164,92,.10), transparent 40%); animation: lx-glow 9s ease-in-out infinite alternate; pointer-events: none; z-index: 0; }
.lx-hero > .e-con-inner, .lx-hero > .e-con { position: relative; z-index: 2; }
@keyframes lx-glow { from { transform: translate3d(-3%, 0, 0) scale(1); opacity: .7; } to { transform: translate3d(3%, -4%, 0) scale(1.15); opacity: 1; } }

/* Imaginea din hero: rama aurie animata */
.lx-frame { position: relative; }
.lx-frame::after { content: ""; position: absolute; inset: -1px; border: 1px solid transparent; background: linear-gradient(120deg, #C9A45C, transparent 40%, transparent 60%, #C9A45C) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background-size: 300% 300%; animation: lx-border 6s linear infinite; pointer-events: none; }
@keyframes lx-border { to { background-position: 300% 0; } }

/* Banda cu evenimente care curge continuu */
.lx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lx-marquee .elementor-icon-list-items { flex-wrap: nowrap !important; width: max-content; animation: lx-marquee 35s linear infinite; }
.lx-marquee .elementor-icon-list-item { white-space: nowrap; }
.lx-marquee:hover .elementor-icon-list-items { animation-play-state: paused; }
@keyframes lx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Titlu animat (Elementor Pro) in culorile site-ului */
.elementor-headline-dynamic-wrapper { color: #C9A45C; font-style: italic; }
.elementor-headline--style-highlight svg path { stroke: #C9A45C !important; }

/* Indicator de scroll in hero */
.lx-scroll { width: 22px; height: 36px; border: 1px solid rgba(201,164,92,.6); border-radius: 12px; position: relative; margin: 0 auto; }
.lx-scroll::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; background: #C9A45C; border-radius: 2px; animation: lx-scroll 1.8s ease-in-out infinite; }
@keyframes lx-scroll { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* Video de fundal: overlay discret */
.lx-hero .elementor-background-video-container { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
	.lx-hero::before, .lx-frame::after, .lx-marquee .elementor-icon-list-items, .lx-scroll::after { animation: none !important; }
}