/*
Theme Name: Claire Masters
Author: Nic Masters
Version: 1.0.0
Requires at least: 6.7.0
Text Domain: clairemasters
*/

/* ──────────────────────────────
   Base & Reset
────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--foreground);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ──────────────────────────────
   Header
────────────────────────────── */
/* Fix the template-part <header> wrapper on every page */
body>.wp-site-blocks>header:first-child {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    view-transition-name: site-header;
}

.admin-bar>.wp-site-blocks>header:first-child {
    top: var(--wp-admin--admin-bar--height, 32px);
}

/* Zero the block-gap margin left behind by the fixed header */
body>.wp-site-blocks>*:where(:not(style, script))+*:where(:not(style, script)) {
    margin-block-start: 0;
}

.site-header {
    position: relative;
    padding-inline: clamp(1.5rem, 5vw, 4rem) !important;
    background-color: var(--wp--preset--color--background);
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.site-header .wp-block-site-title a {
    text-decoration: none;
    color: inherit;
}

/* ── Scrolled state: white frosted glass (non-hero pages) ── */
.site-header.is-scrolled {
    background-color: rgba(250, 250, 248, 0.75);
    border-bottom-color: rgba(28, 28, 28, 0.06);
}

body:not(:has(.is-style-dark-hero))>.wp-site-blocks>header:first-child:has(.is-scrolled) {
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    backdrop-filter: blur(12px) saturate(1.6);
}

/* ── Front-page: dark frosted glass throughout (no scrolled variant) ── */
body:has(.is-style-dark-hero) .site-header {
    background-color: rgba(28, 28, 28, 0.45);
    border-bottom-color: rgba(250, 250, 248, 0.06);
    color: var(--wp--preset--color--background);
}

body:has(.is-style-dark-hero)>.wp-site-blocks>header:first-child {
    -webkit-backdrop-filter: blur(8px) saturate(1.4);
    backdrop-filter: blur(8px) saturate(1.4);
}

body:has(.is-style-dark-hero) .site-header .wp-block-site-title a {
    color: var(--wp--preset--color--background);
}

body:has(.is-style-dark-hero) .site-header .wp-block-navigation a {
    color: rgba(250, 250, 248, 0.65);
}

body:has(.is-style-dark-hero) .site-header .wp-block-navigation a:hover,
body:has(.is-style-dark-hero) .site-header .wp-block-navigation a:focus {
    color: var(--wp--preset--color--background);
}

body:has(.is-style-dark-hero) .site-header .wp-block-navigation a::after {
    background-color: rgba(250, 250, 248, 0.5);
}

/* ── Mobile menu: full-screen overlay ── */
.wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    z-index: 200 !important;
    overflow-y: auto;
    padding: 0 !important;
}

/* Lay out the close row like the real header so the × sits on the hamburger */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* Close button: same top/right padding as the header so it lands on the ☰ */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    align-self: flex-end;
    margin-top: 1.25rem;
    margin-right: 0;
    margin-bottom: 1.5rem;
}

/* Links list */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 1rem;
}

.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
    top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* Dark hero pages: dark overlay matching the header */
body:has(.is-style-dark-hero) .site-header .wp-block-navigation__responsive-container.is-menu-open {
    background-color: rgba(28, 28, 28, 0.95) !important;
    color: var(--wp--preset--color--background);
}

body:has(.is-style-dark-hero) .site-header .wp-block-navigation__responsive-container.is-menu-open a {
    color: rgba(250, 250, 248, 0.75) !important;
}

body:has(.is-style-dark-hero) .site-header .wp-block-navigation__responsive-container.is-menu-open a:hover,
body:has(.is-style-dark-hero) .site-header .wp-block-navigation__responsive-container.is-menu-open a:focus {
    color: var(--wp--preset--color--background) !important;
}

/* Hamburger button / close button */
body:has(.is-style-dark-hero) .site-header .wp-block-navigation__responsive-container-open {
    color: var(--wp--preset--color--background);
}

body:has(.is-style-dark-hero) .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--background);
}

/* Push main content below the fixed header on non-hero pages.
   The front-page hero already fills 100svh so it doesn't need this. */
body:not(:has(.is-style-dark-hero))>.wp-site-blocks>main {
    padding-top: 5rem;
}

