/* =========================================================
   MULTIMEDIA I ANIMACJE NAUKOWE — 9 KART
   działa na komputerze i telefonie
   ========================================================= */

.science-zone-9{
    position:relative;
    padding:74px 18px;
    background:
        radial-gradient(circle at 12% 18%, rgba(0,212,255,.23), transparent 30%),
        radial-gradient(circle at 88% 10%, rgba(0,255,136,.13), transparent 28%),
        radial-gradient(circle at 70% 90%, rgba(255,180,0,.12), transparent 30%),
        linear-gradient(135deg,#00112f,#003477 52%,#001a3f);
    color:#fff;
    overflow:hidden;
}

.science-zone-9::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1px),
        radial-gradient(circle, rgba(0,212,255,.36) 1px, transparent 1px);
    background-size:34px 34px, 58px 58px;
    opacity:.18;
    animation:starsMove9 18s linear infinite;
}

@keyframes starsMove9{
    to{transform:translateY(-75px)}
}

.science-zone-9-inner{
    position:relative;
    z-index:2;
    max-width:1280px;
    margin:auto;
}

.science-zone-9-title{
    text-align:center;
    margin-bottom:38px;
}

.science-zone-9-title span{
    display:inline-block;
    padding:9px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    color:#9fe7ff;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:.86rem;
}

.science-zone-9-title h2{
    margin:16px 0 12px;
    font-size:clamp(2rem,5vw,4rem);
    line-height:1.05;
}

.science-zone-9-title p{
    max-width:880px;
    margin:auto;
    color:rgba(255,255,255,.88);
    font-size:clamp(1rem,2.4vw,1.18rem);
}

.science-zone-9-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.science-card-9{
    position:relative;
    min-height:420px;
    padding:26px;
    border-radius:30px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 24px 70px rgba(0,0,0,.32);
    overflow:hidden;
    backdrop-filter:blur(12px);
    animation:floatCard9 6.2s ease-in-out infinite;
}

.science-card-9:nth-child(2n){animation-delay:1s}
.science-card-9:nth-child(3n){animation-delay:2s}

