/* ============================================================
   enhance.css — motion, interaction and layout layer
   Every colour resolves through the site's theme variables,
   so dark and light mode stay coherent. Additive only.
   ============================================================ */

:root{
  --fx-accent:       var(--green);
  --fx-accent-2:     var(--blue);
  --fx-accent-soft:  rgba(123, 247, 190, .13);
  --fx-accent-line:  rgba(123, 247, 190, .40);
  --fx-accent-glow:  rgba(123, 247, 190, .28);
  --fx-scrim:        rgba(7, 17, 15, .72);
  --fx-ease:         cubic-bezier(.22,.61,.36,1);
}

html,
body{
  overflow-x: clip;
}
[data-theme="light"]{
  --fx-accent-soft:  rgba(5, 123, 77, .10);
  --fx-accent-line:  rgba(5, 123, 77, .34);
  --fx-accent-glow:  rgba(5, 123, 77, .22);
  --fx-scrim:        rgba(255, 255, 255, .84);
}

/* ---------- 1. scroll progress ---------- */
#fx-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-2), var(--acid));
  z-index: 9999; pointer-events: none;
}

/* ---------- 2. circular portrait ---------- */
.hero-visual .portrait-frame{
  border-radius: 50% !important;
  overflow: visible !important;
  aspect-ratio: 1 / 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: fx-float 7s var(--fx-ease) infinite;
}
.hero-visual .portrait-frame::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--fx-accent), transparent 28%,
              var(--fx-accent-2) 52%, transparent 78%, var(--fx-accent));
  filter: blur(14px); opacity:.5; z-index:0;
  animation: fx-spin 14s linear infinite;
}
.hero-visual .portrait-frame::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid var(--fx-accent-line); z-index:3; pointer-events:none;
}
.hero-visual .portrait-frame img{
  position:relative; z-index:2; border-radius:50%;
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
}
.hero-visual .portrait-code{ z-index:4; }
@keyframes fx-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes fx-spin{ to{ transform: rotate(360deg); } }

/* ---------- 3. headline shine ---------- */
.hero-copy h1{
  background: linear-gradient(100deg, var(--ink) 30%, var(--fx-accent) 48%, var(--ink) 66%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fx-shine 7s ease-in-out 1.1s infinite;
}
@keyframes fx-shine{ 0%,72%{background-position:180% 0} 100%{background-position:-60% 0} }

/* ---------- 4. reveal on scroll ---------- */
.fx-in{ opacity:0; transform: translateY(26px); }
.fx-in.fx-on{
  opacity:1; transform:none;
  transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
  transition-delay: var(--fx-d, 0ms);
}

/* ---------- 5. project cards ---------- */
.project-card{
  transform-style: preserve-3d;
  transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease);
  will-change: transform;
}
.project-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
              var(--fx-accent-soft), transparent 62%);
  opacity:0; transition:opacity .3s ease; z-index:5;
}
.project-card:hover::after{ opacity:1; }
.project-card:hover{ box-shadow: var(--shadow), 0 0 0 1px var(--fx-accent-line); }
.project-card .project-media img{ transition: transform .8s var(--fx-ease), filter .5s ease; }
.project-card:hover .project-media img{ transform: scale(1.07); filter: saturate(1.1); }
.project-card .project-arrow{ transition: transform .35s var(--fx-ease); }
.project-card:hover .project-arrow{ transform: translate(4px,-4px); }
.project-mini{ transition: transform .35s var(--fx-ease); }
.project-mini:hover{ transform: translateY(-6px); }

/* ---------- 6. buttons and cards ---------- */
.button, .text-button{
  transition: transform .25s var(--fx-ease), box-shadow .25s var(--fx-ease), background .25s ease;
  will-change: transform;
}
.button.primary:hover{ box-shadow: 0 14px 40px var(--fx-accent-glow); }
.impact-card{ transition: transform .35s var(--fx-ease), border-color .35s ease; }
.impact-card:hover{ transform: translateY(-8px); border-color: var(--fx-accent-line); }

/* ---------- 7. delivery strip marquee ---------- */
.delivery-strip.fx-marquee{
  position: relative; z-index: 3; background: var(--bg);
  display: flex; align-items: center; gap: 1.4rem; overflow: hidden;
}
.delivery-strip.fx-marquee > span{
  flex: 0 0 auto; position: relative; z-index: 2;
  background: var(--bg); padding-right: .9rem;
}
.fx-marquee-track{
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
}
.fx-marquee-track > div{
  display:flex; flex-wrap:nowrap; gap:2.4rem; width:max-content;
  animation: fx-scroll 40s linear infinite;
}
.fx-marquee-track > div > *{ flex:0 0 auto; white-space:nowrap; }
.delivery-strip.fx-marquee:hover .fx-marquee-track > div{ animation-play-state: paused; }
@keyframes fx-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.hero{ position: relative; z-index: 1; }
.hero-visual, .hero .floating-note{ pointer-events: none; }
.hero-footer{ position: relative; z-index: 2; }

