/**
 * Easy Custom Skin Free — 3D Layouts (v4.4)
 * 10 modern 3D layouts + universal 3D Mode for classic layouts
 */

/* ==========================================================================
   3D Scene base — gives child cards a shared perspective
   ========================================================================== */
.ecsf-3d-scene {
    perspective: 1400px;
    perspective-origin: 50% 40%;
}

.ecsf-3d-scene .ecsf-post-item {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ==========================================================================
   Universal 3D Mode — converts ANY classic layout into 3D
   (applied via the "Enable 3D Mode" switch → .ecsf-3d-mode on the grid)
   ========================================================================== */
.ecsf-3d-mode .ecsf-post-item {
    transition: transform 0.45s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.45s ease;
    transform: translateZ(0) rotateX(0) rotateY(0);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
}

.ecsf-3d-mode .ecsf-post-item:hover {
    transform: translateZ(var(--ecsf-3d-depth, 30px)) rotateX(calc(var(--ecsf-3d-tilt, 10deg) * -0.35));
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.22);
    z-index: 5;
}

/* JS-driven tilt (data-ecsf-tilt): item transform is set inline by tilt-3d.js.
   Disable the CSS hover transform so JS has full control. */
.ecsf-3d-mode[data-ecsf-tilt] .ecsf-post-item,
.ecsf-3d-mode[data-ecsf-tilt] .ecsf-post-item:hover {
    transition: transform 0.15s ease-out, box-shadow 0.45s ease;
}

/* Give inner content a touch of depth in 3D mode */
.ecsf-3d-mode .ecsf-post-item:hover .ecsf-post-content,
.ecsf-3d-mode .ecsf-post-item:hover .ecsf-post-content-overlay {
    transform: translateZ(25px);
}

.ecsf-3d-mode .ecsf-post-content,
.ecsf-3d-mode .ecsf-post-content-overlay {
    transition: transform 0.45s ease;
    transform-style: preserve-3d;
}

/* ==========================================================================
   1. 3D Flip Card  (.ecsf-flip3d)
   ========================================================================== */
.ecsf-layout-flip_3d .ecsf-post-item {
    background: transparent;
    overflow: visible;
    box-shadow: none;
}

.ecsf-flip3d {
    perspective: 1200px;
    min-height: 380px;
}

.ecsf-flip3d:hover {
    transform: none;
    box-shadow: none;
}

.ecsf-flip3d-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 380px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(.4,.2,.2,1);
}

.ecsf-flip3d:hover .ecsf-flip3d-inner,
.ecsf-flip3d:focus-within .ecsf-flip3d-inner {
    transform: rotateY(180deg);
}

.ecsf-flip3d-front,
.ecsf-flip3d-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.ecsf-flip3d-front {
    background: #111;
}

.ecsf-flip3d-front .ecsf-post-image,
.ecsf-flip3d-front .ecsf-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.ecsf-flip3d-front-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 22px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    color: #fff;
    z-index: 2;
}

.ecsf-flip3d-front-label .ecsf-post-title,
.ecsf-flip3d-front-label .ecsf-post-title a {
    color: #fff;
}

.ecsf-flip3d-back {
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%);
    color: #e0e7ff;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    padding: 28px;
}

