[overflow_x_hidden], [uk_body], html, body{

}
.uk-relative{

}



[overflow_x_hidden]{
  overflow-x: hidden;
}


/* 🚨🚨🚨 MICRO MODAL CORE 🚨🚨🚨 */

/* use your own styles */

/**************************\
Basic Modal Styles
\**************************/

[micromodal] {
  display: none;
}

[micromodal].is-open {
  display: block;
}

[micromodal] [modal__overlay] {
  position: fixed;
}

[modal__container]{
  overflow-x: hidden;
}



/**************************\
Modal Animation Style
\**************************/
@keyframes mmfadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mmfadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes mmslideIn {
  from { transform: translateY(15%); }
  to { transform: translateY(0); }
}

@keyframes mmslideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-10%); }
}

[micromodal][aria-hidden="false"] [modal__overlay] {
  animation: mmfadeIn .5s cubic-bezier(0.0, 0.0, 0.2, 1);
}

[micromodal][aria-hidden="false"] [modal__container] {
  animation: mmslideIn .5s cubic-bezier(0, 0, .2, 1);
}

[micromodal][aria-hidden="true"] [modal__overlay] {
  animation: mmfadeOut .5s cubic-bezier(0.0, 0.0, 0.2, 1);
}

[micromodal][aria-hidden="true"] [modal__container] {
  animation: mmslideOut .5s cubic-bezier(0, 0, .2, 1);
}

/* 🛑 Reduced Motion — ביטול כל האנימציות למשתמשים שבחרו בהפחתת תנועה */
@media (prefers-reduced-motion: reduce) {

  /* 💬 Reduced Motion — אנימציות עדיין מוגדרות, אבל מידיות */
  [micromodal][aria-hidden="false"] [modal__overlay],
  [micromodal][aria-hidden="false"] [modal__container],
  [micromodal][aria-hidden="true"] [modal__overlay],
  [micromodal][aria-hidden="true"] [modal__container] {
    animation-duration: 0s !important;  /* ⏱ אנימציה מידית */
    transition-duration: 0s !important; /* ⏱ טרנזישן מידי */
  }


}


[micromodal] [modal__container],
[micromodal] [modal__overlay] {
  will-change: transform;
}

/* 🚨🚨🚨 ENDDDDDDDDDDD - MICRO MODAL CORE 🚨🚨🚨 */


/*
1. Electric Purple (החזק)
background: radial-gradient(circle, #7559FF 0%, #7559FF66 40%, #7559FF00 70%);
2. Vivid Violet (המאוזן)
background: radial-gradient(circle, #8B5CF6 0%, #8B5CF666 40%, #8B5CF600 70%);
3. Light Lavender (הבהיר / היילייט)
background: radial-gradient(circle, #A78BFA 0%, #A78BFA66 40%, #A78BFA00 70%);
4. Soft Indigo (העמוק)
background: radial-gradient(circle, #667EEA 0%, #667EEA66 40%, #667EEA00 70%);

*/

/* --- Global Container --- */
.blobs-container {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden; pointer-events: none; z-index: 0;
}
/* --- Base Blob --- */

p:last-child{
  margin-bottom: 0px;
}

[blob] {
  position: absolute; 
  transform: translate3d(0,0,0);
}

[animation_type]{
  will-change: transform, opacity;
}


[center_x] {
  position: absolute;   /* או relative, תלוי בקונטקסט */
  left: 50%;
  transform: translateX(-50%);
}

[center_xy]{
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ===========================================================
✨📝 BLOG ANIMATIONS 📝✨
כל האנימציות המיוחדות לפוסטים / אלמנטים בבלוג
ניתן לשלוט דרך:
- animation_type="anim_slow" / "anim_fast" / ...
- animation_delay="2s" / "5s" / ...
=========================================================== */

[animation_type]{
  will-change: transform;
}

/* --- Animation Delays --- */
[animation_delay="1s"] {
  animation-delay: -1s !important;
}

[animation_delay="2s"] {
  animation-delay: -2s !important;
}

[animation_delay="3s"] {
  animation-delay: -3s !important;
}

[animation_delay="4s"] {
  animation-delay: -4s !important;
}

[animation_delay="5s"] {
  animation-delay: -5s !important;
}

[animation_delay="6s"] {
  animation-delay: -6s !important;
}

[animation_delay="7s"] {
  animation-delay: -7s !important;
}

[animation_delay="8s"] {
  animation-delay: -8s !important;
}


/* ===========================================================
🌟👁️ ANIMATION OPACITY 👁️🌟
- מאפשר שליטה בדינמיות של אטימות אלמנטים
- שימוש עם אטריבוט: [animation_opacity="0.5"] - [animation_opacity="0.95"]
- אידיאלי יחד עם אנימציות
=========================================================== */
[animation_opacity="20"] {
  opacity: 0.2;
}

[animation_opacity="30"] {
  opacity: 0.3;
}

[animation_opacity="40"] {
  opacity: 0.4;
}

[animation_opacity="50"] {
  opacity: 0.5;
}

[animation_opacity="60"] {
  opacity: 0.6;
}

[animation_opacity="70"] {
  opacity: 0.7;
}

[animation_opacity="80"] {
  opacity: 0.8;
}

[animation_opacity="90"] {
  opacity: 0.9;
}

[animation_opacity="95"] {
  opacity: 0.95;
}

/* --- Animations --- */
@keyframes float-slow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(30px, -50px, 0) scale(1.1); }
  66% { transform: translate3d(-20px, 20px, 0) scale(0.9); }
}

