/*
Theme Name: VISUALINE
Theme URI: https://visualine.co.uk
Author: VISUALINE Studio
Description: Custom cinematic dark theme for VISUALINE — Brand & Motion Studio. Built for Elementor.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: visualine
Tags: dark, portfolio, elementor, agency, creative
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=DM+Mono:wght@300&display=swap');

:root {
  --black:#080808;--off-black:#0f0f0f;--surface:#141414;--surface2:#1c1c1c;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
  --white:#f0ede8;--muted:rgba(240,237,232,0.45);--accent:#c8ff00;
  --mono:'DM Mono',monospace;--display:'Bebas Neue',sans-serif;--body:'DM Sans',sans-serif;
  --glass-accent-bg:rgba(200,255,0,0.12);--glass-accent-border:rgba(200,255,0,0.35);--glass-blur:20px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--white);font-family:var(--body);font-weight:300;overflow-x:hidden;margin:0;padding:0;cursor:none;}
body::before{content:'';position:fixed;inset:0;z-index:9997;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");opacity:0.028;pointer-events:none;}
a{color:var(--accent);text-decoration:none;transition:color .2s;}
a:hover{color:var(--white);}
h1,h2,h3,h4,h5,h6{font-family:var(--display);letter-spacing:0.03em;color:var(--white);font-weight:400;line-height:0.95;}
p{line-height:1.75;color:var(--muted);}
img{max-width:100%;height:auto;}

/* CURSOR */
#vl-cursor{position:fixed;z-index:9999;width:10px;height:10px;background:var(--accent);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .2s,height .2s;mix-blend-mode:difference;}
#vl-cursor-ring{position:fixed;z-index:9998;width:36px;height:36px;border:1px solid rgba(200,255,0,0.4);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .15s,height .15s;}

/* NAV */
#vl-nav{position:fixed;top:14px;left:50%;z-index:100;transform:translateX(-50%);width:calc(100% - 64px);max-width:1200px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.vl-nav-logo{font-family:var(--display);font-size:20px;letter-spacing:0.14em;color:var(--white)!important;text-decoration:none;flex-shrink:0;}
.vl-nav-logo span{color:var(--accent);}
.vl-nav-pill{display:flex;align-items:center;padding:0 4px;border-radius:100px;background:rgba(14,14,14,0.38);backdrop-filter:blur(var(--glass-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);border:1px solid rgba(255,255,255,0.09);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),inset 0 -1px 0 rgba(0,0,0,0.3),0 4px 24px rgba(0,0,0,0.45);list-style:none;margin:0;position:relative;overflow:hidden;}
.vl-nav-pill::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15) 50%,transparent);pointer-events:none;}
.vl-nav-pill li{display:flex;align-items:center;}
.vl-nav-pill a{font-family:var(--mono);font-size:10px;letter-spacing:0.13em;color:rgba(240,237,232,0.48)!important;text-decoration:none;text-transform:uppercase;padding:9px 16px;white-space:nowrap;transition:color .2s;border-radius:100px;display:flex;align-items:center;gap:5px;}
.vl-nav-pill a:hover{color:var(--white)!important;}
.vl-nav-pill a.current-menu-item,.vl-nav-pill a.current_page_item{color:var(--white)!important;background:rgba(255,255,255,0.07);}
.vl-nav-pill a.current-menu-item::after,.vl-nav-pill a.current_page_item::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);display:inline-block;margin-left:2px;}
.vl-nav-divider{width:1px;height:14px;background:rgba(255,255,255,0.1);flex-shrink:0;margin:0 2px;}
.vl-nav-store{color:rgba(200,255,0,0.6)!important;}
.vl-nav-cta{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;padding:9px 20px;border-radius:100px;border:1px solid var(--glass-accent-border);color:var(--accent)!important;background:var(--glass-accent-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .25s,border-color .25s;flex-shrink:0;overflow:hidden;position:relative;}
.vl-nav-cta::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(200,255,0,0.12),transparent);transform:skewX(-15deg);transition:left .5s;pointer-events:none;}
.vl-nav-cta:hover::before{left:130%;}
.vl-nav-cta:hover{background:rgba(200,255,0,0.2);border-color:rgba(200,255,0,0.55);}

