/* =========================================================================
   pages.css — per-surface layout: hero, about, projects, contact + responsive
   ========================================================================= */

/* =========================================================================
   HERO (index)
   ========================================================================= */
.hero {
  min-height: calc(100vh - 6rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 5vw, 5rem);
}
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: auto;
    gap: 2.5rem;
  }
}

.hero__copy { max-width: 40ch; }
@media (max-width: 860px) { .hero__copy { max-width: none; margin-inline: auto; } }

.hero__name {
  font-size: var(--text-hero);
  font-weight: 700;
  margin: 0.6rem 0 0.4rem;
}
.hero__role {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  color: var(--ink);
  margin-top: 0.4rem;
}
.hero__role .accent { color: var(--accent); }
/* blinking caret after the dynamic role text */
.hero__role .caret {
  display: inline-block;
  width: 0.6ch;
  color: var(--accent-2);
  animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.hero__desc {
  color: var(--ink-soft);
  font-size: var(--text-lead);
  margin-top: 1.2rem;
}
.hero__actions {
  display: flex;
  gap: 0.9rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
@media (max-width: 860px) { .hero__actions { justify-content: center; } }

/* meta chips under the hero (location / focus / status) */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2.2rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.8); } }

/* Hero portrait — glass frame + rotating conic glow ring */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.portrait {
  position: relative;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.portrait::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1e7a50, #2fa36b, #52c98f, #2fa36b, #1e7a50);
  filter: blur(14px);
  opacity: 0.65;
  z-index: -1;
  animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.portrait img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lift);
}
.portrait__float {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  background: rgba(8, 11, 18, 0.8);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.7rem;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}
.portrait__float--1 { top: 8%; left: -8%; animation: bob 5s ease-in-out infinite; }
.portrait__float--2 { bottom: 10%; right: -10%; animation: bob 6s ease-in-out infinite reverse; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* =========================================================================
   ABOUT — given extra attention: bento layout
   ========================================================================= */
.about-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
  margin-top: 2.5rem;
}
.about-card { padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
.about-card h3 {
  font-size: var(--text-h3);
  margin-bottom: 0.8rem;
}
.about-card p { color: var(--ink-soft); }

/* spans */
.about-bio    { grid-column: span 4; }
.about-now    { grid-column: span 2; }
.about-skills { grid-column: span 3; }
.about-edu    { grid-column: span 3; }
.about-cta    { grid-column: span 6; }

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-bio, .about-now, .about-skills, .about-edu, .about-cta { grid-column: 1 / -1; }
}

/* "currently" list */
.now-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.now-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.now-list li::before {
  content: "▹";
  color: var(--accent);
  margin-top: 0.05rem;
}

/* skills as animated tag cloud */
.skill-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.skill-tag {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  padding: 0.4rem 0.8rem;
  border-radius: 12px;
  transition: transform var(--dur-fast) var(--ease-spring),
              border-color var(--dur-fast) ease, color var(--dur-fast) ease,
              background var(--dur-fast) ease;
}
.skill-tag:hover {
  transform: translateY(-3px);
  color: var(--accent);
  border-color: rgba(47, 163, 107, 0.5);
  background: rgba(47, 163, 107, 0.07);
}

/* education / timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.timeline li {
  position: relative;
  padding-left: 1.4rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--grad-accent);
  box-shadow: 0 0 12px rgba(47, 163, 107, 0.6);
}
.timeline .t-role { color: var(--ink); font-weight: 600; font-family: var(--font-display); }
.timeline .t-meta { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em; }
.timeline .t-detail { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.2rem; }

/* about CTA banner */
.about-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(47, 163, 107, 0.12), transparent 70%),
    var(--glass);
}
.about-cta h3 { font-size: var(--text-h3); }
.about-cta p { color: var(--ink-soft); margin-top: 0.3rem; }

/* =========================================================================
   PROJECTS — keep the 3-card row
   ========================================================================= */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
  margin-top: 2.5rem;
}
@media (max-width: 920px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .projects-grid { grid-template-columns: 1fr; } }

.project-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 0;
  transform: translateZ(0);
  transition: transform var(--dur) var(--ease-out-expo),
              box-shadow var(--dur) var(--ease-out-expo),
              border-color var(--dur) ease;
}
.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-lift), var(--glow-accent);
}

/* cover: real image if provided, else gradient + monogram placeholder */
.project-card__cover {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--grad-accent);
}
.project-card__cover img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.project-card__cover .monogram {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  color: rgba(4, 20, 15, 0.85);
  letter-spacing: -0.04em;
  z-index: 1;
}
.project-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5, 7, 13, 0.55));
  pointer-events: none;
  z-index: 2;
}

/* Scrollable cover: inner strip */
.cover-scroll__strip {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cover-scroll__strip::-webkit-scrollbar { display: none; }
.cover-scroll__strip img {
  /* Reset the abs-position rule from .project-card__cover img so images
     sit in the flex flow and actually produce scrollable content. */
  position: static;
  inset: auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
}

/* Prev / next buttons */
.cover-scroll__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--glass-border-hi);
  background: rgba(5, 7, 13, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              opacity var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-spring);
}
.cover-scroll__btn svg { width: 16px; height: 16px; }
.cover-scroll__btn:hover {
  background: rgba(47, 163, 107, 0.3);
  border-color: rgba(47, 163, 107, 0.6);
  transform: translateY(-50%) scale(1.08);
}
.cover-scroll__btn--prev { left: 0.55rem; }
.cover-scroll__btn--next { right: 0.55rem; }

/* Desktop: buttons appear only while hovering the card.
   Mobile (hover: none) stays always visible. */
@media (hover: hover) {
  .project-card__cover--has-scroll .cover-scroll__btn {
    opacity: 0;
    pointer-events: none;
  }
  .project-card:hover .cover-scroll__btn {
    opacity: 1;
    pointer-events: auto;
  }
}

.project-card__body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.project-card__title {
  font-size: 1.2rem;
}
.project-card__summary {
  color: var(--ink-soft);
  font-size: 0.95rem;
  flex: 1;
}
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.project-card__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.6rem;
}
.project-card__cta {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--dur-fast) ease;
}
.project-card:hover .project-card__cta { gap: 0.7rem; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.3rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info {
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  display: flex;
  flex-direction: column;
}
.contact-info h3 { font-size: var(--text-h3); }
.contact-info .role {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-top: 0.3rem;
}
.contact-info__email {
  margin-top: 1.6rem;
}
.contact-info__email a {
  font-size: 1.05rem;
  color: var(--ink);
  border-bottom: 1px solid rgba(47, 163, 107, 0.4);
  padding-bottom: 2px;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.contact-info__email a:hover { color: var(--accent); border-color: var(--accent); }
.contact-info .socials {
  margin-top: auto;
  display: flex;
  gap: 0.7rem;
  padding-top: 2rem;
}

.contact-form {
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem);
}
.contact-form h3 { font-size: var(--text-h3); margin-bottom: 1.3rem; }

/* =========================================================================
   Footer (shared, injected by JS)
   ========================================================================= */
.site-footer {
  width: min(92%, 1120px);
  margin: 0 auto;
  padding: 2rem 0 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--glass-border);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }

/* =========================================================================
   Mobile fine-tuning
   ========================================================================= */
@media (max-width: 600px) {
  .navbar { gap: 0; padding: 5px; }
  .navbar a { padding: 0.45rem 0.7rem; font-size: 0.82rem; }
  .page { padding-top: 6.5rem; }
  .hero__actions .btn { flex: 1; }
}