/* 
Theme Name: Newfolio
Theme URI: https://github.com/fditrapani/newfolio
Author: filippodt.com
Description: A WordPress porfolio theme for creatives.
Requires at least: 5.3
Tested up to: 5.5
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newfolio

Newfolio WordPress Theme, (C) 2025 filippodt.com
Newfolio is distributed under the terms of the GNU GPL.
========================================================================= */
@media screen {
    :root {
        margin: 0 !important;
    }
}

#wpadminbar {
    display: none;
}

/* WordPress overrides
========================================================================= */
.newfolio__content,
.newfolio__navigation{
    margin-block-start: 0 !important;
}

.editor-post-title {
    margin-bottom: 2rem;
}

/* Utilities
========================================================================= */
::selection {
    background-color: var(--wp--preset--color--highlight);
    color: var(--wp--preset--color--dark-titles);
  }
  
  ::-moz-selection {
    background-color: var(--wp--preset--color--highlight);
    color: var(--wp--preset--color--dark-titles);
  }

/* Layout
========================================================================= */
html,
body {
    width: 100dvw;
    height: 100dvh;
}

.newfolio__container {
    padding-bottom: 65px;
    position: relative;
    z-index: 0;
}

.newfolio__navigation,
.block-editor-block-list__layout .newfolio__navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100dvw;
    z-index: 9999;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    gap: 3rem;
}

@media screen and (min-width: 800px) {
    .newfolio__container {
        padding-bottom: 0;
        padding-left: 96px;
    }

    .newfolio__navigation,
    .block-editor-block-list__layout .newfolio__navigation {
        width: 96px;
        height: 100dvh;
        top: 0;
        flex-direction: column;
        justify-content: space-between;
    }
}

.newfolio__content {
    width: 100%;
    box-sizing: border-box;
}

/* Navigation
========================================================================= */
.newfolio__navigation {
    background: var(--wp--preset--color--surface);
    border-top: 1px solid var(--wp--preset--color--light-border);
    padding: 20px;
    box-shadow: 0 24px 32px #212020;
}

.newfolio__navigation .wp-block-navigation {
    justify-content: center;
    gap: 3rem; 
}

@media screen and (min-width: 800px) {
    .newfolio__navigation {
        padding: 40px 0;
        border-top: none;
        border-right: 1px solid var(--wp--preset--color--light-border);
        box-shadow: inset -2px 0px 8px #e2e2e2;
    }

    .admin-bar .newfolio__navigation {
        padding: 40px 0;
    }

    .block-editor-block-list__block.newfolio__navigation {
        padding: 40px 0;
    }

    .newfolio__navigation .wp-block-navigation__container,
    .newfolio__navigation .wp-block-navigation {
        flex-direction: column;
    }
}
  
.newfolio__navigation  .wp-block-navigation-item__content {
    position: relative;
    line-height: 0;
}

/* Icon
========================================================================= */
.newfolio__navigation  .has-lucide-icon .lucide,
.newfolio__navigation  .has-lucide-icon i[data-lucide] {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    stroke: var(--wp--preset--color--dark-links);
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    z-index: 1;
    position: relative;
    /* Ensure smooth transitions and prevent layout shifts */
    opacity: 1;
    transition: none; /* Remove transition to prevent flash */
}

/* Hide icon elements until they're converted to SVG */
.newfolio__navigation .has-lucide-icon i[data-lucide]:not(.lucide-ready) {
    opacity: 0;
}

@media screen and (min-width: 800px) {
    .newfolio__navigation .has-lucide-icon .lucide,
    .newfolio__navigation .has-lucide-icon i[data-lucide] {
        width: 32px;
        height: 32px;
        stroke-width: 1.75;
    }
    
    /* Ensure opacity rules apply on larger screens too */
    .newfolio__navigation .has-lucide-icon i[data-lucide]:not(.lucide-ready) {
        opacity: 0;
    }
}

/* Active item 
========================================================================= */
.newfolio__navigation .current-menu-item {
    position: relative;
}

.newfolio__navigation .current-menu-item::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:  var(--wp--preset--color--highlight);
    width: 40px;
    height: 40px;
    z-index: 0;
    border-radius: 1000px;
}

@media screen and (min-width: 800px) {
    .newfolio__navigation .current-menu-item::after {
        width: 56px;
        height: 56px;
    }
}

/* Labels
========================================================================= */
.newfolio__navigation .wp-block-navigation-item__label,
.newfolio__navigation .wp-block-navigation-link__placeholder-text {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 16px;
    font-weight: normal;
    color: var(--wp--preset--color--light-titles);
    background: var(--wp--preset--color--dark-links);
    line-height: 1em;
    padding: 8px 12px;
    border-radius: 12px;
    box-sizing: border-box;
    display: none;
    z-index: 2;
    box-shadow: inset 0 0 2px #666;
}

