<!DOCTYPE html>
<html lang="en">
<head>
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-HBJP6CFGNQ"></script>
  <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','G-HBJP6CFGNQ');</script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alex Valentine Evdokimov</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">

  <style>
    /* ── Isometric world: fills the home-cell ── */
    .iso-world {
      position: absolute;
      inset: 0;
      overflow: hidden;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      z-index: 1;
    }
    .iso-world.dragging { cursor: grabbing; }

    /* Infinite draggable canvas */
    .iso-canvas {
      position: absolute;
      width: 4000px;
      height: 4000px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      will-change: transform;
    }

    /* SVG grid — layer 1, lowest in canvas */
    .iso-canvas svg.iso-grid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    /* Icons layer — above grid */
    .iso-icons-layer {
      position: absolute;
      inset: 0;
      z-index: 2;   /* explicitly above SVG grid */
      pointer-events: none; /* container doesn't block drag; children do */
    }

    /* Each icon wrapper */
    .iso-icon-wrap {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      pointer-events: auto;
      transition: transform 0.18s;
    }

    .iso-icon-wrap:hover {
      transform: translateY(-6px);
      z-index: 10;
    }

    .iso-icon-wrap img {
      display: block;
      width: 280px;
      height: auto;
      draggable: false;
      /* PNG is black bg + white lines.
         mix-blend-mode: screen makes black = transparent,
         leaving white lines visible on the light grid.
         No invert needed. */
      mix-blend-mode: screen;
      transition: opacity 0.18s;
      pointer-events: auto;
    }

    .iso-icon-wrap:hover img {
      opacity: 0.9;
    }

    /* Project label — appears below icon on hover */
    .iso-icon-label {
      opacity: 0;
      margin-top: 4px;
      font-family: 'Outfit', sans-serif;
      font-size: 0.4rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(0,0,0,0.5);
      white-space: nowrap;
      transition: opacity 0.18s;
      pointer-events: none;
      text-align: center;
      /* label sits on white background so it's readable */
      background: rgba(255,255,255,0.85);
      padding: 3px 8px;
    }

    .iso-icon-wrap:hover .iso-icon-label { opacity: 1; }

    /* ── Name: inside the home-cell, bottom-left, above everything ── */
    .home-name-inner {
      position: absolute;
      bottom: 28px;
      left: 28px;
      z-index: 20;            /* above iso-world (z:1) */
      pointer-events: none;
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: clamp(1.8rem, 5vw, 4.5rem);
      line-height: 1.05;
      letter-spacing: -0.02em;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: #000;
    }

    .home-name-inner span { display: block; }

    /* Hint text */
    .iso-hint {
      position: absolute;
      bottom: 12px;
      right: 16px;
      font-family: 'Outfit', sans-serif;
      font-size: 0.36rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(0,0,0,0.18);
      z-index: 20;
      pointer-events: none;
      white-space: nowrap;
    }

    /* Mobile */
    @media (max-width: 768px) {
      .iso-icon-wrap img { width: 160px; }
      .home-name-inner {
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        text-align: center;
        font-size: clamp(1.6rem, 9vw, 3rem);
      }
      .iso-hint { display: none; }
    }
  </style>
</head>
<body class="home-page">

<div class="landing-grid">

  <div class="landing-cell home-cell active" data-page="index.html" data-label="HOME">

    <!-- Isometric interactive world -->
    <div class="iso-world" id="isoWorld">

      <div class="iso-canvas" id="isoCanvas">

        <!-- Layer 1: isometric grid (SVG, drawn by JS) -->
        <svg class="iso-grid" xmlns="http://www.w3.org/2000/svg" id="isoGrid"></svg>

        <!-- Layer 2: building icons (above grid) -->
        <div class="iso-icons-layer">

          <!--
            iso_1.png → project2  (Cultivating Creative Resilience)
            iso_2.png → project1  (From Forest to Framework)
            iso_3.png → project5  (Portraits)
            Add more iso_N.png entries as you create new axo drawings.
          -->

          <div class="iso-icon-wrap" style="left:1520px; top:1660px;"
               data-href="projects/project2.html">
            <img src="img/iso 1.png" alt="Cultivating Creative Resilience" draggable="false">
            <span class="iso-icon-label">Cultivating Creative Resilience</span>
          </div>

          <div class="iso-icon-wrap" style="left:1960px; top:1380px;"
               data-href="projects/project1.html">
            <img src="img/iso 2.png" alt="From Forest to Framework" draggable="false">
            <span class="iso-icon-label">From Forest to Framework</span>
          </div>

          <div class="iso-icon-wrap" style="left:1160px; top:1880px;"
               data-href="projects/project6.html">
            <img src="img/iso 3.png" alt="Portraits" draggable="false">
            <span class="iso-icon-label">Portraits</span>
          </div>

        </div><!-- /iso-icons-layer -->

      </div><!-- /iso-canvas -->

      <span class="iso-hint">Drag to explore · Click to enter</span>

    </div><!-- /iso-world -->

    <!-- Name: inside home-cell, above iso-world -->
    <div class="home-name-inner">
      <span>ALEX</span>
      <span>VALENTINE</span>
      <span>EVDOKIMOV</span>
    </div>

  </div><!-- /home-cell -->

  <div class="landing-cell work-cell"    data-page="drawings.html" data-label="MY WORK"></div>
  <div class="landing-cell about-cell"   data-page="about.html"    data-label="ABOUT ME"></div>
  <div class="landing-cell contact-cell" data-page="contact.html"  data-label="CONTACTS"></div>