/* ---------- 8. nav ---------- */
.desktop-nav a{ position:relative; }
.desktop-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--fx-accent); border-radius:2px;
  transform: scaleX(0); transform-origin:0 50%;
  transition: transform .3s var(--fx-ease);
}
.desktop-nav a:hover::after, .desktop-nav a.fx-active::after{ transform: scaleX(1); }

.desktop-nav a.nav-cv{
  display:inline-flex; align-items:center; gap:.38rem;
  padding:.34rem .82rem; margin-left:.35rem;
  border:1px solid var(--fx-accent-line); border-radius:999px;
  color: var(--fx-accent); font-weight:600;
  transition: background .25s var(--fx-ease), border-color .25s var(--fx-ease);
}
.desktop-nav a.nav-cv:hover{ background: var(--fx-accent-soft); border-color: var(--fx-accent); }
.desktop-nav a.nav-cv::after{ display:none; }
.desktop-nav a.nav-cv span{ font-size:.92em; transition: transform .25s var(--fx-ease); }
.desktop-nav a.nav-cv:hover span{ transform: translateY(2px); }
.mobile-menu a.mobile-cv{
  color: var(--fx-accent); font-weight:600;
  border-top:1px solid var(--line); margin-top:.35rem; padding-top:.8rem;
}

/* ---------- 9. case-study extras (injected by enhance.js) ---------- */
.fx-decisions{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}
.fx-decisions > span{
  display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fx-accent); font-weight:600; margin-bottom:8px;
}
.fx-decisions-body p{ margin:0 0 10px; max-width:68ch; }
#fx-cad{ margin:14px 0 0; }
#fx-cad a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:999px;
  border:1px solid var(--fx-accent-line);
  color: var(--fx-accent); font-weight:600; text-decoration:none; font-size:.92rem;
  transition: background .25s ease, border-color .25s ease;
}
#fx-cad a:hover{ background: var(--fx-accent-soft); border-color: var(--fx-accent); }

/* ---------- 10. credentials ---------- */
.credentials{ margin:0 auto; max-width: var(--max); padding: 2.4rem 1.4rem 0; }
.credentials-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap:14px; margin-top:1rem;
}
.credential{
  background: var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:1rem 1.1rem;
  transition: border-color .3s var(--fx-ease), transform .3s var(--fx-ease);
}
.credential:hover{ border-color: var(--fx-accent-line); transform: translateY(-4px); }
.credential span{
  display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fx-accent); font-weight:600; margin-bottom:.45rem;
}
.credential strong{ display:block; font-size:1rem; line-height:1.35; margin-bottom:.3rem; color: var(--ink); }
.credential small{ display:block; color: var(--muted); font-size:.86rem; line-height:1.55; }

/* ---------- 11. CAD to built comparison ---------- */
.sticks{ margin:0 auto; max-width: var(--max); padding: 2.6rem 1.4rem 0; }
.cmp-intro{ margin:0 0 1.2rem; color: var(--muted); max-width:62ch; }
.cmp{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:20px; overflow:hidden; cursor:ew-resize;
  border:1px solid var(--line); touch-action:none; user-select:none;
}
.cmp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.cmp .cmp-top{ clip-path: inset(0 50% 0 0); }
.cmp-tag{
  position:absolute; top:14px; z-index:3;
  padding:.3rem .8rem; border-radius:999px;
  background: var(--fx-scrim); border:1px solid var(--line-strong);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ink); pointer-events:none;
}
.cmp-tag-l{ left:14px; } .cmp-tag-r{ right:14px; }
.cmp-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; margin-left:-1px; z-index:4;
  background: var(--fx-accent); cursor:ew-resize;
}
.cmp-handle i{
  position:absolute; top:50%; left:50%;
  width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%;
  background: var(--fx-accent); box-shadow: var(--shadow);
}
.cmp-handle i::before, .cmp-handle i::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-top:6px solid transparent; border-bottom:6px solid transparent; margin-top:-6px;
}
.cmp-handle i::before{ left:11px; border-right:8px solid var(--bg); }
.cmp-handle i::after{ right:11px; border-left:8px solid var(--bg); }
.cmp-handle:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; }

/* ---------- 12. type polish ---------- */
.impact-card b, .count{ letter-spacing:-.015em; }
.project-card h3, .project-mini strong{ letter-spacing:-.01em; }
.section-kicker{ letter-spacing:.14em; }

