/**
 * V3 Mockups Marquee Styles
 * Styling for project mockup galleries with marquee scrolling
 */

/* ===========================================
   Masonry Calculation Variables
   =========================================== */
:root {
    /* Asset sizing optimization - maximize prominence within columns */
    --mockups-column-width: calc(50% - var(--spacing-9)); /* Half column minus half of 18px gap */
    --mockups-column-gap: var(--spacing-18); /* 18px between columns (3×6) */
    --mockups-horizontal-padding: var(--spacing-24); /* 24px container padding each side */
    
    /* Vertical spacing using 6n system */
    --masonry-gap: var(--spacing-192); /* 192px = 32×6 (was 200px) */
    --masonry-avg-height: 432px; /* Default for placeholder content */
    --masonry-offset: calc((var(--masonry-avg-height) + var(--masonry-gap)) / 2);
    
    /* Asset container maximums */
    --asset-max-width: 100%; /* Full column width */
    --asset-image-ratio: 1.33; /* 4:3 aspect ratio default */
    --asset-video-ratio: 1.78; /* 16:9 aspect ratio default */
}

/* START CLEAN-FIX-P5-S7A-V4-MASONRY-ZIGZAG
   Per-breakpoint --masonry-gap overrides for V4 zigzag amplification.
   JS reads dynamically via getComputedStyle (commit 7cfaa45 / V3ExpandedController.js:742-750).
   Base 192px (32×6n) stays in :root above. 820+ = 210px (35×6n), 992+ = 228px (38×6n).
   To revert: Search CLEAN-FIX-P5-S7A-V4-MASONRY-ZIGZAG, delete START→END block. */
@media (min-width: 820px) {
    :root { --masonry-gap: 210px; } /* 35×6n */
}
@media (min-width: 992px) {
    :root { --masonry-gap: 228px; } /* 38×6n */
}
/* END CLEAN-FIX-P5-S7A-V4-MASONRY-ZIGZAG */

/*
 * To calculate exact offset for perfect masonry alignment:
 * 1. Add actual visual assets and captions
 * 2. Measure average height of asset containers (including caption)
 * 3. Update --masonry-avg-height with measured value
 * 4. The offset will automatically center right column assets between left column gaps
 *
 * Current calculation: (427px + 200px) / 2 = 313.5px offset
 */

/* ===========================================
   Asset Container Structure
   =========================================== */

/* Asset container - wraps asset item and caption */
.asset-container {
    position: relative;
    width: var(--asset-max-width);
    margin-bottom: var(--masonry-gap);
    contain: layout style; /* Performance optimization */
}

/* Asset item - contains the visual asset */
.asset-item {
    position: relative;
    width: 100%;
    background-color: var(--white);
    border-top: var(--spacing-3) solid var(--cool); /* 3px = 0.5×6 */
    border-bottom: var(--spacing-3) solid var(--cool);
    box-sizing: border-box;
    overflow: hidden;
    line-height: 0; /* Remove any baseline spacing from images */
}

/* Projects 1 & 6 use darkest borders */
#project1 .asset-item,
#project6 .asset-item {
    border-color: var(--darkest);
}

/* Actual visual assets - images and videos */
.asset-item img,
.asset-item video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Maintain aspect ratio */
}

/* Specific aspect ratio containers */
.asset-item.ratio-16-9 {
    aspect-ratio: 16/9;
}

.asset-item.ratio-4-3 {
    aspect-ratio: 4/3;
}

.asset-item.ratio-1-1 {
    aspect-ratio: 1/1;
}

.asset-item.ratio-3-4 {
    aspect-ratio: 3/4;
}

