/**
 * Masli Yahaya — Futuristic Lofi Day / Night
 * Overrides legacy cyber variables via data-theme day|night
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Day: white lofi futuristic ── */
html[data-theme="day"],
body.masli-day {
    --bg-primary: #FAFAF8;
    --bg-secondary: #FFFFFF;
    --bg-card: rgba(255, 255, 255, 0.82);
    --text-primary: #1A1A1E;
    --text-secondary: #5C5C66;
    --accent-cyan: #5EC4B6;
    --accent-blue: #6B9FD4;
    --accent-purple: #C4B5E8;
    --accent-pink: #E8A87C;
    --glow-cyan: 0 8px 32px rgba(155, 181, 206, 0.18);
    --glow-blue: 0 8px 28px rgba(107, 159, 212, 0.16);
    --border-glass: rgba(0, 0, 0, 0.06);
    --gradient-1: linear-gradient(135deg, #C4B5E8 0%, #5EC4B6 100%);
    --gradient-2: linear-gradient(135deg, #E8A87C 0%, #9BB5CE 100%);
    --ms-lofi-lavender: #C4B5E8;
    --ms-lofi-sage: #A8C5B5;
    --ms-lofi-dusty: #9BB5CE;
    --ms-lofi-coral: #E8A87C;
    --ms-gradient-progress: linear-gradient(90deg, var(--ms-lofi-coral), var(--accent-cyan));
    --ms-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ms-font-mono: 'JetBrains Mono', monospace;
}

/* ── Night: dark lofi futuristic ── */
html[data-theme="night"],
body.masli-night {
    --bg-primary: #12141A;
    --bg-secondary: #1A1D26;
    --bg-card: rgba(26, 28, 36, 0.82);
    --text-primary: #E8E8ED;
    --text-secondary: #A8A8B3;
    --accent-cyan: #7EC8BE;
    --accent-blue: #7A9FD4;
    --accent-purple: #9B8EC4;
    --accent-pink: #C9A07A;
    --glow-cyan: 0 0 36px rgba(126, 200, 190, 0.22);
    --glow-blue: 0 0 32px rgba(122, 159, 212, 0.18);
    --border-glass: rgba(255, 255, 255, 0.08);
    --gradient-1: linear-gradient(135deg, #9B8EC4 0%, #7EC8BE 100%);
    --gradient-2: linear-gradient(135deg, #C9A07A 0%, #7A9FD4 100%);
    --ms-lofi-lavender: #9B8EC4;
    --ms-lofi-sage: #7A9E8E;
    --ms-lofi-dusty: #6B8FA8;
    --ms-lofi-coral: #C9A07A;
    --ms-gradient-progress: linear-gradient(90deg, var(--ms-lofi-lavender), var(--accent-cyan));
    --ms-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ms-font-mono: 'JetBrains Mono', monospace;
}

body.masli-theme {
    font-family: var(--ms-font-sans, Inter, sans-serif);
    -webkit-font-smoothing: antialiased;
    transition: background 0.45s ease, color 0.45s ease;
}

/* Scroll progress */
.masli-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--ms-gradient-progress);
    z-index: 2147483641;
    box-shadow: 0 0 12px rgba(126, 200, 190, 0.45);
    transition: opacity 0.3s;
}

/* Ambient grid */
.masli-grid-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

html[data-theme="day"] .masli-grid-bg,
body.masli-day .masli-grid-bg {
    background:
        radial-gradient(ellipse 70% 50% at 15% 20%, rgba(196, 181, 232, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 75%, rgba(155, 181, 206, 0.1) 0%, transparent 55%);
}

html[data-theme="night"] .masli-grid-bg,
body.masli-night .masli-grid-bg {
    background:
        radial-gradient(ellipse 65% 48% at 18% 22%, rgba(155, 142, 196, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse 55% 42% at 82% 72%, rgba(126, 200, 190, 0.08) 0%, transparent 55%);
}

.masli-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 12%, transparent 78%);
    animation: masliGridDrift 24s linear infinite;
}

html[data-theme="day"] .masli-grid-bg::before,
body.masli-day .masli-grid-bg::before {
    background-image:
        linear-gradient(rgba(155, 181, 206, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(155, 181, 206, 0.07) 1px, transparent 1px);
}

html[data-theme="night"] .masli-grid-bg::before,
body.masli-night .masli-grid-bg::before {
    background-image:
        linear-gradient(rgba(126, 200, 190, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 200, 190, 0.05) 1px, transparent 1px);
}

@keyframes masliGridDrift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(10px, 6px); }
}

/* Floating orbs */
.masli-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(55px);
    animation: masliOrbFloat 20s ease-in-out infinite;
}

