/* ==========================================================
   AXN Portfolio
   Components
   ========================================================== */

/* ==========================================================
   Logo
   ========================================================== */

.logo {

    display: flex;

    align-items: center;

    transition: opacity var(--transition-base);

}

.logo:hover {

    opacity: .6;

}

.logo-mark {

    height: 38px;

    width: auto;

    display: block;

}



/* ==========================================================
   Button / Text Link
   ========================================================== */

.button {

    display: inline-flex;

    align-items: center;

    gap: .75rem;

    width: fit-content;

    padding-bottom: .2rem;

    border-bottom: 1px solid transparent;

    transition: all var(--transition-base);

}

.button:hover {

    border-color: var(--color-text);

}



/* ==========================================================
   Divider
   ========================================================== */

.divider {

    width: 100%;

    height: 1px;

    background: var(--color-border);

}



/* ==========================================================
   Video
   ========================================================== */

.video {

    width: 100%;

    overflow: hidden;

    background: #000;

    position: relative;

}

.video video {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* ==========================================================
   Project Video
   ========================================================== */

.project-video {

    position: relative;

    overflow: hidden;

    background: #000;

    border-radius: var(--radius-small);

    transition: transform .45s ease;

}

.project:hover .project-video {

    transform: scale(.985);

}


/* Sound Toggle Button Overlay */

.sound-toggle {

    position: absolute;

    bottom: 1.25rem;

    right: 1.25rem;

    z-index: 10;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.4rem 0.85rem;

    font-size: var(--text-xs);

    font-weight: var(--font-weight-medium);

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--color-white);

    background: rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 20px;

    cursor: pointer;

    opacity: 0;

    transition: opacity var(--transition-base), background var(--transition-fast), border-color var(--transition-fast);

}

.project-video:hover .sound-toggle,
.sound-toggle.is-active {

    opacity: 1;

}

.sound-toggle:hover {

    background: rgba(0, 0, 0, 0.88);

    border-color: rgba(255, 255, 255, 0.5);

}

.video-label-tag {

    font-size: var(--text-xs);

    font-weight: var(--font-weight-medium);

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--color-text-tertiary);

    margin-bottom: .2rem;

}

/* Aspect Ratio Utilities */

.aspect-9-16 {

    aspect-ratio: 9 / 16;

}

.aspect-16-9 {

    aspect-ratio: 16 / 9;

}

.aspect-1-1 {

    aspect-ratio: 1 / 1;

}




/* ==========================================================
   Project Content
   ========================================================== */

.project-info {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 1.5rem;

}

.project-info a {

    width: fit-content;

}



/* ==========================================================
   Stack
   ========================================================== */

.stack-xs>*+* {

    margin-top: .5rem;

}

.stack-sm>*+* {

    margin-top: 1rem;

}

.stack-md>*+* {

    margin-top: 2rem;

}

.stack-lg>*+* {

    margin-top: 4rem;

}



/* ==========================================================
   Cluster
   ========================================================== */

.cluster {

    display: flex;

    align-items: center;

    gap: 1rem;

    flex-wrap: wrap;

}



/* ==========================================================
   Flow
   ========================================================== */

.flow>*+* {

    margin-top: 1.5rem;

}



/* ==========================================================
   Image
   ========================================================== */

.image {

    overflow: hidden;

}

.image img {

    width: 100%;

    display: block;

    object-fit: cover;

}



/* ==========================================================
   Caption
   ========================================================== */

.meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 1rem;

}



/* ==========================================================
   Project Hover
   ========================================================== */

.project {

    transition: opacity var(--transition-base);

}

.project:hover {

    opacity: 1;

}

.featured-projects:hover .project:not(:hover) {

    opacity: .45;

}



/* ==========================================================
   Section Intro
   ========================================================== */

.section-intro {

    max-width: 620px;

    margin-bottom: 6rem;

}



/* ==========================================================
   Utility
   ========================================================== */

.center {

    display: flex;

    justify-content: center;

    align-items: center;

}

.hidden {

    display: none;

}

.full-width {

    width: 100%;

}