/* ---------- Fonts (stored in /fonts, no outside service needed) ---------- */
@font-face { font-family: "Syne"; font-weight: 700; font-display: swap; src: url("syne-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-weight: 800; font-display: swap; src: url("syne-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap; src: url("dm-sans-latin-wght-normal.woff2") format("woff2"); }

/* ---------- Base ---------- */
:root {
  --bg: #fbf7f1;
  --card: #ffffff;
  --ink: #1f1d36;
  --muted: #6e6b80;
  --line: #ebe5dc;
  --accent: #1f1d36;
  --accent-soft: #ecebf3;

  /* one colour per section */
  --art: #e2553d;      --art-soft: #fce6e1;
  --proj: #127c78;     --proj-soft: #ddf1ef;
  --rev: #d98e04;      --rev-soft: #fbefd5;
  --blog: #6b4fbb;     --blog-soft: #ece7fa;
  --radius: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 72px 24px 48px; }

a { color: var(--accent); }

h1, h2, h3 {
  font-family: "Syne", "DM Sans", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 12px;
}

/* ---------- Page-to-page transition (smooth cross-fade + morphing titles) ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: fade-out .25s ease both; }
::view-transition-new(root) { animation: fade-in .45s var(--ease) both; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }

.vt-art      { view-transition-name: t-art; }
.vt-projects { view-transition-name: t-projects; }
.vt-reviews  { view-transition-name: t-reviews; }
.vt-contact  { view-transition-name: t-contact; }
.vt-blog     { view-transition-name: t-blog; }

/* section colour themes (used on cards and on each page's <body>) */
.c-art  { --accent: var(--art);  --accent-soft: var(--art-soft); }
.c-proj { --accent: var(--proj); --accent-soft: var(--proj-soft); }
.c-rev  { --accent: var(--rev);  --accent-soft: var(--rev-soft); }
.c-blog { --accent: var(--blog); --accent-soft: var(--blog-soft); }

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in  { from { opacity: 0; } }

/* ---------- Entrance animation (staggered) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: rise .8s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Home ---------- */
.name {
  font-size: clamp(3rem, 8vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}

/* four-colour stripe under the name, one colour per section */
.name-line {
  height: 5px;
  width: 0;
  background: linear-gradient(90deg,
    var(--art) 0 25%, var(--proj) 25% 50%, var(--rev) 50% 75%, var(--blog) 75% 100%);
  border-radius: 5px;
  margin-top: 16px;
  animation: grow 1.1s var(--ease) .35s forwards;
}
@keyframes grow { to { width: 128px; } }

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 64px 0;
}

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 44px 20px 36px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}

/* soft green wash that rises from the bottom on hover */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--accent-soft), transparent 70%);
  opacity: 0;
  transform: translateY(30%);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.card > * { position: relative; }

.card:hover, .card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.card:hover::before, .card:focus-visible::before { opacity: 1; transform: none; }

.card:active { transform: translateY(-3px) scale(.985); }

.icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--accent-soft);
  transition: background .45s var(--ease), transform .55s var(--ease);
}

.icon svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .45s var(--ease), transform .55s var(--ease);
}

.card:hover .icon, .card:focus-visible .icon { background: var(--accent); transform: scale(1.06); }
.card:hover .icon svg, .card:focus-visible .icon svg { stroke: #fff; transform: rotate(-8deg) scale(1.05); }

.card-title { font-family: "Syne", sans-serif; font-weight: 700; font-size: 1.15rem; text-align: center; line-height: 1.25; }
@media (max-width: 720px) { .card-title { text-align: left; } }

/* ---------- Bottom bar ---------- */
.bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:hover .arrow { transform: translateX(4px); }

.counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .95rem;
  margin: 0;
}
.counter svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.counter strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Inner pages ---------- */
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  text-decoration: none;
  color: var(--muted);
  transition: color .3s, transform .3s var(--ease);
}
.back:hover { color: var(--accent); transform: translateX(-4px); }

.page-title { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 40px; }

/* Art */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.gallery figure { margin: 0; }
.frame { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #eee; }
.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { margin-top: 12px; font-weight: 500; }

/* Lists (projects, reviews) */
.list { display: grid; gap: 18px; }

.item {
  display: block;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .4s, transform .4s var(--ease), box-shadow .4s var(--ease), opacity .35s;
}
.item:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(0,0,0,.3); }
.item h3 { margin-bottom: 6px; }
.item p { margin: 0; color: var(--muted); }

.tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: .8rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

/* Reviews */
.filters { display: flex; gap: 10px; margin: -16px 0 32px; }
.filter {
  font: inherit;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.filter:hover { border-color: var(--accent); }
.filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.review { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.review .badge {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--accent-soft);
}
.review .badge svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.date { font-size: .85rem; color: var(--muted); }
.post { max-width: 680px; }
.post p { font-size: 1.08rem; }
.page-title { color: var(--accent); }

.stars { color: var(--rev); letter-spacing: 2px; font-size: 1rem; margin-bottom: 6px; }
.item.hide { opacity: 0; transform: scale(.97); pointer-events: none; }
.item.gone { display: none; }

/* Contact */
.contact-links { display: grid; gap: 14px; max-width: 420px; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .wrap { padding-top: 48px; }
  .cards { grid-template-columns: 1fr; gap: 14px; margin: 44px 0; }
  .card { flex-direction: row; justify-content: flex-start; padding: 18px; }
  .icon { width: 64px; height: 64px; }
  .icon svg { width: 30px; height: 30px; }
  .card:hover { transform: translateY(-3px); }
  .gallery { grid-template-columns: 1fr; }
}

/* Respect people who turn off animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}