</div><!-- /landing-grid -->

<script>
/* ── Page navigation with fade ── */
function navigateTo(url) {
  if (!url) return;
  document.body.classList.add('is-leaving');
  requestAnimationFrame(() => { setTimeout(() => { window.location.href = url; }, 220); });
}

document.querySelectorAll('.landing-cell').forEach(cell => {
  cell.addEventListener('click', function(e) {
    if (this.classList.contains('active')) return;
    e.preventDefault();
    navigateTo(this.dataset.page);
  });
});

/* ── Generate isometric grid SVG ── */
(function buildGrid() {
  const svg = document.getElementById('isoGrid');
  const W = 4000, H = 4000;
  const TILE = 80;
  const cos30 = Math.sqrt(3) / 2;
  const sin30 = 0.5;
  const NUM = 60;
  let d = '';

  /* Family 1 — lines going NE–SW */
  for (let k = -NUM; k <= NUM * 2; k++) {
    const ox = W / 2 + k * TILE;
    const oy = H / 2;
    const len = NUM * 1.5;
    d += `M${ox - len*TILE*cos30},${oy - len*TILE*sin30} L${ox + len*TILE*cos30},${oy + len*TILE*sin30} `;
  }

  /* Family 2 — lines going NW–SE */
  for (let k = -NUM; k <= NUM * 2; k++) {
    const ox = W / 2 + k * TILE;
    const oy = H / 2;
    const len = NUM * 1.5;
    d += `M${ox + len*TILE*cos30},${oy - len*TILE*sin30} L${ox - len*TILE*cos30},${oy + len*TILE*sin30} `;
  }

  svg.setAttribute('viewBox', `0 0 ${W} ${H}`);
  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', d);
  path.setAttribute('stroke', 'rgba(0,0,0,0.06)');
  path.setAttribute('stroke-width', '0.75');
  path.setAttribute('fill', 'none');
  svg.appendChild(path);
})();

/* ── Draggable pan with reliable click detection ── */
(function initPan() {
  const world  = document.getElementById('isoWorld');
  const canvas = document.getElementById('isoCanvas');

  let panX = 0, panY = 0;
  let startX = 0, startY = 0;
  let dragging = false;
  let dragDist = 0; /* total distance moved during this press */

  function applyTransform() {
    canvas.style.transform = `translate(calc(-50% + ${panX}px), calc(-50% + ${panY}px))`;
  }

  /* ── Mouse ── */
  world.addEventListener('mousedown', e => {
    /* Allow drag from anywhere except icon images */
    dragging = true;
    dragDist = 0;
    startX = e.clientX - panX;
    startY = e.clientY - panY;
    world.classList.add('dragging');
    e.preventDefault();
  });

  window.addEventListener('mousemove', e => {
    if (!dragging) return;
    const newX = e.clientX - startX;
    const newY = e.clientY - startY;
    dragDist += Math.abs(newX - panX) + Math.abs(newY - panY);
    panX = newX;
    panY = newY;
    applyTransform();
  });

  window.addEventListener('mouseup', () => {
    dragging = false;
    world.classList.remove('dragging');
  });

  /* ── Touch ── */
  let touchStartX = 0, touchStartY = 0, touchDragDist = 0;

  world.addEventListener('touchstart', e => {
    if (e.touches.length === 1) {
      touchStartX = e.touches[0].clientX - panX;
      touchStartY = e.touches[0].clientY - panY;
      touchDragDist = 0;
    }
  }, { passive: true });

  world.addEventListener('touchmove', e => {
    if (e.touches.length !== 1) return;
    const newX = e.touches[0].clientX - touchStartX;
    const newY = e.touches[0].clientY - touchStartY;
    touchDragDist += Math.abs(newX - panX) + Math.abs(newY - panY);
    panX = newX;
    panY = newY;
    applyTransform();
  }, { passive: true });

  /* ── Icon clicks ── */
  document.querySelectorAll('.iso-icon-wrap').forEach(wrap => {
    /* Mouse click: only fire if almost no drag happened */
    wrap.addEventListener('click', e => {
      e.stopPropagation();
      /* dragDist is still set from the mouseup that preceded this click */
      if (dragDist < 8) {
        const href = wrap.dataset.href;
        if (href) navigateTo(href);
      }
    });

    /* Touch tap */
    wrap.addEventListener('touchend', e => {
      e.stopPropagation();
      if (touchDragDist < 12) {
        const href = wrap.dataset.href;
        if (href) navigateTo(href);
      }
    });
  });

  applyTransform();
})();
</script>

</body>
</html>