/* ============================================================================
   CINEMATIC LAYER
   A premium, dark, movie-intro design system layered over the portfolio.
   Loaded LAST so it establishes the atmosphere, typography, background FX,
   custom cursor, glass navigation, scroll progress and section polish.
   ========================================================================== */

:root {
    /* ---- Core cinematic palette (extracted from the intro mood) ---- */
    --c-black:      #06070a;   /* near black */
    --c-charcoal:   #0b0d12;   /* dark charcoal */
    --c-deep-gray:  #12151c;   /* deep gray */
    --c-gunmetal:   #1c212b;   /* gunmetal */
    --c-blue:       #090d16;   /* very dark blue */
    --c-silver:     #b9bfca;   /* muted silver */
    --c-silver-dim: #7f8794;   /* dim steel */
    --c-white:      #f3f5f8;   /* white typography */
    --c-red:        #d24b3d;   /* subtle red accent (ember) */
    --c-red-soft:   rgba(210, 75, 61, 0.55);
    --c-red-glow:   rgba(210, 75, 61, 0.22);
    --c-line:       rgba(255, 255, 255, 0.08);

    /* ---- Type ---- */
    --font-display: 'Cinzel', 'Fraunces', 'Times New Roman', serif;   /* epic serif titles */
    --font-cond:    'Oswald', 'Poppins', sans-serif;                  /* condensed uppercase headings */
    --font-body:    'Poppins', -apple-system, sans-serif;             /* clean sans body */
    --font-mono:    'Space Mono', monospace;                          /* terminal / labels */

    --ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==================== BASE / ATMOSPHERE ==================== */
html { scroll-behavior: smooth; }

body {
    /* Override the old bg.png/indigo backdrop with a deep cinematic field */
    background: var(--c-black) !important;
    color: var(--c-silver);
    cursor: none;               /* replaced by the custom cinematic cursor */
}

/* Fixed atmospheric field sitting behind everything */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% -10%, #14171f 0%, #0a0c11 46%, var(--c-black) 100%),
        radial-gradient(80% 60% at 82% 8%, rgba(210, 75, 61, 0.10), transparent 60%),
        radial-gradient(70% 60% at 12% 96%, rgba(70, 82, 104, 0.14), transparent 62%);
}

/* Touch/coarse pointers keep the native cursor */
@media (hover: none), (pointer: coarse) {
    body { cursor: auto; }
    .cine-cursor, .cine-cursor-ring { display: none !important; }
}

/* ==================== GLOBAL BACKGROUND FX LAYERS ==================== */
.cine-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

/* Drifting fog */
.cine-fog {
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(38% 30% at 30% 40%, rgba(120, 130, 150, 0.06), transparent 70%),
        radial-gradient(46% 34% at 72% 60%, rgba(90, 100, 120, 0.05), transparent 72%),
        radial-gradient(30% 40% at 50% 85%, rgba(210, 75, 61, 0.05), transparent 70%);
    filter: blur(20px);
    animation: fogDrift 42s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes fogDrift {
    0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
    50%  { transform: translate3d(2%, 3%, 0) scale(1.12); }
    100% { transform: translate3d(4%, -3%, 0) scale(1.06); }
}

/* Dust particle canvas (rendered by cinematic.js) */
.cine-dust {
    position: absolute;
    inset: 0;
    opacity: 0.6;
}

/* Film grain */
.cine-grain {
    position: absolute;
    inset: -60%;
    opacity: 0.045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 0.55s steps(2) infinite;
    will-change: transform;
}
@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-2%, 1.5%); }
    100% { transform: translate(1.5%, -2%); }
}

/* Vignette + faint scanlines */
.cine-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 110% at 50% 45%, transparent 42%, rgba(0,0,0,0.62) 100%);
}
.cine-scanlines {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.018) 0px,
        rgba(255,255,255,0.018) 1px,
        transparent 2px,
        transparent 3px
    );
}

@media (prefers-reduced-motion: reduce) {
    .cine-fog, .cine-grain { animation: none !important; }
}

/* ==================== TYPOGRAPHY ==================== */
h1, h2, h3, h4, h5, h6 { color: var(--c-white); letter-spacing: 0.01em; }

/* Hero eyebrow — condensed uppercase, red-lit */
.hero-eyebrow {
    font-family: var(--font-cond) !important;
    text-transform: uppercase;
    letter-spacing: 0.42em;
    font-size: clamp(0.6rem, 1.4vw, 0.8rem);
    color: var(--c-silver-dim);
    margin-bottom: 0.9rem;
    padding-left: 0.2em;
}
.hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 26px; height: 1px;
    background: var(--c-red);
    vertical-align: middle;
    margin-right: 0.8em;
    box-shadow: 0 0 8px var(--c-red-soft);
}

