/* =============================================
   pesach.css  –  דף שאלון פסח תשפ"ו
   ============================================= */

/* ---- Fonts (reuse from theme) ---- */
@font-face {
    font-family: 'buDona';
    src: url('../fonts/budona/buDona-0.23-700-Bold.otf') format('opentype');
}
@font-face {
    font-family: 'noyland';
    src: url('../fonts/noyland/noyland-ultrabold-aaa.otf') format('opentype');
    font-weight: 700;
}
@font-face {
    font-family: 'noyland';
    src: url('../fonts/noyland/noyland-regular-aaa.otf') format('opentype');
    font-weight: 400;
}

/* ---- CSS Variables ---- */
:root {
    --gold:    #c9922a;
    --gold-lt: #f0d07a;
    --cream:   #fdf8ee;
    --purple:  #473d8f;
    --purple2: #3f2c8e;
    --teal:    #29c5d7;
    --text:    #2a1a00;
    --white:   #ffffff;
    --red-err: #ff4f4f;
    --green-ok:#29d77c;
    --radius:  14px;
}

*, *::before, *::after { box-sizing: border-box; }

body { direction: rtl; }

:root {
    --gold:#c9922a; --gold-lt:#f0d07a; --cream:#fdf8ee;
    --purple:#473d8f; --purple2:#3f2c8e; --err:#e24b4a; --r:12px;
}
*,*::before,*::after{box-sizing:border-box;}
body{direction:rtl;}
 
/* HERO */
.pesach-hero{display: flex;
    flex-direction: column;
    justify-content: center;
    height: max-content;
    }
