/* ============================================================
   Promo 13 — 3D play scene (alphabet blocks + floating shapes)
   Playful, vibrant, on-theme for an educational kids store.
   ============================================================ */
.ipromo13 {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 420px; border-radius: var(--radius-2xl);
    display: grid; place-items: center; padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px);
    perspective: 1200px;
    background:
        radial-gradient(60% 80% at 82% 16%, rgba(255,176,64,.32), transparent 55%),
        radial-gradient(55% 75% at 14% 88%, rgba(255,84,148,.28), transparent 55%),
        radial-gradient(60% 70% at 50% 45%, rgba(120,160,255,.20), transparent 72%),
        linear-gradient(125deg, #1a2bd4 0%, #3a22b8 52%, #6b2bcf 100%);
    box-shadow: var(--cloud);
}
.ipromo13__glow { position: absolute; border-radius: 50%; filter: blur(36px); z-index: 0; }
.ipromo13__glow.g1 { width: 320px; height: 320px; background: rgba(255,196,86,.40); inset-block-start: -90px; inset-inline-end: -60px; animation: p13float 9s ease-in-out infinite; }
.ipromo13__glow.g2 { width: 280px; height: 280px; background: rgba(255,96,156,.36); inset-block-end: -90px; inset-inline-start: -50px; animation: p13float 11s ease-in-out 1s infinite; }
.ipromo13__dots { position: absolute; inset: 0; z-index: 0; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.5px);
    background-size: 26px 26px; mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 75%); }

/* ---- 3D scene layer (mouse-tilt via [data-tilt]) ---- */
.ipromo13__scene { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; transition: transform .25s ease; pointer-events: none; }

