/* =========================================================
   Christmas UI (Improved Hat + Realistic Snowcaps)
   File: assets/front/css/christmas-ui.css
   ========================================================= */

:root{
    /* Hat: JS bunları otomatik set eder, istersen override edebilirsin */
    --xmas-hat-size: 70px;
    --xmas-hat-rotate: -14deg;
    --xmas-hat-x: -14px;   /* sola kaydır: daha negatif */
    --xmas-hat-y: -56px;   /* yukarı al: daha negatif */

    /* Snowcap */
    --xmas-cap-inset: 14px;          /* sağ/sol içeriden boşluk */
    --xmas-cap-height: 24px;         /* kar kalınlığı */
    --xmas-cap-lip: 14px;            /* alt dalga derinliği */
}

/* Canvas snow overlay */
#xmas-snow-canvas{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 25;
    pointer-events: none;
}

/* =========================
   SANTA HAT (better fit)
   ========================= */
.xmas-hat-anchor{
    position: relative !important;
    display: inline-block;
    overflow: visible !important; /* NEGATIVE top ile kırpılmasın */
}

.xmas-santa-hat{
    position: absolute;
    width: var(--xmas-hat-size);
    height: auto;
    left: var(--xmas-hat-x);
    top: var(--xmas-hat-y);
    transform: rotate(var(--xmas-hat-rotate));
    transform-origin: 32% 78%;
    z-index: 40;              /* snow canvas'ın üstünde daha net görünür */
    pointer-events: none;
    user-select: none;

    /* daha “oturmuş” hissi */
    filter:
            drop-shadow(0 10px 18px rgba(0,0,0,.30))
            drop-shadow(0 2px 0 rgba(255,255,255,.18));

    /* Şapkanın altını hafif “tucked-in” gibi yap */
    -webkit-mask-image: linear-gradient(to bottom, #000 0 86%, rgba(0,0,0,.20) 95%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 0 86%, rgba(0,0,0,.20) 95%, rgba(0,0,0,0) 100%);
}

/* Şapkanın temas gölgesi (logo üstüne oturmuş gibi) */
.xmas-hat-anchor::after{
    content:"";
    position:absolute;
    left: calc(var(--xmas-hat-x) + (var(--xmas-hat-size) * 0.30));
    top: calc(var(--xmas-hat-y) + (var(--xmas-hat-size) * 0.78));
    width: calc(var(--xmas-hat-size) * 0.46);
    height: calc(var(--xmas-hat-size) * 0.14);
    background: rgba(0,0,0,.20);
    border-radius: 999px;
    filter: blur(8px);
    opacity: .55;
    pointer-events:none;
    z-index: 39;
}

/* =========================
   COLLAPSE SNOWCAP (realistic)
   JS her trigger içine <span class="xmas-snowcap"> ekler
   ========================= */
.xmas-snowy-trigger{
    position: relative !important;
    overflow: visible !important;
}

.xmas-snowy-trigger::before{ opacity: .82; }
.xmas-snowy-trigger::after{ opacity: .80; }

.xmas-snowcap{
    position:absolute;
    left: var(--xmas-cap-inset);
    right: var(--xmas-cap-inset);
    top: calc(-1 * (var(--xmas-cap-height) * 0.55));
    height: var(--xmas-cap-height);
    border-radius: 999px;
    z-index: 3;
    pointer-events:none;

    /* Kar gövdesi: katmanlı + hafif mavi gölge */
    background:
            radial-gradient(circle at 8% 75%, rgba(255,255,255,.98) 0 55%, rgba(255,255,255,0) 56%),
            radial-gradient(circle at 22% 35%, rgba(255,255,255,.98) 0 62%, rgba(255,255,255,0) 63%),
            radial-gradient(circle at 40% 80%, rgba(255,255,255,.96) 0 60%, rgba(255,255,255,0) 61%),
            radial-gradient(circle at 60% 38%, rgba(255,255,255,.98) 0 64%, rgba(255,255,255,0) 65%),
            radial-gradient(circle at 78% 78%, rgba(255,255,255,.96) 0 58%, rgba(255,255,255,0) 59%),
            radial-gradient(circle at 92% 55%, rgba(255,255,255,.98) 0 56%, rgba(255,255,255,0) 57%),
            linear-gradient(to bottom, rgba(255,255,255,.98), rgba(235,245,255,.86));

    box-shadow:
            0 14px 22px rgba(0,0,0,.18),
            0 1px 0 rgba(255,255,255,.60) inset;
}

/* Alt kenarda “dalgalı” kar sarkması (scallop) */
.xmas-snowcap::after{
    content:"";
    position:absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * (var(--xmas-cap-lip) * 0.60));
    height: var(--xmas-cap-lip);
    border-radius: 0 0 999px 999px;
    pointer-events:none;

    background:
            radial-gradient(circle at 50% 0,
            rgba(255,255,255,.98) 0 64%,
            rgba(255,255,255,0) 65%);

    background-size: 26px 16px;
    background-repeat: repeat-x;
    background-position: bottom;

    filter: drop-shadow(0 8px 10px rgba(0,0,0,.10));
    opacity: .95;
}

/* İnce buz sarkıtları (çok abartmadan) */
.xmas-snowcap::before{
    content:"";
    position:absolute;
    left: 6%;
    right: 6%;
    top: calc(100% - 6px);
    height: 14px;
    pointer-events:none;
    opacity: .38;

    background:
            repeating-linear-gradient(
                    to right,
                    rgba(255,255,255,0) 0 18px,
                    rgba(255,255,255,.92) 18px 20px,
                    rgba(255,255,255,0) 20px 36px
            );

    -webkit-mask-image: linear-gradient(to bottom, #000 0 45%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 0 45%, rgba(0,0,0,0) 100%);

    filter: blur(.2px);
}

/* prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
    #xmas-snow-canvas{ display:none; }
}