/* ============================================================
   ITSMIAS — portfolio site
   Shared styles for index.html (home) and project.html (case studies)
   ============================================================ */

/* Syne's lowercase g has a stub descender by design; serve Bricolage
   Grotesque's g (and only its g) instead via unicode-range. Stacks list
   'Syne GFix' before 'Syne' so every other glyph falls through to Syne. */
@font-face {
  font-family: 'Syne GFix';
  src: url('assets/bricolage-g.woff2') format('woff2');
  font-weight: 200 800;
  size-adjust: 95%;
  unicode-range: U+0067;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
body{ margin:0; background:#0b0717; }
::selection{ background:#F5A9B8; color:#0b0717; }
::-webkit-scrollbar{ width:0; height:0; display:none; }

@keyframes projFade { from{ transform:translateY(14px); } to{ transform:translateY(0); } }
@keyframes paneIn { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes paneItemIn { from{ opacity:0; transform:translateY(18px); filter:blur(5px); } to{ opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes paneNumIn { from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:translateX(0); } }

/* ---- what-i-do feature tabs ---- */
.mias-tab-title{ display:inline-block; color:#6f6790; }
.mias-tab[aria-selected="true"] .mias-tab-title{ color:#f3f1fa; }
.mias-tab:hover .mias-tab-title{ color:#f3f1fa; }
.mias-tab-fill{ transition:height .45s cubic-bezier(.22,1,.36,1); }
@media (max-width:860px){
  .mias-tabs{ grid-template-columns:1fr !important; gap:28px !important; }
  #services{ padding-top:90px !important; }
  /* tab buttons: tighter rows */
  .mias-tab{ padding:12px 4px !important; gap:14px !important; }
  .mias-tab-title{ font-size:18px !important; }
  /* panel: drop the desktop left inset, shorten min-height */
  .mias-tabpanel{ padding-left:0 !important; min-height:200px !important; }
  .mias-tabpanel > div[aria-hidden="true"]{ left:0 !important; }
  .mias-pane > div{ padding-left:24px !important; }
  /* long titles must wrap on narrow screens */
  .mias-pane h3{ white-space:normal !important; font-size:24px !important; line-height:1.3 !important; }
  .mias-pane p{ font-size:16px !important; max-width:none !important; }
}

/* ---- links ---- */
.mias-link{ transition:color .25s ease, opacity .25s ease; }
.mias-link:hover{ color:#57e0dd !important; }

/* nav links — sliding underline matching the scroll sliver */
.mias-navlink{ position:relative; }
.mias-navlink::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; background:#57e0dd; box-shadow:0 0 8px rgba(87,224,221,.5); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.mias-navlink:hover::after{ transform:scaleX(1); }
/* wordmark has .42em letter-spacing → trailing gap; trim the underline */
#nav-wordmark.mias-navlink::after{ right:.42em; }

/* ---- buttons — glow only, no bob ---- */
.mias-btn{ transition:box-shadow .35s ease, background .25s ease; }
.mias-btn:hover{ box-shadow:0 0 0 1px rgba(87,224,221,.4), 0 14px 34px -10px rgba(87,224,221,.6); }

/* ---- external links (case-study sidebar/body) ---- */
.ext-link{ transition:color .2s ease; }
.ext-link:hover{ color:#57e0dd !important; }

/* ---- socials — icon glow only, no box ---- */
.mias-social{ transition:color .25s ease, filter .3s ease; }
.mias-social:hover{ color:#57e0dd !important; filter:drop-shadow(0 0 8px rgba(87,224,221,.8)); }

/* ---- work cards (home) ---- */
.mias-card{ position:relative; isolation:isolate; transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s ease, box-shadow .45s ease; }
.mias-card:hover{ transform:translateY(-8px) scale(1.025); border-color:rgba(245,169,184,.5) !important; box-shadow:0 26px 50px -18px rgba(245,169,184,.45), 0 0 0 1px rgba(245,169,184,.2); }

/* thumbnail: the img and its dark tint live inside one zoom container,
   so the tint scales with the image and can never uncover it */
.mias-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; isolation:isolate; background:#0e0820; }
.mias-thumb-zoom{ position:absolute; inset:0; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.mias-thumb-zoom::after{ content:""; position:absolute; inset:-1px; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 78%, rgba(0,0,0,.85) 100%); pointer-events:none; }
.mias-thumb-zoom img{ width:100%; height:100%; display:block; object-fit:cover; }
.mias-feature:hover .mias-thumb-zoom{ transform:scale(1.06); }
/* CTA space is always reserved (fixed height) so revealing it on hover
   never changes the card's height and shifts the page */
.mias-cta{ display:inline-flex; align-items:flex-start; gap:8px; font-family:'Outfit',sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#F5A9B8; height:22px; margin-top:7px; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; }
.mias-card:hover .mias-cta{ opacity:1; transform:translateY(0); }
.mias-arrow{ margin-top:1px; flex-shrink:0; }

/* ---- case-study banner ---- */
.mias-banner img, .mias-banner{ transition:filter .5s ease; }

/* ---- live Discord presence (about) ---- */
#mias-presence-name{ transition:color .25s ease; }
.mias-presence:hover #mias-presence-name{ color:#57e0dd; }

/* ============================================================
   Responsive
   ============================================================ */
.mias-hamburger{ display:none; cursor:pointer; }
#mias-mobile-menu{ display:none; }
@media (min-width:761px){ #mias-mobile-menu{ display:none !important; } }

@media (max-width:760px){
  .mias-nav{ padding-left:22px !important; padding-right:22px !important; }
  .mias-navlinks{ display:none !important; }
  .mias-hamburger{ display:flex !important; }
  /* always reveal card CTA on touch */
  .mias-cta{ opacity:1 !important; transform:none !important; }
  /* case study: stack the sticky sidebar */
  article[id^="proj-"] > div[style*="320px 1fr"]{ grid-template-columns:1fr !important; }
  article[id^="proj-"] aside{ position:static !important; }
}

@media (max-width:640px){
  #work, #about, #testimonials, #services, #contact, .mias-hero-pad{ padding-left:22px !important; padding-right:22px !important; }
  div[style*="repeat(auto-fit"]{ grid-template-columns:1fr !important; }
  div[style*="max-width: 1180px"]{ padding-left:22px !important; padding-right:22px !important; }
  .mias-contact-foot{ margin-left:-22px !important; margin-right:-22px !important; padding-left:22px !important; padding-right:22px !important; }
  #contact h2{ font-size:clamp(34px,11vw,92px) !important; }
  article[id^="proj-"], .mias-foot{ padding-left:22px !important; padding-right:22px !important; }
}

@media (max-width:560px){
  article[id^="proj-"] h1{ white-space:normal !important; }
  article[id^="proj-"] > div[style*="space-between; gap: 18px"]{ flex-direction:column !important; }
  article[id^="proj-"] > div[style*="space-between; gap: 18px"] > a{ max-width:none !important; }
}

@media (max-width:380px){
  #contact h2{ font-size:32px !important; }
}