.newfolio__navigation .current-menu-item .wp-block-navigation-item__label,
.newfolio__navigation .current-menu-item .wp-block-navigation-link__placeholder-text {
    display: none !important;
}

@media screen and (min-width: 800px) {
    
    .newfolio__navigation .wp-block-navigation-item__label,
    .newfolio__navigation .wp-block-navigation-link__placeholder-text {
        top: 50%;
        transform: translate(0, -50%);
        left: calc(100% + 8px)
    }

    .newfolio__navigation .has-lucide-icon:hover .wp-block-navigation-item__label {
        display: block;
        animation: tooltip_reveal 100ms ease-in-out 100ms;
        animation-fill-mode: backwards;
    }
}

@keyframes tooltip_reveal {
    0% { 
        opacity: 0;
        transform: translate(-5px, -50%);
    }
    100% { 
        opacity: 1;
        transform: translate(0, -50%);
    }
}


/* Blog post list
==========================================================*/
.newfolio__posts-title {
    display: none;
}

.newfolio__posts {
    margin-block-start: 0 !important;
}

@media screen and (min-width: 700px) {
    .newfolio__post-wrapper {
        padding: 0 40px;
    }
}

@media screen and (min-width: 1000px) {
    .newfolio__post-wrapper {
        padding: 0 320px 0 80px;
    }

    .newfolio__posts-title {
        display: block;
        position: fixed;
        bottom: 80px;
        left: calc(100% - 80px);
        transform: rotate(-90deg);
        transform-origin: left bottom;
        opacity: 0;
        font-size: var(--wp--preset--font-size--huge-title);
        width: 100%;
        text-transform: lowercase;
        animation: newfolio-posts-title-in 600ms ease 100ms forwards;
    }

    @keyframes newfolio-posts-title-in {
        to { opacity: 0.1; }
    }
}

.newfolio__posts-list-wrapper {
    margin-bottom: 0 !important;
}


/* Blog post
==========================================================*/
.newfolio_post {
    padding-top: 24px;
    padding-bottom: 24px;
}

.newfolio_post-title {
    font-size: var(--wp--preset--font-size--x-large-title);
    orphans: 3;
    widows: 3;
    text-wrap: pretty;
    margin-block-start: 0 !important;
}

@media screen and (min-width: 640px) {
    .newfolio_post {
        padding: 40px;
    }
}

@media screen and (min-width: 1000px) {
    .newfolio_post-title {
        font-size: var(--wp--preset--font-size--xx-large-title);
        
    }
    
    .newfolio_post {
        padding: 80px;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .newfolio__post-content-wrapper {
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        justify-content: left;
        gap: 80px;
    }
}

.newfolio__post-meta-details {
    display: flex;
    gap: 24px;
    align-items: center;
}

.newfolio__post-content {
    margin-block-start: 24px !important;
}


.newfolio__post-meta {
    position: sticky;
    top: -24px;
    background: color-mix(in srgb, var(--wp--preset--color--dark-background) 60%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-bottom: 24px;
    z-index: 999;
}

.newfolio__post-meta-tags {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-block-start: 0 !important;
}

@media screen and (min-width: 1000px) {
    .newfolio__post-content {
        margin-block-start: 0 !important;
    }

    .newfolio__post-meta {
        top: 80px;
        align-self: flex-start;
        height: fit-content;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    
    .newfolio__post-meta-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    
    .link-card .newfolio__post-meta-details {
        flex-direction: row;
    }
}

@media screen and (min-width: 1200px) {
    .newfolio__post-content {
        margin-block-start: 0 !important;
        max-width: 700px;
    }

    .newfolio_post {
        max-width: 1400px;
    }
}

.newfolio__post-meta-detail {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-block-start: 0 !important;
}

.newfolio_post-meta-copy {
    margin-block-start: 0 !important;
    font-size: var(--wp--preset--font-size--small-body);
}

.newfolio_post-meta-icon {
    display: inline-block;
    display: flex;
    align-content: center;
}

.newfolio_post-meta-icon svg {
    width: 16px;
    height: 16px;
}

@media screen and (min-width: 640px) {
    .newfolio_post-meta-copy {
        font-size: 1.25rem;
    } 

    .newfolio_post-meta-icon svg {
        width: 20px;
        height: 20px;
    }
}

.newfolio__post-meta-tags-wrapper .wp-block-post-terms__separator {
    display: none;
}

/* Hide specific tags */
.newfolio__post-meta-tags a[href*="blogging"],
.newfolio__post-meta-tags a[href*="blog"] {
    display: none;
} 

.newfolio__post-meta-tags a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--wp--preset--color--form-background-dark);
    color: var(--wp--preset--color--light-titles);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small-body);
    line-height: 1;
    text-transform: lowercase;
}

