/* home.css - darkmonstr home page styles */

/* --- Reset & base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
 
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: var(--size-md);
  line-height: var(--lh-md);
  overflow-x: hidden;
  transition: background 300ms ease, color 300ms ease;
}
 
a {
  color: inherit;
  text-decoration: none;
}
 
/* --- Intro screen ------------------------------------------ */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg-primary);
  display: flex;
  align-items: flex-end;      /* anchor content to bottom */
  justify-content: flex-start;
  padding: 0 8vw 20vh;        /* ~20% space from the bottom */
}
 
#home-main {
  position: relative;
  z-index: 1;
  background: var(--bg-primary);
}

.intro-content {
  display: flex;
  flex-direction: column;
}
 
.intro-headline {
  font-family: var(--font-primary);
  font-weight: var(--weight-extrabold);
  font-size: var(--size-2xl);
  color: var(--text-primary);
  line-height: 1.15;
  max-width: 860px;
}
 
.intro-dot {
  color: var(--decorative);
  opacity: 0;                 /* revealed by JS once typing ends */
  transition: opacity 160ms ease;
}
 
/* Growing red circle that fills the screen, then the iris reveals the page */
.intro-fill {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--decorative);
  transform-origin: 50% 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
 
.intro-name-underline {
  text-decoration: underline;
  text-decoration-color: var(--decorative);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}
 
.intro-cursor {
  display: inline-block;
  color: var(--decorative);
  font-weight: 300;
  animation: blink 0.7s step-end infinite;
}
 
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
 
@media (max-width: 480px) {
  .intro-headline { font-size: var(--size-xl); }
}
 
/* --- Site header (sticky): logo left + nav right ------------ */
#site-header.js-intro-lock {
  position: static;
}

#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-primary);
  padding: 24px 8vw 0;
  transition: background 300ms ease, color 300ms ease,
              padding 420ms cubic-bezier(.22, 1, .36, 1);
}

/* Compact header on scroll: the middle descriptor collapses away, the logo
   shrinks, the top padding tightens, and the name switches to the primary
   color -- leaving just "Darryl Chan." (name in primary, dot in accent). */
#site-header.is-scrolled { padding-top: 12px; }

/* Collapse by shrinking the descriptor's font to 0 (it stays inline text, so
   the comma never detaches from the name and wrapping stays natural). */
.logo-rest {
  font-size: 1em;
  transition: font-size 460ms cubic-bezier(.22, 1, .36, 1),
              opacity 300ms ease;
}

.is-scrolled .logo { font-size: var(--size-lg); }
.is-scrolled .logo-rest { font-size: 0; opacity: 0; }
.is-scrolled .logo-name { color: var(--text-primary); }
 
.header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 16px;
  border-bottom: 0.5px solid var(--border);
}
 
.logo {
  font-family: var(--font-primary);
  font-weight: var(--weight-extrabold);
  font-size: var(--size-2xl);
  line-height: 1.15;
  color: var(--text-primary);
  white-space: nowrap;
  transition: font-size 420ms cubic-bezier(.22, 1, .36, 1);
}

.logo-name { transition: color 380ms ease; }
 
/* Shared nav (used in the header) */
.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
 
.site-nav a {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  text-decoration: none;
}

.nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-primary);
  flex-shrink: 0;
}
 
.nav-divider {
  width: 1px;
  height: 14px;
  background: var(--border);
  margin: 0 4px;
}
 
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: .5em;
  cursor: pointer;
  color: var(--text-primary);
  padding: 6px;
  line-height: 1;
  transition: background-color 200ms ease, color 200ms ease;
}
 
.theme-toggle-btn:hover {
  background: var(--bg-card);
  color: var(--decorative);
}
 
@media (max-width: 1024px) {
  /* Allow the compact logo to wrap on narrow screens */
  .logo { white-space: normal; }
 
  /* No room for a row on mobile: stack logo over nav */
  .header-inner {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .intro-headline,
  .logo { font-size: var(--size-xl); }
 
  /* Allow the compact logo to wrap on narrow screens */
  .logo { white-space: normal; }
 
  /* No room for a row on mobile: stack logo over nav */
  .header-inner {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
  }

  .site-nav { margin-left: auto; }
}

@media (max-width: 480px) {
  .intro-headline, .logo { font-size: var(--size-lg); }
}


/* --- Fade-in ("pull") animation ---------------------------- */
/* The hidden initial state is gated behind `.js` (added to <html> by an inline
   script). If JS never runs, none of this applies and all content stays
   visible in its final position -- so a script failure can't hide the page. */
.anim-fadein {
  transition: opacity 500ms ease,
              transform 600ms cubic-bezier(.22, 1, .36, 1);
}

.js .anim-fadein {
  opacity: 0;
  transform: translateY(20px);
}

/* Same push-in animation, but entering from above (used by the header). */
.js .anim-fadein--down {
  transform: translateY(-20px);
}

.anim-fadein.visible {
  opacity: 1;
  transform: none;   /* drop the transform at rest so the element leaves its
                        composited layer (fixes a stale header repaint on theme
                        switch); identical to translateY(0) visually */
}

/* --- Typewriter caret (Selected work heading) -------------- */
/* The heading's line-height (24px) is smaller than its font-size (40px), so an
   in-flow inline caret taller than the line box inflates the heading's height
   while it's present. When the caret is removed after typing, the heading
   collapses back and everything below jumps up. Taking the caret out of flow
   (absolute) keeps the heading height constant, so there is no jump. */
.tw-caret {
  position: relative;
}

.tw-caret::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 0.9em;
  margin-left: 4px;
  bottom: -0.15em;
  background: var(--decorative);
  animation: blink 0.7s step-end infinite;
}