/* ──────────────────────────────
   Navigation
────────────────────────────── */
.wp-block-navigation a {
    text-decoration: none;
    color: var(--wp--preset--color--muted);
    transition: color 0.2s ease;
    position: relative;
}

.wp-block-navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background-color: var(--wp--preset--color--sand);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wp-block-navigation a:hover::after,
.wp-block-navigation a:focus::after {
    transform: scaleX(1);
    transform-origin: left;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
    color: var(--wp--preset--color--foreground);
}

/* ──────────────────────────────
   Portfolio Grid
────────────────────────────── */
.portfolio-grid {
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    padding-block: clamp(4rem, 8vw, 8rem);
}

.portfolio-section-heading {
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: var(--wp--preset--font-size--xs) !important;
    font-weight: 400 !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted) !important;
    margin-bottom: 3rem !important;
}

/* Card wrapper */
.portfolio-card {
    cursor: pointer;
}

/* Image + overlay container */
.portfolio-card-media {
    position: relative;
    overflow: hidden;
}

.portfolio-card-media .wp-block-post-featured-image {
    overflow: hidden;
    margin-bottom: 0;
}

.portfolio-card-media .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--wp--preset--color--border);
}

.portfolio-card:hover .portfolio-card-media .wp-block-post-featured-image img {
    transform: scale(1.04);
}

/* Fallback placeholder when no featured image */
.portfolio-card-media .wp-block-post-featured-image:empty::after,
.portfolio-card-media .wp-block-post-featured-image a:empty::after {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--wp--preset--color--border);
}

/* Dark gradient scrim — always visible so the text overlay is readable */
.portfolio-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(15, 15, 15, 0.75) 0%,
            rgba(15, 15, 15, 0.15) 55%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease;
}

.portfolio-card:hover .portfolio-card-media::after {
    opacity: 0.9;
}

/* Text overlay: always visible at image bottom */
.portfolio-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.25rem 1.1rem;
    z-index: 2;
}

.portfolio-card-overlay .wp-block-post-terms {
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--sand);
    margin: 0 0 0.4rem;
}

.portfolio-card-overlay .wp-block-post-terms a {
    color: inherit;
    text-decoration: none;
}

.portfolio-card-overlay .wp-block-post-title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

.portfolio-card-overlay .wp-block-post-title a {
    color: #fff;
    text-decoration: none;
}

/* ──────────────────────────────
   Post Hero (single portfolio)
────────────────────────────── */
.post-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--wp--preset--color--foreground);
}

.post-hero .wp-block-post-featured-image {
    margin: 0;
    line-height: 0;
}

.post-hero .wp-block-post-featured-image img {
    width: 100%;
    height: clamp(380px, 65vh, 720px);
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.82;
    display: block;
}

/* Bottom gradient for title legibility */
.post-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(15, 15, 15, 0.72) 0%,
            rgba(15, 15, 15, 0.18) 50%,
            transparent 100%);
    pointer-events: none;
}

.post-hero__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem clamp(1.5rem, 5vw, 4rem);
    z-index: 2;
}

.post-hero__overlay .wp-block-post-terms {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--sand);
    margin: 0 0 0.75rem;
}

.post-hero__overlay .wp-block-post-terms a {
    color: inherit;
    text-decoration: none;
}

.post-hero__overlay .wp-block-post-title {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ──────────────────────────────
   Single Portfolio Item
────────────────────────────── */
.portfolio-single {
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    padding-block: clamp(3rem, 6vw, 6rem);
}

.portfolio-single .portfolio-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.portfolio-category-badge {
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--sand);
}

.portfolio-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.portfolio-back-link:hover {
    color: var(--wp--preset--color--foreground);
}

.portfolio-back-link::before {
    content: '←';
}

/* ──────────────────────────────
   Entry Content
────────────────────────────── */
/* max-width is handled by theme.json contentSize via constrained layout.
   Only apply it on non-front-page templates (single posts, pages) where
   the post-content layout might be "default" (flow) instead of constrained. */
body:not(.home) .wp-block-post-content {
    max-width: 760px;
    margin-inline: auto;
}

.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 400;
    margin-top: 2.5em;
}

.wp-block-post-content p {
    line-height: 1.8;
}

.wp-block-post-content blockquote {
    border-left: 3px solid var(--wp--preset--color--sand);
    padding-left: 1.5rem;
    margin-left: 0;
    font-style: italic;
    color: var(--wp--preset--color--muted);
}

