/* Стили для P-N перехода */
.pn-junction-diagram {
    height: 400px;
    position: relative;
    margin: 30px 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.p-region {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.1));
    border-right: 3px dashed rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
}

.n-region {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 0, 255, 0.1), rgba(0, 0, 255, 0.2));
    border-left: 3px dashed rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
}

.junction-barrier {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
}

/* Ширина перехода по умолчанию (равновесие) */
.junction-barrier.equilibrium {
    left: 45%;
    width: 10%;
}

/* Узкий переход при прямом включении */
.junction-barrier.forward {
    left: 48%;
    width: 4%;
    background: rgba(0, 255, 0, 0.3);
}

/* Широкий переход при обратном включении */
.junction-barrier.reverse {
    left: 40%;
    width: 20%;
    background: rgba(255, 0, 0, 0.3);
}

.region-label {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
}

.region-subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
    text-align: center;
}

.barrier-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffcc00;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.barrier-width-info {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: #ffcc00;
    text-align: center;
    opacity: 0.8;
}

/* Стили для носителей заряда */
/* pn-junction-styles.css - Дрейфовые носители с белым контуром */

/* Дрейфовые носители имеют обычные цвета с белым контуром */
.carrier.drift-carrier.electron {
    background: #00a8ff !important; /* Синий как обычные электроны */
    box-shadow: 0 0 10px #00a8ff, 0 0 20px #00a8ff !important;
    border: 2px solid white !important; /* Белый контур */
}

.carrier.drift-carrier.hole {
    background: #ff3838 !important; /* Красный как обычные дырки */
    box-shadow: 0 0 10px #ff3838, 0 0 20px #ff3838 !important;
    border: 2px solid white !important; /* Белый контур */
}

/* Желтая пульсация при возвращении с сохранением белого контура */
.carrier.drift-carrier.returning {
    animation: driftReturnPulse 1s ease-in-out infinite !important;
    box-shadow: 0 0 15px yellow, 0 0 30px yellow, 0 0 45px orange !important;
    border: 2px solid white !important; /* Сохраняем белый контур */
    z-index: 25 !important;
}

/* Анимация пульсации при возвращении */
@keyframes driftReturnPulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 15px yellow, 0 0 30px yellow, 0 0 45px orange;
        border: 2px solid white;
    }
    50% { 
        transform: scale(1.2);
        box-shadow: 0 0 25px yellow, 0 0 50px yellow, 0 0 75px orange;
        border: 2px solid white;
    }
}

/* Усиленное свечение при пересечении перехода с белым контуром */
.carrier.drift-carrier.crossing {
    box-shadow: 0 0 20px #00a8ff, 0 0 40px #00a8ff, 0 0 60px #00a8ff !important;
    border: 2px solid white !important; /* Белый контур */
    z-index: 30 !important;
}

.carrier.drift-carrier.hole.crossing {
    box-shadow: 0 0 20px #ff3838, 0 0 40px #ff3838, 0 0 60px #ff3838 !important;
    border: 2px solid white !important; /* Белый контур */
}

/* Убираем тепловое движение для дрейфовых носителей */
.carrier.drift-carrier {
    animation: none !important;
}

/* Сохраняем тепловое движение для не-дрейфовых носителей */
.carrier.equilibrium-electron:not(.drift-carrier) {
    animation: electronEquilibrium 4s ease-in-out infinite;
    animation-delay: calc(var(--random1) * 3s);
    border: 2px solid white; /* Белый контур для обычных носителей */
}

.carrier.equilibrium-hole:not(.drift-carrier) {
    animation: holeEquilibrium 4s ease-in-out infinite;
    animation-delay: calc(var(--random1) * 3s);
    border: 2px solid white; /* Белый контур для обычных носителей */
}

/* Базовые стили для всех носителей с белым контуром */
.carrier {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid white; /* Белый контур по умолчанию */
    z-index: 10;
}

.electron {
    background: #00a8ff;
    box-shadow: 0 0 10px #00a8ff, 0 0 20px #00a8ff;
    border: 2px solid white; /* Белый контур */
}

