/* ======================================================================
   POLISH — additive layer, loaded after style.css
   Liquid glass · editorial typography · constrained Apple-tier motion
   Fonts: Instrument Serif (italic accent) · JetBrains Mono (mono label)
====================================================================== */

/* ── Canvas tone-down (ribbons stay, just softer behind glass) ──────── */
body > canvas { opacity: 0.55 !important; }

/* ── Scroll progress hairline ──────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

/* ── Hero layout — CSS grid for proper vertical centering ──────────── */
.hero-content {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 3rem !important;
  align-items: center !important;
  max-width: var(--max-width);
}
@media (max-width: 768px) {
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
    text-align: center;
  }
  .hero-photo-wrap    { justify-self: center; }
  .status-pill        { margin-left: auto; margin-right: auto; }
  .hero-annotation    { text-align: center; }
  .hero-links         { justify-content: center; }
  .hero-socials       { justify-content: center; }
  .hero-description   { margin-left: auto; margin-right: auto; }
}

/* ── Status pill ──────────────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255,255,255,0.09);
  border-radius: 100px;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  margin-bottom: 0.625rem;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08);
  animation: enter-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.05s both;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  position: relative;
}

.status-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #22c55e;
  opacity: 0.35;
  animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes status-ping {
  0%        { transform: scale(1);   opacity: 0.35; }
  75%, 100% { transform: scale(2.8); opacity: 0;    }
}

/* ── Hero title — italic last word with gradient drift ─────────────── */
.hero-title .ital {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  background: linear-gradient(
    90deg,
    #c7d2fe 0%,
    #a5b4fc 22%,
    #22d3ee 52%,
    #a5b4fc 78%,
    #c7d2fe 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-drift 11s linear infinite;
}

@keyframes gradient-drift {
  from { background-position:   0% center; }
  to   { background-position: 250% center; }
}

/* ── Hero annotation — italic serif whisper under subtitle ─────────── */
.hero-annotation {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(255,255,255,0.32);
  margin-top: -0.2rem;
  margin-bottom: 1rem;
  letter-spacing: 0.005em;
  line-height: 1.45;
  animation: enter-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.50s both;
}

/* ── Section eyebrow label + drawing hairline ───────────────────────── */
.polish-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.eyebrow-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
  flex-shrink: 0;
}

.eyebrow-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(99,102,241,0.55) 0%,
    rgba(34,211,238,0.20) 100%
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.in-view .eyebrow-line { transform: scaleX(1); }

/* ── Ghost section number (override existing small ::before counter) ── */
.section-title {
  position: relative;
}

.section-title::before {
  content: '0' counter(section-counter);
  position: absolute;
  right: -0.25rem;
  top: -0.4em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 4rem;
  font-weight: 400;
  color: rgba(255,255,255,0.04);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  /* reset inherited from style.css tiny-label version */
  display: block;
  text-transform: none;
  opacity: 1;
  margin-bottom: 0;
}

/* ── JetBrains Mono for tech chips and skill items ─────────────────── */
.tech-tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.01em !important;
  text-transform: lowercase !important;
}

.skill-item {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.01em !important;
}

/* ── Timeline bullet dash → extends + turns cyan on hover ──────────── */
.timeline-card li {
  position: relative;
  padding-left: 1.1em;
  transition: color 0.2s ease;
}
.timeline-card li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: rgba(99,102,241,0.5);
  transition: color 0.2s ease, letter-spacing 0.25s cubic-bezier(0.16,1,0.3,1);
  display: inline-block;
}
.timeline-card:hover li::before {
  color: #22d3ee;
  letter-spacing: 0.08em;
}

/* ── Blog rows: title turns cyan on hover ───────────────────────────── */
.blog-list-item:hover .blog-list-title {
  color: #22d3ee;
  transition: color 0.18s ease;
}

/* ── Project card specular highlight follows cursor ────────────────── */
.project-card {
  --mx: 50%;
  --my: 50%;
}
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx) var(--my),
    rgba(255,255,255,0.055),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
.project-card:hover::after { opacity: 1; }

/* ── Mobile fixes ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide ghost numbers — too large and cause horizontal scroll */
  .section-title::before { display: none !important; }

  /* Eyebrow line takes remaining space cleanly on narrow screens */
  .polish-eyebrow { gap: 0.5rem; }
  .eyebrow-text   { font-size: 0.45rem; letter-spacing: 0.18em; }

  /* Don't let the specular highlight card ::after break layout */
  .project-card::after { display: none; }
}