.newfolio-darkmode .newfolio__post-meta-tags a:hover {
    background: var(--wp--preset--color--highlight);
    color: var(--wp--preset--color--dark-titles);
}

@media screen and (min-width: 1000px) {
    .newfolio__post-meta-tags-wrapper {
        display: block;
    }

    .newfolio__post-meta-tags {
        flex-direction: column;
    }
}

/* Blog content */
.wp-block-quote {
    padding: 2rem;
}

.newfolio__category-query {
    margin-block-start: 0 !important;
}



.newfolio__category-title {
    padding-left: 24px;
    padding-right: 24px;
    text-transform: lowercase;
}

@media screen and (min-width: 640px) {
    .newfolio__category-title-wrapper {
        display: none;
    }
}

/* Hardcoded custom styles: sorry but WP made me do it
======================================================= */
.wp-block-heading + p {
    margin-top: 12px;
}

@media screen and (max-width: 640px) {
    .wp-block-heading + p {
        margin-top: 16px;
    }
}

/* Make entire blog post clickable
======================================================= */
.link-card { 
    position: relative; 
}

@media screen and (max-width: 700px) {
    .link-card { 
        padding-left: 24px;
        padding-right: 24px;
    }
}

.link-card .wp-block-group__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Ensure inner content stays clickable/selectable above backgrounds */
.link-card .link-card__overlay { 
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.l-card__title {
    position: relative;
    z-index: 0;
}

.link-card:hover:not(.block-editor-block-list__block) .l-card__title a,
.link-card:hover:not(.block-editor-block-list__block) .newfolio__post-meta-detail {
    color: var(--wp--preset--color--light-titles) !important;
}

.link-card:hover:not(.block-editor-block-list__block) {
    background: var(--wp--preset--color--dark-background);
    cursor: pointer;
}

.link-card:hover:not(.block-editor-block-list__block) .link-card__overlay {
    box-shadow: -80px 0 0 var(--wp--preset--color--dark-background), 40px 0 0 var(--wp--preset--color--dark-background);
}

@media screen and (max-width: 900px) {
    .link-card:hover:not(.block-editor-block-list__block) .link-card__overlay {
        box-shadow: -40px 0 0 var(--wp--preset--color--dark-background), 40 px 0 0 var(--wp--preset--color--dark-background);
    }
}

@media screen and (max-width: 640px) {
    .link-card:hover:not(.block-editor-block-list__block) .wp-block-group__link {
        box-shadow: 0;
    }
}

/* Pagination
============================================== */
.wp-block-query-pagination-numbers,
.wp-block-comments-pagination-numbers {
    display: flex;
    gap: 16px;
    justify-content: center;
    width: 100%;
    padding-bottom: var(--wp--preset--spacing--50);
}

 .page-numbers,
a.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    line-height: 1;
    border-radius: 100%;
    text-decoration: none;
}

a.page-numbers:hover{
    background: var(--wp--preset--color--dark-text);  
}

.page-numbers.current {
    font-weight: 900;
    background: var(--wp--preset--color--highlight);
    color: var(--wp--preset--color--dark-titles);
}

@media screen and (min-width: 640px) {
    .wp-block-query-pagination-numbers,
    .wp-block-comments-pagination-numbers {
        justify-content: flex-start;
    }
}

/* Mobile blog
============================================================ */
@media screen and (max-width: 640px) {
    .single-post,
    .single-snap { 
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }

    .single-post figure.alignfull,
    .single-snap figure.alignfull,
    .single-post figure.alignwide,
    .single-snap figure.alignwide {
        margin-left: -24px !important;
        width: calc(100% + 48px);
    }
}

@media screen and (max-width: 960px) {
    .single-snap {
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
}

/* Padded page template
============================================================ */
.newfolio__page-padded {
    padding: 24px;
    box-sizing: border-box;
}

.newfolio__page-padded .wp-block-post-content > :first-child > :first-child,
.newfolio__page-padded .wp-block-post-content > :first-child {
    margin-top: 0 !important;
}

.newfolio__page-padded .wp-block-jetpack-button {
    margin-top: 16px;
}

@media screen and (min-width: 640px) {
    .newfolio__page-padded {
        padding: 40px;
    }
}

@media screen and (min-width: 1000px) {
    .newfolio__page-padded {
        padding-top: 80px;
    }
}

/* Comments
========================================================================= */
.wp-block-comment-author-name a,
.wp-block-comment-date a,
.comment-reply-link,
.wp-block-comment-edit-link a,
#cancel-comment-reply-link {
    text-decoration: none;
}