/* Placeholder styling for development */
.placeholder-asset {
    width: 100%;
    height: 408px; /* 408px = 68×6 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-heading);
    font-weight: 700;
    color: var(--light);
    background-color: var(--lightest);
    font-family: var(--font-primary);
    line-height: 1;
}

/* Vary placeholder heights for visual interest - using 6n system */
.asset-container:nth-child(3n) .placeholder-asset {
    height: 300px; /* 300px = 50×6 */
}

.asset-container:nth-child(3n+1) .placeholder-asset {
    height: 456px; /* 456px = 76×6 */
}

.asset-container:nth-child(3n+2) .placeholder-asset {
    height: 360px; /* 360px = 60×6 */
}

/* Average height calculation for masonry:
 * Pattern repeats every 3 assets: 456px, 360px, 300px
 * Average placeholder: (456 + 360 + 300) / 3 = 372px
 * Plus caption height 60px = 432px total (72×6)
 */

/* Asset caption styling */
.asset-caption {
    margin-top: var(--spacing-18); /* 18px below asset */
    position: relative;
    z-index: 2;
    background-color: var(--white);
    padding: var(--spacing-12);
    box-sizing: border-box;
    width: calc(100% - 6px); /* Make narrower to show shadow on right */
}

/* Caption base styling - project-specific borders will override */

/* Project-specific full borders for captions - using light for subtle effect */
#project1 .asset-caption {
    border: 3px solid var(--light); /* Subtle border */
}

#project2 .asset-caption {
    border: 3px solid var(--light);
}

#project3 .asset-caption {
    border: 3px solid var(--light);
}

#project4 .asset-caption {
    border: 3px solid var(--light);
}

#project5 .asset-caption {
    border: 3px solid var(--light);
}

#project6 .asset-caption {
    border: 3px solid var(--light);
}

/* Caption typography */
.asset-caption p {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-small);
    line-height: 1.4;
    font-family: var(--font-secondary);
}

/* First line - title */
.asset-caption p:first-child {
    font-weight: 500;
    margin-bottom: var(--spacing-6);
    letter-spacing: 0.2px;
    color: var(--darkest);
}

/* Second line - description */
.asset-caption p:last-child {
    font-weight: 400;
    color: var(--warm);
}

/* Emphasis styling within captions */
.asset-caption em {
    font-style: italic;
    font-weight: 500;
}

/* Project-specific caption shadow effects */
#project1 .asset-caption {
    display: none; /* Project 1 has no captions */
}

#project2 .asset-caption {
    box-shadow: 3px 3px 0 rgba(0, 0, 255, 0.2); /* blue shadow */
}

#project3 .asset-caption {
    box-shadow: 3px 3px 0 rgba(255, 0, 68, 0.2); /* pink shadow */
}

#project4 .asset-caption {
    box-shadow: 3px 3px 0 rgba(170, 0, 255, 0.2); /* purple shadow */
}

#project5 .asset-caption {
    box-shadow: 3px 3px 0 rgba(7, 7, 51, 0.2); /* darkblue shadow */
}

#project6 .asset-caption {
    box-shadow: 3px 3px 0 rgba(0, 247, 255, 0.2); /* cyan shadow */
}

/* ===========================================
   Marquee Animation
   =========================================== */

/* Marquee scrolling animation */
@keyframes marquee-scroll {
    0% { 
        transform: translate3d(0, 0, 0);
    }
    100% { 
        /* Dynamic loop point based on visual content alignment
           Calculated by V3MockupsMarquee to find natural reset point */
        transform: translate3d(0, var(--loop-point, -33.33%), 0);
    }
}

/* Marquee wrapper for synchronized scrolling */
.marquee-wrapper {
    /* Static container - no animation */
    /* Maintain masonry layout structure */
    display: flex;
    width: 100%;
    gap: var(--spacing-24); /* Match mockups-masonry gap */
}

/* Ensure wrapper is inside masonry properly */
.mockups-masonry .marquee-wrapper {
    flex: 1;
    padding: 0; /* Padding is on mockups-masonry */
}

/* Apply animation to marquee content for scrolling */
.marquee-content {
    animation: marquee-scroll var(--marquee-duration, 120s) linear infinite;
    animation-play-state: paused; /* Start paused by default */
    --marquee-duration: 120s; /* Default speed */
    
    /* GPU acceleration for smooth scrolling */
    /* Removed static transform to prevent conflict with animation */
    backface-visibility: hidden;
    perspective: 1000px;
    
    /* Always set for marquee content to prevent jumping */
    will-change: transform;
}

/* Additional class for active scrolling state */
.marquee-content.scrolling {
    animation-play-state: running;
    /* will-change is now always set on .marquee-content */
}

/* Paused state */
/* START CLEAN-FIX-P5-S7A-M5-BREATHE
   Layered animation: pause marquee-scroll while breathe runs continuously.
   The 'paused' keyword inside shorthand pauses ONLY the first animation in the list.
   Was: animation-play-state: paused; (longhand on single animation)
   To revert: Replace entire .paused block with `animation-play-state: paused;`
   and delete @keyframes breathe. */
