/* ==========================================================================
   Portfolio Explorer — Win95 Project Browser
   Styles for portfolio grid, path bar, filters, pixel-load effect,
   scroll-reveal, and project detail view.
   All values reference tokens.css via var().
   ========================================================================== */


/* ==========================================================================
   1. Toolbar: Path Bar + Filter Buttons
   ========================================================================== */

.portfolio-toolbar {
  height: auto;
  background: var(--win95-window-bg);
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.portfolio-pathbar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
}

.portfolio-pathbar {
  flex: 1;
  height: 20px;
  font-family: var(--font-pixel-readable);
  font-size: var(--font-size-sm);
  background: #fff;
  border: none;
  box-shadow: var(--win95-inset);
  padding: 2px 4px;
  color: var(--win95-button-text);
  outline: none;
}

.portfolio-filters {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding: 2px 0;
}

.portfolio-filter-btn {
  background: var(--win95-button-face);
  box-shadow: var(--win95-outset-thin);
  border: none;
  font-family: var(--font-pixel);
  font-size: var(--font-size-xs);
  color: var(--win95-button-text);
  padding: 3px 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.portfolio-filter-btn:hover {
  background: #d4d4d4;
}

.portfolio-filter-btn.active {
  box-shadow: var(--win95-inset);
  background: #b0b0b0;
}


/* ==========================================================================
   2. Portfolio Grid
   ========================================================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.portfolio-item {
  box-shadow: var(--win95-inset);
  cursor: pointer;
  background: var(--win95-window-bg);
  transition: outline 0.15s;
}

.portfolio-item:hover {
  outline: 2px solid var(--win95-accent-cyan);
}

.portfolio-item-img-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio-item-label {
  font-family: var(--font-pixel-readable);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 4px;
  color: var(--win95-button-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==========================================================================
   3. Pixel-Load Progressive Effect
   ========================================================================== */

.pixel-loading {
  image-rendering: pixelated;
  filter: blur(8px);
  transition: filter 1.2s ease-out, image-rendering 0.1s step-end;
}

.pixel-loaded {
  image-rendering: auto;
  filter: blur(0);
}


/* ==========================================================================
   4. Scroll Reveal
   ========================================================================== */

.scroll-reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
}

.scroll-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-fading {
  opacity: 0;
  transform: translateY(-10px);
}


/* ==========================================================================
   5. Project Detail View
   ========================================================================== */

.project-detail {
  padding: 16px;
  overflow-y: auto;
  font-family: var(--font-content);
}

.project-back-btn {
  background: var(--win95-button-face);
  box-shadow: var(--win95-outset);
  border: none;
  font-family: var(--font-content);
  font-size: var(--font-size-base);
  color: var(--win95-button-text);
  padding: 4px 16px;
  cursor: pointer;
  margin-bottom: 12px;
}

.project-back-btn:active {
  box-shadow: var(--win95-inset);
}

.project-hero-wrapper {
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
}

.project-hero-wrapper img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
}

.project-title {
  font-family: var(--font-content);
  font-weight: 700;
  font-size: var(--font-size-xl);
  margin: 0 0 8px;
  color: var(--win95-button-text);
}

.project-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}

.project-meta span {
  box-shadow: var(--win95-inset);
  padding: 2px 8px;
  font-family: var(--font-pixel-readable);
  font-size: var(--font-size-sm);
  color: var(--win95-button-text);
  background: var(--win95-window-bg);
}

.project-description {
  margin-bottom: 16px;
  color: #333;
  font-family: var(--font-content);
  font-size: var(--font-size-md);
  line-height: 1.6;
  max-width: 700px;
}

.project-gallery {
  margin-bottom: 16px;
}

.project-gallery-title,
.project-tour-title {
  font-family: var(--font-pixel-readable);
  font-size: var(--font-size-md);
  margin-bottom: 8px;
  color: var(--win95-button-text);
}

.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.project-gallery-grid img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  box-shadow: var(--win95-outset-thin);
  transition: outline 0.15s;
  display: block;
}