.wp-block-comment-author-name a:hover,
.wp-block-comment-date a:hover,
.comment-reply-link:hover,
.wp-block-comment-edit-link a:hover,
#cancel-comment-reply-link:hover {
    text-decoration: underline;
}

.comment-reply-link,
#cancel-comment-reply-link,
.wp-block-comment-edit-link a {
    font-weight: 900;
}

#cancel-comment-reply-link {
    font-size: var(--wp--preset--font-size--small-body);
}


/* Comments contents 
========================================================================= */
.wp-block-comment-content p{
    font-size: var(--wp--preset--font-size--small-body);
}

.wp-block-comments .wp-block-comment-template ol {
    padding-left: calc(16px + 48px);
}

.comment .comment-respond {
    padding-left: calc(16px + 48px);
}

.newfolio__comment {
    gap: 16px !important;
}

.newfolio__comment + ol {
    margin-top: -16px;
}

.wp-block-comment-content {
    transform: translateY(-8px);
}

.logged-in-as,
.comment-notes {
    display: none;
}

/* Forms
========================================================================= */
label,
.grunion-label-text {
    margin-bottom: 0.5rem;
    display: inline-block;
    font-weight: 400 !important;
}

label:hover{
    cursor: pointer;
}

/* Checkbox
=================================== */
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    position: relative;
    padding-left: 40px;
}

input[type="checkbox"] + label::after {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 24px;
    height: 24px;
    background: var(--wp--preset--color--form-background-light);
    z-index: 1;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="checkbox"]:checked + label::after {
    background: var(--wp--preset--color--dark-background);
}



input[type="radio"] {
    background: var(--wp--preset--color--form-background-light);
    border: 0 !important;
}

input[type="radio"]:checked {
    background: var(--wp--preset--color--dark-background);
}

input[type="radio"]:checked::before {
    background: var(--wp--preset--color--form-background-light) !important;
}


input[type="checkbox"]:checked + label::before {
    content: '';
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check-icon lucide-check'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
    z-index: 2;
}

/* Inputs
=================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
    color: var(--wp--preset--color--dark-text);
    background-color: var(--wp--preset--color--form-background-light);
    border-radius: 8px;
    border: 0 !important;
    font-size: var(--wp--preset--font-size--medium-body);
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--wp--preset--color--light-titles);
    color: var(--wp--preset--color--dark-titles);
    cursor: pointer;
}

/* Focus states */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--wp--preset--color--light-border);
}

/* Specific styling for textarea */
textarea {
    min-height: 120px;
    resize: vertical;
}

/* Error banners
=================================== */
.wp-block-jetpack-contact-form .contact-form__error {
    order: -1;
    border-radius: 8px;
}

/* Submit button
=================================== */
.form-submit { /* Container */
    display: flex;
    gap: 24px;
    align-items: center;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button.wp-block-button {
    align-self: flex-start;
}

.wp-block-jetpack-contact-form .wp-block-jetpack-button.wp-block-button .wp-block-button__link {
    width: auto;
}

/* Search input
=================================== */
.wp-block-search__inside-wrapper {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
}

.wp-block-search__input {
    padding-right: 100px;
}

.newfolio__search {
    border-bottom: 1px solid var(--wp--preset--color--dark-border);
    padding: 20px 0 40px;
}

.newfolio__search form {
    margin: 0 24px;
}

@media screen and (min-width: 640px) {
    .newfolio__search form {
        max-width: 500px;
        margin: 0;
    }
}

.wp-block-search__button {
    position: absolute;
    right: 0;
    top: 0;
    background: none !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem !important;
    color: var(--wp--preset--color--subdued-text) !important;
}

.wp-block-search__button:hover {
    color: var(--wp--preset--color--dark-titles) !important;
}

/* For Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* For Internet Explorer */
input[type=search]::-ms-clear {
  display: none;
  width : 0;
  height: 0;
}

/* Portfolio
========================================================================= */
/* Masonry Layout - Consolidated and Optimized */
:is(.wp-block-post-template.is-style-masonry, .masonry, .wp-block-post-template.masonry) {
    column-gap: 1.25rem;
    columns: 3 280px;
    column-fill: balance;
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: columns; /* Optimize for column changes */
    padding: 1.25rem;
}

@media screen and (min-width: 640px) {
    :is(.wp-block-post-template.is-style-masonry, .masonry, .wp-block-post-template.masonry) {
        padding-bottom: 1.25rem;
    }
}

/* Masonry items - prevent breaking across columns */
:is(.wp-block-post-template.is-style-masonry, .masonry) > li,
.wp-block-post-template.masonry > li.wp-block-post,
.masonry .masonry__item {
    break-inside: avoid;
    page-break-inside: avoid; /* Safari fallback */
    -webkit-column-break-inside: avoid; /* Safari fallback */
    margin-bottom: 1.25rem;
    list-style: none;
    transform: translateZ(0);
}

/* Masonry cards */
.masonry__card { 
    display: block;
    transform: translateZ(0);
    position: relative;
    border-radius: 3px;
    overflow: hidden;
}

.masonry__card:after {
    background: rgba(0, 0, 0, 0.3);
    animation: pulseBackground 1200ms ease-in infinite;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    content: '';
    z-index: 0;
    display: block;
    transform: translateZ(0);
}

/* Pulse animation for loading images */
@keyframes pulseBackground {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.1;
    }
}