.marquee-content.paused {
    animation: breathe 2.4s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { scale: 1; }
    50%      { scale: 1.0005; }
}
/* END CLEAN-FIX-P5-S7A-M5-BREATHE */

/* START CLEAN-FIX-P5-S7A-V4-RAF-OVERRIDE
   rAF conversion: CSS animation must not compete with JS-driven transform.
   .raf-driven added by V3MockupsMarquee.startAnimation(), removed on pause.
   When paused, .raf-driven removed + .paused added so breathe scale animation activates.
   .raf-driven.paused allows breathe to run even when raf-driven is still present (restart case).
   To revert: Delete between START/END, restore .scrolling animation-play-state approach. */
.marquee-content.raf-driven {
    animation: none;
}
.marquee-content.raf-driven.paused {
    animation: breathe 2.4s ease-in-out infinite;
}
/* END CLEAN-FIX-P5-S7A-V4-RAF-OVERRIDE */

/* ===========================================
   Masonry Layout Adjustments
   =========================================== */

/* Masonry spacer for manual offset control */
.masonry-spacer {
    width: 100%;
    background: transparent;
    pointer-events: none;
}

/* Ensure masonry layout displays properly */
.mockups-masonry {
    display: flex;
    gap: var(--spacing-24);
    width: 100%;
    padding: 0 var(--spacing-24);
}

.masonry-column {
    flex: 1;
    width: calc(50% - var(--spacing-12));
    overflow: hidden;
}

/* START CLEAN-FIX-P5-S6.5-SINGLE-COLUMN-WIDTH
   Align single-column DOM reality with CSS width.

   Root cause: index.html emits exactly ONE .masonry-column per project
   (lines 270, 570, 1004, 1513, 1881, 2424). The base rule above was
   authored for a 2-column zigzag masonry layout (width: calc(50% - 12px)
   meaning "half the container, leave half for column 2"), but the
   companion second column was never added to the DOM. The result is
   mockups that appear to "float" in a half-width band at MD/LG with
   the other half empty — visually confusing at LG min 992×700 and
   MD max 991×1200.

   Fix: When a .masonry-column is an :only-child of its .mockups-masonry
   parent (always true in current DOM), expand it to full container
   width. This produces a coherent "full-width single-column" layout
   that matches the DOM reality instead of gesturing at a 2-column
   layout that doesn't exist.

   P4 preservation: #project4 .masonry-column { width: 42%; max-width:
   350px } at line 385 below has specificity (1,1,0) which beats this
   rule's (0,2,0) — P4 keeps its narrow-by-design layout automatically
   via ID specificity. No explicit exclusion needed.

   Dead zigzag rules: .masonry-column:nth-child(2) ... rules below
   (lines 340, 347, 353, etc.) never fire because there is no nth-child(2).
   Left in place as low-risk dead CSS — deleting them is a separate
   Phase 9 cleanup concern. They're harmless and serve as documentation
   of the original zigzag design intent.

   Defensibility: This is a CSS-only single-rule fix that makes the
   rendered layout match the DOM. It does NOT restructure DOM (which
   would be a Phase 9 architectural change affecting V3MockupsMarquee
   rAF column tracking + per-project offset calculations). It does NOT
   touch V3MockupsMarquee.js (which correctly reports `columns=1` to
   the console — that's ground truth, not a JS bug).

   Evidence: 2026-04-13 visual screenshots at LG min 992×700 and MD
   max 991×1200 showed "mockups floating in half-width band" with
   empty space where column 2 was expected. DOM grep of index.html
   confirmed 1 .masonry-column per project (6 of 6 projects). CSS
   read of v3-mockups-marquee.css:335 confirmed width: calc(50% - 12px)
   as the source of the half-width bug.

   If not effective: Verify via DevTools that .masonry-column has
   width: 100% computed at desktop. If still 50%, check cascade order
   — the base rule at line 335 loads before this rule. If a
   higher-specificity rule overrides (e.g., a later .mockups-masonry
   .masonry-column { width: ... } ), this :only-child rule will lose.
   Fallback: escalate specificity to .mockups-masonry .masonry-column:only-child.

   Stopping condition: If asset images become too large at 1920×1080
   (full-width single column = much larger than 50% half-column), add
   a max-width cap at XL via @media (min-width: 1200px) { .masonry-column
   :only-child { max-width: 720px } } in a sub-marker.

   To revert: Search CLEAN-FIX-P5-S6.5-SINGLE-COLUMN-WIDTH, delete
   everything between START and END markers. */
