/* Reading surface: four views, compact records, and scroll-driven scenes. */
:root {
  --color-midnight-base: #0b111a;
  --color-midnight-surface: #111a25;
  --color-midnight-elevated: #192534;
  --color-circuit-gold: #dcc58a;
  --color-cyber-cyan: #8ed4ce;
  --color-text-secondary: #c1cbd7;
  --color-text-muted: #9faec0;
  --glass-bg: #111a25;
  --glass-border: rgba(202, 218, 235, .1);
  --header-height: 76px;
  --max-content-width: 1160px;
  --view-navigation-height: 72px;
  --scene-height: min(62svh, 560px);
}
html { scroll-padding-top: calc(var(--header-height) + var(--view-navigation-height) + 20px); }
body { background: var(--color-midnight-base); }
a { text-underline-offset: .22em; }
p { max-width: 72ch; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-cyber-cyan); outline-offset: 5px; }
.site-header { background: #0b111af5; backdrop-filter: blur(12px); }
.site-header .container { gap: 24px; min-width: 0; }
.brand-wrapper { min-width: 0; flex-shrink: 1; gap: 12px; }
.brand-identity { min-width: 0; }
.brand-title { font-size: 1rem; letter-spacing: 0; white-space: nowrap; }
.brand-subtitle { color: var(--color-text-muted); font-size: .75rem; letter-spacing: .025em; text-transform: none; }
.brand-logo-img { flex: 0 0 auto; border-color: #dcc58a55; box-shadow: none; }
.site-nav { gap: 20px; }
.nav-links-list { gap: 8px; }
.nav-link { font-size: .875rem; padding: 12px 8px; white-space: nowrap; }
.header-contact { color: var(--color-text-primary); font-size: .875rem; white-space: nowrap; padding: 12px 0; }
.nav-toggle-btn { width: 44px; height: 44px; flex: 0 0 auto; border: 0; }
section.portfolio-section { padding-block: 40px 52px; scroll-margin-top: 0; }
section.hero-section { padding-block: 64px 56px; }
.hero-grid { grid-template-columns: minmax(0, 1fr) 220px; gap: 64px; text-align: left; }
.eyebrow { font-size: .8125rem; letter-spacing: .09em; text-transform: uppercase; color: var(--color-circuit-gold); margin-bottom: 16px; }
.hero-headline { font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: 1.07; letter-spacing: -.045em; margin-bottom: 20px; }
.name-stop { color: var(--color-circuit-gold); }
.hero-subhead { font-size: 1.375rem; font-weight: 500; line-height: 1.45; color: var(--color-text-primary); margin-bottom: 16px; }
.hero-description { font-size: 1rem; color: var(--color-text-secondary); max-width: 62ch; margin-bottom: 26px; }
.hero-cta-group { gap: 12px 20px; justify-content: flex-start; align-items: center; margin-bottom: 20px; }
.btn-primary-cyan, .btn-secondary-outline, .quiet-button { min-height: 46px; padding: 11px 18px; border-radius: 7px; font-size: .9375rem; font-weight: 600; box-shadow: none; }
.btn-primary-cyan { background: var(--color-cyber-cyan); color: #0b111a; border: 1px solid var(--color-cyber-cyan); }
.btn-secondary-outline { color: var(--color-text-primary); border-color: #c1cbd73b; }
.btn-primary-cyan:hover, .btn-secondary-outline:hover { box-shadow: none; transform: none; }
.quiet-link { color: var(--color-text-secondary); font-size: .875rem; padding-block: 12px; text-decoration: underline; }
.hero-location { color: var(--color-text-muted); font-size: .8125rem; margin: 0; }
.hero-visual-card { width: 220px; text-align: center; opacity: .92; }
.hero-crest-img { display: block; width: 100%; border-radius: 14px; border: 1px solid #dcc58a24; box-shadow: none; }
.hero-visual-card p { font-size: .8125rem; color: var(--color-text-muted); margin: 14px 0 0; letter-spacing: .035em; }
.view-navigation { position: sticky; top: var(--header-height); z-index: 100; background: #0b111af5; border-block: 1px solid var(--glass-border); backdrop-filter: blur(12px); }
.view-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-block: 12px; }
.view-tab { min-height: 46px; background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: .9375rem; font-weight: 500; }
.view-tab[aria-selected="true"] { background: var(--color-midnight-elevated); color: var(--color-text-primary); border-color: #c1cbd726; }
.view-tab:hover { color: var(--color-text-primary); }
.portfolio-view { outline: none; }
.section-header { font-size: clamp(1.65rem, 2.8vw, 2.25rem); letter-spacing: -.025em; border: 0; padding: 0; margin-bottom: 12px; color: var(--color-text-primary); }
.section-header::after { display: none; }
.section-intro { font-size: 1rem; color: var(--color-text-muted); margin-bottom: 28px; }
.portfolio-view h3 { margin-block: 28px 16px; font-size: 1.0625rem; font-weight: 600; color: var(--color-text-primary); }
.showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 28px; }
.showcase-card { min-width: 0; background: var(--color-midnight-surface); border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; box-shadow: none; }
.showcase-card:hover { transform: none; box-shadow: none; border-color: #c1cbd72e; }
.showcase-card h3 { margin: 0 0 8px; font-size: 1.25rem; letter-spacing: -.01em; }
.showcase-card-content, .showcase-content { padding: 24px; }
.showcase-card-content p, .showcase-content p { font-size: .9375rem; margin-bottom: 14px; }
.showcase-card-content > p:first-of-type, .showcase-content > p:first-of-type { font-size: .8125rem; color: var(--color-circuit-gold); }
.showcase-tech-stack, .tech-stack-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tech-badge { border: 0; background: #192534; color: var(--color-text-secondary); font-size: .75rem; padding: 3px 8px; }
.project-technology > summary { min-height: 40px; padding: 6px 0; font-size: .8125rem; color: var(--color-text-muted); }
.project-technology { margin-bottom: 12px; }
.showcase-tech-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-tag-pill { border: 0; background: #192534; color: var(--color-text-secondary); font-size: .75rem; padding: 3px 8px; }
.video-player-container { aspect-ratio: 16 / 9; background: #080d14; min-height: 0; }
.video-player-container video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-action-bar { display: none; }
.media-trigger { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #080d14; color: white; cursor: pointer; overflow: hidden; font: inherit; }
.media-trigger img, .media-trigger video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-trigger:focus-visible { outline-offset: -4px; }
.preview-cue { position: absolute; left: 16px; bottom: 14px; background: #0b111ae8; border: 1px solid #e1e9f044; border-radius: 6px; padding: 8px 12px; font-size: .8125rem; font-weight: 600; }
.btn-demo-link { color: var(--color-cyber-cyan); border: 0; background: transparent; padding: 10px 0; font-size: .875rem; text-decoration: underline; min-height: 44px; }
.btn-demo-link:hover { box-shadow: none; transform: none; }
.disclosure, .credential-record, .timeline-entry { border-block-end: 1px solid var(--glass-border); margin-bottom: 0; border-radius: 0; min-width: 0; }
details > summary { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px 16px; list-style: none; min-height: 60px; padding: 18px 4px; cursor: pointer; font-size: 1rem; color: var(--color-text-primary); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; margin-left: auto; color: var(--color-cyber-cyan); font-size: 1.3rem; line-height: 1; flex: 0 0 20px; text-align: center; }
details[open] > summary::after { content: "−"; }
details[open] > summary { color: var(--color-cyber-cyan); }
.summary-meta { font-size: .8125rem; color: var(--color-text-muted); }
.disclosure-body { padding: 4px 4px 24px; }
.disclosure-body p { font-size: 1rem; color: var(--color-text-secondary); }
.disclosure-body a { text-decoration: underline; overflow-wrap: anywhere; }
.disclosure-body .container { width: 100%; padding-inline: 0; }
.disclosure-body section.portfolio-section { padding-block: 12px 8px; }
.disclosure-body .section-header { font-size: 1.35rem; }
.disclosure-body .section-intro { font-size: .9375rem; }
.disclosure-body > .glass-card, .disclosure-body .star-card { border: 0; background: transparent; padding: 0; margin: 0; box-shadow: none; }
.project-directory, .certificate-list { list-style: none; padding: 0; margin: 0; }
.directory-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 32px; padding: 20px 0; border-bottom: 1px solid var(--glass-border); }
.directory-item a { font-size: 1rem; font-weight: 500; color: var(--color-text-primary); }
.directory-meta { display: block; font-size: .8125rem; color: var(--color-text-muted); margin-top: 5px; }
.directory-item p { font-size: .9375rem; color: var(--color-text-secondary); margin: 0; }
.timeline-container { padding: 0; margin-bottom: 36px; }
.timeline-container::before { display: none; }
.timeline-entry > summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 20px; }
.record-title { display: block; font-weight: 500; }
.record-meta { display: block; font-size: .8125rem; color: var(--color-text-muted); margin-top: 5px; }
.timeline-entry > summary .record-title, .timeline-entry > summary .record-meta { grid-column: 1; }
.timeline-entry > summary::after { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.timeline-achievements { color: var(--color-text-secondary); padding-left: 24px; list-style: disc; }
.timeline-achievements li { font-size: 1rem; margin-bottom: 8px; }
.timeline-achievements li::before { display: none; }
.filter-chips-container { overflow-x: auto; overflow-y: hidden; gap: 8px; margin-bottom: 16px; max-width: 100%; padding-bottom: 6px; }
.filter-chip { min-height: 44px; border: 0; background: #192534; color: var(--color-text-secondary); font-size: .875rem; padding: 10px 16px; }
.filter-chip.active { background: var(--color-cyber-cyan); color: #0b111a; box-shadow: none; }
.skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.skill-item-pill { border: 0; border-bottom: 1px solid var(--glass-border); border-radius: 0; background: transparent; padding: 12px 0; font-size: .9375rem; gap: 12px; min-width: 0; box-shadow: none; }
.skill-item-pill::before { display: none; }
.skill-item-pill > span:first-child { overflow-wrap: anywhere; }
.skill-category-badge { font-size: .75rem; color: var(--color-text-muted); background: transparent; border: 0; white-space: normal; flex-shrink: 0; max-width: 76px; }
.certificate-list { columns: 2; column-gap: 40px; }
.certificate-item { break-inside: avoid; padding-block: 9px; font-size: .9375rem; }
.accordion-content { display: block; padding: 0; }
.mce-featured-card { box-shadow: none; border: 1px solid var(--glass-border); background: var(--color-midnight-surface); padding: 24px; margin: 0 0 12px; }
.mce-card-layout { gap: 24px; align-items: center; }
.mce-badge-img { width: 96px; height: 96px; }
.mce-details h3 { margin: 0 0 10px; font-size: 1.125rem; }
.mce-details p { font-size: .875rem; margin-bottom: 10px; }
.mce-details a { font-size: .875rem; text-decoration: underline; }
.evidence-media { max-width: 640px; margin-block: 16px; }
.evidence-media img { object-fit: contain; }
.pd-image-link { display: block; max-width: 640px; margin-block: 16px; }
.pd-card-img { border-radius: 8px; }
.scene-gallery { padding-top: 24px; }
.quiet-button { border: 1px solid #c1cbd73b; background: transparent; color: var(--color-text-primary); cursor: pointer; margin-right: 8px; }
.scroll-scene { margin: 0; padding: 0; }
.welcome-scene { --scene-height: calc(100svh - var(--header-height)); --scene-travel: 110svh; }
.sticky-canvas-wrapper { height: calc(var(--scene-height) + var(--scene-travel, 90svh)); position: relative; }
.sticky-canvas-inner { position: sticky; top: calc(var(--header-height) + var(--view-navigation-height)); height: var(--scene-height); margin: 0; overflow: hidden; background: #080d14; pointer-events: auto; }
.welcome-scene .sticky-canvas-inner { top: var(--header-height); }
.scene-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sticky-canvas-inner canvas { position: relative; display: block; width: 100%; height: 100%; }
.welcome-scene canvas:not([data-frame]) { opacity: 0; }
.scene-caption { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; padding: 20px 32px; background: linear-gradient(transparent, #0b111add); color: #f8fafc; font-size: .8125rem; pointer-events: none; }
.scene-end { height: 0; }
.scroll-scene.is-reduced-motion .sticky-canvas-wrapper { height: var(--scene-height); }
.scroll-scene.is-reduced-motion .sticky-canvas-inner { position: relative; top: auto; }
dialog.video-dialog-modal { border-color: #c1cbd740; width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); max-width: none; border-radius: 12px; }
.modal-header { padding: 12px 16px; gap: 12px; }
.modal-title { color: var(--color-text-primary); font-size: 1rem; padding-right: 0; margin: 0; }
#btn-modal-close { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; width: 48px; height: 48px; border-radius: 8px; font-size: 1.75rem; background: #192534; color: white; border: 1px solid #c1cbd73b; }
.modal-body { padding: 0 16px 16px; }
.modal-video-wrapper { aspect-ratio: auto; max-height: calc(100dvh - 130px); display: flex; align-items: center; justify-content: center; }
#modal-video-element { width: 100%; max-height: calc(100dvh - 130px); }
.footer-simple { display: flex; justify-content: space-between; gap: 24px; padding-block: 28px; border-top: 1px solid var(--glass-border); font-size: .875rem; color: var(--color-text-muted); }
.footer-simple div { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.footer-simple a { text-decoration: underline; }
.site-footer { background: transparent; padding: 0; border: 0; }
.animate-on-scroll { opacity: 1; transform: none; transition: none; }
.circuit-corner, .nav-cues, .mobile-swipe-cues { display: none !important; }
.presenter-drawer { max-width: calc(100vw - 24px); }
.presenter-drawer[inert] { visibility: hidden; }
@media (max-width: 1050px) {
  .nav-toggle-btn { display: inline-flex; align-items: center; justify-content: center; }
  .site-header .container { position: relative; }
  .site-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; width: 100%; padding: 20px; background: #111a25; border: 1px solid var(--glass-border); flex-direction: column; align-items: stretch; box-shadow: 0 16px 28px #0005; }
  .site-nav.open { display: flex; }
  .nav-links-list { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-link { display: block; padding: 12px; }
  .nav-actions { display: block; padding: 0 12px; }
}
@media (max-width: 700px) {
  :root { --header-height: 68px; --view-navigation-height: 112px; --scene-height: min(46svh, 360px); }
  .container { padding-inline: 20px; }
  .site-header .container { gap: 12px; }
  .brand-logo-img { width: 36px; height: 36px; }
  .brand-title { font-size: .9375rem; }
  .brand-subtitle { font-size: .75rem; }
  section.hero-section { padding-block: 36px 32px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; text-align: left; }
  .hero-headline { font-size: clamp(2.5rem, 9vw, 3.5rem); margin-bottom: 18px; }
  .hero-subhead { font-size: 1.1875rem; }
  .hero-visual-card { display: none; }
  .eyebrow { font-size: .75rem; }
  .hero-cta-group { justify-content: flex-start; gap: 10px 16px; }
  .hero-location { max-width: 36ch; line-height: 1.6; }
  .view-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; padding-block: 8px; }
  .view-tab { min-height: 46px; font-size: .875rem; }
  section.portfolio-section { padding-block: 28px 36px; }
  section.hero-section { padding-block: 36px 32px; }
  .showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .showcase-card-content, .showcase-content { padding: 20px; }
  .skills-grid { grid-template-columns: minmax(0, 1fr); }
  .skill-item-pill { justify-content: space-between; }
  .directory-item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .certificate-list { columns: 1; }
  .mce-card-layout { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .mce-badge-img { width: 72px; height: 72px; }
  .welcome-scene { --scene-height: min(calc(100svh - var(--header-height)), 160vw); --scene-travel: 100svh; }
  .scene-caption { flex-direction: column; gap: 4px; padding: 16px 20px; }
  .footer-simple { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  .portfolio-view[hidden] { display: block !important; }
  .view-navigation, .welcome-scene, .scene-gallery, .hero-visual-card, .header-contact, .preview-cue, .quiet-button { display: none !important; }
  details::details-content { content-visibility: visible !important; }
  details > .disclosure-body { display: block !important; }
  details > summary::after { display: none; }
  .certificate-list { columns: 1; }
  .timeline-container, .showcase-grid { display: block; }
  .timeline-entry, .credential-record, .disclosure { break-inside: auto; }
}

/* 2026-10-10 mobile fix (Portfolio Bot): on phones the welcome scrub scene pinned a logo-only
   canvas for ~1.8 screens (hero <h1> started 1,549 px down on a 393x852 iPhone 15 viewport), so
   the page looked empty. On <=700px screens: a shorter pinned scene, and the whole MQ frame sequence
   now plays over ~500px of scroll (about one swipe) instead of 100svh (852px) plus the taller scene.
   canvas-scrub.js maps progress = scrolled / --scene-travel, so this one variable sets the distance.
   Desktop is untouched. Reduced motion is unchanged (no travel, first frame only). */
@media (max-width: 700px) {
  .welcome-scene { --scene-height: min(48svh, 400px); --scene-travel: min(500px, 75svh); }
  .welcome-scene .scene-caption span:last-child { display: none; }
}
@supports not (height: 100svh) {
  .welcome-scene { --scene-height: calc(100vh - var(--header-height)); --scene-travel: 100vh; }
  @media (max-width: 700px) { .welcome-scene { --scene-height: 48vh; --scene-travel: min(500px, 75vh); } }
}

/* 2026-10-10 welcome mark (Portfolio Bot): the intro's "Welcome" caption gets gold-to-cyan gradient
   text, wide tracking, a soft gold glow, a frosted glass pill and an accent underline. It fades in, tied to
   scroll: canvas-scrub.js sets --welcome-p from 0 to 1 between the top of the page and the moment the
   hero name is fully on screen, so both finish together. The caption is absolutely positioned
   over the scene, so nothing in the page layout moves. Without JS, --welcome-p is unset and the mark
   is fully visible. */
.welcome-scene .scene-caption { align-items: flex-end; }
.welcome-mark {
  --p: var(--welcome-p, 1);
  position: relative; display: inline-block; padding: 7px 16px 9px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--color-circuit-gold);
  background: linear-gradient(100deg, #f1e2b3 0%, var(--color-circuit-gold) 38%, var(--color-cyber-cyan) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  opacity: var(--p);
  transform: translate3d(0, calc((1 - var(--p)) * 10px), 0);
  will-change: opacity, transform;
}
.welcome-mark::before { /* frosted glass pill behind the text */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: rgba(17, 26, 37, .38); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 18px rgba(220, 197, 138, .14), 0 6px 18px rgba(0, 0, 0, .25);
}
.welcome-mark::after { /* soft accent underline that draws in with the fade */
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--color-circuit-gold) 20%, var(--color-cyber-cyan) 80%, transparent);
  transform: scaleX(var(--p)); transform-origin: left center; opacity: .85;
}
.welcome-scene .scene-caption { isolation: isolate; }
@media (max-width: 700px) { .welcome-mark { font-size: .75rem; letter-spacing: .22em; padding: 6px 14px 8px; } }
@media (prefers-reduced-motion: reduce) {
  .welcome-mark { opacity: 1 !important; transform: none !important; }
  .welcome-mark::after { transform: none !important; }
}

/* 2026-10-10 title buttons (Portfolio Bot): the .welcome-mark design language applied to the
   portfolio view tabs (.view-tab) and the hero title links (.quiet-link): gold-to-cyan gradient text,
   wider tracking, frosted glass with a faint gold glow, and a soft gold-to-cyan underline that draws
   in. The active tab gets the full pill, glow and underline; inactive tabs get the gradient text and
   subtler glass. Box sizes are unchanged (min-height 46px, same padding and border), so nothing shifts.
   Text contrast is >= 8.9:1 on every gradient stop (WCAG AA/AAA). The fade-in is armed by
   canvas-scrub.js only when JS runs and motion is allowed; otherwise everything is fully visible. */
.view-tabs { isolation: isolate; }
.view-tab {
  position: relative; overflow: visible;
  font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-secondary);
  background: rgba(17, 26, 37, .5); border-color: rgba(202, 218, 235, .07);
  -webkit-backdrop-filter: blur(8px) saturate(130%); backdrop-filter: blur(8px) saturate(130%);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tab-label {
  display: inline-block;
  background: linear-gradient(100deg, #e3d6ae 0%, #cdb97f 40%, #86c4bf 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.view-tab::after { /* soft accent underline */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 7px; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--color-circuit-gold) 20%, var(--color-cyber-cyan) 80%, transparent);
  transform: scaleX(0); transform-origin: left center; opacity: .85;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
}
.view-tab[aria-selected="true"] {
  background: rgba(28, 42, 59, .88); border-color: rgba(220, 197, 138, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 18px rgba(220, 197, 138, .14), 0 6px 18px rgba(0, 0, 0, .25);
}
.view-tab[aria-selected="true"] .tab-label { background-image: linear-gradient(100deg, #f1e2b3 0%, var(--color-circuit-gold) 38%, var(--color-cyber-cyan) 100%); }
.view-tab[aria-selected="true"]::after { transform: scaleX(1); }
.view-tab:hover { background: rgba(25, 37, 52, .7); border-color: rgba(220, 197, 138, .14); }
.view-tab:hover .tab-label { background-image: linear-gradient(100deg, #f1e2b3 0%, var(--color-circuit-gold) 38%, var(--color-cyber-cyan) 100%); }
.view-tab:not([aria-selected="true"]):hover::after { transform: scaleX(.6); opacity: .6; }
.view-tab:focus-visible { outline: 2px solid var(--color-cyber-cyan); outline-offset: 3px; }

.quiet-link {
  position: relative; text-decoration: none; letter-spacing: .02em;
  background: linear-gradient(100deg, #e8dcb5 0%, #d6c48f 40%, var(--color-cyber-cyan) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.quiet-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, var(--color-circuit-gold), var(--color-cyber-cyan));
  transform: scaleX(1); transform-origin: left center; opacity: .6;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .25s ease, height .2s ease;
}
.quiet-link:hover::after, .quiet-link:focus-visible::after { opacity: 1; height: 2px; }
.quiet-link:focus-visible { outline: 2px solid var(--color-cyber-cyan); outline-offset: 2px; border-radius: 4px; }

/* Reveal fade-in (armed by JS). Delay applies to opacity/transform only, so hover stays instant. */
.fx-armed .fx-item { opacity: 0; transform: translate3d(0, 8px, 0); }
.fx-armed .fx-item::after { transform: scaleX(0); }
.fx-armed .fx-item {
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1) var(--fx-delay, 0ms), transform .6s cubic-bezier(.16, 1, .3, 1) var(--fx-delay, 0ms),
    background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.fx-armed .fx-item::after { transition: transform .5s cubic-bezier(.16, 1, .3, 1) calc(var(--fx-delay, 0ms) + 120ms), opacity .25s ease, height .2s ease; }
.fx-armed.fx-in .fx-item { opacity: 1; transform: none; }
.fx-armed.fx-in .view-tab[aria-selected="true"]::after, .fx-armed.fx-in .quiet-link::after { transform: scaleX(1); }
.fx-armed.fx-in .view-tab:not([aria-selected="true"]):hover::after { transform: scaleX(.6); }
.fx-done .fx-item, .fx-done .fx-item::after { transition-delay: 0ms !important; }
@media (max-width: 700px) {
  .view-tab { font-size: .8125rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  .view-tab, .view-tab::after, .quiet-link::after, .fx-armed .fx-item, .fx-armed .fx-item::after { transition: none !important; }
  .fx-armed .fx-item { opacity: 1 !important; transform: none !important; }
}