@keyframes float-medium {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-40px, 40px, 0); }
}

@keyframes float-fast {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(20px, -20px, 0) scale(1.1); }
}

@keyframes pulse-glow {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.2);
    opacity: 0.6;
  }
}

@keyframes move-horizontal {
  0%, 100% { transform: translate3d(-50%, 0, 0); }
  50% { transform: translate3d(calc(-50% + 100px), 0, 0); }
}

@keyframes move-left-horizontal {
  0%, 100% { transform: translate3d(0,0,0) scale(1);  }
  50% { transform: translate3d(-250px,0,0) scale(1.1); } 
}

@keyframes move-right-horizontal {
  0%, 100% { transform: translate3d(0,0,0) scale(1);  }
  50% { transform: translate3d(250px,0,0) scale(1.1);  }
}

/* --- Animation Types --- */
[animation_type="anim_slow"] { animation: float-slow 20s ease-in-out infinite; }
[animation_type="anim_medium"] { animation: float-medium 15s ease-in-out infinite; }
[animation_type="anim_fast"] { animation: float-fast 8s ease-in-out infinite; }
[animation_type="anim_pulse"] { animation: pulse-glow 6s ease-in-out infinite; }
[animation_type="anim_h_scroll"] { animation: move-horizontal 12s ease-in-out infinite; }
[animation_type="anim_move_left"] { animation: move-left-horizontal 8s ease-in-out infinite; }
[animation_type="anim_move_right"] { animation: move-right-horizontal 8s ease-in-out infinite; }

/* 🛑 בולע reduced motion */
@media (prefers-reduced-motion: reduce) {
  [animation_type] {
    animation: none !important; /* מבטל כל אנימציה */
    transition: none !important; /* גם transition אם יש */
  }
}

:root {
  /* Accordion */
  --accordion-border-width: 0px;
  --accordion-border-style: solid;
  --accordion-border-color: #ddd;
  --accordion-border-radius: 6px;

  /* Question (head) */
  --accordion-head-bg: #ffffff;
  --accordion-head-bg-hover: #f5f7fa;
  --accordion-head-bg-active: #eef4ff;
  --accordion-head-color: #111;
  --accordion-head-color-active: #1e90ff;

  /* Body */
  --accordion-body-bg: #ffffff;
  --accordion-body-color: #333;

  /* Icon */
  --accordion-icon-color: #A78BFA;

  /* Spacing */
  --accordion-padding-y: 0px;
  --accordion-padding-x: 0px;

  /* Animation */
  --accordion-transition: 0.2s ease;
}

[beefup] {

}

[beefup]:hover {

}

[beefup]:first-child {
  margin-top: 0;
}

[beefup__head],
[beefup__body] {

}

[beefup__head] {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding-right: var(--accordion-head-padding-right);
}

[beefup__head] > button {
  padding: 0px;
  cursor: pointer;
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: inherit;
  display: flex;
}

button[beefup__head][aria-disabled],
[beefup__head] > button[aria-disabled] {
  cursor: default;
  outline: 0;
}

[beefup__head]::after {
  transition: transform var(--accordion-transition);
  content: "";
  transform: translate(0, -50%) rotate(45deg);
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 0;
  margin-top: -2px;
  padding: 3px;
  border-width: 0 3px 3px 0;
  border-style: solid;
  color: var(--accordion-icon-color);
}

[beefup].is-open > [beefup__head]::after {
  transform: translate(0, -50%) rotate(225deg);
  margin-top: 2px;
  color: var(--accordion-icon-color);

}

[beefup__head],
[beefup] button {

}

/* ACTIVE */
[beefup].is-open button {
  color: var(--accordion-active-color);
}

[beefup] button:hover {

}

[beefup].is-open [beefup__head] {
  /* background: lightgray; */
}

[beefup__head]::after {
  z-index: 20;
}