:root {
  --cell-target: 30px;
  --tile-scale: .8;          /* tegel = 80% van een vakje */
  --dot-size: 3px;
  --fill-time: .7s;          /* hoe snel de naam zich vult */
}

@media (min-width: 768px)  { :root { --cell-target: 36px; --dot-size: 4px; } }
@media (min-width: 1200px) { :root { --cell-target: 44px; } }
@media (min-width: 1920px) { :root { --cell-target: 54px; --dot-size: 5px; } }

/* ---------- Hero: altijd precies één scherm ---------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;            /* correct op mobiel */
  overflow: hidden;
  background: var(--bg);
  transition: background-color .3s ease;
  touch-action: none;        /* zodat slepen met je vinger ook tegels toont */
}

/* ---------- Raster ---------- */
.grid {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--cell, 30px));
  grid-auto-rows: var(--cell, 30px);
}

.cell {
  position: relative;
}

/* het puntje in het midden van elk vakje */
.cell::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--dot-size);
  height: var(--dot-size);
  background: var(--dot);
  transform: translate(-50%, -50%);
}

/* de tegel (vierkant_x.svg) die over het puntje komt */
.tile {
  position: absolute;
  inset: calc(var(--cell) * (1 - var(--tile-scale)) / 2);
  background: center / contain no-repeat;
  opacity: 0;
  transform: scale(.6);
  filter: var(--icon-filter);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

.tile.is-on {
  opacity: 1;
  transform: scale(1);
  transition: opacity .12s ease-out, transform .18s cubic-bezier(.2, 1.4, .4, 1);
}

/* ---------- Naam ---------- */
.hero__title {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-end;     /* label rechts onder de naam */
  gap: 0.9rem;
  pointer-events: none;      /* hover op het raster werkt rond de naam */
  max-width: calc(100% - var(--gutter) * 2);
}

/* achtergrond achter naam */
.hero__name::before {
  content: "";
  position: absolute;
  inset: -.75rem -1rem;
  z-index: -1;
  background: var(--name-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  border: 1px solid var(--name-border);
}

.hero__name {
  align-self: flex-start;
  font-family: var(--font-name);
  font-weight: 700;
  color: var(--accent);
  font-size: clamp(44px, 14vw, 136px);
  line-height: 0.85;
  letter-spacing: -.01em;
  pointer-events: auto;
  cursor: default;
  outline: none;
  position: relative;
  isolation: isolate;
}

.hero__line {
  display: grid;
}

.hero__line > span {
  grid-area: 1 / 1;
  justify-self: start;
  color: transparent;
  background-image: linear-gradient(90deg,
    var(--accent) 0 50%,
    var(--name-empty) 50% 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  padding: .15em .15em;

}

.hero__name .greek {
  font-family: "Inter", var(--font-name);
  font-weight: 700;
}

.hero__name .latin {
  visibility: visible;
  background-position: 0 0;
  transition: background-position var(--fill-time) cubic-bezier(.65, 0, .35, 1);
}
.hero__name .greek {
  visibility: hidden;
  background-position: 100% 0;
  transition: none;                                           /* instant terug */
}

/* --- Hover / tik: Grieks instant leeg, dan gevuld --- */
.hero__name:hover .latin,
.hero__name:focus .latin {
  visibility: hidden;
  background-position: 100% 0;
  transition: none;
}
.hero__name:hover .greek,
.hero__name:focus .greek {
  visibility: visible;
  background-position: 0 0;
  transition: background-position var(--fill-time) cubic-bezier(.65, 0, .35, 1);
}

/* tweede regel vult net iets later */
.hero__name .hero__line:nth-child(2) .latin,
.hero__name:hover .hero__line:nth-child(2) .greek,
.hero__name:focus .hero__line:nth-child(2) .greek {
  transition-delay: .12s;
}

.hero__title .tag {
  margin-right: -1rem;
}

/* ---------- Puntjes rond een klikbaar vierkant ---------- */
.cell.has-item::before,
.cell.no-dot::before { display: none; }

.cell.is-near::before { background: var(--accent); }

/* Als je over een klikbaar vierkant hovert → 9-blok kleiner */
.grid.is-focus .tile.is-on { transform: scale(.7); }

/* "Dark" / "Light" boven en onder het thema-vierkant */
.cell-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-name);
  font-weight: 500;
  font-size: calc(var(--cell) * .32);
  line-height: 1;
  color: var(--label);
  transition: color .25s ease, opacity .15s ease;
  pointer-events: none;
}
.cell-label.is-active { color: var(--label-active); }
.cell:has(.tile.is-on) .cell-label { opacity: 0; }
/* dichtbij → Dark/Light in accentkleur */
.cell.is-near .cell-label.is-active { color: var(--accent); }
.cell.is-near .cell-label:not(.is-active) {
  color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ---------- Klikbare vierkanten ---------- */
.nav-tiles {
  position: absolute;         /* zelfde plek/grootte als het raster (JS) */
  z-index: 3;
  pointer-events: none;
  visibility: hidden;
}
.nav-tiles.is-ready { visibility: visible; }

.nav-tile {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}

.nav-tile img {
  grid-area: 1 / 1;
  width:  calc(var(--cell) * var(--tile-scale));
  height: calc(var(--cell) * var(--tile-scale));
  pointer-events: none;
}

.nav-tile .icon {
  filter: var(--icon-filter);
}

.nav-tile .accent {
  filter: var(--accent-filter);
  opacity: 0;
  transition: opacity .2s ease;
}

/* dichtbij → accentkleur */
.nav-tile.is-near .accent,
.nav-tile:hover .accent,
.nav-tile:focus-visible .accent { opacity: 1; }

/* erover → groter + accentkleur */
.nav-tile:hover,
.nav-tile:focus-visible {
  transform: scale(1.5);
  z-index: 1;
}

/* ---------- [ Works ] naast Helia bij hover op een vierkant ---------- */
.hero__hint {
  position: absolute;
  top: 0;
  right: 0;                       /* JS zet de juiste plek */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(.7rem, 1.3vw, 1rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--accent);           /* light: #242933, dark: #B3CEF9 */
  white-space: pre;               /* spaties binnen [  ] blijven staan */
  pointer-events: none;
  opacity: 0;
  transform: translateY(.3em);
  transition: opacity .2s ease, transform .25s ease;
}
.hero__hint.is-on {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 768px) {
  .hero__title { gap: 1.2rem; }
  .hero__name  { font-size: clamp(64px, 7.5vw, 104px); }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .tile.is-on { transition: opacity .2s linear; transform: none; }
  .nav-tile { transition: none; }
  .hero__line > span { transition: none !important; }
}