html[data-theme="day"] .masli-orb,
body.masli-day .masli-orb { opacity: 0.42; }

html[data-theme="night"] .masli-orb,
body.masli-night .masli-orb { opacity: 0.28; }

.masli-orb-1 {
    width: 280px;
    height: 280px;
    top: 18%;
    left: -5%;
}

html[data-theme="day"] .masli-orb-1,
body.masli-day .masli-orb-1 { background: rgba(196, 181, 232, 0.28); }

html[data-theme="night"] .masli-orb-1,
body.masli-night .masli-orb-1 { background: rgba(155, 142, 196, 0.22); }

.masli-orb-2 {
    width: 240px;
    height: 240px;
    bottom: 10%;
    right: -4%;
    animation-delay: -8s;
}

html[data-theme="day"] .masli-orb-2,
body.masli-day .masli-orb-2 { background: rgba(168, 197, 181, 0.22); }

html[data-theme="night"] .masli-orb-2,
body.masli-night .masli-orb-2 { background: rgba(126, 200, 190, 0.16); }

.masli-orb-3 {
    width: 180px;
    height: 180px;
    top: 55%;
    right: 12%;
    animation-delay: -14s;
    animation-duration: 26s;
}

html[data-theme="day"] .masli-orb-3,
body.masli-day .masli-orb-3 { background: rgba(232, 168, 124, 0.18); }

html[data-theme="night"] .masli-orb-3,
body.masli-night .masli-orb-3 { background: rgba(201, 160, 122, 0.12); }

@keyframes masliOrbFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -14px); }
}

/* Scan line (night subtle) */
.masli-scanline {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(126, 200, 190, 0.015) 2px,
        rgba(126, 200, 190, 0.015) 4px
    );
    animation: masliScanPulse 8s ease-in-out infinite;
}

html[data-theme="night"] .masli-scanline,
body.masli-night .masli-scanline { opacity: 1; }

@keyframes masliScanPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.65; }
}

/* Theme toggle */
html[data-theme="day"] .theme-toggle-masli,
body.masli-day .theme-toggle-masli {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 8px 28px rgba(155, 181, 206, 0.2) !important;
    backdrop-filter: blur(12px);
}

html[data-theme="night"] .theme-toggle-masli,
body.masli-night .theme-toggle-masli {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(26, 28, 36, 0.88) !important;
    box-shadow: 0 0 24px rgba(126, 200, 190, 0.2) !important;
    backdrop-filter: blur(12px);
}

html[data-theme="day"] .theme-toggle-masli:hover,
body.masli-day .theme-toggle-masli:hover {
    transform: scale(1.08) rotate(12deg) !important;
    border-color: var(--ms-lofi-lavender) !important;
}

html[data-theme="night"] .theme-toggle-masli:hover,
body.masli-night .theme-toggle-masli:hover {
    transform: scale(1.08) rotate(-12deg) !important;
    border-color: var(--accent-cyan) !important;
}

/* Hero — day body sections white, hero stays cinematic */
html[data-theme="day"] .hero .tagline,
html[data-theme="day"] .hero-info span,
body.masli-day .hero .tagline,
body.masli-day .hero-info span {
    color: #cbd5e1 !important;
}

html[data-theme="day"] .hero .hero-avatar,
body.masli-day .hero .hero-avatar {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 30px rgba(94, 196, 182, 0.35) !important;
}

html[data-theme="night"] .hero-overlay,
body.masli-night .hero-overlay {
    background: linear-gradient(180deg, rgba(18, 20, 26, 0.5) 0%, rgba(18, 20, 26, 0.82) 100%) !important;
}

/* Glass cards */
html[data-theme="day"] .stat-card,
html[data-theme="day"] .timeline-content,
html[data-theme="day"] .edu-card,
html[data-theme="day"] .explore-card,
html[data-theme="day"] .article-card,
html[data-theme="day"] .article-compact-card,
html[data-theme="day"] .tech-icon,
html[data-theme="day"] .skill-tag,
body.masli-day .stat-card,
body.masli-day .timeline-content,
body.masli-day .edu-card,
body.masli-day .explore-card,
body.masli-day .article-card,
body.masli-day .article-compact-card,
body.masli-day .tech-icon,
body.masli-day .skill-tag {
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(155, 181, 206, 0.12);
}

