/* ============================================================
   AeroVance — Entry Page Frame
   aerovance-index.css

   HOW TO ADD YOUR IMAGES:
   Find the three sections labelled "IMAGE SLOT" below and
   replace the url('...') placeholder with your image path.
   e.g.  url('images/home-bg.jpg')
============================================================ */
@font-face {
  font-family: 'Samarkan';
  src: url('./samarkan/SAMAN___.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  background: #000;
  cursor: none;
  font-family: 'Barlow Condensed', sans-serif;
}

/* ════════════════════════════
   CUSTOM CURSOR
════════════════════════════ */
.cur-dot {
  width: 8px; height: 8px;
  background: #fff; border-radius: 50%;
  position: fixed; pointer-events: none;
  z-index: 9999; mix-blend-mode: difference;
}
.cur-ring {
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: fixed; pointer-events: none;
  z-index: 9998; mix-blend-mode: difference;
}

/* ════════════════════════════
   LOGO
════════════════════════════ */
.logo {
  position: fixed; top: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  animation: fadeDown 1s 0.2s ease both;
}
.logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.logo-text {
  font-family: 'Samarkan', sans-serif;
  font-size: 20px; letter-spacing: 4px;
  color: #fff; text-transform: uppercase;
}
.logo-text span { color: #00D4FF; }

/* ════════════════════════════
   KEYFRAMES
════════════════════════════ */
@keyframes fadeDown {
  from { opacity: 0; transform: translate(-50%, -14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes panelReveal {
  from { opacity: 0; transform: scaleY(0.97); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes arrowPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.2); }
}

/* ════════════════════════════
   PANELS WRAPPER
════════════════════════════ */
.panels {
  width: 100%; height: 100%;
  display: flex;
}

/* ════════════════════════════
   SINGLE PANEL
════════════════════════════ */
.panel {
  position: relative;
  flex: 1; height: 100%;
  overflow: hidden; cursor: none;
  transition: flex 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  animation: panelReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.panel-1 { animation-delay: 0.05s; }
.panel-2 { animation-delay: 0.18s; }
.panel-3 { animation-delay: 0.31s; }

/* Expand on hover */
.panel:hover { flex: 2.2; }

/* Divider line between panels */
.panel:not(:last-child)::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 20%,
    rgba(255, 255, 255, 0.22) 80%,
    transparent 100%
  );
  z-index: 10;
}

/* ════════════════════════════
   BACKGROUND IMAGE LAYER
════════════════════════════ */
.panel-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Slightly zoomed out at rest, zooms to 100% on hover */
  transform: scale(1.08);
  filter: brightness(0.5) saturate(0.75);
  transition:
    transform 1.1s cubic-bezier(0.76, 0, 0.24, 1),
    filter 0.8s ease;
}
.panel:hover .panel-bg {
  transform: scale(1.0);
  filter: brightness(0.68) saturate(1);
}

/* ─────────────────────────────────────────────────────
   ★  IMAGE SLOT 1 — HOME panel
      Replace url('') with your image path
      Example: url('images/drone-sky.jpg')
───────────────────────────────────────────────────── */
.panel-1 .panel-bg {
  background-image: url('./images/pathway.webp');   /* ← YOUR HOME IMAGE HERE */
  background-color: #030D1A;  /* shown while image loads / as fallback */
}

/* ─────────────────────────────────────────────────────
   ★  IMAGE SLOT 2 — TECHNOLOGY panel
      Replace url('') with your image path
      Example: url('images/circuit-board.jpg')
───────────────────────────────────────────────────── */
.panel-2 .panel-bg {
  background-image: url('./images/pexels-sevenstormphotography-399973.jpg.webp');   /* ← YOUR TECHNOLOGY IMAGE HERE */
  background-color: #050A0F;
}

/* ─────────────────────────────────────────────────────
   ★  IMAGE SLOT 3 — PRODUCTS panel
      Replace url('') with your image path
      Example: url('images/drone-parts.jpg')
───────────────────────────────────────────────────── */
.panel-3 .panel-bg {
  background-image: url('./images/Victoria\ memorial\ angel.webp');   /* ← YOUR PRODUCTS IMAGE HERE */
  background-color: #0A0804;
}

/* ════════════════════════════
   DARK GRADIENT OVERLAY
   (sits on top of the image,
   keeps text legible)
════════════════════════════ */
.panel-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.10) 30%,
    rgba(0, 0, 0, 0.10) 60%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

/* ════════════════════════════
   PANEL CONTENT WRAPPER
════════════════════════════ */
.panel-content {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 32px;
}

/* Panel number — top-centre */
.panel-num {
  position: absolute; top: 48px; left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.25);
  z-index: 6; transition: color 0.4s;
}
.panel:hover .panel-num { color: rgba(255, 255, 255, 0.6); }

