/* ==========================================================================
   WPPIT — Homepage Hero Section
   يُفعَّل هذا الملف عبر functions.php — لا تضعه داخل بلوك HTML
   ========================================================================== */

:root{
    --wp-black:#0a0a0c;
    --wp-panel:#131316;
    --wp-white:#f5f5f7;
    --wp-muted:#8b8b93;
    --wp-red:#ef4444;
    --wp-red-glow:rgba(239,68,68,.35);
}

.wp-hero{
    position:relative;
    background:var(--wp-black);
    overflow:hidden;
    padding:90px 24px 0;
    min-height:640px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-family:'IBM Plex Sans Arabic', sans-serif;
    box-sizing:border-box;

    /* Full-bleed: يكسر حاوية القالب (max-width) ويمتد لعرض الشاشة بالكامل */
    width:100vw;
    max-width:100vw;
    margin-inline-start:calc(-50vw + 50%);
    margin-inline-end:calc(-50vw + 50%);
}
.wp-hero *{ box-sizing:border-box; }

/* subtle blueprint grid */
.wp-hero__grid-bg{
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events:none;
}

/* center glow */
.wp-hero__glow{
    position:absolute;
    top:50%; left:50%;
    width:900px; height:900px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, var(--wp-red-glow) 0%, transparent 62%);
    opacity:.35;
    pointer-events:none;
}

/* node network signature (left / right) */
.wp-hero__nodes{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:340px;
    height:420px;
    opacity:.9;
    pointer-events:none;
    transition:transform .3s ease-out;
}
.wp-hero__nodes--right{ right:2%; }
.wp-hero__nodes--left{ left:2%; transform:translateY(-50%) scaleX(-1); }

.wp-node-line{
    fill:none;
    stroke:rgba(239,68,68,.28);
    stroke-width:1.4;
}
.wp-node-pulse{
    fill:none;
    stroke:var(--wp-red);
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:14 240;
    stroke-dashoffset:0;
    filter:drop-shadow(0 0 4px var(--wp-red));
    animation:wp-travel 3.4s linear infinite;
}
.wp-node circle{
    fill:var(--wp-panel);
    stroke:rgba(239,68,68,.6);
    stroke-width:1.4;
}
.wp-node circle.core{ fill:var(--wp-red); stroke:none; }
.wp-node text{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    fill:var(--wp-muted);
    transform:scaleX(1);
}
.wp-hero__nodes--left .wp-node text{ transform:scaleX(-1); }

.wp-node-drift{ animation:wp-drift 6s ease-in-out infinite; }
.wp-node-drift.d2{ animation-delay:.8s; }
.wp-node-drift.d3{ animation-delay:1.6s; }
.wp-node-drift.d4{ animation-delay:2.4s; }

@keyframes wp-travel{
    from{ stroke-dashoffset:0; }
    to{ stroke-dashoffset:-500; }
}
@keyframes wp-drift{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
}

/* content */
.wp-hero__content{
    position:relative;
    z-index:2;
    max-width:760px;
}
.wp-hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    color:var(--wp-red);
    background:rgba(239,68,68,.08);
    border:1px solid rgba(239,68,68,.25);
    padding:7px 16px;
    border-radius:30px;
    margin-bottom:22px;
    letter-spacing:.3px;
}
.wp-hero__eyebrow::before{ content:"●"; font-size:8px; animation:wp-blink 1.6s ease-in-out infinite; }
@keyframes wp-blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.wp-hero__content h1{
    font-size:clamp(32px, 5vw, 52px);
    font-weight:700;
    color:var(--wp-white);
    margin:0 0 14px;
    line-height:1.25;color: #fff !important;
}
.wp-hero__content h1 span{ color:var(--wp-red); }

.wp-hero__tagline{
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    color:var(--wp-red);
    margin:0 0 22px;
    direction:ltr;
    letter-spacing:.2px;
}
.wp-hero__tagline .sep{ color:var(--wp-muted); }

.wp-hero__desc{
    font-size:15px;
    color:var(--wp-muted);
    line-height:1.9;
    margin:0 auto 32px;
    max-width:640px;  color: #999 !important;
}

.wp-hero__actions{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:56px;
}
.wp-btn-primary, .wp-btn-ghost{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 30px;
    border-radius:10px;
    font-weight:600;
    font-size:14.5px;
    text-decoration:none;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.wp-btn-primary {
  background: var(--wp-red);
  color: #fff;
  color: #fff !important;
}
.wp-btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(239,68,68,.45);
}
.wp-btn-ghost {
  background: transparent;
  color: var(--wp-white);
  border: 1.5px solid rgba(255, 255, 255, 0.79);
  color: #fff !important;
}
.wp-btn-ghost:hover{
    border-color:rgba(255,255,255,.4);
    background:rgba(255,255,255,.04);
}

/* ticker strip */
.wp-hero__ticker{
    position:relative;
    z-index:2;
    width:100%;
    background:var(--wp-panel);
    border-top:1px solid rgba(255,255,255,.06);
    overflow:hidden;
    padding:14px 0;
}
.wp-hero__ticker-track{
    display:inline-flex;
    white-space:nowrap;
    animation:wp-ticker 22s linear infinite;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--wp-muted);
    direction:ltr;
}
.wp-hero__ticker-track span{ padding:0 40px; }
.wp-hero__ticker-track b{ color:var(--wp-white); font-weight:600; }
.wp-hero__ticker-track em{ color:var(--wp-red); font-style:normal; }
@keyframes wp-ticker{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

@media (max-width:900px){
    .wp-hero__nodes{ display:none; }
    .wp-hero{ padding:60px 18px 0; }
}

@media (prefers-reduced-motion: reduce){
    .wp-node-pulse, .wp-node-drift, .wp-hero__eyebrow::before, .wp-hero__ticker-track{
        animation:none !important;
    }
}