/* =====================================================
   LUMA RAY — ARTICLE PAGE STYLES
   ===================================================== */

@keyframes bpFadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ===== BACK TO BLOG BAR ===== */
.art-back-bar{
    margin-top: 80px;
    background:rgba(0,212,255,.06);
    border-bottom:1px solid rgba(0,212,255,.12);
    padding:16px 0
}
.art-back-link{
    display:inline-flex;align-items:center;gap:10px;
    padding:9px 20px 9px 14px;
    border-radius:50px;
    border:1px solid rgba(0,212,255,.25);
    background:rgba(0,212,255,.08);
    font-size:.8rem;font-weight:700;letter-spacing:.5px;
    color:var(--teal);
    text-decoration:none;transition:.3s var(--ease);
    box-shadow:0 0 16px rgba(0,212,255,.1)
}
.art-back-link i{width:16px;height:16px;transition:transform .3s var(--ease);flex-shrink:0}
.art-back-link:hover{
    background:rgba(0,212,255,.15);
    border-color:rgba(0,212,255,.4);
    color:#fff;
    box-shadow:0 0 24px rgba(0,212,255,.25);
    transform:translateX(-2px)
}
.art-back-link:hover i{transform:translateX(-4px)}

.read-progress{
    position:fixed;top:0;left:0;height:3px;z-index:9999;width:0%;
    background:linear-gradient(to right,var(--teal),var(--purple));
    transition:width .1s linear;
    box-shadow:0 0 8px rgba(0,212,255,.5)
}

/* ===== ARTICLE HERO ===== */
.art-hero{
    padding:60px 0 0;position:relative;overflow:hidden;
    background:var(--bg)
}
.art-hero-bg{position:absolute;inset:0;z-index:0}
.art-hero-bg img{
    width:100%;height:100%;object-fit:cover;
    filter:brightness(.28) saturate(.9) blur(3px);
    transform:scale(1.05)
}
.art-hero-bg::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(13,13,31,.55) 0%,rgba(13,13,31,.9) 100%)
}
.art-hero-inner{
    position:relative;z-index:1;max-width:800px;margin:0 auto;
    text-align:center;padding-bottom:64px
}
.art-category-badge{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.25);
    border-radius:50px;padding:6px 16px;margin-bottom:24px;
    font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;
    color:var(--teal)
}
.art-category-badge i{width:12px;height:12px}
.art-title{
    font-family:var(--ff);font-weight:900;text-transform:uppercase;
    font-size:clamp(1.6rem,4vw,3rem);line-height:1.15;
    color:#f0f2ff;margin-bottom:24px
}
.art-desc{
    font-size:1.05rem;color:rgba(240,242,255,.68);
    line-height:1.85;max-width:640px;margin:0 auto 32px
}
.art-meta-row{
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:20px
}
.art-meta-item{
    display:flex;align-items:center;gap:6px;
    font-size:.75rem;color:rgba(240,242,255,.60)
}
.art-meta-item i{width:13px;height:13px}
.art-meta-author{color:var(--teal);font-weight:600}
.art-cover-wrap{
    position:relative;width:100%;max-width:900px;
    margin:40px auto 0;border-radius:20px 20px 0 0;overflow:hidden;
    height:420px
}
.art-cover-wrap img{
    width:100%;height:100%;object-fit:cover;
    filter:brightness(.92) saturate(1)
}
.art-cover-wrap::after{
    content:'';position:absolute;bottom:0;left:0;right:0;
    height:50%;
    background:linear-gradient(to top,var(--bg),transparent)
}

/* ===== ARTICLE LAYOUT ===== */
.art-layout{
    display:grid;grid-template-columns:1fr 300px;
    gap:64px;max-width:1140px;margin:0 auto;
    padding:64px 32px 80px
}
.art-content-col{}
.art-sidebar{}

