/* Basic reset and accessibility helpers */
*{box-sizing:border-box}
:root{
  --gallery-mobile-width: 80vw;
  --gallery-reveal: 220px;
  --gallery-scale: 1;
}
html,body{height:100%;}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Make the SVG fill the viewport width and allow vertical scrolling */
.svg-figure{margin:0}
.fullwidth-svg{display:block;width:100%;height:auto;max-width:none}

/* Ensure the page can scroll vertically when the SVG is taller than viewport */
main{min-height:100vh}

/* Provide a neutral background matching the SVG's white canvas */
body{background:#ffffff}

/* Improve image rendering for crisp lines */
img.fullwidth-svg{image-rendering:optimizeQuality}

/* Gallery panel (cloned from SVG group #graphics_gallery) */
#gallery-panel{position:fixed;top:var(--gallery-top,161px);height:var(--gallery-height,calc(100vh - 161px));overflow:hidden;z-index:9998;pointer-events:auto;transition:transform .35s ease;background:transparent;right:0}
/* closed state fallback using CSS variable (JS overrides with inline transform for precise px values) */
/* Closed: translate the panel right by (width - reveal) so only the reveal remains visible */
#gallery-panel.closed{transform: translateX(calc(var(--gallery-width) - var(--gallery-reveal,120px)));}
#gallery-panel svg{width:100%;height:auto;display:block}
#gallery-panel .gallery-handle{cursor:pointer;pointer-events:auto}

/* Masked container holding the scrollable image list */
#gallery-mask{position:absolute;left:250px;top:300px;width:450px;height:400px;overflow-y:scroll;padding:12px;box-sizing:border-box;z-index:2}

/* (No clip-path needed) */

/* Make the image list fit inside the mask without scrolling */
#gallery-image-list{position:relative;height:auto;overflow:hidden;padding-right:6px}
.gallery-slot{width:100%;height:auto;margin-bottom:10px;background:rgba(255,255,255,0.02);border-radius:6px;overflow:visible;display:flex;align-items:center;justify-content:center}
.gallery-slot img{width:100%;height:auto;object-fit:contain;display:block}

/* (No on-screen toggle control) */

/* WebKit scrollbar styling for the mask */
#gallery-mask::-webkit-scrollbar{width:12px}
#gallery-mask::-webkit-scrollbar-track{background:transparent;border-radius:8px}
#gallery-mask::-webkit-scrollbar-thumb{background:#4a005f;border-radius:8px}
#gallery-mask::-webkit-scrollbar-thumb:hover{background:#33003f}

/* Firefox scrollbar */
#gallery-mask{scrollbar-width:thin;scrollbar-color:#4a005f transparent}

/* Controls UI inside the panel for interactive positioning */
#gallery-controls{position:absolute;right:8px;top:8px;z-index:4;background:rgba(0,0,0,0.45);color:#fff;padding:8px;border-radius:8px;font-size:12px;display:flex;gap:8px;align-items:center}
#gallery-controls label{display:inline-flex;align-items:center;gap:6px}
#gallery-controls input{width:64px;padding:4px;border-radius:4px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:#fff}

/* Gallery scrollbar uses default browser appearance (custom styling removed) */

/* Focus style for SVG X button (faked button) */
#X_BUTTON_FOR_GG:focus {
  outline: 3px solid rgba(255,255,255,0.9);
  outline-offset: 4px;
}

/* Mobile: limit gallery panel width and scale SVG slightly for better fit */
@media (max-width: 768px) {
  /* Narrower panel on mobile */
  #gallery-panel { width: 80vw !important; transform: translateX(calc(80vw - 120px)) !important; }
  /* Slightly scale SVG and keep transform origin at left/top */
  #gallery-panel svg { transform: scale(var(--gallery-scale, 1)); transform-origin: left top; transition: transform .35s ease; }
  /* Move mask left and make images fit the smaller panel */
  #gallery-mask { left: 8px !important; top: 100px !important; width: calc(100% - 32px) !important; }
  /* Keep gallery images centered on mobile (do not left-align) */
  #gallery-image-list { padding-left: 0 !important; }
  .gallery-slot { justify-content: center !important; }
  .gallery-slot img { width: calc(100% * var(--gallery-scale, 1)) !important; margin-left: auto !important; margin-right: auto !important; transition: width .35s ease, transform .35s ease; }
}
/* Ensure modal close button is circular and large enough on mobile */
@media (max-width: 768px) {
  #image-modal .image-modal-close, .image-modal-close {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: red !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  }
}

/* Ensure the SVG X button inside the gallery panel scrolls with panel content */
#gallery-panel svg g#X_BUTTON_FOR_GG,
#gallery-panel svg #X_BUTTON_FOR_GG {
  cursor: pointer;
  pointer-events: auto;
}

/* (Overlay removed) */

/* Skills scrolling animation */
@keyframes scrollSkills {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); } /* move from off-screen left through screen to off-screen right */
}

/* Resume button hover / click styles */
.resume-button {
  transition: transform 160ms ease, opacity 160ms ease;
  transform-origin: center center;
  transform-box: fill-box;
  cursor: pointer;
}
.resume-button:hover,
.resume-button:focus {
  transform: scale(1.2);
  outline: none;
}
.resume-button:active {
  transform: scale(1.15);
}

.resume-html-button {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 10001;
  background: transparent;
  border: none;
  padding: 6px;
}

/* Smooth GPU-accelerated gallery slide hints and mobile CSS vars */
#gallery-panel {
  /* Smooth GPU-accelerated slide animation */
  will-change: transform;
  contain: layout style paint;
}

@media (max-width: 768px) {
  :root {
    --gallery-mobile-width: 85vw;
    --gallery-reveal: 120px;
  }

  #gallery-panel {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* Mobile-only horizontal gallery swiper (overlay over mobile bottom bar) */
#mobile-gallery-swiper {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12%;
  width: calc(100% - 40px);
  max-width: 980px;
  height: 120px;
  z-index: 10010; /* above mobile bottom bar */
  display: block;
  pointer-events: auto;
}

#mobile-gallery-list {
  display: flex;
  gap: 10px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
  align-items: center;
  touch-action: pan-y; /* allow vertical page scroll, horizontal inside */
}

.mobile-gallery-slot {
  flex: 0 0 auto;
  width: 160px;
  height: 100%;
  scroll-snap-align: center;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  display:flex;align-items:center;justify-content:center;
}

.mobile-gallery-slot img.mobile-gallery-img{width:100%;height:100%;object-fit:cover;display:block}

/* hide on desktop */
@media (min-width: 769px){
  #mobile-gallery-swiper{display:none}
}

/* Styles for foreignObject-embedded mobile swiper inside SVG */
.mobile-fo-swiper{width:100%;height:100%;display:block}
.mobile-fo-list{display:flex;gap:8px;height:100%;overflow-x:auto;padding:6px;align-items:center;touch-action:pan-y}
.mobile-fo-slot{flex:0 0 auto;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mobile-fo-slot img{width:100%;height:100%;object-fit:contain;display:block;background:#111}