/* kdkak.top — unified styles (extracted from index.html and _head_assets.php) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

/* --- Global --- */
:root {
    --gold: #c9a96e;
    --gold-light: #e0c590;
    --gold-dark: #a88952;
    --dark: #050507;
    --dark-card: #0a0a0f;
    --dark-border: #1a1a24;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: #050507; color: #f5f5f5; overflow-x: hidden; }
.font-display { font-family: 'Playfair Display', serif; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050507; }
::-webkit-scrollbar-thumb { background: #1a1a24; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c9a96e; }

/* --- Glassmorphism --- */
.glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); }
.glass-strong { background: rgba(10, 10, 15, 0.7); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.12); }

/* --- Buttons --- */
.btn-gold { position: relative; background: linear-gradient(135deg, #c9a96e 0%, #a88952 50%, #c9a96e 100%); background-size: 200% auto; transition: all .6s cubic-bezier(.16,1,.3,1); }
.btn-gold:hover { background-position: right center; transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(201, 169, 110, 0.3); }
.btn-gold:active { transform: translateY(-1px); }

/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.96); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0px); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(25px) scale(0.96); filter: blur(8px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); } }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } }
body { animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.page-leaving body { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { body { animation: none !important; } }

/* --- Scroll Progress Bar --- */
#scrollProgress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(to right, #a88952, #c9a96e, #e0c590); z-index: 60; transition: width 0.1s linear; }

/* --- Grain Overlay --- */
.grain-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }

/* --- Vignette --- */
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.6) 100%); }

/* --- Depth Background --- */
.depth-background { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at top right, #1a1a24 0%, #050507 50%); }

/* --- Reveal Animations --- */
.reveal { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(4px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active, .reveal.revealed { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
.reveal-delay-1 { transition-delay: 0.2s; }
.reveal-delay-2 { transition-delay: 0.4s; }
.reveal-delay-3 { transition-delay: 0.6s; }

/* --- Entrance animations (used by gallery/knife templates) --- */
.animate-fade-in { animation: fadeIn 0.8s ease-out both; }
.animate-slide-up { animation: slideUp 0.7s ease-out both; }

/* --- Filter buttons --- */
.filter-btn { color: #9ca3af; }
.filter-btn:hover { color: var(--gold); }
.filter-btn.active { color: #000; background: linear-gradient(135deg, #c9a96e, #a88952); border-color: transparent; font-weight: 600; }

/* --- Modal / zoom helpers (JS toggles .visible) --- */
.modal-backdrop { opacity: 0; transition: opacity 0.5s ease-out; }
.modal-backdrop.visible { opacity: 1; }
.modal-panel { opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.45s ease-out, transform 0.45s ease-out; }
.modal-panel.visible { opacity: 1; transform: translateY(0) scale(1); }
.zoom-img { cursor: zoom-in; transition: transform 0.35s ease-out; }
.zoom-img.zoom-active { cursor: zoom-out; transform: scale(1.6); }
.zoom-nav-btn { pointer-events: auto; }

/* --- Spec rows (product modal / knife page) --- */
.spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--dark-border); }

/* --- Award cards --- */
.award-card { flex: 0 0 auto; width: min(78vw, 320px); border-radius: 16px; overflow: hidden; border: 1px solid var(--dark-border); background: var(--dark-card); cursor: pointer; transition: border-color 0.3s ease, transform 0.3s ease; }
.award-card:hover { border-color: rgba(201, 169, 110, 0.4); transform: translateY(-4px); }
.award-card img { width: 100%; height: 220px; object-fit: cover; display: block; }

/* --- FAB pulse --- */
@keyframes fabPulse { 0%, 100% { box-shadow: 0 8px 24px -8px rgba(201, 169, 110, 0.35); } 50% { box-shadow: 0 8px 32px -4px rgba(201, 169, 110, 0.6); } }
.fab-pulse { animation: fabPulse 2.6s ease-in-out infinite; }

/* --- Hero --- */
.hero-bg { background: radial-gradient(circle at 50% 30%, rgba(201, 169, 110, 0.14), transparent 60%), radial-gradient(circle at 80% 90%, rgba(26, 26, 36, 0.9), transparent 55%); }
.hero-text-shadow { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7); }
.hero-parallax-layer { will-change: transform; }

/* --- Product card image zoom --- */
.img-zoom { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; }
.group:hover .img-zoom { transform: scale(1.06); }

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .font-display { font-size: 2.5rem !important; }
    .glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

/* --- Footer: поверх фоновых вуалей, читаемый контраст --- */
.site-footer { position: relative; z-index: 10; background-color: #0a0a0f; }
.text-gold { color: var(--gold); }
.text-gold-light { color: var(--gold-light); }
.text-gold-dark { color: var(--gold-dark); }
.bg-gold { background-color: var(--gold); }
.bg-gold-light { background-color: var(--gold-light); }
.bg-gold-dark { background-color: var(--gold-dark); }
.border-gold { border-color: var(--gold); }
.border-gold-light { border-color: var(--gold-light); }
.border-gold-dark { border-color: var(--gold-dark); }