/* Jack Verbel — portfolio
   Shared behaviour + responsive rules.
   The page layout lives in each HTML file; these rules adapt it to small screens. */

html { scroll-behavior: smooth; }
img, video { max-width: 100%; }
a { transition: color .15s ease; }
.btn { transition: transform .15s ease, filter .15s ease; }
a:hover .btn { transform: translateY(-1px); filter: brightness(1.06); }
.card img { transition: transform .35s ease; }

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .wrap { padding-left: 32px !important; padding-right: 32px !important; }

  nav { height: auto !important; padding: 16px 32px !important; flex-wrap: wrap; gap: 14px; }
  nav a { padding-bottom: 6px !important; }

  footer { padding: 26px 32px !important; flex-direction: column; align-items: flex-start !important; gap: 10px; }

  /* every multi-column grid becomes a single column — inline styles
     and the class-based ones (.row on About, .feat on the wrench page) */
  [style*="grid-template-columns"],
  .row,
  .feat { grid-template-columns: 1fr !important; }
  /* except the short lists, which stay two-up */
  .steps-row { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  .logolock { gap: 20px !important; }
  .feat { gap: 26px !important; }
  .row { gap: 8px !important; padding: 22px 0 !important; }

  h1 { font-size: clamp(34px, 8vw, 56px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(24px, 5.5vw, 32px) !important; }
  h3 { font-size: clamp(19px, 4.5vw, 22px) !important; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  nav { padding: 14px 20px !important; }
  nav div:last-child { gap: 20px !important; }
  footer { padding: 22px 20px !important; }

  section { padding-top: 44px !important; padding-bottom: 44px !important; }
  .steps-row { grid-template-columns: 1fr !important; }

  /* the logo mark sits above the name */
  .logolock { flex-direction: column; align-items: flex-start !important; gap: 14px !important; }
  .logolock svg { width: 76px !important; height: 76px !important; }
}

/* respect a reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .pfield i { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* project cards */
.card{ transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(0,0,0,0.08); }
@media (prefers-reduced-motion: reduce){ .card{ transition:none; } .card:hover{ transform:none; } }

/* hover pops — small themed icons that drift out of a label */
.pop{
  position:absolute; z-index:60; width:19px; height:19px;
  margin:-9px 0 0 -9px; pointer-events:none; opacity:0;
  color:var(--p-main);
  animation:popOut .8s cubic-bezier(.22,.9,.3,1) forwards;
}
.pop.pop-deep{ color:var(--p-deep); width:22px; height:22px; margin:-11px 0 0 -11px; }
.pop svg{ width:100%; height:100%; display:block; }
@keyframes popOut{
  0%   { opacity:0; transform:translate(0,0) scale(.35) rotate(0deg); }
  22%  { opacity:1; transform:translate(calc(var(--dx) * .34), calc(var(--dy) * .42)) scale(1.06) rotate(calc(var(--rot) * .4)); }
  100% { opacity:0; transform:translate(var(--dx), var(--dy)) scale(.8) rotate(var(--rot)); }
}
[data-pop]{ cursor:default; }
a[data-pop], [data-pop] a{ cursor:pointer; }
@media (prefers-reduced-motion: reduce){ .pop{ display:none !important; } }

/* About page — the name is written in by a pencil, then stays */
.write{ position:relative; display:inline-block; }
.write-ink{ animation:writeInk 1.45s .35s cubic-bezier(.35,0,.25,1) both; }
@keyframes writeInk{
  from{ clip-path:inset(0 100% -25% 0); }
  to  { clip-path:inset(0 -8% -25% 0); }
}
.write-pen{
  position:absolute; left:0; bottom:11px; width:36px; height:36px;
  margin-left:-8px; color:var(--p-main); pointer-events:none;
  animation:penTravel 1.45s .35s cubic-bezier(.35,0,.25,1) both,
            penNib .21s .35s ease-in-out 7 both,
            penLift .45s 1.78s ease-out both;
}
.write-pen svg{ width:100%; height:100%; display:block; }
@keyframes penTravel{ from{ left:0; } to{ left:100%; } }
@keyframes penNib{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-2.5px) rotate(-3.5deg); } }
@keyframes penLift{ from{ opacity:1; } to{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .write-ink{ animation:none; }
  .write-pen{ display:none; }
}
@media (max-width: 640px){
  .write-pen{ width:27px; height:27px; bottom:7px; margin-left:-6px; }
}