---
// Preloader: logo scale-in + loading bar + split-door reveal
// Phase 2 — Organic Fluidity Premium
---
<div id="preloader" class="fixed inset-0 z-[9998] flex flex-col items-center justify-center" style="background: var(--hds-bg);">
  <div class="flex flex-col items-center gap-8">
    <img
      id="preloader-logo"
      src="/logo/hds-color.svg"
      alt="Hosting del Sur"
      class="h-16 w-auto opacity-0"
    />
    <div id="preloader-bar" class="w-48 h-[3px] rounded-full overflow-hidden" style="background: var(--hds-line);">
      <div id="preloader-bar-fill" class="h-full" style="background: var(--color-hds-naranja); width: 0%; border-radius: inherit;"></div>
    </div>
  </div>
</div>

<script is:inline>
  (function() {
    var hasVisited = sessionStorage.getItem('hds-preloaded');

    if (hasVisited) {
      var el = document.getElementById('preloader');
      if (el) el.remove();
      return;
    }

    sessionStorage.setItem('hds-preloaded', '1');

    var logo = document.getElementById('preloader-logo');
    var barFill = document.getElementById('preloader-bar-fill');
    var preloader = document.getElementById('preloader');

    if (!logo || !barFill || !preloader) return;

    // Lightweight inline tween engine (avoids bundle dependency)
    var start = performance.now();
    var duration = 1800;

    function easeOut(t) { return 1 - Math.pow(1 - t, 3); }
    function easeInOut(t) { return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; }

    function step(time) {
      var elapsed = time - start;
      var progress = Math.min(elapsed / duration, 1);

      // Phase 1 (0-28%): logo fade in + unblur
      var p1 = Math.min(progress / 0.28, 1);
      logo.style.opacity = easeOut(p1);
      logo.style.filter = 'blur(' + ((1 - easeOut(p1)) * 8) + 'px)';

      // Phase 2 (28%-72%): bar fill
      var p2 = progress < 0.28 ? 0 : Math.min((progress - 0.28) / 0.44, 1);
      barFill.style.width = (easeInOut(p2) * 100) + '%';

      // Phase 3 (82%-100%): slide up
      var p3 = progress < 0.82 ? 0 : Math.min((progress - 0.82) / 0.18, 1);
      preloader.style.transform = 'translateY(' + (easeInOut(p3) * -100) + '%)';

      if (progress < 1) {
        requestAnimationFrame(step);
      } else {
        preloader.style.pointerEvents = 'none';
        preloader.style.transform = 'translateY(-100%)';
      }
    }

    requestAnimationFrame(step);
  })();
</script>

<style>
  #preloader {
    transition: none;
  }
  #preloader-logo {
    filter: blur(8px);
  }
</style>
