/*
Theme Name: N0M3RCi — AI Constellation
Theme URI: https://n0m3rci.com
Author: N0M3RCi
Author URI: https://n0m3rci.com
Description: A dark, glass-morphism theme with an animated particle constellation background. Fully compatible with Elementor and the Header Footer Elementor plugin.
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: n0m3rci-theme
Tags: dark, glass-morphism, elementor, one-column, custom-background, custom-logo, featured-images, theme-options

Elementor compatible: true
*/

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:#0a0a0a;
  min-height:100vh;
  overflow-x:hidden;
  font-family:'Oswald',sans-serif;
  color:#fff;
}

/* ─── LIQUID CANVAS (Constellation BG) ─── */
#liquid-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* ─── AMBIENT GLOW ─── */
.ambient-glow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.ambient-glow::before{
  content:'';
  position:absolute;
  top:-30%;left:-10%;
  width:60%;height:60%;
  background:radial-gradient(circle,rgba(245,197,24,0.06),transparent 70%);
  border-radius:50%;
  animation:glideGlow 12s ease-in-out infinite;
}
.ambient-glow::after{
  content:'';
  position:absolute;
  bottom:-20%;right:-10%;
  width:50%;height:50%;
  background:radial-gradient(circle,rgba(245,197,24,0.04),transparent 70%);
  border-radius:50%;
  animation:glideGlow2 15s ease-in-out infinite;
}
@keyframes glideGlow{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(15%,10%) scale(1.2)}
  66%{transform:translate(-10%,5%) scale(0.9)}
}
@keyframes glideGlow2{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-15%,-10%) scale(1.1)}
  66%{transform:translate(10%,-5%) scale(0.8)}
}

/* ─── HERO ─── */
.hero{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:2rem 1rem;
}

/* ─── GLASS CARD ─── */
.glass-card{
  position:relative;
  max-width:1320px;
  width:100%;
  background:rgba(20,20,20,0.55);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(245,197,24,0.12);
  border-radius:32px;
  padding:3.5rem 2.5rem 4.5rem;
  box-shadow:
    0 0 60px rgba(245,197,24,0.04),
    0 0 120px rgba(245,197,24,0.02),
    inset 0 0 60px rgba(245,197,24,0.02);
  overflow:hidden;
}
.glass-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:32px;
  padding:1px;
  background:linear-gradient(160deg,rgba(245,197,24,0.15),transparent 40%,transparent 60%,rgba(245,197,24,0.08));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* ─── LIQUID BLOB OVERLAY ─── */