html[data-theme="night"] .stat-card,
html[data-theme="night"] .timeline-content,
html[data-theme="night"] .edu-card,
html[data-theme="night"] .explore-card,
html[data-theme="night"] .article-card,
html[data-theme="night"] .article-compact-card,
html[data-theme="night"] .tech-icon,
html[data-theme="night"] .skill-tag,
body.masli-night .stat-card,
body.masli-night .timeline-content,
body.masli-night .edu-card,
body.masli-night .explore-card,
body.masli-night .article-card,
body.masli-night .article-compact-card,
body.masli-night .tech-icon,
body.masli-night .skill-tag {
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.28);
}

/* Tech icons float */
html[data-theme="day"] .tech-icon,
html[data-theme="night"] .tech-icon,
body.masli-day .tech-icon,
body.masli-night .tech-icon {
    animation: masliTechFloat 4s ease-in-out infinite;
}

.tech-icon:nth-child(2n) { animation-delay: -0.6s; }
.tech-icon:nth-child(3n) { animation-delay: -1.2s; }
.tech-icon:nth-child(5n) { animation-delay: -2s; }

@keyframes masliTechFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.tech-icon:hover {
    animation: none;
}

/* Section titles shimmer */
html[data-theme="day"] .section-title,
html[data-theme="night"] .section-title,
body.masli-day .section-title,
body.masli-night .section-title {
    background-size: 200% auto;
    animation: masliTitleShimmer 6s ease-in-out infinite;
}

@keyframes masliTitleShimmer {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* Timeline pulse dot */
.timeline-dot {
    animation: masliDotPulse 2.5s ease-in-out infinite;
}

@keyframes masliDotPulse {
    0%, 100% { box-shadow: var(--glow-cyan); transform: translateY(-50%) scale(1); }
    50% { box-shadow: 0 0 20px var(--accent-cyan); transform: translateY(-50%) scale(1.15); }
}

/* Reveal on scroll */
.masli-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.masli-reveal.masli-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero stagger */
.masli-hero-in {
    opacity: 0;
    transform: translateY(18px);
    animation: masliHeroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.masli-hero-in:nth-child(1) { animation-delay: 0.05s; }
.masli-hero-in:nth-child(2) { animation-delay: 0.15s; }
.masli-hero-in:nth-child(3) { animation-delay: 0.25s; }
.masli-hero-in:nth-child(4) { animation-delay: 0.35s; }
.masli-hero-in:nth-child(5) { animation-delay: 0.45s; }
.masli-hero-in:nth-child(6) { animation-delay: 0.55s; }

@keyframes masliHeroIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Count-up numbers */
.masli-count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.masli-count-active {
    color: var(--accent-cyan);
}

.masli-count-done {
    transition: color 0.4s ease;
}

.masli-count-infinity {
    animation: masliInfinityPulse 3s ease-in-out infinite;
}

@keyframes masliInfinityPulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* Stat number glow */
.stat-number {
    animation: masliStatGlow 4s ease-in-out infinite;
    font-variant-numeric: tabular-nums;
}

@keyframes masliStatGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.12); }
}

/* Article page */
html[data-theme="day"] .article-page .container,
html[data-theme="night"] .article-page .container,
body.masli-day.article-page .container,
body.masli-night.article-page .container {
    position: relative;
    z-index: 1;
}

html[data-theme="day"] .masli-summary-box,
html[data-theme="night"] .masli-summary-box,
body.masli-day .masli-summary-box,
body.masli-night .masli-summary-box {
    backdrop-filter: blur(12px);
}

/* Compose page */
html[data-theme="day"] .compose-form,
html[data-theme="night"] .compose-form,
body.masli-day .compose-form,
body.masli-night .compose-form {
    backdrop-filter: blur(12px);
}

/* ── Pan & Zoom — homepage + article images ── */
.masli-pan-zoom-wrap {
    overflow: hidden;
    position: relative;
}

.masli-pan-zoom-wrap--article {
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--border-glass);
    max-height: 480px;
}

.masli-pan-zoom-wrap--article .article-image {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    display: block;
    width: 100%;
    max-height: 480px;
}

.masli-pan-zoom-wrap--inline {
    border-radius: 10px;
    margin: 1em 0;
    border: 1px solid var(--border-glass);
}

.masli-pan-zoom-wrap--inline .masli-pan-zoom-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.pdf-image-cover {
    overflow: hidden;
}