.hole {
    background: #ff3838;
    box-shadow: 0 0 10px #ff3838, 0 0 20px #ff3838;
    border: 2px solid white; /* Белый контур */
}

/* Остальные стили остаются без изменений */
/* ... остальной CSS код ... */

.electron-color {
    background: #00a8ff;
}

.hole-color {
    background: #ff3838;
}

/* pn-junction-styles.css - Добавленные стили для равновесного состояния */

/* Улучшенные анимации для равновесного состояния */
@keyframes electronEquilibrium {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    20% {
        transform: translate(calc(-6px + 12px * var(--random1)), calc(-4px + 8px * var(--random2))) scale(1.05);
        opacity: 0.9;
    }
    40% {
        transform: translate(calc(4px - 8px * var(--random3)), calc(6px - 12px * var(--random4))) scale(0.95);
        opacity: 0.8;
    }
    60% {
        transform: translate(calc(-8px + 16px * var(--random5)), calc(-5px + 10px * var(--random6))) scale(1.03);
        opacity: 0.85;
    }
    80% {
        transform: translate(calc(5px - 10px * var(--random7)), calc(-7px + 14px * var(--random8))) scale(0.98);
        opacity: 0.75;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
}

@keyframes holeEquilibrium {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    20% {
        transform: translate(calc(5px - 10px * var(--random1)), calc(-6px + 12px * var(--random2))) scale(1.05);
        opacity: 0.9;
    }
    40% {
        transform: translate(calc(-4px + 8px * var(--random3)), calc(4px - 8px * var(--random4))) scale(0.95);
        opacity: 0.8;
    }
    60% {
        transform: translate(calc(7px - 14px * var(--random5)), calc(-8px + 16px * var(--random6))) scale(1.03);
        opacity: 0.85;
    }
    80% {
        transform: translate(calc(-6px + 12px * var(--random7)), calc(5px - 10px * var(--random8))) scale(0.98);
        opacity: 0.75;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
}

/* Анимации диффузии через переход */
@keyframes electronDiffusion {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        box-shadow: 0 0 15px #00a8ff, 0 0 30px #00a8ff;
    }
    30% {
        opacity: 1;
        transform: translateX(calc(-60px + 20px * var(--random1))) scale(1.2);
        box-shadow: 0 0 20px #00a8ff, 0 0 40px #00a8ff;
    }
    70% {
        opacity: 0.8;
        transform: translateX(calc(-100px + 30px * var(--random2))) scale(1.1);
        box-shadow: 0 0 25px #00a8ff, 0 0 50px #00a8ff;
    }
    100% {
        opacity: 0;
        transform: translateX(calc(-120px + 20px * var(--random3))) scale(0.8);
        box-shadow: 0 0 10px #00a8ff, 0 0 20px #00a8ff;
    }
}

@keyframes holeDiffusion {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
        box-shadow: 0 0 15px #ff3838, 0 0 30px #ff3838;
    }
    30% {
        opacity: 1;
        transform: translateX(calc(60px - 20px * var(--random1))) scale(1.2);
        box-shadow: 0 0 20px #ff3838, 0 0 40px #ff3838;
    }
    70% {
        opacity: 0.8;
        transform: translateX(calc(100px - 30px * var(--random2))) scale(1.1);
        box-shadow: 0 0 25px #ff3838, 0 0 50px #ff3838;
    }
    100% {
        opacity: 0;
        transform: translateX(calc(120px - 20px * var(--random3))) scale(0.8);
        box-shadow: 0 0 10px #ff3838, 0 0 20px #ff3838;
    }
}

/* Классы анимации для равновесия */
.carrier.equilibrium-electron {
    animation: electronEquilibrium 4s ease-in-out infinite;
    animation-delay: calc(var(--random1) * 3s);
}

.carrier.equilibrium-hole {
    animation: holeEquilibrium 4s ease-in-out infinite;
    animation-delay: calc(var(--random1) * 3s);
}

.carrier.diffusion-electron {
    animation: electronDiffusion 2.5s ease-out forwards;
    z-index: 20;
}

.carrier.diffusion-hole {
    animation: holeDiffusion 2.5s ease-out forwards;
    z-index: 20;
}

/* pn-junction-styles.css - Добавлен стиль для скрытия информации о равновесии */

