/* ═══════════════════════════════════════════════════════════════
   ⌚ HAJDUK „ЗАДАЙ ЧАСЪ" — джобният часовникъ на войводата (modal)
   Scoped under .haj-scope.haj-chas (never bare .haj-scope).
   Mockup source of truth: prototype/hajduk-chasovnik.html
   Palette tokens (--haj-*) come from hajduk-shared.css.
   ═══════════════════════════════════════════════════════════════ */

.haj-scope.haj-chas {
    position: fixed;
    inset: 0;
    z-index: 1500;
    overflow: hidden;
    --chas-fit: 1;
    font-family: var(--font-body);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: #0b0f0c; /* подъ canvas-а, докато сцената се нарисува */

    & #hajChasScene { position: absolute; inset: 0; width: 100%; height: 100%; }

    /* жарава отдолу + винетка надъ сцената */
    & .chas-backdrop { position: absolute; inset: 0; pointer-events: none; }
    & .chas-backdrop::before {
        content: ''; position: absolute; inset: 0;
        background: radial-gradient(ellipse 120% 50% at 50% 102%, rgba(226,102,42,0.17), transparent 60%);
    }
    & .chas-backdrop::after {
        content: ''; position: absolute; inset: 0;
        background: radial-gradient(ellipse 95% 80% at 50% 44%, transparent 50%, rgba(0,0,0,0.58) 100%);
    }

    /* сцена: центрирана, мащабира се надолу на къси екрани */
    & .chas-stage {
        position: absolute; left: 50%; top: 50%;
        width: 390px; height: 844px;
        transform: translate(-50%, -50%) scale(var(--chas-fit));
    }
    & .chas-asm {
        position: absolute; inset: 0;
        animation: chasDrop 1s cubic-bezier(0.33, 1.22, 0.42, 1) both;
    }
    &.chas-away .chas-asm {
        transition: transform 0.65s cubic-bezier(0.5, 0, 0.8, 0.4);
        transform: translateY(-115%) !important;
        animation: none;
    }
    &.chas-noentry .chas-asm, &.chas-noentry .chas-pend { animation: none; }

    /* ── каишъ + напречникъ (заглавие) ── */
    & .chas-strap {
        position: absolute; left: 50%; top: -8px; width: 26px; height: 52px;
        transform: translateX(-50%);
        background: linear-gradient(90deg, #171008 0%, #33241535 20%, #3d2c1a 45%, #2a1d0f 70%, #150e06 100%),
                    linear-gradient(180deg, #2e2113, #1d1409);
        background-blend-mode: overlay, normal;
        border-left: 1px solid #0c0803; border-right: 1px solid #0c0803;
        box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
        z-index: 2;
    }
    & .chas-bar {
        position: absolute; left: 50%; top: 36px; transform: translateX(-50%);
        width: 314px; height: 47px; z-index: 4;
        background:
            repeating-linear-gradient(91deg, transparent 0 9px, rgba(0,0,0,0.10) 9px 11px, transparent 11px 23px),
            linear-gradient(94deg, #2c1f12, #3a2a17 30%, #2b1e10 55%, #3b2b18 80%, #241809);
        border-radius: 7px;
        border: 1px solid #100a04;
        box-shadow: inset 0 2px 0 rgba(214,178,110,0.14), inset 0 -4px 8px rgba(0,0,0,0.55), 0 10px 18px rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
    }
    & .chas-q {
        font-family: var(--font-display); font-size: 16.5px; letter-spacing: 1.2px;
        color: #d9bd7e;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.85), 0 1px 0 rgba(255,230,160,0.16);
    }
    & .chas-nail {
        position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%;
        transform: translateY(-50%);
        background: radial-gradient(circle at 35% 30%, #e8cd76, #93752a 60%, #4a3810);
        box-shadow: 0 1px 2px rgba(0,0,0,0.7);
    }
    & .chas-nail.l { left: 10px; }
    & .chas-nail.r { right: 10px; }

    /* ── медальони-висулки (бързи опции) ── */
    & .chas-fob {
        position: absolute; z-index: 3; width: 58px; text-align: center;
        cursor: pointer; transition: transform 0.18s ease;
    }
    & .chas-fob:active { transform: translateY(3px) scale(0.96) !important; }
    & .chas-flink {
        width: 3px; margin: 0 auto;
        background: linear-gradient(90deg, #6d4f16, #e8cd76 50%, #6d4f16);
        box-shadow: 0 0 3px rgba(0,0,0,0.6);
    }
    & .chas-fring {
        width: 9px; height: 9px; margin: 0 auto -2px; border-radius: 50%;
        border: 2.5px solid #b8912c;
        box-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    & .chas-fdisc {
        width: 58px; height: 58px; border-radius: 50%;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: radial-gradient(circle at 35% 28%, #f0d878, #cfa62d 46%, #93752a 76%, #5f4712 100%);
        box-shadow: inset 0 0 0 3px rgba(58,42,10,0.45), inset 0 0 0 5px rgba(244,226,150,0.22),
                    0 9px 14px rgba(0,0,0,0.55);
        transform: rotate(var(--rot));
    }
    & .chas-fv {
        font-family: var(--font-display); font-size: 19px; line-height: 1; color: #3a2a0c;
        text-shadow: 0 1px 0 rgba(255,240,190,0.35);
    }
    & .chas-fu {
        font-family: var(--font-body); font-weight: 700; font-size: 8px; letter-spacing: 1.6px;
        color: #4d390f; margin-top: 2px;
    }

    /* ── верижка ── */
    & .chas-chain { position: absolute; left: 50%; top: 82px; transform: translateX(-50%); z-index: 2; }

    /* ── капакътъ (отзадъ, открехнатъ) ── */
    & .chas-lid {
        position: absolute; left: 50%; top: 98px; transform: translateX(-50%);
        width: 300px; height: 232px; border-radius: 50%;
        background: radial-gradient(ellipse at 50% 64%, #7a5f22 0%, #8f7126 34%, #6b531d 60%, #47370f 82%, #2b2007 100%);
        border: 2px solid #120c03;
        box-shadow: inset 0 0 0 6px rgba(20,14,4,0.5), inset 0 0 0 9px rgba(240,220,140,0.12),
                    inset 0 -34px 60px rgba(0,0,0,0.45), 0 6px 24px rgba(0,0,0,0.45);
        z-index: 1;
        transform-origin: 50% 92%;
        transition: transform 0.4s cubic-bezier(0.6, 0, 0.9, 0.4), opacity 0.3s ease 0.15s;
    }
    &.chas-closing .chas-lid { transform: translateX(-50%) scaleY(0.05) translateY(680%); opacity: 0; }
    & .chas-lion {
        position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
        width: 96px; opacity: 0.55;
        filter: grayscale(0.85) sepia(0.9) brightness(0.8) drop-shadow(0 1px 0 rgba(246,222,140,0.3));
    }
    & .chas-arc { position: absolute; inset: 0; overflow: visible; }

    /* ── часовникътъ ── */
    & .chas-pend {
        position: absolute; inset: 0; z-index: 5;
        transform-origin: 195px 96px;
        animation: chasSway 2.6s ease-out 1s both;
    }
    & .chas-watch {
        position: absolute; left: 50%; top: 140px; transform: translateX(-50%);
        width: 344px;
        filter: drop-shadow(0 20px 32px rgba(0,0,0,0.55)) drop-shadow(0 4px 10px rgba(0,0,0,0.4))
                drop-shadow(0 14px 28px rgba(226,102,42,0.10));
    }
    & .chas-hands {
        position: absolute; left: 50%; top: 140px; transform: translateX(-50%);
        width: 344px; z-index: 7; pointer-events: none;
        filter: drop-shadow(0 3px 4px rgba(40,25,5,0.4));
    }
    & #hajChasCrown.chas-wig { animation: chasWig 0.32s ease; transform-box: fill-box; transform-origin: center; }

    /* капакъ отпредъ — само при затваряне */
    & .chas-lidfront {
        position: absolute; left: 50%; top: 189px; transform: translateX(-50%) scaleY(0.02);
        width: 336px; height: 336px; border-radius: 50%;
        background: radial-gradient(circle at 38% 30%, #e8cd76, #b8912c 42%, #7d5f1a 72%, #4a3810 100%);
        box-shadow: inset 0 0 0 8px rgba(58,42,10,0.4), inset 0 0 0 11px rgba(244,226,150,0.2);
        z-index: 8; opacity: 0; pointer-events: none;
        transform-origin: 50% 0%;
    }
    &.chas-closing .chas-lidfront {
        opacity: 1; transform: translateX(-50%) scaleY(1);
        transition: transform 0.38s cubic-bezier(0.5, 0, 0.7, 0.3), opacity 0.1s;
    }

    /* ── барабанчетата (ЧЧ:ММ) ── */
    & .chas-drums {
        position: absolute; left: 50%; top: 372px; transform: translateX(-50%);
        width: 176px; z-index: 6; text-align: center;
    }
    & .chas-drow { display: flex; align-items: center; justify-content: center; gap: 7px; }
    /* !important pins vs accessibility-fixes.css 44x44 button floor */
    & .chas-chev {
        width: 44px !important; height: 22px !important;
        min-width: 0 !important; min-height: 0 !important;
        display: flex !important; align-items: center; justify-content: center;
        margin: 0 auto; cursor: pointer;
        background: none !important; border: none !important;
        box-shadow: none !important; padding: 0 !important;
    }
    & .chas-chev svg { display: block; }
    & .chas-chev:active svg path { fill: #f0d878; }
    & .chas-chevrow { display: flex; justify-content: center; gap: 47px; }
    & .chas-win {
        width: 56px; height: 46px; border-radius: 7px;
        background: linear-gradient(180deg, #060402 0%, #241a0d 18%, #332613 50%, #241a0d 82%, #060402 100%);
        border: 2px solid; border-color: #7d5f1a #a8842a #e0c168 #a8842a;
        box-shadow: inset 0 3px 6px rgba(0,0,0,0.8), 0 1px 0 rgba(244,226,150,0.25);
        overflow: hidden; position: relative;
    }
    & .chas-digit {
        font-family: var(--font-display); font-size: 30px; line-height: 42px; color: #f2e2b8;
        text-shadow: 0 0 8px rgba(240,216,120,0.25);
    }
    & .chas-digit.chas-roll { animation: chasRoll 0.28s ease; }
    & .chas-colon {
        font-family: var(--font-display); font-size: 30px; color: #4a3520;
        text-shadow: 0 1px 0 rgba(255,240,190,0.3); padding-bottom: 4px;
    }

    /* ── ръкописенъ редъ ── */
    & .chas-note {
        position: absolute; left: 0; right: 0; top: 549px; text-align: center; z-index: 5;
        font-family: var(--font-hand); font-weight: 500; font-size: 21px; color: #c3cbae;
        text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    }
    & .chas-note b { font-weight: 700; color: #e9d9a8; }

    /* ── листче „напиши точния часъ" — отваря системния часовникъ ── */
    & .chas-pismo {
        position: absolute; left: 50%; top: 577px; transform: translateX(-50%) rotate(-1.2deg);
        width: 198px; height: 40px; z-index: 5; cursor: pointer;
        background: linear-gradient(174deg, #f0e4c6, #e6d7b2 60%, #d9c69a);
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px rgba(120,90,40,0.25), inset 0 -8px 14px rgba(120,90,40,0.14),
                    0 6px 12px rgba(0,0,0,0.45);
        display: flex; align-items: center; justify-content: center;
        transition: transform 0.15s ease;
    }
    & .chas-pismo:active { transform: translateX(-50%) rotate(-1.2deg) translateY(2px); }
    & .chas-pismo-t {
        font-family: var(--font-hand); font-weight: 700; font-size: 19px; color: #3a2a18;
    }
    & .chas-pin {
        position: absolute; top: -5px; left: 50%; margin-left: -4.5px;
        width: 9px; height: 9px; border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #f4de8e, #a8842a 55%, #5f4712);
        box-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    & .chas-nativein {
        position: absolute; inset: 0; width: 100%; height: 100%;
        opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer;
        -webkit-appearance: none; appearance: none;
    }

    /* ── плочка „ЗАПИШИ ЧАСА" + кожено етикетче ── */
    & .chas-plate {
        position: absolute; left: 50%; top: 632px; transform: translateX(-50%);
        width: 218px; height: 56px; z-index: 5; cursor: pointer;
        background: linear-gradient(180deg, #e7c862, #b98f2e 45%, #8a6317 100%);
        border: 1px solid #241804; border-radius: 9px;
        box-shadow: inset 0 2px 0 rgba(255,240,190,0.5), inset 0 -4px 7px rgba(60,40,5,0.55),
                    0 12px 22px rgba(0,0,0,0.55);
        display: flex; align-items: center; justify-content: center;
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }
    & .chas-plate:active {
        transform: translateX(-50%) translateY(2px) scale(0.98);
        box-shadow: inset 0 2px 0 rgba(255,240,190,0.4), inset 0 -2px 4px rgba(60,40,5,0.5), 0 5px 10px rgba(0,0,0,0.5);
    }
    & .chas-pt {
        font-family: var(--font-display); font-size: 21px; letter-spacing: 3px; color: #392a0b;
        text-shadow: 0 1px 0 rgba(255,240,190,0.4);
    }
    & .chas-screw {
        position: absolute; width: 9px; height: 9px; border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #f4de8e, #a8842a 55%, #5f4712);
        box-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    & .chas-screw::after {
        content: ''; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.4px;
        background: rgba(40,26,4,0.8); transform: translateY(-50%) rotate(var(--sr));
    }
    & .chas-screw.s1 { top: 5px; left: 6px; --sr: 24deg; }
    & .chas-screw.s2 { top: 5px; right: 6px; --sr: -60deg; }
    & .chas-screw.s3 { bottom: 5px; left: 6px; --sr: 75deg; }
    & .chas-screw.s4 { bottom: 5px; right: 6px; --sr: -18deg; }

    & .chas-tag {
        position: absolute; left: 50%; top: 704px; transform: translateX(-18%) rotate(-2.5deg);
        width: 118px; height: 42px; z-index: 5; cursor: pointer;
        background: linear-gradient(160deg, #33241a, #241811 70%, #1c1209);
        border: 1px solid #0e0902; border-radius: 8px;
        box-shadow: inset 0 1px 0 rgba(200,170,110,0.12), 0 8px 14px rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
        transition: transform 0.15s ease;
    }
    & .chas-tag::after {
        content: ''; position: absolute; inset: 4px; border-radius: 5px;
        border: 1px solid rgba(210,180,120,0.16);
    }
    & .chas-tag:active { transform: translateX(-18%) rotate(-2.5deg) translateY(2px) scale(0.97); }
    & .chas-grom {
        position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
        width: 12px; height: 12px; border-radius: 50%;
        border: 3px solid #a8842a; background: #0b0f0c;
        box-shadow: 0 1px 2px rgba(0,0,0,0.7), inset 0 1px 1px rgba(0,0,0,0.8);
    }
    & .chas-tt {
        font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 2.5px;
        color: #c8b592; opacity: 0.85; margin-left: 12px;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.8);
    }

    /* зърно върху всичко */
    &::after {
        content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    }
}

@keyframes chasDrop {
    from { transform: translateY(-108%); }
    to { transform: translateY(0); }
}
@keyframes chasSway {
    0% { transform: rotate(0deg); }
    18% { transform: rotate(2.1deg); }
    44% { transform: rotate(-1.3deg); }
    70% { transform: rotate(0.6deg); }
    100% { transform: rotate(0deg); }
}
@keyframes chasWig {
    30% { transform: rotate(9deg); }
    65% { transform: rotate(-5deg); }
}
@keyframes chasRoll {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .haj-scope.haj-chas .chas-asm,
    .haj-scope.haj-chas .chas-pend,
    .haj-scope.haj-chas .chas-digit.chas-roll,
    .haj-scope.haj-chas #hajChasCrown.chas-wig { animation: none; }
}