/* =========================================================
   MOBILE FIX + ANIMACJE DZIAŁAJĄCE NA TELEFONIE
   ========================================================= */

html, body{
    max-width:100%;
    overflow-x:hidden;
}

img, video, canvas, svg{
    max-width:100%;
}

/* Baner zawsze cały widoczny */
.hero,
.hero-banner,
.banner,
.top-banner{
    overflow:visible !important;
}

.hero img,
.hero-banner img,
.banner img,
.top-banner img{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
}

/* Animacja FLASH na górze — działa bez hover */
.flash-layer,
.mobile-flash-layer{
    pointer-events:none;
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:5;
}

.mobile-flash-beam{
    position:absolute;
    top:-20%;
    left:-45%;
    width:35%;
    height:145%;
    background:linear-gradient(115deg,
        transparent 0%,
        rgba(255,255,255,.0) 25%,
        rgba(255,255,255,.75) 48%,
        rgba(0,212,255,.55) 52%,
        rgba(255,255,255,.0) 75%,
        transparent 100%);
    filter:blur(1px);
    transform:skewX(-18deg);
    animation:mobileFlashSweep 4.2s ease-in-out infinite;
}

@keyframes mobileFlashSweep{
    0%{ left:-50%; opacity:0; }
    8%{ opacity:.9; }
    35%{ left:120%; opacity:.75; }
    44%{ opacity:0; }
    100%{ left:120%; opacity:0; }
}

/* Ruchome kropki naukowe */
.mobile-particle{
    position:fixed;
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(0,212,255,.85);
    box-shadow:0 0 12px rgba(0,212,255,.9);
    pointer-events:none;
    z-index:999;
    animation:mobileParticleFloat 5s linear forwards;
}

@keyframes mobileParticleFloat{
    0%{ transform:translate3d(0,0,0) scale(.7); opacity:0; }
    15%{ opacity:1; }
    100%{ transform:translate3d(var(--dx), var(--dy), 0) scale(0); opacity:0; }
}

/* Multimedia: układ mobilny */
.multimedia-grid,
.cards,
.grid,
.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:22px;
}

/* Animacje kart działają automatycznie, nie tylko hover */
.card,
.feature-card,
.multimedia-card{
    will-change:transform;
    animation:mobileCardFloat 5.5s ease-in-out infinite;
}

.card:nth-child(2n),
.feature-card:nth-child(2n),
.multimedia-card:nth-child(2n){
    animation-delay:1.2s;
}

.card:nth-child(3n),
.feature-card:nth-child(3n),
.multimedia-card:nth-child(3n){
    animation-delay:2.1s;
}

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

/* Nowa sekcja animacji chemia + weterynaria */
.mobile-science-show{
    padding:48px 18px;
    background:linear-gradient(135deg,#00153d,#003c8f);
    color:white;
    overflow:hidden;
}

.mobile-science-show h2{
    text-align:center;
    font-size:clamp(1.8rem,5vw,3rem);
    margin:0 0 26px;
}

.mobile-science-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;
    max-width:1180px;
    margin:auto;
}

.mobile-science-card{
    position:relative;
    min-height:260px;
    border-radius:26px;
    padding:26px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 20px 55px rgba(0,0,0,.28);
    overflow:hidden;
}

.mobile-science-card h3{
    font-size:1.6rem;
    margin:0 0 12px;
}

.mobile-science-card p{
    opacity:.92;
    line-height:1.55;
}

/* Chemia: bulgoczące probówki */
.tube-stage{
    display:flex;
    justify-content:center;
    gap:18px;
    align-items:flex-end;
    height:120px;
    margin:18px 0;
}

.test-tube{
    position:relative;
    width:42px;
    height:112px;
    border:4px solid rgba(255,255,255,.85);
    border-top:none;
    border-radius:0 0 22px 22px;
    overflow:hidden;
    transform-origin:bottom center;
    animation:tubeWiggle 2.8s ease-in-out infinite;
}

.test-tube:nth-child(2){animation-delay:.4s}
.test-tube:nth-child(3){animation-delay:.8s}

.test-liquid{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:58%;
    background:linear-gradient(180deg,#8cfffb,#00d46a);
    animation:liquidMove 2.4s ease-in-out infinite;
}

.bubble{
    position:absolute;
    bottom:18px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.9);
    animation:bubbleUp 2s linear infinite;
}

.bubble:nth-child(2){left:11px; animation-delay:.3s}
.bubble:nth-child(3){left:24px; animation-delay:.7s}
.bubble:nth-child(4){left:18px; animation-delay:1.1s}

@keyframes tubeWiggle{
    0%,100%{ transform:rotate(0deg); }
    50%{ transform:rotate(3deg); }
}

@keyframes liquidMove{
    0%,100%{ height:54%; }
    50%{ height:64%; }
}

@keyframes bubbleUp{
    0%{ transform:translateY(0) scale(.6); opacity:0; }
    20%{ opacity:1; }
    100%{ transform:translateY(-72px) scale(1.15); opacity:0; }
}

/* Weterynaria: pulsujące EKG */
.vet-stage{
    position:relative;
    height:120px;
    margin:18px 0;
    border-radius:18px;
    background:rgba(0,0,0,.24);
    overflow:hidden;
}

.ekg-line{
    position:absolute;
    top:50%;
    left:-30%;
    width:160%;
    height:4px;
    background:linear-gradient(90deg,
        transparent 0%,
        #00ff88 15%,
        #00ff88 25%,
        transparent 26%,
        transparent 31%,
        #00ff88 32%,
        #00ff88 34%,
        transparent 35%,
        transparent 40%,
        #00ff88 41%,
        #00ff88 70%,
        transparent 100%);
    box-shadow:0 0 18px #00ff88;
    animation:ekgMove 1.8s linear infinite;
}

.vet-heart{
    position:absolute;
    right:24px;
    top:28px;
    font-size:54px;
    animation:heartBeat 1.1s ease-in-out infinite;
    filter:drop-shadow(0 0 15px rgba(0,255,136,.85));
}

@keyframes ekgMove{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(28%); }
}

@keyframes heartBeat{
    0%,100%{ transform:scale(1); }
    20%{ transform:scale(1.18); }
    35%{ transform:scale(.96); }
    55%{ transform:scale(1.12); }
}

/* Telefony */
@media(max-width:768px){
    body{
        font-size:16px;
    }

    section{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .mobile-science-show{
        padding:36px 14px;
    }

    .mobile-science-grid{
        grid-template-columns:1fr;
    }

    .mobile-science-card{
        min-height:240px;
        padding:22px;
        border-radius:22px;
    }

    .tube-stage,
    .vet-stage{
        height:110px;
    }

    .test-tube{
        width:36px;
        height:100px;
    }

    .mobile-flash-beam{
        width:48%;
        animation-duration:3.4s;
    }
}

@media(max-width:420px){
    .mobile-science-card h3{
        font-size:1.35rem;
    }

    .mobile-science-card{
        padding:18px;
    }
}

/* Dostępność: gdy ktoś ma ograniczenie animacji */
@media(prefers-reduced-motion: reduce){
    .mobile-flash-beam,
    .mobile-particle,
    .card,
    .feature-card,
    .multimedia-card,
    .test-tube,
    .test-liquid,
    .bubble,
    .ekg-line,
    .vet-heart{
        animation-duration:10s;
    }
}

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