/* ═══════════════════════════════════════════════
   The Adventures of Nicky J — Main Stylesheet
   ═══════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── BODY — patterned outer canvas, stage positioned by JS ── */
body {
  background-color: #f7f7f4;
  background-image: radial-gradient(#c9c9c9 1px, transparent 1px);
  background-size: 28px 28px;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

:root {
  --stage-scaled-width: 1600px;
  --stage-scaled-height: 1000px;
  --viewport-rail-width: 14px;
  --gallery-thumb-width: 535px;
  --gallery-thumb-height: 302px;
  --gallery-gap-x: 140px;
  --gallery-gap-y: 76px;
}

.site-shell {
  position: relative;
}

.hero-section,
.gallery-section {
  position: relative;
}

.stage-shell {
  position: relative;
  overflow: hidden;
}

.viewport-rails {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
}

.viewport-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--viewport-rail-width);
  opacity: 0.95;
}

.viewport-rail-left {
  left: max(0px, calc(50% - (var(--stage-scaled-width) / 2) - var(--viewport-rail-width)));
  background: linear-gradient(180deg, #db3c8b 0%, #c82a8d 100%);
}

.viewport-rail-right {
  right: max(0px, calc(50% - (var(--stage-scaled-width) / 2) - var(--viewport-rail-width)));
  background: linear-gradient(180deg, #5ad0ff 0%, #46b8f6 100%);
}

/* ══════════════════════════════════════════════
   STAGE — 1600×1000 — everything lives here
   Black border lines mark the safe zone edges
══════════════════════════════════════════════ */
.stage {
  position: absolute;   /* JS controls top/left for viewport-fit centering */
  width: 1600px;
  height: 1000px;
  background: url('../images/backgrounds/desktop-miami.png') center / cover no-repeat;
  overflow: hidden;
  transform-origin: 0 0;  /* JS scales from top-left, then offsets to center */
}


/* ══════════════════════════════════════════════
   MENU BAR
══════════════════════════════════════════════ */
.menubar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 32px;
  background: #F5B0BC;
  border-bottom: 1px solid #c08090;
  display: flex;
  align-items: center;
  padding: 0 12px;
  z-index: 500;
  user-select: none;
  -webkit-user-select: none;
}

.menubar-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #1a0a10;
  margin-right: 18px;
  white-space: nowrap;
}

/* ── Dropdown menus ── */
.nav-menus {
  display: flex;
}

.nav-menu {
  position: relative;
}

.nav-menu-trigger {
  padding: 0 13px;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #1a0a10;
  cursor: pointer;
  border-radius: 3px;
}

.nav-menu-trigger:hover,
.nav-menu.open .nav-menu-trigger {
  background: rgba(0, 0, 0, 0.13);
}

.nav-menu-dropdown {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  background: #F5B0BC;   /* matches menubar */
  border: 1px solid #c08090;
  min-width: 170px;
  z-index: 600;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
}

.nav-menu.open .nav-menu-dropdown {
  display: block;
}

.dropdown-item {
  padding: 7px 20px;
  font-size: 13px;
  color: #1a0a10;
  cursor: pointer;
  white-space: nowrap;
}

.dropdown-item:hover {
  background: #b83060;
  color: #fff;
}

.dropdown-item.inactive {
  color: #bbb;
  cursor: default;
}

.dropdown-item.inactive:hover {
  background: none;
  color: #bbb;
}

/* ── Right side of menu bar ── */
.menubar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #1a0a10;
}

.menubar-right a {
  color: #1a0a10;
  text-decoration: none;
  font-size: 12px;
}

.menubar-right a:hover {
  text-decoration: underline;
}

.menubar-time {
  font-weight: 600;
  font-size: 12px;
  min-width: 38px;
  text-align: right;
}