/* Hero title — epic serif. Solid fill (kill the gradient-clip inherited from
   hero.css) so "Lokesh" never renders as a washed-out box that bleeds over the
   eyebrow / scrolling text around it. */
.hero-content h1 {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #f2f3f7 !important;
    color: #f2f3f7 !important;
    text-shadow: 0 4px 22px rgba(0,0,0,0.6);
}

/* Section headings — condensed uppercase */
.section-title,
.about-content h1,
.about-header-copy h1,
.about-section h2,
.why-hire-box h2,
.skill-category h3 {
    font-family: var(--font-cond) !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
}

/* Fixed floating section label — serif, silver.
   Solid text (no gradient-clip) so it never renders as a washed-out box. */
.fixed-section-title .section-name {
    font-family: var(--font-display) !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #e9ecf3 !important;
    color: #e9ecf3 !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.75) !important;
    letter-spacing: 0.12em;
}

p, .hero-content p { font-family: var(--font-body); }

/* ==================== BUTTONS ==================== */
.btn {
    background: linear-gradient(135deg, #232833, #14171e) !important;
    color: var(--c-white) !important;
    border: 1px solid rgba(210, 75, 61, 0.45) !important;
    border-radius: 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-family: var(--font-cond);
    font-weight: 500;
    font-size: 0.72rem !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease-cine), box-shadow 0.4s var(--ease-cine), border-color 0.4s ease;
}
.btn::after {
    /* light sweep */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--ease-cine);
}
.btn:hover {
    transform: translateY(-2px) !important;
    border-color: var(--c-red) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 22px var(--c-red-glow) !important;
}
.btn:hover::after { transform: translateX(120%); }

/* ==================== CUSTOM CINEMATIC CURSOR ==================== */
.cine-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 7px; height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--c-red);
    box-shadow: 0 0 12px var(--c-red-soft);
    z-index: 100001;
    pointer-events: none;
    transition: width 0.25s ease, height 0.25s ease, background 0.25s ease;
    mix-blend-mode: screen;
}
.cine-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 1px solid rgba(185, 191, 202, 0.5);
    z-index: 100000;
    pointer-events: none;
    transition: width 0.3s var(--ease-cine), height 0.3s var(--ease-cine),
                border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}
body.cursor-hover .cine-cursor-ring {
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    border-color: var(--c-red);
    background: rgba(210, 75, 61, 0.06);
}
body.cursor-hover .cine-cursor { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
body.cursor-down .cine-cursor-ring { width: 22px; height: 22px; margin: -11px 0 0 -11px; }

/* ==================== SCROLL / SECTION PROGRESS ==================== */
.cine-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--c-silver-dim), var(--c-red));
    box-shadow: 0 0 12px var(--c-red-soft);
    z-index: 99998;
    transition: width 0.2s linear;
}

/* ==================== GLASS FLOATING NAVIGATION ==================== */
.skill-icons {
    background: rgba(12, 14, 20, 0.5) !important;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid var(--c-line);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    border-radius: 999px;
}
.skill-icons .icon-link {
    color: var(--c-silver-dim) !important;
    transition: color 0.3s ease, transform 0.35s var(--ease-cine), background 0.3s ease;
    border-radius: 50%;
}
.skill-icons .icon-link:hover { color: var(--c-white) !important; transform: translateY(-3px); }
.skill-icons .icon-link.active {
    color: var(--c-red) !important;
    background: rgba(210, 75, 61, 0.10);
    box-shadow: 0 0 16px var(--c-red-glow);
}

/* ==================== SOUND TOGGLE ==================== */
.cine-sound {
    position: fixed;
    left: max(1.4rem, 2.4vw);
    bottom: max(1.4rem, 2.4vh);
    z-index: 99997;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-silver-dim);
    background: rgba(12, 14, 20, 0.5);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    cursor: none;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.cine-sound:hover { color: var(--c-white); border-color: rgba(210,75,61,0.5); }
.cine-sound .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cine-sound .bars i {
    width: 2px; height: 4px;
    background: currentColor;
    border-radius: 1px;
    transition: height 0.2s ease;
}
.cine-sound.is-on { color: var(--c-red); border-color: rgba(210,75,61,0.5); }
.cine-sound.is-on .bars i { animation: soundBars 0.9s ease-in-out infinite; }
.cine-sound.is-on .bars i:nth-child(2) { animation-delay: 0.15s; }
.cine-sound.is-on .bars i:nth-child(3) { animation-delay: 0.3s; }
.cine-sound.is-on .bars i:nth-child(4) { animation-delay: 0.1s; }
@keyframes soundBars {
    0%, 100% { height: 3px; }
    50%      { height: 12px; }
}

