@font-face {
    font-family: 'VenturaScript';
    src: url('../fonts/VenturaScript.ttf') format('truetype');
    font-weight: normal;   
    font-display: swap;
}
body { /*club240793215*/
	font-family: 'VenturaScript';
	font-size: 100%;
	background: url("../img/bg_mobile.png") repeat;
}
#menu-checkbox {
	display: none;
}
.container {
	margin: 0 auto;
	max-width: 1000px;
}
@media (min-width: 1000px) {
	.container {
		background-color: #fff;
	}
}
header, footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    opacity: 0;                                                         
    transform: scale(0.5);                                              
    animation: menuReveal 2s ease-out forwards;                         
    animation-delay: 0.1s;
	box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.15);
}
header a {
	font-size: 105%;
	text-decoration: none;
}
nav a {                                                              
    display: inline;                                                    
    position: relative;                                                    
    letter-spacing: 0.03em;                                             
    color: #4f606b;                                                                                     
    transition: color 0.25s, transform 0.2s, font-size 0.25s;                                                 
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
	cursor: pointer;
	margin: 0 0.1rem;
}
nav a:hover {                                                       
    color: #044c79;                                                     
    transform: translateY(-1px);                                        
}
.menu-toggle {
	display: none;
}
@media (max-width: 820px) {
	header {
		padding: 0 1.5rem;
	}
	nav, header address, nav a:first-child {
		display: none;
	}
	.menu-toggle {
		color: #77b4ed;
		display: flex;
		top: 1.5rem;
		right: 2.5rem;
		position: fixed;
	}
	#menu-checkbox:checked ~ header {
		position: fixed;
		inset: 0;
		z-index: 1;
		background: rgba(0, 0, 0, 0.75);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 2rem;
		gap: 0;
		box-shadow: none;
	}

	/* Логотип в оверлее (сверху) */
	#menu-checkbox:checked ~ header a[title] {
		color: #ffffff;
		font-size: 1.8rem;
		border-bottom: 2px solid rgba(255, 215, 0, 0.4);
		padding-bottom: 0.4rem;
		margin-bottom: 2rem;
	}

	#menu-checkbox:checked ~ header a[title]:hover {
		color: #ffd966;
	}

	/* Навигация в оверлее */
	#menu-checkbox:checked ~ header nav {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		width: 100%;
	}

	#menu-checkbox:checked ~ header nav a {
		color: #ffffff;
		font-size: 1.6rem;
		border-bottom: 2px solid transparent;
		padding: 0.2rem 0.8rem;
	}

	#menu-checkbox:checked ~ header nav a:hover {
		border-bottom-color: #ffd966;
		color: #ffd966;
		transform: scale(1.05);
	}

	/* Адрес в оверлее (снизу) */
	#menu-checkbox:checked ~ header address {
		display: block;
		color: rgba(255, 255, 255, 0.9);
		font-size: 0.95rem;
		margin-top: 2rem;
		padding-top: 1.8rem;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		width: 100%;
		max-width: 300px;
		text-align: center;
	}


}

/* ===== АНИМАЦИЯ ПРОЯВЛЕНИЯ С УВЕЛИЧЕНИЕМ БУКВ ===== */
@keyframes menuReveal {                                                 /* Определение ключевых кадров анимации */
    0% {                                                                /* Начальное состояние (0% времени) */
        opacity: 0;                                                     /* Полностью прозрачный */
        transform: scale(0.5);                                          /* Блок уменьшен до 50% */
    }
    100% {                                                              /* Конечное состояние (100% времени) */
        opacity: 1;                                                     /* Полностью видимый */
        transform: scale(1);                                            /* Нормальный размер блока */
    }
}

@keyframes obraz {                                                 /* Определение ключевых кадров анимации */
    0% {                                                                /* Начальное состояние (0% времени) */
        opacity: 0;                                                     /* Полностью прозрачный */
        transform: scale(0.1);                                          /* Блок уменьшен до 10% */
    }
    100% {                                                              /* Конечное состояние (100% времени) */
        opacity: 1;                                                     /* Полностью видимый */
        transform: scale(1);                                            /* Нормальный размер блока */
    }
}

/* Анимация для букв - применяем к каждому a */
nav a {
    animation: textGrow 3s ease-out forwards;                           /* Анимация роста букв (синхронизирована с блоком) */
    animation-delay: 0.1s;                                              /* Та же задержка, что и у блока */
}
@keyframes textGrow {                                                   /* Анимация роста букв */
    0% {                                                                /* Начальное состояние */
        font-size: 50%;                                                 /* Буквы в 2 раза меньше (50% от 1.8rem = 0.9rem) */
        opacity: 0;                                                     /* Буквы невидимы */
    }
    100% {                                                              /* Конечное состояние */
        font-size: 105%;                                                /* Буквы нормального размера (1.8rem) */
        opacity: 1;                                                     /* Буквы видны */
    }
}

/* ===== АДАПТИВНОСТЬ ДЛЯ РАЗНЫХ ЭКРАНОВ ===== */
@media (max-width: 550px) {                                             /* Для устройств с шириной экрана до 550px (смартфоны) */    
	.container {
		padding: 0 0.1rem;
	}		
}

address {
	font-style: normal; /* убирает курсив у address */
}

.sub-text {
    display: block;
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 0.4rem;
    font-weight: 300;
}
@media (min-width: 820px) {
	.sub-text {
		display: none;
	}
}

