/**
 * assets/css/public-floating-icons.css
 * พื้นหลังไอคอน 3D ลอยเบา ๆ — ฝั่งผู้จอง (Thiings)
 */

/* ===== พื้นหลังร่วม ===== */
body.public-has-floating-bg {
    position: relative;
    background-color: #fafafa !important;
    background-image: none !important;
    isolation: isolate;
}

/* ยกเฉพาะเนื้อหาหลัก — ไม่แตะ modal / overlay / dropdown ที่ append ที่ body */
body.public-has-floating-bg > nav {
    position: relative;
    z-index: 1030;
}

body.public-has-floating-bg > main,
body.public-has-floating-bg > .container,
body.public-has-floating-bg > header,
body.public-has-floating-bg > footer {
    position: relative;
    z-index: 1;
}

/* ===== ชั้นไอคอน — promote เป็น layer เดียว ลด repaint ตอน scroll ===== */
.public-floating-icons {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ไล่โปร่งกลางจอ */
.public-floating-icons::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        ellipse 68% 58% at 50% 44%,
        rgba(250, 250, 250, 0.78) 0%,
        rgba(250, 250, 250, 0.38) 55%,
        rgba(250, 250, 250, 0) 100%
    );
}

/* ตำแหน่ง + ความโปร่ง */
.public-floating-icons__item {
    position: absolute;
    z-index: 1;
    width: var(--pfi-size, 64px);
    height: var(--pfi-size, 64px);
    opacity: var(--pfi-opacity, 0.38);
}

/* magnetic (JS) — แยกจาก animation ลอย */
.public-floating-icons__magnetic {
    width: 100%;
    height: 100%;
}

.public-floating-icons__item.is-magnetic-pull {
    opacity: calc(var(--pfi-opacity, 0.38) * 1.12);
}

.public-floating-icons__visual {
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease;
}

/* ลอย (CSS animation เท่านั้น — ไม่ใช้ CSS variable ใน transform) */
.public-floating-icons__float {
    width: 100%;
    height: 100%;
}

.public-floating-icons__float img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* ===== โมชันลอย — transform คงที่ ไม่ผูกกับ parallax ===== */
@keyframes pfi-float-a {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -12px, 0) rotate(2deg);
    }
}

@keyframes pfi-float-b {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(6px, -10px, 0) rotate(-2deg);
    }
}

@keyframes pfi-float-c {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1deg);
    }

    50% {
        transform: translate3d(-5px, -14px, 0) rotate(1.5deg);
    }
}

.public-floating-icons__float--anim-a {
    animation: pfi-float-a var(--pfi-dur, 8s) ease-in-out infinite;
    animation-delay: var(--pfi-delay, 0s);
}

.public-floating-icons__float--anim-b {
    animation: pfi-float-b var(--pfi-dur, 8.5s) ease-in-out infinite;
    animation-delay: var(--pfi-delay, 0s);
}

.public-floating-icons__float--anim-c {
    animation: pfi-float-c var(--pfi-dur, 9s) ease-in-out infinite;
    animation-delay: var(--pfi-delay, 0s);
}

/* หยุด animation ชั่วคราวตอน scroll — ลดกระตุก */
.public-floating-icons.is-scrolling .public-floating-icons__float {
    animation-play-state: paused;
}

/* ===== ซ่อนตกแต่งเดิมที่ซ้ำซ้อน ===== */
body.public-has-floating-bg .calendar-bg-sauropod,
body.public-has-floating-bg .steps-dino-solo {
    display: none !important;
}

body.calendar-embed .public-floating-icons {
    display: none !important;
}

/* ===== Cursor แว่นขยาย (แบบ E) — desktop เท่านั้น ===== */
.public-magnifier-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    margin: 0;
    padding: 0;
}

.public-magnifier-cursor.is-visible {
    opacity: 1;
    visibility: visible;
}

.public-magnifier-cursor__glass {
    position: absolute;
    width: 42px;
    height: 42px;
    margin: -4px 0 0 -4px;
    border: 2.5px solid rgba(24, 24, 27, 0.48);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.35);
}

.public-magnifier-cursor__handle {
    position: absolute;
    width: 14px;
    height: 3px;
    left: 28px;
    top: 32px;
    background: rgba(24, 24, 27, 0.48);
    border-radius: 2px;
    transform: rotate(45deg);
    transform-origin: left center;
}

@media (hover: hover) and (pointer: fine) {
    body.public-magnifier-enabled.public-magnifier-active {
        cursor: none;
    }

    /* กล่องข้อมูล — cursor ปกติ */
    body.public-magnifier-enabled.public-magnifier-over-content {
        cursor: auto;
    }

    body.public-magnifier-enabled .public-content-panel,
    body.public-magnifier-enabled nav,
    body.public-magnifier-enabled .booking-wizard-container,
    body.public-magnifier-enabled .home-hero,
    body.public-magnifier-enabled .home-features-wrap,
    body.public-magnifier-enabled .steps-container,
    body.public-magnifier-enabled .info-glass-card,
    body.public-magnifier-enabled .calendar-main__inner,
    body.public-magnifier-enabled .card,
    body.public-magnifier-enabled .modal,
    body.public-magnifier-enabled .offcanvas,
    body.public-magnifier-enabled label,
    body.public-magnifier-enabled .choices,
    body.public-magnifier-enabled .flatpickr-calendar,
    body.public-magnifier-enabled .swal2-container {
        cursor: auto;
    }

    /* ลิงก์ / ปุ่ม / องค์ประกอบกดได้ — มือชี้ */
    body.public-magnifier-enabled a[href],
    body.public-magnifier-enabled button:not(:disabled),
    body.public-magnifier-enabled .btn:not(:disabled),
    body.public-magnifier-enabled [role="button"]:not([aria-disabled="true"]),
    body.public-magnifier-enabled .nav-link,
    body.public-magnifier-enabled .offcanvas-nav-link,
    body.public-magnifier-enabled label[for],
    body.public-magnifier-enabled select,
    body.public-magnifier-enabled .choices__inner,
    body.public-magnifier-enabled .choices__item--selectable,
    body.public-magnifier-enabled .fc-event,
    body.public-magnifier-enabled .fc-daygrid-day,
    body.public-magnifier-enabled summary {
        cursor: pointer !important;
    }

    /* ช่องพิมพ์ — cursor ข้อความ */
    body.public-magnifier-enabled input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
    body.public-magnifier-enabled textarea {
        cursor: text !important;
    }
}

/* ===== Mobile ===== */
@media (max-width: 767.98px) {
    .public-floating-icons__item {
        opacity: calc(var(--pfi-opacity, 0.38) * 0.9);
    }

    .public-floating-icons::after {
        background: radial-gradient(
            ellipse 82% 68% at 50% 42%,
            rgba(250, 250, 250, 0.82) 0%,
            rgba(250, 250, 250, 0.45) 58%,
            rgba(250, 250, 250, 0) 100%
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-floating-icons__float--anim-a,
    .public-floating-icons__float--anim-b,
    .public-floating-icons__float--anim-c {
        animation: none !important;
    }
}