/* ===== ARTICLE CONTENT ===== */
.art-content{
    font-size:.97rem;line-height:1.9;color:rgba(240,242,255,.85)
}
.art-content h2{
    font-family:var(--ff);font-size:1.3rem;font-weight:800;
    text-transform:uppercase;color:#f0f2ff;
    margin:48px 0 18px;padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.07);
    position:relative
}
.art-content h2::after{
    content:'';position:absolute;bottom:-1px;left:0;width:48px;height:2px;
    background:var(--gd)
}
.art-content h3{
    font-family:var(--ff);font-size:1rem;font-weight:700;
    text-transform:uppercase;color:var(--teal);
    margin:32px 0 14px;letter-spacing:1px
}
.art-content p{margin-bottom:20px}
.art-content ul,.art-content ol{
    margin:0 0 24px 0;padding-left:0;list-style:none
}
.art-content li{
    position:relative;padding-left:24px;margin-bottom:10px
}
.art-content ul li::before{
    content:'';position:absolute;left:0;top:10px;
    width:8px;height:8px;border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--purple))
}
.art-content ol{counter-reset:ol-counter}
.art-content ol li{counter-increment:ol-counter}
.art-content ol li::before{
    content:counter(ol-counter);position:absolute;left:0;top:1px;
    font-family:var(--ff);font-size:.72rem;font-weight:800;
    color:var(--teal)
}
.art-content strong{color:#f0f2ff;font-weight:700}
.art-content a{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(0,212,255,.3)}
.art-content a:hover{color:#fff}

/* Pull quote */
.art-pullquote{
    margin:40px 0;padding:28px 32px;
    border-left:3px solid transparent;
    border-image:var(--gd) 1;
    background:rgba(0,212,255,.04);
    border-radius:0 12px 12px 0
}
.art-pullquote p{
    font-family:var(--ff);font-size:1.05rem;font-weight:600;
    color:#f0f2ff;line-height:1.6;margin:0;font-style:italic
}

/* Info box */
.art-infobox{
    margin:32px 0;padding:24px 28px;
    background:rgba(168,85,247,.06);
    border:1px solid rgba(168,85,247,.15);
    border-radius:16px
}
.art-infobox-title{
    font-family:var(--ff);font-size:.72rem;font-weight:800;
    color:var(--purple);text-transform:uppercase;letter-spacing:2px;
    margin-bottom:12px;display:flex;align-items:center;gap:8px
}
.art-infobox-title i{width:14px;height:14px}
.art-infobox p{margin:0;font-size:.88rem;color:rgba(240,242,255,.75)}

/* Pricing table */
.art-table-wrap{overflow-x:auto;margin:32px 0}
.art-table{width:100%;border-collapse:collapse}
.art-table th{
    padding:12px 18px;text-align:left;
    background:rgba(0,212,255,.08);border:1px solid rgba(255,255,255,.06);
    font-family:var(--ff);font-size:.7rem;font-weight:700;
    text-transform:uppercase;letter-spacing:2px;color:var(--teal)
}
.art-table td{
    padding:14px 18px;border:1px solid rgba(255,255,255,.05);
    font-size:.88rem;color:rgba(240,242,255,.7)
}
.art-table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.art-table tr:hover td{background:rgba(0,212,255,.04)}
.art-table .art-td-price{
    font-family:var(--ff);font-weight:800;
    background:var(--gd);-webkit-background-clip:text;background-clip:text;color:transparent
}

/* Tags row */
.art-tags-row{display:flex;flex-wrap:wrap;gap:8px;margin:48px 0 32px}
.art-tag{
    padding:5px 14px;border-radius:50px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    font-size:.72rem;font-weight:600;color:rgba(240,242,255,.5)
}

/* Share row */
.art-share-row{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:24px 0 28px;margin-top:8px;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.06)
}
.art-share-label{
    font-size:.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:2px;color:rgba(240,242,255,.55);
    margin-right:4px
}
.art-share-btn{
    width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.05);
    display:flex;align-items:center;justify-content:center;
    color:rgba(240,242,255,.75);transition:.3s var(--ease);
    text-decoration:none;
    flex-shrink:0
}
.art-share-btn svg{width:18px;height:18px;display:block}
.art-share-btn i{width:18px;height:18px;display:block}
.art-share-btn:hover{
    border-color:var(--teal);
    color:var(--teal);
    background:rgba(0,212,255,.12);
    box-shadow:0 0 18px rgba(0,212,255,.2);
    transform:scale(1.1)
}

/* Author box */
.art-author{
    display:flex;gap:20px;align-items:flex-start;
    margin-top:48px;padding:28px;
    background:var(--glass);border:1px solid var(--glass-border);
    border-radius:20px;backdrop-filter:blur(8px)
}
.art-author-avatar{
    width:64px;height:64px;border-radius:50%;flex-shrink:0;
    background:var(--gd);display:flex;align-items:center;justify-content:center;
    font-family:var(--ff);font-size:1.1rem;font-weight:900;color:#fff;
    box-shadow:0 0 24px rgba(0,212,255,.3)
}
.art-author-name{
    font-family:var(--ff);font-size:.9rem;font-weight:800;
    color:#f0f2ff;margin-bottom:4px
}
.art-author-role{
    font-size:.72rem;color:var(--teal);text-transform:uppercase;
    letter-spacing:2px;margin-bottom:10px
}
.art-author-bio{font-size:.84rem;color:rgba(240,242,255,.68);line-height:1.7}