/* ── MAILBASE DESKTOP WINDOW ── */
.mailbase-desktop-window {
  position: absolute;
  left: 890px;
  top: 150px;
  width: 520px;
  z-index: 8;
  transform: rotate(-1deg);
  transform-origin: left bottom;
  transition: transform 0.18s ease, filter 0.18s ease;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34));
  pointer-events: none;
}

.mailbase-desktop-window:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.02);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.42));
}

.mailbase-desktop-window-art {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.mailbase-open-button {
  position: absolute;
  right: 7.5%;
  bottom: 7.5%;
  width: 31%;
  display: block;
  pointer-events: auto;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.mailbase-open-button img {
  display: block;
  width: 100%;
  height: auto;
}

.mailbase-open-button:hover {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25));
}

.mailbase-open-button:active {
  transform: translateY(1px) scale(0.96);
}


/* ══════════════════════════════════════════════
   DOCK

   Both dock-platform and dock-icons are absolute
   children of dock-wrapper (height: 260px, bottom: 0).

   Pixel measurements (icon-platform.png at 760px display):
     Platform display size:  760 × 253px
     Shelf TOP surface from image bottom: 91px
     (image has 78px transparent padding at bottom)

   Icon column: img(85px) + margin-top(5px) + label(14px) = 104px
   dock-icons bottom = shelf_surface_from_bottom - label - margin
                     = 91 - 14 - 5 = 72px
══════════════════════════════════════════════ */
.dock-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 280px;
  pointer-events: none;
}

.dock-platform {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  display: block;
  pointer-events: none;
}

.dock-icons {
  position: absolute;
  bottom: 72px;   /* icon img bases land exactly on shelf surface */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: auto;
}

.dock-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  /* Y offset is stored in --icon-y (set by JS); hover/active build on it with calc() */
  transform: translateY(var(--icon-y, 0px));
  transition: transform 0.15s ease;
}

.dock-icon:hover {
  transform: translateY(calc(var(--icon-y, 0px) - 10px)) scale(1.14);
}

/* Press-down click feel */
.dock-icon:active {
  transform: translateY(calc(var(--icon-y, 0px) - 3px)) scale(0.91) !important;
  transition: transform 0.07s ease !important;
}

.dock-icon img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
}

/* ── Icon effect toggles — controlled by stage classes ── */
#stage.no-icon-hover .dock-icon,
#stage.no-icon-hover .dock-icon:hover,
#stage.no-icon-hover .dock-icon:active  { transform: translateY(var(--icon-y, 0px)) !important; transition: none !important; }
#stage.no-icon-shadow .dock-icon img    { filter: none !important; }
/* Disable press effect in edit mode */
#stage.nje-edit .dock-icon:active       { transform: translateY(var(--icon-y, 0px)) !important; }

.dock-icon .icon-label {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 0;
  background: transparent;
  color: #f5b0bc;
  font-family: 'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 10px;
  cursor: pointer;
  z-index: 80;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.scroll-cue-arrow {
  font-size: 18px;
  line-height: 1;
  animation: cue-bounce 1.8s ease-in-out infinite;
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.gallery-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background: transparent;
}

.gallery-section-panel {
  width: var(--stage-scaled-width);
  background: #ef7f92;
  padding: 34px 78px 74px;
}

.gallery-section-title {
  font-family: 'Space Mono', monospace;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  text-align: center;
  color: #0f0610;
  letter-spacing: 2px;
  margin-bottom: 38px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--gallery-thumb-width));
  justify-content: center;
  gap: var(--gallery-gap-y) var(--gallery-gap-x);
}

.gallery-thumb {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: opacity 0.16s ease;
}

.gallery-thumb:focus,
.gallery-thumb:focus-visible {
  outline: none;
  box-shadow: none;
}

.gallery-thumb.is-source-hidden {
  opacity: 0;
  pointer-events: none;
}

.gallery-thumb-window {
  position: relative;
  display: block;
  width: var(--gallery-thumb-width);
  height: var(--gallery-thumb-height);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.20));
}