h1 {
	color: #fff;
	font-size: 250%;
    opacity: 0;                                                         
    transform: scale(0.5);                                              
    animation: menuReveal 1s ease-out forwards;                         
    animation-delay: 0.1s;
	text-align: center;
}
h2 {
	color: #fff;
	font-size: 230%;
    opacity: 0;                                                         
    transform: scale(0.5);                                              
    animation: menuReveal 1s ease-out forwards;                         
    animation-delay: 0.1s;
	text-align: center;	
}
strong {
	display: block;
	text-align: center;
}
h1, h2, h3, h4, h5, ul, ol, a {
	color: #fff;
	margin: 1.5rem 0;
	line-height: 1.7;
	text-shadow: 
    1px 1px 0 #013252,    
    0 1px 0 #013252,      
    1px 0 0 #013252,     	
    0 0 5px rgba(1, 156, 255, 0.1),
    0 0 10px rgba(1, 156, 255, 0.1),
    0 0 20px rgba(1, 156, 255, 0.1),
    0 0 30px rgba(203, 99, 100, 0.1);		
}
.wrapp {
	border-radius:100px/15px;
	box-shadow: 0 0 0 rgba(255, 255, 255, 0), -33px 0 30px -33px rgba(155, 178, 200, 1) inset, 33px 0 30px -33px rgba(155, 178, 200, 1) inset, 0 0 0 rgba(255,255,255,0);
	padding: 0 1rem;
}
@media (max-width: 550px) {                                             /* Для устройств с шириной экрана до 550px (смартфоны) */    
	.wrapp {
		border-radius:50px/15px;
		box-shadow: 0 0 0 rgba(255, 255, 255, 0), -22px 0 20px -22px rgba(155, 178, 200, 1) inset, 22px 0 20px -22px rgba(155, 178, 200, 1) inset, 0 0 0 rgba(255,255,255,0);
	}		
}
p, strong {
	font-weight: 400;
	line-height: 1.7;
    opacity: 0;                                                         
    transform: scale(0.5);                                              
    animation: menuReveal 2s ease-out forwards;                        
    animation-delay: 0.1s;	
	color: #4f606b;
	margin-bottom: 0.7rem;
}
.obraz {
	text-align: center;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}
@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.obraz img {
	animation: fadeInZoom 4s ease-in-out forwards;
	width: 100%;
}
/* ===== MAIN ===== */
main, section {	
	padding: 1.5rem 0;
}
/* ===== GALLERY ===== */
.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between; /* ← прижимаем к левому и правому краю */
	margin: 6rem 0 4rem 0;
	animation: menuReveal 3s ease-out forwards;                         
    animation-delay: 0.1s;
	
}
.gallery-item {
	flex: 0 1 calc(33.333% - 1.4rem); /* 3 колонки с учётом gap */
	min-width: 250px;
	max-width: 400px;
}
.gallery-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: ;
	background: #fff;
	display: block;
	transition: opacity 0.2s;
/*	outline : 1px #fff solid ;
	border: 1px #cdcdcd solid;
	box-shadow : 0 0 80px 0 rgba(190, 190, 190, 1); */
}
.gallery p { 
	text-align: left;
}
/* ===== ADAPTIVE ===== */
@media (min-width: 1400px) {
	.gallery-item {
		flex: 0 1 calc(25% - 1.5rem); /* 4 колонки */
		max-width: 350px;
	}
}
@media (max-width: 1024px) {
	.gallery-item {
		flex: 0 1 calc(33.333% - 1.4rem); /* 3 колонки */
	}
}
@media (max-width: 768px) {
	.gallery, footer {
		justify-content: center;		
	}	
	.gallery-item {
		flex: 0 1 calc(50% - 1rem); /* 2 колонки */
		text-align: center;
	}
	.gallery {
		gap: 1.5rem;
	}
}
@media (max-width: 480px) {
	.gallery-item {
		flex: 0 1 100%; /* 1 колонка */
		max-width: 100%;
	}
	.gallery {
		gap: 1.2rem;
	}
	.gallery-item img {
		margin: 0 auto;
		width: 70%;
	}	
}
#order address {
	margin: 2rem 0;
	text-align: center;
	width: 100%;
}
#order address a {
	background: #82b6fd;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	box-shadow:
	0 0 0 2px #ffffff,         
	0 0 10px rgba(0, 0, 0, 0.1),
	0 10px 25px rgba(0, 0, 0, 0.12); 
	margin: 0 0.5rem;
	display: inline-block;
}
#order address img {
	height: 30px;
	width: auto;
	margin-top: 15px;
}
#order address a:hover {
	background: #013252;
}
footer {
	background: #fff;
	box-shadow: none;
	font-size: 90%;
	margin: 3rem auto;
	max-width: 1000px;
	gap: 1.4rem;
}
footer h3:first-child {
	margin-right: auto;
	flex: 0 0 auto;
}
footer p {
	flex: 1 1 auto;
	margin: 0;
}
footer h3:last-child {
	margin-left: auto;
	flex: 0 0 auto;
}
footer h3, footer p, footer h5 {
	flex: 0 1 calc(33.333% - 1.4rem); 
	letter-spacing: 0.05em;
}
@media (max-width: 768px) {
	footer {
		text-align: center;
	}
	footer h3, footer p {
		margin: 0;
		flex: 0 0 auto;
		width: 100%;
	}
}