<?php /** @var string $content; @var string $title */ ?>
<!DOCTYPE html>
<html lang="<?= e(locale()) ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= e($title ?: 'Mystic Art Tattoo') ?> · Mystic Art Tattoo</title>
  <meta name="description" content="<?= e(t('meta.description')) ?>">
  <meta name="theme-color" content="#0a0a0a">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind.config = { theme: { extend: { colors: { ink: '#0a0a0a', slate: '#111113', bone: '#f5f5f2', gold: '#d4af37', goldDark: '#a08520' }, fontFamily: { sans: ['Inter','system-ui','sans-serif'], display: ['Playfair Display','serif'] } } } };</script>
  <link rel="stylesheet" href="<?= asset('css/site.css') ?>">
  <style>
    /* Scroll-reveal system */
    .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .reveal.revealed { opacity: 1; transform: translateY(0); }
    .reveal-left  { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .reveal-left.revealed  { opacity: 1; transform: translateX(0); }
    .reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .reveal-right.revealed { opacity: 1; transform: translateX(0); }
    .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .reveal-scale.revealed { opacity: 1; transform: scale(1); }
    .stagger > * { transition-delay: calc(var(--i, 0) * 120ms); }

    /* Parallax container */
    .parallax-bg { will-change: transform; transition: transform 0.1s linear; }

    /* Image hover zoom */
    .img-zoom { overflow: hidden; }
    .img-zoom img { transition: transform 0.7s cubic-bezier(0.16,1,0.3,1); }
    .img-zoom:hover img { transform: scale(1.08); }

    /* Grain overlay */
    .grain::after {
      content: ''; position: fixed; inset: -100%; z-index: 9999; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: 0.025; mix-blend-mode: overlay;
    }

    /* Horizontal scroll gallery */
    .gallery-scroll { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .gallery-scroll::-webkit-scrollbar { display: none; }
    .gallery-scroll > * { scroll-snap-align: center; flex-shrink: 0; }

    /* Gold line accent */
    .gold-line { width: 60px; height: 1px; background: linear-gradient(90deg, #d4af37, transparent); }

    [x-cloak] { display: none !important; }
  </style>
  <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  <script src="https://unpkg.com/htmx.org@1.9.10" defer></script>
</head>
<body class="bg-ink text-bone font-sans antialiased grain">
  <?= view('partials.public-nav') ?>
  <?php if ($f = flash()): ?>
    <?php foreach ($f as $k => $msg): ?>
      <div class="fixed top-24 right-6 z-50 rounded-xl border backdrop-blur-lg shadow-2xl <?= $k === 'error' ? 'border-red-500/30 bg-red-500/10 text-red-200' : 'border-gold/30 bg-gold/10 text-gold' ?> px-5 py-3.5 text-sm animate-fade-in-up">
        <?= e($msg) ?>
      </div>
    <?php endforeach; ?>
  <?php endif; ?>
  <main><?= $content ?></main>
  <?= view('partials.public-footer') ?>

  <script>
  // Intersection Observer for scroll-reveal
  (function() {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('revealed'); obs.unobserve(e.target); } });
    }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
    document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale').forEach(el => obs.observe(el));

    // Stagger children: set --i CSS variable
    document.querySelectorAll('.stagger').forEach(parent => {
      [...parent.children].forEach((child, i) => child.style.setProperty('--i', i));
    });

    // Simple parallax on scroll
    let ticking = false;
    window.addEventListener('scroll', () => {
      if (!ticking) { requestAnimationFrame(() => {
        const sy = window.scrollY;
        document.querySelectorAll('[data-parallax]').forEach(el => {
          const speed = parseFloat(el.dataset.parallax || 0.3);
          el.style.transform = 'translateY(' + (sy * speed) + 'px)';
        });
        ticking = false;
      }); ticking = true; }
    });
  })();
  </script>
</body>
</html>
