/* =====================================================================
   01Cyber Security Slider — front-end styles
   Everything is scoped under .cyber01-slider-wrap and uses cy01- prefixed
   classes + locally-scoped CSS variables, so it will not leak into or
   clash with the active WordPress theme's styles.
   ===================================================================== */

.cyber01-slider-wrap{
  --cy01-bg-void:#050505;
  --cy01-bg-deep:#081120;
  --cy01-line:#132038;
  --cy01-cyan:#00FFFF;
  --cy01-blue:#00D9FF;
  --cy01-green:#00FF88;
  --cy01-purple:#8B5CF6;
  --cy01-text-hi:#EAF6FF;
  --cy01-text-mid:#9FB3C8;
  --cy01-text-low:#5C7085;
  --cy01-mono:'JetBrains Mono', monospace;
  --cy01-sans:'Vazir', Tahoma, sans-serif;

  position:relative;
  overflow:hidden;
  color:var(--cy01-text-hi);
  font-family:var(--cy01-sans);
  border-radius:18px;
  min-height:var(--cy01-min-h, 560px);
  padding:56px 32px;
  box-sizing:border-box;
  direction:rtl;
}
.cyber01-slider-wrap *{ box-sizing:border-box; }
.cyber01-slider-wrap a{ text-decoration:none; }
.cyber01-slider-wrap ::selection{ background:var(--cy01-cyan); color:#000; }

/* ---------- background style variants ---------- */
/* solid: the original opaque dark panel — safest choice, guaranteed contrast regardless of the page behind it */
.cyber01-slider-wrap.cy01-bg-solid{ background:var(--cy01-bg-void); }

/* transparent: no panel at all — the slider blends directly into your page/theme background */
.cyber01-slider-wrap.cy01-bg-transparent{ background:transparent; }

/* glass: frosted-glass panel — semi-transparent dark tint + blur, so it still separates from
   the page behind it (for legibility) without being a flat opaque block */
.cyber01-slider-wrap.cy01-bg-glass{
  background:rgba(8,17,32,.38);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
/* browsers without backdrop-filter support (rare in 2026) still get a readable panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cyber01-slider-wrap.cy01-bg-glass{ background:rgba(8,17,32,.72); }
}

/* ---------- text color variants ---------- */
/* light (default): white/near-white text — for dark or solid backgrounds */
/* dark: near-black text — use this when the slider sits on a light page background
   (typically together with the "transparent" or "glass" background style) */
.cyber01-slider-wrap.cy01-text-dark{
  --cy01-text-hi:#0b0f14;
  --cy01-text-mid:#33404d;
  --cy01-text-low:#66717c;
  --cy01-line:rgba(11,15,20,.16);
}
.cyber01-slider-wrap.cy01-text-dark .cy01-eyebrow{
  background:rgba(11,15,20,.05);
}
.cyber01-slider-wrap.cy01-text-dark .cy01-btn-ghost{
  border-color:rgba(11,15,20,.22);
}
.cyber01-slider-wrap.cy01-text-dark .cy01-btn-ghost:hover{
  border-color:var(--cy01-cyan); color:var(--cy01-cyan);
}
.cyber01-slider-wrap.cy01-text-dark .cy01-term-title{ color:var(--cy01-text-low); }
.cyber01-slider-wrap.cy01-text-dark .cy01-terminal{
  background:rgba(255,255,255,.55);
  border-color:rgba(11,15,20,.14);
}
.cyber01-slider-wrap.cy01-text-dark .cy01-term-bar{
  background:rgba(11,15,20,.04);
  border-color:rgba(11,15,20,.14);
}
.cyber01-slider-wrap.cy01-text-dark .cy01-term-body .cy01-ok{ color:#0a8f52; }
.cyber01-slider-wrap.cy01-text-dark .cy01-term-body .cy01-warn{ color:#a5720a; }

/* ---------- full-bleed animated background ---------- */
.cy01-bg{ position:absolute; inset:0; z-index:0; }
.cy01-bg-layer{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; overflow:hidden; }
.cy01-bg-layer.active{ opacity:1; }
.cy01-hex-grid{
  position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(0,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,255,.06) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
}


/* ---------- layout ---------- */
.cy01-inner{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  max-width:1200px; margin:0 auto;
}
@media (max-width:900px){ .cy01-inner{ grid-template-columns:1fr; } }

/* ---------- slide text ---------- */
.cy01-stage{ position:relative; min-height:340px; }
.cy01-slide{ position:absolute; inset:0; display:none; }
.cy01-slide.active{ display:block; animation:cy01SlideIn .7s ease both; }
@keyframes cy01SlideIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

.cy01-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--cy01-sans); font-size:12px;
  border:1px solid rgba(0,255,136,.35); background:rgba(0,255,136,.06);
  padding:7px 14px; border-radius:999px; letter-spacing:.3px; margin-bottom:20px;
}
.cy01-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; animation:cy01Blink 1.6s infinite; }
@keyframes cy01Blink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }

