/*
 * Halloween seasonal theme (homepage only) — paired with assets/js/halloween.js.
 * Decorative only: no content, spacing or layout of existing elements changes.
 * Remove the two lines in index.php to switch it off.
 */

:root {
    --hw-orange: #ff7a00;
    --hw-amber: #ffb210;
    --hw-purple: #130445;
    --hw-scale: 1;
}

/* ---------- section hosts & layer ---------- */

.hw-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hw-layer * {
    pointer-events: none;
}

/* Lift existing content above the decoration layer in sections whose
   container isn't already stacked (others already use z-index: 5). */
.hw-on .port_books > .container,
.hw-on .helping_sec > .container,
.hw-on .figure_sec > .container,
.hw-on .professniol_sec > .container-fluid,
.hw-on .Transparent_sec > .container,
.hw-on .testimonial_sec > .container,
.hw-on .faq_sec > .container,
.hw-on .mf > footer > .container {
    position: relative;
    z-index: 2;
}

.hw-on .port_books,
.hw-on .mf {
    position: relative;
}

/* Banner: layer sits behind the girl image (:after) but over the sky. */
.hw-banner.hw-layer {
    z-index: 0;
}

/* ---------- banner re-skin ---------- */

.hw-on .main_slider {
    background:
        radial-gradient(ellipse 70% 45% at 30% 100%, rgba(255, 122, 0, .28), transparent 70%),
        linear-gradient(to bottom, rgba(26, 6, 64, .55) 0%, rgba(19, 4, 69, .25) 55%, rgba(60, 14, 20, .35) 100%),
        url(../images/banner.jpg) center / cover no-repeat;
}

/* Yellow column becomes a dusk-to-pumpkin sky (same size & position). */
.hw-on .main_slider:before {
    background: linear-gradient(to bottom, #1d0a4a 0%, #4b1a7a 30%, #c4480a 68%, #ff8a1a 85%, #ffb210 100%);
}

.hw-on .banner_text h1 .blue {
    text-shadow: 0 0 18px rgba(255, 122, 0, .65);
}

.hw-on .main_header {
    box-shadow: 0 2px 0 var(--hw-orange), 0 6px 18px rgba(255, 122, 0, .22);
}

/* ---------- shared item sizing ---------- */

.hw-item,
.hw-bob {
    position: absolute;
    width: calc(var(--w, 60px) * var(--hw-scale));
}

.hw-bob {
    position: relative;
}

.hw-item svg,
.hw-bob svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hw-flip svg {
    transform: scaleX(-1);
}

.hw-flipv svg {
    transform: scaleY(-1);
}

/* ---------- moon ---------- */

.hw-moon {
    position: absolute;
    width: calc(var(--w, 100px) * var(--hw-scale));
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 34%, #fffdf0 0%, #fdeec0 45%, #f4cf7a 100%);
    box-shadow: 0 0 30px 6px rgba(255, 226, 150, .55), 0 0 110px 40px rgba(255, 160, 50, .22);
    animation: hw-glow 6s ease-in-out infinite alternate;
}

.hw-moon:before,
.hw-moon:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(214, 170, 90, .35);
}

.hw-moon:before {
    width: 22%;
    height: 22%;
    top: 26%;
    left: 52%;
}

.hw-moon:after {
    width: 14%;
    height: 14%;
    top: 58%;
    left: 30%;
    box-shadow: 30px 4px 0 -2px rgba(214, 170, 90, .3);
}

@keyframes hw-glow {
    to {
        box-shadow: 0 0 40px 10px rgba(255, 226, 150, .7), 0 0 140px 55px rgba(255, 160, 50, .3);
    }
}

/* ---------- flyers: bats & witch ---------- */

.hw-fly {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateX(0);
    animation: hw-fly var(--dur, 18s) linear var(--delay, 0s) infinite backwards;
}

.hw-fly > .hw-bob {
    position: absolute;
    right: 100%;
    animation: hw-bob 2.6s ease-in-out infinite alternate;
}

@keyframes hw-fly {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100% + 220px)); }
}

/* Witch crosses once per cycle then waits off-screen. */
.hw-fly-rare {
    animation-name: hw-fly-rare;
}

@keyframes hw-fly-rare {
    0% { transform: translateX(0); }
    40%, 100% { transform: translateX(calc(100% + 220px)); }
}

.hw-rtl {
    animation-direction: reverse;
}

.hw-rtl .hw-witch svg {
    transform: scaleX(-1);
}

@keyframes hw-bob {
    from { transform: translateY(-10px); }
    to { transform: translateY(12px); }
}

.hw-bat svg {
    fill: #0b0220;
    transform-origin: 50% 60%;
    animation: hw-flap .32s ease-in-out infinite alternate;
}

.hw-light .hw-bat svg {
    fill: var(--hw-purple);
    opacity: .8;
}

@keyframes hw-flap {
    from { transform: scaleY(1); }
    to { transform: scaleY(.35); }
}

.hw-witch svg {
    fill: #07010f;
}

.hw-witch .hw-stroke {
    stroke: #07010f;
    fill: none;
}

/* ---------- pumpkins ---------- */

.hw-pumpkin svg {
    filter: drop-shadow(0 0 14px rgba(255, 122, 0, .55));
}

.hw-light .hw-pumpkin svg {
    filter: drop-shadow(0 6px 10px rgba(19, 4, 69, .18)) drop-shadow(0 0 10px rgba(255, 140, 0, .35));
}

