/*
Theme Name: Meta Vials
Theme URI: https://metavials.example
Author: Meta Vials
Description: Full-site-editing block theme for the Meta Vials research-peptide storefront. Violet-black lab aesthetic, lilac glow, signature loading screen and animations. WooCommerce compatible. Upload, activate, and edit every page with drag-and-drop in the built-in Site Editor.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meta-vials
Tags: full-site-editing, block-patterns, e-commerce, dark, one-column
*/

/* ============================================================
   Fonts
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Meta Display";
  src: url("assets/fonts/MetaDisplay.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --ink-900: #080509;
  --ink-850: #0B0710;
  --ink-800: #120B1A;
  --ink-750: #170E22;
  --ink-700: #1E1430;
  --ink-600: #281B3D;

  --violet-700: #6E2BE0;
  --violet-600: #8B4DFF;
  --violet-500: #A370FF;
  --violet-400: #B891FF;
  --violet-300: #C9A8FF;
  --violet-200: #DDC9FF;
  --violet-100: #EFE5FF;

  --paper-50:  #F6F1FB;
  --paper-200: #D8CFE4;
  --paper-400: #A99FBA;
  --paper-500: #877C99;
  --paper-600: #685E78;
  --paper-700: #463E55;

  --line-soft:    rgba(201, 168, 255, 0.08);
  --line-DEFAULT: rgba(201, 168, 255, 0.14);
  --line-strong:  rgba(201, 168, 255, 0.28);

  --mint-500:  #4FE0A6;
  --amber-500: #FFC46B;
  --rose-500:  #FF6B86;

  --bg-base:       var(--ink-850);
  --bg-section:    var(--ink-800);
  --bg-card:       var(--ink-750);
  --bg-card-hover: var(--ink-700);
  --bg-overlay:    var(--ink-600);
  --bg-inset:      var(--ink-900);
  --header-bg:     rgba(11, 7, 16, 0.72);

  --text-primary:   var(--paper-50);
  --text-secondary: var(--paper-200);
  --text-muted:     var(--paper-400);
  --text-faint:     var(--paper-500);
  --text-on-accent: var(--ink-850);

  --accent:       var(--violet-500);
  --accent-hover: var(--violet-600);
  --accent-press: var(--violet-700);
  --accent-glow:  var(--violet-300);
  --accent-soft:  rgba(163, 112, 255, 0.14);

  --border:        var(--line-DEFAULT);
  --border-soft:   var(--line-soft);
  --border-strong: var(--line-strong);

  --success: var(--mint-500);
  --warning: var(--amber-500);
  --danger:  var(--rose-500);
  --focus-ring: rgba(163, 112, 255, 0.55);

  --font-display:  "Space Grotesk", system-ui, sans-serif;
  --font-headline: "Meta Display", "Space Grotesk", system-ui, sans-serif;
  --font-body:     "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px;
  --lh-normal: 1.6; --lh-snug: 1.15; --w-semibold: 600;
  --track-tight: -0.01em; --track-caps: 0.14em;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius-xs: 4px;  --radius-sm: 8px;  --radius-md: 12px;
  --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px;

  --container: 1200px; --gutter: 24px; --header-h: 72px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);

  --glow-sm: 0 0 0 1px rgba(163,112,255,0.25), 0 4px 18px rgba(163,112,255,0.18);
  --glow-md: 0 0 28px rgba(163,112,255,0.28);
  --glow-lg: 0 0 60px rgba(163,112,255,0.35);
  --glow-text: 0 0 24px rgba(201,168,255,0.45);
  --inset-top: inset 0 1px 0 rgba(255,255,255,0.04);
  --blur-panel: blur(18px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 420ms;
}

/* ============================================================
   GLOBAL LOOK
   ============================================================ */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(163,112,255,0.10), transparent 70%),
    radial-gradient(50% 40% at 0% 105%, rgba(201,168,255,0.07), transparent 70%);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--text-on-accent); }

.mv-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-glow);
}

/* ============================================================
   REUSABLE CLASSES
   ============================================================ */
.mv-shop-btn a,
a.mv-shop-btn,
.mv-shop-btn .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 26px;
  font-family: var(--font-headline); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--text-primary); background: transparent;
  border: 1.4px solid var(--accent-glow); border-radius: var(--radius-pill);
  cursor: pointer; box-shadow: var(--glow-sm); text-shadow: var(--glow-text);
  transition: box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.mv-shop-btn a:hover,
a.mv-shop-btn:hover,
.mv-shop-btn .wp-block-button__link:hover {
  box-shadow: var(--glow-md); border-color: var(--accent); transform: translateY(-1px);
}

.mv-hero-title {
  font-family: var(--font-headline);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.75rem, 8.5vw, 5.25rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* ---- ANIMATIONS ---- */
.mv-pirouette { animation: mv-pirouette 7s linear infinite; transform-style: preserve-3d; }
@keyframes mv-pirouette { to { transform: rotateY(360deg); } }

.mv-marquee { animation: mv-marquee-right 150s linear infinite; }
@keyframes mv-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.mv-drop { animation: mvDropIn 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes mvDropIn {
  from { opacity: 0; transform: translateY(-7px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Announcement marquee bar ---- */
.mv-announce {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border);
  color: var(--accent-glow);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.mv-announce .mv-marquee { display: inline-flex; white-space: nowrap; will-change: transform; }
.mv-announce span.mv-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 64px; }

/* ---- Header / wordmark ---- */
.mv-wordmark {
  display: inline-flex; align-items: baseline; gap: 0.2em;
  font-family: var(--font-headline); font-weight: 700; font-size: 21px; line-height: 1;
  letter-spacing: 0.01em; text-transform: uppercase; user-select: none;
}
.mv-wordmark .m { color: var(--text-primary); }
.mv-wordmark .v { color: transparent; -webkit-text-stroke: 1.4px var(--accent-glow); }

/* Site header wrapper (template part) */
.wp-block-template-part .mv-site-header,
.mv-site-header {
  background: var(--header-bg);
  backdrop-filter: var(--blur-panel);
  border-bottom: 1px solid var(--border);
}

/* Navigation styling */
.wp-block-navigation a { font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: var(--text-secondary); }
.wp-block-navigation a:hover { color: var(--text-primary); }

/* ============================================================
   LOADING SCREEN
   ============================================================ */
#mv-preloader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  background: var(--bg-base);
  transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out);
}
#mv-preloader::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(163,112,255,0.12), transparent 70%),
    radial-gradient(50% 40% at 0% 105%, rgba(201,168,255,0.08), transparent 70%);
}
#mv-preloader.mv-hide { opacity: 0; visibility: hidden; }
#mv-preloader .mv-pl-mark { position: relative; filter: drop-shadow(0 0 24px rgba(201,168,255,0.4)); }
#mv-preloader .mv-wordmark { font-size: 34px; position: relative; }
#mv-preloader .mv-pl-track {
  position: relative; width: 220px; height: 3px; border-radius: 999px;
  background: rgba(201,168,255,0.12); overflow: hidden;
}
#mv-preloader .mv-pl-bar {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
  box-shadow: var(--glow-md);
  transition: width 0.25s var(--ease-out);
}
#mv-preloader .mv-pl-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-glow); position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .mv-pirouette, .mv-marquee, .mv-drop { animation: none !important; }
  #mv-preloader { transition: none; }
}

/* footer grid */
.mv-grid-footer { max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 782px) { .mv-grid-footer { grid-template-columns: 1fr 1fr; } }