/**
 * OIC Card Theme v3.1 — الهوية البصرية
 * ═══════════════════════════════════════════
 * كل ما يتعلق بالألوان والخلفيات والتأثيرات.
 * البنية الهيكلية في card-engine.css
 *
 * القيم الثابتة (مغلقة — لا تُغيّر من اللوحة):
 *   pad-top/bottom: 40px | grid-gap: 10px | shadow: md
 *   border: 1px solid | radius: من core.css | hover: lift/zoom
 *   accent: primary فقط | btn: افتراضي | cat: badge
 * ═══════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════╗
   ║  0. القيم الثابتة — LOCKED DEFAULTS                    ║
   ╠══════════════════════════════════════════════════════════╣
   ║  هذه القيم لا تتغير من لوحة التحكم                     ║
   ║  تغييرها = تغيير الهوية البصرية الكاملة               ║
   ╚══════════════════════════════════════════════════════════╝ */

/* السكشن */
.oic-section{padding:0}
.oic-section-bg{box-shadow:var(--shadow,0 4px 12px rgba(0,0,0,.1))}

/* ═══ أنماط البلوك — تقرأ من النمط ═══ */
.oic-sb-sec.block-bordered{border:var(--border-width,1px) solid var(--c-border,rgba(255,255,255,.15));border-radius:var(--radius,12px);padding:32px 24px}
.oic-sb-sec.block-glass{border:var(--border-width,1px) solid rgba(255,255,255,.12);border-radius:var(--radius,12px);padding:32px 24px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.04)!important}
.oic-sb-sec.block-glow{border:var(--border-width,1px) solid rgba(99,102,241,.3);border-radius:var(--radius,12px);padding:32px 24px;box-shadow:0 0 30px rgba(99,102,241,.15),0 0 60px rgba(139,92,246,.08)}
.oic-sb-sec.block-shadow{border-radius:var(--radius,12px);padding:32px 24px;box-shadow:var(--shadow-md,0 8px 32px rgba(0,0,0,.2))}

