/* Simplified single stylesheet combining base.css and layout.css. */

/* ===== Base (from base.css) ===== */
:root {
  --color-background: #ffffff;
  --color-text: #000000;
  --color-accent: #ffffff;
  --font-primary: 'Inconsolata';
  --font-heading: 'Inconsolata';
  --transition-fast: 0.3s;
  --transition-medium: 0.5s;
  --transition-slow: 0.9s;
  --underline-height: 0.5vh;
}

.title { font-size: 2rem; font-weight: normal; color: var(--color-text);; 
}

@font-face {
  font-family: 'Inconsolata';
  src: url('../Typeface/Title/geo-regular-webfont.woff2') format('woff2'),
       url('../Typeface/Title/geo-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Inconsolata';
  src: url('../Typeface/Body/inconsolata-variablefont_wdthwght-webfont.woff2') format('woff2'),
       url('../Typeface/Body/inconsolata-variablefont_wdthwght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes fadeOut { from {opacity:1;} to {opacity:0;} }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  opacity: 0;
  animation: fadeIn var(--transition-medium) forwards;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-primary), sans-serif;
  font-weight: normal;
  min-height: 100vh;
}

a { color: var(--color-text); text-decoration: none; transition: all var(--transition-medium) ease; }
button { background: none; border: none; cursor: pointer; font-family: inherit; font-weight: normal; }
ul, ol { list-style: none; }

.animated-underline { position: relative; display: inline-block; }
.animated-underline::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: var(--underline-height);
  background-color: var(--color-text);
  transition: width var(--transition-slow);
}
.animated-underline:hover::after { width: 100%; }

.expandable-text { display: inline-block; transition: font-size var(--transition-medium) ease; }

.top-bar { display: flex; justify-content: space-around; align-items: center; background-color: var(--color-background); padding: 1rem; }
.nav-container { display: flex; justify-content: space-between; width: 100%; }
.nav-item { flex: 1; }
.text-center { text-align: center; }
.hidden { display: none; }

/* ===== Layout (from layout.css) ===== */
/* Navigation menu base (horizontal defaults, overridden in vertical) */
.nav-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: auto; background-color: var(--color-background); z-index: 1000; }

/* Menu items */
.nav-item { position: relative; display: flex; width: 100%; justify-content: flex-start; align-items: baseline; margin-bottom: 1rem; cursor: pointer; line-height: 1; }

/* Menu link appearance */
.nav-link { position: relative; display: inline-block; color: var(--color-text); font-size: 2rem; font-weight: normal; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background-color: var(--color-text); transition: left var(--transition-medium) ease, width var(--transition-medium) ease, height var(--transition-medium) ease; }
.nav-link:hover::after { width: 100%; }

/* Active/exit states */
.nav-item.active .nav-link { color: var(--color-background); }
.nav-item.active .nav-link::after { width: 100%; height: 100%; bottom: 0; background-color: var(--color-text);  z-index: -1; }

/* Third state: detail view indicator (use ::after to morph from fill to stroke) */
body.layout-vertical .nav-item.detail .nav-link { color: var(--color-text); }
body.layout-vertical .nav-item.detail .nav-link::after {
  left: calc(100% + 6px); /* add small gap to the right of text */
  width: 2px;             /* thin stroke */
  height: 100%;           /* full height of text box */
  bottom: 0;
  border-radius: 0;       /* no rounding for a crisp line */
}

/* Project detail layout */
.project-detail { padding: 16px; display: none; }
.project-detail .detail-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.project-detail .detail-title { font-size: 1.4rem; font-weight: 600; }
.project-detail .detail-close { cursor: pointer; text-decoration: underline; }
/* Hint compositor for smoother fixed header animation */
#project-detail .detail-header { will-change: left, top, opacity, transform; transition: left var(--transition-medium) ease, top var(--transition-medium) ease, transform var(--transition-medium) ease, opacity var(--transition-medium) ease; }

/* Floating title used during frame→header animation */
.moving-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text);
  transition: left var(--transition-medium) ease, top var(--transition-medium) ease, opacity var(--transition-medium) ease, transform var(--transition-medium) ease;
  pointer-events: none;
  will-change: left, top, transform, opacity;
}

.nav-item.exiting .nav-link { color: var(--color-text); }
.nav-item.exiting .nav-link::after { width: 100%; height: 3px; bottom: 0; background-color: var(--color-text); }

/* Title + contact look */
.contact { font-size: 2rem; color: var(--color-text); text-decoration: none; padding: 0.3rem; font-weight: normal; }