.masonry-column:only-child {
    width: 100%;
}
/* END CLEAN-FIX-P5-S6.5-SINGLE-COLUMN-WIDTH */

/* Default vertical offset for second column's content
   (NOTE: Dead rule — no .masonry-column:nth-child(2) exists in current DOM.
    Kept for documentation of original 2-column zigzag design intent. See
    CLEAN-FIX-P5-S6.5-SINGLE-COLUMN-WIDTH above.) */
.masonry-column:nth-child(2) .marquee-content {
    padding-top: var(--masonry-offset);
}

/* Project-specific masonry offsets for perfect zigzag alignment */

/* Project 1: Personal images (varied heights) */
#project1 .masonry-column:nth-child(2) .marquee-content {
    /* Offset is now handled by spacer div in HTML for better control */
    padding-top: 0;
}

/* Project 2: Time UI videos (590x1200 + captions) */
#project2 .masonry-column:nth-child(2) .marquee-content {
    /* Offset is now handled by spacer div in HTML for better control */
    padding-top: 0;
}

/* Project 3: AI videos (will be calculated) */
#project3 .masonry-column:nth-child(2) .marquee-content {
    padding-top: var(--masonry-offset); /* Placeholder */
}

/* Project 4: Crisis videos (single column - no offset needed) */
#project4 .masonry-column:nth-child(2) .marquee-content {
    padding-top: 0;
}

/* Project 5: Product images (will be calculated) */
#project5 .masonry-column:nth-child(2) .marquee-content {
    padding-top: var(--masonry-offset); /* Placeholder */
}

/* Project 6: Mixed assets - offset handled by zigzag-spacer div in HTML */
#project6 .masonry-column:nth-child(2) .marquee-content {
    padding-top: 0;
}

/* Single column for Project 4 */
#project4 {
    --asset-max-width: 196px; /* Override the 100% default for centered single column */
}

/* Single column for Project 4 - removed conflicting styles */

#project4 .masonry-column {
    width: 42%; /* Narrower column */
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the narrower assets */
    margin: 0 auto; /* Simple auto margins for clean centering */
}

/* Project 4 moved to Project-Specific Asset Sizing section below */

/* ===========================================
   Control Button States
   =========================================== */

/* Speed button active state */
.speed-option.active {
    background-color: var(--darkest);
    color: var(--white);
}

/* Pause button active state removed - using animation class instead */

/* ===========================================
   Project-Specific Asset Sizing
   =========================================== */

/* Project 1: Personal photography - varied aspect ratios */
#project1 .asset-item {
    /* Images will use natural aspect ratios */
    aspect-ratio: auto;
}

/* Project 2: Time UI videos - portrait orientation */
#project2 .asset-item {
    aspect-ratio: auto; /* Use natural video dimensions (590x1200) */
    background-color: var(--black); /* Letterbox background */
}

#project2 .asset-item video {
    width: 100%;
    height: auto;
    object-fit: contain; /* Maintain aspect ratio without cropping */
}

/* Project 3: AI interaction videos - mixed ratios */
#project3 .asset-item {
    aspect-ratio: auto;
    /* START CLEAN-FIX-P5-S6.5-P3-ASSET-MINHEIGHT
       The original rule: `min-height: var(--spacing-360)` (360px)
       was authored for 2-column masonry zigzag alignment — forcing
       a uniform minimum height so short assets in one column would
       visually align with tall assets in the sibling column.
       With P5-S6.5 Fix #1 (.masonry-column:only-child { width: 100% }),
       P3 now renders as a single column — there is no sibling column
       to align with. The 360px minimum just creates visible empty
       space between the asset image bottom and the caption top,
       letting P3's pink accent border show through a blank gap.
       User-reported 2026-04-14 (image #33 vs image #32 comparison).
       To revert: Delete between START/END markers and restore the
       `min-height: var(--spacing-360)` line above. */
    min-height: 0;
    /* END CLEAN-FIX-P5-S6.5-P3-ASSET-MINHEIGHT */
}

