/*
Theme Name: PowerExpert-by-MrKali
Theme URI: https://powerexpert.at
Author: MrKali
Description: قالب مخصص يستخدم ملف home.php كصفحة رئيسية
Version: 1.0
*/

/* -----------------------------------
  Variables / Base
----------------------------------- */
:root {
  --bg-gradient: linear-gradient(to bottom, #05122d, #0b1d4e, #010b1e, #080f32, #01030b);
  --accent: #2ecc71;
  --accent-dark: #27ae60;
  --cyan-1: #00ffff;
  --cyan-2: #00ccff;
  --white: #ffffff;
  --container-bg: rgba(5, 18, 45, 0.64);
}

/* -----------------------------------
  Base Layout & Body
----------------------------------- */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg-gradient);
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  overflow: hidden;
}

/* -----------------------------------
  Starry Sky (background layers)
----------------------------------- */
.starry-sky {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
}
#stars-container, #shooting-stars-container, #moving-stars-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.star, .moving-star, .shooting-star {
  position: absolute; background-color: var(--white); border-radius: 100%;
}
.star { width:1px; height:1px; opacity:0; animation: twinkling 2s infinite alternate, changePosition 4s infinite linear; }
.shooting-star { width:1px; height:1px; animation: shootingStarAnimation 8s cubic-bezier(0.4,0.1,0.7,0.9) infinite; }
.moving-star { width:3px; height:3px; opacity:0; animation: moveForward 5s linear forwards; }
@keyframes twinkling { 0%,100%{opacity:0;} 20%,80%{opacity:1;} }
@keyframes changePosition { 0%,100% { --x: calc(100 * var(--random-x)); --y: calc(100 * var(--random-y)); } }

/* -----------------------------------
  Logo / Atom / Orbiting visuals
  (organized: wrapper -> core -> ring -> dots -> orbits)
----------------------------------- */
.logo-wrapper {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 280px;
  z-index: 10; pointer-events: none;
}

/* path ring / outer circle */
.electrni-path-ring {
  position: absolute; top:50%; left:50%;
  width:280px; height:280px; margin:-140px 0 0 -140px;
  border: 1px solid rgba(255,255,255,0.1); border-radius:50%; z-index:3;
}

/* electrons (orbits + trail) */
.electrni {
  position: absolute; top:calc(50% + 5px); left:50%;
  width:9px; height:9px; border-radius:50%; background: var(--white);
  box-shadow: 0 0 4px rgba(255,255,255,0.6), 0 0 12px rgba(255,255,255,0.3);
  animation: orbetiAnimation 9s cubic-bezier(0.6,0,0.4,1) infinite reverse, electrniTrail 1.5s ease-in-out infinite;
}
.orbeti1 { animation-duration: 9s, 1.5s; }
.orbeti2 { animation-duration: 8s, 1.5s; }
.orbeti3 { animation-duration: 7s, 1.5s; }
.orbeti4 { animation-duration: 6s, 1.5s; }
.orbeti5 { animation-duration: 5s, 1.5s; }
@keyframes orbetiAnimation { from { transform: rotateY(90deg) translateY(-30px) translateZ(156px); } to { transform: rotateY(-270deg) translateY(-30px) translateZ(156px); } }
@keyframes electrniTrail {
  0%,100% { box-shadow: 0 0 4px rgba(255,255,255,0.6), 0 0 12px rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 2px rgba(255,255,255,0.4), 0 0 6px rgba(255,255,255,0.2); }
}

/* orbiting circles */
.circle { position:absolute; top:50%; left:50%; transform-origin:center; animation: rotateCircles 10s infinite linear; z-index:1; border-radius:50%; border:1px solid rgba(255,255,255,0.3); box-shadow: 0 0 4px rgba(255,255,255,0.2); }
@keyframes rotateCircles { from{transform:translate(-50%,-50%) rotateY(0deg) rotateX(0deg);} to{transform:translate(-50%,-50%) rotateY(360deg) rotateX(360deg);} }
#circle1{width:102px;height:102px;animation-duration:6s;animation-direction:alternate;}
#circle2{width:143px;height:143px;animation-duration:8s;animation-direction:reverse;}
#circle3{width:184px;height:184px;animation-duration:10s;}
#circle4{width:224px;height:224px;animation-duration:12s;}
#circle5{width:265px;height:265px;animation-duration:14s;}

/* logo core: hexagon + power icon */
.logo-core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; transform-style:preserve-3d; }
.hexagon-outer { width:52px; height:30px; background: rgba(0,255,255,0.03); clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); display:flex; align-items:center; justify-content:center; position:relative; transition: outline .3s ease, transform .3s ease; }
.hexagon-outer::before { content:''; position:absolute; inset:0; clip-path:inherit; border:1px solid rgba(255,255,255,0.3); opacity:0; filter: drop-shadow(0 0 2px rgba(255,255,255,0.2)); animation:borderPulse 2s ease-in-out infinite; }
.hexagon-inner { width:43px; height:25px; background:transparent; clip-path:inherit; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.power-icon { width:24px; height:24px; animation:iconPulse 2s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(255,255,255,0.5)); }
@keyframes borderPulse { 0%,100%{opacity:0;transform:scale(1.03);} 50%{opacity:1;transform:scale(1.10);} }
@keyframes iconPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }

