/* ============================================================
   Chromosome AR — stylesheet
   ------------------------------------------------------------
   All overlay UI (loading screen, start button, scan hint, error
   card, AR controls). The A-Frame <a-scene> fills the viewport
   automatically, so we only style the HTML we layer on top.
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  /* safe-area-inset handles iPhone notch / home-indicator zones */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.hidden { display: none !important; }

/* ---------------------------------------------------------
   START OVERLAY  (the big tap-to-begin card)
   --------------------------------------------------------- */
#start-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0a1428 0%, #1a3a6e 50%, #2c5aa0 100%);
  padding: 20px;
}

.start-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  animation: fadeInUp 0.6s ease;
}

.start-card h1 {
  font-size: 28px;
  margin-bottom: 16px;
  font-weight: 700;
}

.start-card p {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 24px;
}

.start-card .hint {
  font-size: 12px;
  margin-top: 16px;
  margin-bottom: 0;
  opacity: 0.6;
}

#start-button {
  background: linear-gradient(135deg, #4a90e2, #2c5aa0);
  color: #fff;
  border: none;
  padding: 16px 40px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#start-button:active {
  transform: scale(0.97);
  box-shadow: 0 3px 10px rgba(74, 144, 226, 0.4);
}

/* ---------------------------------------------------------
   LOADING SCREEN  (shown while MindAR boots)
   --------------------------------------------------------- */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;             /* flipped to flex by app.js */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 20, 40, 0.95);
  backdrop-filter: blur(10px);
}

#loading-screen.visible { display: flex; }

#loading-screen h1 {
  font-size: 20px;
  margin-top: 24px;
  font-weight: 600;
}

#loading-status {
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.7;
}

/* DNA-style spinner: six dots orbiting in a helix wobble */
.dna-spinner {
  position: relative;
  width: 60px;
  height: 60px;
}

.dna-spinner .dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #4a90e2;
  animation: dnaOrbit 1.4s linear infinite;
}

.dna-spinner .dot:nth-child(1) { animation-delay: 0s;    background: #4a90e2; }
.dna-spinner .dot:nth-child(2) { animation-delay: -0.2s; background: #6aa8ed; }
.dna-spinner .dot:nth-child(3) { animation-delay: -0.4s; background: #e24a6a; }
.dna-spinner .dot:nth-child(4) { animation-delay: -0.6s; background: #ed6a8a; }
.dna-spinner .dot:nth-child(5) { animation-delay: -0.8s; background: #4a90e2; }
.dna-spinner .dot:nth-child(6) { animation-delay: -1.0s; background: #e24a6a; }

@keyframes dnaOrbit {
  0%   { transform: rotate(0deg)   translateX(22px) scale(1);   }
  50%  { transform: rotate(180deg) translateX(22px) scale(0.5); }
  100% { transform: rotate(360deg) translateX(22px) scale(1);   }
}

/* ---------------------------------------------------------
   SCAN INSTRUCTIONS  (visible after load, before detection)
   --------------------------------------------------------- */
#scan-instructions {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;      /* so user can still interact below */
  animation: fadeIn 0.4s ease;
}

.scan-frame {
  position: relative;
  width: min(70vw, 280px);
  height: min(70vw, 280px);
  margin-bottom: 30px;
}

.corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid #4a90e2;
  animation: pulseBorder 1.6s ease-in-out infinite;
}

.corner.tl { top: 0;    left: 0;    border-right: none;  border-bottom: none; border-top-left-radius: 8px; }
.corner.tr { top: 0;    right: 0;   border-left: none;   border-bottom: none; border-top-right-radius: 8px; }
.corner.bl { bottom: 0; left: 0;    border-right: none;  border-top: none;    border-bottom-left-radius: 8px; }
.corner.br { bottom: 0; right: 0;   border-left: none;   border-top: none;    border-bottom-right-radius: 8px; }

@keyframes pulseBorder {
  0%, 100% { border-color: #4a90e2; box-shadow: 0 0 10px rgba(74, 144, 226, 0.3); }
  50%      { border-color: #6aa8ed; box-shadow: 0 0 24px rgba(74, 144, 226, 0.7); }
}

#scan-instructions p {
  font-size: 16px;
  text-align: center;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 30px;
  backdrop-filter: blur(10px);
  max-width: 80vw;
}

/* ---------------------------------------------------------
   AR CONTROLS  (mute button shown while AR is active)
   --------------------------------------------------------- */
#ar-controls {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 600;
  display: flex;
  gap: 12px;
  animation: fadeInUp 0.4s ease;
}

#ar-controls button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 16px;
  border-radius: 30px;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}

#mute-icon  { font-size: 22px; line-height: 1; }
#mute-label { font-size: 11px; opacity: 0.85; white-space: nowrap; }

#ar-controls button:active { transform: scale(0.9); }

/* ---------------------------------------------------------
   AR CANVAS  (WebGL alpha video — fixed size, never zooms)
   --------------------------------------------------------- */
#ar-canvas {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 700;
  pointer-events: none;
  /* size is set dynamically in JS to maintain aspect ratio */
}

/* ---------------------------------------------------------
   VIDEO OVERLAY  (fullscreen player — shown on target detect)
   --------------------------------------------------------- */
#video-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#overlay-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#overlay-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#overlay-mute {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 16px;
  border-radius: 30px;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

#mute-icon  { font-size: 22px; line-height: 1; }
#mute-label { font-size: 11px; opacity: 0.85; white-space: nowrap; }

/* ---------------------------------------------------------
   ERROR SCREEN
   --------------------------------------------------------- */
#error-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 20, 40, 0.95);
  padding: 20px;
}

.error-card {
  background: rgba(255, 80, 80, 0.12);
  border: 1px solid rgba(255, 80, 80, 0.4);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  max-width: 360px;
}

.error-card h2 { font-size: 20px; margin-bottom: 12px; }
.error-card p  { font-size: 14px; line-height: 1.5; opacity: 0.9; margin-bottom: 20px; }

.error-card button {
  background: #fff;
  color: #0a1428;
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------
   GENERIC ANIMATIONS
   --------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Make sure A-Frame canvas never blocks our UI events where it shouldn't */
.a-enter-vr, .a-enter-ar { display: none !important; }


/* Fix: ensure MindAR's camera video is visible */
.mindar-ui-overlay,
.a-canvas {
  background: transparent !important;
}

a-scene {
  background: transparent !important;
}

video {
  z-index: 1;
}

canvas.a-canvas {
  z-index: 2;
}



/* ============================================================
   FIX: ensure MindAR's camera video is visible
   ------------------------------------------------------------
   MindAR inserts its own <video> and <canvas> at document
   level. We need to make sure they're visible and positioned
   behind our HTML overlays but above the black body background.
   ============================================================ */

a-scene {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
}

a-scene .a-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* MindAR injects its camera video directly into <body> */
body > video {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

/* Make sure all our overlays sit above the camera */
#start-overlay  { z-index: 1000 !important; }
#loading-screen { z-index: 900  !important; }
#error-screen   { z-index: 2000 !important; }
#scan-instructions { z-index: 500 !important; }
#ar-controls    { z-index: 600  !important; }



/* ============================================================
   iPhone/Safari only — mix-blend-mode لإزالة الخلفية السودا
   ============================================================ */
@supports (-webkit-touch-callout: none) {
  canvas.a-canvas {
    mix-blend-mode: screen !important;
    background: transparent !important;
  }
}