/* ===== SIDEBAR ===== */
.art-sidebar{position:relative}
.art-sidebar-sticky{position:sticky;top:100px;display:flex;flex-direction:column;gap:24px}
.art-sidebar-card{
    background:var(--glass);border:1px solid var(--glass-border);
    border-radius:16px;padding:24px;backdrop-filter:blur(8px)
}
.art-sidebar-title{
    font-family:var(--ff);font-size:.68rem;font-weight:700;
    text-transform:uppercase;letter-spacing:3px;color:rgba(240,242,255,.55);
    margin-bottom:16px;display:flex;align-items:center;gap:8px
}
.art-sidebar-title i{width:13px;height:13px;color:var(--teal)}

/* TOC */
.art-toc{list-style:none;display:flex;flex-direction:column;gap:4px}
.art-toc a{
    display:block;padding:8px 12px;border-radius:8px;
    font-size:.8rem;color:rgba(240,242,255,.5);
    transition:.25s var(--ease);border-left:2px solid transparent;
    text-decoration:none
}
.art-toc a:hover,.art-toc a.active{
    color:var(--teal);background:rgba(0,212,255,.06);
    border-left-color:var(--teal)
}
.art-toc li.toc-h3 a{padding-left:22px;font-size:.76rem}

/* Related */
.art-related-list{display:flex;flex-direction:column;gap:12px}
.art-related-item{
    display:flex;gap:12px;align-items:center;
    text-decoration:none;color:inherit;
    padding:10px;border-radius:10px;
    transition:.25s var(--ease)
}
.art-related-item:hover{background:rgba(255,255,255,.04)}
.art-related-img{
    width:52px;height:52px;border-radius:8px;overflow:hidden;flex-shrink:0
}
.art-related-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.75)}
.art-related-title{font-size:.78rem;font-weight:600;color:rgba(240,242,255,.7);line-height:1.4}
.art-related-date{font-size:.68rem;color:rgba(240,242,255,.48);margin-top:3px}

/* CTA sidebar */
.art-sidebar-cta{
    background:var(--gd);border-radius:16px;padding:24px;text-align:center
}
.art-sidebar-cta h4{
    font-family:var(--ff);font-size:.85rem;font-weight:800;
    text-transform:uppercase;color:#fff;margin-bottom:10px
}
.art-sidebar-cta p{font-size:.78rem;color:rgba(255,255,255,.75);margin-bottom:18px;line-height:1.6}
.art-sidebar-cta .btn{
    background:rgba(255,255,255,.15);color:#fff;
    border:1px solid rgba(255,255,255,.3);
    font-size:.78rem;padding:10px 20px;
    width:100%;justify-content:center
}
.art-sidebar-cta .btn:hover{background:rgba(255,255,255,.25)}

/* ===== RELATED ARTICLES SECTION ===== */
.art-related-section{
    padding:64px 0 80px;background:var(--bg2);
    border-top:1px solid rgba(255,255,255,.06)
}
.art-related-section .container{}
.art-related-header{
    display:flex;align-items:center;gap:20px;margin-bottom:36px
}
.art-related-header h2{
    font-family:var(--ff);font-size:.9rem;font-weight:700;
    text-transform:uppercase;letter-spacing:3px;color:rgba(240,242,255,.55);
    white-space:nowrap
}
.art-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .art-layout{grid-template-columns:1fr;gap:40px}
    .art-sidebar-sticky{position:static}
    .art-related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    .art-back-bar{margin-top:76px}
    .art-hero{padding:60px 0 0}
    .art-cover-wrap{height:260px}
    .art-layout{padding:40px 20px 60px}
    .art-related-grid{grid-template-columns:1fr}
    .art-author{flex-direction:column}
}

/* ============================================================
   ARTICLE POLISH v2 — Enhanced reading experience
   ============================================================ */

/* Article hero — title shimmer on hover */
.art-title{
    transition:filter .4s ease
}