@keyframes floatCard9{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

.science-card-9 h3{
    margin:0 0 10px;
    font-size:clamp(1.34rem,2.2vw,1.62rem);
    line-height:1.16;
}

.science-card-9 p{
    color:rgba(255,255,255,.88);
    line-height:1.52;
    margin:0 0 16px;
}

.science-badge-9{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    padding:8px 13px;
    border-radius:999px;
    background:rgba(0,212,255,.16);
    border:1px solid rgba(0,212,255,.32);
    color:#bff4ff;
    font-size:.9rem;
    font-weight:800;
}

.anim-area-9{
    position:relative;
    height:220px;
    margin:18px auto 16px;
    border-radius:24px;
    background:rgba(0,0,0,.16);
    overflow:hidden;
}

.tags-9{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.tags-9 span{
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    font-size:.82rem;
    color:#eafcff;
}

/* 1 FIZYKA — planety */
.orbit-scene9{display:flex;align-items:center;justify-content:center}
.sun9{
    position:absolute;width:60px;height:60px;border-radius:50%;
    background:radial-gradient(circle,#fff7a8 0%,#ffd000 42%,#ff7a00 78%);
    box-shadow:0 0 45px rgba(255,208,0,.95),0 0 90px rgba(255,122,0,.45);
    animation:sunPulse9 2.2s ease-in-out infinite;
}
@keyframes sunPulse9{50%{transform:scale(1.08)}}
.orbit9{
    position:absolute;border:1px solid rgba(255,255,255,.24);border-radius:50%;
    animation:rotate9 linear infinite;
}
.orbit9.o1{width:110px;height:110px;animation-duration:5s}
.orbit9.o2{width:158px;height:158px;animation-duration:8s}
.orbit9.o3{width:205px;height:205px;animation-duration:12s}
.planet9{
    position:absolute;top:50%;right:-8px;width:16px;height:16px;margin-top:-8px;border-radius:50%;
    background:#56d9ff;box-shadow:0 0 16px rgba(86,217,255,.9);
}
.o2 .planet9{width:18px;height:18px;right:-9px;background:#00ff88}
.o3 .planet9{width:22px;height:22px;right:-11px;background:#ff77f7}
@keyframes rotate9{to{transform:rotate(360deg)}}

/* 2 CHEMIA */
.chem-scene9{display:flex;align-items:center;justify-content:center;gap:14px}
.flask9{position:relative;width:105px;height:142px}
.flask9:before{
    content:"";position:absolute;left:38px;top:0;width:30px;height:50px;
    border:4px solid rgba(255,255,255,.88);border-bottom:none;border-radius:12px 12px 0 0;
}
.flask-body9{
    position:absolute;left:6px;bottom:0;width:94px;height:100px;
    border:4px solid rgba(255,255,255,.88);border-radius:18px 18px 38px 38px;overflow:hidden;
}
.flask-liquid9{
    position:absolute;left:0;bottom:0;width:100%;height:58%;
    background:linear-gradient(180deg,#91fff7,#13d56f);
    animation:liquid9 2.2s ease-in-out infinite;
}
@keyframes liquid9{50%{height:68%;filter:hue-rotate(70deg)}}
.bubble9{
    position:absolute;bottom:16px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.9);
    animation:bubbleUp9 2s linear infinite;
}
.bubble9:nth-child(2){left:23px;animation-delay:.15s}
.bubble9:nth-child(3){left:48px;animation-delay:.55s}
.bubble9:nth-child(4){left:69px;animation-delay:.9s}
@keyframes bubbleUp9{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translateY(-100px) scale(1.3);opacity:0}}
.molecule9{position:relative;width:110px;height:110px;animation:rotate9 5.5s linear infinite}
.molecule9 .atom9{position:absolute;width:24px;height:24px;border-radius:50%;background:#4de1ff;box-shadow:0 0 18px rgba(77,225,255,.9)}
.molecule9 .atom9:nth-child(1){left:43px;top:0;background:#fff}
.molecule9 .atom9:nth-child(2){left:0;top:68px;background:#00ff88}
.molecule9 .atom9:nth-child(3){right:0;top:68px;background:#ff77f7}
.bond9{position:absolute;height:4px;width:74px;background:rgba(255,255,255,.6);left:20px;top:56px;transform-origin:center}
.bond9.b1{transform:rotate(55deg)}
.bond9.b2{transform:rotate(-55deg)}

/* 3 WETERYNARIA EKG */
.vet-ekg9{background:rgba(0,0,0,.24)}
.vet-ekg9:before{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(rgba(0,255,136,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,136,.14) 1px,transparent 1px);
    background-size:22px 22px;animation:grid9 8s linear infinite;
}
@keyframes grid9{to{background-position:44px 0}}
.ekg9{
    position:absolute;left:-50%;top:48%;width:190%;height:5px;
    background:linear-gradient(90deg,transparent 0%,#00ff88 18%,#00ff88 26%,transparent 27%,transparent 34%,#00ff88 35%,#00ff88 37%,transparent 38%,transparent 43%,#00ff88 44%,#00ff88 72%,transparent 100%);
    box-shadow:0 0 22px rgba(0,255,136,.95);animation:ekgMove9 1.55s linear infinite;
}
@keyframes ekgMove9{to{transform:translateX(28%)}}
.paw9{position:absolute;right:28px;top:36px;font-size:62px;animation:beat9 1.2s ease-in-out infinite}
.heart9{position:absolute;right:44px;bottom:38px;font-size:42px;color:#ff6b9a;animation:beat9 .9s ease-in-out infinite}
@keyframes beat9{25%{transform:scale(1.18)}45%{transform:scale(.96)}70%{transform:scale(1.12)}}

/* 4 GEODEZJA — tachimetr / skan 3D */
.geo-scan9{display:flex;align-items:center;justify-content:center}
.tripod9{position:absolute;bottom:26px;width:150px;height:95px}
.tripod9:before,.tripod9:after{content:"";position:absolute;bottom:0;width:6px;height:100px;background:#c9e7ff;transform-origin:top}
.tripod9:before{left:68px;transform:rotate(22deg)}
.tripod9:after{left:76px;transform:rotate(-22deg)}
.leg-mid9{position:absolute;left:73px;bottom:0;width:6px;height:95px;background:#c9e7ff}
.device9{position:absolute;top:26px;left:50%;transform:translateX(-50%);width:94px;height:62px;border-radius:16px;background:#dcefff;border:5px solid #0d2f66;box-shadow:0 0 22px rgba(0,212,255,.5)}
.lens9{position:absolute;left:29px;top:13px;width:30px;height:30px;border-radius:50%;background:#03204b;border:5px solid #3de5ff;box-shadow:0 0 18px #3de5ff}
.scanbeam9{
    position:absolute;left:50%;top:56px;width:210px;height:90px;
    background:linear-gradient(90deg,rgba(0,212,255,.4),transparent);
    clip-path:polygon(0 40%,100% 0,100% 100%,0 60%);
    transform-origin:left center;animation:scanSweep9 3s ease-in-out infinite;
}
@keyframes scanSweep9{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
.points9{position:absolute;right:28px;bottom:40px;width:100px;height:120px}
.points9 span{position:absolute;width:6px;height:6px;border-radius:50%;background:#80f7ff;box-shadow:0 0 10px #80f7ff;animation:pointBlink9 1.8s infinite}
.points9 span:nth-child(1){left:10px;top:20px}.points9 span:nth-child(2){left:70px;top:40px;animation-delay:.2s}.points9 span:nth-child(3){left:40px;top:70px;animation-delay:.4s}.points9 span:nth-child(4){left:85px;top:95px;animation-delay:.7s}.points9 span:nth-child(5){left:15px;top:105px;animation-delay:.9s}
@keyframes pointBlink9{50%{transform:scale(1.7);opacity:.45}}

/* 5 GEODEZJA — GPS */
.gps9{display:flex;align-items:center;justify-content:center}
.earth9{position:absolute;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#7efcff,#006bd6 60%,#002b6b);box-shadow:0 0 35px rgba(0,212,255,.75)}
.sat-orbit9{position:absolute;width:190px;height:190px;border:1px dashed rgba(255,255,255,.32);border-radius:50%;animation:rotate9 7s linear infinite}
.satellite9{position:absolute;right:-12px;top:50%;width:34px;height:20px;background:#eee;border-radius:6px;box-shadow:0 0 15px rgba(255,255,255,.8)}
.satellite9:before,.satellite9:after{content:"";position:absolute;top:3px;width:22px;height:14px;background:#3de5ff}
.satellite9:before{left:-24px}.satellite9:after{right:-24px}
.signal9{position:absolute;border:2px solid rgba(0,255,136,.5);border-radius:50%;animation:signal9 2s ease-out infinite}
.signal9.s1{width:115px;height:115px}.signal9.s2{width:155px;height:155px;animation-delay:.45s}.signal9.s3{width:195px;height:195px;animation-delay:.9s}
@keyframes signal9{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.18);opacity:0}}

/* 6 MELIORACJA — śluza */
.water9{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,85,145,.35))}
.water-flow9{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(90deg,#008ee8,#00d4ff,#008ee8);animation:waterFlow9 2s linear infinite;background-size:200% 100%}
@keyframes waterFlow9{to{background-position:200% 0}}
.lock9{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:120px;height:90px;border:6px solid #b58b48;border-bottom:none;border-radius:12px 12px 0 0}
.gate9{position:absolute;bottom:0;width:45px;height:90px;background:#8a5b2b;border:3px solid #d7a452;animation:gate9 3.4s ease-in-out infinite}
.gate9.left{left:12px;transform-origin:left bottom}.gate9.right{right:12px;transform-origin:right bottom}
@keyframes gate9{50%{transform:rotateY(55deg)}}
.wave9{position:absolute;left:-30%;bottom:82px;width:160%;height:22px;background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(255,255,255,.75) 20px 38px);border-radius:50%;animation:waterFlow9 2.4s linear infinite}

/* 7 MELIORACJA — powódź / opady */
.flood9{background:linear-gradient(180deg,rgba(1,19,50,.2),rgba(0,90,140,.35))}
.rain9 span{position:absolute;top:-30px;width:3px;height:26px;background:#8ff6ff;border-radius:3px;animation:rainDrop9 1.1s linear infinite}
.rain9 span:nth-child(1){left:20%;animation-delay:.1s}.rain9 span:nth-child(2){left:35%;animation-delay:.4s}.rain9 span:nth-child(3){left:48%;animation-delay:.2s}.rain9 span:nth-child(4){left:64%;animation-delay:.7s}.rain9 span:nth-child(5){left:80%;animation-delay:.35s}
@keyframes rainDrop9{to{transform:translateY(260px);opacity:.15}}
.embankment9{position:absolute;left:30px;right:30px;bottom:52px;height:45px;background:#6b4b25;clip-path:polygon(0 100%,18% 0,82% 0,100% 100%)}
.flood-water9{position:absolute;left:0;right:0;bottom:0;height:58px;background:linear-gradient(90deg,#0077c8,#00d4ff,#0077c8);background-size:200% 100%;animation:waterFlow9 2s linear infinite}
.level9{position:absolute;right:24px;bottom:36px;width:12px;height:125px;border:2px solid #fff;border-radius:10px}
.level-fill9{position:absolute;bottom:0;left:0;width:100%;height:38%;background:#00ff88;border-radius:8px;animation:levelMove9 2.8s ease-in-out infinite}
@keyframes levelMove9{50%{height:76%;background:#ffce42}}

/* 8 MATEMATYKA */
.math9{display:flex;align-items:center;justify-content:center}
.formula9{
    position:absolute;font-size:1.42rem;font-weight:800;color:#bff4ff;text-shadow:0 0 14px rgba(0,212,255,.9);
    animation:formulaFloat9 3.8s ease-in-out infinite;
}
.f1{left:24px;top:38px}.f2{right:24px;top:65px;animation-delay:.6s}.f3{left:48px;bottom:42px;animation-delay:1.1s}.f4{right:42px;bottom:48px;animation-delay:1.6s}
@keyframes formulaFloat9{50%{transform:translateY(-14px) scale(1.06)}}
.graph9{position:absolute;width:175px;height:120px;border-left:4px solid #fff;border-bottom:4px solid #fff;bottom:42px;left:50%;transform:translateX(-50%)}
.curve9{position:absolute;left:0;bottom:0;width:170px;height:105px;border:4px solid #00ff88;border-left:none;border-bottom:none;border-radius:50% 50% 0 0;animation:curvePulse9 2s ease-in-out infinite}
@keyframes curvePulse9{50%{filter:drop-shadow(0 0 14px #00ff88);transform:scaleY(1.08)}}

/* 9 TECHNOLOGIA ŻYWNOŚCI */
.food9{display:flex;align-items:center;justify-content:center}
.conveyor9{position:absolute;left:25px;right:25px;bottom:58px;height:42px;background:#203a5f;border-radius:22px;border:4px solid rgba(255,255,255,.3);overflow:hidden}
.belt9{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#2b6fa8 0 22px,#1d4f80 22px 44px);animation:beltMove9 1s linear infinite}
@keyframes beltMove9{to{background-position:44px 0}}
.apple9{position:absolute;bottom:110px;font-size:34px;animation:appleMove9 4s linear infinite}
.apple9.a1{left:-20px}.apple9.a2{left:-60px;animation-delay:1.3s}.apple9.a3{left:-100px;animation-delay:2.6s}
@keyframes appleMove9{to{transform:translateX(360px)}}
.microscope9{position:absolute;right:42px;top:34px;font-size:58px;animation:microPulse9 2.5s ease-in-out infinite}
@keyframes microPulse9{50%{transform:scale(1.1);filter:drop-shadow(0 0 16px #00d4ff)}}
.bacteria9 span{position:absolute;width:16px;height:10px;border-radius:50%;background:#00ff88;box-shadow:0 0 12px #00ff88;animation:bacteria9 3s ease-in-out infinite}
.bacteria9 span:nth-child(1){left:48px;top:46px}.bacteria9 span:nth-child(2){left:72px;top:82px;animation-delay:.7s}.bacteria9 span:nth-child(3){left:105px;top:58px;animation-delay:1.3s}
@keyframes bacteria9{50%{transform:translate(16px,-10px) rotate(20deg) scale(1.25)}}

/* responsive */
@media(max-width:1100px){
    .science-zone-9-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
    .science-zone-9{padding:48px 14px}
    .science-zone-9-grid{grid-template-columns:1fr;gap:18px}
    .science-card-9{min-height:auto;padding:20px;border-radius:24px}
    .anim-area-9{height:205px}
}
@media(max-width:420px){
    .science-zone-9-title h2{font-size:2rem}
    .science-card-9 h3{font-size:1.25rem}
    .tags-9 span{font-size:.78rem}
}

.back-to-top{display:none !important;}