/* --- Portfolio section ------------------------------------- */
#portfolio {
  padding: 18% 8vw 10%;
}

.section-heading {
  font-family: var(--font-secondary);
  font-weight: var(--weight-bold);
  font-size: var(--size-2xl);
  color: var(--text-primary);
  margin-bottom: 32px;
  /* Reserve the line's height while the typewriter heading is still empty, so
     typing the first character doesn't push everything below it down. */
  min-height: var(--lh-md);
}

@media (max-width: 768px) {
  .section-heading {
    font-size: var(--size-xl);
  }
}

/* Project grid - featured row (2 cards + arrow) then a row of 3 */
.project-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-featured {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  scroll-margin-top: 110px;
}

.project-card {
  position: relative;
  border-radius: 1.5em;
  overflow: hidden;
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  cursor: pointer;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1),
              border-color 0.2s ease;
}

.project-card:hover {
  border-color: var(--decorative);
}

/* Project 1 - featured left, bottom-aligned, 20% shorter by design */
.project-card--featured-left {
  aspect-ratio: var(--ratio-featured);
  align-self: end;
}

/* Project 2 - featured right, taller by design */
.project-card--featured-right {
  aspect-ratio: var(--ratio-media);
}

/* Row of smaller cards — use --2 or --3 modifier for column count */
.project-grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.project-grid-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-grid-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.project-card--small {
  aspect-ratio: var(--ratio-media);
}

/* Unified badge - top-right of every card */
.card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  max-width: 70%;
  background: var(--bg-primary);
  border-radius: .5em;
  padding: 6px 16px 12px 16px;
  text-align: right;
}

.card-label {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--size-sm);
  color: var(--text-primary);
}

/* Chevron revealed on card hover */
.card-arrow {
  display: inline-block;
  color: var(--decorative);
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: width 200ms ease, opacity 200ms ease;
  margin-left: 0;
}

.project-card:hover .card-arrow {
  opacity: 1;
  width: auto;
  margin-left: 4px;
}

.card-arrow svg {
  vertical-align: middle;
}

.card-desc {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  color: var(--text-secondary);
  line-height: var(--lh-sm);
  margin-top: 4px;
}

/* Scroll cue - lower area between the two featured cards */
.scroll-arrow {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--decorative);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  display: none;
  transition: opacity 400ms ease;
  /* Bounce disabled for now (kept for later): animation: arrow-bounce 1.6s ease-in-out infinite; */
}

/* Kept commented for now, per request:
@keyframes arrow-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
*/

.card-shimmer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}

.card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

.project-card:hover .card-shimmer {
  opacity: 1;
}

/* More work link */
.more-work {
  text-align: center;
  margin-top: 32px;
}

.more-work a {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
}

@media (max-width: 768px) {
  .project-featured {
    grid-template-columns: 1fr;
  }

  .project-card--featured-left {
    align-self: auto;
  }

  /* 15% narrower, inset from the left */
  .project-card--featured-left {
    width: 85%;
    margin-left: 15%;
  }

  .project-grid-row,
  .project-grid-row--2,
  .project-grid-row--3 {
    grid-template-columns: 1fr;
  }

  /* Arrow sits between stacked cards, not overlapping */
  .scroll-arrow {
    display: none;
  }
}

@media (max-width: 480px) {
  .card-badge {
    top: 8px;
    right: 8px;
    max-width: 60%;
    padding: 4px 8px 8px 0px;
  }
}

/* --- Experience section ------------------------------------ */
#experience {
  padding: 10% 8vw 10%;
}
 
.experience-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
 
.experience-item {
  border-bottom: 0.5px solid var(--border);
}
 
.experience-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
 
.experience-summary::-webkit-details-marker {
  display: none;
}
 
.experience-title {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--size-sm);
  color: var(--text-primary);
  line-height: var(--lh-sm);
  transition: color 200ms ease;
}
 
.experience-chevron {
  display: inline-flex;
  color: var(--text-primary);
  transition: transform 300ms ease, color 200ms ease;
  flex-shrink: 0;
}
 
.experience-item details[open] .experience-chevron {
  transform: rotate(180deg);
  color: var(--decorative);
}

.experience-item details[open] .experience-title {
  color: var(--decorative);
}
 
