/* Release 10: progressive imagery, accessible controls, responsive scenes. */
:root { color-scheme: dark; }
.skip-link { position: fixed; top: 10px; left: 12px; z-index: 10000; padding: 12px 18px; background: #fff; color: #071338; font-weight: 700; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid #65e4ff; outline-offset: 5px; }
#content:focus { outline: none; }
.page-body { padding-bottom: 90px; }
.page-header { gap: 18px; flex-wrap: wrap; }
.scene-background { background-image: none; }
.scene-background picture, .scene-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scene-image { object-fit: cover; object-position: var(--scene-position, center); }
.scene-background::before { z-index: 1; }
.scene-background::after { z-index: 1; background: linear-gradient(90deg,rgba(0,5,28,.36),rgba(0,8,38,.12) 65%,rgba(0,5,28,.16)),linear-gradient(180deg,rgba(0,5,28,.08),rgba(0,5,28,.3)); box-shadow: inset 0 0 100px rgba(0,0,20,.35); }
.scene-experience::before { background: linear-gradient(105deg,transparent 24%,rgba(70,210,255,.25) 42%,transparent 58%); animation-duration: 8s; }
.scene-projects::before { background: linear-gradient(180deg,transparent 30%,rgba(45,197,255,.22) 48%,transparent 65%); animation: dataSweep 12s ease-in-out infinite; }
.scene-insights::before { background: radial-gradient(ellipse at 80% 65%,rgba(30,145,255,.32),transparent 48%); animation: archiveGlow 10s ease-in-out infinite alternate; }
.scene-contact::before { background: repeating-linear-gradient(178deg,transparent 0 20px,rgba(92,217,255,.08) 22px 24px); clip-path: polygon(0 52%,100% 52%,100% 100%,0 100%); animation: waterGlow 9s ease-in-out infinite alternate; }
@keyframes dataSweep { 0%,100% { opacity:.25; transform:translateY(-28%); } 50% { opacity:.7; transform:translateY(30%); } }
@keyframes archiveGlow { from { opacity:.25; } to { opacity:.8; } }
@keyframes waterGlow { from { opacity:.25; transform:translateY(-5px); } to { opacity:.8; transform:translateY(8px); } }
#expWrap .page-body { max-width:1100px !important; padding:32px 40px 90px !important; background:transparent; }
.experience-page .list-row { background:rgba(2,12,43,.85); margin-top:10px; border:1px solid rgba(74,198,255,.3); padding:20px; }
.experience-page .exp-detail { background:rgba(2,10,35,.88); padding:24px; }
.experience-page .exp-item { padding:16px 0; }
.projects-intro-copy, .contact-intro { padding:18px 20px; background:rgba(2,11,40,.8); border-left:2px solid #38d1ff; }
.projects-page .quest-card, .projects-page .quest-card--latest, .insights-page .blog-card { background:rgba(2,11,40,.88); }
.insights-page .blog-hero { background:rgba(2,11,40,.87); }
.insights-page .article-body { background:rgba(2,11,40,.91); padding:24px; border:1px solid rgba(64,199,255,.2); }
.contact-page .contact-card { background:rgba(2,11,40,.87); }
.contact-card-body { min-width:0; }
.contact-card-value { overflow-wrap:anywhere; word-break:normal; }
.case-study { margin-top:18px; display:grid; gap:18px; }
.case-study div { padding-top:14px; border-top:1px solid rgba(99,183,242,.22); }
.case-study dt { color:#54dcff; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:6px; }
.case-study dd { color:#d7e8fa; font-size:17px; line-height:1.65; }
.quest-card--latest .case-study { grid-template-columns:repeat(3,minmax(0,1fr)); }
.quest-card-footer { gap:12px; flex-wrap:wrap; }
.quest-tags, .blog-tags { gap:8px; }
.quest-tag, .blog-tag { font-size:12px; letter-spacing:1px; }
.quest-card-status, .quest-card-org, .projects-range, .confidential-note, .blog-card-meta, .blog-card-cat, .blog-card-date { font-size:12px; }
.quest-impact, .section-label, .read-more-btn, .contact-card-label, .list-row-sub { font-size:14px; }
.blog-card-excerpt, .quest-desc { font-size:16px; }
.blog-card-img { opacity:1; }
.blog-card-img img { opacity:.95; }
.menu-preview { position:absolute; inset:0; z-index:-2; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .3s ease; mask-image:linear-gradient(90deg,transparent 28%,#000 58%); }
.menu-preview img { width:100%;height:100%;object-fit:cover; filter:brightness(.66) saturate(1.08); }
.menu-preview.is-visible { opacity:.83; }
.menu-item:focus-visible { outline:2px solid #9defff; outline-offset:1px; }
.site-setting-btn { min-height:44px; }
.modal-open { overflow:hidden; }
.modal-open .site-controls { visibility:hidden; }
.persona-modal { max-height:90vh; overflow:auto; }
.persona-close { position:sticky; float:right; top:8px; right:8px; margin:8px; width:44px;height:44px; }
.persona-modal img { max-height:80vh;object-fit:contain; }
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state:paused !important; }
html[data-motion="reduced"] #p3-overlay { display:none; }
html[data-motion="reduced"] .scene-background, html[data-motion="reduced"] .menu-preview { animation:none;transition:none;transform:none; }
@media (prefers-reduced-motion:reduce) {
  html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; }
}
@media (max-width:900px) {
  .quest-card--latest .case-study { grid-template-columns:1fr; }
  #expWrap .page-body { padding:24px 20px 90px !important; }
}
@media (max-width:768px) {
  .scene-background { inset:-2%; }
  .scene-image { object-position:center; }
  .page-body { padding-bottom:90px; }
  .page-header { gap:12px; }
  .page-title { letter-spacing:2px; }
  .experience-page .exp-detail { padding:18px 14px; }
  .xp-header { gap:10px;flex-wrap:wrap; }
  .xp-level,.xp-name { font-size:14px; }
  .contact-card { padding:18px 16px;gap:12px; }
  .contact-card-value { font-size:16px; }
  .insights-page .article-body { padding:18px 14px; }
  .article-paragraph,.article-list li,.blog-card-excerpt { font-size:16px; }
  .menu-preview { inset:0 0 auto;height:58vh;z-index:-1;mask-image:linear-gradient(0deg,transparent,#000 40%); }
  .menu-preview.is-visible { opacity:.48; }
  .home-page .menu-side { padding-bottom:90px; }
  .site-setting-btn { min-height:44px;font-size:13px; }
}
@media (min-width:769px) and (max-height:650px) {
  .home-page { overflow:auto;height:auto; }
  .home-page #mainScreen { position:relative;min-height:650px; }
}
@media (max-width:420px) {
  .quest-card { padding:20px 16px; }
  .persona-btn { padding:14px;gap:8px; }
  .persona-btn-text { letter-spacing:1px; }
}