@import url("styles-base.css");

/* Footer layout — production override.
   Keep the footer inside the same site container as the rest of the page.
   On desktop, the navigation columns are anchored to the right edge of that
   container so they align with the content card above. */

.footer .footer-bottom{
  justify-content:flex-start;
}
.footer .footer-bottom>span:last-child{
  display:none;
}

@media(min-width:821px){
  .footer{
    padding-top:44px;
    padding-bottom:18px;
  }

  .footer .footer-grid{
    display:grid;
    row-gap:16px;
    align-items:start;
    padding-bottom:26px;
  }

  .footer .footer-brand{
    grid-area:brand;
    max-width:430px;
  }

  .footer .footer-brand p{
    max-width:430px;
    margin-bottom:12px;
  }

  .footer .footer-links{
    display:contents;
  }

  .footer .footer-links>div:first-child{
    grid-area:explore;
  }

  .footer .footer-links>div:last-child{
    grid-area:about;
  }

  .footer .footer-links>div{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-width:0;
    padding-top:2px;
  }

  .footer .footer-links strong{
    margin-bottom:5px;
  }

  .footer .footer-social{
    grid-area:social;
    justify-self:start;
    align-self:start;
    margin-top:0;
  }

  .footer .footer-bottom{
    padding-top:16px;
  }
}

/* Full desktop: keep the profile block on the left, use the centre as flexible
   breathing room, and pin Explore/About to the right edge of the 1180px
   container. The About column therefore ends on the same alignment line as the
   card above the footer. */
@media(min-width:1041px){
  .footer .footer-grid{
    grid-template-columns:430px minmax(0,1fr) 150px 150px;
    grid-template-areas:
      "brand . explore about"
      "social . explore about";
    column-gap:40px;
  }
}

/* Smaller desktop / high-DPI viewport: retain right anchoring without forcing
   the fixed desktop widths into a narrower CSS viewport. */
@media(min-width:821px) and (max-width:1040px){
  .footer .footer-grid{
    grid-template-columns:minmax(0,1fr) 130px 110px;
    grid-template-areas:
      "brand explore about"
      "social explore about";
    column-gap:24px;
  }
}

@media(min-width:721px) and (max-width:820px){
  .footer .footer-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 120px 100px;
    grid-template-areas:
      "brand explore about"
      "social explore about";
    column-gap:20px;
    row-gap:18px;
    align-items:start;
  }

  .footer .footer-brand{
    grid-area:brand;
    max-width:430px;
  }

  .footer .footer-links{
    display:contents;
  }

  .footer .footer-links>div:first-child{
    grid-area:explore;
  }

  .footer .footer-links>div:last-child{
    grid-area:about;
  }

  .footer .footer-links>div{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
    min-width:0;
    padding-top:3px;
  }

  .footer .footer-links strong{
    margin-bottom:6px;
  }

  .footer .footer-social{
    grid-area:social;
    justify-self:start;
    align-self:start;
    margin-top:0;
  }
}

@media(max-width:720px){
  .footer .footer-grid{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "links"
      "social";
    gap:30px;
  }

  .footer .footer-brand{
    grid-area:brand;
    max-width:none;
  }

  .footer .footer-links{
    grid-area:links;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    width:100%;
  }

  .footer .footer-links>div{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
  }

  .footer .footer-social{
    grid-area:social;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:0;
  }

  .footer .footer-social .footer-social-link{
    width:100%;
    min-width:0;
    justify-content:center;
  }
}

/* Slightly larger dark-mode pointer light. It remains fixed, non-interactive
   and outside document flow, so the larger halo cannot shift page layout. */
.pointer-light{
  width:300px;
  height:300px;
  margin-left:-20px;
  margin-top:-20px;
}

/* =========================================================
   Applied stack integration — no standalone skills table.
   Technologies are shown in context inside the work cards.
   ========================================================= */

.applied-stack-section{
  display:none !important;
}

.integrated-stack-pills{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:18px;
}

.integrated-stack-pills>span{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--panel) 32%,transparent);
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease;
}

.integrated-stack-pills>span:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--orange) 48%,var(--line));
  background:color-mix(in srgb,var(--panel) 52%,transparent);
}

.integrated-stack-pills b{
  color:var(--text);
  font-size:11px;
  font-weight:850;
  letter-spacing:-.01em;
}