/* Infobox variants */
.art-infobox.info-teal{
    background:rgba(0,212,255,.05);
    border-color:rgba(0,212,255,.2)
}
.art-infobox.info-teal .art-infobox-title{color:#00d4ff}

/* Pull quote — stronger visual */
.art-pullquote{
    position:relative;
    background:linear-gradient(135deg,rgba(0,212,255,.05),rgba(168,85,247,.04));
    border-radius:0 16px 16px 0
}
.art-pullquote::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    background:linear-gradient(to bottom,#00d4ff,#a855f7);
    border-radius:3px 0 0 3px
}

/* Code block style */
.art-content code{
    font-family:'JetBrains Mono','Courier New',monospace;
    font-size:.85em;
    background:rgba(0,212,255,.08);
    border:1px solid rgba(0,212,255,.15);
    border-radius:6px;padding:2px 8px;
    color:#67e8f9
}

/* Article h2 hover — gradient glow */
.art-content h2:hover::after{
    width:100%;transition:width .4s cubic-bezier(.4,0,.2,1)
}

/* Sidebar card hover */
.art-sidebar-card{
    transition:border-color .3s ease,box-shadow .3s ease
}
.art-sidebar-card:hover{
    border-color:rgba(0,212,255,.15);
    box-shadow:0 8px 32px rgba(0,0,0,.3)
}

/* Sidebar CTA — gradient border */
.art-sidebar-cta{
    position:relative;overflow:hidden
}
.art-sidebar-cta::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:rgba(255,255,255,.2)
}

/* Related items — image scale on hover */
.art-related-img img{
    transition:transform .4s cubic-bezier(.4,0,.2,1),filter .4s ease
}
.art-related-item:hover .art-related-img img{
    transform:scale(1.08);filter:brightness(.9)
}
.art-related-item:hover .art-related-title{color:#f0f2ff}

/* Author box — top gradient accent */
.art-author{
    position:relative;overflow:hidden
}
.art-author::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(to right,transparent,#00d4ff,#a855f7,transparent)
}

/* Back bar — inherits block display from above */

/* Read progress glow */
.read-progress{
    box-shadow:0 0 12px rgba(0,212,255,.6),0 0 24px rgba(168,85,247,.2)
}

/* Article hero cover wrap shadow */
.art-cover-wrap{
    box-shadow:0 -20px 80px rgba(0,0,0,.5)
}

/* Table hover row */
.art-table tr:hover td{
    background:rgba(0,212,255,.05) !important;
    transition:background .2s ease
}

/* Tags hover */
.art-tag{
    transition:.25s cubic-bezier(.4,0,.2,1);cursor:default
}
.art-tag:hover{
    background:rgba(0,212,255,.08);
    border-color:rgba(0,212,255,.2);
    color:#f0f2ff
}

/* TOC active indicator */
.art-toc a.active{
    box-shadow:inset 0 0 0 1px rgba(0,212,255,.1)
}

/* ============================================================
   ARTICLE MEGA POLISH v3 — "Absolutely Jaw-Dropping" Upgrade
   ============================================================ */

/* ===== HERO ANIMATED GRID LINES ===== */
.art-hero::before{
    content:'';position:absolute;inset:0;z-index:0;
    background-image:
        linear-gradient(rgba(0,212,255,.02) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,212,255,.02) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,black 20%,transparent 80%);
    animation:artGridShift 30s linear infinite;
    pointer-events:none
}
@keyframes artGridShift{
    0%{background-position:0 0}
    100%{background-position:60px 60px}
}

/* Hero ambient glows */
.art-hero::after{
    content:'';position:absolute;z-index:0;pointer-events:none;
    width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle,rgba(168,85,247,.08) 0%,transparent 70%);
    top:-10%;right:-5%;
    filter:blur(80px);
    animation:heroAmbientDrift 12s ease-in-out infinite alternate
}
@keyframes heroAmbientDrift{
    0%{transform:translate(0,0)}
    100%{transform:translate(-30px,20px)}
}

/* ===== ARTICLE CATEGORY BADGE — pulse animation ===== */
.art-category-badge{
    animation:badgePulse 3s ease-in-out infinite;
    position:relative
}
@keyframes badgePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.15)}
    50%{box-shadow:0 0 0 8px rgba(0,212,255,0)}
}

/* ===== ENHANCED PULLQUOTE — decorative gradient quotation mark ===== */
.art-pullquote{
    padding-left:60px
}
.art-pullquote::after{
    content:'\201C';position:absolute;top:-8px;left:16px;
    font-family:var(--ff);font-size:5rem;font-weight:900;line-height:1;
    background:linear-gradient(135deg,rgba(0,212,255,.25),rgba(168,85,247,.2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    pointer-events:none
}

/* ===== INFOBOX — animated top border ===== */
.art-infobox{
    position:relative;overflow:hidden
}
.art-infobox::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(to right,var(--purple),var(--teal),var(--purple));
    background-size:200% 100%;
    animation:infoboxBorderShift 4s linear infinite
}
@keyframes infoboxBorderShift{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* ===== CONTENT REVEAL ANIMATIONS — JS-driven only ===== */
.art-content .art-will-reveal{
    opacity:0;transform:translateY(20px);
    transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)
}
.art-content .art-revealed{
    opacity:1 !important;transform:translateY(0) !important
}


/* ===== SIDEBAR CARD — animated gradient border ===== */
.art-sidebar-card{
    position:relative;overflow:hidden
}
.art-sidebar-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(to right,transparent,rgba(0,212,255,.2),rgba(168,85,247,.15),transparent);
    opacity:0;transition:opacity .4s ease
}
.art-sidebar-card:hover::before{opacity:1}