.cy01-heading{
  font-size:clamp(28px, 3.6vw, 48px); font-weight:800; line-height:1.25; letter-spacing:-.4px; margin:0 0 18px;
  position:relative;
}
.cy01-grad{ -webkit-background-clip:text; background-clip:text; color:transparent; }

.cy01-lead{ font-size:16px; color:var(--cy01-text-mid); max-width:520px; line-height:1.9; margin:0 0 28px; }

.cy01-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.cy01-btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:8px;
  font-size:14px; font-weight:600; transition:all .25s ease; border:1px solid transparent; cursor:pointer;
}
.cy01-btn-ghost{ border-color:var(--cy01-line); color:var(--cy01-text-hi); background:transparent; }
.cy01-btn-ghost:hover{ border-color:var(--cy01-cyan); color:var(--cy01-cyan); }
.cy01-btn-solid{ background:linear-gradient(135deg, var(--cy01-cyan), var(--cy01-purple)); color:#050505; font-weight:700; box-shadow:0 0 20px rgba(0,217,255,.3); }
.cy01-btn-solid:hover{ transform:translateY(-2px); box-shadow:0 6px 26px rgba(0,217,255,.45); }

/* ---------- controls ---------- */
.cy01-controls{ display:flex; align-items:center; gap:16px; margin-top:36px; flex-wrap:wrap; }
.cy01-arrows{ display:flex; gap:8px; }
.cy01-arrow-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--cy01-line); background:transparent; color:var(--cy01-text-mid);
  display:flex; align-items:center; justify-content:center; transition:all .25s ease; cursor:pointer;
}
.cy01-arrow-btn:hover{ border-color:var(--cy01-cyan); color:var(--cy01-cyan); }
.cy01-dots{ display:flex; gap:8px; }
.cy01-dots button{
  width:30px; height:4px; border-radius:99px; background:var(--cy01-line); border:none; padding:0; cursor:pointer; position:relative; overflow:hidden;
}
.cy01-dots button .cy01-fill{ position:absolute; inset:0; background:linear-gradient(90deg,var(--cy01-cyan),var(--cy01-green)); width:0%; }
.cy01-meta{ display:flex; align-items:center; gap:12px; font-family:var(--cy01-sans); font-size:12.5px; color:var(--cy01-text-low); }
.cy01-meta b{ color:var(--cy01-cyan); font-weight:600; }
.cy01-play-pause{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--cy01-line); background:transparent; color:var(--cy01-text-mid);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .25s ease;
}
.cy01-play-pause:hover{ border-color:var(--cy01-green); color:var(--cy01-green); }

/* ---------- visual panel ---------- */
.cy01-slide-visual{ position:relative; height:340px; display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:3; }
.cy01-visual-panel{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; }
.cy01-visual-panel.active{ display:flex; animation:cy01SlideIn .8s ease both; }

.cy01-hud-corners{ position:absolute; inset:-14px; pointer-events:none; z-index:2; }
.cy01-hud-corner{ position:absolute; width:24px; height:24px; border-color:var(--cy01-cyan); opacity:.7; animation:cy01HudPulse 2.4s ease-in-out infinite; }
.cy01-hud-corner.tl{ top:0; right:0; border-top:2px solid; border-right:2px solid; border-radius:0 6px 0 0; }
.cy01-hud-corner.tr{ top:0; left:0; border-top:2px solid; border-left:2px solid; border-radius:6px 0 0 0; }
.cy01-hud-corner.bl{ bottom:0; right:0; border-bottom:2px solid; border-right:2px solid; border-radius:0 0 6px 0; }
.cy01-hud-corner.br{ bottom:0; left:0; border-bottom:2px solid; border-left:2px solid; border-radius:0 0 0 6px; }
@keyframes cy01HudPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:.9; } }