/* Sections */
.placeholder-section { margin: 100px auto; width: 80%; height: 300px; border: 2px dashed #cccccc; background-color: var(--color-background); display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color-text); font-size: 1.5rem; font-weight: normal; }

/* Home */
.home-playground { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; pointer-events: none; }
.home-sentence { font-family: var(--font-primary), monospace; font-size: 2rem; line-height: 1.3; margin: 0 0 1rem 0; color: var(--color-text); position: relative; z-index: 2; pointer-events: auto; user-select: none; cursor: default; }
.home-subtitle { font-family: var(--font-primary), sans-serif; font-size: 0.9rem; line-height: 1.2; margin: 0 0 0.5rem 0; color: #8a8a8a; font-weight: 700; text-align: center; position: relative; z-index: 2; pointer-events: auto; }

/* Parallax */
.parallax-stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 220ms ease; }
.parallax-stage.visible { opacity: 1; }
.parallax-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; max-width: 40vw; max-height: 40vh; object-fit: contain; filter: none; opacity: 0; transition: opacity 220ms ease; will-change: transform; }
.parallax-image.is-visible { opacity: 1; }

/* Projects */
.projects-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 80px; align-items: start; }
@media (min-width: 900px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 28px; }
}

/* Simple item layout (paragraph-based) */
.project-item { width: 100%; max-width: 520px; margin: 8px 0; text-align: left; display: grid; gap: 6px; }
.project-item p { margin: 0; line-height: 1.45; color: var(--color-text); }
.placeholder-box { width: 100%; height: 200px; background-color: var(--color-background); border: 2px dashed #cccccc; margin-bottom: 8px; }

/* Content sections */
.content-section { position: absolute; top: 120px; width: 100%; overflow-y: auto; padding: 20px; opacity: 0; transition: opacity 0.4s ease-in-out; font-weight: normal; }
.content-section.active { display: block; opacity: 1; transition: opacity 0.4s ease-in-out; }
#gallery-section { display: block; font-size: 0.2em; }
#contact-section { font-size: 0.25em; }
#projects-section, #gallery-section, #about-section { display: none; }

/* ===== Vertical layout variant ===== */
body.layout-vertical .nav-container { position: fixed; top: 100px; left: 48px; transform: none; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; z-index: 10; }
body.layout-vertical .separator { display: none; }
body.layout-vertical .right-content { display: none; }
body.layout-vertical .nav-item { display: block; align-items: flex-start; text-align: left; }
body.layout-vertical .content-section { left: 204px; width: calc(100% - 224px); }
body.layout-vertical .top-bar .left-content { position: fixed; top: 24px; left: 48px; z-index: 11; }
/* Keep links flush-left; no padding so baseline stays consistent */
body.layout-vertical .nav-link { display: inline-block; padding: 7px; margin: 0; line-height: inherit; text-align: left; overflow: visible; }
/* Restore underline to full-width baseline */
body.layout-vertical .nav-link::after { left: 0; width: 0; }
body.layout-vertical .nav-link:hover::after { width: 100%; }
body.layout-vertical .top-bar .left-content .title { padding: 0; text-align: left; }

/* Add a small inset (visual padding) to the ACTIVE background fill so it doesn't touch the letters */
/* Default underline behavior for vertical layout (explicit, to be clear) */
body.layout-vertical .nav-link::after { left: 0; right: auto; bottom: 0; height: 3px; width: 0; transition: all var(--transition-medium) ease; }
body.layout-vertical .nav-link:hover::after { width: 100%; }
/* Active state: expand the background rectangle a few pixels around the text */
body.layout-vertical .nav-item.active .nav-link { position: relative; color: var(--color-background); }
/* Ensure active underline/fill animates; specifics handled above */
body.layout-vertical .nav-item.active .nav-link::after { background-color: var(--color-text); }

/* Ensure detail + active uses the stroke (not the full fill) */
body.layout-vertical .nav-item.detail.active .nav-link { color: var(--color-text); }
body.layout-vertical .nav-item.detail.active .nav-link::after { left: calc(100% + 6px); width: 2px; height: 100%; bottom: 0; border-radius: 0; z-index: 0; }

/* Word spans */
.home-word { display: inline-block; position: relative; cursor: default; }
.home-word:hover { text-decoration: none; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .nav-container { width: 90%; padding: 5px 10px; }
  .nav-link { font-size: 1.5rem; font-weight: normal; color: var(--color-text); }
  .separator { font-size: 1.5rem; font-weight: normal; color: var(--color-text); }
}
@media (max-width: 480px) {
  .nav-container { height: auto; }
}

/* Background for content area */
#content-section { margin-top: 80px; background-color: var(--color-background); padding: 20px; font-weight: normal; }