/* ---------- 13. accessibility and small screens ---------- */
@media (prefers-reduced-motion: reduce){
  #fx-progress, .hero-visual .portrait-frame, .hero-visual .portrait-frame::before,
  .hero-copy h1, .fx-marquee-track > div{ animation: none !important; }
  .fx-in{ opacity:1 !important; transform:none !important; }
  .project-card{ transform:none !important; }
}
@media (max-width: 900px){
  .desktop-nav a.nav-cv{ display:none; }
}
@media (max-width: 760px){
  .project-card{ transform:none !important; }
  .hero-visual .portrait-frame{ animation-duration: 9s; }
}
@media (max-width: 700px){
  .delivery-strip.fx-marquee{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .fx-marquee-track{ width:100%; }
}


/* ---------- 17. hero footer: stop it colliding with the proof row ---------- */
.hero{ padding-bottom: 0 !important; }
.hero .hero-footer{
  position: static !important;
  margin-top: 2.4rem;
  padding-top: 16px;
  padding-bottom: 6px;
}

/* ---------- 18. labelled theme toggle ---------- */
.icon-button.fx-theme-btn{
  width: auto; min-width: 40px; height: 36px;
  padding: 0 .78rem;
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: 999px;
  color: var(--muted);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.icon-button.fx-theme-btn:hover{
  color: var(--ink);
  border-color: var(--fx-accent-line);
  background: var(--fx-accent-soft);
}
.fx-theme-btn > span{ font-size: 1rem; line-height: 1; }
.fx-theme-text{
  font-style: normal;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .04em;
}
@media (max-width: 560px){
  .fx-theme-text{ display: none; }
  .icon-button.fx-theme-btn{ width: 40px; padding: 0; justify-content: center; }
}

/* ---------- 19. impact numbers read as one unit with their sentence ------- */
.impact-card p{ max-width: 30ch; }


/* ---------- 20. quiet phone line under the contact buttons ---------- */
.contact-phone{
  margin: 1.1rem 0 0;
  font-size: .92rem;
  color: var(--muted);
}
.contact-phone a{
  color: var(--fx-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.contact-phone a:hover{ border-bottom-color: var(--fx-accent); }

/* ---------- 21. faster mobile portfolio scan ---------- */
@media (max-width: 760px){
  body:not([data-route="links"]) .hero{
    padding-top: 104px;
    padding-bottom: 16px !important;
  }

  body:not([data-route="links"]) .hero h1{
    font-size: clamp(3rem, 14.2vw, 4.5rem);
    line-height: .92;
  }

  body:not([data-route="links"]) .hero-lead{
    margin-bottom: 22px;
    line-height: 1.5;
  }

  body:not([data-route="links"]) .hero-proof{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 22px;
    padding-bottom: 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body:not([data-route="links"]) .hero-proof::-webkit-scrollbar,
  body:not([data-route="links"]) .project-grid::-webkit-scrollbar{
    display: none;
  }

  body:not([data-route="links"]) .hero-proof span{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  body:not([data-route="links"]) .hero-visual{
    min-height: 330px;
    margin-top: 24px;
  }

  body:not([data-route="links"]) .portrait-frame{
    width: min(68%, 270px);
  }

  body:not([data-route="links"]) .orbit-one{
    width: 292px;
    height: 292px;
  }

  body:not([data-route="links"]) .orbit-two{
    width: 348px;
    height: 348px;
  }

  body:not([data-route="links"]) .floating-note{
    min-width: 110px;
    padding: 8px 9px;
  }

  body:not([data-route="links"]) .hero .hero-footer{
    display: none;
  }

  body:not([data-route="links"]) .impact,
  body:not([data-route="links"]) .work,
  body:not([data-route="links"]) .game-launch,
  body:not([data-route="links"]) .about{
    padding-top: 64px;
  }

  body:not([data-route="links"]) .impact-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-route="links"]) .impact-card,
  body:not([data-route="links"]) .impact-card:nth-child(2){
    min-height: 170px;
    padding: 19px 15px;
    border-right: 1px solid var(--line);
  }

  body:not([data-route="links"]) .impact-card:nth-child(even){
    border-right: 0;
  }

  body:not([data-route="links"]) .impact-card:nth-child(-n + 2){
    border-bottom: 1px solid var(--line);
  }

  body:not([data-route="links"]) .impact-card .count{
    margin-bottom: 17px;
    font-size: clamp(2.5rem, 12vw, 3.6rem);
  }

  body:not([data-route="links"]) .impact-card p{
    font-size: .78rem;
    line-height: 1.45;
  }

  body:not([data-route="links"]) .work .section-head{
    margin-bottom: 26px;
  }

  body:not([data-route="links"]) .work .section-head.split::after{
    content: "Swipe projects →";
    justify-self: start;
    padding: 7px 10px;
    color: var(--fx-accent);
    background: var(--fx-accent-soft);
    border: 1px solid var(--fx-accent-line);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  body:not([data-route="links"]) .project-grid{
    display: flex;
    gap: 12px;
    padding: 4px 0 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 1px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body:not([data-route="links"]) .project-card,
  body:not([data-route="links"]) .project-card:nth-child(n){
    flex: 0 0 min(86vw, 332px);
    grid-column: auto !important;
    scroll-snap-align: start;
  }

  body:not([data-route="links"]) .project-media,
  body:not([data-route="links"]) .project-card:nth-child(n) .project-media{
    height: 250px !important;
  }

  body:not([data-route="links"]) .project-copy{
    padding: 19px;
  }

  body:not([data-route="links"]) .project-copy h3{
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }
}

@media (max-width: 410px){
  body:not([data-route="links"]) .hero-visual{
    min-height: 304px;
  }

  body:not([data-route="links"]) .impact-card,
  body:not([data-route="links"]) .impact-card:nth-child(2){
    min-height: 178px;
    padding-inline: 13px;
  }
}