/* Shared styles extracted from index.html */
/* Variables and themes */
:root {
  --bg: #1a1a1a;
  --text: #eaf6ff;
  --header-bg: #111418;
  --header-text: #eaf6ff;
  --muted: #bfcbd6;
  --surface: #0f1a23;
  --about-surface: #13242d;
  --accent: #4483bc;
  --button-bg: rgba(255,255,255,0.03);
  --button-border: rgba(255,255,255,0.06);
  --item-bg: rgba(255,255,255,0.03);
}

.dark-theme {
  --bg: #0b1116;
  --text: #e6eef6;
  --header-bg: #071823;
  --header-text: #eaf6ff;
  --muted: #9fb4c9;
  --surface: #0f1a23;
  --accent: #6fb3ff;
  --button-bg: rgba(255,255,255,0.03);
  --button-border: rgba(255,255,255,0.06);
  --item-bg: rgba(255,255,255,0.05);
}

* { margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
body { background:var(--bg); color:var(--text); line-height:1.6; }

header { background:var(--header-bg); color:var(--header-text); padding:2rem 0; text-align:center; }
header h1 { margin-bottom:0.5rem; font-size:2.5rem; font-family:'Manrope', Arial, sans-serif; font-weight:800; letter-spacing:-0.02em; }
header p { font-size:1.2rem; color:var(--muted); }

.container { max-width:1000px; margin:6rem auto; padding:0 1rem; }
.projects { display:flex; flex-direction:column; align-items:center; gap:2.5rem; padding-top:2.5rem; border-top:1px solid rgba(0,0,0,0.06); margin-top:3rem; }
.project, .card { background:var(--surface); border-radius:12px; padding:1.5rem; box-shadow:0 10px 30px rgba(14,30,37,0.06); }
/* Make individual project cards match the visual width of the About Me card */
.project { width:100%; max-width:760px; }
.project h3 { margin-bottom:0.5rem; }
.project p { color:#c8d7e3; }
/* Project details expanded area */
.project-details { overflow:hidden; max-height:0; transition: max-height 360ms cubic-bezier(.2,.9,.25,1), opacity 260ms ease; opacity:0; }
.project-details[aria-hidden="false"] { opacity:1; }
.details-inner { display:flex; gap:1rem; align-items:flex-start; padding-top:1rem; }
.placeholder-box { width:220px; height:auto; border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border:1px dashed rgba(255,255,255,0.06); display:block; overflow:hidden; color:var(--muted); font-weight:700; }
.project-img { width:100%; height:auto; object-fit:cover; border-radius:7px; display:block; }
.placeholder-text { flex:1; }
.project .view-details { background:transparent; border:1px solid var(--button-border); color:var(--accent); padding:0.4rem 0.75rem; border-radius:8px; cursor:pointer; font-weight:700; }
.project .view-details:focus { outline:2px solid rgba(68,131,188,0.9); outline-offset:3px; }

@media (max-width:600px) {
  .details-inner { flex-direction:column; }
  .placeholder-box { width:100%; height:auto; }
}
footer { text-align:center; margin:3rem 0; color:#888; font-size:0.9rem; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Headline per-letter animation */
.headline { display:inline-block; line-height:1; }
.headline .char { display:inline-block; transform:translateY(0); will-change:transform,opacity; cursor:default; }
.headline .char.rise { animation: letterRise 260ms cubic-bezier(.2,.9,.25,1) forwards; }
.headline .char.drop { animation: letterDrop 700ms cubic-bezier(.22,.9,.3,1) forwards; }
@keyframes letterRise { 0%{transform:translateY(0);} 100%{transform:translateY(-18px);} }
@keyframes letterDrop { 0%{transform:translateY(-18px);} 60%{transform:translateY(8px);} 100%{transform:translateY(0);} }

.top-left-menu { position:absolute; top:12px; left:92px; z-index:1100; font-family:inherit; }
.menu-button { min-width:240px; background:var(--button-bg); color:var(--header-text); border:1px solid var(--button-border); padding:0.6rem 0.9rem; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:0.6rem; justify-content:center; font-weight:600; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); box-shadow:0 6px 18px rgba(0,0,0,0.18); }
.menu-button:focus { outline:2px solid rgba(0,122,255,0.9); outline-offset:3px; }

.dropdown { position:absolute; top:calc(100% + 0.6rem); left:0; width:100%; min-width:240px; padding:0; background:transparent; border:none; display:block; visibility:hidden; opacity:0; pointer-events:none; z-index:1010; transition:opacity 200ms ease, visibility 200ms linear; }
.dropdown.show { visibility:visible; opacity:1; pointer-events:auto; }
.dropdown .dropdown-item { display:block; width:100%; box-sizing:border-box; padding:0.6rem 0.9rem; margin:0.35rem 0; border-radius:10px; border:1px solid var(--button-border); background:var(--item-bg); color:var(--text); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); text-decoration:none; text-align:left; font-size:0.97rem; cursor:pointer; opacity:0; transform:translateY(-18px); animation:none; box-shadow:0 8px 22px rgba(0,0,0,0.06); }
.dropdown .dropdown-item:hover { background:#f5f7fb; }

@keyframes slideDown { 0%{opacity:0;transform:translateY(-18px);} 60%{transform:translateY(8px);} 100%{opacity:1;transform:translateY(0);} }
@keyframes slideUp { 0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-14px);} }
.dropdown.show:not(.closing) .dropdown-item { animation: slideDown 520ms cubic-bezier(.22,.9,.3,1) forwards; }
.dropdown.closing .dropdown-item { animation: slideUp 420ms cubic-bezier(.22,.9,.3,1) forwards; }
.dropdown.show .dropdown-item:nth-child(1) { animation-delay: 0ms; }
.dropdown.show .dropdown-item:nth-child(2) { animation-delay: 60ms; }
.dropdown.show .dropdown-item:nth-child(3) { animation-delay: 120ms; }
.dropdown.show .dropdown-item:nth-child(4) { animation-delay: 180ms; }
.top-left-menu.closing .menu-button { box-shadow: 0 2px 6px rgba(0,0,0,0.06); }