/* ===== TOC — enhanced active state ===== */
.art-toc a{
    position:relative;overflow:hidden
}
.art-toc a::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:0;
    background:rgba(0,212,255,.04);border-radius:8px;
    transition:width .3s cubic-bezier(.4,0,.2,1)
}
.art-toc a:hover::before,.art-toc a.active::before{width:100%}
.art-toc a.active{
    font-weight:600;
    text-shadow:0 0 20px rgba(0,212,255,.3)
}

/* ===== SIDEBAR CTA — shimmer effect ===== */
.art-sidebar-cta::after{
    content:'';position:absolute;top:0;left:-100%;
    width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
    animation:ctaShimmer 4s ease-in-out infinite
}
@keyframes ctaShimmer{
    0%,100%{left:-100%}
    50%{left:150%}
}

/* ===== SHARE BUTTONS — tooltip & enhanced hover ===== */
.art-share-btn{
    position:relative
}
.art-share-btn::after{
    content:attr(aria-label);
    position:absolute;bottom:calc(100% + 8px);left:50%;
    transform:translateX(-50%) translateY(4px);
    background:rgba(13,13,31,.95);border:1px solid rgba(0,212,255,.2);
    border-radius:8px;padding:5px 12px;
    font-size:.68rem;font-weight:600;color:var(--teal);
    white-space:nowrap;
    opacity:0;pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
    backdrop-filter:blur(8px);z-index:10
}
.art-share-btn:hover::after{
    opacity:1;transform:translateX(-50%) translateY(0)
}

/* ===== TAGS — premium hover with gradient ===== */
.art-tag:hover{
    background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(168,85,247,.06));
    border-color:rgba(0,212,255,.25);
    color:#f0f2ff;
    box-shadow:0 0 12px rgba(0,212,255,.08)
}

/* ===== AUTHOR BOX — enhanced avatar glow ===== */
.art-author-avatar{
    position:relative;
    animation:avatarGlow 4s ease-in-out infinite
}
@keyframes avatarGlow{
    0%,100%{box-shadow:0 0 24px rgba(0,212,255,.3)}
    50%{box-shadow:0 0 40px rgba(0,212,255,.5),0 0 60px rgba(168,85,247,.2)}
}

/* ===== RELATED ARTICLES SECTION — enhanced ===== */
.art-related-section .bp-card{
    transition:all .4s cubic-bezier(.4,0,.2,1)
}
.art-related-section .bp-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(0,212,255,.08)
}

/* ===== READING PROGRESS — 3-color gradient ===== */
.read-progress{
    background:linear-gradient(to right,var(--teal),var(--purple),var(--pink));
    box-shadow:0 0 16px rgba(0,212,255,.6),0 0 32px rgba(168,85,247,.3);
    height:3px
}

/* ===== COVER IMAGE — hover zoom ===== */
.art-cover-wrap img{
    transition:transform .8s cubic-bezier(.4,0,.2,1)
}
.art-cover-wrap:hover img{
    transform:scale(1.03)
}

/* ===== BACK BUTTON — shimmer pass ===== */
.art-back-link{
    position:relative;overflow:hidden
}
.art-back-link::after{
    content:'';position:absolute;top:0;left:-100%;
    width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(0,212,255,.12),transparent);
    transition:.6s var(--ease)
}
.art-back-link:hover::after{left:150%}

/* ===== LIST BULLETS — glow pulse ===== */
.art-content ul li::before{
    box-shadow:0 0 8px rgba(0,212,255,.3)
}

/* ===== ARTICLE LINKS — animated underline ===== */
.art-content a{
    text-decoration:none;
    background-image:linear-gradient(var(--teal),var(--teal));
    background-size:0 1px;background-position:0 100%;
    background-repeat:no-repeat;
    transition:background-size .3s ease,color .3s ease;
    padding-bottom:1px
}
.art-content a:hover{
    background-size:100% 1px;color:#fff
}

/* ===== H2 SECTION DIVIDER — enhanced gradient line ===== */
.art-content h2::after{
    transition:width .5s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 8px rgba(0,212,255,.3)
}
.art-content h2:hover::after{
    width:100%
}