/* ──────────────────────────────
   Footer
────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--wp--preset--color--border);
    padding-inline: clamp(1.5rem, 5vw, 4rem) !important;
}

.site-footer p {
    margin: 0;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
}

/* ──────────────────────────────
   Contact Page
────────────────────────────── */
.contact-section {
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    padding-block: clamp(4rem, 10vw, 10rem);
    max-width: 640px;
}

.contact-section h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 1.5rem;
}

/* ──────────────────────────────
   Page Hero (non-home pages)
────────────────────────────── */
.page-hero {
    padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--wp--preset--color--border);
}

.page-hero .wp-block-post-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ──────────────────────────────
   Front Page — Hero (is-style-dark-hero)
────────────────────────────── */
.is-style-dark-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
    background-color: var(--wp--preset--color--foreground);
    color: var(--wp--preset--color--background);
    overflow: hidden;
    view-transition-name: front-hero;
}

/* Grain texture overlay */
.is-style-dark-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 0;
}

.front-hero__content {
    position: relative;
    z-index: 1;
    gap: 0 !important;
}

.front-hero__tagline {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xs) !important;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wp--preset--color--sand);
    margin: 0 0 1.5rem !important;
    opacity: 0;
    animation: hero-fade-in 0.8s 0.3s ease both;
}

.front-hero__heading {
    font-size: clamp(3.5rem, 10vw, 8rem) !important;
    max-width: 14ch;
    margin: 0 0 2rem !important;
    opacity: 0;
    animation: hero-slide-up 0.9s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.front-hero__subtext {
    font-family: var(--wp--preset--font-family--body);
    font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(250, 250, 248, 0.72);
    max-width: 48ch;
    margin: 0 !important;
    opacity: 0;
    animation: hero-fade-in 0.8s 0.55s ease both;
}

/* Scroll cue */
.front-hero__scroll-cue {
    position: absolute;
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    animation: hero-fade-in 0.8s 1s ease both;
}

.front-hero__scroll-label {
    font-size: var(--wp--preset--font-size--xs) !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(250, 250, 248, 0.4);
    margin: 0 !important;
    writing-mode: vertical-lr;
    animation: scroll-bob 2.4s 2s ease-in-out infinite;
}

/* ──────────────────────────────
   Front Page — Selected Work (is-style-work-section)
────────────────────────────── */
.is-style-work-section {
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    padding-block: clamp(4rem, 8vw, 8rem) clamp(2rem, 4vw, 4rem);
}

.front-section-label {
    font-family: var(--wp--preset--font-family--body) !important;
    font-size: var(--wp--preset--font-size--xs) !important;
    font-weight: 400 !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted) !important;
    margin: 0 !important;
}

