/* ===== EDNShop shared 3D + mobile layer (all public pages) ===== */

/* fixed 3D background (inner pages / auth pages) */
#bg3d {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1;
    pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
}
#bg3d.on { opacity: 1; }

/* ---- 3D reveal for blocks added by site3d.js ---- */
@keyframes s3dIn {
    from { opacity: 0; transform: perspective(900px) translateY(38px) rotateX(14deg) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.s3d { opacity: 0; }
.s3d.s3d-in { opacity: 1; animation: s3dIn .8s cubic-bezier(.2,.8,.2,1) backwards; transform-origin: 50% 100%; }

/* ---- tilt (mouse / touch) ---- */
.tilt { transform-style: preserve-3d; position: relative; }
.tilt:hover, .tilt.touching, .tilt.is-visible:hover, .tilt.is-visible.touching {
    transform: perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);
    box-shadow: 0 18px 40px rgba(59,130,246,.16);
}
.tilt:not(.reveal) { transition: transform .18s ease-out, border-color .3s, box-shadow .3s; }
.tilt::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(96,165,250,.14), transparent 60%);
    opacity: 0; transition: opacity .3s;
}
.tilt:hover::after, .tilt.touching::after { opacity: 1; }

/* ---- 3D page titles on inner pages ---- */
.page-header h1, .header:not(#home) h1 {
    text-shadow: 0 1px 0 #1e3a8a, 0 2px 0 #1e3a8a, 0 3px 0 #1d4ed8, 0 4px 0 #1d4ed8, 0 6px 14px rgba(0,0,0,.55);
}
.content-card, .step-box, .tip-box, .toc, .info-card, .ticket-card, .profile-sidebar {
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px rgba(0,0,0,.35);
}
.content-card:hover, .step-box:hover { border-color: rgba(59,130,246,.35); }

/* ---- hero parallax on the home page (individual transform props, so no clash with entrance animation) ---- */
#home .logo      { translate: 0 calc(var(--sp,0) * 60px);  scale: calc(1 - var(--sp,0) * .1); }
#home .tagline   { translate: 0 calc(var(--sp,0) * 36px); }
#home .header-btns { translate: 0 calc(var(--sp,0) * 20px); }
#home .welcome-text { translate: 0 calc(var(--sp,0) * 70px); }

/* ---- mobile dock ---- */
.m-dock { display: none; }
@media (max-width: 768px) {
    body.has-dock { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
    .m-dock {
        display: flex; position: fixed; left: 12px; right: 12px; z-index: 900; direction: rtl;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 66px; padding: 0 6px;
        align-items: center; justify-content: space-around; border-radius: 22px;
        background: rgba(23,23,23,.84); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
        transition: transform .35s ease;
    }
    .m-dock.hide { transform: translateY(150%); }
    .m-dock a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        padding: 6px 0; position: relative; color: var(--gray,#a3a3a3); font-size: .68rem;
        -webkit-tap-highlight-color: transparent; transition: color .2s, transform .15s;
    }
    .m-dock a i { font-size: 1.1rem; transition: transform .25s, color .25s; }
    .m-dock a:active { transform: scale(.92); }
    .m-dock a.active { color: #fff; }
    .m-dock a.active i { color: var(--blue-light,#60a5fa); transform: translateY(-2px) scale(1.12); }
    .m-dock a.active:not(.dock-center)::after {
        content: ''; position: absolute; bottom: 3px; width: 18px; height: 3px; border-radius: 3px;
        background: var(--blue,#3b82f6); box-shadow: 0 0 10px var(--blue,#3b82f6);
    }
    .m-dock .dock-center { flex: 0 0 62px; }
    .m-dock .dock-center i {
        width: 52px; height: 52px; margin-top: -30px; border-radius: 18px; color: #fff; font-size: 1.25rem;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        box-shadow: 0 6px 0 #1e3a8a, 0 14px 24px rgba(29,78,216,.45);
        transition: transform .15s, box-shadow .15s;
    }
    .m-dock .dock-center:active i { transform: translateY(4px); box-shadow: 0 2px 0 #1e3a8a, 0 6px 12px rgba(29,78,216,.4); }
    .m-dock .dock-center span { margin-top: -2px; }
    body.has-dock .back-top { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
    body.has-dock .navbar .nav-links { display: none; }
    body.has-dock .navbar { padding-left: 16px; padding-right: 16px; }

    /* ---- mobile polish: home ---- */
    #home { min-height: 100vh; min-height: 100svh; padding-bottom: 120px; }
    #home .logo { font-size: clamp(3.4rem, 17vw, 5rem); }
    #home .tagline { font-size: 1rem; padding: 0 8px; margin-bottom: 30px; }
    #home .btn { max-width: 290px; padding: 15px 28px; font-size: 1rem; }
    .section { padding: 54px 16px; }
    .section-title { font-size: 1.55rem; margin-bottom: 34px; }
    .features-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .feature-card { padding: 24px 12px; }
    .feature-title { font-size: .95rem; }
    .feature-desc { font-size: .78rem; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer { padding: 44px 20px 24px; margin-top: 60px; }
    .products-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
    .product-card:active, .feature-card:active, .info-card:active { transform: scale(.985); }
    .page-header h1, .header:not(#home) h1 { text-shadow: 0 1px 0 #1e3a8a, 0 2px 0 #1d4ed8, 0 4px 10px rgba(0,0,0,.5); }
    .content-card, .step-box { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 380px) { .features-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .s3d { opacity: 1 !important; animation: none !important; }
    #bg3d { display: none; }
    #home .logo, #home .tagline, #home .header-btns, #home .welcome-text { translate: none; scale: none; }
    .m-dock { transition: none; }
}