.masli-pan-zoom-img,
.article-card-img,
.article-small-img,
.article-image,
.article-content img,
.masli-summary-photo img,
.pdf-image-cover img,
.hero-avatar img {
    transform-origin: center center;
    will-change: transform;
    animation: masliPanZoom 20s ease-in-out infinite alternate;
}

.hero-avatar img,
.masli-pan-zoom-img--portrait {
    animation-name: masliPanZoomPortrait;
    animation-duration: 16s;
}

.hero-articles .article-card:nth-child(3n+1) .article-card-img { animation-delay: 0s; }
.hero-articles .article-card:nth-child(3n+2) .article-card-img { animation-delay: -5s; }
.hero-articles .article-card:nth-child(3n+3) .article-card-img { animation-delay: -10s; }

.articles-row-3 .article-card:nth-child(3n+1) .article-card-img { animation-delay: -2s; }
.articles-row-3 .article-card:nth-child(3n+2) .article-card-img { animation-delay: -7s; }
.articles-row-3 .article-card:nth-child(3n+3) .article-card-img { animation-delay: -12s; }

.article-compact-card:nth-child(odd) .article-small-img { animation-delay: -3s; }
.article-compact-card:nth-child(even) .article-small-img { animation-delay: -9s; }

.article-content img:nth-of-type(3n+1) { animation-delay: -1s; }
.article-content img:nth-of-type(3n+2) { animation-delay: -6s; }
.article-content img:nth-of-type(3n+3) { animation-delay: -11s; }

@keyframes masliPanZoom {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    50% { transform: scale(1.08) translate3d(-1%, 0.5%, 0); }
    100% { transform: scale(1.14) translate3d(1%, -0.5%, 0); }
}

@keyframes masliPanZoomPortrait {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    50% { transform: scale(1.06) translate3d(-0.5%, 0.8%, 0); }
    100% { transform: scale(1.1) translate3d(0.5%, -1%, 0); }
}

.img-modal img,
.compose-form img,
.theme-toggle-masli img {
    animation: none !important;
    transform: none !important;
}

/* Article engagement — views & likes */
.article-engagement,
.article-engagement-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.article-engagement {
    margin: 6px 0 10px;
}

.article-engagement-bar {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-glass);
    background: var(--bg-card);
    backdrop-filter: blur(10px);
}

.article-stat-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-family: var(--ms-font-mono, 'JetBrains Mono', monospace);
}

.article-stat-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-glass);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-family: var(--ms-font-mono, 'JetBrains Mono', monospace);
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 36px;
}

.article-stat-like:hover {
    transform: translateY(-1px);
    border-color: var(--accent-cyan);
    color: var(--text-primary);
}

.article-stat-like.is-liked {
    border-color: var(--accent-pink);
    color: var(--accent-pink);
    box-shadow: 0 0 16px rgba(232, 168, 124, 0.25);
}

.article-stat-like.is-liked .like-icon {
    animation: masliLikePop 0.35s ease;
}

.article-stat-like.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

@keyframes masliLikePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.article-engagement--compact {
    gap: 8px;
    margin-top: 4px;
}

.article-engagement--compact .article-stat-like {
    padding: 4px 8px;
    min-height: 30px;
    font-size: 0.72rem;
}

.article-engagement--compact .article-stat-views {
    font-size: 0.72rem;
}

.article-engagement--inline {
    gap: 10px;
    margin-left: auto;
    margin-right: 8px;
}

.article-engagement--inline .article-stat-like {
    padding: 4px 10px;
    min-height: 32px;
    font-size: 0.75rem;
}

.article-compact-text {
    flex: 1;
    min-width: 0;
}

.article-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-title-row-text {
    flex: 1;
    min-width: 0;
}

.stat-suffix {
    font-size: 0.75rem;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .article-engagement-bar {
        justify-content: space-between;
    }
    .article-stat-like {
        min-height: 40px;
        padding: 8px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .masli-grid-bg::before,
    .masli-orb,
    .masli-scanline,
    .tech-icon,
    .section-title,
    .timeline-dot,
    .stat-number,
    .masli-hero-in {
        animation: none !important;
    }
    .masli-pan-zoom-img,
    .article-card-img,
    .article-small-img,
    .article-image,
    .article-content img,
    .masli-summary-photo img,
    .pdf-image-cover img,
    .hero-avatar img {
        animation: none !important;
        transform: none !important;
    }
    .masli-count-up,
    .masli-count-infinity {
        animation: none !important;
    }
    .masli-reveal {
        opacity: 1;
        transform: none;
    }
}