.masonry__card-image {
    position: relative;
    z-index: 1;
}

.masonry__card-image img,
.masonry__card-image img { 
    width: 100%; 
    height: auto; 
    display: block;
    transform: translateZ(0);
}

.masonry__card:hover {
    background: var(--wp--preset--color--highlight);
    animation: none;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.07);
}

.masonry__card:hover img {
    filter: grayscale(100%) contrast(180%);
    mix-blend-mode: multiply;
    transition: all 300ms ease-in;
}

.masonry__card:hover:after {
    display: none !important;
}

.masonry__card:hover .masonry__card-image {
    position: unset;
}

/* Responsive breakpoints - consolidated */
@media (max-width: 960px) {
    :is(.wp-block-post-template.is-style-masonry, .masonry, .wp-block-post-template.masonry) { 
        columns: 2; 
        column-gap: 1rem;
        padding: 1rem;
    }

    :is(.wp-block-post-template.is-style-masonry, .masonry) > li,
    .wp-block-post-template.masonry > li.wp-block-post,
    .masonry .masonry__item {
        margin-bottom: 1rem;
        margin-block-start: 0 !important;
    }
}

.snap-container {
    display: flex;        
    position: relative;
    flex-direction: column-reverse;
    gap: 24px;
    padding-bottom: 24px;
}

.snap-description p {
    max-width: 400px;
}

.snap-images figure {
    border-radius: 3px;
    overflow: hidden;
}

.snap-images figure figure {
    position: relative;
}

.snap-images figure figure:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    animation: pulseBackground 1200ms ease-in infinite;
    z-index: 0;
    border-radius: 3px;
}

.snap-images img {
    width: 100%;
    z-index: 1;
}

/* Case study link
========================================================================= */
.snap-description .is-style-case-study {
    margin-block-end: 4rem;
    font-family: var(--wp--preset--font-family--dm-sans);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.2;
}

.snap-description .is-style-case-study a {
    color: var(--wp--preset--color--dark-titles);
    text-decoration: none;
}

.snap-description .is-style-case-study a::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.3em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    background-size: 1em 1em;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 200ms ease, opacity 200ms ease;
}

.snap-description .is-style-case-study a:hover::after,
.snap-description .is-style-case-study a:focus-visible::after {
    transform: translateX(8px);
    opacity: 0;
}

.newfolio-darkmode .snap-description .is-style-case-study a {
    color: var(--wp--preset--color--light-titles);
}


@media (min-width: 640px) {
    .snap-description {
        margin-top: 0;
        margin-block-start: 0 !important;
    }
}

@media (min-width: 960px) {
    .snap-container {
        flex-direction: row;
        min-height: 100vh;
        gap: 40px;
        padding: 40px;
    }

    .snap-description {
        flex: 1;
        position: sticky;
        top: 40px;
        align-self: flex-start;
        height: fit-content;
    }

    .snap-description p {
        max-width: none;
    }

    .snap-images {
        flex-basis: 70%;
    }

    .admin-bar .snap-description {
        top: calc(var(--wp-admin--admin-bar--height) + 40px);
    }

    .snap-description .is-style-case-study {
        margin-block-start: 1.5rem;
        margin-block-end: 0;
    }
}

@media (min-width: 1300px) {
    .snap-container {
        gap: 80px;
        padding: 80px;
    }

    .snap-description {
        top: 80px;
    }

    .admin-bar .snap-description {
        top: calc(var(--wp-admin--admin-bar--height) + 80px);
    }
}

@media (min-width: 2000px) {
    .snap-images {
        flex-basis: 80%;
    }
}

/* Contact CTA
========================================================================= */
.newfolio__contact {
    margin-block-start: 0 !important;
    padding-top: 80px;
    padding-bottom: 40px;
}

.newfolio__contact-inner .wp-block-buttons {
    margin-block-start: 24px;
}

