/* Shared UI/UX enhancement layer for the portfolio. */
:root{
  --surface-glow: color-mix(in srgb, var(--accent) 10%, transparent);
}
html{scroll-behavior:smooth;}
body{line-height:1.55;}
body::before{
  content:"";
  position:fixed;
  inset:-18vh -12vw auto auto;
  width:42vw;
  height:42vw;
  border-radius:50%;
  background:radial-gradient(circle,var(--surface-glow),transparent 68%);
  filter:blur(18px);
  opacity:.7;
  pointer-events:none;
  z-index:-1;
}

/* Language control — deliberately reads as an interactive control, not a tiny badge. */
.portfolio-lang-wrap{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:4px 5px 4px 10px;
  border:1.5px solid color-mix(in srgb,var(--accent) 54%,var(--line));
  border-radius:999px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--card)),color-mix(in srgb,var(--card) 96%,transparent));
  box-shadow:0 7px 20px rgba(0,0,0,.07),0 0 0 1px color-mix(in srgb,var(--accent) 4%,transparent);
  font-family:"Work Sans",sans-serif;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.portfolio-lang-wrap:hover,
.portfolio-lang-wrap:focus-within{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--card));
  box-shadow:0 9px 24px rgba(0,0,0,.09),0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
  transform:translateY(-1px);
}
.portfolio-lang-icon{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:var(--accent-hover);
}
.portfolio-lang-icon svg{width:17px;height:17px;display:block;}
.portfolio-lang-flag{
  width:20px;
  min-width:20px;
  height:22px;
  display:grid;
  place-items:center;
  font-size:15px;
  line-height:1;
  filter:saturate(1.04);
  transform:translateY(-.25px);
}
.portfolio-lang-label{
  color:var(--ink-soft);
  font:700 10px/1 "Work Sans",sans-serif;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
}
.portfolio-lang-select{
  appearance:none;
  min-width:55px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background-color:var(--card);
  color:var(--ink);
  border-radius:999px;
  padding:8px 27px 8px 11px;
  font:800 11px/1 "Work Sans",sans-serif;
  letter-spacing:.08em;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent-hover) 50%),linear-gradient(135deg,var(--accent-hover) 50%,transparent 50%);
  background-position:calc(100% - 12px) 48%,calc(100% - 8px) 48%;
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.portfolio-lang-select:hover,.portfolio-lang-select:focus-visible{
  border-color:var(--accent);
  background-color:color-mix(in srgb,var(--accent) 7%,var(--card));
  box-shadow:none;
  transform:none;
}

/* Stronger visual affordance for interactive work */
#selected-work .case{
  border:1px solid var(--line) !important;
  border-radius:18px;
  padding:24px 22px !important;
  margin-top:14px !important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,transparent),color-mix(in srgb,var(--accent) 2.5%,var(--card)));
  position:relative;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
#selected-work .case::after{
  content:"↗";
  position:absolute;
  top:18px;
  right:18px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--ink-faint);
  font-family:"Work Sans",sans-serif;
  font-weight:700;
  transition:transform .22s ease,border-color .22s ease,color .22s ease,background .22s ease;
}
#selected-work .case:hover,#selected-work .case:focus-visible{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 56%,var(--line)) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.08),0 0 28px color-mix(in srgb,var(--accent) 10%,transparent);
  outline:none;
}
#selected-work .case:hover::after,#selected-work .case:focus-visible::after{
  transform:translate(2px,-2px);
  border-color:var(--accent);
  color:var(--on-accent);
  background:var(--accent);
}
#selected-work .case h3{padding-right:48px;}

/* More legible category/navigation chips */
.nav-btn{position:relative;overflow:hidden;isolation:isolate;}
.nav-btn::before{content:"";position:absolute;inset:auto 10px 5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease;opacity:.5;}
.nav-btn:hover::before,.nav-btn:focus-visible::before{transform:scaleX(1);}

/* Card depth across inner pages */
.game-block,.highlight,.game,.filter-card,.snap-card,.tool-category,.help-card,.cv-download-card{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease !important;
}
.game-block:hover,.highlight:hover,.game:hover,.filter-card:hover,.snap-card:hover,.tool-category:hover,.help-card:hover,.cv-download-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(0,0,0,.08),0 0 24px color-mix(in srgb,var(--accent) 10%,transparent);
}

