<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Gemmer-Western.de – demnächst</title>

  <!-- Moderne Script-Schrift -->
  <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=Dancing+Script:wght@500;600;700&display=swap" rel="stylesheet">

  <style>
    :root{
      --white: #fff;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }

    body{
      overflow: hidden;
      background: #000;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Animierter Hintergrund */
    .bg{
      position: fixed;
      inset: 0;
      background-image: url("Unbenannt (1).jpg");
      background-size: cover;
      background-position: center;
      transform: scale(1.05);
      animation: bgKenBurns 18s ease-in-out infinite alternate;
      will-change: transform, filter;
      filter: saturate(1.05) contrast(1.05);
      z-index: 0;
    }

    /* leichte Abdunklung für bessere Lesbarkeit */
    .overlay{
      position: fixed;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45));
      pointer-events: none;
      z-index: 1;
    }

    /* Partikel-Canvas Overlay */
    #particles{
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      opacity: 0.95;
    }

    /* Content zentriert */
    .wrap{
      position: relative;
      z-index: 3;
      height: 100%;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .card{
      text-align: center;
      color: var(--white);
      padding: clamp(18px, 3vw, 34px) clamp(16px, 4vw, 44px);
      border-radius: 18px;
      background: rgba(0,0,0,.14);
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,.10);
      animation: cardFloat 6s ease-in-out infinite;
      max-width: 920px;
      position: relative;
    }

    /* dezente Licht-Wolken hinter Text */
    .spark{
      position: absolute;
      inset: -30px;
      border-radius: 26px;
      pointer-events: none;
      background: radial-gradient(600px 240px at 20% 15%, rgba(255,255,255,.14), transparent 55%),
                  radial-gradient(520px 220px at 80% 85%, rgba(255,255,255,.10), transparent 60%);
      filter: blur(1px);
      opacity: .7;
      animation: shimmer 8s ease-in-out infinite alternate;
    }

    .headline{
      font-family: "Dancing Script", cursive;
      font-size: clamp(40px, 5.2vw, 78px);
      line-height: 1.05;
      margin: 0 0 10px 0;
      letter-spacing: .2px;
      text-shadow: 0 10px 30px rgba(0,0,0,.55);
      animation: textReveal 900ms ease-out both;
      position: relative;
      z-index: 1;
    }

    .subline{
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: clamp(18px, 2.2vw, 28px);
      letter-spacing: .12em;
      margin: 0;
      opacity: .95;
      text-shadow: 0 10px 30px rgba(0,0,0,.55);
      animation: textReveal 900ms ease-out both;
      animation-delay: 160ms;
      position: relative;
      z-index: 1;
    }

    @keyframes bgKenBurns{
      0%   { transform: scale(1.05) translate3d(0,0,0); }
      50%  { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
      100% { transform: scale(1.07) translate3d(1.2%, 1.4%, 0); }
    }

    @keyframes cardFloat{
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }

    @keyframes textReveal{
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes shimmer{
      0%   { transform: translate3d(0,0,0) scale(1.0); opacity: .55; }
      100% { transform: translate3d(1.2%, -1.1%, 0) scale(1.02); opacity: .8; }
    }

    @media (max-width: 420px){
      .subline{ letter-spacing: .08em; }
      .card{ border-radius: 14px; }
    }

    @media (prefers-reduced-motion: reduce){
      .bg, .card, .headline, .subline, .spark { animation: none !important; }
      #particles { display: none !important; }
    }
  </style>
</head>

<body>
  <div class="bg" aria-hidden="true"></div>
  <div class="overlay" aria-hidden="true"></div>
  <canvas id="particles" aria-hidden="true"></canvas>

  <main class="wrap">
    <section class="card" role="region" aria-label="Hinweis">
      <div class="spark" aria-hidden="true"></div>
      <h1 class="headline">Hier entsteht demnächst eine neue Website</h1>
      <p class="subline">Gemmer-Western.de</p>
    </section>
  </main>

  <script>
    (function () {
      const canvas = document.getElementById("particles");
      const ctx = canvas.getContext("2d", { alpha: true });

      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (prefersReducedMotion) return;

      let w = 0, h = 0, dpr = 1;

      function resize() {
        dpr = Math.max(1, Math.min(2, window.devicePixelRatio || 1));
        w = Math.floor(window.innerWidth);
        h = Math.floor(window.innerHeight);
        canvas.width = Math.floor(w * dpr);
        canvas.height = Math.floor(h * dpr);
        canvas.style.width = w + "px";
        canvas.style.height = h + "px";
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      }
      window.addEventListener("resize", resize, { passive: true });
      resize();

      // -------------------------
      // Western-Dust + Light Streaks
      // -------------------------
      const dust = [];
      const streaks = [];

      // Dichte dynamisch, aber gedeckelt
      const dustCount = Math.round(Math.min(180, Math.max(90, (w * h) / 15000)));
      const streakCount = Math.round(Math.min(18, Math.max(8, (w * h) / 120000)));

      function rand(min, max) { return Math.random() * (max - min) + min; }

      // warmer "Sand"-Farbton (sehr transparent)
      function warmColor(alpha) {
        // leicht warm (sand/sepia), bleibt subtil
        // rgba(245, 231, 200, a)
        return `rgba(245,231,200,${alpha.toFixed(3)})`;
      }

      function makeDust() {
        const r = rand(0.7, 2.0);
        const baseA = rand(0.06, 0.22);
        return {
          x: rand(0, w),
          y: rand(0, h),
          r,
          // leichter Drift nach rechts + nach oben (Staub)
          vx: rand(0.02, 0.22),
          vy: rand(-0.28, -0.05),
          a: baseA,
          tw: rand(0.004, 0.014),
          phase: rand(0, Math.PI * 2)
        };
      }

      function makeStreak() {
        // feine Lichtfäden, diagonal, sehr transparent
        const len = rand(120, 360);
        const thickness = rand(0.8, 1.6);
        const speed = rand(0.10, 0.32);
        const angle = rand(-0.9, -0.35); // radians-ish direction (upwards)
        return {
          x: rand(-w * 0.2, w * 1.2),
          y: rand(h * 0.2, h * 1.2),
          len,
          thickness,
          speed,
          angle,
          a: rand(0.03, 0.08),
          wobble: rand(0.0015, 0.004),
          phase: rand(0, Math.PI * 2)
        };
      }

      for (let i = 0; i < dustCount; i++) dust.push(makeDust());
      for (let i = 0; i < streakCount; i++) streaks.push(makeStreak());

      let t = 0;

      function drawVignette() {
        ctx.save();
        const grd = ctx.createRadialGradient(
          w * 0.5, h * 0.55, Math.min(w,h) * 0.12,
          w * 0.5, h * 0.55, Math.max(w,h) * 0.75
        );
        grd.addColorStop(0, "rgba(255,255,255,0.02)");
        grd.addColorStop(1, "rgba(0,0,0,0.00)");
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, w, h);
        ctx.restore();
      }

      function tick() {
        t += 1;

        ctx.clearRect(0, 0, w, h);
        drawVignette();

        // Lichtfäden zuerst (hinter Staub)
        for (let i = 0; i < streaks.length; i++) {
          const s = streaks[i];

          // Bewegung entlang Winkel
          const dx = Math.cos(s.angle) * s.speed;
          const dy = Math.sin(s.angle) * s.speed;

          // Wobble minimal
          const wob = Math.sin(s.phase + t * s.wobble) * 0.35;
          s.x += dx + wob;
          s.y += dy;

          // Wrap
          if (s.x > w + 220 || s.y < -220) {
            s.x = rand(-w * 0.2, w * 1.2);
            s.y = rand(h * 0.7, h * 1.25);
          }

          const x2 = s.x + Math.cos(s.angle) * s.len;
          const y2 = s.y + Math.sin(s.angle) * s.len;

          ctx.save();
          ctx.lineWidth = s.thickness;
          ctx.lineCap = "round";

          // Gradient entlang der Linie (glow in der Mitte)
          const g = ctx.createLinearGradient(s.x, s.y, x2, y2);
          g.addColorStop(0, "rgba(255,255,255,0.00)");
          g.addColorStop(0.45, `rgba(255,244,220,${(s.a * 1.2).toFixed(3)})`);
          g.addColorStop(1, "rgba(255,255,255,0.00)");
          ctx.strokeStyle = g;

          ctx.beginPath();
          ctx.moveTo(s.x, s.y);
          ctx.lineTo(x2, y2);
          ctx.stroke();
          ctx.restore();
        }

        // Staub/Sand-Partikel
        for (let i = 0; i < dust.length; i++) {
          const p = dust[i];

          p.x += p.vx;
          p.y += p.vy;

          // Twinkle (sehr subtil)
          const tw = (Math.sin(p.phase + t * p.tw) + 1) / 2; // 0..1
          const alpha = p.a * (0.70 + 0.30 * tw);

          // Wrap: wenn oben raus, unten neu; wenn rechts raus, links neu
          if (p.y < -12) { p.y = h + 12; p.x = rand(-10, w * 0.6); }
          if (p.x > w + 12) { p.x = -12; p.y = rand(h * 0.3, h + 10); }

          // leichtes "Soft Glow"
          ctx.save();
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
          ctx.fillStyle = warmColor(alpha);
          ctx.shadowBlur = 8;
          ctx.shadowColor = "rgba(255,225,170,0.25)";
          ctx.fill();
          ctx.restore();
        }

        requestAnimationFrame(tick);
      }

      requestAnimationFrame(tick);
    })();
  </script>
</body>
</html>