/* 1. ALAPVÁLTOZÓK */
body.theme-easter {
overflow-x: hidden;
isolation: isolate;

--easter-logo-w: 520px;
--easter-logo-h: 180px;
--easter-div-h: 160px;
--easter-div-mt: -160px;

--easter-layer-z-butterfly: 1200;
--easter-layer-z-bunny: 1210;

--easter-bunny-size: 260px;
--easter-bunny-size-tablet: 220px;
--easter-bunny-size-mobile: 172px;

--easter-bunny-shadow-opacity: .52;
--easter-bunny-shadow-blur: 3px;
--easter-overlay-safe-inset: 10px;
}

@media (max-width: 991.98px) {
body.theme-easter {
--easter-logo-w: 420px;
--easter-logo-h: 145px;
--easter-div-h: 100px;
--easter-div-mt: -60px;
}
}

@media (max-width: 767.98px) {
body.theme-easter {
--easter-logo-w: 300px;
--easter-logo-h: 105px;
--easter-div-h: 70px;
--easter-div-mt: -40px;
--easter-bunny-shadow-blur: 2px;
--easter-overlay-safe-inset: 6px;
}
}

/* 2. LOGÓ – csak vizuális csere, layout ugrás nélkül */
body.theme-easter :is(.navbar-brand, .brand-logo, .site-logo-link, .header-logo, .logo) {
position: relative;
display: inline-block;
line-height: 0;
min-width: var(--easter-logo-w);
min-height: var(--easter-logo-h);
}

body.theme-easter :is(.navbar-brand, .brand-logo, .site-logo-link, .header-logo, .logo) img {
opacity: 0 !important;
visibility: hidden !important;
}

body.theme-easter :is(.navbar-brand, .brand-logo, .site-logo-link, .header-logo, .logo)::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: var(--easter-logo-w);
height: var(--easter-logo-h);
transform: translateY(-50%) translateZ(0);
background: url("/img/log.osten.png") left center / contain no-repeat;
pointer-events: none;
opacity: 1 !important;
/* JAVÍTVA: Csak transform marad */
will-change: transform;
}

/* 3. DIVIDER */
body.theme-easter .section-separator {
position: relative;
height: var(--easter-div-h);
margin-top: var(--easter-div-mt) !important;
margin-bottom: 0;
border: none;
background: none !important;
opacity: 1 !important;
z-index: 99;
}

body.theme-easter .section-separator::before {
content: "";
position: absolute;
inset: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%) translateZ(0);
background: url("/img/easter/grass-eggs-divider.png") center bottom / auto 100% repeat-x !important;
opacity: 1 !important;
pointer-events: none;
z-index: 1;
/* JAVÍTVA: Csak transform marad */
will-change: transform;
}

/* 4. OVERLAY RÉTEGEK */
body.theme-easter .easter-butterfly-layer,
body.theme-easter .pro-butterfly-layer,
body.theme-easter .easter-bunny-layer {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
contain: layout paint style;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}

body.theme-easter .easter-butterfly-layer,
body.theme-easter .pro-butterfly-layer {
z-index: var(--easter-layer-z-butterfly);
}

body.theme-easter .easter-bunny-layer {
z-index: var(--easter-layer-z-bunny);
}

/* 5. LEPKE ELEMEK */
body.theme-easter .easter-butterfly,
body.theme-easter .pro-butterfly {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
transform-origin: center center;
/* JAVÍTVA: A pozíció eleve hardveres */
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
filter: none !important;
}

body.theme-easter .easter-butterfly-sprite,
body.theme-easter .pro-butterfly > div {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
image-rendering: auto;
/* JAVÍTVA: Törölve a will-change: background-image a villogás ellen! */
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
filter: none !important;
}

body.theme-easter .easter-butterfly.is-perched {
opacity: .98;
filter: none !important;
}

/* 6. NYUSZI ELEMEK – az új JS motorhoz */
body.theme-easter .easter-bunny {
position: absolute;
top: 0;
left: 0;
width: var(--easter-bunny-size);
height: var(--easter-bunny-size);
opacity: 0;
pointer-events: none;
transform-origin: center bottom;
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}

body.theme-easter .easter-bunny.is-visible {
opacity: 1;
}

body.theme-easter .easter-bunny-sprite {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
pointer-events: none;
/* JAVÍTVA: Törölve a will-change: background-image a villogás ellen! */
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}

body.theme-easter .easter-bunny-shadow {
position: absolute;
left: 50%;
bottom: 3%;
z-index: 1;
width: 56%;
height: 10%;
border-radius: 999px;
pointer-events: none;
transform: translateX(-50%) translateZ(0);
transform-origin: center center;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, .18) 0%,
rgba(0, 0, 0, .10) 45%,
rgba(0, 0, 0, 0) 72%
);
filter: blur(var(--easter-bunny-shadow-blur));
opacity: var(--easter-bunny-shadow-opacity);
will-change: transform, opacity;
}

/* 7. FINOM STABILIZÁLÁS – ne animáljunk transformot CSS-ből,
azt a JS teljesen maga kezeli */
body.theme-easter .easter-butterfly,
body.theme-easter .easter-butterfly-sprite,
body.theme-easter .pro-butterfly,
body.theme-easter .pro-butterfly > div,
body.theme-easter .easter-bunny,
body.theme-easter .easter-bunny-sprite,
body.theme-easter .easter-bunny-shadow {
transition: none !important;
animation: none;
}

/* 8. EXTRA BIZTONSÁG – overlay elemek ne okozzanak scrollt */
body.theme-easter .easter-butterfly-layer *,
body.theme-easter .pro-butterfly-layer *,
body.theme-easter .easter-bunny-layer * {
max-width: none;
max-height: none;
user-select: none;
-webkit-user-select: none;
}

/* 9. MOBIL FINOMHANGOLÁS */
@media (max-width: 991.98px) {
body.theme-easter .easter-bunny {
width: var(--easter-bunny-size-tablet);
height: var(--easter-bunny-size-tablet);
}
}

@media (max-width: 767.98px) {
body.theme-easter .easter-bunny {
width: var(--easter-bunny-size-mobile);
height: var(--easter-bunny-size-mobile);
}

body.theme-easter .easter-butterfly-layer,
body.theme-easter .pro-butterfly-layer,
body.theme-easter .easter-bunny-layer {
inset: var(--easter-overlay-safe-inset) 0 0 0;
}
}

/* 10. AKADÁLYMENTESSÉG */
@media (prefers-reduced-motion: reduce) {
body.theme-easter .easter-butterfly-layer,
body.theme-easter .pro-butterfly-layer,
body.theme-easter .easter-bunny-layer {
display: none !important;
}
}