/* ============================================================
   WORKFLOW PAGE
   - Single 100vh / 100vw page, no scroll.
   - Hovering a bottom-strip thumbnail swaps the displayed
     project (title, concept, workflow thumbnails).
   - Hovering a workflow-stage thumbnail shows a big preview
     image on the LEFT side. Default layer order:
         text (back) → big-preview → all thumbnails (front)
     Final-render thumbs (and any thumb tagged onTop) promote
     the big preview to the very top, in front of everything.
   ============================================================ */

:root {
    --bg:        #ffffff;
    --ink:       #0e0e0e;
    --muted:     rgba(14, 14, 14, .55);
    --blue:      #0047FF;
    --gap-side:  2.25vw;
    --gap-col:   3vw;
    --thumb-h:   4.5vh;
    --strip-h:   6.5vh;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    overflow: hidden;
    font-family: 'PracticalGrotesk', sans-serif;
    cursor: none;
}

a { color: inherit; text-decoration: none; cursor: none; }

/* ============================================
   CUSTOM CURSOR — black square, scales on hover. No follow-box.
   ============================================ */
#cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: .7vw; height: .7vw;
    background: var(--ink);
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%, -50%);
    transform-origin: center;
    will-change: transform, left, top;
    transition:
        width  .22s cubic-bezier(.35,2.04,.59,.85),
        height .22s cubic-bezier(.35,2.04,.59,.85),
        background .18s ease;
}
body.hovered #cursor-dot {
    width: .4vw; height: .4vw;
    background: var(--blue);
}

/* preview-card — small floating thumbnail next to the cursor for
   footer links. Driven by workflow.js. */
#preview-card {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 220px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
    padding: 8px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(6px) scale(.97);
    transition:
        opacity   .22s cubic-bezier(.16,1,.3,1),
        transform .22s cubic-bezier(.16,1,.3,1);
    will-change: transform, opacity, left, top;
}
#preview-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
#preview-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #f0f0f0;
}
#preview-label {
    font-family: 'PracticalGrotesk', sans-serif;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #000;
    opacity: .5;
    line-height: 1;
}

/* ============================================
   PAGE LAYOUT
   ============================================ */
#workflow-page {
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 4.6vh var(--gap-side) 0;
    overflow: hidden;
}

/* Wrappers do NOT create new stacking contexts (no z-index on
   them) so .stage-thumb / .strip-thumb can stack relative to
   the root stacking context — i.e., above .big-preview (z 5). */

/* ----- Top headline ----- */
.top-headline {
    margin: 0;
    max-width: 90%;
    font-family: 'PracticalGrotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.55vw, 1.6rem);
    line-height: 1.25;
    letter-spacing: -.005em;
}

/* ----- Project header ----- */
.project-header {
    margin-top: 5.5vh;
    display: grid;
    grid-template-columns: 22vw 1fr;
    column-gap: var(--gap-col);
    align-items: start;
}
.project-title {
    margin: 0;
    font-family: 'PracticalGrotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.5;
}
.project-concept {
    margin: 0;
    font-family: 'PracticalGrotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    line-height: 1.5;
    max-width: 80vw;
}

/* ----- Workflow section ----- */
.workflow-section {
    margin-top: 4vh;
}
.workflow-label {
    margin: 0;
    font-family: 'PracticalGrotesk', sans-serif;
    font-weight: 800;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.5;
}
.workflow-grid {
    display: grid;
    grid-template-columns: 22vw repeat(4, minmax(0, 1fr));
    column-gap: var(--gap-col);
}
/* Logo sits in the left rail (column 1), at roughly the same
   vertical distance below the "Workflow" label as the gap from
   "PROJECT TITLE" to the label above. Width is ~12% of viewport. */
.workflow-logo {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    width: 12vw;
    height: auto;
    margin-top: 6vh;
    pointer-events: none;
}

.workflow-col[data-stage="storyboard"]  { grid-column: 2; }
.workflow-col[data-stage="stillframes"] { grid-column: 3; }
.workflow-col[data-stage="alternate"]   { grid-column: 4; }
.workflow-col[data-stage="final"]       { grid-column: 5; }

.workflow-col {
    display: flex;
    flex-direction: column;
}
.col-description {
    margin: 0;
    text-wrap: balance;
    font-family: 'PracticalGrotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(.78rem, .85vw, .95rem);
    line-height: 1.5;
    min-height: 7.5rem;
}
.col-meta {
    display: flex;
    flex-direction: column;
    margin-top: 1.2vh;
    font-family: 'PracticalGrotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(.85rem, 1vw, 1.05rem);
    line-height: 1.5;
}