/* Project 3: Extra spacing for right column zigzag */
#project3 .masonry-column:last-child .asset-container {
    margin-bottom: 195px; /* 192px base + 3px extra for better zigzag spacing */
}

/* Project 4: Crisis response - single column, precise aspect ratio */
#project4 .asset-container {
    margin: 0 auto var(--masonry-gap); /* Center in column with standard gap */
    /* Width handled by custom property --asset-max-width: 196px */
}

#project4 .asset-item {
    aspect-ratio: 920/1874; /* Match exact video aspect ratio */
    background-color: var(--black); /* Black for letterboxing (but won't show) */
    max-height: 400px; /* Constrain height */
    width: auto; /* Width adjusts to maintain aspect ratio */
}

#project4 .asset-item video {
    width: 100%;
    height: 100%;
    object-fit: fill; /* Video fills container exactly */
}


/* Project 5: Metis product photography - mixed orientations */
#project5 .asset-item {
    aspect-ratio: auto; /* Let images use natural ratios */
    background-color: var(--white);
}

#project5 .asset-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Project 5 zigzag offset for second column */
#project5 .masonry-column:nth-child(2) .marquee-content {
    /* Offset handled by spacer div in HTML (210px) */
    padding-top: 0;
}

/* Project 6: Mixed media collection */
#project6 .asset-item {
    aspect-ratio: auto;
    /* Allow natural height based on content for mixed landscape/portrait assets */
}

/* ===========================================
   Asset Loading States
   =========================================== */

/* Skeleton loader for assets */
.asset-item.loading {
    background: linear-gradient(
        90deg,
        var(--lightest) 25%,
        var(--light) 50%,
        var(--lightest) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===========================================
   Performance Optimizations
   =========================================== */

/* GPU acceleration for smooth scrolling */
.mockups-marquee-container {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint areas */
.asset-item {
    contain: layout style paint;
}

/* ===========================================
   Height Equalizer for Wall-Based Marquee
   =========================================== */

.height-equalizer {
    width: 100%;
    background: transparent;
    pointer-events: none;
    /* Height will be set dynamically via JavaScript */
}

/* ===========================================
   Project 5 Precise Positioning System
   Uses transforms to achieve exact zigzag alignment
   while maintaining marquee functionality
   =========================================== */

/* Each asset maintains its flow but adjusts position via transform */
#project5 .masonry-column:first-child .asset-container[data-y-position] {
    /* Left column assets - already perfectly aligned with natural flow */
    /* No transform needed as calculations show 0px offset for all */
}

/* Right column needs progressive adjustments via transforms */
#project5 .masonry-column:last-child .asset-container[data-y-position="237"] {
    /* Asset 2 - Natural position matches desired, no adjustment */
    transform: translateY(0);
}

#project5 .masonry-column:last-child .asset-container[data-y-position="587"] {
    /* Asset 4 - Needs -49px adjustment from natural position */
    transform: translateY(-49px);
}

#project5 .masonry-column:last-child .asset-container[data-y-position="986"] {
    /* Asset 6 - Needs -172px cumulative adjustment */
    transform: translateY(-172px);
}

#project5 .masonry-column:last-child .asset-container[data-y-position="1384"] {
    /* Asset 8 - Needs -296px cumulative adjustment */
    transform: translateY(-296px);
}

#project5 .masonry-column:last-child .asset-container[data-y-position="1781"] {
    /* Asset 10 - Needs -421px cumulative adjustment */
    transform: translateY(-421px);
}

#project5 .masonry-column:last-child .asset-container[data-y-position="2179"] {
    /* Asset 12 - Needs -545px cumulative adjustment */
    transform: translateY(-545px);
}

#project5 .masonry-column:last-child .asset-container[data-y-position="2636"] {
    /* Asset 14 - Needs -610px cumulative adjustment */
    transform: translateY(-610px);
}

/* Ensure transforms are GPU-accelerated for smooth scrolling */
#project5 .asset-container[data-y-position] {
    will-change: transform;
    backface-visibility: hidden;
}

/* ===========================================
   Interaction States
   =========================================== */

/* will-change is now permanently set on .marquee-content to prevent jumping */