.gallery-thumb-composite {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-thumb-window-title {
  position: absolute;
  top: 10px;
  left: 76px;
  right: 48px;
  height: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: #5a2535;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  pointer-events: none;
}


/* ══════════════════════════════════════════════
   PORTFOLIO POPUP
══════════════════════════════════════════════ */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.24s ease;
}

.popup-overlay.open {
  display: block;
}

.popup-overlay.is-transparent {
  background: rgba(0, 0, 0, 0);
}

/* Window frame — 720px wide, aspect matches pop-up-window.png (1672×941) */
.popup-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 720px;
  height: 406px;
}

.popup-window.is-hidden-for-morph {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gallery-morph-window {
  position: fixed;
  z-index: 760;
  pointer-events: none;
}

.gallery-morph-window .gallery-thumb-window,
.gallery-morph-window .popup-window {
  width: 100%;
  height: 100%;
}

.gallery-morph-window.gallery-morph-popup .popup-window {
  position: relative;
  inset: auto;
  top: auto;
  left: auto;
  transform: none;
}

.popup-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/*
  Content area — scaled from full-size asset coords (1672×941 → ×0.4305):
    full:   left=100  top=110  w=1461  h=745
    scaled: left≈43   top≈47   w≈629   h≈321
*/
.popup-content-area {
  position: absolute;
  left: 43px;
  top: 47px;
  width: 630px;  /* 629.14px actual — +1px to close sub-pixel gap on right */
  height: 322px; /* 320.8px actual  — +1px to close sub-pixel gap on bottom */
  overflow: hidden;
  background: #fdf3e8;
  z-index: 2;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the popup window — some left/right crop on 3:2 images */
  display: none;
}

.gallery-img.active {
  display: block;
}

/* Invisible hit area over the [×] button in the frame image */
.popup-close-btn {
  position: absolute;
  top: 14px;
  left: 43px;
  width: 30px;
  height: 22px;
  cursor: pointer;
  z-index: 10;
}

.gallery-counter {
  position: absolute;
  bottom: 6px;
  right: 10px;
  font-size: 11px;
  color: #999;
  z-index: 3;
  pointer-events: none;
}

/* ── Popup title bar overlay ── */
.popup-title {
  position: absolute;
  top: 14px;
  left: 80px;
  right: 48px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: #5a2535;
  letter-spacing: 3px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}

/* ── About Me content ──
   NOTE: .about-content is applied to .popup-content-area (same element).
   Do NOT set width/height here — they would override the absolute px values
   from .popup-content-area and cause the black to overflow the window.
   Background + layout only. */
.about-content {
  background: #080808 !important;
  padding: 26px 30px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.about-name {
  font-family: 'Space Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  margin-bottom: 5px;
}

.about-tagline {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: #F5B0BC;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 16px;
}

.about-bio {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.65;
  color: #cccccc;
  margin-bottom: 10px;
}

.about-bio:last-of-type { margin-bottom: 0; }

.about-sign {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: #555;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── Nav arrows — anchored outside the popup window frame ── */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  width: 52px;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s, opacity 0.15s;
  opacity: 0.9;
}

.nav-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

/* Outside the popup frame, clear of the window chrome */
.nav-arrow.left  { left: -90px; }
.nav-arrow.right { right: -90px; }

@media (max-width: 980px) {
  .gallery-section {
    padding: 0;
  }

  .gallery-section-panel {
    width: calc(100vw - 28px);
    padding: 32px 16px 42px;
  }

  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .gallery-thumb-window {
    width: 100%;
    height: auto;
    aspect-ratio: 1.78 / 1;
  }
}


/* ══ Gallery arrows: fade in out of the images, fade away on close ══ */
.popup-window .nav-arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.15s ease;
}
.popup-window.arrows-in .nav-arrow {
  opacity: 0.9;
  pointer-events: auto;
}
.popup-window.arrows-in .nav-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}
.popup-window.arrows-out .nav-arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}