https://pastein.ru/t/Y0M
Загрузка данных
<!DOCTYPE html>
<html lang="ru" style="margin:0;padding:0;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фотограф Tertix & Khityaev</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
(function(){ var s = document.createElement('style'); s.textContent = `
:root{
--bg1:#050505;
--bg2:#0d0a0a;
--bg3:#1a0808;
--text:#f8fafc;
--muted:#b9b9b9;
--gold:#fcd34d;
--gold-dark:#c49a2c;
--gold-soft:rgba(252,211,77,.12);
--border:rgba(255,255,255,.1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-padding-top: 70px;}
body{
margin:0;
font-family:'Inter',sans-serif;
color:var(--text);
background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 45%,var(--bg3) 100%);
min-height:100vh;
overflow-x:hidden;
position:relative;
}
body::before{
content:'';
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
pointer-events:none;
z-index:1;
opacity:0.5;
}
::selection{background:rgba(252,211,77,0.25); color:#000;}
/* Прелоадер */
.preloader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--bg1);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
transition:opacity 0.8s ease, visibility 0.8s ease;
}
.preloader.hidden{opacity:0; visibility:hidden;}
.preloader-logo{
font-family:'Playfair Display',serif;
font-size:2.5rem;
font-weight:900;
background:linear-gradient(135deg,#ffffff 0%,#fef3c7 45%,#fcd34d 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{transform:scale(1); opacity:0.8;}
50%{transform:scale(1.05); opacity:1;}
}
/* Индикатор прокрутки */
.scroll-indicator{
position:fixed;
top:0;
left:0;
height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
z-index:9997;
transition:width 0.1s ease;
opacity:0.6;
}
/* Фон — тёмный лес */
.forest-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:110%;
background:
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 60%, rgba(5,5,5,0.95) 100%),
url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1920&q=80") center / cover no-repeat;
z-index:-2;
transition: filter 1.8s ease, opacity 1.8s ease;
filter: blur(0px) brightness(0.85);
will-change: transform, filter;
}
.forest-bg.blurred{
filter: blur(22px) brightness(0.45);
opacity:0.35;
}
/* Дождь и грозовые тучи */
.rain-container{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:0;
overflow:hidden;
}
.storm-clouds{
position:absolute;
top:-10%;
left:0;
width:200%;
height:35%;
background:
radial-gradient(ellipse at 20% 50%, rgba(15,15,25,0.85) 0%, transparent 70%),
radial-gradient(ellipse at 60% 30%, rgba(10,10,20,0.8) 0%, transparent 65%),
radial-gradient(ellipse at 80% 60%, rgba(20,20,30,0.85) 0%, transparent 70%);
filter:blur(25px);
animation: cloudsMove 70s linear infinite;
opacity:0.6;
will-change: transform;
}
@keyframes cloudsMove{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}
.lightning{
position:absolute;
inset:0;
background:rgba(255,255,255,0);
animation: lightning 18s infinite;
}
@keyframes lightning{
0%,93%,95%,97%,100%{background:rgba(255,255,255,0);}
94%{background:rgba(255,255,255,0.07);}
96%{background:rgba(255,255,255,0.03);}
}
.rain-drop{
position:absolute;
width:1px;
background:linear-gradient(to bottom, transparent, rgba(200,210,230,0.5));
animation: rainFall linear infinite;
opacity:0.35;
will-change: transform;
}
@keyframes rainFall{
0%{transform:translateY(-80px);}
100%{transform:translateY(100vh);}
}
/* Капли на стекле */
.glass-drops{
position:absolute;
inset:0;
pointer-events:none;
mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}
.glass-drop{
position:absolute;
border-radius:50%;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.15) 45%, rgba(180,200,230,0.08) 100%);
box-shadow:
inset 0 0 2px rgba(255,255,255,0.25),
0 0 1px rgba(255,255,255,0.15);
opacity:0.65;
animation: dropFlow linear infinite;
will-change: transform, opacity;
}
.glass-drop::after{
content:'';
position:absolute;
top:15%;
left:25%;
width:25%;
height:20%;
border-radius:50%;
background:radial-gradient(circle, rgba(252,211,77,0.4) 0%, transparent 70%);
filter:blur(0.5px);
}
.glass-drop.small{
width:2px;
height:2px;
animation-duration: 0s;
opacity:0.45;
}
.glass-drop.small::after{display:none;}
.glass-drop.medium{
width:5px;
height:6px;
}
.glass-drop.large{
width:9px;
height:11px;
border-radius:50% 50% 50% 50% / 35% 35% 65% 65%;
backdrop-filter: blur(1px);
}
@keyframes dropFlow{
0%{transform:translateY(0); opacity:0.75;}
85%{opacity:0.6;}
100%{transform:translateY(100vh); opacity:0;}
}
.drop-trail{
position:absolute;
width:1px;
background:linear-gradient(to bottom, rgba(255,255,255,0.25), transparent);
border-radius:1px;
opacity:0;
animation: trailFade linear infinite;
}
@keyframes trailFade{
0%{opacity:0; height:0;}
12%{opacity:0.35;}
88%{opacity:0.25;}
100%{opacity:0; height:50px;}
}
.micro-splash{
position:absolute;
width:1px;
height:1px;
border-radius:50%;
background:rgba(255,255,255,0.6);
animation: splashFade 0.6s ease-out forwards;
}
@keyframes splashFade{
0%{transform:scale(1); opacity:0.8;}
100%{transform:scale(0) translateY(-5px); opacity:0;}
}
.lightning-spark{
position:absolute;
width:2px;
height:2px;
border-radius:50%;
background:rgba(252,211,77,0.6);
box-shadow:0 0 4px rgba(252,211,77,0.8);
animation: sparkFade 1.2s ease-out forwards;
}
@keyframes sparkFade{
0%{transform:scale(1); opacity:0.8;}
100%{transform:scale(0); opacity:0;}
}
.water-drops{
position:absolute;
bottom:0;
left:0;
width:100%;
height:20%;
pointer-events:none;
background:linear-gradient(to top, rgba(255,255,255,0.035), transparent);
filter:blur(3px);
}
.font-display{font-family:'Playfair Display',serif;letter-spacing:-.01em}
.font-serif{font-family:'Cormorant Garamond',serif}
.grad-text{
background:linear-gradient(135deg,#ffffff 0%,#fef3c7 50%,#fcd34d 100%);
background-size: 200% auto;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation: softShine 8s ease-in-out infinite;
}
@keyframes softShine {
0% { background-position: 0% center; }
50% { background-position: 100% center; }
100% { background-position: 0% center; }
}
.section-divider{
width:100%;
max-width:160px;
height:1px;
margin:0 auto;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
opacity:0.7;
}
.gold-frame{
border:1px solid var(--gold);
background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(252,211,77,.04));
box-shadow:0 0 0 3px var(--gold-soft), 0 8px 30px rgba(252,211,77,.1);
position:relative;
border-radius:18px;
padding:2.2rem 1.8rem;
}
.gold-frame::before,
.gold-frame::after{
content:'';
position:absolute;
width:14px;
height:14px;
border:1.5px solid var(--gold);
pointer-events:none;
}
.gold-frame::before{top:-1px; left:-1px; border-right:none; border-bottom:none; border-radius:18px 0 0 0;}
.gold-frame::after{top:-1px; right:-1px; border-left:none; border-bottom:none; border-radius:0 18px 0 0;}
.gold-frame > .corner-bl{position:absolute; bottom:-1px; left:-1px; width:14px; height:14px; border:1.5px solid var(--gold); border-right:none; border-top:none; border-radius:0 0 0 18px; pointer-events:none;}
.gold-frame > .corner-br{position:absolute; bottom:-1px; right:-1px; width:14px; height:14px; border:1.5px solid var(--gold); border-left:none; border-top:none; border-radius:0 0 18px 0; pointer-events:none;}
.save-badge{
position:absolute;
top:-12px;
right:-12px;
background:linear-gradient(135deg,#fcd34d,#c49a2c);
color:#000;
font-weight:800;
font-size:0.9rem;
padding:.5rem 1rem;
border-radius:50px;
box-shadow:0 3px 10px rgba(252,211,77,.3);
transform:rotate(6deg);
z-index:2;
}
.reveal{
opacity:0;
transform:translateY(18px);
filter: blur(3px);
transition:all 1.2s cubic-bezier(.25,0.8,0.25,1);
}
.reveal.in{
opacity:1;
transform:translateY(0);
filter: blur(0);
}
.hero-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url("https://i.postimg.cc/4NWfb83f/Retus'-lica-i-glaz-(1).jpg") center / cover no-repeat;
z-index: -1;
transition: filter 1.8s ease, opacity 1.8s ease;
filter: blur(0px);
opacity: 1;
}
.hero-bg::after{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.65) 100%),
linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.8) 100%);
pointer-events:none;
}
.hero-bg.blurred { filter: blur(18px) brightness(0.55); opacity: 0.5; }
.hero-overlay {display:none;}
.action-btn{
font-weight:600;
background:linear-gradient(135deg,rgba(0,0,0,0.2),rgba(60,40,0,0.3));
border:1px solid transparent;
border-image: linear-gradient(135deg, #fcd34d, #c49a2c) 1;
color:var(--text) !important;
padding:9px 18px;
border-radius:10px;
backdrop-filter: blur(8px);
transition:all .35s ease;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
font-size:0.95rem;
}
.action-btn::before{
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(45deg, transparent, rgba(252,211,77,0.08), transparent);
transform:rotate(45deg) translateX(-100%);
transition:transform 0.7s ease;
}
.action-btn:hover::before{transform:rotate(45deg) translateX(100%);}
.action-btn:hover{
box-shadow:0 0 12px rgba(252,211,77,.3);
background:linear-gradient(135deg,rgba(0,0,0,0.35),rgba(70,50,0,0.45));
}
.divider{ color:var(--gold); font-size:1.1rem; line-height:1; user-select:none; margin: 0 0.4rem; opacity:0.8;}
.burger-btn{
display:none;
flex-direction:column;
gap:4px;
background:none;
border:none;
cursor:pointer;
padding:8px;
z-index:100;
}
.burger-btn span{
width:22px;
height:1.5px;
background:var(--text);
transition:all 0.3s ease;
}
.burger-btn.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px); background:var(--gold);}
.burger-btn.active span:nth-child(2){opacity:0;}
.burger-btn.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px); background:var(--gold);}
.mobile-menu{
position:fixed;
top:0;
right:-100%;
width:75%;
max-width:260px;
height:100vh;
background:rgba(5,5,5,0.98);
backdrop-filter:blur(20px);
border-left:1px solid var(--gold-soft);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:1.8rem;
transition:right 0.5s cubic-bezier(0.2,0.9,0.3,1);
z-index:99;
}
.mobile-menu.active{right:0;}
.mobile-menu a{
font-family:'Playfair Display',serif;
font-size:1.4rem;
color:var(--text);
text-decoration:none;
transition:color 0.3s ease;
}
.mobile-menu a:hover{color:var(--gold);}
@media (max-width:768px){
.burger-btn{display:flex;}
}
.feature-card{
position:relative;
overflow:hidden;
transition:all .5s ease;
background:rgba(255,255,255,.05);
border:1px solid var(--border);
backdrop-filter:blur(10px);
border-radius:18px;
padding:1.8rem 1.3rem;
text-align:center;
height:100%;
transform-style:preserve-3d;
}
.feature-card::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg, transparent, rgba(252,211,77,0.06), transparent);
transition:left 0.7s ease;
}
.feature-card:hover::before{left:100%;}
.feature-card:hover{
border-color:var(--gold);
box-shadow:0 8px 25px rgba(252,211,77,.08);
}
.feature-card .icon-wrap{
width:62px;height:62px;
margin:0 auto 1rem;
display:flex;align-items:center;justify-content:center;
color:var(--gold);
position:relative;
}
.feature-card .icon-wrap::after{
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:50%;
background:radial-gradient(circle, rgba(252,211,77,0.15) 0%, transparent 70%);
transform:scale(0);
transition:transform 0.4s ease;
}
.feature-card:hover .icon-wrap::after{transform:scale(1.4);}
.feature-card h4{
font-family:'Playfair Display',serif;
font-size:1.3rem;
font-weight:700;
margin-bottom:0.6rem;
color:var(--text);
}
.feature-card p{ color:var(--muted); line-height:1.6; font-size:0.92rem; }
.feature-card .progress-bar{
position:absolute;
bottom:0;
left:0;
height:1px;
width:0;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
transition:width 1.2s ease;
opacity:0.7;
}
.feature-card.in .progress-bar{width:100%;}
.step-card{
position:relative;
text-align:center;
padding:1.2rem 0.8rem;
transition:all 0.4s ease;
}
.step-number{
font-family:'Playfair Display',serif;
font-size:2.2rem;
font-weight:900;
background:linear-gradient(135deg, rgba(252,211,77,0.25), rgba(252,211,77,0.04));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
line-height:1;
margin-bottom:0.6rem;
transition:all 0.4s ease;
}
.step-card:hover .step-number{
background:linear-gradient(135deg,#ffffff 0%,#fef3c7 50%,#fcd34d 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
transform:scale(1.06);
}
.step-card h4{
font-family:'Playfair Display',serif;
font-size:1.1rem;
font-weight:700;
margin-bottom:0.3rem;
color:var(--text);
}
.step-card p{color:var(--muted); font-size:0.85rem; line-height:1.5;}
.stat-card{
text-align:center;
padding:1.2rem 0.8rem;
}
.stat-number{
font-family:'Playfair Display',serif;
font-size:2.6rem;
font-weight:900;
background:linear-gradient(135deg,#ffffff 0%,#fef3c7 50%,#fcd34d 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
line-height:1;
margin-bottom:0.3rem;
}
.stat-label{
color:var(--muted);
font-size:0.8rem;
text-transform:uppercase;
letter-spacing:0.1em;
}
.genre-card{
position:relative;
height:220px;
border-radius:16px;
overflow:hidden;
border:1px solid var(--border);
transition:all 0.5s ease;
cursor:pointer;
}
.genre-card:hover{
border-color:var(--gold);
box-shadow:0 10px 30px rgba(252,211,77,0.1);
}
.genre-bg{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
transform:scale(1.06);
transition:transform 0.7s ease, filter 0.7s ease;
filter:brightness(0.55);
}
.genre-card:hover .genre-bg{
transform:scale(1);
filter:brightness(0.7);
}
.genre-content{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:1.2rem;
text-align:center;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.75) 100%);
}
.genre-content h4{
font-family:'Playfair Display',serif;
font-size:1.5rem;
font-weight:700;
color:var(--text);
margin-bottom:0.3rem;
transition:color 0.3s ease;
}
.genre-card:hover .genre-content h4{color:var(--gold);}
.genre-content p{color:var(--muted); font-size:0.82rem;}
.carousel-wrap{
width:100%;
overflow:hidden;
position:relative;
border-radius:18px;
padding:12px 0;
}
.carousel-wrap::before,
.carousel-wrap::after{
content:'';
position:absolute;
top:0;
bottom:0;
width:20px;
background-image:
radial-gradient(circle, var(--gold) 0.5px, transparent 0.5px);
background-size: 7px 14px;
opacity:0.2;
pointer-events:none;
z-index:2;
}
.carousel-wrap::before{left:0;}
.carousel-wrap::after{right:0;}
.carousel-track{
display:flex;
transition:transform 1s cubic-bezier(0.2,0.9,0.3,1);
}
.carousel-slide{
min-width:100%;
padding:0 30px;
display:flex;
justify-content:center;
align-items:center;
position:relative;
transition:filter 0.5s ease;
}
.carousel-slide.active{
filter:drop-shadow(0 0 20px rgba(252,211,77,0.12));
}
.photo-frame{
width:100%;
max-width:850px;
max-height:78vh;
background:transparent;
overflow:hidden;
margin:0 auto;
display:flex;
justify-content:center;
align-items:center;
position:relative;
}
.photo-frame .watermark{
position:absolute;
bottom:16px;
right:16px;
font-family:'Playfair Display',serif;
font-size:0.75rem;
color:rgba(252,211,77,0.25);
z-index:2;
pointer-events:none;
letter-spacing:0.15em;
font-weight:300;
}
.photo-frame img{
max-width:100%;
max-height:70vh;
width:auto;
height:auto;
object-fit:contain;
object-position:center;
background:transparent;
loading="lazy";
referrerpolicy="no-referrer";
border-radius:12px;
transition: transform 0.7s ease, opacity 1.2s ease, filter 1.5s ease;
opacity:0;
filter:brightness(0) contrast(0.3) sepia(0.2);
user-select:none;
-webkit-user-drag:none;
}
.photo-frame img.loaded{
opacity:1;
filter:brightness(1) contrast(1) sepia(0);
}
.photo-frame img:hover{filter:brightness(1.03) contrast(1.02);}
.elegant-frame:hover img{ transform: scale(1.008); }
.slide-caption{
position:absolute;
bottom:12px;
left:50%;
transform:translateX(-50%) translateY(10px);
background:rgba(0,0,0,0.6);
backdrop-filter:blur(8px);
border:1px solid rgba(252,211,77,0.1);
padding:0.35rem 1rem;
border-radius:50px;
color:rgba(252,211,77,0.9);
font-family:'Cormorant Garamond',serif;
font-size:0.95rem;
font-weight:300;
opacity:0;
transition:all 0.5s ease;
pointer-events:none;
}
.carousel-slide.active .slide-caption{
opacity:1;
transform:translateX(-50%) translateY(0);
}
.elegant-frame{
padding: 8px;
background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(252,211,77,0.02));
border: 1px solid rgba(252,211,77,0.6);
border-radius: 18px;
box-shadow: 0 0 0 2px var(--gold-soft), 0 6px 25px rgba(252,211,77,0.08);
transition: all 0.45s ease;
position:relative;
}
.elegant-frame::before{
content:'';
position:absolute;
inset:-1px;
border-radius:20px;
background:linear-gradient(45deg, transparent, rgba(252,211,77,0.18), transparent);
z-index:-1;
opacity:0;
transition:opacity 0.45s ease;
filter:blur(10px);
}
.elegant-frame:hover::before{opacity:1;}
.elegant-frame:hover{
box-shadow: 0 0 0 3px var(--gold-soft), 0 10px 35px rgba(252,211,77,0.15);
}
.carousel-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;height:44px;
border-radius:50%;
background:rgba(0,0,0,.45);
backdrop-filter:blur(8px);
border:1px solid var(--border);
color:var(--text);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .3s ease;
z-index:5;
}
.carousel-btn:hover{ background:var(--gold); color:#000; border-color:var(--gold); }
.carousel-btn.prev{ left:10px; }
.carousel-btn.next{ right:10px; }
.carousel-dots{ display:flex; justify-content:center; gap:9px; margin-top:14px; }
.dot{
width:8px;height:8px;
border-radius:50%;
background:rgba(255,255,255,.18);
transition:all .3s ease;
cursor:pointer;
}
.dot.active{background:var(--gold);transform:scale(1.25);box-shadow:0 0 8px rgba(252,211,77,.4);}
.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,0.96);
display:flex;
align-items:center;
justify-content:center;
z-index:9990;
opacity:0;
visibility:hidden;
transition:all 0.4s ease;
padding:1.5rem;
}
.lightbox.active{opacity:1; visibility:visible;}
.lightbox img{
max-width:92%;
max-height:88vh;
border-radius:12px;
border:1px solid rgba(252,211,77,0.15);
box-shadow:0 0 40px rgba(252,211,77,0.12);
transform:scale(0.92);
transition:transform 0.4s ease;
}
.lightbox.active img{transform:scale(1);}
.lightbox-close{
position:absolute;
top:1.5rem;
right:1.5rem;
width:44px;
height:44px;
border-radius:50%;
background:rgba(255,255,255,0.08);
border:1px solid var(--border);
color:var(--text);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.3s ease;
}
.lightbox-close:hover{background:var(--gold); color:#000;}
.best-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
gap:0.7rem;
}
.best-item{
position:relative;
aspect-ratio:3/4;
border-radius:12px;
overflow:hidden;
border:1px solid var(--border);
transition:all 0.45s ease;
cursor:pointer;
}
.best-item:hover{
border-color:rgba(252,211,77,0.5);
box-shadow:0 8px 25px rgba(252,211,77,0.1);
}
.best-item img{
width:100%;
height:100%;
object-fit:cover;
transition:transform 0.7s ease, filter 1.2s ease;
filter:brightness(0.75);
user-select:none;
-webkit-user-drag:none;
}
.best-item img.loaded{filter:brightness(0.85);}
.best-item:hover img{
transform:scale(1.05);
filter:brightness(1) sepia(0.08);
}
.review-card{
background:rgba(255,255,255,0.035);
border:1px solid var(--border);
border-radius:16px;
padding:1.6rem;
height:100%;
position:relative;
transition:all 0.45s ease;
}
.review-card:hover{
border-color:rgba(252,211,77,0.2);
box-shadow:0 6px 22px rgba(252,211,77,0.06);
}
.review-quote{
font-family:'Playfair Display',serif;
font-size:2.5rem;
color:var(--gold-soft);
line-height:1;
margin-bottom:-0.6rem;
}
.review-text{
color:var(--text);
font-style:italic;
line-height:1.6;
margin-bottom:1rem;
font-family:'Cormorant Garamond',serif;
font-size:1.1rem;
}
.review-author{display:flex; align-items:center; gap:0.7rem;}
.review-avatar{
width:40px;
height:40px;
border-radius:50%;
background:linear-gradient(135deg, var(--gold-soft), rgba(255,255,255,0.04));
display:flex;
align-items:center;
justify-content:center;
font-family:'Playfair Display',serif;
font-weight:700;
color:var(--gold);
border:1px solid var(--gold-soft);
font-size:0.85rem;
}
.review-name{font-weight:600; color:var(--text); font-size:0.9rem;}
.review-role{font-size:0.78rem; color:var(--muted);}
.price-card{
background:rgba(255,255,255,.05);
backdrop-filter:blur(10px);
border-radius:16px;
padding:1.6rem;
height:100%;
border:1px solid var(--border);
transition: all 0.45s ease;
position:relative;
overflow:hidden;
transform-style:preserve-3d;
}
.price-card::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:2px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
transform:scaleX(0);
transition:transform 0.45s ease;
opacity:0.7;
}
.price-card:hover::before{transform:scaleX(1);}
.price-card:hover{
box-shadow: 0 6px 22px rgba(252,211,77,.1);
}
.price-card.popular{
border-color:rgba(252,211,77,0.6);
box-shadow:0 6px 22px rgba(252,211,77,.1);
}
.price-card .corner-tl,
.price-card .corner-tr,
.price-card .corner-bl,
.price-card .corner-br{
position:absolute;
width:11px;
height:11px;
border:1.5px solid var(--gold);
opacity:0;
transition:opacity 0.3s ease;
pointer-events:none;
}
.price-card:hover .corner-tl,
.price-card:hover .corner-tr,
.price-card:hover .corner-bl,
.price-card:hover .corner-br,
.price-card.popular .corner-tl,
.price-card.popular .corner-tr,
.price-card.popular .corner-bl,
.price-card.popular .corner-br{opacity:0.85;}
.price-card .corner-tl{top:-1px; left:-1px; border-right:none; border-bottom:none; border-radius:16px 0 0 0;}
.price-card .corner-tr{top:-1px; right:-1px; border-left:none; border-bottom:none; border-radius:0 16px 0 0;}
.price-card .corner-bl{bottom:-1px; left:-1px; border-right:none; border-top:none; border-radius:0 0 0 16px;}
.price-card .corner-br{bottom:-1px; right:-1px; border-left:none; border-top:none; border-radius:0 0 16px 0;}
.price-card ul li{
position:relative;
padding-bottom:0.35rem;
border-bottom:1px solid transparent;
transition:border-color 0.35s ease;
font-size:0.88rem;
}
.price-card:hover ul li{border-color:rgba(252,211,77,0.08);}
.faq-item{
border-bottom:1px solid var(--border);
transition:border-color 0.3s ease;
}
.faq-item:hover{border-color:rgba(252,211,77,0.15);}
.faq-question{
width:100%;
padding:1rem 0;
background:none;
border:none;
display:flex;
align-items:center;
justify-content:space-between;
text-align:left;
font-family:'Playfair Display',serif;
font-size:1.05rem;
font-weight:600;
color:var(--text);
cursor:pointer;
transition:color 0.3s ease;
}
.faq-question:hover{color:var(--gold);}
.faq-icon{
width:26px;
height:26px;
border-radius:50%;
background:var(--gold-soft);
display:flex;
align-items:center;
justify-content:center;
color:var(--gold);
font-size:1rem;
transition:transform 0.3s ease;
flex-shrink:0;
margin-left:0.7rem;
font-weight:300;
}
.faq-item.active .faq-icon{transform:rotate(45deg);}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.45s ease, padding 0.45s ease;
color:var(--muted);
line-height:1.7;
font-size:0.92rem;
}
.faq-item.active .faq-answer{
max-height:280px;
padding-bottom:1rem;
}
.equipment-list{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
gap:0.7rem;
}
.equipment-item{
display:flex;
align-items:center;
gap:0.7rem;
padding:0.8rem;
background:rgba(255,255,255,0.025);
border-radius:10px;
border:1px solid var(--border);
transition:all 0.35s ease;
}
.equipment-item:hover{
border-color:rgba(252,211,77,0.15);
background:rgba(252,211,77,0.025);
transform:translateX(3px);
}
.equipment-icon{
width:34px;
height:34px;
border-radius:9px;
background:var(--gold-soft);
display:flex;
align-items:center;
justify-content:center;
color:var(--gold);
flex-shrink:0;
transition:all 0.35s ease;
}
.equipment-item:hover .equipment-icon{
transform:scale(1.08);
box-shadow:0 0 10px rgba(252,211,77,0.2);
}
.equipment-name{font-weight:500; color:var(--text); font-size:0.9rem;}
.equipment-desc{font-size:0.78rem; color:var(--muted);}
.quote-block{
text-align:center;
padding:2rem 0.8rem;
position:relative;
}
.quote-text{
font-family:'Cormorant Garamond',serif;
font-size:1.45rem;
font-style:italic;
color:var(--text);
max-width:600px;
margin:0 auto;
line-height:1.4;
transition:opacity 0.8s ease, transform 0.8s ease;
}
.quote-author{
margin-top:0.6rem;
color:var(--gold);
font-size:0.8rem;
text-transform:uppercase;
letter-spacing:0.2em;
transition:opacity 0.8s ease, transform 0.8s ease;
opacity:0.85;
}
.philosophy-block{
padding:2.2rem 1.8rem;
border-radius:18px;
background:linear-gradient(135deg, rgba(252,211,77,0.04), rgba(255,255,255,0.02));
border:1px solid rgba(252,211,77,0.15);
position:relative;
overflow:hidden;
}
.philosophy-drop{
font-family:'Playfair Display',serif;
font-size:6.5rem;
font-weight:900;
line-height:0.8;
float:left;
margin-right:0.8rem;
margin-top:-0.4rem;
background:linear-gradient(135deg,#ffffff 0%,#fef3c7 50%,#fcd34d 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
opacity:0.75;
}
.philosophy-text{
font-family:'Cormorant Garamond',serif;
font-size:1.2rem;
line-height:1.65;
color:var(--text);
}
.signature{
font-family:'Cormorant Garamond',serif;
font-size:1.7rem;
font-style:italic;
color:var(--gold);
text-align:right;
margin-top:0.8rem;
opacity:0.75;
}
.gift-card{
background:linear-gradient(135deg, rgba(252,211,77,0.05), rgba(255,255,255,0.02));
border:1px solid rgba(252,211,77,0.5);
border-radius:18px;
padding:2.2rem;
text-align:center;
position:relative;
overflow:hidden;
}
.order-info{
margin-top:2rem;
padding:1.5rem;
border-radius:16px;
background:rgba(255,255,255,.035);
border:1px solid rgba(252,211,77,.15);
text-align:center;
position:relative;
}
.order-info::before{
content:'';
position:absolute;
inset:0;
border-radius:16px;
background:radial-gradient(circle at 50% 0%, rgba(252,211,77,0.08), transparent 60%);
pointer-events:none;
}
.fixed-contact-btn{
position:fixed;
bottom:1.2rem;
right:1.2rem;
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#fcd34d,#c49a2c);
color:#000;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 3px 18px rgba(252,211,77,0.35);
z-index:100;
transform:scale(0);
transition:transform 0.35s cubic-bezier(0.2,0.9,0.3,1), box-shadow 0.35s ease;
cursor:pointer;
text-decoration:none;
}
.fixed-contact-btn.show{transform:scale(1);}
.fixed-contact-btn:hover{
box-shadow:0 5px 25px rgba(252,211,77,0.5);
transform:scale(1.06);
}
.scroll-top-btn{
position:fixed;
bottom:1.2rem;
left:1.2rem;
width:42px;
height:42px;
border-radius:50%;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(10px);
border:1px solid rgba(252,211,77,0.15);
color:var(--gold);
display:flex;
align-items:center;
justify-content:center;
z-index:100;
opacity:0;
visibility:hidden;
transition:all 0.35s ease;
cursor:pointer;
}
.scroll-top-btn.show{opacity:1; visibility:visible;}
.scroll-top-btn:hover{
background:var(--gold);
color:#000;
transform:translateY(-2px);
}
.tg-icon{
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;
border-radius:50%;
background:rgba(255,255,255,.07);
color:var(--muted);
transition:all .3s ease;
text-decoration:none;
cursor:pointer;
}
.tg-icon:hover{ color:var(--gold); background:rgba(252,211,77,.1); transform:scale(1.06); box-shadow:0 0 10px rgba(252,211,77,.2); }
.nav-link{
transition:all .25s ease;
text-decoration: none;
color: inherit;
position: relative;
cursor:pointer;
font-size:0.9rem;
}
.nav-link::after{
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
transition: width 0.35s ease;
}
.nav-link:hover, .nav-link.active{color:var(--gold);}
.nav-link:hover::after, .nav-link.active::after{ width: 100%; }
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(252,211,77,.25);border-radius:3px;}
@media (max-width:640px){
.stat-number{font-size:2rem;}
.quote-text{font-size:1.15rem;}
.genre-card{height:190px;}
.fixed-contact-btn{width:48px; height:48px; bottom:0.9rem; right:0.9rem;}
.scroll-top-btn{bottom:0.9rem; left:0.9rem;}
.philosophy-drop{font-size:4.5rem;}
}
`; document.head.appendChild(s); })();
</script>
</head>
<body>
<div class="preloader" id="preloader"><div class="preloader-logo">T & K</div></div>
<div class="scroll-indicator" id="scrollIndicator"></div>
<div class="forest-bg" id="forestBg"></div>
<div class="rain-container" id="rainContainer">
<div class="storm-clouds" id="stormClouds"></div>
<div class="lightning" id="lightning"></div>
<div class="glass-drops" id="glassDrops"></div>
<div class="water-drops"></div>
</div>
<div class="hero-bg" id="heroBg"><div class="hero-overlay"></div></div>
<div class="lightbox" id="lightbox">
<button class="lightbox-close" id="lightboxClose">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
<img src="" alt="Увеличенное фото" id="lightboxImg">
</div>
<header class="fixed top-0 left-0 right-0 z-50 px-5 py-3 flex items-center justify-between" style="background:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,0));backdrop-filter:blur(8px);border-bottom: 1px solid transparent;transition: all 0.5s ease;">
<div class="flex items-center gap-3">
<a href="https://t.me/BopoH_B_Hebe" target="_blank" class="tg-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 2L11 13"></path>
<path d="M22 2l-7 20-4-9-9-4 20-7z"></path>
</svg>
</a>
</div>
<nav class="hidden md:flex items-center gap-5 text-sm" style="color:var(--muted)">
<a href="#about" class="nav-link">О нас</a>
<a href="#process" class="nav-link">Процесс</a>
<a href="#features" class="nav-link">Преимущества</a>
<a href="#gallery" class="nav-link">Работы</a>
<a href="#prices" class="nav-link">Цены</a>
<a href="#faq" class="nav-link">FAQ</a>
</nav>
<button class="burger-btn" id="burgerBtn"><span></span><span></span><span></span></button>
</header>
<div class="mobile-menu" id="mobileMenu">
<a href="#about" class="mobile-link">О нас</a>
<a href="#process" class="mobile-link">Процесс</a>
<a href="#features" class="mobile-link">Преимущества</a>
<a href="#gallery" class="mobile-link">Работы</a>
<a href="#prices" class="mobile-link">Цены</a>
<a href="#faq" class="mobile-link">FAQ</a>
</div>
<section class="min-h-[82vh] flex flex-col items-center justify-center px-6 pt-24 pb-8 text-center relative z-10">
<p class="text-sm tracking-[0.3em] uppercase mb-4 reveal" style="color:var(--gold);animation-delay: 0.1s;">Надежно & Качественно</p>
<h1 class="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold grad-text leading-[1.05] max-w-4xl reveal" style="animation-delay: 0.3s;">Запечатлим каждое<br>мгновение</h1>
<div class="mt-7 md:mt-10">
<h2 class="font-display text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black grad-text leading-none reveal" style="animation-delay: 0.5s;">Tertix <span class="font-serif italic font-normal">&</span> Khityaev</h2>
<div class="mt-3 flex items-center justify-center gap-3 flex-wrap reveal" style="animation-delay: 0.7s;">
<a href="tel:+79127511376" class="text-base md:text-lg font-medium nav-link" style="color:var(--text);text-decoration:none">+7 (912) 751-13-76</a>
<span style="color:var(--gold); opacity:0.8;">•</span>
<a href="#prices" class="text-xs font-medium nav-link" style="color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.15em">Цены</a>
</div>
<div class="mt-5 flex flex-col sm:flex-row flex-wrap items-center justify-center gap-3 sm:gap-2 reveal" style="animation-delay: 0.9s;">
<a href="#gallery" class="action-btn w-full sm:w-auto text-center magnetic-btn">Смотреть работы</a>
<span class="divider hidden sm:inline">|</span>
<a href="https://profi.ru/profile/TerentyevTA/" target="_blank" class="action-btn w-full sm:w-auto text-center magnetic-btn">Связаться в Profi.ru</a>
<span class="divider hidden sm:inline">|</span>
<a href="#prices" class="action-btn w-full sm:w-auto text-center magnetic-btn">Выбрать тариф</a>
</div>
</div>
</section>
<div class="section-divider reveal"></div>
<section id="about" class="py-10 px-6 max-w-4xl mx-auto reveal relative z-10">
<p class="text-sm tracking-[0.25em] uppercase mb-3 text-center" style="color:var(--gold)">О нас</p>
<p class="font-serif text-xl md:text-2xl leading-relaxed text-center" style="color:var(--text)">Мы — <strong>Тихон и Женя</strong>, ребята с большим опытом создания классных и запоминающихся фотографий с любых мероприятий, праздников и историй из Вашей жизни.</p>
<p class="mt-3 text-base md:text-lg leading-relaxed text-center" style="color:var(--muted)">Почему выбирают нас? <strong class="font-display" style="color:var(--text)">Потому что мы работаем вдвоем.</strong></p>
<div class="gold-frame rounded-2xl p-6 md:p-8 mt-7 text-center">
<span class="corner-bl"></span><span class="corner-br"></span>
<div class="save-badge">Экономия 100%</div>
<p class="font-display text-xl md:text-2xl font-bold" style="color:var(--text)">Во время съемки всегда работают<br class="hidden sm:block"><span style="color:var(--gold)">два фотографа</span>, а стоимость<br class="hidden sm:block">остается как за одного!</p>
</div>
<p class="mt-7 text-base md:text-lg leading-relaxed text-center" style="color:var(--muted)">Пока один из нас занимается основными кадрами и создает эстетику, которую Вы будете пересматривать не один год, второй ловит эмоции, неожиданные моменты и детали, которые легко пропустить.</p>
<p class="mt-3 font-serif text-xl md:text-2xl text-center leading-snug" style="color:var(--text)">Как итог — у вас получаются не просто памятные фото,<br>а <em>незабываемая история «того самого» дня.</em></p>
<p class="mt-7 text-center font-display text-lg" style="color:var(--gold)">Будем рады познакомиться с Вами и обсудить любые идеи для съемки!</p>
<div class="signature">— Тихон & Женя</div>
</section>
<div class="section-divider reveal"></div>
<section class="py-8 px-6 relative z-10">
<div class="max-w-4xl mx-auto philosophy-block reveal">
<span class="philosophy-drop">Ф</span>
<p class="philosophy-text">отография для нас — это не просто нажатие на кнопку камеры. Это способ остановить время, сохранить чувство момента, ту самую атмосферу, которую словами не передашь. Каждый кадр мы создаем с душой, понимая, что через годы именно эти фотографии будут возвращать вас в самые счастливые дни вашей жизни.</p>
</div>
</section>
<div class="quote-block reveal relative z-10" id="quoteBlock">
<p class="quote-text" id="quoteText">«Фотография — это история, которую я не могу рассказать словами»</p>
<p class="quote-author" id="quoteAuthor">— Девид Дьюбери</p>
</div>
<div class="section-divider reveal"></div>
<section id="process" class="py-10 px-6 relative z-10">
<div class="max-w-6xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-3 text-center reveal" style="color:var(--gold)">Процесс</p>
<h3 class="font-display text-2xl md:text-3xl font-bold text-center grad-text reveal mb-8">Как мы работаем</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
<div class="step-card reveal"><div class="step-number">01</div><h4>Заявка</h4><p>Оставляете заявку любым удобным способом — мы сразу связываемся с вами</p></div>
<div class="step-card reveal"><div class="step-number">02</div><h4>Обсуждение</h4><p>Детально обсуждаем идеи, локации, стиль и все ваши пожелания к съемке</p></div>
<div class="step-card reveal"><div class="step-number">03</div><h4>Съемка</h4><p>Два фотографа работают одновременно, ловя каждый важный момент</p></div>
<div class="step-card reveal"><div class="step-number">04</div><h4>Результат</h4><p>Уже через 2–3 дня вы получаете все обработанные фото и исходники</p></div>
</div>
</div>
</section>
<div class="section-divider reveal"></div>
<section id="features" class="py-10 px-6 relative z-10">
<div class="max-w-7xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-3 text-center reveal" style="color:var(--gold)">Почему мы</p>
<h3 class="font-display text-2xl md:text-3xl font-bold text-center grad-text reveal mb-8">Наши преимущества</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="feature-card reveal"><div class="progress-bar"></div><div class="icon-wrap"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14,2 14,8 20,8"></polyline></svg></div><h4>2 по цене 1</h4><p>Два фотографа на съемке — вдвое больше ракурсов, деталей и живых эмоций.</p></div>
<div class="feature-card reveal"><div class="progress-bar"></div><div class="icon-wrap"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"></circle><polyline points="12,6 12,12 16,14"></polyline></svg></div><h4>Готовность за 2–3 дня</h4><p>Обрабатываем фото быстро и качественно — вы получаете результат уже на следующей неделе.</p></div>
<div class="feature-card reveal"><div class="progress-bar"></div><div class="icon-wrap"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></div><h4>Разумные цены</h4><p>Пока многие просят 5–10 тысяч за час и выдают фото как с телефона, мы делаем вдвое дешевле.</p></div>
<div class="feature-card reveal"><div class="progress-bar"></div><div class="icon-wrap"><svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg></div><h4>Полный пакет</h4><p>Все кадры проходят авторскую обработку, плюс вы получаете абсолютно все исходные снимки.</p></div>
</div>
</div>
</section>
<section class="py-8 px-6 relative z-10">
<div class="max-w-5xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
<div class="stat-card reveal"><div class="stat-number" data-target="200" data-suffix="+">0</div><div class="stat-label">Счастливых клиентов</div></div>
<div class="stat-card reveal"><div class="stat-number" data-target="5" data-suffix=" лет">0</div><div class="stat-label">Опыта работы</div></div>
<div class="stat-card reveal"><div class="stat-number" data-target="10000" data-suffix="+">0</div><div class="stat-label">Обработанных кадров</div></div>
<div class="stat-card reveal"><div class="stat-number" data-target="100" data-suffix="%">0</div><div class="stat-label">Довольных заказчиков</div></div>
</div>
</div>
</section>
<div class="section-divider reveal"></div>
<section class="py-10 px-6 relative z-10">
<div class="max-w-7xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-3 text-center reveal" style="color:var(--gold)">Направления</p>
<h3 class="font-display text-2xl md:text-3xl font-bold text-center grad-text reveal mb-8">Жанры съёмок</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="genre-card reveal"><div class="genre-bg" style="background-image:url('https://i.postimg.cc/ZYyL6y1H/Chat-GPT-Image-5-iul-2026-g-22-40-17-(1)-(1)-(1).jpg')"></div><div class="genre-content"><h4>Портрет</h4><p>Индивидуальные и семейные портреты в студии и на природе</p></div></div>
<div class="genre-card reveal"><div class="genre-bg" style="background-image:url('https://i.postimg.cc/kXQFpPXr/Chat-GPT-Image-5-iul-2026-g-22-33-16-(1).jpg')"></div><div class="genre-content"><h4>Мероприятия</h4><p>Свадьбы, дни рождения, корпоративы и другие важные события</p></div></div>
<div class="genre-card reveal"><div class="genre-bg" style="background-image:url('https://i.postimg.cc/SN67vbQM/Atmosfernaa-reklama-(1).jpg')"></div><div class="genre-content"><h4>Реклама</h4><p>Коммерческая съемка для бизнеса, каталогов и социальных сетей</p></div></div>
<div class="genre-card reveal"><div class="genre-bg" style="background-image:url('https://i.postimg.cc/63hPCmhG/Studijnyj-portret-s-morem.jpg')"></div><div class="genre-content"><h4>Творческие проекты</h4><p>Арт-съемки, концептуальные проекты и реализация ваших идей</p></div></div>
</div>
</div>
</section>
<div class="section-divider reveal"></div>
<section id="gallery" class="py-10 px-6 relative z-10">
<div class="max-w-6xl mx-auto mb-7 text-center reveal">
<p class="text-sm tracking-[0.25em] uppercase mb-3" style="color:var(--gold)">Портфолио</p>
<h3 class="font-display text-2xl md:text-3xl font-bold grad-text">Наши работы</h3>
<p class="mt-2 text-xs" style="color:var(--muted)">Свайпайте влево/вправо или используйте стрелки для просмотра</p>
</div>
<div class="max-w-6xl mx-auto">
<div class="carousel-wrap" id="carousel">
<button class="carousel-btn prev" id="prevBtn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="15 18 9 12 15 6"></polyline></svg></button>
<div class="carousel-track" id="carouselTrack">
<div class="carousel-slide active"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/4NWfb83f/Retus'-lica-i-glaz-(1).jpg" alt="Ретушь портрета"></div></div><div class="slide-caption">Портретная съемка</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/0Qv3Ms7s/Detal'naa-retus'-foto-(1).jpg" alt="Детальная обработка"></div></div><div class="slide-caption">Детальная ретушь</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/63hPCmhG/Studijnyj-portret-s-morem.jpg" alt="Студийный портрет"></div></div><div class="slide-caption">Студийный портрет</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/Y9xPQsxp/Studijnyj-portret-s-morem-(2)-(1).jpg" alt="Творческий портрет"></div></div><div class="slide-caption">Творческий портрет</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/VNt8XQg3/11000-4.png" alt="Обработка фото"></div></div><div class="slide-caption">Обработка фото</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/6QZXCJcF/A2.png" alt="Цветокоррекция"></div></div><div class="slide-caption">Цветокоррекция</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/xdm2LD5h/A4.png" alt="Художественная обработка"></div></div><div class="slide-caption">Художественная обработка</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/52TJHN5W/A9.png" alt="Авторский стиль"></div></div><div class="slide-caption">Авторский стиль</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/ZYyL6y1H/Chat-GPT-Image-5-iul-2026-g-22-40-17-(1)-(1)-(1).jpg" alt="Атмосферный портрет"></div></div><div class="slide-caption">Атмосферный портрет</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/kXQFpPXr/Chat-GPT-Image-5-iul-2026-g-22-33-16-(1).jpg" alt="Модельная съемка"></div></div><div class="slide-caption">Модельная съемка</div></div>
<div class="carousel-slide"><div class="photo-frame"><div class="elegant-frame"><span class="watermark">T & K</span><img src="https://i.postimg.cc/SN67vbQM/Atmosfernaa-reklama-(1).jpg" alt="Коммерческая съемка"></div></div><div class="slide-caption">Коммерческая съемка</div></div>
</div>
<button class="carousel-btn next" id="nextBtn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="9 18 15 12 9 6"></polyline></svg></button>
</div>
<div class="carousel-dots" id="carouselDots"></div>
</div>
</section>
<section class="py-8 px-6 relative z-10">
<div class="max-w-6xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-3 text-center reveal" style="color:var(--gold)">Избранное</p>
<h3 class="font-display text-2xl md:text-3xl font-bold text-center grad-text reveal mb-8">Лучшие кадры</h3>
<div class="best-grid reveal">
<div class="best-item lightbox-trigger" data-src="https://i.postimg.cc/4NWfb83f/Retus'-lica-i-glaz-(1).jpg"><img src="https://i.postimg.cc/4NWfb83f/Retus'-lica-i-glaz-(1).jpg" alt="Кадр 1" loading="lazy"></div>
<div class="best-item lightbox-trigger" data-src="https://i.postimg.cc/kXQFpPXr/Chat-GPT-Image-5-iul-2026-g-22-33-16-(1).jpg"><img src="https://i.postimg.cc/kXQFpPXr/Chat-GPT-Image-5-iul-2026-g-22-33-16-(1).jpg" alt="Кадр 2" loading="lazy"></div>
<div class="best-item lightbox-trigger" data-src="https://i.postimg.cc/SN67vbQM/Atmosfernaa-reklama-(1).jpg"><img src="https://i.postimg.cc/SN67vbQM/Atmosfernaa-reklama-(1).jpg" alt="Кадр 3" loading="lazy"></div>
<div class="best-item lightbox-trigger" data-src="https://i.postimg.cc/63hPCmhG/Studijnyj-portret-s-morem.jpg"><img src="https://i.postimg.cc/63hPCmhG/Studijnyj-portret-s-morem.jpg" alt="Кадр 4" loading="lazy"></div>
<div class="best-item lightbox-trigger" data-src="https://i.postimg.cc/ZYyL6y1H/Chat-GPT-Image-5-iul-2026-g-22-40-17-(1)-(1)-(1).jpg"><img src="https://i.postimg.cc/ZYyL6y1H/Chat-GPT-Image-5-iul-2026-g-22-40-17-(1)-(1)-(1).jpg" alt="Кадр 5" loading="lazy"></div>
<div class="best-item lightbox-trigger" data-src="https://i.postimg.cc/Y9xPQsxp/Studijnyj-portret-s-morem-(2)-(1).jpg"><img src="https://i.postimg.cc/Y9xPQsxp/Studijnyj-portret-s-morem-(2)-(1).jpg" alt="Кадр 6" loading="lazy"></div>
</div>
</div>
</section>
<div class="section-divider reveal"></div>
<section class="py-10 px-6 relative z-10">
<div class="max-w-6xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-3 text-center reveal" style="color:var(--gold)">Отзывы</p>
<h3 class="font-display text-2xl md:text-3xl font-bold text-center grad-text reveal mb-8">Что говорят клиенты</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="review-card reveal"><div class="review-quote">"</div><p class="review-text">Спасибо ребятам за потрясающие фотографии с нашей свадьбы! Два фотографа — это действительно находка, поймали абсолютно все важные моменты, которые мы даже не видели сами.</p><div class="review-author"><div class="review-avatar">АМ</div><div><div class="review-name">Анна и Михаил</div><div class="review-role">Свадебная съемка</div></div></div></div>
<div class="review-card reveal"><div class="review-quote">"</div><p class="review-text">Заказывали корпоративную съемку — результат превзошел все ожидания. Качество обработки на высшем уровне, все фото получили уже через 2 дня. Рекомендую всем!</p><div class="review-author"><div class="review-avatar">ЕК</div><div><div class="review-name">Елена К.</div><div class="review-role">Корпоратив</div></div></div></div>
<div class="review-card reveal"><div class="review-quote">"</div><p class="review-text">Уже не первый раз обращаемся — всегда на высоте. Индивидуальный подход, творческие идеи и очень приятные в общении люди. Цены при этом более чем адекватные.</p><div class="review-author"><div class="review-avatar">ДС</div><div><div class="review-name">Дмитрий С.</div><div class="review-role">Семейная съемка</div></div></div></div>
</div>
</div>
</section>
<div class="section-divider reveal"></div>
<section id="prices" class="py-12 px-6 relative z-10">
<div class="max-w-6xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-3 text-center reveal" style="color:var(--gold)">Стоимость</p>
<h3 class="font-display text-2xl md:text-3xl font-bold text-center grad-text reveal">Тарифы и услуги</h3>
<p class="mt-2 text-center reveal text-xs" style="color:var(--muted)">Информация по пакетам услуг</p>
<div class="mt-9 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="price-card reveal"><span class="corner-tl"></span><span class="corner-tr"></span><span class="corner-bl"></span><span class="corner-br"></span><p class="text-xs tracking-[0.2em] uppercase mb-2" style="color:var(--gold)">Легкий старт</p><div class="font-display text-4xl font-black my-2 grad-text counter" data-target="1" data-suffix=" час">0</div><div class="font-serif text-2xl font-semibold mb-4" style="color:var(--text)"><span class="counter" data-target="3700">0</span> ₽</div><ul class="text-left space-y-2 text-xs mb-6" style="color:var(--muted)"><li>✓ 2 фотографа на месте</li><li>✓ от 15 обработанных фото</li><li>✓ все исходные снимки</li><li>✓ готово за 2–3 дня</li></ul></div>
<div class="price-card reveal popular"><span class="corner-tl"></span><span class="corner-tr"></span><span class="corner-bl"></span><span class="corner-br"></span><div class="inline-block px-3 py-1 rounded-full text-xs font-semibold mb-2" style="background:var(--gold-soft);color:var(--gold)">Популярный</div><p class="text-xs tracking-[0.2em] uppercase mb-2" style="color:var(--gold)">Стандарт</p><div class="font-display text-4xl font-black my-2 grad-text counter" data-target="2" data-suffix=" часа">0</div><div class="font-serif text-2xl font-semibold mb-4" style="color:var(--text)"><span class="counter" data-target="7200">0</span> ₽</div><ul class="text-left space-y-2 text-xs mb-6" style="color:var(--muted)"><li>✓ 2 фотографа на месте</li><li>✓ от 30 обработанных фото</li><li>✓ все исходные снимки</li><li>✓ готово за 2–3 дня</li></ul></div>
<div class="price-card reveal"><span class="corner-tl"></span><span class="corner-tr"></span><span class="corner-bl"></span><span class="corner-br"></span><p class="text-xs tracking-[0.2em] uppercase mb-2" style="color:var(--gold)">Премиум</p><div class="font-display text-4xl font-black my-2 grad-text counter" data-target="3" data-suffix=" часа">0</div><div class="font-serif text-2xl font-semibold mb-4" style="color:var(--text)"><span class="counter" data-target="10500">0</span> ₽</div><ul class="text-left space-y-2 text-xs mb-6" style="color:var(--muted)"><li>✓ 2 фотографа на месте</li><li>✓ от 40 обработанных фото</li><li>✓ все исходные снимки</li><li>✓ готово за 2–3 дня</li></ul></div>
</div>
<div class="order-info reveal">
<p class="font-serif text-lg md:text-xl" style="color:var(--text)">Любой тариф можно <span style="color:var(--gold)">дополнить</span> под ваши нужды</p>
<p class="mt-2 text-xs" style="color:var(--muted)">Дополнительные часы — 3 000 ₽ / час · Печать фотоальбомов — от 5 000 ₽ · Выезд за город — обсуждается индивидуально</p>
<div class="mt-4 flex flex-wrap items-center justify-center gap-3">
<a href="tel:+79127511376" class="action-btn magnetic-btn">Позвонить +7 (912) 751-13-76</a>
<span class="divider">|</span>
<a href="https://t.me/BopoH_B_Hebe" target="_blank" class="action-btn magnetic-btn">Написать в Telegram</a>
<span class="divider">|</span>
<a href="https://profi.ru/profile/TerentyevTA/" target="_blank" class="action-btn magnetic-btn">Profi.ru</a>
</div>
</div>
</div>
</section>
<section class="py-10 px-6 relative z-10">
<div class="max-w-4xl mx-auto gift-card reveal">
<p class="text-xs tracking-[0.25em] uppercase mb-2" style="color:var(--gold)">Подарок</p>
<h3 class="font-display text-2xl md:text-3xl font-bold grad-text mb-3">Подарочный сертификат</h3>
<p style="color:var(--muted); max-width:480px; margin:0 auto; font-size:0.92rem;">Подарите близкому человеку незабываемые эмоции и красивые фотографии, которые останутся с ним на всю жизнь. Сертификат можно оформить на любой тариф или индивидуальную сумму.</p>
<div class="mt-4"><a href="https://t.me/BopoH_B_Hebe" target="_blank" class="action-btn magnetic-btn">Оформить сертификат</a></div>
</div>
</section>
<div class="section-divider reveal"></div>
<section id="faq" class="py-10 px-6 relative z-10">
<div class="max-w-3xl mx-auto">
<p class="text-sm tracking-[0.25em] uppercase mb-3 text-center reveal" style="color:var(--gold)">Вопросы</p>
<h3 class="font-display text-2xl md:text-3xl font-bold text-center grad-text reveal mb-8">Частые вопросы</h3>
<div class="reveal">
<div class="faq-item active"><button class="faq-question"><span>Как забронировать дату съемки?</span><span class="faq-icon">+</span></button><div class="faq-answer">Свяжитесь с нами любым удобным способом — по телефону, в Telegram или через Profi.ru. Мы обсудим детали, проверим доступность даты и забронируем её за вами.</div></div>
<div class="faq-item"><button class="faq-question"><span>Нужно ли вносить предоплату?</span><span class="faq-icon">+</span></button><div class="faq-answer">Для бронирования даты вносится символическая предоплата, которая затем засчитывается в общую стоимость. Оставшаяся сумма оплачивается в день съемки.</div></div>
<div class="faq-item"><button class="faq-question"><span>В каком формате мы получим фото?</span><span class="faq-icon">+</span></button><div class="faq-answer">Вы получаете все обработанные фото в высоком разрешении JPEG, готовые для печати и публикации в соцсетях, а также все исходные снимки в формате RAW.</div></div>
<div class="faq-item"><button class="faq-question"><span>Выезжаете ли вы за город?</span><span class="faq-icon">+</span></button><div class="faq-answer">Да, мы с удовольствием выезжаем на любые локации. Стоимость и условия выезда обсуждаются индивидуально в зависимости от расстояния и особенностей места.</div></div>
<div class="faq-item"><button class="faq-question"><span>Публикуете ли вы фото клиентов?</span><span class="faq-icon">+</span></button><div class="faq-answer">Никогда не публикуем личные фотографии без вашего письменного согласия. Все ваши кадры остаются конфиденциальными и передаются только вам.</div></div>
<div class="faq-item"><button class="faq-question"><span>Как подготовиться к съемке?</span><span class="faq-icon">+</span></button><div class="faq-answer">Перед съемкой мы пришлем вам короткие рекомендации: как подобрать образ, что взять с собой и как настроиться, чтобы результат получился максимально естественным и красивым.</div></div>
</div>
</div>
</section>
<div class="section-divider reveal"></div>
<section class="py-10 px-6 relative z-10">
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="reveal">
<p class="text-sm tracking-[0.25em] uppercase mb-3" style="color:var(--gold)">География</p>
<h3 class="font-display text-xl md:text-2xl font-bold grad-text mb-4">Где мы работаем</h3>
<p style="color:var(--muted); line-height:1.7; font-size:0.9rem;">Основная локация — ваш город и ближайшая область. Мы с удовольствием выезжаем на любые мероприятия, свадьбы и съемки в другие города и страны. Условия и стоимость выезда обсуждаются индивидуально под каждый проект.</p>
<div class="mt-4 p-4 rounded-2xl" style="background:rgba(252,211,77,0.025); border:1px solid rgba(252,211,77,0.12);"><p style="color:var(--text); font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-style:italic;">"Где бы ни проходила ваша съемка — мы привезем с собой профессиональное оборудование, творческий подход и отличное настроение."</p></div>
</div>
<div class="reveal">
<p class="text-sm tracking-[0.25em] uppercase mb-3" style="color:var(--gold)">Техника</p>
<h3 class="font-display text-xl md:text-2xl font-bold grad-text mb-4">Наше оборудование</h3>
<div class="equipment-list">
<div class="equipment-item"><div class="equipment-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg></div><div><div class="equipment-name">Профессиональные камеры</div><div class="equipment-desc">Full-frame сенсоры, высокая детализация</div></div></div>
<div class="equipment-item"><div class="equipment-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path></svg></div><div><div class="equipment-name">Набор объективов</div><div class="equipment-desc">От широкоугольных до портретных</div></div></div>
<div class="equipment-item"><div class="equipment-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2v20M2 12h20"></path></svg></div><div><div class="equipment-name">Студийный свет</div><div class="equipment-desc">Импульсные и постоянные источники света</div></div></div>
<div class="equipment-item"><div class="equipment-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg></div><div><div class="equipment-name">Фоны и аксессуары</div><div class="equipment-desc">Разнообразные фоны, отражатели, модификаторы</div></div></div>
</div>
</div>
</div>
</div>
</section>
<footer class="py-5 px-6 relative z-10 border-t" style="border-color:var(--border)">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-3">
<div class="text-center md:text-left">
<p class="font-display text-lg grad-text font-bold">Tertix & Khityaev</p>
<p class="text-xs mt-1" style="color:var(--muted)">Фотография с душой · © 2026</p>
</div>
<div class="flex items-center gap-3">
<a href="https://t.me/BopoH_B_Hebe" target="_blank" class="tg-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 2L11 13"></path><path d="M22 2l-7 20-4-9-9-4 20-7z"></path></svg></a>
<a href="tel:+79127511376" class="tg-icon"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg></a>
<button class="tg-icon" id="shareBtn" title="Поделиться сайтом"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg></button>
</div>
</div>
</footer>
<a href="https://t.me/BopoH_B_Hebe" target="_blank" class="fixed-contact-btn magnetic-btn" id="fixedContactBtn" aria-label="Написать в Telegram"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"></path><path d="M22 2l-7 20-4-9-9-4 20-7z"></path></svg></a>
<button class="scroll-top-btn" id="scrollTopBtn" aria-label="Наверх"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="18 15 12 9 6 15"></polyline></svg></button>
<script>
(function(){
// Прелоадер
window.addEventListener('load', function(){
setTimeout(function(){ document.getElementById('preloader').classList.add('hidden'); }, 650);
});
// Индикатор прокрутки
var scrollIndicator = document.getElementById('scrollIndicator');
window.addEventListener('scroll', function(){
var scrollTop = window.scrollY;
var docHeight = document.documentElement.scrollHeight - window.innerHeight;
scrollIndicator.style.width = (scrollTop / docHeight * 100) + '%';
});
// Создаем дождь
var rainContainer = document.getElementById('rainContainer');
var glassDropsContainer = document.getElementById('glassDrops');
var dropCount = 65;
for(var i = 0; i < dropCount; i++){
var drop = document.createElement('div');
drop.className = 'rain-drop';
drop.style.left = Math.random() * 100 + '%';
drop.style.height = (Math.random() * 22 + 10) + 'px';
drop.style.animationDuration = (Math.random() * 0.45 + 0.3) + 's';
drop.style.animationDelay = (Math.random() * 2) + 's';
drop.style.opacity = Math.random() * 0.2 + 0.1;
rainContainer.appendChild(drop);
}
// Создаем капли на стекле
for(var s = 0; s < 100; s++){
var smallDrop = document.createElement('div');
smallDrop.className = 'glass-drop small';
smallDrop.style.left = Math.random() * 100 + '%';
smallDrop.style.top = Math.random() * 100 + '%';
smallDrop.style.transform = 'scale(' + (Math.random() * 0.7 + 0.4) + ')';
glassDropsContainer.appendChild(smallDrop);
}
function createMicroSplash(x, y){
for(var m = 0; m < 3; m++){
var splash = document.createElement('div');
splash.className = 'micro-splash';
splash.style.left = (x + (Math.random() - 0.5) * 10) + '%';
splash.style.top = y + 'px';
glassDropsContainer.appendChild(splash);
setTimeout(function(){ splash.remove(); }, 600);
}
}
function createFlowingDrop(){
var isLarge = Math.random() > 0.72;
var drop = document.createElement('div');
drop.className = 'glass-drop ' + (isLarge ? 'large' : 'medium');
var leftPos = Math.random() * 100;
drop.style.left = leftPos + '%';
drop.style.top = '-15px';
drop.style.animationDuration = (isLarge ? Math.random() * 3.5 + 4.5 : Math.random() * 5 + 7) + 's';
drop.style.animationDelay = Math.random() * 1.5 + 's';
glassDropsContainer.appendChild(drop);
createMicroSplash(leftPos, 5);
if(isLarge){
var trail = document.createElement('div');
trail.className = 'drop-trail';
trail.style.left = leftPos + '%';
trail.style.top = '-8px';
trail.style.animationDuration = drop.style.animationDuration;
trail.style.animationDelay = drop.style.animationDelay;
glassDropsContainer.appendChild(trail);
setTimeout(function(){ trail.remove(); }, parseFloat(trail.style.animationDuration) * 1000 + 1500);
}
setTimeout(function(){ drop.remove(); }, parseFloat(drop.style.animationDuration) * 1000 + 1500);
}
setInterval(createFlowingDrop, 550);
for(var init = 0; init < 7; init++){ setTimeout(createFlowingDrop, init * 350); }
// Искры от молний
var lightningEl = document.getElementById('lightning');
lightningEl.addEventListener('animationiteration', function(){
for(var sp = 0; sp < 8; sp++){
var spark = document.createElement('div');
spark.className = 'lightning-spark';
spark.style.left = Math.random() * 100 + '%';
spark.style.top = Math.random() * 100 + '%';
spark.style.transform = 'scale(' + (Math.random() * 2 + 0.5) + ')';
glassDropsContainer.appendChild(spark);
setTimeout(function(){ spark.remove(); }, 1200);
}
});
// Плавные переходы по якорям
document.querySelectorAll('a[href^="#"]').forEach(function(anchor){
anchor.addEventListener('click', function(e){
var targetId = this.getAttribute('href');
if(targetId === '#') return;
var targetSection = document.querySelector(targetId);
if(targetSection){
e.preventDefault();
var headerHeight = document.querySelector('header').offsetHeight;
var targetPosition = targetSection.getBoundingClientRect().top + window.scrollY - headerHeight - 12;
window.scrollTo({ top: targetPosition, behavior: 'smooth' });
document.getElementById('burgerBtn').classList.remove('active');
document.getElementById('mobileMenu').classList.remove('active');
}
});
});
// Анимация появления блоков
var reveals = document.querySelectorAll('.reveal');
var revealObserver = new IntersectionObserver(function(entries){
entries.forEach(function(e, idx){
if(e.isIntersecting){
setTimeout(function(){ e.target.classList.add('in'); }, idx * 60);
revealObserver.unobserve(e.target);
}
});
},{threshold:.12});
reveals.forEach(function(el){ revealObserver.observe(el); });
// Анимация счёта цифр
function animateCounter(el){
var target = parseInt(el.dataset.target);
var suffix = el.dataset.suffix || '';
var duration = 2000;
var start = 0;
var startTime = null;
function step(timestamp){
if(!startTime) startTime = timestamp;
var progress = Math.min((timestamp - startTime) / duration, 1);
var easeProgress = 1 - Math.pow(1 - progress, 3);
el.textContent = Math.floor(easeProgress * target).toLocaleString('ru-RU') + suffix;
if(progress < 1) requestAnimationFrame(step);
else el.textContent = target.toLocaleString('ru-RU') + suffix;
}
requestAnimationFrame(step);
}
var counters = document.querySelectorAll('.counter, .stat-number');
var counterObserver = new IntersectionObserver(function(entries){
entries.forEach(function(e){
if(e.isIntersecting){ animateCounter(e.target); counterObserver.unobserve(e.target); }
});
},{threshold:0.5});
counters.forEach(function(c){ counterObserver.observe(c); });
// Эффекты при прокрутке и параллакс
var heroBg = document.getElementById('heroBg');
var forestBg = document.getElementById('forestBg');
var stormClouds = document.getElementById('stormClouds');
var header = document.querySelector('header');
var fixedContactBtn = document.getElementById('fixedContactBtn');
var scrollTopBtn = document.getElementById('scrollTopBtn');
var originalTitle = document.title;
var lastScroll = 0;
window.addEventListener('scroll', function(){
var scrollY = window.scrollY;
var scrollDelta = scrollY - lastScroll;
lastScroll = scrollY;
var scrollFactor = Math.min(scrollY / (window.innerHeight * 0.6), 1);
heroBg.classList.toggle('blurred', scrollY > window.innerHeight * 0.32);
forestBg.classList.toggle('blurred', scrollY > window.innerHeight * 0.25);
// Параллакс слоев
forestBg.style.transform = 'translateY(' + (scrollY * 0.08) + 'px)';
stormClouds.style.transform = 'translateX(' + (-scrollY * 0.02) + 'px)';
glassDropsContainer.style.transform = 'translateY(' + (scrollY * 0.15) + 'px)';
if(scrollY > 70){
header.style.background = 'linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.94))';
header.style.borderBottom = '1px solid rgba(252,211,77,0.12)';
} else {
header.style.background = 'linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,0))';
header.style.borderBottom = '1px solid transparent';
}
fixedContactBtn.classList.toggle('show', scrollY > window.innerHeight * 0.42);
scrollTopBtn.classList.toggle('show', scrollY > window.innerHeight * 0.42);
});
// Активный пункт меню и динамический заголовок
var sections = document.querySelectorAll('section[id]');
var navLinks = document.querySelectorAll('.nav-link');
var sectionTitles = {'about':'О нас','process':'Процесс','features':'Преимущества','gallery':'Портфолио','prices':'Тарифы','faq':'Вопросы'};
var navObserver = new IntersectionObserver(function(entries){
entries.forEach(function(entry){
if(entry.isIntersecting){
var id = entry.target.getAttribute('id');
navLinks.forEach(function(link){
link.classList.toggle('active', link.getAttribute('href') === '#' + id);
});
if(sectionTitles[id]) document.title = sectionTitles[id] + ' · Tertix & Khityaev';
}
});
},{threshold:0.35, rootMargin:'-65px 0px -55% 0px'});
sections.forEach(function(s){ navObserver.observe(s); });
// Бургер меню
var burgerBtn = document.getElementById('burgerBtn');
var mobileMenu = document.getElementById('mobileMenu');
burgerBtn.addEventListener('click', function(){
burgerBtn.classList.toggle('active');
mobileMenu.classList.toggle('active');
if(navigator.vibrate) navigator.vibrate(20);
});
// Карусель
var track = document.getElementById('carouselTrack');
var slides = track.querySelectorAll('.carousel-slide');
var dotsWrap = document.getElementById('carouselDots');
var currentIndex = 0;
var autoPlayInterval;
var carouselHovered = false;
function preloadNext(index){
var next = slides[(index + 1) % slides.length].querySelector('img');
if(next && next.dataset.src) next.src = next.dataset.src;
}
function goTo(index){
if(index < 0) index = slides.length - 1;
if(index >= slides.length) index = 0;
slides[currentIndex].classList.remove('active');
currentIndex = index;
slides[currentIndex].classList.add('active');
track.style.transform = 'translateX(-' + (index * 100) + '%)';
var dots = dotsWrap.querySelectorAll('.dot');
dots.forEach(function(d,i){ d.classList.toggle('active', i === currentIndex); });
preloadNext(index);
if(navigator.vibrate) navigator.vibrate(12);
}
slides.forEach(function(_,i){
var d = document.createElement('div');
d.className = 'dot' + (i === 0 ? ' active' : '');
d.addEventListener('click', function(){ goTo(i); resetAutoPlay(); });
dotsWrap.appendChild(d);
});
document.getElementById('prevBtn').addEventListener('click', function(){ goTo(currentIndex - 1); resetAutoPlay(); });
document.getElementById('nextBtn').addEventListener('click', function(){ goTo(currentIndex + 1); resetAutoPlay(); });
var carouselWrap = document.getElementById('carousel');
carouselWrap.addEventListener('mouseenter', function(){ carouselHovered = true; clearInterval(autoPlayInterval); });
carouselWrap.addEventListener('mouseleave', function(){ carouselHovered = false; startAutoPlay(); });
var startX = 0;
track.addEventListener('touchstart', function(e){ startX = e.touches[0].clientX; }, {passive:true});
track.addEventListener('touchend', function(e){
var endX = e.changedTouches[0].clientX;
if(startX - endX > 45) { goTo(currentIndex + 1); resetAutoPlay(); }
if(endX - startX > 45) { goTo(currentIndex - 1); resetAutoPlay(); }
}, {passive:true});
document.addEventListener('keydown', function(e){
if(e.key === 'ArrowLeft') { goTo(currentIndex - 1); resetAutoPlay(); }
if(e.key === 'ArrowRight') { goTo(currentIndex + 1); resetAutoPlay(); }
});
function startAutoPlay(){ autoPlayInterval = setInterval(function(){ if(!carouselHovered) goTo(currentIndex + 1); }, 7000); }
function resetAutoPlay(){ clearInterval(autoPlayInterval); startAutoPlay(); }
startAutoPlay();
// Проявление фото как в фотолаборатории
var images = document.querySelectorAll('.photo-frame img, .best-item img, .genre-bg');
images.forEach(function(img){
if(img.complete){ img.classList.add('loaded'); }
else { img.addEventListener('load', function(){ img.classList.add('loaded'); }); }
});
// Лайтбокс
var lightbox = document.getElementById('lightbox');
var lightboxImg = document.getElementById('lightboxImg');
document.querySelectorAll('.lightbox-trigger, .photo-frame img').forEach(function(t){
t.addEventListener('click', function(e){
e.stopPropagation();
lightboxImg.src = this.dataset.src || this.src;
lightbox.classList.add('active');
});
});
document.getElementById('lightboxClose').addEventListener('click', function(){ lightbox.classList.remove('active'); });
lightbox.addEventListener('click', function(e){ if(e.target === lightbox) lightbox.classList.remove('active'); });
document.addEventListener('keydown', function(e){ if(e.key === 'Escape') lightbox.classList.remove('active'); });
// FAQ
document.querySelectorAll('.faq-item').forEach(function(item){
item.querySelector('.faq-question').addEventListener('click', function(){
var active = item.classList.contains('active');
document.querySelectorAll('.faq-item').forEach(function(i){ i.classList.remove('active'); });
if(!active) item.classList.add('active');
});
});
// Эффект магнита и лёгкого 3D-поворота
function add3DEffect(el, intensity){
el.addEventListener('mousemove', function(e){
var rect = el.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
var centerX = rect.width / 2;
var centerY = rect.height / 2;
var rotateX = (y - centerY) / centerY * -intensity;
var rotateY = (x - centerX) / centerX * intensity;
el.style.transform = 'perspective(1000px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) translateZ(3px)';
});
el.addEventListener('mouseleave', function(){ el.style.transform = ''; });
}
document.querySelectorAll('.magnetic-btn').forEach(function(btn){
btn.addEventListener('mousemove', function(e){
var rect = btn.getBoundingClientRect();
var x = e.clientX - rect.left - rect.width / 2;
var y = e.clientY - rect.top - rect.height / 2;
btn.style.transform = 'translate(' + x * 0.12 + 'px, ' + y * 0.12 + 'px)';
});
btn.addEventListener('mouseleave', function(){ btn.style.transform = ''; });
});
document.querySelectorAll('.feature-card, .price-card').forEach(function(card){ add3DEffect(card, 2.5); });
// Анимированные цитаты
var quotes = [
{text:"«Фотография — это история, которую я не могу рассказать словами»", author:"— Девид Дьюбери"},
{text:"«Лучшие фотографии — те, которые вызывают эмоции даже через годы»", author:"— Ансель Адамс"},
{text:"«Мы ловим не только кадры — мы сохраняем чувства»", author:"— Tertix & Khityaev"},
{text:"«Хорошая фотография — та, которую хочется пересматривать снова и снова»", author:"— Роберт Капа"}
];
var quoteText = document.getElementById('quoteText');
var quoteAuthor = document.getElementById('quoteAuthor');
var currentQuote = 0;
setInterval(function(){
quoteText.style.opacity = 0;
quoteText.style.transform = 'translateY(5px)';
quoteAuthor.style.opacity = 0;
quoteAuthor.style.transform = 'translateY(5px)';
setTimeout(function(){
currentQuote = (currentQuote + 1) % quotes.length;
quoteText.textContent = quotes[currentQuote].text;
quoteAuthor.textContent = quotes[currentQuote].author;
quoteText.style.opacity = 1;
quoteText.style.transform = 'translateY(0)';
quoteAuthor.style.opacity = 1;
quoteAuthor.style.transform = 'translateY(0)';
}, 650);
}, 9000);
// Кнопка наверх
scrollTopBtn.addEventListener('click', function(){ window.scrollTo({top:0, behavior:'smooth'}); });
// Кнопка поделиться
document.getElementById('shareBtn').addEventListener('click', function(){
if(navigator.share){
navigator.share({title: document.title, url: window.location.href});
} else {
navigator.clipboard.writeText(window.location.href).then(function(){
alert('Ссылка на сайт скопирована в буфер обмена');
});
}
});
// Защита фото
document.addEventListener('contextmenu', function(e){ if(e.target.tagName === 'IMG') e.preventDefault(); });
document.addEventListener('dragstart', function(e){ if(e.target.tagName === 'IMG') e.preventDefault(); });
// Сохранение позиции прокрутки
window.addEventListener('beforeunload', function(){ localStorage.setItem('scrollPos', window.scrollY); });
var savedPos = localStorage.getItem('scrollPos');
if(savedPos){ setTimeout(function(){ window.scrollTo(0, parseInt(savedPos)); }, 90); }
})();
</script>
</body>
</html>