.newfolio__contact .wp-block-button__link {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--dm-sans);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--medium-body);
    line-height: 1.2;
    background: var(--wp--preset--color--dark-background);
    color: var(--wp--preset--color--light-titles);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease;
}

.newfolio-darkmode .newfolio__contact .wp-block-button__link {
    background: color-mix(in srgb, var(--wp--preset--color--form-background-dark) 50%, var(--wp--preset--color--dark-background));
}

.newfolio__contact .wp-block-button__link:hover,
.newfolio__contact .wp-block-button__link:focus-visible {
    background: var(--wp--preset--color--light-titles);
    color: var(--wp--preset--color--dark-titles);
}

/* Desktop reveal: snap */
@media (min-width: 960px) {
    .snap-single .newfolio__reveal {
        position: relative;
        z-index: 1;
        background: var(--wp--preset--color--light-background);
    }

    .snap-single.newfolio-darkmode .newfolio__reveal {
        background: var(--wp--preset--color--dark-background);
    }

    .snap-single .newfolio__contact {
        position: sticky;
        bottom: 0;
        z-index: 0;
        padding-top: 160px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .snap-single .snap-container {
        padding-bottom: 0;
    }
}

@media (min-width: 1300px) {
    .snap-single .newfolio__contact {
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 80px;
    }
}

/* Desktop reveal: post */
@media (min-width: 1000px) {
    .single-post .newfolio__reveal {
        position: relative;
        z-index: 1;
        background: var(--wp--preset--color--light-background);
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding-bottom: 100px;
    }

    .single-post.newfolio-darkmode .newfolio__reveal {
        background: var(--wp--preset--color--dark-background);
    }

    .single-post .newfolio__contact {
        position: sticky;
        bottom: 0;
        z-index: 0;
        padding-top: 100px;
    }
}

/* Dark blog
========================================================================= */
.newfolio-darkmode {
    background: var(--wp--preset--color--dark-background);
    
}

.newfolio-darkmode .newfolio__content {
    color: var(--wp--preset--color--light-text);
}

.newfolio-darkmode .wp-block-post-title,
.newfolio-darkmode .wp-block-heading,
.newfolio-darkmode .wp-block,
.newfolio-darkmode .newfolio__content h1,
.newfolio-darkmode .newfolio__content h2,
.newfolio-darkmode .newfolio__content h3,
.newfolio-darkmode .newfolio__content h4,
.newfolio-darkmode .newfolio__content h5,
.newfolio-darkmode .newfolio__content h6,
.newfolio-darkmode .newfolio__content label,
.newfolio-darkmode .comment-reply-title,
.newfolio-darkmode .newfolio__content a {
    color: var(--wp--preset--color--light-titles);
}

.newfolio-darkmode .wp-block-quote {
    background: #00000008;
}

.newfolio-darkmode .wp-block-quote {
    background: #ffffff08;
    border-color: var(--wp--preset--color--highlight);
}

/* FORMS ============= */
.newfolio-darkmode input[type="radio"]:checked::before {
    background: var(--wp--preset--color--dark-background) !important;
}

.newfolio-darkmode input[type="radio"] {
    background: none;
    border: 3px solid var(--wp--preset--color--form-background-dark) !important;
}

.newfolio-darkmode input[type="radio"]:checked {
    background: var(--wp--preset--color--highlight) !important;
    border: 0 !important;
}

.newfolio-darkmode .jetpack-field-dropdown__icon {
    color: var(--wp--preset--color--light-titles) !important;
}

.newfolio-darkmode input[type="checkbox"] + label::after {
    background: none;
    border: 3px solid var(--wp--preset--color--form-background-dark);
}

.newfolio-darkmode input[type="checkbox"]:checked + label::after {
    background: var(--wp--preset--color--highlight);
    border: 0;
}

.newfolio-darkmode input[type="checkbox"]:checked + label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check-icon lucide-check'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    filter: none;
}

.newfolio-darkmode input[type="submit"],
.newfolio-darkmode button[type="submit"] {
    background: var(--wp--preset--color--light-titles) !important;
    color: var(--wp--preset--color--dark-titles);
}

.newfolio-darkmode input,
.newfolio-darkmode textarea,
.newfolio-darkmode select {
    color: var(--wp--preset--color--light-titles);
    background-color: var(--wp--preset--color--form-background-dark) !important;
    border: 0 !important;
}

.newfolio-darkmode input[type="submit"]:hover,
.newfolio-darkmode button[type="submit"]:hover {
    background: var(--wp--preset--color--highlight) !important;
    cursor: pointer;
}