.project-gallery-grid img:hover {
  outline: 2px solid var(--win95-accent-cyan);
}

.project-tour {
  margin-bottom: 16px;
}

.project-tour-frame {
  box-shadow: var(--win95-inset);
  padding: 2px;
  background: var(--win95-window-bg);
}

.project-tour-frame iframe {
  border: none;
  width: 100%;
  min-height: 350px;
  display: block;
}


/* ==========================================================================
   6. Project Detail Tabs
   ========================================================================== */

.project-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 0;
  border-bottom: 2px solid var(--win95-button-shadow);
}

.project-tab {
  background: var(--win95-button-face);
  box-shadow: inset 1px 1px 0 var(--win95-button-highlight), inset -1px 0 0 var(--win95-button-shadow);
  border: none;
  font-family: var(--font-pixel-readable);
  font-size: var(--font-size-sm);
  color: var(--win95-button-text);
  padding: 4px 14px;
  cursor: pointer;
  user-select: none;
  position: relative;
  bottom: -2px;
  border-bottom: 2px solid var(--win95-button-shadow);
}

.project-tab:hover {
  background: #d4d4d4;
}

.project-tab.active {
  background: var(--win95-window-bg);
  border-bottom: 2px solid var(--win95-window-bg);
  font-weight: bold;
}

.project-tab-content {
  display: none;
  margin-top: 12px;
}

.project-tab-content.active {
  display: block;
}


/* ==========================================================================
   7. Windows Media Player — Video Embed
   ========================================================================== */

.wmp-container {
  background: #2b2b2b;
  border: 2px solid #808080;
  box-shadow:
    inset 1px 1px 0 #404040,
    inset -1px -1px 0 #1a1a1a,
    2px 2px 0 #000;
  margin-bottom: 16px;
  font-family: var(--font-pixel-readable);
}

.wmp-titlebar {
  background: linear-gradient(90deg, #00007B, #0058a8, #00007B);
  color: #fff;
  padding: 2px 4px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wmp-titlebar-icon {
  font-size: 10px;
}

.wmp-titlebar-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wmp-menubar {
  background: #c0c0c0;
  padding: 1px 4px;
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #000;
  border-bottom: 1px solid #808080;
}

.wmp-menubar span {
  cursor: default;
}

.wmp-video-area {
  background: #000;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

.wmp-video-area iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.wmp-controls {
  background: #3a3a3a;
  padding: 4px 6px;
  border-top: 1px solid #555;
}

.wmp-progress-bar {
  height: 8px;
  background: #1a1a1a;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #555;
  margin-bottom: 4px;
  position: relative;
}

.wmp-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00a2ff, #00d4ff);
}

.wmp-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.wmp-btn {
  background: #4a4a4a;
  color: #ccc;
  border: 1px solid #666;
  box-shadow: inset 1px 1px 0 #5a5a5a, inset -1px -1px 0 #333;
  font-family: var(--font-pixel-readable);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  min-width: 24px;
  text-align: center;
}

.wmp-btn:hover {
  background: #5a5a5a;
}

.wmp-btn:active {
  box-shadow: inset -1px -1px 0 #5a5a5a, inset 1px 1px 0 #333;
}

.wmp-play-btn {
  padding: 2px 10px;
  color: #0ff;
}

.wmp-spacer {
  flex: 1;
}

.wmp-volume {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wmp-volume-icon {
  color: #aaa;
  font-size: 12px;
}

.wmp-volume-bar {
  width: 50px;
  height: 6px;
  background: #1a1a1a;
  box-shadow: inset 1px 1px 0 #000;
  position: relative;
}

.wmp-volume-fill {
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, #00a2ff, #00d4ff);
}

.wmp-time {
  color: #0ff;
  font-size: 10px;
  margin-left: 8px;
  font-family: var(--font-pixel-readable);
}

.wmp-statusbar {
  background: #c0c0c0;
  padding: 1px 4px;
  font-size: 10px;
  color: #333;
  border-top: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #fff;
}


/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    padding: 8px;
  }

  .project-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

  .project-detail {
    padding: 8px;
  }
}