:root {
  --shadow-col:#000A;
  --shadow-lt-col:#0006;
  --border-col:#AAA;
  --opacity-col:#AAA0;

}

* {
  box-sizing: content-box;
}

body {
  margin:0;
}

header {
  position: relative;
}

.main-container {
  display: flex;
  position:relative;
  margin:0;
}

.main-pan {
  position: relative;
  width:70%;
  left:20%;
  z-index: 1;
  margin:1em 0;
  background: white;
  border-left: 6px ridge;
  border-right: 6px ridge;
  border-top: 6px ridge;
  border-bottom: 6px ridge;
  border-color: var(--border-col);
  border-radius:1em;
  padding: 1em 2em;
}

.photo-pan {
  position: fixed;
  z-index: -1;
  height: 100%;
  width:100%;
  overflow:hidden;
  object-fit:cover;
}

h2 {
  line-height: 1.4;
  margin-block-start: 0.5;
  margin-block-end: 0.5;
  margin:0.5em 0;
}


h3 {
  line-height: 1.4;
  margin-block-start: 0;
  margin-block-end: 0;
  margin:0.4em 0;
}

h4 {
  line-height: 1.2;
  margin-block-start: 0;
  margin-block-end: 0;
  margin:0.2em 0;
}

.main-pan div {
  font-weight: normal;
  line-height: 1.3;
  margin:0.3em 0;
}


.portrait {
  position:relative;
  float:right;
  width:300px;
  max-width:40%;
  object-fit:contain;
  margin: 0.5em;
  z-index: 2;
  box-shadow: 3px 3px 3px 2px var(--shadow-col);
  transition: all 1s;
}

.portrait:hover {
  transform: scale(1.1);
  box-shadow: 10px 10px 6px 4px var(--shadow-col);
}

.logo-sm {
  position: relative;
  height:3em;
  width:3em;
  vertical-align:middle;
  margin: 0.5em 1.4em 0.5em 1em;
}

.logo-sm-h {
  position: relative;
  height:3em;
  vertical-align:middle;
  margin: 0.5em 0.3em 0.5em 0.3em;
}

[class|="logo-sm"] {
  z-index: 2;
  box-shadow: 2px 2px 1px 2px var(--shadow-col);
  transition: all 1s;
}

[class|="logo-sm"]:hover {
  transform: scale(1.5);
  box-shadow: 3px 3px 2px 1px var(--shadow-col);
}

.logo-l {
  position: relative;
  height:12em;
  vertical-align:middle;
  margin: 0.5em 1.4em 0.5em 1em;
  box-shadow: 2px 2px 1px 2px var(--shadow-col);
  transition: all 1s;
}

.logo-l:hover {
  transform: scale(1.2);
  box-shadow: 3px 3px 2px 1px var(--shadow-col);
}






.hd-lr {
  position: relative;
  animation: 2s ease-out 0.2s 1 normal both;
  animation-name: h-mv-lr, shd-rise;
}

.hd-rl {
  position: relative;
  animation: 2s ease-out 0.2s 1 normal both;
  animation-name: h-mv-rl, shd-rise;
}

.main-pan h3,
.main-pan img,
.main-pan div {
  animation: 1.2s ease-out 0.8s 1 normal both;
  animation-name: reveal;
}

.main-pan {
  animation: 1s ease 1s 1 normal both;
  animation-name: reveal-brd;
}

.photo-pan {
  animation: 2s ease 1.5s 1 normal both;
  animation-name: reveal;
}



.photo-pan > .c-img {
  width:100%;
  height:100%;
  overflow:hidden;
}


.c-img>img {
  object-fit: cover;
  animation: 30s ease 5s 5 normal both;
  animation-name: bk-anm;
}
.container {
  display: flex;          /* Включаем Flexbox */
  align-items: center;    /* Выравниваем элементы по вертикали по центру */
  gap: 20px;              /* Отступ между картинкой и текстом */
}

.container img {
  width: 15em;           /* Задайте нужный размер картинки */
}

.portfolio-card {
  display: grid;
  grid-template-columns: 250px 1fr; /* Фиксированная ширина для фото и гибкая для текста */
  gap: 24px;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  margin: 20px 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  align-items: start;
  border: 1px solid #eee;
}

/* Эффект при наведении */
.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Стили для изображения внутри карточки */
.portfolio-card img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Изображение заполняет область без искажений */
  border-radius: 8px;
  display: block;
}

/* Стили для списка (описания) */
.portfolio-card ul {
  list-style: disc;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Стиль для полноэкранного контейнера */
.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9); /* Темный фон */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Состояние, когда оверлей виден */
.fullscreen-overlay.active {
  opacity: 1;
}

/* Стиль изображения внутри оверлея */
.fullscreen-overlay img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.fullscreen-overlay.active img {
  transform: scale(1);
}


@keyframes h-mv-lr {
  0% {left:-55vw;}
  40% {left:0;}
}

@keyframes h-mv-rl {
  0% {right:-55vw;}
  40% {right:0;}
}

@keyframes shd-rise {
  40% {text-shadow: initial;}
  100% {text-shadow: 2px 2px 3px var(--shadow-lt-col);}
}

@keyframes reveal {
  0% {opacity:0;}
  100% {opacity:1;}
}

@keyframes reveal-brd {
  0% {border: 6px ridge var(--opacity-col);}
  100% {border: 6px ridge var(--border-col);}
}

@keyframes bk-anm {
  0% {transform: scale(110%) translate(-3%, 0%);}
  50% {transform: scale(110%) translate(3%, -2%);}
  100% {transform: scale(110%) translate(-3%, 0%);}
  
}