.newfolio-darkmode input:focus,
.newfolio-darkmode textarea:focus,
.newfolio-darkmode select:focus,
.newfolio-darkmode .wp-block-search__input:focus {
    outline: none;
    box-shadow: 0 0 0 4px var(--wp--preset--color--highlight);
}

/* Search ========================= */
.newfolio-darkmode .wp-block-search__input {
    background: var(--wp--preset--color--form-background-dark);
    color: var(--wp--preset--color--light-titles);
}

.newfolio-darkmode .wp-block-search__input::placeholder {
    color: var(--wp--preset--color--light-text);
}

.newfolio-darkmode button.wp-block-search__button {
    background: none !important;
}

.newfolio-darkmode button.wp-block-search__button:hover {
    color: var(--wp--preset--color--light-titles) !important;
    background: none !important;
}

/* Link card ================= */
.newfolio-darkmode .link-card:hover:not(.block-editor-block-list__block) .l-card__title a,
.newfolio-darkmode .link-card:hover:not(.block-editor-block-list__block) .newfolio__post-meta-detail {
    color: var(--wp--preset--color--dark-titles) !important;
}

.newfolio-darkmode .link-card:hover:not(.block-editor-block-list__block) {
    background: var(--wp--preset--color--highlight);
    cursor: pointer;
}

.newfolio-darkmode .link-card:hover:not(.block-editor-block-list__block) .link-card__overlay {
    box-shadow: -80px 0 0 var(--wp--preset--color--highlight), 40px 0 0 var(--wp--preset--color--highlight);
}

@media screen and (max-width: 1000px) {
    .newfolio-darkmode .link-card:hover:not(.block-editor-block-list__block) .link-card__overlay {
        box-shadow: -40px 0 0 var(--wp--preset--color--highlight), 40px 0 0 var(--wp--preset--color--highlight);
    }
}

@media screen and (max-width: 640px) {
    .newfolio-darkmode .link-card:hover:not(.block-editor-block-list__block) .wp-block-group__link {
        box-shadow: 0;
    }
}

/* Page transitions
========================================================================= */
.newfolio__content {
    transition: opacity 300ms ease, transform 300ms ease;
}

.newfolio-loading .newfolio__content {
    opacity: 0;
    transform: translateY(8px);
}

/* About page: fade only, no vertical shift */
.page-slug-about.newfolio-loading .newfolio__content {
    transform: none;
}

/* Snap pages: children handle their own entrance */
.snap-single.newfolio-loading .newfolio__content {
    opacity: 1;
    transform: none;
}

/* Blog post: children handle their own entrance */
.single-post.newfolio-loading .newfolio__content {
    opacity: 1;
    transform: none;
}

/* Blog / archive / search: children handle their own entrance */
.blog.newfolio-loading .newfolio__content,
.archive.newfolio-loading .newfolio__content,
.search.newfolio-loading .newfolio__content {
    opacity: 1;
    transform: none;
}

.single-post .newfolio_post-title,
.single-post .newfolio__post-meta,
.single-post .newfolio__post-content {
    transition: opacity 400ms ease, transform 400ms ease;
}

.single-post.newfolio-loading .newfolio_post-title,
.single-post.newfolio-loading .newfolio__post-meta,
.single-post.newfolio-loading .newfolio__post-content {
    opacity: 0;
    transform: translateY(8px);
}

/* Mobile: title (0ms), meta (120ms), content (240ms) */
.single-post .newfolio_post-title {
    transition-delay: 0ms;
}

.single-post .newfolio__post-meta {
    transition-delay: 120ms;
}

.single-post .newfolio__post-content {
    transition-delay: 240ms;
}

/* Desktop (1000px+): title (0ms), content (150ms), meta (300ms) */
@media (min-width: 1000px) {
    .single-post .newfolio_post-title {
        transition-delay: 0ms;
    }

    .single-post .newfolio__post-content {
        transition-delay: 150ms;
    }

    .single-post .newfolio__post-meta {
        transition-delay: 300ms;
    }
}

/* Staggered masonry card entrance on front page */
.newfolio-loading .masonry__card {
    opacity: 0;
    transform: translateY(12px);
}

.masonry__card {
    transition: opacity 400ms ease, transform 400ms ease, background 300ms ease;
}

/* Staggered blog/archive/search list item entrance */
.link-card {
    transition: opacity 400ms ease, transform 400ms ease;
}

.newfolio-loading .link-card {
    opacity: 0;
    transform: translateY(12px);
}

/* Staggered snap content entrance on portfolio pieces */
/* Mobile: description first (0ms), images after (200ms) */
.snap-single .snap-description {
    transition: opacity 400ms ease 0ms, transform 400ms ease 0ms;
}

