/* ============================================================
   MAC OS SYSTEM 1 — Authentic 1984 Macintosh Interface
   Pure black & white · 2x scale for readability
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');

:root {
  --mc-black : #000000;
  --mc-white : #ffffff;
  --mc-font  : 'Silkscreen', 'Courier New', monospace;
}

/* ── OVERLAY ──────────────────────────────────────────── */
.mac-os {
  position   : fixed;
  inset      : 0;
  z-index    : 9100;
  opacity    : 0;
  pointer-events: none;
  transition : opacity .5s ease;
  background : #000;
  font-family: var(--mc-font);
  font-size  : 17px;
  color      : var(--mc-black);
  image-rendering: pixelated;
}
.mac-os.visible { opacity:1; pointer-events:auto; }

/* hide main nav & progress while Mac is up */
body.mac-active .menu           { opacity:0 !important; pointer-events:none !important; transition:opacity .3s; }
body.mac-active .scroll-progress{ opacity:0 !important; }

/* CRT scanlines */
.mac-os::after {
  content : '';
  position: fixed; inset:0;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,.07) 0px, rgba(0,0,0,.07) 1px,
    transparent 1px, transparent 4px);
  pointer-events:none;
  z-index:9999;
}

/* ── BOOT SCREEN ──────────────────────────────────────── */
.mac-boot {
  position: absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:26px; background:#fff; z-index:20;
  transition:opacity .4s ease;
}
.mac-boot.gone { opacity:0; pointer-events:none; }
.mac-happy-mac { width:104px; height:104px; image-rendering:pixelated; }
.mac-happy-mac svg { width:100%; height:100%; }
.mac-boot-bar {
  width:300px; height:22px; border:2px solid #000;
  background:#fff; position:relative;
}
.mac-boot-fill {
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:#000; transition:width .1s linear;
}
.mac-boot-label { font-size:14px; color:#000; letter-spacing:.1em; }

/* ── DESKTOP ──────────────────────────────────────────── */
.mac-desktop {
  position:absolute; inset:0; opacity:0;
  transition:opacity .35s ease;
  background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0 / 3px 3px;
}
.mac-desktop.visible { opacity:1; }

/* ── MENU BAR ─────────────────────────────────────────── */
.mac-menubar {
  position:absolute; top:0; left:0; right:0;
  height:34px; background:#fff;  /* keep in sync with .mac-workspace top */
  border-bottom:2px solid #000;
  display:flex; align-items:center;
  user-select:none; z-index:500;
}
.mac-menu-apple {
  width:42px; height:100%;
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid rgba(0,0,0,.08);
  cursor:default;
}
.mac-menu-apple svg { width:18px; height:22px; }
.mac-menu-item {
  padding:0 16px; height:100%;
  display:flex; align-items:center;
  font-size:16px; color:#000; cursor:default; white-space:nowrap;
}
.mac-menu-item:hover, .mac-menu-item.active { background:#000; color:#fff; }
.mac-menu-right {
  margin-left:auto; display:flex; align-items:center;
  gap:18px; padding-right:16px;
}
.mac-menu-clock { font-size:15px; color:#000; }
/* always-clickable exit in the menu bar (can't be covered by windows) */
.mac-menu-exit { border:1.5px solid #000; padding:0 12px !important; margin:3px 0; height:auto !important;
  line-height:1.6; font-weight:700; cursor:pointer; }
.mac-menu-exit:hover { background:#000; color:#fff; }

/* ── WORKSPACE ────────────────────────────────────────── */
.mac-workspace {
  position:absolute; top:34px; left:0; right:0; bottom:0;  /* = menubar height */
  overflow:hidden;
}

/* ── DESKTOP ICONS ────────────────────────────────────── */
.mac-icon {
  position:absolute;
  display:flex; flex-direction:column;
  align-items:center; gap:5px;
  cursor:pointer; padding:6px; user-select:none;
  width:100px;
}
.mac-icon-img { width:66px; height:66px; image-rendering:pixelated; }
.mac-icon-img svg { width:100%; height:100%; }
.mac-icon-label {
  font-size:12px; text-align:center; max-width:96px;
  line-height:1.4; padding:2px 4px; overflow-wrap:break-word;
  color:#000;
  text-shadow:1px 0 #fff,-1px 0 #fff,0 1px #fff,0 -1px #fff,1px 1px #fff,-1px -1px #fff,1px -1px #fff,-1px 1px #fff;
}
.mac-icon.selected .mac-icon-label { background:#000; color:#fff; text-shadow:none; }
.mac-icon.deco { cursor:default; opacity:.92; }

/* positions */
#macFloppyIcon { right:24px; top:16px; opacity:0; transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease; }
#macFloppyIcon.appeared { opacity:1; transform:translateY(0); }
/* стъпка 124px — икона (66) + двуредов label се събират без застъпване */
#macSysIcon   { right:24px; top:140px; }
#macPaintIcon { right:24px; top:264px; }
#macCalcIcon  { right:24px; top:388px; }
#macTrashIcon { right:24px; bottom:24px; }

/* ── FLOPPY GUIDE: "double-click to open" balloon + pixel arrow ── */
.mac-guide {
  position:absolute; right:140px; top:34px; z-index:5;   /* под прозорците (z≥10) */
  display:flex; align-items:center; gap:9px;
  cursor:pointer; user-select:none;
  opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
.mac-guide.on {
  opacity:1; pointer-events:auto;
  animation:mac-guide-nudge 1.8s ease-in-out infinite;   /* "сочи" към дискетата */
}
@keyframes mac-guide-nudge { 0%,100%{transform:translateX(0);} 50%{transform:translateX(7px);} }
.mac-guide-bubble {
  background:#fff; border:2px solid #000; box-shadow:2px 2px 0 #000;
  font-size:11px; letter-spacing:.06em; line-height:1.55;
  padding:7px 11px; max-width:200px; text-align:center; color:#000;
}
.mac-guide:hover .mac-guide-bubble { background:#000; color:#fff; }
.mac-guide-arrow { width:34px; height:24px; flex:none; image-rendering:pixelated; }
@media (prefers-reduced-motion: reduce) { .mac-guide.on { animation:none; } }

/* ── WINDOWS ──────────────────────────────────────────── */
.mac-window {
  position:absolute; background:#fff;
  border:2px solid #000; box-shadow:3px 3px 0 #000;
  display:flex; flex-direction:column;
  min-width:280px;
  animation:mac-wopen .15s ease-out both;
}
@keyframes mac-wopen { from{transform:scale(.97);opacity:0;} to{transform:scale(1);opacity:1;} }

.mac-titlebar {
  height:30px; display:flex; align-items:center;
  gap:8px; padding:0 8px; cursor:move; user-select:none; flex-shrink:0;
  background: repeating-linear-gradient(0deg,#000 0 1px,#fff 1px 3px);
  border-bottom:2px solid #000;
}
.mac-closebox {
  width:17px; height:17px; border:2px solid #000;
  background:#fff; flex-shrink:0; cursor:pointer;
}
.mac-closebox:hover { background:#000; }
.mac-wintitle {
  flex:1; text-align:center; font-size:16px; font-weight:700;
  background:#fff; padding:0 12px; line-height:22px; color:#000;
  pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mac-zoombox {
  width:17px; height:17px; border:2px solid #000; background:#fff;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.mac-zoombox::before {
  content:''; width:9px; height:9px; border:1px solid #000;
  border-top-width:3px; border-left-width:3px;
}

.mac-wininfo {
  height:26px; border-bottom:2px solid #000;
  display:flex; align-items:center; padding:0 12px; gap:18px;
  font-size:13px; color:#000; background:#fff; flex-shrink:0; white-space:nowrap;
}
.mac-wininfo-sep {
  flex:1; height:2px;
  background:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 4px); opacity:.3;
}

.mac-winbody { flex:1; background:#fff; position:relative; overflow:hidden; }
.mac-wincontent { width:100%; height:100%; }

/* fit windows: no scroll, height by content */
.mac-window.fit .mac-winbody { flex:none; }
.mac-window.fit .mac-wincontent { overflow:visible; }
/* scroll windows: case study */
.mac-window.scroll .mac-wincontent { overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#000 #fff; }
.mac-window.scroll .mac-wincontent::-webkit-scrollbar { width:14px; }
.mac-window.scroll .mac-wincontent::-webkit-scrollbar-track { background:#fff; border-left:2px solid #000; }
.mac-window.scroll .mac-wincontent::-webkit-scrollbar-thumb { background:#fff; border:2px solid #000; }

/* ── DISK WINDOW: flat project grid ──────────────────── */
.mac-disk-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; padding:22px 12px;
}
@media (max-width:760px){ .mac-disk-grid{ grid-template-columns:repeat(2,1fr); } }
.mac-cat-item {
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:16px 12px 14px; cursor:pointer; user-select:none;
  border-right:1px solid rgba(0,0,0,.08);
}
.mac-cat-item:nth-child(4n), .mac-cat-item:last-child { border-right:none; }
.mac-cat-item:hover .mac-cat-label { background:#000; color:#fff; }
.mac-cat-icon { width:64px; height:64px; }
.mac-cat-icon svg { width:100%; height:100%; }
.mac-cat-label { font-size:14px; text-align:center; color:#000; padding:1px 6px; line-height:1.3; }
.mac-cat-count { font-size:11px; color:#777; text-align:center; line-height:1.4; }
.mac-cat-star {
  font-size:10px; letter-spacing:.1em; padding:2px 8px;
  background:#000; color:#fff; margin-top:2px;
}

.mac-disk-hint {
  border-top:2px solid #000; padding:10px 14px;
  font-size:12px; color:#555; text-align:center; letter-spacing:.07em; background:#fff;
}

/* ── FULL-PAGE CASE STUDY WINDOW ─────────────────────── */
.mac-window.fullpage { box-shadow:5px 5px 0 #000; }

/* readable body typography = the site's own fonts:
   Manrope for text (has Cyrillic), Marcellus SC for display titles,
   Silkscreen (--mc-font) only for small pixel labels/chips */
.mcs { font-family:'Manrope',sans-serif; color:#000; background:#fff; }

/* sticky top bar: back + counter */
.mcs-topbar {
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 18px; background:#fff; border-bottom:2px solid #000;
  font-family:var(--mc-font);
}
.mcs-back {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; cursor:pointer; border:2px solid #000;
  padding:6px 14px; background:#fff; user-select:none; letter-spacing:.05em;
}
.mcs-back:hover { background:#000; color:#fff; }
.mcs-back::before { content:'◀'; font-size:9px; }
.mcs-count { font-size:11px; color:#666; letter-spacing:.12em; }

/* hero */
.mcs-hero { margin:0; border-bottom:2px solid #000; background:#eee; }
/* hero/корица: цялата снимка се вижда в екрана, без изрязване, чисто качество */
.mcs-hero { background:#f4ece2; }
.mcs-hero img { display:block; width:auto; max-width:100%; max-height:82vh; margin:0 auto; image-rendering:auto; }

/* head: chip · title · tagline */
.mcs-head { text-align:center; padding:44px 24px 6px; }
.mcs-chip {
  display:inline-block; font-family:var(--mc-font); font-size:11px;
  letter-spacing:.14em; border:2px solid #000; padding:4px 12px; margin-bottom:20px;
}
.mcs-title {
  font-family:'Marcellus SC','Manrope',serif; font-weight:400;
  font-size:clamp(34px,5vw,54px); line-height:1.05; margin:0 0 14px;
}
.mcs-tagline {
  font-size:18px; line-height:1.55; color:#333; font-style:italic;
  max-width:56ch; margin:0 auto;
}

/* overview bar: CLIENT / YEAR / ROLE / TOOLS */
.mcs-meta {
  display:grid; grid-template-columns:repeat(4,1fr);
  border:2px solid #000; margin:34px auto 0; max-width:840px; width:calc(100% - 56px);
}
.mcs-meta-cell { padding:13px 16px; border-right:2px solid #000; min-width:0; }
.mcs-meta-cell:last-child { border-right:none; }
.mcs-meta-k { font-family:var(--mc-font); font-size:10px; letter-spacing:.14em; color:#777; margin-bottom:5px; }
.mcs-meta-v { font-size:14px; font-weight:600; line-height:1.45; overflow-wrap:break-word; }

.mcs-tags {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  max-width:840px; margin:16px auto 0; padding:0 28px;
}
.mcs-tag { font-family:var(--mc-font); font-size:11px; border:1.5px solid #000; padding:3px 10px; letter-spacing:.06em; }

/* summary standfirst */
.mcs-summary {
  font-size:17px; line-height:1.85; color:#111; text-align:center;
  max-width:62ch; margin:32px auto 8px; padding:0 28px;
}

/* sections */
.mcs-body { padding-top:8px; }
.mcs-text { max-width:660px; margin:46px auto 26px; padding:0 28px; }
.mcs-text h2 {
  font-family:'Marcellus SC','Manrope',serif; font-weight:400;
  font-size:27px; line-height:1.2; margin:0 0 12px;
}
.mcs-text h2::after { content:''; display:block; width:44px; height:3px; background:#000; margin-top:12px; }
.mcs-text p { font-size:16px; line-height:1.85; color:#111; margin:14px 0 0; }

.mcs-fig { margin:26px auto; max-width:1000px; padding:0 28px; }
.mcs-fig img, .mcs-grid img {
  display:block; width:100%; border:2px solid #000;
  background:#eee; cursor:zoom-in; image-rendering:auto;
}
/* самостоятелна (не-грид) снимка: цялата се вижда в екрана — портретните
   постери/корици не се режат и не изискват скролване под лентата отгоре */
.mcs-body > .mcs-fig img {
  width:auto; max-width:100%; max-height:88vh; margin:0 auto;
}
/* всички снимки в проекта — чисто, високо качество (без пиксел/стар-екран ефект) */
.mcs img, .mac-lightbox img { image-rendering:auto; -ms-interpolation-mode:bicubic; }
.mcs-cap {
  font-family:var(--mc-font); font-size:11px; color:#666;
  letter-spacing:.08em; margin-top:9px; text-align:center;
}
.mcs-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  max-width:1000px; margin:26px auto; padding:0 28px;
}
.mcs-grid .mcs-fig { margin:0; padding:0; max-width:none; }
/* uniform грид (ratio зададен от секцията): еднакви, симетрични клетки */
.mcs-grid.mcs-uniform .mcs-fig img,
.mcs-grid.mcs-uniform .mcs-fig video {
  aspect-ratio:var(--mcs-ratio, 3/4); object-fit:cover; width:100%; height:auto;
}
.mcs-grid-cap { margin:-12px auto 26px; }

.mcs-glabel {
  font-family:var(--mc-font); font-size:12px; letter-spacing:.18em;
  color:#888; text-align:center; margin:50px 0 4px;
}

.mcs-empty {
  font-family:var(--mc-font); font-size:12px; color:#aaa; text-align:center;
  padding:26px; border:2px dashed #ccc; margin:24px 28px; line-height:2;
}

/* prev / next footer */
.mcs-nav { display:grid; grid-template-columns:1fr 1fr; border-top:2px solid #000; margin-top:54px; }
.mcs-nav-card { padding:26px 28px 30px; cursor:pointer; user-select:none; border-right:2px solid #000; }
.mcs-nav-card.next { border-right:none; text-align:right; }
.mcs-nav-card:hover { background:#000; color:#fff; }
.mcs-nav-k { font-family:var(--mc-font); font-size:10px; letter-spacing:.16em; color:#777; margin-bottom:9px; }
.mcs-nav-card:hover .mcs-nav-k { color:#bbb; }
.mcs-nav-t { font-family:'Marcellus SC','Manrope',serif; font-size:22px; line-height:1.2; }

/* responsive */
@media (max-width:720px){
  .mcs-meta { grid-template-columns:1fr 1fr; }
  .mcs-meta-cell:nth-child(2) { border-right:none; }
  .mcs-meta-cell:nth-child(-n+2) { border-bottom:2px solid #000; }
  .mcs-grid { grid-template-columns:1fr; }
  .mcs-nav { grid-template-columns:1fr; }
  .mcs-nav-card { border-right:none; border-bottom:2px solid #000; }
  .mcs-nav-card.next { border-bottom:none; }
}

/* ── SOLEIL: 3D кръгов карусел (section type 'carousel') ── */
.mcs-carousel {
  position:relative; max-width:1000px; margin:30px auto 10px; padding:0 28px;
  height:clamp(320px,42vw,480px); perspective:1200px;
}
.mcs-car-stage { position:absolute; inset:0; transform-style:preserve-3d; }
.mcs-car-item {
  position:absolute; left:50%; top:50%;
  width:clamp(150px,20vw,230px);
  transition:transform .55s cubic-bezier(.22,.7,.2,1), opacity .55s ease;
  cursor:pointer;
}
.mcs-car-item img { display:block; width:100%; border:2px solid #000; background:#eee; image-rendering:auto; }
.mcs-car-item.front img { box-shadow:5px 5px 0 #000; }
.mcs-car-arrow {
  position:absolute; top:50%; margin-top:-20px; z-index:300;
  width:40px; height:40px; border:2px solid #000; background:#fff;
  font-family:var(--mc-font); font-size:13px; cursor:pointer; color:#000;
}
.mcs-car-arrow.prev { left:26px; }
.mcs-car-arrow.next { right:26px; }
.mcs-car-arrow:hover { background:#000; color:#fff; }

/* ── SOLEIL: UGC видео грид (section type 'videos') ── */
.mcs-vgrid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  max-width:820px; margin:26px auto; padding:0 28px;
}
.mcs-vid { margin:0; }
.mcs-vid video, .mcs-fig video {
  display:block; width:100%; border:2px solid #000; background:#000;
  cursor:pointer; image-rendering:auto;
}

/* дисклеймър (section type 'note') */
.mcs-note {
  font-family:var(--mc-font); font-size:11px; color:#888; letter-spacing:.06em;
  line-height:1.9; text-align:center; max-width:660px; margin:6px auto 34px; padding:0 28px;
}

/* курсор-подсказка „Отвори ме" */
#mcsCursor {
  position:fixed; z-index:10002; display:none; pointer-events:none;
  background:#000; color:#fff; border:1px solid #fff;
  font-family:var(--mc-font); font-size:10px; letter-spacing:.12em;
  padding:4px 9px; white-space:nowrap;
}

@media (max-width:720px){
  .mcs-vgrid { grid-template-columns:1fr; }
  .mcs-carousel { height:60vw; min-height:300px; }
  .mcs-car-item { width:44vw; }
}

/* ── LIGHTBOX (над scanlines — уголемената снимка е 100% чиста) ───────── */
.mac-lightbox {
  position:fixed; inset:0; z-index:10001;
  background:rgba(0,0,0,.93);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:36px; cursor:zoom-out;
}
.mac-lightbox.open { display:flex; }
.mac-lightbox img { max-width:100%; max-height:82vh; border:2px solid #fff; }
.mac-lightbox video { max-width:100%; max-height:82vh; border:2px solid #fff; background:#000; }
.mac-lightbox-cap { font-family:var(--mc-font); font-size:12px; color:#fff; letter-spacing:.08em; text-align:center; }
.mac-lightbox-close {
  position:absolute; top:16px; right:20px; width:36px; height:36px;
  border:2px solid #fff; background:#000; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mc-font); font-size:14px; cursor:pointer;
}
.mac-lightbox-close:hover { background:#fff; color:#000; }