/* Theme button */
.theme-button { background: linear-gradient(180deg,#ffefc2,#ffd58a); border:1px solid rgba(0,0,0,0.06); color:#6a3d00; font-weight:700; text-align:center; transition: transform 220ms cubic-bezier(.2,.9,.25,1), box-shadow 180ms ease; will-change:transform; }
.theme-button.pressed { transform:scale(0.92); transition: transform 160ms ease; box-shadow:0 2px 8px rgba(0,0,0,0.08) inset; }
@keyframes releaseExpand { 0%{transform:scale(0.92);} 60%{transform:scale(1.06);} 100%{transform:scale(1);} }
.theme-button.released { animation: releaseExpand 260ms cubic-bezier(.2,.9,.25,1) forwards; }
.theme-button.target-dark { background: linear-gradient(180deg,#111419,#1b2730); color:#eaf6ff; border:1px solid rgba(255,255,255,0.06); }
.theme-button.target-light { background: linear-gradient(180deg,#fff9ea,#fff1d0); color:#6a3d00; border:1px solid rgba(0,0,0,0.06); }

/* device toggle removed */

/* Cursor */
@media (pointer: fine) { body { cursor: none; } }
/* Hide the native pointer cursor on interactive elements too so it doesn't reappear (we use a custom cursor) */
@media (pointer: fine) {
  a, button, input, textarea, select, summary, [role="button"] { cursor: none !important; }
}
.custom-cursor { position: fixed; top:0; left:0; width:18px; height:18px; border-radius:50%; background:#00b4cc; pointer-events:none; transform:translate3d(-50%,-50%,0) scale(1); transition: opacity 160ms ease, background-color 160ms ease; z-index:99999; will-change: transform, opacity; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.custom-cursor.shrink { transform: translate3d(-50%, -50%, 0) scale(0.78); }
.custom-cursor.hidden { opacity:0; }

/* Theme reveal overlay */
.theme-reveal-overlay { position: fixed; inset:0; pointer-events:none; z-index:20000; will-change: clip-path, opacity; mix-blend-mode: normal; }

/* Landing hero */
html { scroll-behavior: smooth; }
.landing { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:6rem 0 8rem; text-align:center; min-height:100vh; background: #1a1a1a; color: #eaf6ff; }
.landing-inner { position:relative; z-index:2; max-width:1000px; padding:0 1rem; }
.landing-title { font-family:'Manrope', Arial, sans-serif; font-weight:800; font-size:2.25rem; margin-bottom:1rem; color: #f1f7fb; }
.landing-title .muted { display:block; font-weight:600; color:#bfcbd6; font-size:1.05rem; }
.landing-title .splash-name { color:#4483bc; }
.more-btn { display:inline-flex; align-items:center; gap:0.6rem; background:var(--accent); color:#fff; padding:0.6rem 0.9rem; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:0 8px 22px rgba(0,0,0,0.12); }
.more-btn svg { width:16px; height:16px; transition: transform 160ms ease; }
.more-btn:hover svg { transform: translateY(3px); }
/* subtle bounce for the arrow */
@keyframes arrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.more-btn svg { animation: arrowBounce 1600ms ease-in-out infinite; }

/* Dot canvas overlay for interactive splash background */
.bg-dot-canvas { position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }

/* Inner landing canvas (sits above landing background but below content) */
.dot-canvas-inner { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none; }

/* Ensure main content stacks above the background canvas */
/* Header keeps its high z-index; raise primary containers */
.landing-inner, .container, .about-me, .projects, .card, .project, footer { position:relative; z-index:1; }

/* Page slide transitions */
html.anim-exit-left { transform: translateX(-100%); transition: transform 420ms cubic-bezier(.2,.9,.25,1); }
html.anim-exit-right { transform: translateX(100%); transition: transform 420ms cubic-bezier(.2,.9,.25,1); }
html.anim-enter-from-right { transform: translateX(100%); }
html.anim-enter-from-left { transform: translateX(-100%); }
html.anim-enter-active { transition: transform 420ms cubic-bezier(.2,.9,.25,1); transform: translateX(0); }

/* Back button (used on about.html) */
.back-button { position:absolute; top:12px; left:12px; z-index:1200; background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--header-text); padding:0.4rem 0.6rem; border-radius:8px; cursor:pointer; font-weight:700; backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); }
.back-button:focus { outline:2px solid rgba(68,131,188,0.9); outline-offset:3px; }

/* Header reveal behavior */
header { position:fixed; left:0; top:0; width:100%; z-index:1500; transform:translateY(-120%); transition: background 240ms ease, box-shadow 240ms ease; background:transparent; }
/* When shown, bring header into view and use compact styling */
html.show-header header { transform: translateY(0); background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.45)); box-shadow: 0 6px 20px rgba(0,0,0,0.22); padding:0.6rem 0; }
/* compact header inner styles when revealed */
html.show-header header h1 { margin:0.4rem 0; font-size:1.1rem; }
/* ensure header content doesn't push layout when fixed */
.spacer-for-header { height:0; }

@media (max-width:520px) {
  .landing-title { font-size:1.6rem; }
}



/* About Me headshot */
.about-me { margin-top:5rem; margin-bottom:5rem; padding:2rem 0; }
.about-inner { display:flex; align-items:center; gap:1rem; }
.about-inner .headshot { width:25%; max-width:140px; height:auto; border-radius:8px; object-fit:cover; display:block; }
.about-text { flex:1; }
@media (max-width:520px) {
  .about-inner { flex-direction:column; align-items:flex-start; }
  .about-inner .headshot { width:40%; max-width:120px; }
}

/* When header is shown, we animate a spacer element so content is pushed smoothly */
.header-spacer { height: 0; transition: height 360ms cubic-bezier(.2,.9,.25,1); }
.header-spacer.is-active { height: 72px; }

/* Make About Me visually distinct: slightly lighter card */
.about-me { background: var(--about-surface); border-radius:12px; padding:2rem; box-shadow: 0 12px 36px rgba(2,6,12,0.5); }
.about-me .about-inner { background:transparent; padding:0; }

/* small helpers */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px; }

/* responsive tweaks */
@media (max-width:520px) { .menu-button { min-width:120px; } }

/* Center section headings */
.about-me > h2, .container > h2 { text-align:center; }

/* Ensure page background is consistent */
body { background:var(--bg); color:var(--text); }