/* terminal */
.cy01-terminal{
  width:100%; max-width:420px; height:300px; display:flex; flex-direction:column;
  background:rgba(8,17,32,.75); border:1px solid var(--cy01-line); border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,255,255,.06), 0 30px 80px -20px rgba(0,255,255,.15);
  overflow:hidden; animation:cy01Float 6s ease-in-out infinite;
}
@keyframes cy01Float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.cy01-term-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--cy01-line); background:rgba(255,255,255,.02); flex:none; }
.cy01-term-dot{ width:11px; height:11px; border-radius:50%; }
.cy01-term-dot.r{ background:#FF5F57; } .cy01-term-dot.y{ background:#FEBC2E; } .cy01-term-dot.g{ background:#28C840; }
.cy01-term-title{ margin-inline-start:auto; font-family:var(--cy01-mono); font-size:12px; color:var(--cy01-text-low); direction:ltr; }
.cy01-term-body{
  padding:18px 18px; font-family:var(--cy01-mono); font-size:12.5px; line-height:1.85; direction:ltr; text-align:left;
  flex:1; min-height:0; overflow-y:auto;
}
.cy01-term-body::-webkit-scrollbar{ width:6px; }
.cy01-term-body::-webkit-scrollbar-thumb{ background:rgba(0,255,255,.25); border-radius:99px; }
.cy01-term-body .cy01-ln{ color:var(--cy01-text-mid); word-break:break-word; }
.cy01-term-body .cy01-ok{ color:var(--cy01-green); }
.cy01-term-body .cy01-warn{ color:#FEBC2E; }
.cy01-caret{ display:inline-block; width:7px; height:13px; background:var(--cy01-cyan); vertical-align:middle; box-shadow:0 0 8px var(--cy01-cyan); animation:cy01Blink 1s steps(1) infinite; }

/* shield */
.cy01-shield-wrap{ position:relative; width:240px; height:260px; display:flex; align-items:center; justify-content:center; }
.cy01-shield-glow{ position:absolute; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(0,255,136,.25), transparent 70%); filter:blur(10px); animation:cy01Pulse 3s ease-in-out infinite; }
@keyframes cy01Pulse{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.12); opacity:1; } }
.cy01-shield-ring{ position:absolute; border:1px solid rgba(0,255,136,.3); border-radius:50%; }
.cy01-shield-ring.r1{ width:180px; height:180px; animation:cy01Spin 12s linear infinite; }
.cy01-shield-ring.r2{ width:230px; height:230px; border-style:dashed; animation:cy01Spin 20s linear infinite reverse; }
@keyframes cy01Spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

/* globe */
.cy01-globe-wrap{ position:relative; width:260px; height:260px; }
.cy01-globe-core{ position:absolute; inset:26px; border-radius:50%; border:1px solid rgba(0,217,255,.4); background:radial-gradient(circle at 35% 30%, rgba(0,217,255,.15), transparent 60%); }
.cy01-globe-core::before,.cy01-globe-core::after{ content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(0,217,255,.2); }
.cy01-globe-core::before{ transform:scaleX(.35); }
.cy01-globe-core::after{ transform:scaleY(.35); }
.cy01-globe-lat{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(0,217,255,.15); }
.cy01-globe-lat.l1{ inset:60px; } .cy01-globe-lat.l2{ inset:86px; }
.cy01-lock-badge{
  position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:54px; height:54px; border-radius:12px;
  background:var(--cy01-bg-deep); border:1px solid var(--cy01-cyan); display:flex; align-items:center; justify-content:center;
  color:var(--cy01-cyan); box-shadow:0 0 22px rgba(0,217,255,.4);
}

/* badge */
.cy01-badge-wrap{ position:relative; width:240px; height:260px; display:flex; align-items:center; justify-content:center; }
.cy01-badge-hex{
  width:190px; height:190px; position:relative;
  background:linear-gradient(135deg, rgba(139,92,246,.15), rgba(0,255,255,.08));
  clip-path:polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  border:1px solid rgba(139,92,246,.4); display:flex; align-items:center; justify-content:center; animation:cy01Float 5s ease-in-out infinite;
}
.cy01-badge-orbit{ position:absolute; width:240px; height:240px; border:1px dashed rgba(139,92,246,.25); border-radius:50%; animation:cy01Spin 25s linear infinite; }
.cy01-badge-orbit span{ position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background:var(--cy01-purple); box-shadow:0 0 10px var(--cy01-purple); }

/* glitch transition on heading */
.cy01-heading.cy01-glitch{ animation:cy01GlitchShake .38s linear; }
.cy01-heading.cy01-glitch::before,.cy01-heading.cy01-glitch::after{
  content:attr(data-text); position:absolute; top:0; right:0; left:0; width:100%; overflow:hidden;
}
.cy01-heading.cy01-glitch::before{ color:var(--cy01-cyan); clip-path:inset(0 0 60% 0); transform:translate(-3px,-2px); animation:cy01GlitchTop .38s linear; }
.cy01-heading.cy01-glitch::after{ color:var(--cy01-purple); clip-path:inset(60% 0 0 0); transform:translate(3px,2px); animation:cy01GlitchBottom .38s linear; }
@keyframes cy01GlitchShake{ 0%,100%{ transform:translate(0); } 20%{ transform:translate(-2px,1px); } 40%{ transform:translate(2px,-1px); } 60%{ transform:translate(-1px,-1px); } 80%{ transform:translate(1px,1px); } }
@keyframes cy01GlitchTop{ 0%{ transform:translate(-6px,-3px); } 100%{ transform:translate(0,0); opacity:0; } }
@keyframes cy01GlitchBottom{ 0%{ transform:translate(6px,3px); } 100%{ transform:translate(0,0); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .cyber01-slider-wrap *{ animation:none !important; transition:none !important; }
}

@media (max-width:600px){
  .cyber01-slider-wrap{ padding:36px 20px; }
  .cy01-slide-visual{ height:260px; }
  .cy01-terminal{ height:240px; }
  .cy01-shield-wrap,.cy01-badge-wrap{ width:200px; height:220px; }
  .cy01-globe-wrap{ width:220px; height:220px; }
}