.snap-single .snap-images {
    transition: opacity 400ms ease 200ms, transform 400ms ease 200ms;
}

.newfolio-loading .snap-description,
.newfolio-loading .snap-images {
    opacity: 0;
    transform: translateY(8px);
}

/* Desktop (960px+): images first (0ms), description after (200ms) */
@media (min-width: 960px) {
    .snap-single .snap-images {
        transition: opacity 400ms ease 0ms, transform 400ms ease 0ms;
    }

    .snap-single .snap-description {
        transition: opacity 400ms ease 200ms, transform 400ms ease 200ms;
    }
}

/* Snap pages: children handle their own exit (reversed stagger) */
.snap-single.newfolio-transitioning .newfolio__content {
    opacity: 1;
    transform: none;
}

/* Mobile: images out first (0ms), description after (120ms) */
.snap-single.newfolio-transitioning .snap-images {
    opacity: 0;
    transform: translateY(8px);
    transition-delay: 0ms;
}

.snap-single.newfolio-transitioning .snap-description {
    opacity: 0;
    transform: translateY(8px);
    transition-delay: 120ms;
}

/* Desktop (960px+): description out first (0ms), images after (120ms) */
@media (min-width: 960px) {
    .snap-single.newfolio-transitioning .snap-description {
        opacity: 0;
        transform: translateY(8px);
        transition-delay: 0ms;
    }

    .snap-single.newfolio-transitioning .snap-images {
        opacity: 0;
        transform: translateY(8px);
        transition-delay: 120ms;
    }
}

/* Contact CTA: fades with the rest of the content on both entrance and exit */
.snap-single .newfolio__contact {
    transition: opacity 400ms ease, transform 400ms ease;
    transition-delay: 300ms;
}

.snap-single.newfolio-loading .newfolio__contact,
.snap-single.newfolio-transitioning .newfolio__contact {
    opacity: 0;
    transform: translateY(8px);
}

.single-post .newfolio__contact {
    transition: opacity 400ms ease, transform 400ms ease;
    transition-delay: 360ms;
}

.single-post.newfolio-loading .newfolio__contact,
.single-post.newfolio-transitioning .newfolio__contact {
    opacity: 0;
    transform: translateY(8px);
}

@media (min-width: 1000px) {
    .single-post .newfolio__contact {
        transition-delay: 450ms;
    }
}

.newfolio-transitioning .newfolio__content {
    opacity: 0;
    transform: translateY(8px);
}

.newfolio-transitioning .newfolio__posts-title {
    animation: none;
    opacity: 0;
    transition: opacity 300ms ease;
}

.newfolio-transitioning::after {
    content: '';
    position: fixed;
    top: 20px;
    right: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wp--preset--color--dark-titles);
    z-index: 10000;
    pointer-events: none;
    animation: newfolio-loader-in 300ms ease forwards, newfolio-pulse 600ms ease-in-out 300ms infinite;
}

@keyframes newfolio-loader-in {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

.newfolio-darkmode.newfolio-transitioning::after {
    background: var(--wp--preset--color--surface);
}

@keyframes newfolio-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.75); }
}

/* Personal block
========================================================================= */
.branded-logo-container, 
.branded-logo-container .wp-block-template-part {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.branded-logo-container svg {
    overflow: visible;
    width: 100%;
    max-width: 80%;
}

@media (min-width: 640px) {
    .branded-logo-container svg {
        max-width: none;
    }
}

.eyes_open {
	animation: blink 1.5s infinite;
	animation-fill-mode: backwards;
}

.face {
	animation: reveal 750ms 40ms ease-in-out;
	animation-fill-mode: backwards;
}

.eff {
	animation: reveal 700ms 60ms ease-in;
	animation-fill-mode: backwards;
}

.ppo {
	animation: reveal 780ms 80ms ease-in-out;
	animation-fill-mode: backwards;
}


@keyframes blink {
    0% {
        opacity: 1;
    }

    90% {
    	opacity: 1;	
    }

    100% {
        opacity: 0;
    }    
}

@keyframes reveal {
	0% {
			opacity: 0.5;
			transform: translateY(800px);
	}

	20% {
		transform: translateY(800px);
	}

	40% {
		opacity: 1;
		transform: translateY(0);
	}

	50% {
		transform: translateY(-50px);
	}

	100% {
		transform: translateY(0);
	}    
}

.about-page-copy {
    padding: 24px;
}

@media (min-width: 640px) {
    .about-page-copy {
        padding: 64px;
    }
}

@media (min-width: 1200px) {
    .about-page-copy {
        padding: 80px;
    }
}

@media (min-width: 1400px) {
    .about-page-copy p {
        max-width: 1100px;
        margin: 0 auto;
    }
}