/*
 * Panarina Marketing: animated portfolio field ("Selected Work")
 * Used with scripts/portfolio-projects.js (data) and scripts/portfolio-field.js (behaviour).
 * All class names are prefixed "pf-" to avoid collisions with the existing page styles.
 * Colours follow the existing homepage variables (--neon-green, --dark-bg, --darker-blue, ...).
 */

/* ------------------------------------------------------------------ Section */
.pf-section {
    /* override the global `section { max-width:1200px; padding:100px 40px }` rule */
    max-width: none;
    margin: 0;
    padding: 110px 0 120px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 900px 420px at 50% 55%, rgba(15, 191, 106, 0.06), transparent 70%),
        linear-gradient(180deg, var(--dark-bg, #0a0a0a) 0%, var(--darker-blue, #04060b) 50%, var(--dark-bg, #0a0a0a) 100%);
}

.pf-header {
    max-width: 1320px;
    margin: 0 auto 48px;
    padding: 0 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.pf-header > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pf-eyebrow {
    font-size: 0.85rem;
    color: var(--neon-green, #CCFF00);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 14px;
    text-shadow: 0 0 10px rgba(204, 255, 0, 0.5);
}

.pf-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 14px;
}

.pf-intro {
    color: var(--text-gray, #a0a0a0);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 620px;
}

.pf-toggle {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid rgba(204, 255, 0, 0.45);
    border-radius: 30px;
    background: transparent;
    color: var(--neon-green, #CCFF00);
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

.pf-toggle:hover {
    background: var(--neon-green, #CCFF00);
    color: var(--dark-bg, #0a0a0a);
}

.pf-toggle:focus-visible {
    outline: 2px solid var(--neon-green, #CCFF00);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ Field (masked window) */
.pf-field {
    --pf-cols: 4;
    --pf-gap: 20px;
    --pf-radius: 14px;
    --pf-bar: 18px;
    position: relative;
    max-width: 1320px;
    height: clamp(640px, 86vh, 860px);
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(var(--pf-cols), minmax(0, 1fr));
    gap: var(--pf-gap);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.pf-column {
    position: relative;
    min-width: 0;
    transition: transform 0.35s ease;
}

/* The track holds the column's tile set twice; -50% equals exactly one set,
   because tiles use margin-bottom (not flex gap). */
.pf-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
    animation: pf-loop var(--pf-duration, 80s) linear var(--pf-delay, 0s) infinite;
    animation-play-state: paused;
}

.pf-column--down .pf-track {
    animation-direction: reverse;
}

.pf-section.is-running .pf-track {
    animation-play-state: running;
}

@keyframes pf-loop {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -50%, 0); }
}

/* ------------------------------------------------------------------ Tiles */
.pf-tile {
    display: block;
    width: 100%;
    margin: 0 0 var(--pf-gap);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--pf-radius);
    background: #101419;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.pf-tile:hover {
    border-color: rgba(204, 255, 0, 0.6);
    box-shadow: 0 0 0 1px rgba(204, 255, 0, 0.25), 0 0 28px rgba(204, 255, 0, 0.22);
}

.pf-tile:focus-visible {
    outline: 2px solid var(--neon-green, #CCFF00);
    outline-offset: 3px;
    border-color: rgba(204, 255, 0, 0.8);
}

/* minimal browser bar: communicates "website", contains no text */
.pf-tile__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--pf-bar);
    padding: 0 10px;
    background: #161b21;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pf-tile__bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

/* masked screen area; the long screenshot moves inside it */
.pf-tile__screen {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #14171b;
}

.pf-tile--a .pf-tile__screen { aspect-ratio: 10 / 11; }
.pf-tile--c .pf-tile__screen { aspect-ratio: 5 / 7; }

.pf-tile__shot {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    transform: translate3d(0, 0, 0);
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.pf-noscript {
    text-align: center;
    color: var(--text-gray, #a0a0a0);
    padding: 40px 20px;
}

/* ------------------------------------------------------------------ Showcase mode (visual only, no dialog) */
.pf-section[data-pf-mode="showcase"] {
    padding: 40px 0 30px;
}

/* showcase: no fade at the top/bottom; projects are fully visible up to a thin, clean frame */
.pf-section[data-pf-mode="showcase"] .pf-field {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.015);
}

@media (min-width: 1360px) {
    /* keep the frame inside the page gutter on wide screens */
    .pf-section[data-pf-mode="showcase"] .pf-field { max-width: 1280px; }
}

@media (max-width: 1359px) {
    .pf-section[data-pf-mode="showcase"] .pf-field { margin: 0 40px; }
}

.pf-section[data-pf-mode="showcase"] .pf-tile {
    cursor: default;
}

.pf-section[data-pf-mode="showcase"] .pf-tile:not(.is-linked):hover {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pf-section[data-pf-mode="showcase"] .pf-tile.is-linked {
    cursor: pointer;
}

/* slim row under the field: only a quiet pause control (WCAG 2.2.2 needs one for auto-moving content) */
.pf-footer {
    max-width: 1320px;
    margin: 14px auto 0;
    padding: 0 40px;
    display: flex;
    justify-content: flex-start;   /* left: the page's fixed "scroll to top" button sits bottom-right */
}

.pf-toggle--quiet {
    min-height: 32px;
    padding: 6px 14px;
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--text-dim, #8a9aa3);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.pf-toggle--quiet:hover {
    background: transparent;
    border-color: var(--neon-green, #CCFF00);
    color: var(--neon-green, #CCFF00);
}

/* project card highlighted after clicking its tile in the field */
.pf-card-highlight {
    animation: pf-card-flash 2.2s ease-out;
}

@keyframes pf-card-flash {
    0%, 25% { box-shadow: 0 0 0 2px var(--neon-green, #CCFF00), 0 0 40px rgba(204, 255, 0, 0.35); }
    100%    { box-shadow: 0 0 0 0 rgba(204, 255, 0, 0), 0 0 0 rgba(204, 255, 0, 0); }
}

/* ------------------------------------------------------------------ Static mode (reduced motion) */
.pf-section.is-static .pf-field {
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

.pf-section.is-static .pf-track {
    animation: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .pf-track { animation: none !important; }
    .pf-column { transition: none; }
}

/* ------------------------------------------------------------------ Details dialog / drawer */
html.pf-lock {
    overflow: hidden;
}

.pf-dialog {
    /* the page resets `* { margin:0; padding:0 }`, so restore centring explicitly */
    margin: auto;
    width: min(760px, calc(100vw - 32px));
    max-width: none;
    max-height: 88vh;
    padding: 0;
    border: 1px solid rgba(204, 255, 0, 0.25);
    border-radius: 18px;
    background: #0d1117;
    color: #fff;
    font-family: 'Space Mono', monospace;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(204, 255, 0, 0.08);
}

.pf-dialog::backdrop {
    background: rgba(4, 6, 11, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.pf-dialog[open] {
    animation: pf-dialog-in 0.22s ease-out;
}

@keyframes pf-dialog-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pf-dialog__panel {
    position: relative;
    max-height: 88vh;
    overflow-y: auto;
    padding: 44px 40px 40px;
    overscroll-behavior: contain;
}

.pf-dialog__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.pf-dialog__close:hover,
.pf-dialog__close:focus-visible {
    border-color: var(--neon-green, #CCFF00);
    color: var(--neon-green, #CCFF00);
    outline: none;
}

.pf-dialog__type {
    font-size: 0.75rem;
    color: var(--neon-green, #CCFF00);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 10px;
    padding-right: 48px;
}

.pf-dialog__title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 18px;
    padding-right: 48px;
}

.pf-dialog__summary {
    color: var(--text-gray, #a0a0a0);
    line-height: 1.7;
    margin-bottom: 26px;
}

.pf-dialog__label {
    font-size: 0.75rem;
    color: var(--text-dim, #8a9aa3);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
}

.pf-dialog__services {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.pf-dialog__services li {
    padding: 6px 14px;
    border: 1px solid rgba(204, 255, 0, 0.3);
    border-radius: 20px;
    font-size: 0.8rem;
    color: #e6e6e6;
}

.pf-dialog__summary.is-placeholder {
    color: var(--text-dim, #8a9aa3);
    font-style: italic;
}

.pf-dialog__services li.is-placeholder {
    color: var(--text-dim, #8a9aa3);
    font-style: italic;
    border-style: dashed;
}

.pf-dialog__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.pf-dialog__gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pf-dialog__visit {
    display: inline-block;
    padding: 14px 32px;
    border: 2px solid var(--neon-green, #CCFF00);
    border-radius: 30px;
    color: var(--neon-green, #CCFF00);
    text-decoration: none;
    transition: all 0.3s ease;
}

.pf-dialog__visit:hover,
.pf-dialog__visit:focus-visible {
    background: var(--neon-green, #CCFF00);
    color: var(--dark-bg, #0a0a0a);
    box-shadow: 0 0 30px rgba(204, 255, 0, 0.5);
    outline: none;
}

.pf-dialog__visit[hidden],
.pf-dialog__gallery[hidden] {
    display: none;
}

/* ------------------------------------------------------------------ Breakpoints */
@media (max-width: 1279px) {
    .pf-field {
        --pf-gap: 16px;
        height: clamp(600px, 82vh, 780px);
    }
}

@media (max-width: 1023px) {
    .pf-field {
        --pf-cols: 3;
        height: clamp(560px, 75vh, 720px);
        padding: 0 24px;
    }
    .pf-header { padding: 0 24px; }
}

@media (max-width: 767px) {
    .pf-section { padding: 70px 0 80px; }
    .pf-header {
        flex-direction: column;
        align-items: stretch;      /* let the text block take the full width so it wraps */
        padding: 0 16px;
        margin-bottom: 32px;
    }
    .pf-toggle { align-self: flex-start; }
    .pf-title { font-size: 1.7rem; }
    .pf-field {
        --pf-cols: 2;
        --pf-gap: 12px;
        --pf-radius: 10px;
        --pf-bar: 14px;
        height: clamp(480px, 74vh, 620px);
        padding: 0 16px;
    }
    .pf-tile__bar { gap: 4px; padding: 0 8px; }
    .pf-tile__bar i { width: 4px; height: 4px; }

    /* details view becomes a bottom drawer */
    .pf-dialog {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
        border-bottom: none;
    }
    .pf-dialog__panel {
        max-height: 90vh;
        padding: 40px 20px 32px;
    }
    .pf-dialog[open] { animation: pf-drawer-in 0.25s ease-out; }
    .pf-dialog__title { font-size: 1.4rem; }
}

@keyframes pf-drawer-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-dialog[open] { animation: none; }
    .pf-card-highlight { animation: none; outline: 2px solid var(--neon-green, #CCFF00); }
}

@media (max-width: 1023px) {
    .pf-footer { padding: 0 24px; }
}

@media (max-width: 1023px) {
    .pf-section[data-pf-mode="showcase"] .pf-field { margin: 0 24px; }
}

@media (max-width: 767px) {
    .pf-section[data-pf-mode="showcase"] { padding: 24px 0 20px; }
    .pf-section[data-pf-mode="showcase"] .pf-field { margin: 0 12px; padding: 0 8px; }
    .pf-footer { padding: 0 16px; }
}