/* ----- Workflow stage thumbnails -----
   Native aspect ratio: only height is fixed, width auto-fits
   the image's natural ratio. */
.col-thumbs {
    margin-top: 1vh;
    display: flex;
    flex-wrap: wrap;
    gap: .55vw;
    align-content: flex-start;
}
.stage-thumb {
    position: relative;
    height: var(--thumb-h);
    width: auto;
    overflow: hidden;
    background: #eee;
    z-index: 11;             /* sits above big-preview default (z 5) */
    transition: transform .25s ease, opacity .25s ease;
    cursor: none;
}
.stage-thumb img,
.stage-thumb video {
    height: 100%;
    width: auto;
    display: block;
    pointer-events: none;
}
.stage-thumb:hover { transform: translateY(-2px); }

/* Final render column: thumbs are smaller squares in the Figma,
   but height-only sizing also works. Keep consistent height. */
.workflow-col[data-stage="final"] .stage-thumb {
    height: 3.4vh;
}

/* ============================================
   BIG PREVIEW
   - Default layer (z 5): between text (back) and thumbnails (z 11).
   - .always-on-top (z 50): in front of everything.
   ============================================ */
.big-preview {
    position: fixed;
    left: var(--gap-side);
    top: 50%;
    transform: translateY(-50%) scale(.985);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity   .25s cubic-bezier(.16,1,.3,1),
        transform .35s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
    /* The preview's own size adapts to the visible child element
       (image OR iframe). Each child sets its own dimensions. */
}
.big-preview.visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.big-preview.always-on-top {
    z-index: 50;
}

/* The image preserves the file's native ratio; only height is
   constrained to 96vh. Width naturally follows. If the ratio is
   so wide that width would exceed 50vw, we clip width to 50vw
   (object-fit: contain keeps the whole image visible). */
.big-preview img {
    display: none;
    height: 96vh;
    width: auto;
    max-width: 50vw;
    object-fit: contain;
}

/* Vimeo iframe — aspect ratio is set per-project as
   --aspect: 16/9 / 2.35 / etc., defaulting to 16/9. */
.big-preview iframe {
    display: none;
    --aspect: 16/9;
    height: min(96vh, calc(50vw / (var(--aspect))));
    aspect-ratio: var(--aspect);
    background: #000;
}

/* Local video — same sizing as the iframe. */
.big-preview video {
    display: none;
    --aspect: 1/1;
    height: min(96vh, calc(50vw / (var(--aspect))));
    aspect-ratio: var(--aspect);
    background: #000;
    object-fit: contain;
}

/* JS toggles these classes to swap between image / video / local-video. */
.big-preview.show-img         img   { display: block; }
.big-preview.show-video       iframe { display: block; }
.big-preview.show-localvideo  video  { display: block; }

/* ============================================
   BOTTOM PROJECT STRIP
   ============================================ */
.project-strip {
    position: absolute;
    left: var(--gap-side);
    right: var(--gap-side);
    bottom: 7.5vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6vw;
    height: var(--strip-h);
}

.strip-group {
    display: flex;
    gap: .35vw;
    transition: margin .35s cubic-bezier(.22,1,.36,1);
}
.strip-thumb {
    position: relative;
    height: var(--strip-h);
    width: auto;
    overflow: hidden;
    background: #eee;
    z-index: 11;             /* same layer as workflow thumbs */
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease, filter .3s ease;
    cursor: none;
}
.strip-thumb img {
    height: 100%;
    width: auto;
    display: block;
    pointer-events: none;
}

/* "Isolate" the active group — push neighbours apart and dim them. */
body.has-active .strip-group:not(.is-active) .strip-thumb {
    opacity: .35;
    filter: grayscale(.4);
}
.strip-group.is-active             { margin-left: 1.4vw; margin-right: 1.4vw; }
.strip-group.is-active:first-child { margin-left: 0; }
.strip-group.is-active:last-child  { margin-right: 0; }
.strip-group.is-active .strip-thumb {
    transform: translateY(-3px);
}

/* ============================================
   FOOTER — Home, Contact, The Alps, Instagram, Behance, LinkedIn.
   The links sit inside .footer-links, so .footer-sig (mobile-only)
   can be a clean sibling block below them — never sharing a grid
   cell with a link.
   ============================================ */
