/* =========================================================
   🎃 Rawi — زينة الهالوين (لمسات خفيفة)
   تُحمَّل فقط في موسم الهالوين — انظر inc/halloween.php
   ========================================================= */

.rawi-halloween {
    --hw-orange: #ff7a18;
    --hw-purple: #8b5cf6;
    --hw-glow: rgba(255, 122, 24, 0.45);
}

.rawi-halloween ::selection { background: var(--hw-orange); color: #160a00; }

/* ---------- شريط التهنئة (يُغلق ويُحفظ) ---------- */
.hw-ribbon {
    position: relative;
    z-index: 201;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 44px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(120px 40px at 15% 50%, rgba(255, 122, 24, .35), transparent 70%),
        radial-gradient(120px 40px at 85% 50%, rgba(139, 92, 246, .35), transparent 70%),
        linear-gradient(90deg, #1a0d24, #2a1206 50%, #1a0d24);
    border-bottom: 1px solid rgba(255, 122, 24, .35);
}
.hw-ribbon a {
    white-space: nowrap;
    color: var(--hw-orange);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.hw-ribbon a:hover { color: #ffb067; }
.hw-ribbon-close {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.hw-ribbon-close:hover { background: rgba(255, 255, 255, .18); }

/* ---------- الهيدر: خط برتقالي/بنفسجي متحرك ---------- */
.rawi-halloween .rawi-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--hw-orange), var(--hw-purple), var(--hw-orange));
    background-size: 200% 100%;
    animation: hw-flow 8s linear infinite;
    opacity: .85;
    pointer-events: none;
}
@keyframes hw-flow { to { background-position: 200% 0; } }

/* ---------- يقطينة بجانب الشعار ---------- */
.hw-pumpkin {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-inline-start: 6px;
    background: url('../img/halloween/pumpkin.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 6px var(--hw-glow));
    transform-origin: 50% 10%;
    animation: hw-swing 3.2s ease-in-out infinite;
    cursor: pointer;
    border: 0;
    padding: 0;
    flex-shrink: 0;
}
.hw-pumpkin.is-spin { animation: hw-spin .9s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hw-swing {
    0%, 100% { transform: rotate(-7deg); }
    50%      { transform: rotate(7deg); }
}
@keyframes hw-spin {
    from { transform: rotate(0) scale(1); }
    50%  { transform: rotate(200deg) scale(1.35); }
    to   { transform: rotate(360deg) scale(1); }
}

/* ---------- أيقونات عناوين الأقسام ---------- */
.rawi-halloween .galsa-section-icon {
    color: var(--hw-orange);
    text-shadow: 0 0 10px var(--hw-glow);
    animation: hw-flicker 4.5s infinite;
}
@keyframes hw-flicker {
    0%, 100%      { opacity: 1; }
    46%           { opacity: 1; }
    48%           { opacity: .45; }
    50%           { opacity: 1; }
    52%           { opacity: .7; }
    54%           { opacity: 1; }
}

/* ---------- توهج البطاقات ---------- */
.rawi-halloween .webtoon-card .cover-wrapper {
    transition: box-shadow .25s ease;
}
.rawi-halloween .webtoon-card:hover .cover-wrapper {
    box-shadow: 0 0 0 2px rgba(255, 122, 24, .6), 0 10px 28px rgba(255, 122, 24, .25);
}

/* ---------- شبكة العنكبوت + العنكبوت المتدلي ---------- */
.hw-decor {
    position: fixed;
    top: var(--header-h, 64px);
    left: 0;
    right: 0;
    height: 0;
    z-index: 150;
    pointer-events: none;
}
.hw-web {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    background: url('../img/halloween/web.svg') 0 0 / contain no-repeat;
    opacity: .35;
}
html.light .hw-web { filter: invert(.7); opacity: .4; }

.hw-spider {
    position: absolute;
    top: 0;
    left: 18%;
    width: 1px;
    height: 70px;
    background: linear-gradient(rgba(207, 211, 220, .55), rgba(207, 211, 220, .25));
    transform-origin: top center;
    animation: hw-drop 9s ease-in-out infinite;
}
html.light .hw-spider { background: rgba(40, 40, 50, .35); }
.hw-spider i {
    position: absolute;
    bottom: -14px;
    left: -12px;
    width: 24px;
    height: 24px;
    background: url('../img/halloween/spider.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 3px rgba(255, 122, 24, .7));
    animation: hw-wiggle 1.6s ease-in-out infinite;
}
@keyframes hw-drop {
    0%, 100% { height: 40px; }
    45%      { height: 150px; }
    55%      { height: 150px; }
}
@keyframes hw-wiggle {
    0%, 100% { transform: rotate(-8deg); }
    50%      { transform: rotate(8deg); }
}

/* ---------- الخفافيش (تُنشأ من الجافاسكربت) ---------- */
.hw-bat {
    position: fixed;
    top: 0;
    left: 0;
    width: 54px;
    height: 27px;
    z-index: 160;
    pointer-events: none;
    will-change: transform;
}
.hw-bat i {
    display: block;
    width: 100%;
    height: 100%;
    background: url('../img/halloween/bat.svg') center / contain no-repeat;
    filter: drop-shadow(0 0 3px rgba(255, 122, 24, .9)) drop-shadow(0 0 8px rgba(255, 122, 24, .35));
    animation: hw-flap .18s ease-in-out infinite alternate;
}
@keyframes hw-flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(.45); }
}

/* ---------- الفوتر: مقبرة صغيرة على الحافة ---------- */
.rawi-halloween .rawi-footer { position: relative; }
.rawi-halloween .rawi-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -38px;
    height: 38px;
    background: url('../img/halloween/graveyard.svg') bottom / 100% 100% no-repeat;
    opacity: .28;
    pointer-events: none;
}
.hw-footer-note {
    text-align: center;
    font-size: 12.5px;
    color: var(--text2, #939aab);
    padding: 10px 16px 14px;
}

/* ---------- الجوال ---------- */
@media (max-width: 768px) {
    .hw-web { width: 70px; height: 70px; opacity: .25; }
    .hw-spider { display: none; }
    .hw-ribbon { font-size: 12.5px; padding: 7px 40px; }
    .hw-ribbon .hw-long { display: none; }
    .hw-pumpkin { width: 22px; height: 22px; }
}

/* ---------- احترام "تقليل الحركة" ---------- */
@media (prefers-reduced-motion: reduce) {
    .rawi-halloween .rawi-header::after,
    .hw-pumpkin,
    .rawi-halloween .galsa-section-icon,
    .hw-spider,
    .hw-spider i { animation: none !important; }
    .hw-bat { display: none !important; }
}