/* ===================================================================
   MacOS Template — recreation
   =================================================================== */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --dock-icon: 54px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

/* ---------- Wallpaper (silk) ---------- */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000 url("assets/bg-waves.jpg?v=20260809t") center center / cover no-repeat;
}

/* ---------- Rotating metallic hello object ---------- */
.hello-object {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  width: 440px; height: 440px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 1.2s ease 0.2s;
  pointer-events: none;
}
.hello-object.show { opacity: 1; }
.model3d {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.model3d canvas { display: block; width: 100% !important; height: 100% !important; }
.hello-object img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* feather the square edges into the wallpaper so there is no visible seam */
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 78%, transparent 100%);
}

/* ---------- Desktop icons ---------- */
.desktop {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.icon {
  position: absolute;
  width: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 6px;
  border-radius: 12px;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .15s var(--ease), background .15s ease;
  opacity: 0;
  transform: translateY(8px) scale(.9);
}
.icon.revealed { opacity: 1; transform: translate(-50%, -50%); transition: opacity .5s ease, transform .5s var(--ease); }
.icon.dragging { transition: none; cursor: grabbing; }
/* highlight container — hugs the art and follows its shape (square or rectangle) */
.icon-thumb {
  display: inline-grid; place-items: center;
  padding: 6px;
  border-radius: 18px;
  transition: background .12s ease;
}
.icon:hover .icon-thumb,
.icon.selected .icon-thumb { background: rgba(140,140,150,.30); }
/* drop the art's own shadow while highlighted so only one frame shows */
.icon:hover .icon-art,
.icon.selected .icon-art { box-shadow: none; }

.icon-art {
  width: 74px; height: 74px;
  border-radius: 13px;
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.icon-art img { width: 100%; height: 100%; object-fit: cover; }
.icon-art.contain img { object-fit: contain; }
.icon-art.folder { box-shadow: none; border-radius: 11px; background: none; }
.icon-art.folder img { object-fit: contain; }
/* photo-thumbnail style (rounded rectangle, wider) */
.icon-art.photo { width: 92px; height: 62px; border-radius: 11px; }

.icon-label {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  padding: 2px 9px;
  border-radius: 8px;
  max-width: 120px;
  transition: background .12s ease;
}
.icon:hover .icon-label,
.icon.selected .icon-label { background: #0a6cf0; text-shadow: none; }

/* ---------- Dock ---------- */
.dock {
  --dpad: 10px; /* horizontal padding (grows a touch on hover to widen the bar) */
  --dy: 34px;   /* intro slide-in offset */
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 8px var(--dpad);
  border-radius: 24px;
  background: rgba(38,38,42,.5);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  opacity: 0;
  transform: translateX(-50%) translateY(var(--dy));
  transform-origin: bottom center;
  transition: opacity .6s ease, transform .2s var(--ease), padding .2s var(--ease);
}
/* smooth reset when leaving; instant follow while hovering */
.dock:not(.hovering) .dock-item img { transition: transform .2s var(--ease); }
.dock.show { opacity: 1; --dy: 0px; }
.dock.hovering { --dpad: 13px; }

.dock-item {
  position: relative;
  width: var(--dock-icon); height: var(--dock-icon);
  border: none; background: none; padding: 0;
  cursor: pointer;
}
.dock-item img {
  width: 100%; height: 100%; object-fit: contain; pointer-events: none;
  transform-origin: bottom center;
  filter: none;
}
/* Downloads folder has a wider (1170x1024) canvas — widen its tile so the
   icon fits by HEIGHT and lines up with the others; wider is fine. */
.dock-item.downloads { width: calc(var(--dock-icon) * 1170 / 1024); }

.dock-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  padding: 7px 17px;
  font-size: 15px; font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
  background: rgba(28,28,30,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px) scale(.92);
  transition: opacity .16s ease, transform .16s var(--ease);
}
.dock-item:hover .dock-tip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ---------- Windows ---------- */
.windows-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

.window {
  position: absolute;
  pointer-events: auto;
  width: min(760px, 88vw);
  height: min(560px, 78vh);
  background: #fff;
  color: #111;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06);
  transform-origin: center center;
  animation: winOpen .42s var(--ease);
  contain: layout style;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
@keyframes winOpen {
  from { opacity: 0; transform: scale(.86) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.window.closing { animation: winClose .28s ease forwards; }
@keyframes winClose {
  to { opacity: 0; transform: scale(.9) translateY(10px); }
}
.window.minimizing { animation: winMin .4s var(--ease) forwards; }
@keyframes winMin {
  to { opacity: 0; transform: translateY(60vh) scale(.2); }
}

.win-bar {
  height: 46px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: #fbfbfb;
  border-bottom: 1px solid rgba(0,0,0,.07);
  cursor: grab;
}
.win-bar:active { cursor: grabbing; }
.traffic { display: flex; gap: 8px; align-items: center; }
.dot {
  width: 12px; height: 12px; border-radius: 50%; position: relative;
  border: none; padding: 0; cursor: pointer;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12);
}
.dot.red    { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green  { background: #28c840; }
/* Symbol layer — hidden until the traffic cluster is hovered */
.dot::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat; background-position: center;
  opacity: 0; transition: opacity .12s;
}
.traffic:hover .dot::after { opacity: 1; }
/* Symbols placed at their exact native px size (12px-target assets, no scaling). */
/* ✕ close (Asset 6, 5.38px) */
.dot.red::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.38 5.38'%3E%3Cpath fill='%23231f20' d='M5.27,4.74c.15.15.15.38,0,.53-.07.07-.17.11-.26.11-.1,0-.2-.04-.27-.11l-2.05-2.05L.64,5.26c-.07.07-.17.11-.26.11-.1,0-.19-.04-.27-.11-.14-.15-.14-.38,0-.53l2.05-2.05L.11.63C-.04.5-.04.26.11.11.26-.04.5-.04.64.11l2.05,2.05L4.74.11c.15-.14.38-.14.53,0,.15.15.15.39,0,.53l-2.05,2.05,2.05,2.05Z'/%3E%3C/svg%3E");
  background-size: 5.38px 5.38px;
}
/* − minimize — PLACEHOLDER: Asset 5 arrived empty, awaiting real file */
.dot.yellow::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.38 5.38'%3E%3Crect x='.35' y='2.34' width='4.68' height='.7' rx='.35' fill='%23231f20'/%3E%3C/svg%3E");
  background-size: 5.38px 5.38px;
}
/* two triangles → fullscreen / maximize (Asset 4, 4.07px) */
.dot.green::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.07 4.07'%3E%3Cg fill='%23231f20'%3E%3Cpath d='M1.12,4.07h2.74c.11,0,.2-.09.2-.2V1.12c0-.18-.22-.27-.35-.14L.98,3.72c-.13.13-.04.35.14.35Z'/%3E%3Cpath d='M2.94,0H.2c-.11,0-.2.09-.2.2v2.74c0,.18.22.27.35.14L3.09.35c.13-.13.04-.35-.14-.35Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 4.07px 4.07px;
}
.win-title {
  flex: 1; text-align: center;
  font-size: 13px; font-weight: 500; color: #555;
  margin-left: -54px;
  pointer-events: none;
}

.win-body { flex: 1; overflow-y: auto; padding: 40px 44px 60px; }
.win-body::-webkit-scrollbar { width: 10px; }
.win-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 8px; border: 3px solid #fff; }

.win-h1 { font-size: 44px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 18px; color: #0a0a0a; }
.win-desc { font-size: 17px; line-height: 1.6; color: #555; max-width: 620px; margin-bottom: 34px; }
.win-meta { display: flex; gap: 90px; margin-bottom: 34px; }
.win-meta h4 { font-size: 15px; font-weight: 700; color: #0a0a0a; margin-bottom: 6px; }
.win-meta p  { font-size: 15px; color: #666; }
.win-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.win-gallery img {
  width: 100%; border-radius: 12px; display: block;
  background: #eee; object-fit: cover;
  border: 1px solid rgba(0,0,0,.08);
}
/* full-width image spans both columns */
.win-gallery img.full { grid-column: 1 / -1; }
/* two-up images are forced square (1:1) so rows line up everywhere */
.win-gallery img:not(.full) { aspect-ratio: 1 / 1; }

/* ---------- Intro ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: grid;
  place-items: center;
  transition: opacity 1s ease;
}
.intro.hide { opacity: 0; pointer-events: none; }
.intro-hello { display: none; }
.intro-hello-text {
  font-family: "Dancing Script", cursive;
  font-size: clamp(70px, 12vw, 150px);
  font-weight: 700;
  color: #fff;
  /* handwriting reveal */
  background: linear-gradient(90deg, #fff 50%, transparent 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: writeIn 1.6s ease forwards .2s;
}
@keyframes writeIn {
  to { background-position: 0 0; }
}

/* ---------- Bare windows (custom content, no default padding) ---------- */
.window.bare .win-body { padding: 0; }

/* ---------- Finder (Animácia) ---------- */
.finder { display: flex; flex-direction: column; height: 100%; background: #fff; }
.finder-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px; background: #fafafa;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.fbtn {
  width: 28px; height: 26px; border-radius: 7px; border: none;
  background: rgba(0,0,0,.06); color: #333; font-size: 17px; line-height: 1;
  cursor: pointer; transition: background .12s;
}
.fbtn:hover:not(:disabled) { background: rgba(0,0,0,.12); }
.fbtn:disabled { opacity: .3; cursor: default; }
.finder-path { font-size: 14px; font-weight: 500; color: #444; }
.finder-path .crumb-sep { color: #bbb; margin: 0 4px; }
.finder-grid {
  flex: 1; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; padding: 22px;
}
.fitem {
  border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 6px; border-radius: 12px; transition: background .12s;
}
.fitem:hover { background: rgba(0,110,235,.10); }
.fitem:active { background: rgba(0,110,235,.18); }
.ficon { width: 78px; height: 78px; object-fit: contain; pointer-events: none; }
.fvid {
  position: relative; display: block; width: 84px; border-radius: 10px;
  overflow: hidden; background: #000; box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.fvid video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.fplay {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 20px; text-shadow: 0 2px 10px rgba(0,0,0,.7); pointer-events: none;
}
.fname { font-size: 13px; color: #222; text-align: center; line-height: 1.25; max-width: 118px; word-break: break-word; }

/* ---------- Video player ---------- */
/* no scrollbar in finder/player windows (their inner content scrolls itself) */
.win-body:has(.player), .win-body:has(.finder) { overflow: hidden; }
.player { width: 100%; height: 100%; background: #000; display: grid; place-items: center; overflow: hidden; contain: strict; }
.player video { width: 100%; height: 100%; object-fit: contain; display: block; dynamic-range-limit: standard; }

/* About me */
.about { padding: 30px 34px 34px; }
.about-top { display: flex; gap: 26px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid rgba(0,0,0,.08); }
.about-photo {
  flex: 0 0 auto; width: 150px; height: 150px; border-radius: 16px;
  background: radial-gradient(120% 120% at 50% 0%, #ff7a3d 0%, #e8341c 60%, #b31200 100%);
  display: grid; place-items: center; overflow: hidden;
}
.about-photo span { font-size: 44px; font-weight: 700; color: rgba(255,255,255,.92); letter-spacing: .04em; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-fields { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.af { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.af:last-child { border-bottom: none; }
.afk { flex: 0 0 78px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #111; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.afv { font-size: 16px; color: #555; }
.afl { font-size: 16px; color: #1f6bff; text-decoration: none; }
.afl:hover { text-decoration: underline; }
.about-bio { margin-top: 22px; background: #f3f3f4; border-radius: 12px; padding: 22px 24px; }
.about-bio p { font-size: 16px; line-height: 1.55; color: #222; margin-bottom: 14px; }
.about-bio p:last-child { margin-bottom: 0; }
.about-bio strong { color: #0a0a0a; }

/* Downloads window */
.dl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.dl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-radius: 10px;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
  font-size: 15px; font-weight: 500; color: #0a6cf0; text-decoration: none;
  transition: background .12s ease;
}
.dl-item::before { content: "⤓"; font-size: 18px; }
.dl-item:hover { background: #eef4ff; }

/* Notes */
.notes { display: flex; height: 100%; }
.notes-list { flex: 0 0 230px; border-right: 1px solid rgba(0,0,0,.09); padding: 14px 12px; overflow-y: auto; }
.note-page.hidden { display: none; }
.logos.skills { margin-bottom: 28px; }
.logos.skills:last-child { margin-bottom: 0; }
.note-item { padding: 12px 14px; border-radius: 10px; cursor: pointer; margin-bottom: 4px; }
.note-item.active { background: #ffe9a8; }
.note-item h5 { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 4px; }
.note-item p { font-size: 13px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item p span { color: #666; margin-right: 6px; }
.notes-content { flex: 1; padding: 22px 30px 40px; overflow-y: auto; }
/* mobile-only back arrow (hidden on desktop) */
.notes-back { display: none; }
.notes-date { text-align: center; font-size: 13px; color: #999; margin-bottom: 20px; }
.worked { border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 20px; margin-bottom: 26px; }
.worked h4 { text-align: center; font-size: 18px; font-weight: 700; color: #111; margin-bottom: 18px; }
.logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.logo-badge {
  display: grid; place-items: center; text-align: center;
  min-height: 54px; padding: 8px; border-radius: 10px;
  background: #fafafa; border: 1px solid rgba(0,0,0,.06);
  font-size: 12px; font-weight: 700; color: #444; letter-spacing: .01em;
  filter: grayscale(1); opacity: .85;
}
.notes-h2 { font-size: 30px; font-weight: 700; color: #0a0a0a; margin-bottom: 14px; }
.notes-h3 { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 2px; }
.notes-ital { font-style: italic; font-size: 15px; color: #333; margin-bottom: 10px; }
.notes-p { font-size: 15px; line-height: 1.6; color: #444; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #ececec; }
.notes-p:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

@media (max-width: 760px) {
  .about-top { flex-direction: column; text-align: center; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .icon { width: 84px; }
  .win-body { padding: 28px 22px 48px; }
  .win-h1 { font-size: 32px; }
  .win-meta { gap: 40px; }
  .win-gallery { grid-template-columns: 1fr; }

  /* Notes: master → detail. Show only the list first, open a note full-width. */
  .notes-list { flex: 1 1 100%; border-right: none; padding: 8px 10px; }
  .notes-content { display: none; }
  .notes.mobile-detail .notes-list { display: none; }
  .notes.mobile-detail .notes-content { display: block; flex: 1 1 100%; padding: 0 16px 40px; }

  .notes-back {
    display: flex; align-items: center; gap: 4px;
    position: sticky; top: 0; z-index: 5;
    width: calc(100% + 32px); margin: 0 -16px 14px; padding: 12px 14px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none; border-bottom: 1px solid rgba(0,0,0,.08);
    font-size: 17px; font-weight: 500; color: #0a6cf0;
    cursor: pointer;
  }
  .notes-back svg { flex: 0 0 auto; }
}