/* Scroll-in motion added without hiding content if JS fails */
.ui-reveal{opacity:1;transform:none;}
.js-ui-motion .ui-reveal{opacity:0;transform:translateY(18px);transition:opacity .58s cubic-bezier(.16,.8,.3,1),transform .58s cubic-bezier(.16,.8,.3,1);}
.js-ui-motion .ui-reveal.ui-visible{opacity:1;transform:none;}

/* Homepage hero polish */
#hero .hero{border:1px solid color-mix(in srgb,var(--line) 88%,transparent);border-radius:26px;padding:34px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,transparent),color-mix(in srgb,var(--accent) 3%,var(--card)));box-shadow:0 24px 70px rgba(0,0,0,.05);}
.hero-photo{border:4px solid color-mix(in srgb,var(--accent) 28%,var(--card));box-shadow:0 14px 34px rgba(0,0,0,.12);transition:transform .28s ease,box-shadow .28s ease;}
.hero-photo:hover{transform:translateY(-4px) rotate(1deg);box-shadow:0 20px 44px rgba(0,0,0,.16);}

/* Navigation state + keyboard clarity */
.topbar a[aria-current="page"]{color:var(--ink) !important;}
.topbar .nav-btn[aria-current="page"]{border-color:var(--accent) !important;background:color-mix(in srgb,var(--accent) 12%,var(--card));}
a:focus-visible,button:focus-visible,select:focus-visible,[role="link"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
::selection{background:color-mix(in srgb,var(--accent) 38%,transparent);color:var(--ink);}

@media (max-width:860px){
  .topbar{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;align-items:center !important;gap:7px !important;}
  .topbar > div:first-child{min-width:0;display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;overflow-y:hidden !important;scrollbar-width:none;gap:5px !important;}
  .topbar > div:first-child::-webkit-scrollbar{display:none;}
  .portfolio-lang-wrap{flex:0 0 auto;margin-left:0;min-height:40px;padding:3px 4px 3px 7px;gap:5px;}
  .portfolio-lang-label{display:none;}
  .portfolio-lang-flag{width:19px;min-width:19px;font-size:14px;}
  .portfolio-lang-select{min-width:52px;padding:7px 24px 7px 8px;font-size:10px;}

  /* Put portrait beside the name instead of leaving it at the bottom of the card. */
  #hero .hero{display:block !important;position:relative !important;padding:22px 16px !important;}
  #hero .hero > div:first-child{display:flex !important;padding:0 !important;}
  #hero h1{padding-right:108px;min-height:92px;display:flex;align-items:center;margin:0 !important;}
  #hero .hero-photo{
    position:absolute !important;
    top:22px !important;
    right:16px !important;
    width:88px !important;
    height:88px !important;
    margin:0 !important;
    z-index:2;
  }
  #hero .hero-tools{margin-top:-12px !important;margin-bottom:-8px !important;}
  #hero .role-box{margin-top:2px;}

  #selected-work .case{padding:19px 16px !important;border-radius:15px;}
  #selected-work .case::after{top:14px;right:14px;width:30px;height:30px;}
  #selected-work .case h3{padding-right:40px;}
  #selected-work .case p{-webkit-line-clamp:unset !important;display:block !important;}

  .section{padding-top:46px !important;padding-bottom:46px !important;}
}

@media (max-width:430px){
  #hero h1{padding-right:96px;min-height:82px;}
  #hero .hero-photo{width:78px !important;height:78px !important;}
  .portfolio-lang-wrap{min-height:36px;}
  .portfolio-lang-icon,.portfolio-lang-icon svg{width:15px;height:15px;}
  .portfolio-lang-select{max-width:58px;min-width:50px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  body::before{display:none;}
  .js-ui-motion .ui-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  #selected-work .case,.hero-photo,.game-block,.highlight,.game,.filter-card,.snap-card,.tool-category,.help-card,.cv-download-card{transition:none !important;}
}

/* Clear mobile tap affordances. */
#viewAllWork,#viewMoreTestimonials{
  font-family:"Work Sans",sans-serif !important;
  font-weight:700 !important;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 15px;
  width:fit-content;
  text-decoration:none !important;
  background:color-mix(in srgb,var(--card) 94%,transparent);
}
#viewAllWork:hover,#viewMoreTestimonials:hover{border-color:var(--accent);background:var(--accent-soft);}
@media (max-width:860px){
  .nav-btn .arrow{opacity:.75 !important;transform:none !important;}
  #selected-work > div[style*="display:flex"] .nav-btn{min-height:38px;align-items:center;}
}

