/* ===== EXPERIENCE UNIVERSE ===== */
.experience-universe {
    position: relative;
    background: var(--bg-primary);
    overflow: hidden;
}

#exp-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* ===== AI SCANNER ===== */
.exp-scanner {
    position: fixed;
    top: 50%; left: 50%;
    width: min(420px, 70vw);
    height: min(420px, 70vw);
    transform: translate(-50%, -50%);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.exp-scanner.active { opacity: 1; }
.exp-scanner .er-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(124,58,237,0.1);
    animation: erPulse 4s ease-in-out infinite;
}
.exp-scanner .er-ring:nth-child(2) { animation-delay: 0.5s; }
.exp-scanner .er-ring:nth-child(3) { animation-delay: 1s; }
@keyframes erPulse {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.12); opacity: 0.45; }
}
.exp-scanner .er-arc {
    position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid transparent; border-top-color: #7c3aed; border-right-color: #06b6d4;
    animation: erRotate 6s linear infinite; filter: blur(1px);
    box-shadow: 0 0 25px rgba(124,58,237,0.12);
}
@keyframes erRotate { to { transform: rotate(360deg); } }
.exp-scanner .er-line {
    position: absolute; top: 50%; left: 50%; width: 140%; height: 1px;
    transform: translate(-50%, -50%) rotate(0deg);
    background: linear-gradient(90deg, transparent, #7c3aed, #06b6d4, transparent);
    animation: erLineRotate 8s linear infinite; opacity: 0.25;
}
@keyframes erLineRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
.exp-scanner .er-info {
    position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%);
    text-align: center; opacity: 0; transition: all 0.5s ease; white-space: nowrap;
}
.exp-scanner.active .er-info { opacity: 1; bottom: -55px; }
.er-info .er-name {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
    background: linear-gradient(90deg, #7c3aed, #06b6d4);
    -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text;
}
.er-info .er-role {
    font-size: 0.5rem; color: rgba(255,255,255,0.2); letter-spacing: 2px;
    text-transform: uppercase; margin-top: 4px;
}

/* ===== HERO ===== */
.exp-hero {
    position: relative; z-index: 1; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 120px 40px 60px;
}
.exp-hero .bg-title {
    position: absolute;
    font-size: clamp(5rem, 18vw, 16rem); font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px rgba(124,58,237,0.06); text-stroke: 2px rgba(124,58,237,0.06);
    letter-spacing: 0.08em; pointer-events: none; user-select: none;
    animation: expPulse 5s ease-in-out infinite;
}
@keyframes expPulse {
    0%, 100% { -webkit-text-stroke-color: rgba(124,58,237,0.06); }
    50% { -webkit-text-stroke-color: rgba(124,58,237,0.14); }
}
.exp-hero h1 {
    font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #fff 0%, #7c3aed 35%, #06b6d4 65%, #ec4899 100%);
    -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text;
    position: relative; z-index: 1; line-height: 1.15; max-width: 800px;
}
.exp-hero .subtitle {
    color: var(--text-secondary); letter-spacing: 4px; text-transform: uppercase;
    margin-top: 18px; font-size: clamp(0.55rem, 0.9vw, 0.7rem);
    max-width: 650px; line-height: 1.8; position: relative; z-index: 1;
}
.exp-hero .scroll-hint {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: rgba(255,255,255,0.15); font-size: 0.5rem; letter-spacing: 3px;
    text-transform: uppercase; animation: hintBounce 2.5s ease-in-out infinite;
}
@keyframes hintBounce {
    0%, 100% { opacity: 0.15; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.5; transform: translateX(-50%) translateY(6px); }
}

/* ===== EXPERIENCE SECTIONS ===== */
.exp-section {
    position: relative; z-index: 1;
    min-height: 100vh; padding: 100px 60px;
    display: flex; flex-direction: column; align-items: center;
}
.exp-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at var(--sx,50%) var(--sy,50%), rgba(124,58,237,0.02) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}

.exp-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
    max-width: 1300px; width: 100%; align-items: start;
}

/* Left */
.exp-left { position: relative; }
.exp-number {
    font-size: clamp(3rem, 6vw, 5rem); font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(124,58,237,0.12); text-stroke: 1px rgba(124,58,237,0.12);
    line-height: 1; margin-bottom: 6px;
}
.exp-env {
    font-size: 0.55rem; text-transform: uppercase; letter-spacing: 3px;
    color: rgba(124,58,237,0.4); margin-bottom: 16px; display: block;
}
.exp-role {
    font-size: clamp(0.85rem, 1.3vw, 1.1rem); font-weight: 700;
    letter-spacing: 0.5px; margin-bottom: 4px; color: rgba(255,255,255,0.8);
}
.exp-company {
    font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 800; margin-bottom: 4px; line-height: 1.2;
}
.exp-company span {
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text;
}
.exp-meta {
    display: flex; gap: 20px; margin: 10px 0 18px; flex-wrap: wrap;
}
.exp-meta-item { display: flex; flex-direction: column; }
.exp-meta-item .emi-l {
    font-size: 0.5rem; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.2);
}
.exp-meta-item .emi-v {
    font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.7);
}
.exp-desc {
    color: var(--text-secondary); font-size: clamp(0.8rem, 1vw, 0.9rem);
    line-height: 1.8; margin-bottom: 16px; max-width: 480px;
}

