/* =====================================================================
   சித்தப்பித்தன் — முப்பரிமாணத் தோற்றம் (3D)

   எல்லா விதிகளும் [data-3d="on"] உள்ளே. அணைத்திருந்தால் இந்தக் கோப்பு
   ஒரு விதியையும் பொருத்தாது — எனவே வழக்கமான தளத்தின் வேகமும்
   தோற்றமும் சிறிதும் மாறாது.

   கொள்கை:
     · உரை ஒருபோதும் சாயாது / மங்காது. படிப்பதே முதன்மை; அசைவு
       அதற்குப் பின்னால் மட்டுமே.
     · prefers-reduced-motion கேட்டவருக்கு அசைவு இல்லை — ஆழம் மட்டும்.
     · அச்சிடும்போது எதுவும் இல்லை.
   ===================================================================== */

/* ------------------------------------------------------------------
   1. களம் — பக்கத்துக்கே ஒரு ஆழம்
   ------------------------------------------------------------------ */
[data-3d="on"] body {
    perspective: 1400px;
    perspective-origin: 50% 30%;
}

/* மென்மையான ஒளிப் புகை — பின்னணியில் மெதுவாக நகர்வது.
   உள்ளடக்கத்துக்குப் பின்னால், தொடுதலுக்கு அப்பாற்பட்டது. */
[data-3d="on"] body::before {
    content: '';
    position: fixed; inset: -20vmax;
    z-index: -1; pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 18% 22%,
            color-mix(in srgb, var(--brand) 16%, transparent), transparent 62%),
        radial-gradient(30vmax 30vmax at 82% 72%,
            color-mix(in srgb, var(--brand) 11%, transparent), transparent 60%);
    animation: d3-drift 34s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes d3-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* ------------------------------------------------------------------
   2. அட்டைகள் — சுட்டி எங்கே இருக்கிறதோ அதைப் பார்த்துச் சாய்கின்றன

   --rx / --ry ஆகியவற்றை threed.js வைக்கிறது. JavaScript இல்லாவிட்டால்
   அவை 0 — அப்போதும் ஆழமும் உயர்வும் இருக்கும், சாய்வு மட்டும் இல்லை.
   ------------------------------------------------------------------ */
[data-3d="on"] .post-card,
[data-3d="on"] .about-cat,
[data-3d="on"] .about-way,
[data-3d="on"] .about-coll,
[data-3d="on"] .coll-content a,
[data-3d="on"] .post-row,
[data-3d="on"] .contact-card,
[data-3d="on"] .stat-tile {
    transform-style: preserve-3d;
    transform:
        perspective(900px)
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg))
        translateZ(0);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1),
                box-shadow .25s ease,
                border-color .25s ease;
    will-change: transform;
}

[data-3d="on"] .post-card:hover,
[data-3d="on"] .about-cat:hover,
[data-3d="on"] .about-way:hover,
[data-3d="on"] .about-coll:hover,
[data-3d="on"] .coll-content a:hover,
[data-3d="on"] .post-row:hover,
[data-3d="on"] .stat-tile:hover {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .05),
        0 12px 26px -8px rgba(0, 0, 0, .22),
        0 30px 60px -30px rgba(0, 0, 0, .3);
}

/* அட்டைக்குள் தலைப்பு சற்று முன்னால் மிதக்கிறது —
   இதுவே ஆழத்தை உண்மையாக்குகிறது. */
[data-3d="on"] .post-card .card-title,
[data-3d="on"] .post-card .card-cat {
    transform: translateZ(28px);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
[data-3d="on"] .post-card .card-verse,
[data-3d="on"] .post-card .card-excerpt { transform: translateZ(14px); }
[data-3d="on"] .post-card .card-meta     { transform: translateZ(6px); }
[data-3d="on"] .post-card .card-cover img {
    transform: translateZ(0) scale(1.02);
    transition: transform .4s ease;
}
[data-3d="on"] .post-card:hover .card-cover img { transform: translateZ(0) scale(1.08); }

/* ------------------------------------------------------------------
   3. தலைப்புப் பகுதி — மெதுவான மிதப்பு
   ------------------------------------------------------------------ */
[data-3d="on"] .page-head-icon,
[data-3d="on"] .hero-feature .feature-badge {
    animation: d3-float 5.5s ease-in-out infinite;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .4);
}
@keyframes d3-float {
    0%, 100% { transform: translateY(0) rotateZ(0deg); }
    50%      { transform: translateY(-7px) rotateZ(-2deg); }
}

[data-3d="on"] .hero-title,
[data-3d="on"] .page-head-title {
    text-shadow:
        0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent),
        0 10px 24px rgba(0, 0, 0, .16);
}