/* الكارد — القيم الافتراضية (من النمط) */
.oic-card{background:var(--c-bg,#fff);border:var(--border-width,1px) solid var(--c-border,#e2e8f0);box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.06));transition:transform .2s,box-shadow .2s}


/* ╔══════════════════════════════════════════════════════════╗
   ║  A. الأنماط اللونية — SKINS                             ║
   ╠══════════════════════════════════════════════════════════╣
   ║  كل نمط يعرّف: --card-bg, --card-border,               ║
   ║  --card-title-color, --card-text-color, --card-meta-color║
   ║  --card-cat-bg, --card-cat-color, --card-tag-bg,        ║
   ║  --card-tag-color, --card-btn-bg, --card-btn-color      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ─── A1. فاتح (Light) — الافتراضي ─── */

.oic-card{
    --card-title-color: var(--c-text, #1e293b);
    --card-text-color: var(--c-text-light, #64748b);
    --card-meta-color: var(--c-text-light, #94a3b8);
    --card-cat-bg: rgba(37,99,235,0.08);
    --card-cat-color: var(--c-primary, #2563eb);
    --card-tag-bg: rgba(0,0,0,0.04);
    --card-tag-color: var(--c-text-light, #64748b);
    --card-tag-border: var(--c-border, #e2e8f0);
    --card-btn-bg: var(--c-primary, #2563eb);
    --card-btn-color: #fff;
    --card-btn-hover-bg: var(--c-primary-dark, #1d4ed8);
}

/* أنماط الخلفية الفاتحة */
.card--classic{background:var(--c-bg,#fff);border:var(--border-width,1px) solid var(--c-border,#e2e8f0)}
.card--flat{background:transparent;border:none;box-shadow:none}
.card--shadow{background:var(--c-bg,#fff);box-shadow:var(--shadow-md,0 4px 6px rgba(0,0,0,0.07))}
.card--outline{background:transparent;border:2px solid var(--c-border,#e2e8f0)}

/* تطبيق المتغيرات */
.oic-card__title a{color:var(--card-title-color)}
.oic-card__excerpt{color:var(--card-text-color)}
.oic-card__meta{color:var(--card-meta-color);background:rgba(255,255,255,0.85)}
.oic-card__meta span{color:var(--card-title-color)}
.oic-card__cat{background:var(--card-cat-bg);color:var(--card-cat-color)}
.oic-card__cat:hover{background:var(--c-primary,#2563eb);color:#fff}
.oic-card__tag{background:var(--card-tag-bg);color:var(--card-tag-color);border:1px solid var(--card-tag-border)}
.oic-card__tag:hover{background:var(--c-primary,#2563eb);color:#fff;border-color:var(--c-primary,#2563eb)}
.oic-card__btn{background:var(--card-btn-bg);color:var(--card-btn-color)}
.oic-card__btn:hover{background:var(--card-btn-hover-bg);filter:brightness(1.1)}
.oic-card__placeholder{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#94a3b8}

/* hover عنوان — يتبع اللون الأساسي */
.oic-card:hover .oic-card__title a{color:var(--c-primary,#2563eb)}


/* ─── A2. داكن (Dark) ─── */

.card--dark,
.skin--dark{
    --card-title-color: #f1f5f9;
    --card-text-color: #94a3b8;
    --card-meta-color: #64748b;
    --card-cat-bg: rgba(99,102,241,0.2);
    --card-cat-color: #818cf8;
    --card-tag-bg: #334155;
    --card-tag-color: #94a3b8;
    --card-tag-border: #475569;
    --card-btn-bg: #6366f1;
    --card-btn-color: #fff;
    --card-btn-hover-bg: #4f46e5;
    background: #1e293b;
    color: #f1f5f9;
    border: var(--border-width,1px) solid #334155;
}
.card--dark .oic-card__meta,
.skin--dark .oic-card__meta{background:rgba(0,0,0,0.4);color:#64748b}
.card--dark .oic-card__cat:hover,
.skin--dark .oic-card__cat:hover{background:#6366f1;color:#fff}
.card--dark:hover,
.skin--dark:hover{border-color:#6366f1;box-shadow:var(--shadow-md,0 0 20px rgba(99,102,241,0.15))}
.card--dark:hover .oic-card__title a,
.skin--dark:hover .oic-card__title a{color:#93c5fd}


/* ─── A3. زجاجي (Glass) ─── */

.card--glass,
.skin--glass{
    --card-title-color: #fff;
    --card-text-color: rgba(255,255,255,0.75);
    --card-meta-color: rgba(255,255,255,0.5);
    --card-cat-bg: rgba(255,255,255,0.18);
    --card-cat-color: #fff;
    --card-tag-bg: rgba(255,255,255,0.1);
    --card-tag-color: rgba(255,255,255,0.8);
    --card-tag-border: rgba(255,255,255,0.2);
    --card-btn-bg: rgba(255,255,255,0.12);
    --card-btn-color: #fff;
    --card-btn-hover-bg: #fff;
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(236,72,153,0.08));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.card--glass .oic-card__meta,
.skin--glass .oic-card__meta{background:rgba(0,0,0,0.3);color:rgba(255,255,255,0.5)}
.card--glass .oic-card__btn:hover,
.skin--glass .oic-card__btn:hover{color:#1e293b;filter:none}
.card--glass:hover,
.skin--glass:hover{background:linear-gradient(135deg,rgba(139,92,246,0.18),rgba(236,72,153,0.12));box-shadow:var(--shadow-md,0 8px 32px rgba(0,0,0,0.2))}
.card--glass:hover .oic-card__title a,
.skin--glass:hover .oic-card__title a{color:#93c5fd}

/* متغيرات الزجاج الإضافية */
.card--glass-dark{
    --card-title-color: #f1f5f9;
    --card-text-color: rgba(255,255,255,0.7);
    --card-meta-color: rgba(255,255,255,0.4);
    --card-cat-bg: rgba(255,255,255,0.12);
    --card-cat-color: #e2e8f0;
    background: linear-gradient(135deg,rgba(15,23,42,0.85),rgba(30,41,59,0.75));
    backdrop-filter: blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.08);color:#f1f5f9;
}
.card--glass-frosted{
    --card-title-color: #1e293b;
    --card-text-color: #475569;
    --card-meta-color: #94a3b8;
    --card-cat-bg: rgba(37,99,235,0.1);
    --card-cat-color: var(--c-primary,#2563eb);
    background: linear-gradient(135deg,rgba(255,255,255,0.75),rgba(248,250,252,0.65));
    backdrop-filter: blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.5);color:#1e293b;
    box-shadow:var(--shadow,0 4px 16px rgba(0,0,0,0.06));
}
.card--glass-vivid{
    --card-title-color: #fff;
    --card-text-color: rgba(255,255,255,0.8);
    --card-cat-bg: rgba(255,255,255,0.2);
    --card-cat-color: #fff;
    background: linear-gradient(135deg,rgba(236,72,153,0.25),rgba(139,92,246,0.2),rgba(59,130,246,0.15));
    backdrop-filter: blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.2);color:#fff;
}
.card--glass-neon{
    --card-title-color: #e0e7ff;
    --card-text-color: rgba(199,210,254,0.8);
    --card-cat-bg: rgba(99,102,241,0.3);
    --card-cat-color: #a5b4fc;
    --card-btn-bg: #6366f1;
    --card-btn-color: #fff;
    background: linear-gradient(135deg,rgba(99,102,241,0.15),rgba(139,92,246,0.1));
    backdrop-filter: blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(99,102,241,0.3);color:#e0e7ff;
    box-shadow:var(--shadow,0 0 15px rgba(99,102,241,0.15));
}
.card--glass-neon:hover{box-shadow:0 0 30px rgba(99,102,241,0.3);border-color:#6366f1}
.card--glass-rainbow{
    --card-title-color: #fff;
    --card-text-color: rgba(255,255,255,0.8);
    --card-cat-bg: rgba(255,255,255,0.15);
    --card-cat-color: #fff;
    --card-btn-bg: linear-gradient(135deg,#8b5cf6,#ec4899);
    --card-btn-color: #fff;
    background: linear-gradient(135deg,rgba(139,92,246,0.12),rgba(236,72,153,0.08));
    backdrop-filter: blur(16px);-webkit-backdrop-filter:blur(16px);
    border:2px solid transparent;
    background-clip: padding-box;color:#fff;position:relative;
}
.card--glass-rainbow::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899,#f59e0b);z-index:-1}

/* hover عناصر الزجاج المتقدمة */
.card--glass-dark:hover .oic-card__title a,
.card--glass-frosted:hover .oic-card__title a{color:var(--c-primary,#2563eb)}
.card--glass-vivid:hover .oic-card__title a,
.card--glass-neon:hover .oic-card__title a,
.card--glass-rainbow:hover .oic-card__title a{color:#93c5fd}


/* ─── A4. تراكبي — ألوان ثابتة ─── */
/* التراكبي دائماً نص أبيض بسبب الخلفية المظلمة */
.card--o{
    --card-title-color: #fff;
    --card-text-color: rgba(255,255,255,0.85);
    --card-meta-color: rgba(255,255,255,0.6);
    --card-cat-bg: var(--c-primary, #2563eb);
    --card-cat-color: #fff;
    --card-tag-bg: rgba(255,255,255,0.15);
    --card-tag-color: rgba(255,255,255,0.9);
    --card-tag-border: rgba(255,255,255,0.2);
}
.card--o .oic-card__meta{background:rgba(0,0,0,0.4)}
.card--o:hover .oic-card__title a{color:#93c5fd}


/* ╔══════════════════════════════════════════════════════════╗
   ║  B. الإطارات — FRAMES                                   ║
   ╠══════════════════════════════════════════════════════════╣
   ║  تُطبّق فوق أي نمط لوني. تتحكم بالحدود والهوامش.      ║
   ╚══════════════════════════════════════════════════════════╝ */
.frame--flat{border:0;background:transparent;box-shadow:none}
.frame--bordered{border:1px solid var(--c-border,#e2e8f0)}
.frame--padded{border:1px solid var(--c-border,#e2e8f0);padding:6px}
.frame--spaced{border:1px solid var(--c-border,#e2e8f0);padding:6px;gap:4px;display:flex}
.frame--rounded{border:var(--border-width,1px) solid var(--c-border,#e2e8f0);--card-radius:var(--radius,12px)}

/* إطارات + داكن */
.card--dark.frame--bordered,.skin--dark.frame--bordered{border-color:var(--c-border,#475569)}
.card--dark.frame--padded,.skin--dark.frame--padded{border-color:var(--c-border,#475569);background:var(--c-bg,#0f172a)}
.card--dark.frame--spaced,.skin--dark.frame--spaced{border-color:var(--c-border,#475569);background:var(--c-bg,#0f172a)}
.card--dark.frame--rounded,.skin--dark.frame--rounded{border-color:var(--c-border,#475569)}

/* إطارات + زجاجي */
.card--glass.frame--bordered,.skin--glass.frame--bordered{border-color:rgba(255,255,255,0.2)}
.card--glass.frame--padded,.skin--glass.frame--padded{border-color:rgba(255,255,255,0.2)}
.card--glass.frame--rounded,.skin--glass.frame--rounded{border-color:rgba(255,255,255,0.2)}


/* ╔══════════════════════════════════════════════════════════╗
   ║  C. تأثيرات الهوفر + الظل — EFFECTS                    ║
   ╚══════════════════════════════════════════════════════════╝ */
.card--hover-lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-md,0 12px 24px rgba(0,0,0,0.1))}
.card--hover-zoom:hover .oic-card__media img{transform:scale(1.08)}
.card--hover-glow:hover{box-shadow:0 0 30px rgba(var(--c-primary-rgb,37,99,235),0.15)}
.card--hover-dark:hover .oic-card__media img{filter:brightness(0.7)}
.card--shadow:hover{box-shadow:var(--shadow-md,0 20px 60px rgba(0,0,0,0.12))}

/* أنماط الأزرار — ألوان */
.oic-card__btn--outline{background:transparent;border-color:var(--card-btn-bg);color:var(--card-btn-bg)}
.oic-card__btn--outline:hover{background:var(--card-btn-bg);color:#fff}
.oic-card__btn--like{background:#fee2e2;color:#ef4444}
.oic-card__btn--like:hover{background:#ef4444;color:#fff}
.oic-card__btn--green{background:#059669;color:#fff}
.oic-card__btn--green:hover{background:#047857}

/* التصنيف — underline لون */
.oic-card__cat--underline{background:transparent;border-bottom:2px solid var(--c-primary,#2563eb);border-radius:0}
.oic-card__cat--badge{background:var(--card-cat-bg);color:var(--card-cat-color)}


/* ╔══════════════════════════════════════════════════════════╗
   ║  D. ألوان إضافية + خلفيات الأقسام — ACCENTS           ║
   ╚══════════════════════════════════════════════════════════╝ */

/* أخضر */
.oic-card--green{--card-cat-bg:rgba(5,150,105,0.1);--card-cat-color:#059669;--card-btn-bg:#059669;--card-btn-hover-bg:#047857}
.oic-card--green .oic-card__cat:hover{background:#059669;color:#fff}

/* أحمر */
.oic-card--red{--card-cat-bg:rgba(239,68,68,0.1);--card-cat-color:#ef4444;--card-btn-bg:#ef4444;--card-btn-hover-bg:#dc2626}

/* برتقالي */
.oic-card--orange{--card-cat-bg:rgba(245,158,11,0.1);--card-cat-color:#f59e0b;--card-btn-bg:#f59e0b;--card-btn-hover-bg:#d97706}

/* ─── خلفيات الأقسام ─── */
.oic-bg-dark{background:#0f172a;padding:24px;border-radius:var(--radius,12px)}
.oic-bg-glass{background:radial-gradient(circle at top right,#4f46e5,transparent 50%),radial-gradient(circle at bottom left,#ec4899,transparent 50%),#1e1b4b;padding:24px;border-radius:var(--radius,12px)}
.oic-bg-gradient{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#4c1d95 100%);padding:24px;border-radius:var(--radius,12px)}
.oic-section-bg{padding:24px;border-radius:var(--radius,12px);position:relative;overflow:hidden;background:radial-gradient(circle at top right,#4f46e5,transparent 50%),radial-gradient(circle at bottom left,#ec4899,transparent 50%),#1e1b4b}
.oic-section-bg.b-16{border:2px solid transparent;background-clip:padding-box!important;overflow:visible!important;background:radial-gradient(circle at 20% 30%,rgba(168,85,247,.75),transparent 60%),radial-gradient(circle at 80% 35%,rgba(59,130,246,.55),transparent 65%),radial-gradient(circle at 55% 80%,rgba(236,72,153,.35),transparent 65%),#070a16!important}
.oic-section-bg.b-16::before{content:'';position:absolute;inset:-4px;border-radius:calc(var(--radius,12px) + 8px);background:linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899,#f59e0b,#22c55e,#06b6d4,#3b82f6);background-size:400% 400%;animation:oicRainbowBorder 6s ease infinite;z-index:-1;pointer-events:none}
.oic-section-bg.b-16::after{content:'';position:absolute;inset:3px;border-radius:calc(var(--radius,12px) + 2px);background:radial-gradient(circle at top right,#312e81,transparent 55%),radial-gradient(circle at bottom left,#4c1d95,transparent 55%),#1e1b4b;z-index:0;pointer-events:none}
.oic-section-bg.b-16>*{position:relative;z-index:1}
.oic-section-bg .oic-section__title{color:#f1f5f9}
.oic-section-bg .oic-section__header{border-color:rgba(255,255,255,0.15)}
.oic-section-bg .oic-section__more{color:#93c5fd}

/* كروت داخل خلفية القسم — تتحول زجاجي تلقائياً */
.oic-section-bg .oic-card:not(.card--dark):not(.card--o),
.oic-section-bg .oic-card.card--classic,
.oic-section-bg .oic-card.card--shadow,
.oic-section-bg .oic-card.card--flat,
.oic-section-bg .oic-card.card--outline{
    --card-title-color: #fff;
    --card-text-color: rgba(255,255,255,0.75);
    --card-meta-color: rgba(255,255,255,0.5);
    --card-cat-bg: rgba(255,255,255,0.18);
    --card-cat-color: #fff;
    --card-btn-bg: rgba(255,255,255,0.12);
    --card-btn-color: #fff;
    --card-tag-bg: rgba(255,255,255,0.1);
    --card-tag-color: rgba(255,255,255,0.8);
    --card-tag-border: rgba(255,255,255,0.2);
    background:linear-gradient(135deg,rgba(139,92,246,0.1),rgba(59,130,246,0.08));
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.12);color:#fff;
    box-shadow:var(--shadow-md,0 4px 20px rgba(0,0,0,0.15));
}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o) .oic-card__btn:hover,
.oic-section-bg .oic-card.card--classic .oic-card__btn:hover{background:#fff;color:#1e293b;filter:none}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o):hover,
.oic-section-bg .oic-card.card--classic:hover{background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(59,130,246,0.12));box-shadow:var(--shadow-md,0 8px 32px rgba(0,0,0,0.2))}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o) .oic-card__title a{color:#fff}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o) .oic-card__excerpt{color:rgba(255,255,255,0.75)}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o) .oic-card__meta{color:rgba(255,255,255,0.5);background:rgba(0,0,0,0.3)}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o) .oic-card__cat{background:rgba(255,255,255,0.18);color:#fff}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o) .oic-card__tag{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);border-color:rgba(255,255,255,0.2)}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o) .oic-card__btn{background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(4px)}
.oic-section-bg .oic-card:not(.card--dark):not(.card--o):hover .oic-card__title a{color:#93c5fd}

/* Rainbow animation */
@keyframes oicRainbowBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ╔══════════════════════════════════════════════════════════╗
   ║  E. أشكال الخلفية المتحركة — ANIMATED BG SHAPES       ║
   ╠══════════════════════════════════════════════════════════╣
   ║  تُضاف كـ class على oic-section-bg                     ║
   ║  bg-shapes--circles: دوائر متداخلة متحركة              ║
   ║  bg-shapes--blobs: فقاعات ناعمة                        ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── دوائر متداخلة ── */
.bg-shapes--circles{position:relative;overflow:hidden}
.bg-shapes--circles::before,
.bg-shapes--circles::after{
    content:'';position:absolute;border-radius:50%;
    opacity:0.25;pointer-events:none;z-index:0;
    mix-blend-mode:screen;
}
.bg-shapes--circles::before{
    width:380px;height:380px;
    top:-80px;right:-60px;
    background:radial-gradient(circle,rgba(236,72,153,0.6),transparent 70%);
    animation:oicFloat 12s ease-in-out infinite;
}
.bg-shapes--circles::after{
    width:320px;height:320px;
    bottom:-60px;left:-40px;
    background:radial-gradient(circle,rgba(59,130,246,0.5),transparent 70%);
    animation:oicFloat 15s ease-in-out infinite reverse;
}
/* دائرة ثالثة عبر عنصر إضافي */
.bg-shapes--circles .oic-section__header::before{
    content:'';position:absolute;border-radius:50%;
    width:260px;height:260px;
    top:50%;left:50%;transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(139,92,246,0.4),transparent 70%);
    opacity:0.2;pointer-events:none;z-index:0;
    mix-blend-mode:screen;
    animation:oicFloat 10s ease-in-out infinite 2s;
}
.bg-shapes--circles .oic-section__header{position:relative}
.bg-shapes--circles>*{position:relative;z-index:1}

/* ── فقاعات ناعمة ── */
.bg-shapes--blobs{position:relative;overflow:hidden}
.bg-shapes--blobs::before,
.bg-shapes--blobs::after{
    content:'';position:absolute;border-radius:40% 60% 55% 45% / 55% 40% 60% 45%;
    opacity:0.15;pointer-events:none;z-index:0;
    mix-blend-mode:screen;
}
.bg-shapes--blobs::before{
    width:400px;height:400px;
    top:-100px;right:-80px;
    background:linear-gradient(135deg,rgba(168,85,247,0.5),rgba(236,72,153,0.3));
    animation:oicMorph 18s ease-in-out infinite;
}
.bg-shapes--blobs::after{
    width:350px;height:350px;
    bottom:-80px;left:-60px;
    background:linear-gradient(135deg,rgba(34,211,238,0.4),rgba(59,130,246,0.3));
    animation:oicMorph 22s ease-in-out infinite reverse;
}
.bg-shapes--blobs>*{position:relative;z-index:1}

/* الحركات */
@keyframes oicFloat{
    0%,100%{transform:translate(0,0) scale(1)}
    25%{transform:translate(20px,-15px) scale(1.05)}
    50%{transform:translate(-10px,20px) scale(0.95)}
    75%{transform:translate(-20px,-10px) scale(1.02)}
}
@keyframes oicMorph{
    0%,100%{border-radius:40% 60% 55% 45% / 55% 40% 60% 45%;transform:translate(0,0) rotate(0deg)}
    33%{border-radius:55% 45% 40% 60% / 45% 55% 45% 55%;transform:translate(15px,-10px) rotate(5deg)}
    66%{border-radius:45% 55% 60% 40% / 60% 45% 55% 40%;transform:translate(-15px,15px) rotate(-3deg)}
}