/*
Theme Name: Midnight Silica
Author: SNICTO
Author URI: https://snicto.com
Description: Midnight Silica is a modern WordPress theme that focuses on clean design and user experience. It offers a range of customization options, making it suitable for various website types, including blogs, portfolios, and business sites. The theme is built with accessibility in mind, ensuring that all users can navigate and interact with your content effortlessly.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.3
License: Private
Text Domain: midnight-silica
*/

.floating-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
}
.floating-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
}
.admin-bar .floating-header {
    top: 32px;
}
.header-group {
    padding-top: var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--30);
    padding-left: var(--wp--preset--spacing--60);
    padding-right: var(--wp--preset--spacing--60);
}
body.home {
    padding: 0 !important;
    margin: 0 !important;
}
/* Slide-up animation for featured images */
.image-archive-image {
    display: block;
    backface-visibility: hidden;
    opacity: 0;
}
.ms-slide-up {
    transform: translateY(72px);
    transition: transform 2400ms cubic-bezier(.2,.9,.3,1), opacity 1200ms;
    will-change: transform, opacity;
}
.ms-slide-up--in {
    transform: translateY(0);
    opacity: 1;
}
/* Title on mouse hover */
.image-blog-wrap > .wp-block-post {
    position: relative;
}
.image-blog-wrap .title-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: var(--wp--preset--spacing--20);
    opacity: 0;
    z-index: 40;
    text-align: center;
    transition: opacity 300ms ease-in-out;
}
.image-blog-wrap .title-wrap h2 {
    font-size: 21px;
}
.wp-block-post:hover .title-wrap {
    opacity: 1;
}

/* Fade in page content */
.page .entry-content > * {
    opacity: 0;
    transform: translateY(50px);
    will-change: transform, opacity;
    animation-name: ms-slide-up-fade;
    animation-duration: 1200ms;
    /* animation-timing-function: cubic-bezier(.2,.9,.3,1); */
    animation-fill-mode: forwards;
    /* default (no delay) — staggered rules below will override per-child */
    animation-delay: 0ms;
}
.page .entry-content > *:nth-child(0) {animation-delay: 0ms;}
.page .entry-content > *:nth-child(1) {animation-delay: 100ms;}
.page .entry-content > *:nth-child(2) {animation-delay: 200ms;}
.page .entry-content > *:nth-child(3) {animation-delay: 300ms;}
.page .entry-content > *:nth-child(4) {animation-delay: 400ms;}
.page .entry-content > *:nth-child(5) {animation-delay: 500ms;}
.page .entry-content > *:nth-child(6) {animation-delay: 600ms;}
.page .entry-content > *:nth-child(7) {animation-delay: 700ms;}
.page .entry-content > *:nth-child(8) {animation-delay: 800ms;}
.page .entry-content > *:nth-child(9) {animation-delay: 900ms;}

@keyframes ms-slide-up-fade {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Mobile-only styles */
@media (max-width: 1150px) {
    .header-group {
        padding-left: 0;
        padding-right: 0;
    }
}
@media (max-width: 600px) {
    ul.wp-block-navigation {
        margin-right: 2rem;
    }
    .wp-block-navigation__responsive-container-close {
        margin-right: 2rem;
        margin-top: 1rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ms-slide-up,
    .ms-slide-up--in,
    .page .entry-content > * {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}