/* =========================================================
   FLOATING NAV — stronger, consistent affordance (2026-09)
   Shared override for all inner portfolio pages.
   ========================================================= */
.back-home-btn,
.back-to-top{
  width:52px !important;
  height:52px !important;
  border:1.5px solid color-mix(in srgb, var(--accent) 48%, var(--line)) !important;
  background:color-mix(in srgb, var(--card) 94%, transparent) !important;
  color:color-mix(in srgb, var(--ink) 86%, var(--accent)) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.12),
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 10%, transparent) !important;
  backdrop-filter:blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.08) !important;
}

.back-home-btn svg,
.back-to-top svg{
  width:20px !important;
  height:20px !important;
  filter:drop-shadow(0 1px 0 color-mix(in srgb, var(--card) 50%, transparent));
}

.back-home-btn:hover,
.back-home-btn:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible{
  color:var(--on-accent) !important;
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.18),
    0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 32px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.back-home-btn::after,
.back-to-top::after{
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)) !important;
  background:color-mix(in srgb, var(--card) 97%, transparent) !important;
  color:var(--ink) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.10) !important;
}

.back-to-top.show{
  opacity:1 !important;
}

/* Keep the controls obvious on touch devices without making them dominant. */
@media (max-width:860px){
  .back-home-btn,
  .back-to-top{
    width:48px !important;
    height:48px !important;
  }
  .back-home-btn{ left:calc(18px + env(safe-area-inset-left)) !important; }
  .back-to-top{ right:calc(18px + env(safe-area-inset-right)) !important; }
  .back-home-btn::after,
  .back-to-top::after{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  .back-home-btn,
  .back-home-btn svg,
  .back-to-top.show,
  .back-to-top.show svg{
    animation:none !important;
  }
}

/* =========================================================
   MOBILE PORTFOLIO HEADER — shared by index + every inner page
   Keeps the language control visible and prevents inner-page nav wrapping.
   ========================================================= */
@media (max-width:860px){
  .topbar{
    position:sticky !important;
    top:8px !important;
    z-index:90 !important;
    width:auto !important;
    padding:8px 9px !important;
    margin-top:8px !important;
    border-radius:14px !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:7px !important;
  }

  .topbar.topbar-has-floating-back{
    margin-left:58px !important;
  }

  .desktop-inline-nav,
  .portfolio-main-nav{
    width:auto !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:5px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:1px 1px 2px !important;
  }

  .desktop-inline-nav::-webkit-scrollbar,
  .portfolio-main-nav::-webkit-scrollbar{display:none;}

  .desktop-inline-nav a,
  .portfolio-main-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:9px !important;
    line-height:1 !important;
    letter-spacing:.025em !important;
    padding:7px 8px !important;
    border:1px solid var(--line) !important;
    border-radius:999px !important;
    background:color-mix(in srgb,var(--card) 92%,transparent) !important;
    text-decoration:none !important;
  }

  .portfolio-lang-wrap{
    margin-left:0 !important;
    align-self:center !important;
    min-height:40px !important;
    padding:3px 4px 3px 7px !important;
    gap:5px !important;
  }

  .portfolio-lang-label{display:none !important;}
  .portfolio-lang-flag{width:19px !important;min-width:19px !important;font-size:14px !important;}
  .portfolio-lang-select{min-width:52px !important;padding:7px 24px 7px 8px !important;font-size:10px !important;}

  /* Floating Back/Home duplicates the first Home link on inner pages. */
  .topbar-has-floating-back .portfolio-main-nav > a:first-child{
    display:none !important;
  }
}

@media (max-width:430px){
  .topbar.topbar-has-floating-back{margin-left:54px !important;}
  .portfolio-main-nav a,
  .desktop-inline-nav a{font-size:8.5px !important;padding:7px 7px !important;}
  .portfolio-lang-wrap{gap:4px !important;padding-left:6px !important;}
  .portfolio-lang-flag{font-size:13px !important;width:17px !important;min-width:17px !important;}
}