.ecsf-flip3d-back .ecsf-post-title a { color: #fff; }
.ecsf-flip3d-back .ecsf-post-meta,
.ecsf-flip3d-back .ecsf-post-meta a,
.ecsf-flip3d-back .ecsf-post-excerpt { color: #c7d2fe; }

/* ==========================================================================
   2. 3D Tilt (Mouse Parallax)  (.ecsf-tilt3d) — driven by tilt-3d.js
   ========================================================================== */
.ecsf-layout-tilt_3d .ecsf-post-item {
    background: transparent;
    overflow: visible;
    box-shadow: none;
}

.ecsf-tilt3d:hover { transform: none; box-shadow: none; }

.ecsf-tilt3d-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out, box-shadow 0.3s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.ecsf-tilt3d:hover .ecsf-tilt3d-card {
    box-shadow: 0 40px 80px rgba(0,0,0,0.25);
}

.ecsf-tilt3d-layer {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}

.ecsf-tilt3d .ecsf-post-content { padding: 20px; }

.ecsf-tilt3d-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,0.35), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.ecsf-tilt3d:hover .ecsf-tilt3d-glare { opacity: 1; }

/* ==========================================================================
   3. 3D Cube Rotate  (.ecsf-cube3d)
   ========================================================================== */
.ecsf-layout-cube_3d .ecsf-post-item {
    background: transparent;
    overflow: visible;
    box-shadow: none;
    perspective: 1200px;
}

.ecsf-cube3d { min-height: 360px; }
.ecsf-cube3d:hover { transform: none; box-shadow: none; }

.ecsf-cube3d-box {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(.35,.1,.25,1);
    transform-origin: center center calc(-180px);
}

.ecsf-cube3d:hover .ecsf-cube3d-box,
.ecsf-cube3d:focus-within .ecsf-cube3d-box {
    transform: rotateX(-90deg);
}

.ecsf-cube3d-face {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}

.ecsf-cube3d-face--front {
    background: #111;
    transform: translateZ(180px);
}

.ecsf-cube3d-face--front .ecsf-post-image,
.ecsf-cube3d-face--front .ecsf-post-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecsf-cube3d-front-title {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    z-index: 2;
}

.ecsf-cube3d-front-title .ecsf-post-title a { color: #fff; }

.ecsf-cube3d-face--top {
    background: linear-gradient(160deg, #0f172a 0%, #334155 100%);
    transform: rotateX(90deg) translateZ(180px);
    display: flex;
    align-items: center;
}

.ecsf-cube3d-content { padding: 26px; color: #cbd5e1; }
.ecsf-cube3d-content .ecsf-post-title a { color: #fff; }
.ecsf-cube3d-content .ecsf-post-meta,
.ecsf-cube3d-content .ecsf-post-meta a { color: #94a3b8; }

/* ==========================================================================
   4. 3D Glassmorphism  (.ecsf-glass3d)
   ========================================================================== */
.ecsf-layout-glass_3d .ecsf-post-item {
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.ecsf-glass3d {
    position: relative;
    border-radius: 18px;
    min-height: 340px;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(.2,.9,.3,1.2);
}

.ecsf-glass3d:hover {
    transform: translateZ(20px) rotateX(4deg);
    box-shadow: none;
}

.ecsf-glass3d .ecsf-post-image {
    border-radius: 18px;
    overflow: hidden;
    position: absolute;
    inset: 0;
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
}

.ecsf-glass3d .ecsf-post-image img {
    width: 100%; height: 100%; object-fit: cover;
}

.ecsf-glass3d-panel {
    position: absolute;
    left: 14px; right: 14px; bottom: 14px;
    padding: 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    color: #fff;
    transform: translateZ(45px);
    transition: transform 0.5s ease;
}

.ecsf-glass3d:hover .ecsf-glass3d-panel {
    transform: translateZ(70px);
}

.ecsf-glass3d-panel .ecsf-post-title a { color: #fff; }
.ecsf-glass3d-panel .ecsf-post-meta,
.ecsf-glass3d-panel .ecsf-post-meta a,
.ecsf-glass3d-panel .ecsf-post-excerpt { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   5. 3D Neumorphism  (.ecsf-neumorph3d)
   ========================================================================== */
.ecsf-layout-neumorph_3d {
    background: #e6e9ef;
    padding: 25px;
    border-radius: 20px;
}

.ecsf-neumorph3d {
    background: #e6e9ef;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 12px 12px 24px #c3c6cc, -12px -12px 24px #ffffff;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform: translateZ(0);
}

.ecsf-neumorph3d:hover {
    transform: translateZ(18px) scale(1.015);
    box-shadow: 18px 18px 36px #bfc2c8, -18px -18px 36px #ffffff;
}

.ecsf-neumorph3d:active {
    box-shadow: inset 8px 8px 16px #c3c6cc, inset -8px -8px 16px #ffffff;
    transform: scale(0.99);
}

.ecsf-neumorph3d .ecsf-post-image {
    margin: 14px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: inset 4px 4px 10px rgba(0,0,0,0.08);
}

.ecsf-neumorph3d .ecsf-post-content { padding: 6px 22px 22px; }

/* ==========================================================================
   6. 3D Stacked Depth  (.ecsf-stack3d)
   ========================================================================== */
.ecsf-layout-stack_3d .ecsf-post-item {
    background: transparent;
    overflow: visible;
    box-shadow: none;
}

.ecsf-stack3d { position: relative; transform-style: preserve-3d; }
.ecsf-stack3d:hover { transform: none; box-shadow: none; }

.ecsf-stack3d::before,
.ecsf-stack3d::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    transition: transform 0.45s cubic-bezier(.2,.9,.3,1.2);
}

.ecsf-stack3d::before {
    background: var(--stack-accent, #6366f1);
    opacity: 0.55;
    transform: translateZ(-40px) translate(10px, 10px);
}

.ecsf-stack3d::after {
    background: var(--stack-accent, #6366f1);
    opacity: 0.25;
    transform: translateZ(-80px) translate(20px, 20px);
}

.ecsf-stack3d:hover::before { transform: translateZ(-40px) translate(16px, 16px); }
.ecsf-stack3d:hover::after  { transform: translateZ(-80px) translate(30px, 30px); }

.ecsf-stack3d-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    transition: transform 0.45s cubic-bezier(.2,.9,.3,1.2);
    transform: translateZ(0);
}

.ecsf-stack3d:hover .ecsf-stack3d-card {
    transform: translateZ(30px) translate(-6px, -6px);
}

.ecsf-stack3d .ecsf-post-content { padding: 20px; }

/* ==========================================================================
   7. 3D Book Open  (.ecsf-book3d)
   ========================================================================== */
.ecsf-layout-book_3d .ecsf-post-item {
    background: transparent;
    overflow: visible;
    box-shadow: none;
    perspective: 1500px;
}

.ecsf-book3d { min-height: 360px; }
.ecsf-book3d:hover { transform: none; box-shadow: none; }

.ecsf-book3d-page {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border-radius: 6px 14px 14px 6px;
    background: #f8fafc;
    box-shadow: 0 15px 35px rgba(0,0,0,0.18);
}

.ecsf-book3d-inside {
    position: absolute;
    inset: 0;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: repeating-linear-gradient(#f8fafc, #f8fafc 27px, #e2e8f0 28px);
    border-radius: 6px 14px 14px 6px;
}

.ecsf-book3d-cover {
    position: absolute;
    inset: 0;
    border-radius: 6px 14px 14px 6px;
    overflow: hidden;
    background: #111;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(.35,.1,.25,1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 6px 0 18px rgba(0,0,0,0.25);
}

.ecsf-book3d:hover .ecsf-book3d-cover,
.ecsf-book3d:focus-within .ecsf-book3d-cover {
    transform: rotateY(-125deg);
}

.ecsf-book3d-cover .ecsf-post-image,
.ecsf-book3d-cover .ecsf-post-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ecsf-book3d-cover-title {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    z-index: 2;
}

.ecsf-book3d-cover-title .ecsf-post-title a { color: #fff; }

/* ==========================================================================
   8. 3D Fold Reveal  (.ecsf-fold3d)
   ========================================================================== */
.ecsf-layout-fold_3d .ecsf-post-item {
    background: transparent;
    overflow: visible;
    box-shadow: none;
    perspective: 1200px;
}

.ecsf-fold3d:hover { transform: none; box-shadow: none; }

.ecsf-fold3d-top {
    position: relative;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    background: #111;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 2;
}

.ecsf-fold3d-header {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}

.ecsf-fold3d-header .ecsf-post-title a { color: #fff; }

.ecsf-fold3d-panel {
    background: #fff;
    border-radius: 0 0 14px 14px;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: top center;
    transition: transform 0.6s cubic-bezier(.35,.1,.25,1), max-height 0.6s ease, opacity 0.4s ease, padding 0.6s ease;
    box-shadow: 0 18px 35px rgba(0,0,0,0.15);
}

.ecsf-fold3d:hover .ecsf-fold3d-panel,
.ecsf-fold3d:focus-within .ecsf-fold3d-panel {
    max-height: 320px;
    opacity: 1;
    padding: 20px;
    transform: rotateX(0deg);
}

/* ==========================================================================
   9. 3D Neon Glow  (.ecsf-neon3d)
   ========================================================================== */
.ecsf-layout-neon_3d {
    background: #0b0f1a;
    padding: 25px;
    border-radius: 20px;
}

.ecsf-neon3d {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform 0.45s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.45s ease, border-color 0.45s ease;
}

.ecsf-neon3d:hover {
    transform: translateZ(35px) rotateX(-3deg);
    border-color: var(--neon, #00f0ff);
    /* Fallback for browsers without color-mix() */
    box-shadow:
        0 0 12px var(--neon, #00f0ff),
        0 0 45px var(--neon, #00f0ff),
        0 30px 60px rgba(0,0,0,0.6);
    box-shadow:
        0 0 12px var(--neon, #00f0ff),
        0 0 45px color-mix(in srgb, var(--neon, #00f0ff) 45%, transparent),
        0 30px 60px rgba(0,0,0,0.6);
}

.ecsf-neon3d .ecsf-post-content { padding: 20px; }
.ecsf-neon3d .ecsf-post-title a { color: #f9fafb; }
.ecsf-neon3d:hover .ecsf-post-title a { color: var(--neon, #00f0ff); text-shadow: 0 0 14px var(--neon, #00f0ff); }
.ecsf-neon3d .ecsf-post-meta,
.ecsf-neon3d .ecsf-post-meta a,
.ecsf-neon3d .ecsf-post-excerpt { color: #9ca3af; }

/* ==========================================================================
   10. 3D Isometric  (.ecsf-iso3d)
   ========================================================================== */
.ecsf-layout-iso_3d {
    perspective: 2200px;
    perspective-origin: 50% 30%;
}

.ecsf-layout-iso_3d .ecsf-post-item {
    background: transparent;
    overflow: visible;
    box-shadow: none;
}

.ecsf-iso3d:hover { transform: none; box-shadow: none; }

.ecsf-iso3d-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transform: rotateX(14deg) rotateY(-16deg) rotateZ(2deg);
    transform-style: preserve-3d;
    box-shadow: -18px 24px 0 rgba(15, 23, 42, 0.12), -30px 45px 55px rgba(0,0,0,0.18);
    transition: transform 0.55s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.55s ease;
    transition-delay: var(--iso-delay, 0s);
}

.ecsf-iso3d:hover .ecsf-iso3d-card,
.ecsf-iso3d:focus-within .ecsf-iso3d-card {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(28px);
    box-shadow: 0 25px 55px rgba(0,0,0,0.25);
    transition-delay: 0s;
}

.ecsf-iso3d .ecsf-post-content { padding: 20px; }

/* ==========================================================================
   Accessibility & responsive safety
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ecsf-3d-scene .ecsf-post-item,
    .ecsf-3d-scene .ecsf-post-item *,
    .ecsf-3d-mode .ecsf-post-item {
        transition-duration: 0.01s !important;
        animation: none !important;
    }
    .ecsf-iso3d-card { transform: none; }
}

/* Touch devices: hover-reveal layouts open on tap/focus; keep content reachable */
@media (hover: none) {
    .ecsf-flip3d .ecsf-flip3d-inner { transition-duration: 0.5s; }
    .ecsf-fold3d .ecsf-fold3d-panel {
        max-height: none; opacity: 1; padding: 20px; transform: none;
    }
    .ecsf-iso3d-card { transform: none; box-shadow: 0 12px 30px rgba(0,0,0,0.15); }
}

@media (max-width: 767px) {
    .ecsf-layout-neumorph_3d,
    .ecsf-layout-neon_3d { padding: 15px; }
}

/* ==========================================================================
   RTL support (v4.8)
   ========================================================================== */
[dir="rtl"] .ecsf-iso3d-card {
    transform: rotateX(14deg) rotateY(16deg) rotateZ(-2deg);
    box-shadow: 18px 24px 0 rgba(15, 23, 42, 0.12), 30px 45px 55px rgba(0,0,0,0.18);
}

[dir="rtl"] .ecsf-iso3d:hover .ecsf-iso3d-card,
[dir="rtl"] .ecsf-iso3d:focus-within .ecsf-iso3d-card {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(28px);
}

[dir="rtl"] .ecsf-book3d-cover {
    transform-origin: right center;
    border-radius: 14px 6px 6px 14px;
    box-shadow: -6px 0 18px rgba(0,0,0,0.25);
}

[dir="rtl"] .ecsf-book3d:hover .ecsf-book3d-cover,
[dir="rtl"] .ecsf-book3d:focus-within .ecsf-book3d-cover {
    transform: rotateY(125deg);
}

[dir="rtl"] .ecsf-book3d-page,
[dir="rtl"] .ecsf-book3d-inside {
    border-radius: 14px 6px 6px 14px;
}

[dir="rtl"] .ecsf-stack3d::before {
    transform: translateZ(-40px) translate(-10px, 10px);
}

[dir="rtl"] .ecsf-stack3d::after {
    transform: translateZ(-80px) translate(-20px, 20px);
}

[dir="rtl"] .ecsf-stack3d:hover::before { transform: translateZ(-40px) translate(-16px, 16px); }
[dir="rtl"] .ecsf-stack3d:hover::after  { transform: translateZ(-80px) translate(-30px, 30px); }

[dir="rtl"] .ecsf-stack3d:hover .ecsf-stack3d-card {
    transform: translateZ(30px) translate(6px, -6px);
}