<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select Branch | FHS & BSL</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    :root {
      --fhs-gradient: linear-gradient(135deg, #4361ee, #7209b7);
      --bsl-gradient: linear-gradient(135deg, #06d6a0, #0b525b);
      --glass-bg: rgba(255, 255, 255, 0.08);
      --glass-border: rgba(255, 255, 255, 0.15);
      --text-light: #ffffff;
      --text-muted: rgba(255, 255, 255, 0.7);
      --card-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
      --card-shadow-hover: 0 35px 60px rgba(0, 0, 0, 0.4);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #0a0a1a;
      color: white;
      min-height: 100vh;
      overflow-x: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* Canvas for particles */
    #particle-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    /* Main content wrapper */
    .main-container {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1100px;
      padding: 2rem;
      text-align: center;
    }

    /* Top logo */
    .top-logo {
      margin-bottom: 2.5rem;
    }
    .top-logo img {
      height: 90px;
      filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
      transition: all 0.4s ease;
      animation: softGlow 3s ease-in-out infinite alternate;
    }
    @keyframes softGlow {
      0% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
      100% { filter: drop-shadow(0 0 25px rgba(255,255,255,0.8)); }
    }
    .top-logo img:hover {
      transform: scale(1.05);
      filter: drop-shadow(0 0 35px rgba(255,255,255,0.9));
    }

    /* Header section */
    .header h1 {
      font-weight: 800;
      font-size: 3.2rem;
      letter-spacing: -1px;
      background: linear-gradient(135deg, #ffffff 0%, #c0c0ff 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0.3rem;
    }
    .header p {
      font-weight: 400;
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.65);
      letter-spacing: 0.5px;
    }
    .header .divider {
      width: 80px;
      height: 3px;
      background: linear-gradient(90deg, #4361ee, #06d6a0);
      border-radius: 10px;
      margin: 1.2rem auto;
    }

    /* Cards row */
    .cards-row {
      display: flex;
      flex-wrap: wrap;
      gap: 2.5rem;
      justify-content: center;
      margin-top: 1.5rem;
    }

    /* Individual card wrapper (for 3D perspective) */
    .card-wrapper {
      perspective: 1500px;
      width: 340px;
      max-width: 90%;
    }

    /* Branch card */
    .branch-card {
      display: block;
      text-decoration: none;
      color: white;
      background: var(--glass-bg);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      border: 1px solid var(--glass-border);
      border-radius: 2rem;
      padding: 2.5rem 2rem;
      box-shadow: var(--card-shadow);
      transition: box-shadow 0.4s ease, transform 0.2s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transform-style: preserve-3d;
      transform: rotateX(0deg) rotateY(0deg);
      will-change: transform;
      width: 100%;
    }

    /* Glowing border effect on hover */
    .branch-card::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 2rem;
      padding: 2px;
      background: linear-gradient(135deg, rgba(67,97,238,0.7), rgba(6,214,160,0.7), rgba(245,158,11,0.7));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: -1;
    }
    .branch-card:hover::before {
      opacity: 1;
    }

    /* Card inner content */
    .card-content {
      position: relative;
      z-index: 2;
      text-align: center;
      transform: translateZ(20px);
    }

    /* Logo circle container */
    .logo-circle {
      width: 120px;
      height: 120px;
      margin: 0 auto 1.5rem;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 8px 25px rgba(0,0,0,0.2), inset 0 0 25px rgba(255,255,255,0.05);
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .branch-card:hover .logo-circle {
      transform: scale(1.05);
      border-color: rgba(255,255,255,0.5);
      box-shadow: 0 12px 35px rgba(67,97,238,0.3), inset 0 0 35px rgba(255,255,255,0.1);
      background: rgba(255, 255, 255, 0.12);
    }
    .logo-circle img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
      transition: transform 0.4s ease;
    }
    .branch-card:hover .logo-circle img {
      transform: scale(1.03);
    }

    /* Branch label */
    .branch-label {
      font-weight: 700;
      font-size: 1.3rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-top: 0.5rem;
      opacity: 0.85;
      transition: opacity 0.3s;
    }
    .branch-card:hover .branch-label {
      opacity: 1;
    }

    /* Accent stripe */
    .accent-stripe {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 5px;
      border-radius: 0 0 2rem 2rem;
      background: var(--fhs-gradient);
      transition: height 0.3s ease;
    }
    .bsl .accent-stripe {
      background: var(--bsl-gradient);
    }
    .branch-card:hover .accent-stripe {
      height: 10px;
    }

    /* Badge */
    .badge-branch {
      position: absolute;
      top: 18px;
      right: 18px;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border: 1px solid rgba(255,255,255,0.2);
      padding: 0.3rem 1rem;
      border-radius: 50px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 1.5px;
      z-index: 5;
      color: white;
      transition: all 0.3s ease;
    }
    .branch-card:hover .badge-branch {
      background: rgba(255,255,255,0.25);
      border-color: rgba(255,255,255,0.4);
      transform: translateY(-3px);
      box-shadow: 0 5px 18px rgba(0,0,0,0.3);
    }

    /* Open in new tab icon for BSL */
    .external-icon {
      display: inline-block;
      margin-left: 5px;
      font-size: 0.8rem;
      opacity: 0.7;
      transition: transform 0.3s;
    }
    .branch-card:hover .external-icon {
      transform: translate(2px, -2px);
      opacity: 1;
    }

    /* Footer */
    .footer-text {
      margin-top: 3rem;
      font-size: 0.85rem;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.4px;
    }
    .footer-text span {
      color: rgba(255,255,255,0.8);
      font-weight: 600;
    }

    /* Loading fade-in animation */
    .main-container {
      animation: fadeInUp 0.9s cubic-bezier(0.23, 1, 0.32, 1) both;
    }
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(35px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .header h1 {
        font-size: 2.3rem;
      }
      .card-wrapper {
        width: 300px;
      }
      .logo-circle {
        width: 100px;
        height: 100px;
      }
      .top-logo img {
        height: 65px;
      }
    }
    @media (max-width: 480px) {
      .cards-row {
        flex-direction: column;
        align-items: center;
        gap: 1.8rem;
      }
      .card-wrapper {
        width: 280px;
        max-width: 95%;
      }
      .branch-card {
        padding: 2rem 1.5rem;
      }
      .header h1 {
        font-size: 1.9rem;
      }
    }
  </style>
</head>
<body>
  <!-- Particle background canvas -->
  <canvas id="particle-canvas"></canvas>

  <!-- Main UI -->
  <div class="main-container">
    <!-- Top logo -->
    <div class="top-logo">
      <img src="../img/logo231.png" alt="Company Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
      <div style="display:none; font-size:2rem; font-weight:800; background: linear-gradient(135deg, #4361ee, #06d6a0); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">🏢 Logo</div>
    </div>

    <!-- Header -->
    <div class="header">
      <h1>Select Branch</h1>
      <p>Choose your destination to continue</p>
      <div class="divider"></div>
    </div>

    <!-- Cards -->
    <div class="cards-row">
      <!-- FHS Card -->
      <div class="card-wrapper" id="fhsCard">
        <a href="dashboard.php" class="branch-card" aria-label="FHS Branch Dashboard">
          <span class="badge-branch">🏥 FHS</span>
          <div class="card-content">
            <div class="logo-circle">
              <img src="../img/logo231.png" alt="FHS Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
              <div style="display:none; width:100%; height:100%; border-radius:50%; background:var(--fhs-gradient); align-items:center; justify-content:center; font-size:2rem; color:white; font-weight:800;">FHS</div>
            </div>
            <div class="branch-label">FHS Branch</div>
          </div>
          <div class="accent-stripe"></div>
        </a>
      </div>

      <!-- BSL Card -->
      <div class="card-wrapper" id="bslCard">
        <a href="https://atrdemolive.site/csample/fhs/bsl" class="branch-card bsl" target="_blank" rel="noopener noreferrer" aria-label="BSL Branch Dashboard (opens in new tab)">
          <span class="badge-branch">🏢 BSL <span class="external-icon">↗</span></span>
          <div class="card-content">
            <div class="logo-circle">
              <img src="../bsl/img/logo231.png" alt="BSL Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
              <div style="display:none; width:100%; height:100%; border-radius:50%; background:var(--bsl-gradient); align-items:center; justify-content:center; font-size:2rem; color:white; font-weight:800;">BSL</div>
            </div>
            <div class="branch-label">BSL Branch</div>
          </div>
          <div class="accent-stripe"></div>
        </a>
      </div>
    </div>

    <p class="footer-text">🔒 Secure access · <span>FHS & BSL</span> · Management System</p>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <!-- 3D Tilt & Particle Script -->
  <script>
    (function() {
      // ==================== 3D Tilt Effect ====================
      const cards = document.querySelectorAll('.card-wrapper');
      
      cards.forEach(card => {
        const link = card.querySelector('.branch-card');
        if (!link) return;

        card.addEventListener('mousemove', (e) => {
          const rect = card.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          
          const centerX = rect.width / 2;
          const centerY = rect.height / 2;
          
          const rotateX = ((y - centerY) / centerY) * -12; // up/down tilt
          const rotateY = ((x - centerX) / centerX) * 12;  // left/right tilt
          
          link.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
        });

        card.addEventListener('mouseleave', () => {
          link.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)';
        });

        // Reset on touch devices
        card.addEventListener('touchmove', (e) => {
          e.preventDefault();
          const touch = e.touches[0];
          const rect = card.getBoundingClientRect();
          const x = touch.clientX - rect.left;
          const y = touch.clientY - rect.top;
          const centerX = rect.width / 2;
          const centerY = rect.height / 2;
          const rotateX = ((y - centerY) / centerY) * -10;
          const rotateY = ((x - centerX) / centerX) * 10;
          link.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.01)`;
        }, { passive: false });

        card.addEventListener('touchend', () => {
          link.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)';
        });
      });

      // ==================== Particle Background ====================
      const canvas = document.getElementById('particle-canvas');
      const ctx = canvas.getContext('2d');
      
      let width, height;
      let particles = [];
      const particleCount = 70;
      const connectionDistance = 130;
      const colors = ['rgba(67, 97, 238, 0.8)', 'rgba(6, 214, 160, 0.8)', 'rgba(245, 158, 11, 0.8)', 'rgba(255, 255, 255, 0.7)'];

      function resizeCanvas() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
        initParticles();
      }

      function initParticles() {
        particles = [];
        for (let i = 0; i < particleCount; i++) {
          particles.push({
            x: Math.random() * width,
            y: Math.random() * height,
            vx: (Math.random() - 0.5) * 0.6,
            vy: (Math.random() - 0.5) * 0.6,
            radius: Math.random() * 3 + 1.2,
            color: colors[Math.floor(Math.random() * colors.length)]
          });
        }
      }

      function drawParticles() {
        ctx.clearRect(0, 0, width, height);
        
        // Update & draw particles
        for (let i = 0; i < particles.length; i++) {
          const p = particles[i];
          
          p.x += p.vx;
          p.y += p.vy;
          
          // Boundary wrap
          if (p.x < 0) p.x = width;
          if (p.x > width) p.x = 0;
          if (p.y < 0) p.y = height;
          if (p.y > height) p.y = 0;
          
          ctx.beginPath();
          ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
          ctx.fillStyle = p.color;
          ctx.fill();
        }
        
        // Draw connections
        for (let i = 0; i < particles.length; i++) {
          for (let j = i + 1; j < particles.length; j++) {
            const dx = particles[i].x - particles[j].x;
            const dy = particles[i].y - particles[j].y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            
            if (dist < connectionDistance) {
              const opacity = 1 - dist / connectionDistance;
              ctx.beginPath();
              ctx.moveTo(particles[i].x, particles[i].y);
              ctx.lineTo(particles[j].x, particles[j].y);
              ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.25})`;
              ctx.lineWidth = 0.8;
              ctx.stroke();
            }
          }
        }
        
        requestAnimationFrame(drawParticles);
      }

      window.addEventListener('resize', resizeCanvas);
      resizeCanvas();
      drawParticles();

      // ==================== Click Ripple Effect on Card ====================
      document.querySelectorAll('.branch-card').forEach(card => {
        card.addEventListener('click', function(e) {
          // Prevent multiple ripples if already animating (optional)
          const ripple = document.createElement('span');
          ripple.className = 'click-ripple';
          ripple.style.position = 'absolute';
          ripple.style.borderRadius = '50%';
          ripple.style.background = 'rgba(255,255,255,0.35)';
          ripple.style.width = '20px';
          ripple.style.height = '20px';
          ripple.style.left = (e.clientX - this.getBoundingClientRect().left - 10) + 'px';
          ripple.style.top = (e.clientY - this.getBoundingClientRect().top - 10) + 'px';
          ripple.style.animation = 'rippleEffect 0.7s ease-out forwards';
          ripple.style.pointerEvents = 'none';
          ripple.style.zIndex = '10';
          this.appendChild(ripple);
          
          setTimeout(() => {
            ripple.remove();
          }, 700);
        });
      });

      // Add ripple keyframes dynamically
      const styleSheet = document.createElement("style");
      styleSheet.textContent = `
        @keyframes rippleEffect {
          0% { transform: scale(0); opacity: 0.8; }
          100% { transform: scale(15); opacity: 0; }
        }
      `;
      document.head.appendChild(styleSheet);

    })();
  </script>

    <link rel="stylesheet" href="../css/responsive-mobile.css">
    <script src="../js/responsive-mobile.js"></script>
</body>
</html>