/* ---- 3D cubes (alphabet / number blocks) ---- */
.p13cube { position: absolute; width: 92px; height: 92px; transform-style: preserve-3d; }
.p13cube--abc { animation: p13spin 16s linear infinite; }
.p13cube--num { animation: p13spin 20s linear infinite reverse; }
.c-tl { inset-block-start: 16%; inset-inline-start: 7%; }
.c-br { inset-block-end: 14%; inset-inline-end: 8%; }
.p13face {
    position: absolute; width: 92px; height: 92px; display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: #fff;
    border-radius: 16px; border: 3px solid rgba(255,255,255,.55);
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.12); backface-visibility: visible;
    text-shadow: 0 2px 5px rgba(0,0,0,.22);
}
.p13cube--abc .f-front  { background: #ff7a59; transform: translateZ(46px); }
.p13cube--abc .f-back   { background: #ffc24d; transform: rotateY(180deg) translateZ(46px); }
.p13cube--abc .f-right  { background: #ff5e9c; transform: rotateY(90deg) translateZ(46px); }
.p13cube--abc .f-left   { background: #5ad1c4; transform: rotateY(-90deg) translateZ(46px); }
.p13cube--abc .f-top    { background: #7c5cff; transform: rotateX(90deg) translateZ(46px); }
.p13cube--abc .f-bottom { background: #4f86ff; transform: rotateX(-90deg) translateZ(46px); }
.p13cube--num .f-front  { background: #5ad1c4; transform: translateZ(46px); }
.p13cube--num .f-back   { background: #4f86ff; transform: rotateY(180deg) translateZ(46px); }
.p13cube--num .f-right  { background: #ffc24d; transform: rotateY(90deg) translateZ(46px); }
.p13cube--num .f-left   { background: #ff7a59; transform: rotateY(-90deg) translateZ(46px); }
.p13cube--num .f-top    { background: #ff5e9c; transform: rotateX(90deg) translateZ(46px); }
.p13cube--num .f-bottom { background: #7c5cff; transform: rotateX(-90deg) translateZ(46px); }

/* ---- soft floating shapes ---- */
.p13shape { position: absolute; border-radius: 50%; }
.p13ball { width: 64px; height: 64px; inset-block-start: 20%; inset-inline-end: 24%;
    background: radial-gradient(circle at 32% 28%, #fff, #ff9f43 45%, #ff6b2c 100%);
    box-shadow: 0 14px 26px -8px rgba(255,107,44,.5); animation: p13float 7s ease-in-out infinite; }
.p13star { width: 58px; height: 58px; inset-block-end: 22%; inset-inline-start: 15%; display: grid; place-items: center;
    background: linear-gradient(160deg, #ffd86b, #ffac33); box-shadow: 0 14px 26px -8px rgba(255,172,51,.55);
    border-radius: 22px; transform: rotate(-12deg); animation: p13float 8.5s ease-in-out .4s infinite; }
.p13star .material-symbols-outlined { color: #fff; font-size: 2rem; font-variation-settings: 'FILL' 1; }
.p13crayon { width: 22px; height: 96px; inset-block-start: 56%; inset-inline-start: 5%; border-radius: 999px;
    background: linear-gradient(180deg, #ff5e9c 0 18%, #ff7a59 18% 100%);
    box-shadow: 0 14px 26px -8px rgba(255,94,156,.5); transform: rotate(24deg); animation: p13float 9.5s ease-in-out .8s infinite; }
.p13crayon::before { content:""; position:absolute; inset-block-start:-12px; inset-inline:0; height:14px; background:#fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.p13ring { width: 70px; height: 70px; inset-block-start: 12%; inset-inline-end: 7%; border-radius: 50%;
    border: 12px solid rgba(255,255,255,.32); animation: p13float 10s ease-in-out infinite; }

/* ---- content ---- */
.ipromo13__content { position: relative; z-index: 3; text-align: center; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 16px;
    transform-style: preserve-3d; }
.ip13__eye { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--radius-full);
    background: rgba(255,255,255,.18); backdrop-filter: blur(6px); color: #fff; font-weight: 800; font-size: .9rem; box-shadow: 0 6px 18px -8px rgba(0,0,0,.3); }
.ip13__eye .material-symbols-outlined { font-size: 1.15rem; }
.ip13__title { font-family: var(--font-display); font-weight: 800; color: #fff; line-height: 1.08;
    font-size: clamp(1.9rem, 4.4vw, 3.2rem); text-shadow: 0 4px 18px rgba(10,12,40,.35); }
.ip13__text { color: rgba(255,255,255,.92); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 44ch; }
.ip13__btn { background: #fff; color: #1a2bd4; font-weight: 800; padding: 15px 30px; box-shadow: 0 16px 30px -10px rgba(0,0,0,.4); margin-top: 6px; }
.ip13__btn:hover { transform: translateY(-3px) scale(1.03); }
.ip13__btn .material-symbols-outlined { font-size: 1.2rem; }

@keyframes p13spin { to { transform: rotateX(360deg) rotateY(360deg); } }
@keyframes p13float { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-16px) rotate(var(--r,0deg)); } }
.p13star { --r: -12deg; } .p13crayon { --r: 24deg; }

@media (max-width: 760px) {
    .ipromo13 { min-height: 360px; }
    .p13cube { width: 64px; height: 64px; }
    .p13face { width: 64px; height: 64px; font-size: 1.8rem; }
    .p13cube--abc .f-front { transform: translateZ(32px); } .p13cube--abc .f-back { transform: rotateY(180deg) translateZ(32px); }
    .p13cube--abc .f-right { transform: rotateY(90deg) translateZ(32px); } .p13cube--abc .f-left { transform: rotateY(-90deg) translateZ(32px); }
    .p13cube--abc .f-top { transform: rotateX(90deg) translateZ(32px); } .p13cube--abc .f-bottom { transform: rotateX(-90deg) translateZ(32px); }
    .p13cube--num .f-front { transform: translateZ(32px); } .p13cube--num .f-back { transform: rotateY(180deg) translateZ(32px); }
    .p13cube--num .f-right { transform: rotateY(90deg) translateZ(32px); } .p13cube--num .f-left { transform: rotateY(-90deg) translateZ(32px); }
    .p13cube--num .f-top { transform: rotateX(90deg) translateZ(32px); } .p13cube--num .f-bottom { transform: rotateX(-90deg) translateZ(32px); }
    .c-tl { inset-block-start: 6%; inset-inline-start: 3%; } .c-br { inset-block-end: 6%; inset-inline-end: 3%; }
    .p13ball { width: 42px; height: 42px; } .p13ring, .p13crayon { display: none; }
    .p13star { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .p13cube--abc, .p13cube--num, .ipromo13__glow, .p13shape { animation: none; }
}

/* ---- Arabic glyphs on the blocks ---- */
.p13face { font-family: 'IBM Plex Sans Arabic', var(--font-display), sans-serif; }

/* ---- cute robot toy ---- */
.p13robot { position: absolute; width: 74px; height: 92px; inset-block-start: 30%; inset-inline-start: 9%; z-index: 2;
    animation: p13float 7.5s ease-in-out infinite; filter: drop-shadow(0 16px 22px rgba(8,10,40,.3)); }
.p13robot__antenna { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 3px; height: 16px; background: #ffd86b; border-radius: 2px; }
.p13robot__antenna::after { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: #ff5e9c; box-shadow: 0 0 12px rgba(255,94,156,.9); animation: p13pulse 1.6s ease-in-out infinite; }
.p13robot__head { position: absolute; top: 0; left: 6px; right: 6px; height: 42px; background: linear-gradient(160deg, #ffffff, #e7eeff); border-radius: 14px; border: 2px solid rgba(255,255,255,.8); }
.p13robot__eye { position: absolute; top: 15px; width: 11px; height: 11px; border-radius: 50%; background: #1a2bd4; animation: p13eye 3.4s ease-in-out infinite; }
.p13robot__head .p13robot__eye:nth-child(1) { left: 13px; }
.p13robot__head .p13robot__eye:nth-child(2) { right: 13px; }
.p13robot__mouth { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 22px; height: 7px; border-radius: 0 0 10px 10px; background: #5ad1c4; }
.p13robot__body { position: absolute; bottom: 0; left: 2px; right: 2px; height: 46px; background: linear-gradient(160deg, #4f86ff, #3a22b8); border-radius: 14px; border: 2px solid rgba(255,255,255,.18); }
.p13robot__btn { position: absolute; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: #ffd86b; }
.p13robot__body .p13robot__btn:nth-child(1) { left: calc(50% - 11px); }
.p13robot__body .p13robot__btn:nth-child(2) { left: calc(50% + 3px); }
.p13robot__arm { position: absolute; bottom: 16px; width: 7px; height: 26px; border-radius: 6px; background: #3a22b8; }
.p13robot__arm.l { left: -5px; transform: rotate(14deg); transform-origin: top; animation: p13wave 2.8s ease-in-out infinite; }
.p13robot__arm.r { right: -5px; transform: rotate(-14deg); transform-origin: top; animation: p13wave 2.8s ease-in-out .4s infinite reverse; }

/* ---- twinkling sparkles ---- */
.p13spark { position: absolute; width: 12px; height: 12px; background: #fff; z-index: 1;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    opacity: .9; animation: p13twinkle 2.6s ease-in-out infinite; }
.p13spark.s1 { top: 16%; left: 38%; } .p13spark.s2 { top: 64%; left: 44%; animation-delay: .5s; }
.p13spark.s3 { top: 30%; right: 30%; animation-delay: 1s; width: 9px; height: 9px; }
.p13spark.s4 { bottom: 22%; right: 24%; animation-delay: 1.4s; } .p13spark.s5 { top: 50%; left: 22%; animation-delay: .8s; width: 8px; height: 8px; }

/* ---- ball orbit (overrides float) ---- */
.p13ball.orbit { animation: p13orbit 9s ease-in-out infinite; }

@keyframes p13orbit { 0%,100% { transform: translate(0,0); } 25% { transform: translate(14px,-14px); } 50% { transform: translate(2px,-24px); } 75% { transform: translate(-14px,-12px); } }
@keyframes p13pulse { 0%,100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(1.4); opacity: .65; } }
@keyframes p13eye { 0%,42%,48%,100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } }
@keyframes p13twinkle { 0%,100% { transform: scale(.5) rotate(0); opacity: .25; } 50% { transform: scale(1) rotate(20deg); opacity: 1; } }
@keyframes p13wave { 0%,100% { transform: rotate(14deg); } 50% { transform: rotate(-8deg); } }

@media (max-width: 760px) { .p13robot { width: 54px; height: 68px; inset-block-start: auto; inset-block-end: 8%; inset-inline-start: 5%; } .p13robot__head { height: 30px; } .p13robot__body { height: 34px; } .p13spark.s3, .p13spark.s5 { display: none; } }
@media (prefers-reduced-motion: reduce) { .p13robot, .p13robot__arm, .p13robot__antenna::after, .p13robot__eye, .p13spark, .p13ball.orbit { animation: none; } }

/* reposition so the robot has its own clear zone (bottom-left), star moves right */
.p13robot { inset-block-start: auto; inset-block-end: 11%; inset-inline-start: 7%; }
.p13star  { inset-block-end: auto; inset-block-start: 40%; inset-inline-start: auto; inset-inline-end: 13%; }
.p13crayon { inset-block-start: 26%; inset-inline-start: 3%; }

/* ---- final balanced spacing (top-left block removed; pen is the top-left feature) ---- */
.p13crayon { inset-block-start: 14%; inset-block-end: auto; inset-inline-start: 6%; }
.p13star   { inset-block-start: 46%; inset-block-end: auto; inset-inline-start: 8%; inset-inline-end: auto; }
.p13robot  { inset-block-end: 11%; inset-block-start: auto; inset-inline-start: 6%; }
.p13ball   { inset-block-start: 19%; inset-inline-end: 19%; }
.p13ring   { inset-block-start: 13%; inset-inline-end: 7%; }
.c-br      { inset-block-end: 15%; inset-inline-end: 8%; }
@media (max-width: 760px) {
    .p13crayon { display: block; inset-block-start: 10%; inset-inline-start: 4%; }
    .p13star { inset-block-start: auto; inset-block-end: 12%; inset-inline-start: 36%; }
    .p13robot { inset-block-end: 8%; inset-inline-start: 4%; }
}

/* ---- Mobile: let the playful scene recede so the message reads clearly ----
   On narrow screens the floating 3D props crowd the centered text and the
   section feels squeezed. Give the content real breathing room and dim the
   decorative scene so it sits behind the message instead of fighting it. */
@media (max-width: 600px) {
    .ipromo13 {
        min-height: 0;
        padding: 48px 24px;
        gap: 0;
    }
    .ipromo13__scene { opacity: .45; }
    .ipromo13__content { gap: 14px; max-width: 100%; }
    .ip13__title { font-size: clamp(1.55rem, 7vw, 2.1rem); }
    .ip13__text { font-size: 1rem; max-width: 32ch; }
    .ip13__btn { padding: 13px 26px; }
    /* keep only a couple of small accents; hide the busiest props */
    .p13ring, .p13crayon, .p13spark.s2, .p13spark.s4 { display: none; }
    .p13ball { width: 36px; height: 36px; }
    .p13star { width: 38px; height: 38px; }
}

/* ════════ PROMO 13 — image-only autoplay slider ════════ */
.ipromo13--slider { padding: 0; background: none; min-height: 0; direction: ltr; }
.ipromo13s { position: relative; width: 100%; border-radius: var(--radius-xl, 1.5rem); overflow: hidden; box-shadow: var(--shadow-md, 0 8px 32px rgba(16,24,40,.10)); }
.ipromo13s__track { display: flex; width: 100%; aspect-ratio: 16 / 6; transition: transform .8s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.ipromo13s__slide { flex: 0 0 100%; height: 100%; }
.ipromo13s__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipromo13s__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,.85); color: #111; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: background .15s, transform .15s; }
.ipromo13s__nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.ipromo13s__nav.prev { inset-inline-start: 14px; }
.ipromo13s__nav.next { inset-inline-end: 14px; }
.ipromo13s__dots { position: absolute; inset-block-end: 14px; inset-inline: 0; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.ipromo13s__dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; transition: background .2s, width .2s; }
.ipromo13s__dot.is-active { background: #fff; width: 24px; border-radius: 999px; }
@media (max-width: 768px) {
    .ipromo13s__track { aspect-ratio: 16 / 9; }
    .ipromo13s__nav { width: 36px; height: 36px; }
    .ipromo13s__nav .material-symbols-outlined { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .ipromo13s__track { transition: none; } }