/* Hover anywhere on the item highlights both title and chevron */
.experience-item:hover .experience-title {
  color: var(--decorative);
}
 
.experience-item:hover .experience-chevron {
  color: var(--decorative);
}
 
/* Smooth open/close for the accordion (animates height to/from auto) */
:root {
  interpolate-size: allow-keywords;
}
 
.experience-item details::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition: height 320ms ease,
              opacity 320ms ease,
              content-visibility 320ms allow-discrete;
}
 
.experience-item details[open]::details-content {
  height: auto;
  opacity: 1;
}
 
.experience-body {
  padding: 0 0 20px 0;
}
 
.experience-body ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
 
.experience-body li {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  line-height: var(--lh-sm);
}

.resume-link {
  display: inline-block;
  margin-top: 32px;
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
}

/* --- About section ----------------------------------------- */
#about {
  padding: 10% 8vw 10%;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-text p {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  line-height: var(--lh-sm);
}

/* em / strong styling is global (see tokens.css). */

.about-link:hover {
  color: var(--text-primary); 
  text-decoration: underline var(--decorative);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.about-portrait {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-portrait-img {
  aspect-ratio: var(--ratio-featured);
  display: block;
  width: 100%;
  border-radius: 1.5em;
}

.about-portrait figcaption {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  color: var(--text-secondary);
  line-height: var(--lh-sm);
}

.about-photos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.about-photo-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-photo-item .about-img {
  aspect-ratio: var(--ratio-media);
  border-radius: 1.5em;
}

.about-photo-item figcaption {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  color: var(--text-secondary);
  line-height: var(--lh-sm);
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-photos {
    grid-template-columns: 1fr;
  }
}

/* --- Base image style ------------------------------------- */
.about-img {
  background: var(--bg-card);
  border: 0.5px solid var(--border);
  border-radius: 1.5em;
  display: block;
}

/* --- Footer / contact -------------------------------------- */
#contact {
  padding: 10% 8vw 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.contact-cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-primary)
}

.contact-cta a {
  font-family: var(--font-primary);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
}

.contact {
  font-family: var(--font-secondary);
  font-weight: var(--weight-extrabold);
  font-size: var(--size-3xl);
  color: var(--text-primary);
  text-align: right;
}

@media (max-width: 1440px) {
  #contact {
    flex-direction: row;
    align-items: center;
  }

  .contact {
    font-size: var(--size-xl);
    
    line-height: normal;
  }
}

@media (max-width: 480px) {
  .contact {
    line-height: normal;
    flex-direction: row;
    align-items: center;
    font-size: var(--size-md);
  }
}


/* Borders for lower res */

@media (max-width: 768px) {
  .project-card,
  .about-portrait-img,
  .about-photo-item .about-img,
  .about-img { border-radius: 1em; }
}

@media (max-width: 480px) {
  .project-card,
  .about-portrait-img,
  .about-photo-item .about-img,
  .about-img { border-radius: .5em; }
}

/* --- Hamburger button -------------------------------------- */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  padding: 6px;
  border-radius: .5em;
  transition: background 200ms ease, color 200ms ease;
  flex-shrink: 0;
}

.hamburger-btn:hover {
  background: var(--bg-card);
  color: var(--decorative);
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .hamburger-btn { display: flex; }
  /* Row layout with just logo + hamburger; column no longer needed */
  .header-inner { flex-direction: row; align-items: center; gap: 0; }
}

/* --- Mobile menu overlay ----------------------------------- */
#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--decorative);
  clip-path: circle(0px at var(--menu-ox, 95%) var(--menu-oy, 40px));
  transition: clip-path 500ms cubic-bezier(.6,0,.25,1);
  pointer-events: none;
}

#mobile-menu.is-open {
  clip-path: circle(150vmax at var(--menu-ox, 95%) var(--menu-oy, 40px));
  pointer-events: auto;
}

.mobile-menu-inner {
  height: 100%;
  padding: 0 8vw;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 200ms ease 250ms;
}

#mobile-menu.is-open .mobile-menu-inner {
  opacity: 1;
}

.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 16px;
  border-bottom: 0.5px solid rgba(255,255,255,0.3);
}

.mobile-menu-logo {
  font-family: var(--font-primary);
  font-weight: var(--weight-extrabold);
  font-size: var(--size-lg);
  color: white;
  white-space: nowrap;
}

.mobile-menu-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-menu-actions .theme-toggle-btn {
  color: white;
}

.mobile-menu-actions .theme-toggle-btn:hover {
  background: rgba(255,255,255,0.15);
  color: white;
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  padding: 6px;
  border-radius: .5em;
  transition: background 200ms ease;
}

.mobile-menu-close:hover {
  background: rgba(255,255,255,0.15);
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu-link {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: var(--size-md);
  color: white;
  padding: 20px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.2);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.mobile-menu-link:last-child {
  border-bottom: none;
}

.mobile-menu-link:hover {
  opacity: 0.7;
}