.pesach-hero-bg{
    position: relative;
        inset: 0;
        width: 100%;
        height: max-content;
        object-fit: contain;
        object-position: center top;
        opacity: 1;
        background-color: #4f3795;
}
.logo{max-width:336px;width:60%;}
.pesach-title-img{max-height:130px;}
.hero-subtitle{font-family:'HEEBO',sans-serif;font-size:20px;color:#fff;margin-bottom:4px;text-shadow:0 1px 6px rgba(0,0,0,.5);}
 
/* BIRDS */
.container-birds {
        z-index: 1;
            position: absolute;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-size: 100% 100%;
            background-position: center center;
            padding: 2rem;
                width: 100vw;
}

/* BIRDS */
.bird {
    background-image: url(../images/sukot5778/birds.svg);
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;
    animation-name: fly-cycle;
    animation-timing-function: steps(10);
    animation-iteration-count: infinite;
        filter: invert(1);
}

.bird--one {
    animation-duration: 1s;
    animation-delay: -0.5s;
}

.bird--two {
    animation-duration: 0.9s;
    animation-delay: -0.75s;
}

.bird--three {
    animation-duration: 1.25s;
    animation-delay: -0.25s;
}

.bird--four {
    animation-duration: 1.1s;
    animation-delay: -0.5s;
}

.bird-container {
    position: absolute;
    top: 20%;
    left: -10%;
    transform: scale(0) translateX(-10vw);
    will-change: transform;
    animation-name: fly-right-one;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.bird-container--one {
    animation-duration: 15s;
    animation-delay: 0s;
}

.bird-container--two {
    animation-duration: 16s;
    animation-delay: 1s;
}

.bird-container--three {
    animation-duration: 14.6s;
    animation-delay: 9.5s;
}

.bird-container--four {
    animation-duration: 16s;
    animation-delay: 10.25s;
}
 
/* QUIZ SECTION */
.pesach-quiz-section{background-color: #4f3795;min-height:60vh;text-align: right;}
 
/* DETAILS CARD */
.details-card{padding:22px 18px;box-shadow:0 4px 24px rgba(71,61,143,.12);border:1.5px solid rgba(71,61,143,.15);position:sticky;top:20px;}
.details-title{font-family: 'HEEBO', sans-serif;
    font-size: 49px;
    font-weight: 700;
    color: #b77da6;
    margin-bottom: -5px;
    }
.details-3{
        font-size: 28px;
        line-height: 1.2;
        font-weight: 600;
        color: #86f3ff;
        margin-bottom: 42px;
    }
.details-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.pesach-input{width:100%;border:1.5px solid #ddd;border-radius:24px;padding:9px 12px;font-family:'HEEBO',sans-serif;font-size:14px;color:#222;background:var(--cream);transition:border-color .25s,box-shadow .25s;height:42px;}
.pesach-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(71,61,143,.12);}
.pesach-input::placeholder{color:#aaa;}
.pesach-input.field-error{border-color:var(--err);background:#fff8f8;}
.gender-group{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.gender-label{display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: 'HEEBO', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    user-select: none;}
.gender-label input{width:16px;height:16px;accent-color:var(--purple);}
 
/* SUBMIT */
.submit-area{text-align:center;}
.quiz-msg{font-family:'HEEBO',sans-serif;font-size:14px;font-weight:700;min-height:20px;margin-bottom:10px;line-height:1.4;}
.pesach-submit-btn{
    background: linear-gradient(135deg, #ffffff, #e8a830);
    color: #4f3795;
    border: none;
    border-radius: var(--r);
    padding: 13px 18px;
    font-family: 'HEEBO', sans-serif;
    font-size: 23px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(201, 146, 42, .35);
    transition: all .3s ease;}
.pesach-submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(201,146,42,.5);}
.pesach-submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
 
/* QUESTION CARDS */
.question-card{background:#fff;border-radius:var(--r);padding:20px 16px 16px;box-shadow:0 3px 16px rgba(0,0,0,.07);border:2px solid transparent;position:relative;height:100%;transition:box-shadow .25s;animation:fadeUp .6s ease both;}
.question-card:hover{box-shadow:0 6px 24px rgba(71,61,143,.13);}
.question-number{position:absolute;top:-13px;right:16px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-lt));color:#fff;font-family:'HEEBO',sans-serif;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(201,146,42,.4);}
.question-text{font-family: 'HEEBO', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--purple2);
    margin-bottom: 12px;
    padding-top: 6px;
    line-height: 1;
    }
.answers-list{display:flex;flex-direction:column;gap:7px;}
.answer-option{display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0px;
    border-radius: 9px;
    /* border: 1.5px solid #e0ddf5; */
    /* background: var(--cream); */
    cursor: pointer;
    transition: background .2s, border-color .2s;
    user-select: none;
    }
.answer-option:hover{background:#ede9ff;border-color:var(--purple);}
.answer-option input[type=radio]{display:none;}
.answer-mark{width:16px;height:16px;border-radius:50%;border:2px solid var(--purple);flex-shrink:0;position:relative;transition:background .2s;}
.answer-mark::after{content:'';position:absolute;inset:2px;border-radius:50%;background:transparent;transition:background .2s;}
.answer-option.selected{background:#ede9ff;border-color:var(--purple);}
.answer-option.selected .answer-mark{background:var(--purple);}
.answer-option.selected .answer-mark::after{background:#fff;}
.answer-text{font-family : 'HEEBO', sans-serif;
    font-size: 15px;
    color: #3f2c8e;
    line-height: 1;}
 .pesach-bottom {
            padding: 100px 40px 0;
                background-image: url(../images/sukot5778/bottom.jpg);
                height: 290px;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                text-align: right;
                color: #4f3795;
                font-size: 33px;
 }
.question-card:nth-child(1){animation-delay:.05s}
.question-card:nth-child(2){animation-delay:.1s}
.question-card:nth-child(3){animation-delay:.15s}
.question-card:nth-child(4){animation-delay:.2s}
.question-card:nth-child(5){animation-delay:.25s}
.question-card:nth-child(6){animation-delay:.3s}
 
/* UTILITIES */
.imgc{max-width:100%;max-height:100%;object-fit:contain;object-position:center;}
.bgimg{background-repeat:no-repeat;background-size:cover;background-position:center;}
.container.c14{max-width:1200px;}
footer{background-color:transparent!important;pointer-events: none;}


@keyframes fly-cycle {

    100% {
        background-position: -900px 0;
    }

}

@keyframes fly-right-one {

    0% {
        transform: scale(0.3) translateX(-10vw);
    }

    10% {
        transform: translateY(2vh) translateX(10vw) scale(0.4);
    }

    20% {
        transform: translateY(0vh) translateX(30vw) scale(0.5);
    }

    30% {
        transform: translateY(4vh) translateX(50vw) scale(0.6);
    }

    40% {
        transform: translateY(2vh) translateX(70vw) scale(0.6);
    }

    50% {
        transform: translateY(0vh) translateX(90vw) scale(0.6);
    }

    60% {
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }

    100% {
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }

}

@keyframes fly-right-two {

    0% {
        transform: translateY(-2vh) translateX(-10vw) scale(0.5);
    }

    10% {
        transform: translateY(0vh) translateX(10vw) scale(0.4);
    }

    20% {
        transform: translateY(-4vh) translateX(30vw) scale(0.6);
    }

    30% {
        transform: translateY(1vh) translateX(50vw) scale(0.45);
    }

    40% {
        transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
    }

    50% {
        transform: translateY(0vh) translateX(90vw) scale(0.45);
    }

    51% {
        transform: translateY(0vh) translateX(110vw) scale(0.45);
    }

    100% {
        transform: translateY(0vh) translateX(110vw) scale(0.45);
    }

}
 
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
 
/* MOBILE */
@media(max-width:767px){
    .pesach-hero{min-height:260px;}
    .hero-subtitle{font-size:15px;}
    .details-card{position:static;margin-top:20px;}
    .question-text{font-size:13px;}
    .answer-text{font-size:12px;}
    .pesach-submit-btn{font-size:16px;}
    .bird-1{width:36px;}
    .bird-2{width:26px;}
    .bird-3{display:none;}
}