/* 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: 28px;
  --easter-div-mb: 32px;

  --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: 340px;
    --easter-logo-h: 118px;
    --easter-div-h: 100px;
    --easter-div-mt: 20px;
    --easter-div-mb: 24px;
  }
}

@media (max-width: 767.98px) {
  body.theme-easter {
    --easter-logo-w: 220px;
    --easter-logo-h: 76px;
    --easter-div-h: 70px;
    --easter-div-mt: 14px;
    --easter-div-mb: 18px;
    --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-flex;
  align-items: center;
  width: var(--easter-logo-w);
  height: var(--easter-logo-h);
  max-width: calc(100vw - 80px);
}

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

body.theme-easter :is(.navbar-brand, .brand-logo, .site-logo-link, .header-logo, .logo)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/log.osten.png") left center / contain no-repeat;
  pointer-events: none;
  opacity: 1 !important;
  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: var(--easter-div-mb) !important;
  border: none;
  background: none !important;
  opacity: 1 !important;
  z-index: 1;
}

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;
  will-change: transform;
}

/* opcionális: hogy a következő szekció biztosan ne csússzon rá */
body.theme-easter .wellness-section,
body.theme-easter #wellness {
  position: relative;
  z-index: 2;
}

/* 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;
  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;
  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;
  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 */
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 */
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;
  }
}