.liquid-blobs{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:32px;
}
.liquid-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  opacity:0.08;
  animation:morphBlob 14s ease-in-out infinite;
}
.liquid-blob:nth-child(1){
  width:300px;height:300px;
  background:radial-gradient(circle,#f5c518,transparent);
  top:-10%;left:-5%;
  animation-duration:14s;
}
.liquid-blob:nth-child(2){
  width:250px;height:250px;
  background:radial-gradient(circle,#f5c518,transparent);
  bottom:-8%;right:-5%;
  animation-duration:18s;
  animation-delay:-4s;
}
.liquid-blob:nth-child(3){
  width:200px;height:200px;
  background:radial-gradient(circle,#fff,transparent);
  top:40%;right:15%;
  animation-duration:12s;
  animation-delay:-7s;
  opacity:0.04;
}
@keyframes morphBlob{
  0%,100%{transform:translate(0,0) scale(1) rotate(0deg);border-radius:50%}
  20%{transform:translate(20px,-30px) scale(1.2) rotate(10deg);border-radius:40% 60% 50% 50%}
  40%{transform:translate(-15px,20px) scale(0.9) rotate(-5deg);border-radius:55% 45% 40% 60%}
  60%{transform:translate(25px,15px) scale(1.15) rotate(8deg);border-radius:45% 55% 60% 40%}
  80%{transform:translate(-20px,-15px) scale(0.95) rotate(-3deg);border-radius:50% 40% 55% 45%}
}

/* ─── CONTENT ─── */
.content{
  position:relative;
  z-index:1;
}

/* ─── GLASS ORB (brand icon) ─── */
.glass-orb{
  width:56px;height:56px;
  border-radius:16px;
  background:rgba(245,197,24,0.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(245,197,24,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Bangers',cursive;
  font-size:26px;
  color:#f5c518;
  letter-spacing:1px;
  box-shadow:0 4px 20px rgba(245,197,24,0.06);
  animation:orbFloat 4s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.brand-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
  flex-wrap:wrap;
  gap:0.6rem;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-name{
  font-family:'Black Ops One',cursive;
  font-size:clamp(1.1rem,1.8vw,1.6rem);
  color:#f5c518;
  letter-spacing:3px;
  text-shadow:0 0 20px rgba(245,197,24,0.15);
}
.brand-badge{
  font-family:'Righteous',cursive;
  font-size:clamp(0.45rem,0.7vw,0.6rem);
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  border:1px solid rgba(245,197,24,0.1);
  padding:5px 16px;
  border-radius:100px;
  background:rgba(245,197,24,0.03);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* ─── MAIN TITLE ─── */
.main-title{
  font-family:'Bangers',cursive;
  font-size:clamp(3rem,10vw,7rem);
  line-height:1.05;
  color:#f5c518;
  letter-spacing:3px;
  text-shadow:
    5px 5px 0 #000,
    8px 8px 0 rgba(245,197,24,0.1),
    0 0 60px rgba(245,197,24,0.15);
  margin-top:0.15em;
  transform:skew(-2deg);
}
.main-title .accent{
  display:block;
  font-family:'Permanent Marker',cursive;
  font-size:clamp(1.1rem,3vw,2.6rem);
  color:#fff;
  text-shadow:3px 3px 0 #f5c518,0 0 30px rgba(245,197,24,0.1);
  letter-spacing:4px;
  transform:skew(1deg) rotate(-0.5deg);
  margin-top:0.05em;
}

/* ─── GLASS DIVIDER ─── */
.glass-divider{
  width:60%;
  max-width:400px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,197,24,0.2),transparent);
  margin:0.8rem auto;
  position:relative;
}
.glass-divider::after{
  content:'◆';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:rgba(245,197,24,0.25);
  font-size:clamp(0.4rem,0.6vw,0.55rem);
  background:#0a0a0a;
  padding:0 12px;
}

/* ─── MODEL PILLS ─── */
.model-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(0.25rem,0.6vw,0.5rem);
  margin:0.8rem 0;
}
.model-pill{
  font-family:'Righteous',cursive;
  font-size:clamp(0.45rem,0.65vw,0.6rem);
  letter-spacing:2px;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:100px;
  border:1px solid rgba(245,197,24,0.08);
  color:rgba(245,197,24,0.5);
  background:rgba(245,197,24,0.03);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:all 0.35s;
}
.model-pill:hover{
  border-color:rgba(245,197,24,0.3);
  color:#f5c518;
  background:rgba(245,197,24,0.06);
  box-shadow:0 0 20px rgba(245,197,24,0.05);
}

/* ─── GLASS SKETCH GALLERY ─── */
.sketch-gallery{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(0.6rem,1.5vw,1.8rem);
  margin:1.5rem 0;
}
.sketch-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.35rem;
  position:relative;
}
.sketch-card canvas{
  width:clamp(65px,9vw,110px);
  height:clamp(65px,9vw,110px);
  border-radius:18px;
  background:rgba(245,197,24,0.02);
  border:1px solid rgba(245,197,24,0.06);
  transition:all 0.4s;
}
.sketch-card canvas:hover{
  border-color:rgba(245,197,24,0.2);
  box-shadow:0 0 30px rgba(245,197,24,0.06);
  transform:translateY(-5px) scale(1.03);
}
.sketch-label{
  font-family:'Permanent Marker',cursive;
  font-size:clamp(0.65rem,1vw,0.85rem);
  color:rgba(245,197,24,0.5);
  letter-spacing:1px;
}

/* ─── GLASS CHAT PREVIEW ─── */
.chat-preview{
  max-width:600px;
  margin:1.2rem auto 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.chat-bubble{
  display:flex;
  align-items:flex-start;
  gap:10px;
  opacity:0;
  animation:bubbleIn 0.5s forwards;
}
.chat-bubble:nth-child(1){animation-delay:0.2s}
.chat-bubble:nth-child(2){animation-delay:0.8s}
.chat-bubble:nth-child(3){animation-delay:1.6s}
.chat-bubble:nth-child(4){animation-delay:2.4s}

@keyframes bubbleIn{
  0%{opacity:0;transform:translateY(10px) scale(0.95)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.chat-avatar{
  width:32px;height:32px;
  border-radius:10px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Bangers',cursive;
  font-size:14px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.chat-avatar.user{
  background:rgba(245,197,24,0.1);
  border:1px solid rgba(245,197,24,0.12);
  color:#f5c518;
}
.chat-avatar.ai{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  color:#fff;
}

.chat-msg{
  font-family:'Oswald',sans-serif;
  font-size:clamp(0.65rem,0.9vw,0.8rem);
  padding:8px 14px;
  border-radius:14px;
  max-width:85%;
  text-align:left;
  line-height:1.3;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.chat-msg.user{
  background:rgba(245,197,24,0.04);
  border:1px solid rgba(245,197,24,0.06);
  color:rgba(255,255,255,0.7);
  border-bottom-left-radius:4px;
}
.chat-msg.ai{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.5);
  border-bottom-right-radius:4px;
}
.chat-msg .highlight{
  color:#f5c518;
  font-family:'Righteous',cursive;
}

.chat-input-bar{
  display:flex;
  gap:8px;
  margin-top:6px;
  padding:6px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(245,197,24,0.04);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  animation:bubbleIn 0.5s 3s forwards;
}
.chat-input-bar .dot{
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(245,197,24,0.15);
  margin:auto 0;
}
.chat-input-bar .dot:nth-child(2){
  animation:dotPulse 1.5s ease-in-out infinite;
}
.chat-input-bar .dot:nth-child(3){
  animation:dotPulse 1.5s ease-in-out 0.3s infinite;
}
.chat-input-bar .dot:nth-child(4){
  animation:dotPulse 1.5s ease-in-out 0.6s infinite;
}
.chat-input-bar .bar-text{
  flex:1;
  font-family:'Oswald',sans-serif;
  font-size:clamp(0.6rem,0.8vw,0.75rem);
  color:rgba(255,255,255,0.15);
  padding:6px 8px;
  letter-spacing:1px;
}
@keyframes dotPulse{
  0%,100%{opacity:0.15;transform:scale(1)}
  50%{opacity:0.6;transform:scale(1.2)}
}

/* ─── PRICE TAG ─── */
.price-tag{
  font-family:'Bangers',cursive;
  font-size:clamp(2rem,5vw,3.8rem);
  color:#f5c518;
  letter-spacing:2px;
  text-shadow:
    4px 4px 0 #000,
    0 0 50px rgba(245,197,24,0.15);
  animation:priceGlow 2.5s ease-in-out infinite;
  margin:0.5rem 0;
}
.price-tag small{
  font-family:'Oswald',sans-serif;
  font-weight:400;
  font-size:clamp(0.65rem,1vw,0.9rem);
  display:block;
  color:rgba(255,255,255,0.3);
  letter-spacing:5px;
  text-shadow:none;
  margin-top:2px;
}
@keyframes priceGlow{
  0%,100%{text-shadow:4px 4px 0 #000,0 0 50px rgba(245,197,24,0.15)}
  50%{text-shadow:4px 4px 0 #000,0 0 80px rgba(245,197,24,0.35)}
}

/* ─── GLASS CTA ─── */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.8rem;
  margin-top:1.5rem;
}
.cta{
  font-family:'Bangers',cursive;
  font-size:clamp(0.85rem,1.4vw,1.2rem);
  letter-spacing:3px;
  padding:0.8rem 2.8rem;
  border:none;
  cursor:pointer;
  text-transform:uppercase;
  text-decoration:none;
  transition:all 0.4s;
  position:relative;
  overflow:hidden;
  border-radius:14px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.cta-primary{
  background:rgba(245,197,24,0.06);
  border:1px solid rgba(245,197,24,0.12);
  color:#f5c518;
  box-shadow:0 4px 20px rgba(245,197,24,0.04);
}
.cta-primary:hover{
  background:rgba(245,197,24,0.12);
  border-color:#f5c518;
  box-shadow:0 8px 40px rgba(245,197,24,0.12);
  transform:translateY(-2px);
}
.cta-secondary{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.4);
}
.cta-secondary:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.1);
  color:#fff;
  transform:translateY(-2px);
}

/* ─── GLASS FEATURES ─── */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
  max-width:1100px;
  width:100%;
  margin:2.5rem auto 0;
  padding:0 1rem;
}
.feature-card{
  border-radius:18px;
  padding:1.6rem 1.2rem;
  text-align:center;
  transition:all 0.4s;
  cursor:default;
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,0.02);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(245,197,24,0.04);
}
.feature-card:hover{
  border-color:rgba(245,197,24,0.1);
  background:rgba(245,197,24,0.02);
  transform:translateY(-5px);
  box-shadow:0 12px 40px rgba(245,197,24,0.04);
}
.f-icon{
  font-size:1.8rem;
  margin-bottom:0.5rem;
}
.feature-card h3{
  font-family:'Righteous',cursive;
  font-size:0.95rem;
  color:#f5c518;
  letter-spacing:1px;
}
.feature-card p{
  font-family:'Oswald',sans-serif;
  font-size:0.78rem;
  color:rgba(255,255,255,0.3);
  margin-top:0.3rem;
  line-height:1.4;
}

/* ─── SPARKLES ─── */
.sparkle{
  position:absolute;
  width:3px;height:3px;
  background:#f5c518;
  border-radius:50%;
  box-shadow:0 0 10px #f5c518;
  animation:sparkAnim 3s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes sparkAnim{
  0%,100%{opacity:0;transform:scale(0)}
  50%{opacity:0.6;transform:scale(1)}
}

/* ─── WORDPRESS / ELEMENTOR OVERRIDES ─── */
/* Make Elementor sections transparent by default so the constellation shows */
.elementor-section,
.elementor-element,
.elementor-widget-wrap,
.elementor-column,
.elementor-container {
  position: relative;
  z-index: 1;
}

/* Ensure the body BG is dark for Elementor panels */
.elementor-editor-active #liquid-canvas,
.elementor-editor-preview #liquid-canvas {
  display: block;
}

/* Keep content above the canvas */
#page {
  position: relative;
  z-index: 1;
}

/* Default WordPress alignment */
.alignleft{float:left;margin-right:1rem}
.alignright{float:right;margin-left:1rem}
.aligncenter{display:block;margin:0 auto}

/* WordPress editor / content styles */
.wp-block-quote,
blockquote {
  border-left: 3px solid #f5c518;
  padding-left: 1rem;
  color: rgba(255,255,255,0.7);
  margin: 1rem 0;
}

/* Sticky post, bypostauthor */
.sticky,
.bypostauthor {}

/* Screen reader text */
.screen-reader-text {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ─── RESPONSIVE ─── */
@media(max-width:640px){
  .glass-card{padding:2rem 1.2rem 3rem;border-radius:24px}
  .chat-msg{max-width:92%}
  .features{grid-template-columns:1fr 1fr}
  .brand-bar{justify-content:center}
}