.front-work__header {
    margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

.front-work__view-all {
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.front-work__view-all:hover {
    color: var(--wp--preset--color--foreground);
}

/* Featured (wide) card */
.front-work__featured {
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.portfolio-card--featured .portfolio-card-media .wp-block-post-featured-image img {
    aspect-ratio: 16 / 9;
}

.portfolio-card--featured .portfolio-card-overlay .wp-block-post-title {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

/* Grid cards with tall aspect ratio */
.front-work__grid .portfolio-card-media .wp-block-post-featured-image img {
    aspect-ratio: 3 / 4;
}

.front-work__grid .wp-block-post-template.is-flex-container {
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Scroll-driven reveal for work section */
.front-work__featured,
.front-work__grid {
    opacity: 0;
    transform: translateY(32px);
    animation: reveal-up 0.7s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

/* ──────────────────────────────
   Front Page — About (is-style-about-section)
────────────────────────────── */
.is-style-about-section {
    padding-inline: clamp(1.5rem, 5vw, 4rem);
    padding-block: clamp(4rem, 8vw, 8rem);
    border-top: 1px solid var(--wp--preset--color--border);
    view-transition-name: front-about;
}

.front-about__columns {
    margin-bottom: 0 !important;
}

.front-about__statement {
    font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

.front-about__body {
    font-size: var(--wp--preset--font-size--large) !important;
    font-weight: 300;
    line-height: 1.8;
    color: var(--wp--preset--color--muted);
    margin-bottom: 2rem !important;
    max-width: 52ch;
}

.front-about__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--foreground);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--wp--preset--color--sand);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.front-about__cta:hover {
    color: var(--wp--preset--color--sand);
}

/* Scroll-driven reveal for about section */
.front-about__columns {
    opacity: 0;
    transform: translateY(32px);
    animation: reveal-up 0.7s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
}

/* ──────────────────────────────
   Front Page — Keyframes
────────────────────────────── */
@keyframes hero-slide-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scroll-bob {

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

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

@keyframes reveal-up {
    from {
        opacity: 0;
        transform: translateY(32px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {

    .front-work__featured,
    .front-work__grid,
    .front-about__columns {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ──────────────────────────────
   Front Page — Responsive
────────────────────────────── */
@media (max-width: 768px) {
    .front-hero__heading {
        font-size: clamp(2.75rem, 14vw, 4.5rem) !important;
    }

    .front-about__columns {
        flex-direction: column !important;
    }

    .front-about__columns .wp-block-column {
        flex-basis: 100% !important;
    }

    .is-style-about-section .front-section-label {
        margin-bottom: 1.5rem !important;
    }

    .front-work__grid .wp-block-post-template.is-flex-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* ──────────────────────────────
   Utilities
────────────────────────────── */
.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ──────────────────────────────
   Responsive
────────────────────────────── */
@media (max-width: 768px) {
    .wp-block-post-template.is-flex-container.columns-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .wp-block-post-template.is-flex-container.columns-2 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .wp-block-post-template.is-flex-container.columns-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ──────────────────────────────
   CSS View Transitions (MPA)
   Chrome 126+ / Safari 18.2+
────────────────────────────── */

/* Opt every page navigation into automatic cross-document view transitions */
@view-transition {
    navigation: auto;
}

/* view-transition-name for the header is set on the fixed
   template-part <header> wrapper above, not on .site-header,
   so the snapshot captures the entire fixed-position unit. */

/* Footer anchored too */
.site-footer {
    view-transition-name: site-footer;
}

/* Allow the browser to group all portfolio images/titles for shared timing */
.wp-block-post-featured-image {
    view-transition-class: portfolio-image;
}

.wp-block-post-title {
    view-transition-class: portfolio-title;
}

/* Root page: gentle fade with a whisper of vertical movement */
::view-transition-old(root) {
    animation: vt-page-out 0.22s ease-out both;
}

::view-transition-new(root) {
    animation: vt-page-in 0.28s ease-out both;
}

/* Header: no position/size animation, but crossfade colours smoothly */
::view-transition-group(site-header) {
    animation: none;
    z-index: 100;
}

::view-transition-old(site-header) {
    animation: vt-header-fade-out 0.3s ease both;
}

::view-transition-new(site-header) {
    animation: vt-header-fade-in 0.3s ease both;
}

/* Footer: instant swap */
::view-transition-group(site-footer) {
    animation: none;
}

::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: none;
}

/* Front-page hero: scale-down + fade when leaving, scale-up + fade when entering */
::view-transition-old(front-hero) {
    animation: vt-hero-out 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(front-hero) {
    animation: vt-hero-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* About section: simple slide-down exit, slide-up enter */
::view-transition-old(front-about) {
    animation: vt-page-out 0.2s ease-out both;
}

::view-transition-new(front-about) {
    animation: vt-page-in 0.3s 0.08s ease-out both;
}

/* Portfolio image morph: smooth deceleration curve (view-transition-class, Chrome 125+) */
::view-transition-group(.portfolio-image) {
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Portfolio title morph: slightly faster so it doesn't lag the image */
::view-transition-group(.portfolio-title) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Crossfade the image content during morph (avoids a hard cut on aspect ratio change) */
::view-transition-old(.portfolio-image) {
    animation: vt-img-out 0.22s ease-out both;
}

::view-transition-new(.portfolio-image) {
    animation: vt-img-in 0.28s ease-out both;
}

@keyframes vt-page-out {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes vt-page-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes vt-hero-out {
    to {
        opacity: 0;
        transform: scale(0.97) translateY(-12px);
    }
}

@keyframes vt-hero-in {
    from {
        opacity: 0;
        transform: scale(1.02) translateY(16px);
    }
}

@keyframes vt-img-out {
    to {
        opacity: 0;
    }
}

@keyframes vt-img-in {
    from {
        opacity: 0;
    }
}

@keyframes vt-header-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes vt-header-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}