/* ------------------------------------------------------------------
   4. உருளும்போது விரிதல் — கீழிருந்து சாய்ந்து நிமிர்வது

   threed.js .d3-in சேர்க்கும். JavaScript இல்லாவிட்டால் இவை
   ஒருபோதும் மறையாது (கீழே உள்ள விதி) — உள்ளடக்கம் தொலையக் கூடாது.
   ------------------------------------------------------------------ */
[data-3d="on"] .d3-reveal {
    opacity: 0;
    transform: perspective(1000px) rotateX(9deg) translateY(26px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
[data-3d="on"] .d3-reveal.d3-in {
    opacity: 1;
    transform: perspective(1000px) rotateX(0) translateY(0);
}

/* ------------------------------------------------------------------
   5. பொத்தான்களும் சின்னங்களும்
   ------------------------------------------------------------------ */
[data-3d="on"] .btn-brand,
[data-3d="on"] .btn-outline-brand,
[data-3d="on"] .like-btn,
[data-3d="on"] .vm-btn {
    transition: transform .18s ease, box-shadow .18s ease;
}
[data-3d="on"] .btn-brand:hover,
[data-3d="on"] .btn-outline-brand:hover,
[data-3d="on"] .like-btn:hover,
[data-3d="on"] .vm-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .45);
}
[data-3d="on"] .btn-brand:active,
[data-3d="on"] .btn-outline-brand:active { transform: translateY(0) scale(.99); }

/* தலைப்பு — மேலே மிதக்கும் ஒரு தட்டு போல */
[data-3d="on"] .site-header {
    box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5);
}

/* கவிதைப் பக்கம் — உரை சாயக் கூடாது, ஆனால் தாள் ஒன்று போலத் தெரியலாம் */
[data-3d="on"] .single-body {
    text-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 60%, transparent);
}

/* மரக்காட்சி — கிளை விரியும்போது */
[data-3d="on"] .tree-cat[open] > .tree-kids,
[data-3d="on"] .tree-coll[open] > .tree-kids {
    animation: d3-open .3s cubic-bezier(.22, .61, .36, 1);
    transform-origin: top center;
}
@keyframes d3-open {
    from { opacity: 0; transform: perspective(700px) rotateX(-8deg); }
    to   { opacity: 1; transform: perspective(700px) rotateX(0); }
}

/* பொத்தான் இயங்கும்போது அது ஒளிர்கிறது */
[data-3d="on"] .threed-toggle {
    background: var(--brand); border-color: var(--brand); color: #fff;
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand) 22%, transparent);
}

/* ------------------------------------------------------------------
   6. மரியாதைகள் — அசைவு வேண்டாம் என்றவருக்கு, சிறிய திரைக்கு, அச்சுக்கு
   ------------------------------------------------------------------ */

/* அசைவு குறைக்கக் கேட்டவர்: ஆழம் இருக்கட்டும், அசைவு வேண்டாம். */
@media (prefers-reduced-motion: reduce) {
    [data-3d="on"] body::before,
    [data-3d="on"] .page-head-icon,
    [data-3d="on"] .hero-feature .feature-badge { animation: none !important; }

    [data-3d="on"] .post-card,
    [data-3d="on"] .about-cat,
    [data-3d="on"] .about-way,
    [data-3d="on"] .about-coll,
    [data-3d="on"] .coll-content a,
    [data-3d="on"] .post-row,
    [data-3d="on"] .stat-tile { transform: none; transition: box-shadow .2s ease; }

    [data-3d="on"] .d3-reveal { opacity: 1; transform: none; transition: none; }

    [data-3d="on"] .tree-cat[open] > .tree-kids,
    [data-3d="on"] .tree-coll[open] > .tree-kids { animation: none; }
}

/* கைபேசி — சுட்டி இல்லை, சாய்வுக்குப் பொருள் இல்லை. பின்னணி அசைவும்
   மின்கலத்தை வீணாக்கும். ஆழமும் விரிதலும் மட்டும். */
@media (hover: none), (max-width: 767.98px) {
    [data-3d="on"] .post-card,
    [data-3d="on"] .about-cat,
    [data-3d="on"] .about-way,
    [data-3d="on"] .about-coll,
    [data-3d="on"] .coll-content a,
    [data-3d="on"] .post-row,
    [data-3d="on"] .stat-tile { transform: none; }

    [data-3d="on"] body::before { animation: none; }
}

@media print {
    [data-3d="on"] body::before { display: none !important; }
    [data-3d="on"] * {
        transform: none !important;
        animation: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
}