/* ── Reduced motion guard ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-title .ital        { animation: none !important; }
  .status-dot::after       { animation: none !important; }
  #scroll-progress         { transition: none !important; }
  .eyebrow-line            {
    transition: none !important;
    transform: scaleX(1);
  }
  .status-pill             { animation: none !important; opacity: 1; }
  .hero-annotation         { animation: none !important; opacity: 1; }
}

/* ── Tab-visibility safety net ──────────────────────────────────────── */
body.force-visible .hero-title,
body.force-visible .hero-subtitle,
body.force-visible .hero-description,
body.force-visible .hero-links,
body.force-visible .hero-photo-wrap,
body.force-visible .status-pill,
body.force-visible .hero-annotation {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ======================================================================
   MOBILE PASS — intentional, not squeezed
====================================================================== */

/* Hero photo shrinks gracefully */
@media (max-width: 760px) {
  .hero-photo {
    width: 140px !important;
    height: 140px !important;
  }

  /* Title can't overflow — clamp tighter on small screens */
  .hero-title {
    font-size: clamp(1.875rem, 8vw, 2.75rem) !important;
    letter-spacing: -0.03em !important;
  }

  /* Buttons and socials wrap cleanly */
  .hero-links {
    flex-wrap: wrap !important;
    gap: 0.625rem !important;
  }

  /* Cards: less padding, lighter blur (GPU budget) */
  .project-card,
  .timeline-card,
  .education-item {
    padding: 1.125rem !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  }

  /* Prevent any element being wider than viewport */
  .hero-content,
  .status-pill,
  .hero-annotation {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Disable hover-only effects on touch (3D tilt already guarded in JS) */
@media (hover: none) {
  .project-card:hover  { transform: none !important; }
  .timeline-card:hover { transform: translateX(0) !important; }
  .education-item:hover { transform: translateX(0) !important; }
  .project-card::after { display: none !important; }
  .timeline-card:hover li::before { color: rgba(99,102,241,0.5); letter-spacing: normal; }
}

/* ======================================================================
   PROJECT DETAIL PAGES — glass header + back pill
====================================================================== */

.project-back-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  text-decoration: none;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  margin-bottom: 1.75rem;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06);
}
.project-back-pill:hover {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.project-back-pill i { font-size: 0.7em; opacity: 0.8; }

/* Glass treatment for project header band */
.project-detail-page .blog-header {
  background: linear-gradient(148deg, rgba(255,255,255,0.048) 0%, rgba(255,255,255,0.016) 100%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border: 0.5px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  padding: 2rem 2rem 1.75rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -0.5px 0 rgba(0,0,0,0.10),
    0 12px 40px rgba(0,0,0,0.28) !important;
  margin-bottom: 2rem !important;
}

/* Project eyebrow injected above the title */
.project-page-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}
.project-page-eyebrow .eyebrow-text  { color: rgba(255,255,255,0.28); }
.project-page-eyebrow .eyebrow-line  {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(99,102,241,0.5), rgba(34,211,238,0.15));
  transform: scaleX(1);
}

/* Project title serif accent (same .ital class) */
.blog-post-title .ital {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  background: linear-gradient(90deg, #c7d2fe 0%, #a5b4fc 25%, #22d3ee 55%, #a5b4fc 80%, #c7d2fe 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-drift 11s linear infinite;
}

/* Glass content well */
.project-detail-page .blog-content {
  background: rgba(255,255,255,0.018) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 0.5px solid rgba(255,255,255,0.055) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06) !important;
}

/* ======================================================================
   LIGHT MODE OVERRIDES for polish elements
====================================================================== */

[data-theme="light"] .status-pill {
  color: rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  box-shadow: inset 0 0.5px 0 rgba(0,0,0,0.04);
}
[data-theme="light"] .eyebrow-text { color: rgba(0,0,0,0.35); }
[data-theme="light"] .hero-annotation { color: rgba(0,0,0,0.38); }
[data-theme="light"] .section-title::before { color: rgba(0,0,0,0.035); }
[data-theme="light"] body > canvas { opacity: 0.22 !important; }
[data-theme="light"] .eyebrow-line {
  background: linear-gradient(90deg, rgba(79,70,229,0.45), rgba(8,145,178,0.15));
}
[data-theme="light"] .hero-title .ital,
[data-theme="light"] .blog-post-title .ital {
  background: linear-gradient(90deg, #4f46e5 0%, #4338ca 30%, #0891b2 60%, #4338ca 80%, #4f46e5 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .project-detail-page .blog-header {
  background: linear-gradient(148deg, rgba(0,0,0,0.028) 0%, rgba(0,0,0,0.010) 100%) !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 8px 32px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .project-detail-page .blog-content {
  background: rgba(0,0,0,0.018) !important;
  border-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .project-back-pill {
  color: rgba(0,0,0,0.45);
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .project-back-pill:hover {
  color: rgba(0,0,0,0.75);
  background: rgba(0,0,0,0.06);
}

/* ======================================================================
   MICRO-INTERACTIONS
====================================================================== */

/* Button subtle inner glow on hover */
.btn:hover {
  box-shadow:
    inset 0 0 0 1px rgba(99,102,241,0.25),
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 16px rgba(99,102,241,0.12) !important;
}

/* Scroll-to-top glass button */
#scroll-top {
  position: fixed;
  right: 1.5rem;
  bottom: 2rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0.5px solid rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.42);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1),
              transform 0.3s cubic-bezier(0.16,1,0.3,1),
              background 0.18s ease,
              color 0.18s ease;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(0,0,0,0.25);
  pointer-events: none;
  font-size: 0.75rem;
}
#scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#scroll-top:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.14);
}
[data-theme="light"] #scroll-top {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.09);
  color: rgba(0,0,0,0.45);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.5), 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] #scroll-top:hover {
  background: rgba(0,0,0,0.07);
  color: rgba(0,0,0,0.72);
}

/* Copy-email glass toast */
#copy-toast {
  position: fixed;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 0.45rem 1rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255,255,255,0.10);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
  z-index: 1000;
  pointer-events: none;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.10), 0 8px 24px rgba(0,0,0,0.28);
  white-space: nowrap;
}
#copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-theme="light"] #copy-toast {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.60);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Reduced motion — collapse all new animations too */
@media (prefers-reduced-motion: reduce) {
  .blog-post-title .ital { animation: none !important; }
  #scroll-top            { transition: opacity 0.1s ease !important; transform: none !important; }
  #copy-toast            { transition: opacity 0.1s ease !important; transform: translateX(-50%) !important; }
  .project-back-pill     { transition: none !important; }
}