/* ==================== SCROLL REVEAL PRIMITIVE ==================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
    transition: opacity 0.9s var(--ease-cine), transform 0.9s var(--ease-cine), filter 0.9s var(--ease-cine);
    will-change: opacity, transform;
}
.reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ==================== SECTION POLISH ==================== */

/* Hero scrolling tech ticker — silver, restrained */
.scroll-text span { color: var(--c-silver-dim); }

/* Status pill under 3D model */
.hero-3d-model .status {
    border: 1px solid var(--c-line);
    background: rgba(12,14,20,0.55) !important;
}

/* Projects — movie-scene cards */
.project-card {
    background: rgba(12, 14, 20, 0.55) !important;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.55);
    transition: transform 0.5s var(--ease-cine), box-shadow 0.5s var(--ease-cine), border-color 0.4s ease;
}
.project-card:hover {
    border-color: rgba(210, 75, 61, 0.4);
    box-shadow: 0 30px 70px rgba(0,0,0,0.65), 0 0 30px var(--c-red-glow);
}
.project-image { position: relative; overflow: hidden; }
.project-image::after {
    /* cinematic scrim over each project still */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(6,7,10,0.55) 100%);
    pointer-events: none;
}
.project-image img { transition: transform 0.7s var(--ease-cine), filter 0.7s var(--ease-cine); filter: saturate(0.9) contrast(1.02); }
.project-card:hover .project-image img { transform: scale(1.07); filter: saturate(1.05) contrast(1.05); }
.project-tags { color: var(--c-silver-dim) !important; letter-spacing: 0.04em; }
.project-btn {
    border: 1px solid var(--c-line);
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.project-btn:hover { border-color: var(--c-red); color: var(--c-white); background: rgba(210,75,61,0.08); }

/* Skills — futuristic glass cards with glow */
.skill-category {
    border: 1px solid var(--c-line) !important;
    background: rgba(12, 14, 20, 0.4) !important;
    border-radius: 8px;
    transition: transform 0.45s var(--ease-cine), border-color 0.4s ease, box-shadow 0.4s ease;
}
.skill-category:hover {
    transform: translateY(-4px);
    border-color: rgba(210, 75, 61, 0.4) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 22px var(--c-red-glow);
}
.skill-category h3 { color: var(--c-white); }
.skill-category p { color: var(--c-silver); }

/* Tech skill chips */
.tech-skill-item {
    border: 1px solid var(--c-line) !important;
    transition: border-color 0.35s ease, transform 0.35s var(--ease-cine), color 0.35s ease;
}
.tech-skill-item:hover {
    border-color: rgba(210,75,61,0.45) !important;
    transform: translateY(-3px);
    color: var(--c-red);
}

/* About cards */
.card, .fun-fact-highlight, .philosophy-cards .card {
    border: 1px solid var(--c-line);
}

/* Contact — terminal treatment on the "why hire" box */
.why-hire-box {
    border: 1px solid var(--c-line) !important;
    background: rgba(8, 10, 14, 0.7) !important;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.why-hire-box::before {
    /* terminal chrome bar */
    content: "● ● ●";
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 8px 14px;
    font-size: 9px;
    letter-spacing: 3px;
    color: rgba(210, 75, 61, 0.6);
    background: rgba(0,0,0,0.35);
    border-bottom: 1px solid var(--c-line);
}
.why-hire-box h2 { margin-top: 2.2rem !important; }
.hire-message-box {
    font-family: var(--font-mono);
    border-left: 2px solid var(--c-red);
    padding-left: 1rem;
}
.ready-question::before { content: "> "; color: var(--c-red); }
.call-to-action { position: relative; }
/* blinking terminal caret injected via .type-caret by JS */
.type-caret {
    display: inline-block;
    width: 8px;
    background: var(--c-red);
    margin-left: 2px;
    animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* Contact form fields */
.contact-form input,
.contact-form textarea {
    background: rgba(10,12,16,0.6) !important;
    border: 1px solid var(--c-line) !important;
    color: var(--c-white) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--c-red) !important;
    box-shadow: 0 0 0 3px var(--c-red-glow) !important;
    outline: none;
}

/* Old decorative purple shapes -> faint steel */
.geometric-shape { border-color: rgba(143,151,166,0.25) !important; opacity: 0.4 !important; }
.dot { background: rgba(143,151,166,0.4) !important; }
.highlight { color: var(--c-red) !important; }

/* Keep interactive elements showing the custom cursor context */
a, button, .btn, .icon-link, .project-card, .skill-category, input, textarea { cursor: none; }