/* Monochrome aesthetic layer. Loaded after the generated gray stylesheet (assets/theme-mono.css). */
:root {
  --ink: #f4f4f2;
  --ink-soft: #b9b9b6;
  --ink-mute: #7c7c79;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .22);
  --paper: #070707;
  --col-bg: #070707;
  --col-bg2: #0c0c0c;
  --col-blue: #f4f4f2;
  --col-blue-light: #ffffff;
  --col-teal: #d4d4d0;
  --col-pink: #a8a8a4;
  --col-white: #f4f4f2;
  --col-muted: #b9b9b6;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
html, body, #root { background-color: var(--paper) !important; }
::selection { background: var(--ink); color: #000; }
html { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Film grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 2147481000; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fx-grain 1.2s steps(6) infinite;
}
@keyframes fx-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* Silver shimmer headings (pattern repeats at 50% so the loop is seamless) */
.hero-h1-gradient, .grad-vi {
  background: linear-gradient(110deg, #ffffff 0%, #8d8d8a 22%, #ffffff 50%, #8d8d8a 72%, #ffffff 100%) 0 0 / 200% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent;
  animation: fx-sheen 7s linear infinite;
}
@keyframes fx-sheen { to { background-position: -200% 0; } }

/* Primary actions: solid paper-white, black ink */
.hero-btn-primary, .navbar-cta-btn, .contact-submit-btn, .about-action-primary, .portfolio-tab-btn.is-active, .project-live-link {
  background: var(--ink) !important; color: #050505 !important; border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 30px rgba(255, 255, 255, .08) !important;
}
.hero-btn-primary *, .navbar-cta-btn *, .contact-submit-btn *, .about-action-primary *, .portfolio-tab-btn.is-active *, .project-live-link * { color: inherit !important; stroke: currentColor; }
.hero-btn-primary:hover, .navbar-cta-btn:hover, .contact-submit-btn:hover:not(:disabled), .about-action-primary:hover, .project-live-link:hover {
  background: #fff !important; box-shadow: 0 0 0 1px #fff, 0 14px 44px rgba(255, 255, 255, .22) !important;
}
.hero-btn-secondary, .about-action-secondary { border-color: var(--line-strong) !important; color: var(--ink) !important; }
.hero-btn-secondary:hover, .about-action-secondary:hover { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .5) !important; }
.hero-status-dot { background: #fff !important; box-shadow: 0 0 10px #fff !important; }

/* Surfaces */
.experience-card, .experience-stat-card, .portfolio-skill-card, .contact-social-card, .contact-email-card, .contact-form-container, .contact-comments-panel, .spotify-card {
  border-color: var(--line) !important;
  transition: border-color .4s var(--ease-out), background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.experience-card { background: linear-gradient(135deg, rgba(22, 22, 22, .9), rgba(10, 10, 10, .85)) !important; }
.experience-card:hover, .experience-stat-card:hover, .portfolio-skill-card:hover, .contact-social-card:hover, .contact-email-card:hover {
  border-color: var(--line-strong) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .55) !important;
}
.portfolio-skill-logo, .portfolio-skill-card img { filter: grayscale(1) brightness(1.15); transition: filter .5s var(--ease-out), transform .5s var(--ease-out); }
.portfolio-skill-card:hover .portfolio-skill-logo, .portfolio-skill-card:hover img { filter: none; transform: scale(1.12) rotate(-4deg); }
.portfolio-card-thumbnail-image, .project-detail-preview img { filter: grayscale(.85) contrast(1.05); transition: filter .7s var(--ease-out), transform .9s var(--ease-out); }
.portfolio-project-card:hover .portfolio-card-thumbnail-image, .project-detail-preview:hover img { filter: none; transform: scale(1.05); }
.portfolio-cert-preview-image { transition: transform .8s var(--ease-out); }
.portfolio-cert-card:hover .portfolio-cert-preview-image { transform: scale(1.04); }

/* Education & experience logos */
.experience-personal-mark { background: linear-gradient(145deg, #1c1c1c, #0e0e0e) !important; border-color: var(--line-strong) !important; color: var(--ink) !important; }
.experience-logo.has-logo {
  width: 56px; height: 56px; flex: 0 0 56px; padding: 0; border-radius: 0; overflow: visible;
  background: none !important; border: 0 !important; box-shadow: none !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
  transition: transform .6s var(--ease-out), filter .6s var(--ease-out);
}
.experience-logo.has-logo img { width: 100%; height: 100%; object-fit: contain; }
.experience-card:hover .experience-logo.has-logo {
  transform: translateY(-2px) rotate(-6deg) scale(1.1);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(255, 255, 255, .14));
}
.experience-date { color: var(--ink-soft) !important; border-color: var(--line-strong) !important; background: rgba(255, 255, 255, .04) !important; }

/* Links: animated underline */
.footer-links-list a, .contact-social-sub, .spotify-open-link {
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .45s var(--ease-out), color .3s;
}
.footer-links-list a:hover, .contact-social-card:hover .contact-social-sub, .spotify-open-link:hover { background-size: 100% 1px; }

/* Icons breathe on hover */
.hero-social-icon-btn svg, .navbar-icon-btn svg, .contact-social-arrow, .footer-social-row svg { transition: transform .5s var(--ease-out); }
.hero-social-icon-btn:hover svg, .navbar-icon-btn:hover svg, .footer-social-row a:hover svg { transform: scale(1.18) rotate(-8deg); }
.contact-social-card:hover .contact-social-arrow { transform: translate(3px, -3px) rotate(0deg); }
.contact-social-logo { filter: grayscale(1) brightness(1.4); transition: filter .4s; }
.contact-social-card:hover .contact-social-logo { filter: none; }

/* Inputs */
.contact-input-wrap input, .contact-textarea-wrap textarea, .contact-form-field input, .contact-form-field textarea {
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.contact-input-wrap input:focus, .contact-textarea-wrap textarea:focus, .contact-form-field input:focus, .contact-form-field textarea:focus {
  border-color: rgba(255, 255, 255, .55) !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06) !important; outline: none;
}

/* Spotify embed stays colored but sits in a mono frame */
.spotify-player-frame { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-strong), 0 30px 60px rgba(0, 0, 0, .6); }

html[data-motion="reduced"] body::after, html[data-motion="reduced"] .hero-h1-gradient, html[data-motion="reduced"] .grad-vi { animation: none; }