.workflow-footer {
    position: absolute;
    left: var(--gap-side);
    right: var(--gap-side);
    bottom: 3vh;
    z-index: 40;
    font-family: 'PracticalGrotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(.55rem, .58vw, .7rem);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.footer-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1vw;
}
.footer-link {
    position: relative;
    line-height: 1;
    transition: opacity .2s ease;
}
.footer-link:hover { opacity: .55; }
.mobile-link-footer{
    text-align: auto;
}
/* Alps link is mobile-only — hidden on desktop. The mobile @media
   block at the bottom of this file restores it (the 2×3 grid keeps
   the full 6-link layout). */
.footer-link-mobile-only { display: none; }

/* ============================================
   MOBILE-ONLY MARKUP (.mobile-stage-info, .mobile-strip-header,
   .footer-sig). Hidden on desktop, shown inside the @media block.
   ============================================ */
.mobile-stage-info,
.mobile-strip-header,
.footer-sig { display: none; }

/* ============================================
   MOBILE — long-scroll layout matching the Figma mobile design.
   Breakpoint matches isMobile() in ismobile.js (≤767 + portrait).
   ============================================ */
@media (max-width: 767px) {

    /* Page becomes a normal vertical-scroll page on mobile. */
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
    }
    #cursor-dot{
        width: 2.7vw; height: 2.7vw;
    }
    #workflow-page {
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 2vh 5.5vw 0;
        overflow: visible;
    }

    /* ---------- Top headline ---------- */
    .top-headline {
        max-width: 100%;
        font-size: clamp(1.3rem, 6vw, 1.6rem);
        line-height: 1.2;
        letter-spacing: -.005em;
    }

    /* ---------- Mobile generic-info grid (2×2) ---------- */
    .mobile-stage-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 8vw;
        row-gap: 4vh;
        margin-top: 6vh;
    }
    .mobile-stage-cell {
        display: flex;
        flex-direction: column;
        gap: 2vh;
    }
    .mobile-stage-desc {
        margin: 0;
        font-family: 'PracticalGrotesk', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.5;
    }
    .mobile-stage-meta {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        font-family: 'PracticalGrotesk', sans-serif;
        font-weight: 800;
        font-size: 15px;
        line-height: 1;
    }
    .mobile-stage-number { opacity: .9; }

    /* ---------- Project header ---------- */
    .project-header {
        margin-top: 7vh;
        display: block;             /* override desktop grid */
    }
    .project-title {
        font-size: 22px;
        line-height: 1.1;
        margin-bottom: 1.5vh;
    }
    .project-concept {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }

    /* ---------- Workflow section (mobile = thumbs grid only) ---------- */
    .workflow-section { margin-top: 5vh; }
    .workflow-label   { display: none; }   /* "Workflow" header — desktop-only */
    .workflow-logo    { display: none; }   /* logo cube — desktop-only */

    .workflow-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 8vw;
        row-gap: 4vh;
    }
    /* Reset the explicit grid-column rules from desktop. */
    .workflow-col[data-stage="storyboard"]  { grid-column: 1; grid-row: 1; }
    .workflow-col[data-stage="stillframes"] { grid-column: 2; grid-row: 1; }
    .workflow-col[data-stage="alternate"]   { grid-column: 1; grid-row: 2; }
    .workflow-col[data-stage="final"]       { grid-column: 2; grid-row: 2; }

    .workflow-col {
        display: flex;
        flex-direction: column;
        gap: 1.5vh;
    }
    /* Hide desktop's per-column description (shown above instead). */
    .col-description { display: none; }

    .col-meta {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 0;
        font-weight: 800;
        font-size: 15px;
        line-height: 1;
    }

    /* All thumbnails share a fixed height; width is auto so each one
       keeps its native aspect ratio. Vertical thumbs render small,
       landscape ones wide — they line up on the same baseline. */
    .col-thumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 0;
        align-content: flex-start;
    }

    .stage-thumb {
        width: auto;
        height: 11vw;
        aspect-ratio: auto;
        overflow: hidden;
    }
    .stage-thumb img,
    .stage-thumb video {
        width: auto;
        height: 100%;
        display: block;
        object-fit: initial;
    }
    .workflow-col[data-stage="final"] .stage-thumb {
        height: 11vw;
        aspect-ratio: auto;
    }

    /* Crossfade thumbnails on project switch. */
    .col-thumbs                          { transition: opacity .22s ease; }
    body.project-switching .col-thumbs   { opacity: 0; }

    /* ---------- Big preview overlay (top of viewport, fixed) ---------- */
    .big-preview {
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 0;
    }
    .big-preview.visible {
        transform: none;
    }
    .big-preview img {
        max-height: 50vh;
        max-width: 100vw;
        height: auto;
        width: auto;
    }
    /* Iframe — height = whichever is smaller of 50vh OR (100vw / aspect),
       aspect-ratio derives the other dimension. */
    .big-preview iframe {
        height: min(50vh, calc(100vw / (var(--aspect))));
        max-width: 100vw;
        aspect-ratio: var(--aspect);
        background: #000;
    }

    /* Local video — same constraints as iframe on mobile. */
    .big-preview video {
        height: min(50vh, calc(100vw / (var(--aspect))));
        max-width: 100vw;
        aspect-ratio: var(--aspect);
        background: #000;
    }

    /* Make the visible preview tappable so users can dismiss it.
       Without this the JS click handler on #big-preview never fires
       because pointer-events: none is inherited. */
    .big-preview.visible {
        pointer-events: auto;
        cursor: pointer;
    }

    /* ---------- Mobile project-strip header (label + swipe hint) ---------- */
    .mobile-strip-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-top: 6vh;
        font-family: 'PracticalGrotesk', sans-serif;
        font-weight: 800;
        font-size: 15px;
    }
    .mobile-strip-swipe {
        font-weight: 500;
        font-size: 13px;
    }

    /* ---------- Project strip — horizontal scroll ---------- */
    .project-strip {
        position: relative;
        left: auto; right: auto; bottom: auto;
        margin-top: 2vh;
        height: auto;
        justify-content: flex-start;

        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 2vw;
        padding-bottom: 1vh;
    }
    /* Pull the strip flush to the page edges so the user can swipe
       items in from off-screen, while keeping inner content padded. */
    .project-strip {
        margin-left: -5.5vw;
        margin-right: -5.5vw;
        padding-left: 5.5vw;
        padding-right: 5.5vw;
    }
    .project-strip::-webkit-scrollbar { display: none; }
    .project-strip { scrollbar-width: none; }

    .strip-group {
        flex: 0 0 auto;
        gap: 1.5vw;
        scroll-snap-align: start;
    }
    /* No isolation push on mobile — projects are switched on tap, the
       active group keeps its natural width. */
    .strip-group.is-active             { margin-left: 0; margin-right: 0; }
    .strip-group.is-active .strip-thumb { transform: none; }
    body.has-active .strip-group:not(.is-active) .strip-thumb {
        opacity: 1;
        filter: none;
    }
    .strip-thumb {
        height: 7vh;
        /* Drop below the big-preview overlay (z 5) on mobile so the
           preview image visually covers the strip when it opens. */
        z-index: auto;
    }

    /* ---------- Footer ----------
       The footer is a simple block: .footer-links (grid of 6 links)
       on top, .footer-sig (name + email) right below it. */
    .workflow-footer {
        position: relative;
        left: auto; right: auto; bottom: auto;
        margin: 6vh -5.5vw 0;
        padding: 5vh 7vw 3vh;
        background: #000;
        color: #fff;
        z-index: 10;

        display: block;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: none;
    }
    /* HTML order: Home, Contact, The Alps, Instagram, Behance, LinkedIn.
       grid-auto-flow: column fills col 1 first (3 internal links),
       then col 2 (3 socials). */
    .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        column-gap: 6vw;
        row-gap: 2.5vh;
        justify-content: start;
        align-items: start;
    }
    .footer-link {
        line-height: 1.1;
    }
    .mobile-link-footer{
    text-align: right;
}
    .footer-link:hover { opacity: 1; }   /* mobile has no hover */
    /* Mobile-only Alps link — restored from the desktop hide. */
    .footer-link-mobile-only { display: block; }

    /* Tiny signature row at the very bottom of the mobile footer.
       Sibling of .footer-links — sits in normal block flow below. */
    .footer-sig {
        display: flex;
        justify-content: space-between;
        margin-top: 4vh;
        font-family: 'PracticalGrotesk', sans-serif;
        font-weight: 400;
        font-size: 11px;
        opacity: .85;
    }
}

/* ============================================
   ACTUAL TOUCH DEVICE — kills the custom cursor and shows the native
   pointer. Detection is based on input capabilities, NOT viewport
   size, so a desktop browser shrunk to a phone-sized window (any
   orientation) still keeps the square cursor and hover behaviour.
   Matches the JS gate in workflow.js.
   ============================================ */
@media (pointer: coarse) and (hover: none) {
    html, body { cursor: auto; }
    a, .stage-thumb, .strip-thumb { cursor: pointer; }
    #cursor-dot, #preview-card { display: none !important; }
}