/* Right - visual + badges */
.exp-right {
    position: relative; min-height: 380px;
    display: flex; flex-direction: column; gap: 16px;
}

.exp-visual {
    width: 100%; aspect-ratio: 16/10;
    border-radius: 20px;
    background: rgba(19,28,49,0.35);
    border: 1px solid rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    transition: all 0.5s ease;
}

.exp-visual .ev-placeholder {
    text-align: center; padding: 30px;
}
.ev-placeholder .ev-icon {
    width: 56px; height: 56px; margin: 0 auto 12px;
    border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800;
}
.ev-placeholder .ev-label {
    font-size: 0.6rem; color: rgba(255,255,255,0.15); text-transform: uppercase; letter-spacing: 2px;
}

/* Responsibilities list */
.exp-responsibilities {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.exp-resp-tag {
    padding: 5px 14px; border-radius: 14px;
    font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px;
    background: rgba(124,58,237,0.06); border: 1px solid rgba(124,58,237,0.08);
    color: rgba(255,255,255,0.4); transition: all 0.3s ease;
}
.exp-resp-tag:hover {
    background: rgba(124,58,237,0.14); border-color: rgba(124,58,237,0.2);
    color: rgba(255,255,255,0.7); transform: translateY(-2px);
}

/* ---- Experience-specific env colors ---- */
.exp-section[data-exp="1"] { --env-color: #7c3aed; }
.exp-section[data-exp="2"] { --env-color: #f59e0b; }
.exp-section[data-exp="3"] { --env-color: #06b6d4; }
.exp-section[data-exp="4"] { --env-color: #ef4444; }

/* ===== PLC SHOWCASE (inside exp 4) ===== */
.plc-subsection {
    width: 100%; max-width: 1300px; margin: 40px auto 0;
    padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.04);
}
.plc-subsection h3 {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px;
    color: rgba(255,255,255,0.4); margin-bottom: 20px;
}
.plc-sub-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.plc-sub-card {
    aspect-ratio: 1; border-radius: 16px;
    background: rgba(19,28,49,0.3); border: 1px solid rgba(255,255,255,0.04);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
    transform-style: preserve-3d;
}
.plc-sub-card .ps-logo {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 800; transition: all 0.4s ease;
}
.plc-sub-card .ps-name {
    font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: rgba(255,255,255,0.4); transition: all 0.4s ease;
}
.plc-sub-card:hover {
    transform: translateZ(30px) scale(1.06);
    border-color: rgba(124,58,237,0.15); box-shadow: 0 15px 40px rgba(124,58,237,0.1);
}
.plc-sub-card:hover .ps-logo { transform: scale(1.25); }
.plc-sub-card:hover .ps-name { color: #fff; }

/* Industrial projects */
.ind-projects {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 24px;
}
.ind-project {
    padding: 24px 20px; border-radius: 16px;
    background: rgba(19,28,49,0.3); border: 1px solid rgba(255,255,255,0.04);
    transition: all 0.4s ease;
}
.ind-project h4 {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 8px; color: #ef4444;
}
.ind-project p {
    font-size: 0.65rem; color: var(--text-secondary); line-height: 1.7;
}

/* ===== STATS ===== */
.exp-stats {
    position: relative; z-index: 1; padding: 80px 60px 100px; text-align: center;
}
.exp-stats-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
    max-width: 1100px; margin: 0 auto;
}
.exp-stat-card {
    padding: 28px 14px; border-radius: 16px;
    background: rgba(19,28,49,0.2); border: 1px solid rgba(255,255,255,0.03);
    transition: all 0.4s ease;
}
.exp-stat-card:hover {
    background: rgba(19,28,49,0.3);
    border-color: rgba(124,58,237,0.1); transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.exp-stat-card .es-value {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 900;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text;
    line-height: 1.2;
}
.exp-stat-card .es-label {
    font-size: 0.5rem; text-transform: uppercase; letter-spacing: 1.2px;
    color: rgba(255,255,255,0.3); margin-top: 6px; display: block; line-height: 1.5;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .exp-inner { grid-template-columns: 1fr; gap: 30px; }
    .exp-right { min-height: auto; }
    .exp-section { padding: 80px 40px; }
    .plc-sub-grid { grid-template-columns: repeat(3, 1fr); max-width: 400px; margin: 0 auto; }
    .ind-projects { grid-template-columns: 1fr; }
    .exp-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .exp-hero { padding: 80px 20px 40px; min-height: 80vh; }
    .exp-hero h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
    .exp-hero .bg-title { font-size: clamp(3rem, 12vw, 6rem); }
    .exp-hero .scroll-hint { display: none; }
    .exp-section { padding: 60px 20px; min-height: auto; }
    .exp-visual { aspect-ratio: 16/9; }
    .plc-sub-section { margin-top: 24px; }
    .plc-sub-grid { grid-template-columns: repeat(2, 1fr); max-width: 300px; }
    .exp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .exp-stats { padding: 60px 20px; }
    .exp-scanner { width: min(260px, 75vw); height: min(260px, 75vw); }
    .exp-scanner .er-info { display: none; }
}

@media (max-width: 480px) {
    .exp-hero { padding: 60px 16px 30px; min-height: 70vh; }
    .exp-hero .bg-title { display: none; }
    .exp-section { padding: 40px 16px; }
    .exp-number { font-size: 2.5rem; }
    .exp-meta { gap: 12px; }
    .exp-stat-card { padding: 20px 10px; }
}