.hw-pumpkin .hw-face {
    animation: hw-flicker 2.4s steps(1) var(--delay, 0s) infinite;
}

@keyframes hw-flicker {
    0%, 100% { opacity: 1; }
    12% { opacity: .65; }
    16% { opacity: 1; }
    48% { opacity: .8; }
    52% { opacity: 1; }
    80% { opacity: .55; }
    84% { opacity: 1; }
}

/* ---------- ghosts ---------- */

.hw-ghost {
    animation: hw-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite alternate;
}

.hw-ghost .hw-sheet {
    fill: #fff;
}

.hw-dark .hw-ghost svg {
    opacity: .85;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, .5));
}

.hw-light .hw-ghost .hw-sheet {
    fill: #f6f2ff;
    stroke: #d9cff0;
    stroke-width: 1.5;
}

.hw-light .hw-ghost svg {
    filter: drop-shadow(0 8px 14px rgba(19, 4, 69, .2));
}

@keyframes hw-float {
    from { transform: translateY(-12px) rotate(-4deg); }
    to { transform: translateY(14px) rotate(4deg); }
}

/* ---------- candy corn ---------- */

.hw-candy {
    transform: rotate(var(--rot, 0deg));
    animation: hw-candy var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}

.hw-candy svg {
    filter: drop-shadow(0 3px 4px rgba(19, 4, 69, .25));
}

@keyframes hw-candy {
    from { transform: rotate(var(--rot, 0deg)) translateY(-6px); }
    to { transform: rotate(calc(var(--rot, 0deg) * -1)) translateY(8px); }
}

/* ---------- cobwebs ---------- */

.hw-cobweb svg {
    stroke: rgba(255, 255, 255, .55);
}

.hw-light .hw-cobweb svg {
    stroke: rgba(19, 4, 69, .28);
}

/* ---------- spiders ---------- */

.hw-spider {
    animation: hw-dangle var(--dur, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}

.hw-spider svg {
    fill: #120626;
    stroke: #120626;
}

.hw-spider .hw-thread {
    stroke: rgba(19, 4, 69, .45);
    stroke-width: 1;
}

.hw-dark .hw-spider .hw-thread {
    stroke: rgba(255, 255, 255, .5);
}

@keyframes hw-dangle {
    from { transform: translateY(-24px); }
    to { transform: translateY(18px); }
}

/* ---------- stars ---------- */

.hw-stars {
    position: absolute;
    inset: 0 0 35% 0;
}

.hw-star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    opacity: .3;
    animation: hw-twinkle 3.2s ease-in-out infinite alternate;
}

.hw-star-lg {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px 1px rgba(255, 236, 190, .8);
}

@keyframes hw-twinkle {
    to { opacity: .95; }
}

/* ---------- graveyard silhouette ---------- */

.hw-graveyard {
    position: absolute;
    left: 0;
    width: 100%;
    height: 110px;
}

.hw-graveyard.hw-short {
    height: 64px;
}

.hw-graveyard svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #08011c;
}

.hw-graveyard .hw-stroke {
    stroke: #08011c;
}

.hw-banner .hw-graveyard svg {
    fill: rgba(5, 1, 14, .88);
}

.hw-banner .hw-graveyard .hw-stroke {
    stroke: rgba(5, 1, 14, .88);
}

.hw-graveyard .hw-window {
    fill: var(--hw-amber);
    animation: hw-flicker 3s steps(1) infinite;
}

/* ---------- fog ---------- */

.hw-fog {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 160px;
}

.hw-fog i {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 200%;
    height: 100%;
    background:
        radial-gradient(ellipse 12% 45% at 10% 70%, rgba(255, 255, 255, .13), transparent 70%),
        radial-gradient(ellipse 16% 40% at 32% 80%, rgba(255, 255, 255, .1), transparent 70%),
        radial-gradient(ellipse 12% 50% at 55% 70%, rgba(255, 255, 255, .12), transparent 70%),
        radial-gradient(ellipse 18% 40% at 78% 80%, rgba(255, 255, 255, .1), transparent 70%);
    animation: hw-fog 40s linear infinite;
}

.hw-fog i + i {
    bottom: -50px;
    opacity: .7;
    animation-duration: 65s;
    animation-direction: reverse;
}

@keyframes hw-fog {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- embers ---------- */

.hw-embers {
    position: absolute;
    inset: 0;
}

.hw-ember {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffb347;
    box-shadow: 0 0 8px 2px rgba(255, 122, 0, .8);
    opacity: 0;
    animation: hw-rise 8s ease-in infinite;
}

@keyframes hw-rise {
    0% { transform: translate(0, 0); opacity: 0; }
    15% { opacity: .9; }
    100% { transform: translate(40px, -360px); opacity: 0; }
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
    :root {
        --hw-scale: .85;
    }
}

@media (max-width: 767px) {
    :root {
        --hw-scale: .6;
    }

    .hw-layer > :not(.hw-keep) {
        display: none;
    }

    .hw-graveyard {
        height: 70px;
    }

    .hw-banner-moon {
        right: 16px !important;
        top: 16px !important;
    }

    .hw-banner-rpk {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-layer *,
    .hw-layer *:before,
    .hw-layer *:after {
        animation: none !important;
    }

    .hw-fly,
    .hw-embers {
        display: none;
    }
}