/* Base Layout Fix */
html, body {
  height: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
}
/* MODIFIED: More robust scroll locking for Safari */
html.body-lock, body.body-lock {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Font & Color Palette Integration */
body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #FBF5DD;
  color: #16404D;
}

/* Scroll Lock for Work Page */
body.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* Minor extras */
.fade-in { animation: fadeIn 0.6s ease both; }
@keyframes fadeIn { from {opacity:0; transform: translateY(6px)} to {opacity:1; transform:none} }
.glow-card { box-shadow: 0 0 0 1px rgba(22, 64, 77, 0.08), 0 12px 30px rgba(0,0,0,0.1), inset 0 0 40px rgba(255,255,255,0.3); }

/* Page Sections */
.page-section {
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.page-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#work {
  position: fixed;
  inset: 0;
  height: 100dvh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  z-index: 0;
}
#about {
  position: relative;
  z-index: 1;
}

/* Flipbook styles */
.flipbook-wrapper {
  transform-style: preserve-3d;
  touch-action: pan-x;
}
.flipbook-container {
  perspective: 2500px;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; 
}
.project-card {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1), opacity 0.5s;
  opacity: 1;
  transform: rotateY(0deg) translateZ(0); /* ADDED: translateZ(0) to promote to new layer for rendering stability */
  z-index: 2;
  will-change: transform, opacity;
}
.project-card.is-flipped {
  transform: rotateY(180deg) rotateX(60deg) translateZ(0); /* ADDED: translateZ(0) */
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.project-card.is-next {
  transform: rotateY(-180deg) rotateX(-60deg) translateZ(0); /* ADDED: translateZ(0) */
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.card-image-desktop { display: block; }
.card-image-mobile { display: none; }
@media (max-width: 768px) {
  .card-image-desktop { display: none; }
  .card-image-mobile { display: block; }
}

/* Image Gallery Styles */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.image-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid rgba(22, 64, 77, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.image-gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* Interactive Hint Animation */
@keyframes subtle-flip {
  0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
  50% { transform: rotateY(20deg) rotateX(10deg); }
}
.project-card.interactive-hint {
  animation: subtle-flip 3s ease-in-out infinite;
  animation-delay: 0.25s;
}
.flipbook-wrapper:hover .project-card.interactive-hint {
  animation: none;
}



/* Background & UI Elements */
.shapes-container, #particle-canvas, .vignette, #cursor-glow, .page-backdrop { position: fixed; }
.shapes-container, #particle-canvas { top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.shapes-container { z-index: -1; }
#particle-canvas { z-index: -2; }
.shape { position: absolute; border-radius: 50%; background-color: rgba(166, 205, 198, 0.2); transition: transform 0.1s linear; animation: float 20s infinite linear alternate; }
.shape.s1 { width: 80px; height: 80px; top: 15%; left: 10%; animation-duration: 25s; }
.shape.s2 { width: 40px; height: 40px; top: 70%; left: 20%; animation-duration: 30s; border-radius: 30%; }
.shape.s3 { width: 120px; height: 120px; top: 50%; left: 80%; animation-duration: 18s; background-color: rgba(221, 168, 83, 0.2); }
.shape.s4 { width: 60px; height: 60px; top: 85%; left: 60%; animation-duration: 22s; border-radius: 40%; }
.shape.s5 { width: 50px; height: 50px; top: 20%; left: 75%; animation-duration: 28s; }
@keyframes float { from { transform: translate(0px, 0px) rotate(0deg); } to { transform: translate(40px, -60px) rotate(180deg); } }
.vignette { left: 0; width: 100%; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.5s ease-in-out; }
.vignette-top { top: 0; height: 8rem; background: linear-gradient(to bottom, #FBF5DD, transparent); }
.vignette-bottom { bottom: 0; height: 8rem; background: linear-gradient(to top, #FBF5DD, transparent); }
body.about-visible .vignette { opacity: 1; }
#cursor-glow { width: 400px; height: 400px; background: radial-gradient(circle, rgba(166, 205, 198, 0.25) 0%, transparent 50%); border-radius: 50%; pointer-events: none; z-index: 50; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.4s ease; will-change: transform, opacity; }
@media (hover: hover) and (pointer: fine) { body:hover #cursor-glow { opacity: 1; } }
#cursor-glow.is-active { opacity: 1; transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.page-backdrop { inset: 0; background-color: rgba(22, 64, 77, 0.3); backdrop-filter: blur(4px); z-index: 99; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.page-backdrop.is-visible { opacity: 1; visibility: visible; }

/* Loader Styles */
.loader-overlay { position: fixed; inset: 0; background-color: #FBF5DD; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; }
.loader-hidden { opacity: 0; visibility: hidden; }
.loader-wrapper { position: relative; width: 80px; height: 80px; }
.loader-circle-bg, .loader-circle-fg { fill: none; stroke-width: 4; }
.loader-circle-bg { stroke: rgba(22, 64, 77, 0.1); }
.loader-circle-fg { stroke: #A6CDC6; stroke-linecap: round; transform-origin: 50% 50%; transform: rotate(-90deg); transition: stroke-dashoffset 0.2s ease; }

/* Scrollbar Styles */
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #A6CDC6; border-radius: 10px; border: 4px solid #FBF5DD; }
::-webkit-scrollbar-thumb:hover { background-color: #DDA853; }
* { scrollbar-width: thin; scrollbar-color: #A6CDC6 #FBF5DD; }

/* Project Overlay */
.project-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.project-overlay.is-visible { opacity: 1; visibility: visible; }
.project-overlay-content { position: relative; background-color: #FBF5DD; border: 1px solid rgba(22, 64, 77, 0.15); border-radius: 16px; width: 90%; max-width: 800px; max-height: 85vh; transform: scale(0.95); transition: transform 0.4s ease; overflow: hidden; padding: 2.5rem; display: flex; flex-direction: column; }
.project-overlay.is-visible .project-overlay-content { transform: scale(1); }
#overlayScrollWrapper { overflow-y: auto; flex-grow: 1; padding-right: 1.5rem; margin-right: -1.5rem; }

/* Lightbox (Image & Iframe) Styles */
.close-button { position: fixed; top: 2rem; right: 2rem; cursor: pointer; color: rgba(22, 64, 77, 0.7); transition: color 0.2s ease, transform 0.2s ease; z-index: 310; }
.close-button:hover { color: #16404D; transform: scale(1.1); }

.lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(251, 245, 221, 0.85); backdrop-filter: blur(5px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; overflow: hidden; touch-action: none; }
.iframe-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(251, 245, 221, 0.9); backdrop-filter: blur(5px); z-index: 300; padding: 2.5rem; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.lightbox-overlay.is-visible, .iframe-lightbox.is-visible { opacity: 1; visibility: visible; }

#lightboxContainer { transition: transform 0.2s ease-out; }
.lightbox-image { max-width: 90vw; max-height: 90vh; cursor: grab; user-select: none; -webkit-user-drag: none; }
.lightbox-image.is-panning { cursor: grabbing; }
.lightbox-trigger { cursor: zoom-in; }

.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(22, 64, 77, 0.4); color: white; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease, background-color 0.2s ease; z-index: 210; }
.lightbox-nav:hover { opacity: 1; background-color: rgba(22, 64, 77, 0.7); }
.lightbox-nav.prev { left: 1.5rem; }
.lightbox-nav.next { right: 1.5rem; }
.lightbox-nav.hidden { display: none; }

.lightbox-controls { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 210; display: flex; gap: 1rem; background-color: rgba(22, 64, 77, 0.7); padding: 0.5rem 1rem; border-radius: 9999px; }
.lightbox-controls button { color: white; opacity: 0.8; transition: opacity 0.2s ease; }
.lightbox-controls button:hover { opacity: 1; }

.iframe-lightbox-content { width: 100%; height: 100%; border: 1px solid rgba(22, 64, 77, 0.15); border-radius: 0.5rem; overflow: hidden; }
.iframe-lightbox-content iframe { width: 100%; height: 100%; border: 0; }

.video-container, .iframe-wrapper, .sketchfab-embed-wrapper { position: relative; overflow: hidden; width: 100%; border-radius: 0.5rem; margin: 1.5rem 0; }
.video-container { padding-top: 56.25%; background: #000; }
.iframe-wrapper, .sketchfab-embed-wrapper { padding-top: 75%; border: 1px solid rgba(22, 64, 77, 0.15); }
@media (max-width: 768px) { .iframe-wrapper, .sketchfab-embed-wrapper { padding-top: 177.77%; } }
.video-container iframe, .iframe-wrapper iframe, .sketchfab-embed-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.iframe-fullscreen-trigger { position: absolute; top: 1rem; right: 1rem; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: rgba(22, 64, 77, 0.7); color: white; border-radius: 50%; cursor: pointer; opacity: 0; transform: scale(0.9); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 10; }
.iframe-wrapper:hover .iframe-fullscreen-trigger { opacity: 1; transform: scale(1); }
@media (hover: none) and (pointer: coarse) { .iframe-fullscreen-trigger { opacity: 1; transform: scale(1); background-color: rgba(22, 64, 77, 0.5); } }

/* Responsive & Tablet Styles */
@media (max-width: 768px) {
  .fixed.top-6.left-6 { transform: scale(0.9); transform-origin: top left; }
  .social-icons { flex-direction: row; right: 1.5rem; transform: scale(0.9); transform-origin: bottom right; }
  nav.fixed.top-1\/2 { top: auto; bottom: 1.5rem; left: 1.5rem; flex-direction: row; transform: none; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  #work section { padding: 0 1rem; }
  .flipbook-wrapper { max-width: 680px; height: 480px; }
  #about .mx-auto.max-w-6xl { padding-left: 7rem; }
}

/* Custom List Icons */
.custom-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem; 
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.icon-wrapper svg {
  width: 100%;
  height: 100%;
  stroke: #16404D;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

.custom-list-item:hover .icon-wrapper svg {
  stroke: #DDA853; 
}

/* ASCII / Terminal Block Styling - Mobile Alignment Fix */
.ascii-terminal {
  background-color: #16404D;
  color: #FBF5DD;
  
  /* FORCE perfect alignment on all devices */
  font-family: "Courier New", Courier, monospace; 
  font-variant-ligatures: none;
  -webkit-text-size-adjust: none; /* Prevents iPhone/Android text inflation */
  text-size-adjust: none;
  
  font-size: 11px; /* Slightly adjusted for clarity */
  line-height: 1.1; /* Tighter line height connects vertical pipes better */
  padding: 1.5rem;
  border-radius: 0.75rem;
  
  /* Layout & Scroll Logic */
  width: fit-content;    
  margin: 2rem auto;     
  
  /* CRITICAL: Horizontal Scroll Logic */
  white-space: pre;  /* Strictly preserves spaces */
  overflow-x: auto;  /* Allows scrolling */
  max-width: 100%;   /* Fits inside the screen */
  
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(221, 168, 83, 0.2);
}

@media (max-width: 768px) {
  .ascii-terminal {
    font-size: 10px; 
    padding: 1rem;
    max-width: 90vw;
    /* Force hardware acceleration for smoother scrolling */
    -webkit-overflow-scrolling: touch; 
  }
}

/* Custom scrollbar */
.ascii-terminal::-webkit-scrollbar { height: 6px; }
.ascii-terminal::-webkit-scrollbar-thumb { background-color: #DDA853; border-radius: 4px; }
.ascii-terminal::-webkit-scrollbar-track { background-color: rgba(22, 64, 77, 0.5); }
/* Mobile Mockup / Simulator Styling */
.mobile-demo-container {
  display: flex;
  justify-content: center;
  margin: 3rem 0;
  perspective: 1000px;
}

.mobile-bezel {
  width: 340px;          /* Standard phone width */
  height: 680px;         /* Standard phone height */
  background-color: #16404D; /* Deep Teal Bezel */
  border-radius: 40px;   /* Smooth curves */
  padding: 12px;         /* Thickness of the bezel */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); /* Deep shadow for depth */
  position: relative;
  transition: transform 0.3s ease;
}

.mobile-bezel:hover {
  transform: translateY(-5px); /* Subtle float effect on hover */
}

/* The actual screen area */
.mobile-screen {
  width: 100%;
  height: 100%;
  background-color: #FBF5DD;
  border-radius: 28px;   /* Slightly tighter radius than bezel */
  overflow: hidden;      /* Clips the iframe corners */
  position: relative;
  border: 1px solid rgba(0,0,0,0.1);
}

.mobile-screen iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* "Camera/Speaker" Notch decoration */
.mobile-bezel::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 6px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 10px;
  z-index: 20;
  pointer-events: none;
}

/* Roadmap / Flowchart Styling - With Arrows */
.roadmap-wrapper {
  position: relative;
  padding: 0;
  width: 100%;
  max-width: 700px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The vertical spine running through the background */
.roadmap-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #16404D;
  transform: translateX(-50%);
  z-index: 0;
  opacity: 0.3;
}

/* Container for one "Phase" (e.g. Short Term) */
.roadmap-phase {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The Pill Header (Short Term Goals) */
.roadmap-header-pill {
  background-color: #16404D;
  color: #FBF5DD;
  padding: 0.6rem 2rem;
  border-radius: 99px;
  border: 2px solid #DDA853;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  margin-bottom: 0.5rem; /* Space for the arrow below it */
}

/* The Downward Arrow Icon */
.roadmap-arrow {
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #16404D;
  margin: 0.2rem 0 1rem 0; /* Spacing between header and grid */
}

/* A horizontal bar that makes it look like the flow "splits" to the boxes */
.roadmap-split-bar {
  width: 60%;
  height: 2px;
  background-color: #16404D;
  margin-bottom: 1rem;
  position: relative;
  opacity: 0.3;
}
/* Small vertical tick connecting split bar to the arrow */
.roadmap-split-bar::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -10px;
  height: 10px;
  width: 2px;
  background-color: #16404D;
}

/* The Grid of Boxes */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 3rem; /* Space before the next phase starts */
}

/* The Individual Boxes */
.roadmap-box {
  background-color: #FBF5DD;
  border: 1px solid #16404D;
  padding: 1.25rem 1rem;
  border-radius: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: #16404D;
  box-shadow: 4px 4px 0px rgba(22, 64, 77, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 2;
}

/* Hover effect for interactivity */
.roadmap-box:hover {
  transform: translateY(-3px);
  box-shadow: 4px 6px 12px rgba(22, 64, 77, 0.15);
  border-color: #DDA853;
}

/* Mobile Tweak: Remove split bar on small screens (vertical stack doesn't need it) */
@media (max-width: 600px) {
  .roadmap-split-bar { display: none; }
  .roadmap-grid { gap: 1rem; }
  .roadmap-spine { display: block; } /* Keep spine for vertical flow */
}

/* System Architecture Flowchart Styling - Horizontal Scroll */
.arch-wrapper {
  width: 100%;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  
  /* CRITICAL: Enable Horizontal Scroll */
  overflow-x: auto;       /* Allows swiping left/right */
  padding-bottom: 1.5rem; /* Space for the scrollbar to sit comfortably */
  -webkit-overflow-scrolling: touch; /* Ensures smooth momentum scrolling on iOS */
}

/* Custom Scrollbar for the Architecture Diagram */
.arch-wrapper::-webkit-scrollbar { height: 6px; }
.arch-wrapper::-webkit-scrollbar-thumb { background-color: #DDA853; border-radius: 4px; }
.arch-wrapper::-webkit-scrollbar-track { background-color: rgba(22, 64, 77, 0.1); }

/* A single level in the hierarchy (Row) */
.arch-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  
  /* CRITICAL: Force the row to be wide enough to hold 3 columns */
  /* This prevents squishing on mobile and triggers the scrollbar instead */
  min-width: 700px; 
  
  margin: 0 auto; /* Keeps it centered if screen is larger than 700px */
}

/* Columns for parallel branches */
.arch-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1; 
  align-items: center;
  position: relative;
  min-width: 0; 
}

/* The Box Styling */
.arch-box {
  background-color: #FBF5DD;
  border: 1px solid #16404D;
  color: #16404D;
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  font-size: 0.8rem;
  width: 100%;
  box-shadow: 3px 3px 0px rgba(22, 64, 77, 0.15);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;
}

.arch-box strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.arch-box.highlight {
  border: 2px solid #DDA853;
  background-color: #fff;
}

/* Connectors (Arrows) */
.arch-arrow-down {
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #16404D;
  margin: 0 auto;
  opacity: 0.6;
}