/* ==========================================================================
   Анимированный логотип «Адам и Ева»
   Слои: лист / яблоко / тела (лев+прав) / текст / силуэт-маска для блика.
   Подключение: modification/logo-anim.css (после custom.css).
   Разметка: .anim-logo > (.slot>.art | .half>.halfIdle>.halfArt | .sheen)
   ========================================================================== */

.anim-logo{
	position: relative;
	width: 160px;
	aspect-ratio: 2628 / 1211;
	flex: 0 0 auto;
	perspective: 900px;
	perspective-origin: 58% 55%;
	transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.anim-logo:hover{ transform: translateY(-2px); }

.anim-logo .slot{ position:absolute; inset:0; opacity:0; }
.anim-logo .art{
	position:absolute; inset:0;
	background-repeat:no-repeat; background-position:center; background-size:contain;
	will-change:transform;
}
.anim-logo .art--leaf {
	background-image:url('/catalog/view/theme/default/image/logo-anim/leaf.png');
	transform-origin:45% 26%;
}
.anim-logo .art--apple{
	background-image:url('/catalog/view/theme/default/image/logo-anim/apple-solid.png');
	transform-origin:54.5% 70%;
}
.anim-logo .art--text{ transform-origin:50% 60%; }
.anim-logo--dark  .art--text{ background-image:url('/catalog/view/theme/default/image/logo-anim/text-light.png'); }
.anim-logo--light .art--text{ background-image:url('/catalog/view/theme/default/image/logo-anim/text-dark.png'); }

/* ── тела ── */
.anim-logo .half{ position:absolute; inset:0; opacity:0; }
.anim-logo .halfIdle{ position:absolute; inset:0; }
.anim-logo .halfArt{
	position:absolute; inset:0;
	background-repeat:no-repeat; background-position:center; background-size:contain;
	filter:url(#logoAnimWrithe);
}
.anim-logo .half--left  { transform-origin:58% 58%; }
.anim-logo .half--right { transform-origin:57% 58%; }
.anim-logo .halfIdle--left  { transform-origin:52% 62%; animation: logoAliveL 6.5s ease-in-out 1.8s infinite; }
.anim-logo .halfIdle--right { transform-origin:63% 62%; animation: logoAliveR 6.5s ease-in-out 1.8s infinite; }
.anim-logo .half--left  .halfArt{ background-image:url('/catalog/view/theme/default/image/logo-anim/figures-left.png'); }
.anim-logo .half--right .halfArt{ background-image:url('/catalog/view/theme/default/image/logo-anim/figures-right.png'); }

/* ── блик по силуэту ── */
.anim-logo .sheen{
	position:absolute; inset:0; pointer-events:none;
	background-image:linear-gradient(105deg, rgba(255,255,255,0) 43%, rgba(255,255,255,.92) 50%, rgba(255,255,255,0) 57%);
	background-size:250% 100%; background-repeat:no-repeat; background-position:85% 0;
	-webkit-mask-image:url('/catalog/view/theme/default/image/logo-anim/full.png');
	        mask-image:url('/catalog/view/theme/default/image/logo-anim/full.png');
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
	mix-blend-mode:screen; opacity:0;
	animation: logoSheen 4.5s ease-in-out infinite;
}

/* ══════════ Анимации ══════════ */
.anim-logo .slot--apple  { animation: logoIconIn .8s cubic-bezier(.16,.9,.3,1.18) .1s forwards; }
.anim-logo .slot--leaf   { animation: logoIconIn .85s cubic-bezier(.16,.9,.3,1.18) .26s forwards; }
.anim-logo .slot--text   { animation: logoTextWipe 1s cubic-bezier(.2,.7,.2,1) .42s forwards; }
.anim-logo .half--left   { animation: logoEveIn  1.6s cubic-bezier(.22,.75,.2,1) .65s forwards; }
.anim-logo .half--right  { animation: logoAdamIn 1.6s cubic-bezier(.22,.75,.2,1) .65s forwards; }

.anim-logo .art--apple{ animation: logoBeat 3.2s ease-in-out .85s infinite; }
.anim-logo .art--leaf { animation: logoSway 3.8s ease-in-out .85s infinite; }

.anim-logo--dark .art--apple{
	animation: logoBeat 3.2s ease-in-out .85s infinite,
	           logoAppleGlow 3.2s ease-in-out .85s infinite;
}
.anim-logo--dark:hover .art--apple{
	animation: logoBeat 3.2s ease-in-out infinite,
	           logoAppleGlowHover 1.2s ease-in-out infinite;
}
.anim-logo--light .art--apple{ filter: drop-shadow(0 6px 12px rgba(0,0,0,.07)); }
.anim-logo:hover .sheen{ animation-duration:2s; }
.anim-logo:hover .halfIdle--left  { animation-duration:3s; }
.anim-logo:hover .halfIdle--right { animation-duration:3s; }

@keyframes logoIconIn{
	0%{ opacity:0; transform:scale(.74) translateY(9%); filter:blur(4px); }
	60%{ opacity:1; filter:blur(0); }
	100%{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
@keyframes logoTextWipe{
	0%{ opacity:0; clip-path:inset(0 100% 0 0); }
	15%{ opacity:1; }
	100%{ opacity:1; clip-path:inset(0 0 0 0); }
}
@keyframes logoEveIn{
	0%{ opacity:0; transform: translate(-11%, 9%) rotateY(68deg) scale(.9); }
	25%{ opacity:.85; }
	100%{ opacity:1; transform: translate(0,0) rotateY(0deg) scale(1); }
}
@keyframes logoAdamIn{
	0%{ opacity:0; transform: translate(11%, 9%) rotateY(-68deg) scale(.9); }
	25%{ opacity:.85; }
	100%{ opacity:1; transform: translate(0,0) rotateY(0deg) scale(1); }
}
@keyframes logoAliveL{
	0%{ transform:rotate(0) translate(0,0) scale(1); }
	50%{ transform:rotate(1.1deg) translate(.35%,-.5%) scale(1.006); }
	100%{ transform:rotate(0) translate(0,0) scale(1); }
}
@keyframes logoAliveR{
	0%{ transform:rotate(0) translate(0,0) scale(1); }
	50%{ transform:rotate(-1.1deg) translate(-.35%,-.5%) scale(1.006); }
	100%{ transform:rotate(0) translate(0,0) scale(1); }
}
@keyframes logoBeat{
	0%{transform:scale(1);} 9%{transform:scale(1.05);} 18%{transform:scale(1.006);}
	27%{transform:scale(1.032);} 40%{transform:scale(1);} 100%{transform:scale(1);}
}
@keyframes logoSway{ 0%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);} 100%{transform:rotate(-3deg);} }
@keyframes logoSheen{
	0%,44%  { background-position:85% 0; opacity:0; }
	48%     { opacity:.95; }
	68%     { opacity:.95; }
	80%,100%{ background-position:15% 0; opacity:0; }
}
@keyframes logoAppleGlow{
	0%   { filter: drop-shadow(0 0 12px rgba(227,0,22,.5)) drop-shadow(0 0 4px rgba(255,120,120,.35)); }
	9%   { filter: drop-shadow(0 0 26px rgba(227,0,22,.9)) drop-shadow(0 0 12px rgba(255,120,120,.65)); }
	27%  { filter: drop-shadow(0 0 18px rgba(227,0,22,.65)) drop-shadow(0 0 7px rgba(255,120,120,.45)); }
	40%  { filter: drop-shadow(0 0 12px rgba(227,0,22,.5)) drop-shadow(0 0 4px rgba(255,120,120,.35)); }
	100% { filter: drop-shadow(0 0 12px rgba(227,0,22,.5)) drop-shadow(0 0 4px rgba(255,120,120,.35)); }
}
@keyframes logoAppleGlowHover{
	0%,100%{ filter: drop-shadow(0 0 20px rgba(227,0,22,.75)); }
	50%    { filter: drop-shadow(0 0 36px rgba(227,0,22,1)); }
}

/* ── контейнеры в шапке ── */
#logo .anim-logo,
.logoblock .anim-logo{ width:220px; }

/* Десктоп: снимаем жёсткие 140px у блока логотипа; логотип слева, полоса тянется по логотипу */
@media (min-width: 992px){
	body header .header-inline-block.logoblock{
		flex:0 0 auto !important;
		width:auto !important;
		min-width:0 !important;
		max-width:none !important;
	}
	body header .header-inline #logo{ width:auto !important; height:auto !important; margin:0 !important; }
}
/* Страховка от «margin:0 auto» из desktop.min.css, который центрирует логотип на широких экранах */
#logo .anim-logo{ margin:0 !important; }

/* ── мобильная шапка: полное лого по центру (полоса увеличена до 64px) ── */
@media (max-width: 992px){
	body{ padding-top: 64px; }
	.mobilescrollpanel{ height: 64px; }
	.logomobile .anim-logo{ width: auto; height: 58px; }
}

/* ── доступность ── */
@media (prefers-reduced-motion: reduce){
	.anim-logo *, .anim-logo *::after{ animation:none !important; }
	.anim-logo .slot, .anim-logo .half{ opacity:1 !important; }
}