/* Custom Styles for DataClip */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 140px;
}

body {
    background-color: #0f1723;
    color: #dae2fd;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reveal-on-scroll — klasa .reveal-init jest dodawana przez JS dopiero gdy IO działa,
   więc bez JS treść zostaje widoczna (dostępność, SEO, crawlery). */
.reveal-init {
    opacity: 0;
}

.reveal {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Respektuj preferencję zmniejszonego ruchu — treść widoczna natychmiast, bez animacji. */
@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1; }
    .reveal { animation: none; }
}

/* Realistyczny iPhone w CSS */
.phone-container {
    position: relative;
    margin-top: 60px;
    width: 340px;
    height: 680px;
    background: #000;
    border-radius: 50px;
    padding: 12px;
    box-shadow: 
        0 0 0 2px #333,
        0 0 0 5px #1a1a1a,
        0 30px 60px -15px rgba(0,0,0,0.7),
        inset 0 0 15px rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Dynamic Island */
.phone-container::after {
    content: '';
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 85px;
    height: 25px;
    background: #000;
    border-radius: 20px;
    z-index: 40;
}

/* Ekran */
.phone-screen-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 40px;
    overflow: hidden;
    z-index: 10;
}

/* Połysk na ekranie (Glass Effect) */
.phone-screen-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
    z-index: 30;
    pointer-events: none;
}

.phone-screen-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 23% center;
    display: block;
}

/* Przyciski boczne */
.phone-btn {
    position: absolute;
    background: #1a1a1a;
    border-radius: 2px;
}
.btn-power { right: -7px; top: 120px; width: 4px; height: 60px; border-radius: 0 3px 3px 0; }
.btn-vol-up { left: -7px; top: 100px; width: 4px; height: 40px; border-radius: 3px 0 0 3px; }
.btn-vol-down { left: -7px; top: 155px; width: 4px; height: 40px; border-radius: 3px 0 0 3px; }

/* Inne style */
nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.template-play-btn { transition: opacity 0.3s ease; }
.template-video { cursor: pointer; }

@media (max-width: 768px) {
    .phone-container { width: 280px; height: 560px; border-radius: 42px; }
    .phone-screen-container { border-radius: 34px; }
    .phone-container::after { top: 20px; width: 70px; height: 22px; }
}

@media (max-width: 480px) {
    .phone-container { width: 220px; height: 440px; border-radius: 36px; padding: 10px; margin-top: 30px; }
    .phone-screen-container { border-radius: 28px; }
    .phone-container::after { top: 16px; width: 56px; height: 18px; }
    .btn-power { height: 48px; top: 96px; }
    .btn-vol-up { height: 32px; top: 80px; }
    .btn-vol-down { height: 32px; top: 124px; }
}

/* Mobile menu */
#mobile-menu {
    transition: opacity 0.3s ease;
}