/*
Theme Name: Metadreams Portfolio
Theme URI: https://metadreams.studio
Author: Metadreams Studio
Author URI: https://metadreams.studio
Description: Interactive Dark-Mode 3D Motion Graphics & Graphic Designer Portfolio Theme for WordPress. Features a complete React Single Page Application with 3D depth effects, glassmorphism, custom cursor, hover animations, smooth section transitions, and portfolio showcase with project detail modals. Includes Custom Post Types, REST API, and One-Click Demo Importer.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: metadreams
Tags: portfolio, dark, responsive, animation, full-width-template, custom-menu
*/

/* Reset & Global Styles */
:root {
  --font-display: 'Outfit', sans-serif;
  --font-impact: 'Anton', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Space Grotesk', monospace;
  --accent: #ff5500;
  --bg-base: #050505;
  --text-base: #f3f3f3;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-base);
  color: var(--text-base);
  font-family: var(--font-sans);
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.03em;
}

.font-impact {
  font-family: var(--font-impact);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.font-mono-tech {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

#root, #metadreams-root {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 3D perspective canvas & depth utils */
.perspective-container {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.preserve-3d {
  transform-style: preserve-3d;
}

.text-stroke-thin {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
  color: transparent;
}

.text-stroke-orange {
  -webkit-text-stroke: 1px rgba(255, 85, 0, 0.6);
  color: transparent;
}

.text-stroke-thick {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
  color: transparent;
}

/* Glassmorphism & Depth shadow utilities */
.glass-panel-3d {
  background: rgba(12, 12, 12, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-panel-accent {
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 85, 0, 0.25);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 85, 0, 0.15);
}

/* Custom marquee animations */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-marquee { animation: marquee 35s linear infinite; }
.animate-marquee-fast { animation: marquee 16s linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse 30s linear infinite; }

/* Custom scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #ff5500; }

/* WordPress admin bar fix — push content down when WP toolbar visible */
.admin-bar html, .admin-bar body {
  margin-top: 0 !important;
  overflow: hidden;
}
.admin-bar #wpadminbar {
  position: fixed;
  top: 0;
  z-index: 99999;
}