/* Title */
.panel-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 5.5vw, 82px);
  letter-spacing: 0.18em;
  color: #fff; text-align: center;
  line-height: 1; margin-bottom: 36px;
  white-space: nowrap;
  text-shadow: 0 2px 48px rgba(0, 0, 0, 0.7);
  /* Resting state: faint */
  opacity: 0.45;
  transition:
    opacity 0.5s ease,
    letter-spacing 0.6s ease,
    color 0.3s ease;
}
.panel:hover .panel-title {
  opacity: 1;
  letter-spacing: 0.24em;
}
/* Tint per panel on hover */
.panel-1:hover .panel-title { color: #7DDFFF; }
.panel-2:hover .panel-title { color: #00D4FF; }
.panel-3:hover .panel-title { color: #FFD068; }

/* Subtitle tagline */
.panel-sub {
  font-family: 'DM Mono', monospace;
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-align: center; margin-bottom: 44px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s 0.07s ease, transform 0.5s 0.07s ease;
}
.panel:hover .panel-sub { opacity: 1; transform: translateY(0); }

/* ENTER button */
.panel-btn {
  display: inline-block;
  background: rgba(255, 255, 255, 0.95);
  color: #080808;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 14px 44px;
  cursor: none;
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(10px);
  transition:
    opacity  0.5s 0.14s ease,
    transform 0.5s 0.14s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}
/* Shimmer sweep on hover */
.panel-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.panel-btn:hover::before { transform: translateX(100%); }
.panel-btn:hover {
  background: #fff;
  box-shadow: 0 6px 36px rgba(0, 0, 0, 0.45);
}
.panel:hover .panel-btn { opacity: 1; transform: translateY(0); }

/* ════════════════════════════
   BOTTOM SCROLL INDICATOR
════════════════════════════ */
.panel-bottom {
  position: absolute; bottom: 44px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  opacity: 0; transition: opacity 0.5s 0.1s ease;
}
.panel:hover .panel-bottom { opacity: 1; }
.panel-arrow {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent);
  animation: arrowPulse 1.5s ease-in-out infinite;
}
.panel-bottom-text {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 2px; color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase; white-space: nowrap;
}

/* ════════════════════════════
   RESPONSIVE (mobile)
════════════════════════════ */
@media (max-width: 700px) {
  .panels { flex-direction: column; }
  .panel  { flex: 1 !important; transition: flex 0.7s ease; }
  .panel:hover { flex: 2 !important; }
  .panel:not(:last-child)::after {
    top: auto; bottom: 0; left: 0;
    width: 100%; height: 1px;
  }
  .panel-title { font-size: clamp(28px, 7vw, 52px); }
  .logo { top: 20px; }

  /* Hide cursor on mobile */
.cur-dot, .cur-ring { display: none !important; }

/* Hide ENTER button */
.panel-btn { display: none !important; }

/* Always show title + sub + bottom on mobile (no hover state) */
.panel-title  { opacity: 1 !important; }
.panel-sub    { opacity: 1 !important; transform: translateY(0) !important; }
.panel-bottom { opacity: 1 !important; }

/* Normal cursor for touch */
body { cursor: auto !important; }
}