/* electrni ring & ticks / binary ring */
.electrni-ring { position:absolute; top:50%; left:50%; width:280px; height:280px; margin:-140px 0 0 -140px; border-radius:50%; animation:rotateRing 10s linear infinite reverse; pointer-events:none; z-index:4; }
.electrni-dot { position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; top:50%; left:50%; transform-origin:center; transform:rotate(calc(var(--i)*60deg)) translate(0,-140px); box-shadow:0 0 8px rgba(255,255,255,0.8),0 0 12px rgba(255,255,255,0.5); animation:electrniTrail 1.5s ease-in-out infinite; }
@keyframes rotateRing { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.animated-glow-rotate { animation: rotateRing 60s linear infinite reverse; }

/* tachometer / tick marks / binary digits */
.tachometer-ring { position:absolute; top:50%; left:50%; width:250px; height:250px; margin:-125px 0 0 -125px; pointer-events:none; z-index:5; }
.tick-mark{ position:absolute; top:50%; left:50%; width:2px; height:12px; background:#fff; box-shadow:0 0 6px rgba(255,255,255,0.3); transform-origin:center; }
.tick-mark.small { height:6px; opacity:.6; box-shadow:0 0 4px rgba(255,255,255,0.2); }
.tick-mark.tiny { height:3px; opacity:.4; box-shadow:0 0 3px rgba(255,255,255,0.15); }
.binary-digit { position:absolute; top:50%; left:50%; font:14px monospace; color:#fff; text-shadow:0 0 5px rgba(255,255,255,0.3); transform:translate(-50%,-50%); }

/* -----------------------------------
  Atom / Nucleus / Electrons (small decorative)
----------------------------------- */
.atom-container { position:absolute; top:59%; left:13%; transform:translate(-50%,-50%) scale(clamp(0.5,1vw,1)); transform-origin:center; z-index:1; }
.atom { position:relative; width:15px; height:15px; transform-style:preserve-3d; animation:rotateAtom 13s infinite linear; }
.nucleus, .inner-nucleus, .outer-nucleus { position:absolute; top:20%; left:50%; width:15px; height:15px; border-radius:50%; transform:translate(-50%,-50%); }
.nucleus { background: radial-gradient(circle, #0000ff, #800080); box-shadow: inset -5px -5px 10px rgba(255,255,255,0.2), inset 5px 5px 10px rgba(0,0,0,0.5); transform: rotateX(45deg) rotateY(45deg); }
.inner-nucleus { background-color: rgba(0,0,255,0.3); transform: rotateX(-45deg) rotateY(-45deg); }
.outer-nucleus { background: radial-gradient(circle, #800080, #4b0082); transform: rotateX(45deg) rotateY(45deg); }
@keyframes rotateAtom { from{transform:translate(-50%,-50%) rotateX(0deg) rotateY(0deg);} to{transform:translate(-50%,-50%) rotateX(360deg) rotateY(360deg);} }

/* -----------------------------------
  Centered Content Container (the one in your screenshot)
----------------------------------- */
.container {
  max-width: 1100px;
  padding: 20px;
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(5, 18, 45, 0.64), rgba(1, 3, 11, 0.64));
  border: 3px solid rgba(255,255,255,0.8);
  border-radius: 0;
  box-shadow:
    inset 0 0 6px rgba(255,255,255,0.12),
    0 0 6px 2px rgba(255,255,255,0.15),
    0 0 12px 4px rgba(255,255,255,0.08);
  animation: softGlow 4s ease-in-out infinite alternate;
}
@keyframes softGlow {
  0% { box-shadow: inset 0 0 6px rgba(255,255,255,0.12), 0 0 6px 2px rgba(255,255,255,0.15), 0 0 12px 4px rgba(255,255,255,0.08); }
  100% { box-shadow: inset 0 0 8px rgba(255,255,255,0.15), 0 0 8px 3px rgba(255,255,255,0.20), 0 0 16px 6px rgba(255,255,255,0.12); }
}

/* .text (hero big logo text) kept as in original */
.text { font-size: clamp(80px,10vw,140px); letter-spacing: 0.1em; font-family: 'Orbitron', sans-serif; color:#fff; text-align:center; position:relative; }

/* -----------------------------------
  Under-construction message / CTA
----------------------------------- */
.under-construction-section { position:absolute; bottom:10%; left:50%; transform:translateX(-50%) scale(0.85); width:90%; max-width:600px; text-align:center; z-index:10; }
.message-box { background: rgba(0,0,0,0.5); border: 2px solid #ffffff; border-radius:20px; padding:20px 18px; box-shadow:0 0 20px rgba(255,255,255,0.3); backdrop-filter: blur(8px); }
.notice-text { color:#fff; font-size:16px; line-height:1.5; margin-bottom:18px; font-weight:500; }
.contact-button { display:inline-block; background: linear-gradient(135deg, var(--cyan-1), var(--cyan-2)); color:#000; padding:12px 22px; font-size:15px; font-weight:bold; border-radius:30px; text-decoration:none; transition:all .3s ease; box-shadow:0 0 20px rgba(0,255,255,0.6); }
.contact-button:hover { transform:scale(1.05); box-shadow:0 0 25px var(--cyan-1); }
.phone-number{display:block;margin-top:6px;font-size:14px;font-weight:600;color:#000;}
.whatsapp-icon{display:inline-block;margin-bottom:4px;}
@media (max-width:480px){
  .under-construction-section{transform:translateX(-50%) scale(0.75);}
  .notice-text{font-size:14px;}
  .contact-button{font-size:13px;padding:10px 16px;}
  .phone-number{font-size:12.5px;}
  .whatsapp-icon svg{width:18px;height:18px;}
}

/* -----------------------------------
  Buttons / CTA (site-wide; matches previous green style)
----------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.1rem; border-radius:999px; font-weight:800; text-decoration:none;
  color:#fff !important; border:0; cursor:pointer;
  box-shadow: 0 10px 30px rgba(46,204,113,0.06), 0 0 12px rgba(46,204,113,0.12) inset;
}
.btn-contact { background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border:1px solid rgba(255,255,255,0.03); }
.btn-whatsapp { background: linear-gradient(90deg,#25D366,#1ebe59); border:1px solid rgba(255,255,255,0.03); }
.btn-visit { background: linear-gradient(90deg,#3fb0ff,#2a9df4); border:1px solid rgba(255,255,255,0.03); }
.btn:focus { outline: 3px solid rgba(46,204,113,0.18); outline-offset:3px; transform: translateY(-2px); }

/* Pulsing animations for contact buttons (subtle) */
@keyframes pulseContact { 0% { box-shadow:0 8px 18px rgba(46,204,113,0.08), 0 0 6px rgba(46,204,113,0.12); } 50% { box-shadow:0 18px 36px rgba(46,204,113,0.14),0 0 22px rgba(46,204,113,0.22);} 100% { box-shadow:0 8px 18px rgba(46,204,113,0.08), 0 0 6px rgba(46,204,113,0.12);} }
@keyframes pulseWhats { 0% { box-shadow:0 8px 18px rgba(37,211,102,0.08),0 0 6px rgba(37,211,102,0.12);} 50% { box-shadow:0 18px 36px rgba(37,211,102,0.14),0 0 22px rgba(37,211,102,0.22);} 100% { box-shadow:0 8px 18px rgba(37,211,102,0.08),0 0 6px rgba(37,211,102,0.12);} }
.btn-contact { animation: pulseContact 3.2s infinite ease-in-out; }
.btn-whatsapp { animation: pulseWhats 3.2s infinite ease-in-out; }

/* -----------------------------------
  Hero overlay (keeps same container sizes/responsive)
  — this sits inside .container for consistent measurements
----------------------------------- */
.hero-overlay {
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.4rem 1.6rem;
  background: rgba(0,0,0,0.5);
  border-radius: 12px;
  border: 1px solid rgba(46,204,113,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  color: #fff;
  text-align: center;
}
.hero-title { color: var(--accent); font-weight:800; font-size:1.2rem; margin-bottom:.4rem; text-shadow:0 0 8px rgba(46,204,113,0.25); }
.hero-lead { color: rgba(255,255,255,0.92); font-size:1rem; margin-bottom:1rem; line-height:1.4; }
.services-row { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.9rem; }
.service-pill { background: rgba(255,255,255,0.02); padding:.45rem .8rem; border-radius:999px; font-weight:700; color:rgba(255,255,255,0.92); border:1px solid rgba(46,204,113,0.04); font-size:.92rem; }
.hero-note { margin-top:.8rem; font-size:.9rem; color: rgba(255,255,255,0.78); }

/* -----------------------------------
  Responsive breakpoints (preserve your original behavior)
----------------------------------- */
@media (max-width: 1200px) { .text { font-size: 80px; } }
@media (max-width: 992px) { .text { font-size: 60px; } .container { max-width: 90%; padding: 15px; } }
@media (max-width: 768px) { .text { font-size: 45px; } .atom-container { transform:translate(-50%,-50%) scale(0.8);} }
@media (max-width: 576px) { .text { font-size: 32px; letter-spacing: .05em; } .container { padding:10px; max-width:95%; } }