.integrated-stack-pills small{
  color:var(--muted-2);
  font-size:9px;
  font-weight:750;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.integrated-stack-pills i{
  color:var(--orange);
  font-size:11px;
  font-style:normal;
}

.delivery-inline{
  display:block;
  margin-top:7px;
  color:var(--muted-2);
  font-size:13px;
}

html[data-theme="light"] .integrated-stack-pills>span{
  background:rgba(255,255,255,.55);
}

html[data-theme="light"] .integrated-stack-pills>span:hover{
  background:#fff;
  box-shadow:none;
}

@media(max-width:720px){
  .integrated-stack-pills{
    gap:7px;
  }

  .integrated-stack-pills>span{
    min-height:36px;
    padding:7px 10px;
  }

  .integrated-stack-pills b{
    font-size:10.5px;
  }

  .integrated-stack-pills small{
    font-size:8px;
  }
}

@media(max-width:430px){
  .integrated-stack-pills i{
    display:none;
  }
}

/* =========================================================
   Mobile QA — native-feeling history restore + touch layout.
   Desktop layout and motion remain unchanged.
   ========================================================= */

@media(max-width:820px){
  .journey-rail{
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  }
  .journey-nav{
    scroll-snap-align:center;
  }
}

/* The base stylesheet hides every .brand label at phone widths. Restore the
   navbar and footer identity while keeping the compact mobile layout. */
@media(max-width:650px){
  .nav .brand>span:last-child,
  .footer .brand>span:last-child{
    display:inline;
  }
  .nav .brand{
    gap:8px;
    font-size:14px;
    min-width:0;
  }
  .nav .brand-terminal{
    flex:0 0 auto;
  }

  /* Architecture diagrams become a true vertical flow on phones rather than a
     510px desktop diagram inside a horizontal scroller. */
  .architecture-column{
    overflow:visible;
  }
  .architecture-stable{
    min-width:0 !important;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    padding:18px !important;
  }
  .architecture-stable .arch-node{
    width:100%;
    min-height:44px;
  }
  .architecture-stable .flow-line.horizontal{
    width:2px;
    height:24px;
    min-height:24px;
    margin:0 auto;
    background:var(--line-strong);
  }
  .architecture-stable .flow-line.horizontal span{
    width:8px;
    height:8px;
    left:50%;
    top:-4px;
    transform:translateX(-50%);
  }
  .flow-active .architecture-stable .flow-line.horizontal span,
  .architecture-stable.flow-active .flow-line.horizontal span{
    animation:mobileArchSignal 1.55s ease-in-out infinite;
  }
  @keyframes mobileArchSignal{
    0%{top:-4px;opacity:0}
    15%,80%{opacity:1}
    100%{top:calc(100% - 4px);opacity:0}
  }
  .architecture-stable .arch-tooltip{
    width:100%;
    margin-top:6px !important;
  }

  /* Mobile code is readable without unnecessary horizontal page movement. */
  .project-terminal pre{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Journey rail retains horizontal navigation but visibly indicates that more
     stages continue off-screen. */
  .journey-scroll{
    position:relative;
  }
  .journey-scroll:after{
    content:"";
    position:absolute;
    z-index:3;
    right:0;
    top:0;
    width:34px;
    height:54px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--bg));
  }
}

@media(max-width:430px){
  /* Keep the three social destinations, but remove cramped labels/arrows on very
     narrow phones. Icons become equal, comfortable touch targets. */
  .footer .footer-social{
    grid-template-columns:repeat(3,52px);
    justify-content:start;
  }
  .footer .footer-social .footer-social-link{
    min-height:48px;
    padding:7px;
    gap:0;
  }
  .footer .footer-social .footer-social-link>span:not(.footer-social-icon),
  .footer .footer-social .footer-social-link>b{
    display:none;
  }
  .footer-social-icon{
    width:30px;
    height:30px;
  }
}

/* Case-study architecture flows use the same vertical reading direction on
   phones rather than requiring sideways swiping. */