/* MARQUEE */
.vl-marquee-wrap{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;overflow:hidden;background:var(--off-black);}
.vl-marquee-track{display:flex;animation:marquee 18s linear infinite;white-space:nowrap;}
.vl-marquee-item{font-family:var(--display);font-size:13px;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;padding:0 40px;flex-shrink:0;}
.vl-marquee-item span{color:var(--accent);margin:0 16px;}

/* GLASS BTN */
.vl-glass-btn{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;padding:14px 32px;border-radius:100px;border:1px solid var(--glass-accent-border);color:var(--accent)!important;background:var(--glass-accent-bg);backdrop-filter:blur(12px);display:inline-flex;align-items:center;overflow:hidden;transition:background .25s,border-color .25s;}
.vl-glass-btn::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(200,255,0,0.1),transparent);transform:skewX(-15deg);transition:left .5s;pointer-events:none;}
.vl-glass-btn:hover::before{left:130%;}
.vl-glass-btn:hover{background:rgba(200,255,0,0.2);border-color:rgba(200,255,0,0.55);}

/* CTA STRIP */
.vl-cta-strip{padding:100px 48px;background:var(--off-black);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:40px;}
.vl-cta-text{font-family:var(--display);font-size:clamp(36px,5vw,64px);letter-spacing:0.03em;line-height:1;color:var(--white);}
.vl-cta-text .highlight{color:var(--accent);}

/* FOOTER */
#vl-footer{padding:40px 48px;background:var(--black);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.vl-footer-logo{font-family:var(--display);font-size:18px;letter-spacing:0.12em;color:var(--muted);}
.vl-footer-logo span{color:var(--accent);}
.vl-footer-copy{font-family:var(--mono);font-size:10px;color:rgba(240,237,232,0.2);text-transform:uppercase;}

/* ELEMENTOR OVERRIDES */
.elementor-page{background:var(--black)!important;}
.elementor-section{background:transparent;}
.e-con{background:transparent;}
.elementor-widget-heading .elementor-heading-title{font-family:var(--display)!important;color:var(--white)!important;}
.elementor-widget-text-editor{color:var(--muted)!important;font-family:var(--body)!important;}

/* PAGE HERO */
.vl-page-hero{padding:160px 48px 100px;position:relative;overflow:hidden;}
.vl-ghost-text{position:absolute;bottom:-20px;left:40px;font-family:var(--display);font-size:clamp(100px,18vw,220px);letter-spacing:-0.02em;color:rgba(255,255,255,0.025);pointer-events:none;user-select:none;line-height:1;}
.vl-page-title{font-family:var(--display);font-size:clamp(56px,9vw,120px);line-height:0.92;color:var(--white);opacity:0;animation:fadeUp .8s .2s forwards;}
.vl-outline{-webkit-text-stroke:1px rgba(240,237,232,0.2);color:transparent;}

/* WOOCOMMERCE */
.woocommerce{background:var(--black);color:var(--white);}
.woocommerce a{color:var(--accent);}
.woocommerce .button,.woocommerce button.button,.woocommerce input.button{background:var(--accent)!important;color:var(--black)!important;font-family:var(--mono)!important;letter-spacing:0.12em;text-transform:uppercase;border:none;border-radius:0;font-size:11px;padding:14px 28px;}
.woocommerce .button:hover{background:#d4ff1a!important;}
.woocommerce ul.products li.product{background:var(--surface);border:1px solid var(--border);}
.woocommerce ul.products li.product a{color:var(--white);}
.woocommerce ul.products li.product .price{color:var(--accent);font-family:var(--display);font-size:24px;}
.woocommerce-page .woocommerce{padding:120px 48px;}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* RESPONSIVE */
@media(max-width:768px){
  #vl-nav{width:calc(100% - 32px);}
  .vl-nav-pill{display:none;}
  .vl-page-hero{padding:120px 24px 60px;}
  .vl-cta-strip{padding:60px 24px;flex-direction:column;text-align:center;}
  #vl-footer{padding:32px 24px;flex-direction:column;gap:16px;text-align:center;}
}