/* Индикатор динамического равновесия */
.equilibrium-info {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
    color: #ffcc00;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0.9;
    display: block; /* По умолчанию отображается */
	white-space: pre-line;
}

/* Остальные стили остаются без изменений */

/* Подсветка перехода при диффузии */
.junction-barrier.equilibrium.diffusion-active {
    background: rgba(0, 255, 0, 0.4);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    transition: all 0.3s ease;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .carrier {
        width: 12px;
        height: 12px;
    }
}

@media (max-width: 480px) {
    .carrier {
        width: 10px;
        height: 10px;
    }
}
/* Анимации для прямого включения - с проникновением в соседние области */
@keyframes electronForward {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    60% {
        opacity: 1;
        transform: translateX(calc(-100% - 30px)) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateX(calc(-100% - 60px)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(-100% - 60px)) scale(0.8);
    }
}

@keyframes holeForward {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    60% {
        opacity: 1;
        transform: translateX(calc(100% + 30px)) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateX(calc(100% + 60px)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(100% + 60px)) scale(0.8);
    }
}

/* Анимации для обратного включения - движение до краев */
@keyframes electronReverse {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateX(100px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }
}

@keyframes holeReverse {
    0% {
        opacity: 0;
        transform: translateX(0) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateX(-100px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-100px) scale(0.8);
    }
}

/* Классы анимации */
.carrier.forward-electron {
    animation: electronForward 2s linear forwards;
}

.carrier.forward-hole {
    animation: holeForward 2s linear forwards;
}

.carrier.reverse-electron {
    animation: electronReverse 2s linear forwards;
}

.carrier.reverse-hole {
    animation: holeReverse 2s linear forwards;
}

/* Эффекты рекомбинации */
.recombination-effect {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(circle, #00ff00, transparent);
    box-shadow: 0 0 15px #00ff00, 0 0 30px #00ff00;
    opacity: 0;
    z-index: 15;
}

@keyframes recombinationFlash {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

.recombination-effect.active {
    animation: recombinationFlash 0.5s ease-out;
}

/* Адаптивность */
@media (max-width: 768px) {
    .pn-junction-diagram {
        height: 300px;
    }
    
    .region-label {
        font-size: 1.2rem;
    }
    
    .region-subtitle {
        font-size: 0.8rem;
    }
    
    .carrier {
        width: 14px;
        height: 14px;
    }
    
    .barrier-label {
        font-size: 0.7rem;
    }
    
    .junction-barrier.equilibrium {
        left: 44%;
        width: 12%;
    }
    
    .junction-barrier.forward {
        left: 47%;
        width: 6%;
    }
    
    .junction-barrier.reverse {
        left: 38%;
        width: 24%;
    }
}

@media (max-width: 480px) {
    .pn-junction-diagram {
        height: 250px;
    }
    
    .region-label {
        font-size: 1rem;
    }
    
    .carrier {
        width: 12px;
        height: 12px;
    }
    
    .junction-barrier.equilibrium {
        left: 43%;
        width: 14%;
    }
    
    .junction-barrier.forward {
        left: 46%;
        width: 8%;
    }
    
    .junction-barrier.reverse {
        left: 36%;
        width: 28%;
    }
}
/* styles.css - Добавлены стили для блока физических пояснений */

.physics-explanation {
    margin-top: 25px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    border-left: 4px solid #ffcc00;
}

.physics-explanation h3 {
    color: #ffcc00;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.physics-explanation ul {
    margin-left: 15px;
    margin-bottom: 0;
}

.physics-explanation li {
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* Адаптивность */
@media (max-width: 768px) {
    .physics-explanation {
        padding: 15px;
        margin-top: 20px;
    }
    
    .physics-explanation h3 {
        font-size: 1.1rem;
    }
    
    .physics-explanation li {
        font-size: 0.95rem;
    }
}

/* Анимация для дрейфовых электронов */
.carrier.electron.drift-carrier {
    animation: driftElectron 4s linear infinite;
}

/* Анимация для дрейфовых дырок */
.carrier.hole.drift-carrier {
    animation: driftHole 4s linear infinite;
}