@media(max-width:650px){
  .case-flow-row{
    flex-direction:column;
    align-items:stretch;
    overflow:visible;
    gap:8px;
  }
  .case-node{
    width:100%;
    text-align:center;
  }
  .case-flow{
    width:2px;
    height:24px;
    margin:0 auto;
  }
  .case-flow b{
    left:50%;
    top:-4px;
    transform:translateX(-50%);
    animation:mobileCaseSignal 1.9s ease-in-out infinite;
  }
  @keyframes mobileCaseSignal{
    0%{top:-4px;opacity:0}
    15%,80%{opacity:1}
    100%{top:calc(100% - 4px);opacity:0}
  }
}

/* Mobile Back/Forward restoration: do not snapshot or restore the page in its
   outgoing fade state. Native mobile history can now reveal the restored page
   immediately even if the browser reuses its BFCache snapshot. */
@media(max-width:820px), (pointer:coarse){
  body{
    opacity:1;
    animation:none;
  }
  body.page-leaving{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .architecture-stable .flow-line.horizontal span,
  .case-flow b{
    animation:none !important;
  }
}

/* =========================================================
   Homepage tool rail — Better Stack-inspired soft-focus edges.
   Keep the centre of the marquee crisp while tools progressively blur and
   fade as they enter or leave the viewport. The duplicated track already
   provides the seamless loop, so this remains CSS-only.
   ========================================================= */
body[data-page="home"] .tool-marquee{
  isolation:isolate;
  border-block:0;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--bg) 96%,transparent),
    color-mix(in srgb,var(--panel) 24%,transparent) 18%,
    color-mix(in srgb,var(--panel) 30%,transparent) 50%,
    color-mix(in srgb,var(--panel) 24%,transparent) 82%,
    color-mix(in srgb,var(--bg) 96%,transparent));
  box-shadow:inset 0 1px color-mix(in srgb,var(--text) 5%,transparent),inset 0 -1px color-mix(in srgb,var(--text) 5%,transparent);
}

body[data-page="home"] .tool-track{
  animation-duration:38s;
}

body[data-page="home"] .tool{
  opacity:.92;
  transition:background .18s ease,transform .18s ease,opacity .18s ease,filter .18s ease;
}

body[data-page="home"] .tool:hover{
  opacity:1;
  filter:none;
}

body[data-page="home"] .tool-fade{
  z-index:5;
  width:clamp(110px,13vw,210px);
  overflow:hidden;
  background:none;
}

body[data-page="home"] .tool-fade::before,
body[data-page="home"] .tool-fade::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  pointer-events:none;
}

/* Broad low-strength blur begins before the hard edge, so logos feel as though
   they move behind the page rather than simply disappearing under a gradient. */
body[data-page="home"] .tool-fade-left::before{
  left:0;
  width:100%;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 26%,rgba(0,0,0,.48) 67%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 26%,rgba(0,0,0,.48) 67%,transparent 100%);
}
body[data-page="home"] .tool-fade-right::before{
  right:0;
  width:100%;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.92) 26%,rgba(0,0,0,.48) 67%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.92) 26%,rgba(0,0,0,.48) 67%,transparent 100%);
}

/* A narrower stronger layer finishes the Better Stack-style depth at the very
   edge while the background gradient lowers contrast at the same time. */
body[data-page="home"] .tool-fade-left::after{
  left:0;
  width:64%;
  background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 34%,transparent 100%);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 45%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 45%,transparent 100%);
}
body[data-page="home"] .tool-fade-right::after{
  right:0;
  width:64%;
  background:linear-gradient(270deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 34%,transparent 100%);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.82) 45%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.82) 45%,transparent 100%);
}

html[data-theme="light"] body[data-page="home"] .tool-marquee{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--bg) 98%,transparent),
    color-mix(in srgb,var(--panel-2) 36%,transparent) 20%,
    color-mix(in srgb,var(--panel-2) 44%,transparent) 50%,
    color-mix(in srgb,var(--panel-2) 36%,transparent) 80%,
    color-mix(in srgb,var(--bg) 98%,transparent));
}

@media(max-width:650px){
  body[data-page="home"] .tool-fade{
    width:72px;
  }
  body[data-page="home"] .tool-fade-left::before,
  body[data-page="home"] .tool-fade-right::before{
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
  body[data-page="home"] .tool-fade-left::after,
  body[data-page="home"] .tool-fade-right::after{
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .tool-track{
    animation:none !important;
    transform:none !important;
  }
}