/* =============================================
   VARANT CYBERTECH — Cinematic Intro Screen
   Inspired by COCON Conference aesthetic
   ============================================= */

#intro-screen {
  position: fixed; inset: 0; z-index: 99999;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  cursor: default;
}

#intro-screen.fade-out {
  animation: introFadeOut 1.2s cubic-bezier(0.4,0,0.2,1) forwards;
  pointer-events: none;
}

@keyframes introFadeOut {
  0%   { opacity:1; transform:scale(1) translateY(0); }
  60%  { opacity:1; transform:scale(1.02) translateY(-8px); }
  100% { opacity:0; transform:scale(1.04) translateY(-20px); }
}

/* ── Scanlines overlay ── */
#intro-screen::before {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,200,220,0.012) 2px,
    rgba(0,200,220,0.012) 4px
  );
  pointer-events:none; z-index:2;
  animation: scanMove 12s linear infinite;
}
@keyframes scanMove { 0%{background-position:0 0;} 100%{background-position:0 200px;} }

/* ── Grid background ── */
.intro-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,200,220,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,220,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: gridPulse 4s ease-in-out infinite;
}
@keyframes gridPulse { 0%,100%{opacity:0.25;} 50%{opacity:0.6;} }

/* ── Ambient orbs ── */
.intro-orb {
  position:absolute; border-radius:50%; filter:blur(110px);
  pointer-events:none;
}
.intro-orb-1 {
  width:700px; height:700px;
  background: radial-gradient(circle, rgba(0,200,220,0.1), transparent 70%);
  top:-200px; left:-150px;
  animation: orbDrift1 8s ease-in-out infinite;
}
.intro-orb-2 {
  width:500px; height:500px;
  background: radial-gradient(circle, rgba(0,102,255,0.09), transparent 70%);
  bottom:-100px; right:-100px;
  animation: orbDrift2 10s ease-in-out infinite;
}
.intro-orb-3 {
  width:300px; height:300px;
  background: radial-gradient(circle, rgba(168,85,247,0.07), transparent 70%);
  top:30%; right:15%;
  animation: orbDrift1 6s ease-in-out infinite reverse;
}
@keyframes orbDrift1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(50px,30px);} }
@keyframes orbDrift2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-40px,-25px);} }

/* ── Corner brackets ── */
.intro-corner {
  position:absolute; width:50px; height:50px; z-index:5;
  opacity:0; animation: cornerFade 0.5s ease 0.3s forwards;
}
@keyframes cornerFade { to{opacity:1;} }

.intro-corner::before, .intro-corner::after {
  content:''; position:absolute; background:#00c8dc;
  box-shadow: 0 0 8px rgba(0,200,220,0.6);
}
.intro-corner::before { width:2px; height:100%; top:0; left:0; }
.intro-corner::after  { width:100%; height:2px; top:0; left:0; }
.intro-corner.tl { top:32px; left:32px; }
.intro-corner.tr { top:32px; right:32px; transform:scaleX(-1); }
.intro-corner.bl { bottom:32px; left:32px; transform:scaleY(-1); }
.intro-corner.br { bottom:32px; right:32px; transform:scale(-1); }

/* ── Main content area ── */
.intro-content {
  position:relative; z-index:10;
  text-align:center; padding:2rem 1rem;
  max-width: 700px;
}

/* ── Logo reveal ── */
.intro-logo-wrap {
  margin:0 auto 2.5rem;
  width:130px; height:130px;
  position:relative; display:flex;
  align-items:center; justify-content:center;
}

.intro-logo-ring {
  position:absolute; inset:-10px;
  border:2px solid transparent;
  border-top-color:#00c8dc;
  border-right-color:rgba(0,200,220,0.3);
  border-radius:50%;
  animation: spinRing 2s linear infinite;
}
.intro-logo-ring-2 {
  position:absolute; inset:-20px;
  border:1px solid transparent;
  border-bottom-color:rgba(0,200,220,0.25);
  border-left-color:rgba(0,200,220,0.25);
  border-radius:50%;
  animation: spinRing 4s linear infinite reverse;
}
.intro-logo-ring-3 {
  position:absolute; inset:-32px;
  border:1px solid rgba(0,200,220,0.08);
  border-radius:50%;
  animation: spinRing 8s linear infinite;
}
@keyframes spinRing { to{transform:rotate(360deg);} }

.intro-logo-img {
  width:130px; height:130px;
  border-radius:50%; object-fit:cover;
  background:#fff;
  opacity:0; transform:scale(0.5) rotate(-10deg);
  animation: logoReveal 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.6s forwards;
  border:2px solid rgba(0,200,220,0.4);
  box-shadow:
    0 0 0 4px rgba(0,200,220,0.05),
    0 0 40px rgba(0,200,220,0.25),
    0 0 80px rgba(0,200,220,0.1);
}
@keyframes logoReveal {
  to { opacity:1; transform:scale(1) rotate(0deg); }
}

/* ── Brand name ── */
.intro-brand {
  font-family:'Orbitron', monospace;
  font-size: clamp(1.8rem, 5.5vw, 4rem);
  font-weight:900;
  letter-spacing:0.1em;
  color:#fff;
  min-height:1.2em;
  margin-bottom:0.5rem;
  text-shadow: 0 0 30px rgba(0,200,220,0.2);
}
.intro-brand .letter {
  display:inline-block;
  opacity:0; transform:translateY(40px) scale(0.8);
  animation: letterUp 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.intro-brand .teal  { color:#00c8dc; text-shadow:0 0 20px rgba(0,200,220,0.6); }
.intro-brand .space { display:inline-block; width:0.35em; }
@keyframes letterUp { to{opacity:1;transform:translateY(0) scale(1);} }

/* ── Divider line ── */
.intro-line {
  width:0; height:1px;
  background:linear-gradient(90deg, transparent, #00c8dc, rgba(0,102,255,0.6), transparent);
  margin:1.25rem auto;
  box-shadow: 0 0 12px rgba(0,200,220,0.4);
  animation: lineExpand 0.9s ease 1.9s forwards;
}
@keyframes lineExpand { to{width:320px;} }

/* ── Tagline ── */
.intro-tagline {
  font-family:'Rajdhani', sans-serif;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  letter-spacing:0.45em;
  color:rgba(255,255,255,0.45);
  text-transform:uppercase;
  opacity:0;
  animation: fadeSlideIn 0.7s ease 2.1s forwards;
}
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

/* ── Progress bar ── */
.intro-progress-wrap {
  width:300px; margin:2rem auto 0;
  opacity:0;
  animation: fadeSlideIn 0.5s ease 2.4s forwards;
}
.intro-progress-track {
  height:2px; background:rgba(255,255,255,0.07);
  border-radius:2px; overflow:hidden;
  box-shadow: 0 0 8px rgba(0,200,220,0.1);
}
.intro-progress-fill {
  height:100%;
  background:linear-gradient(90deg, #00c8dc, #0066ff, #00ffcc);
  background-size:200% 100%;
  width:0%; border-radius:2px;
  animation: progressRun 1.6s ease 2.5s forwards, shimmer 1.5s linear 2.5s infinite;
}
@keyframes progressRun { to{width:100%;} }
@keyframes shimmer { 0%{background-position:0% 0%;} 100%{background-position:200% 0%;} }

.intro-progress-label {
  display:flex; justify-content:space-between; margin-top:8px;
  font-family:'Orbitron', monospace; font-size:0.52rem;
  color:rgba(255,255,255,0.25); letter-spacing:0.08em;
}

/* ── Status text ── */
.intro-status {
  font-family:'Orbitron', monospace;
  font-size:0.62rem; letter-spacing:0.35em;
  color:#00c8dc; margin-top:1rem;
  opacity:0; animation: fadeSlideIn 0.5s ease 2.6s forwards;
}
.intro-status::before { content:'[ '; color:rgba(0,200,220,0.5); }
.intro-status::after  { content:' ]'; color:rgba(0,200,220,0.5); }

/* ── Skip button ── */
.intro-skip {
  position:absolute; bottom:36px; right:44px;
  font-family:'Orbitron', monospace; font-size:0.58rem;
  letter-spacing:0.2em; color:rgba(255,255,255,0.25);
  background:none; border:1px solid rgba(255,255,255,0.08);
  padding:8px 18px; border-radius:2px;
  cursor:pointer; transition:all 0.3s; z-index:20;
  opacity:0; animation:fadeSlideIn 0.5s ease 0.8s forwards;
}
.intro-skip:hover { color:#00c8dc; border-color:rgba(0,200,220,0.4); background:rgba(0,200,220,0.05); }

/* ── Floating particles ── */
.intro-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.particle {
  position:absolute; border-radius:50%; opacity:0;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0%   { opacity:0;   transform:translateY(100vh) scale(0); }
  10%  { opacity:0.6; }
  90%  { opacity:0.3; }
  100% { opacity:0;   transform:translateY(-20vh) scale(1); }
}

/* ════════════════════════════════════════
   CHATBOT EXTRAS
════════════════════════════════════════ */
.bot-mode-bar {
  font-family:'Orbitron', monospace; font-size:0.55rem;
  letter-spacing:0.12em; color:rgba(0,200,220,0.5);
  background:rgba(0,200,220,0.04);
  border-bottom:1px solid rgba(0,200,220,0.1);
  padding:5px 14px;
  display:flex; align-items:center; gap:8px;
}
.bot-mode-bar::before {
  content:''; width:5px; height:5px;
  background:#00ffcc; border-radius:50%;
  animation: botPing 1.5s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes botPing { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.3;transform:scale(0.7);} }

.bot-typing {
  display:flex; gap:4px; padding:10px 14px;
  background:rgba(0,200,220,0.06);
  border:1px solid rgba(0,200,220,0.12);
  border-radius:4px 12px 12px 12px;
  align-self:flex-start; width:fit-content;
}
.bot-typing span {
  width:6px; height:6px; background:#00c8dc; border-radius:50%;
  animation:typingBounce 1.4s ease-in-out infinite;
}
.bot-typing span:nth-child(2){animation-delay:0.2s;}
.bot-typing span:nth-child(3){animation-delay:0.4s;}
@keyframes typingBounce {
  0%,60%,100%{transform:translateY(0);opacity:0.4;}
  30%{transform:translateY(-6px);opacity:1;}
}

.bot-msg a { color:#00c8dc; text-decoration:underline; }
.bot-msg strong { color:#fff; }

/* ════════════════════════════════════════
   MODALS
════════════════════════════════════════ */
.success-box {
  background:#0a1a2e;
  border:1px solid rgba(0,200,220,0.3);
  border-radius:12px; padding:3rem 2.5rem;
  text-align:center; max-width:440px; width:90%;
  box-shadow:0 0 80px rgba(0,200,220,0.12);
  animation: modalPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalPop { from{transform:scale(0.7);opacity:0;} to{transform:scale(1);opacity:1;} }
.success-icon { font-size:4rem; display:block; margin-bottom:1rem; animation:iconBounce 0.6s ease 0.2s both; }
@keyframes iconBounce { from{transform:scale(0) rotate(-20deg);} to{transform:scale(1) rotate(0);} }
.success-box h3 { font-family:'Orbitron',monospace; color:#00ffcc; font-size:0.95rem; letter-spacing:0.1em; margin-bottom:0.75rem; }
.success-box p  { color:#8899aa; font-size:0.9rem; line-height:1.7; margin-bottom:1.75rem; }
.success-close  {
  background:linear-gradient(135deg,#00c8dc,#0066ff);
  color:#020810; border:none; border-radius:4px;
  padding:13px 36px; font-family:'Orbitron',monospace;
  font-size:0.7rem; letter-spacing:0.15em; cursor:pointer;
  transition:all 0.3s;
}
.success-close:hover { transform:translateY(-2px); box-shadow:0 0 25px rgba(0,200,220,0.5); }

.book-box {
  background:#0a1a2e;
  border:1px solid rgba(0,200,220,0.25);
  border-radius:12px; padding:2.25rem;
  max-width:500px; width:94%;
  box-shadow:0 0 80px rgba(0,200,220,0.1);
  animation: modalPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
  max-height:92vh; overflow-y:auto;
}
.book-box h3 { font-family:'Orbitron',monospace; color:#00c8dc; font-size:0.85rem; letter-spacing:0.1em; margin-bottom:0.5rem; }
.book-box > p { color:#8899aa; font-size:0.85rem; margin-bottom:1.5rem; }
.book-close { float:right; background:none; border:none; color:#8899aa; font-size:1.4rem; cursor:pointer; transition:color 0.2s; }
.book-close:hover { color:#fff; }
.book-field { margin-bottom:1rem; }
.book-field label { display:block; font-family:'Orbitron',monospace; font-size:0.6rem; color:#00c8dc; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:6px; }
.book-field input, .book-field select, .book-field textarea {
  width:100%; background:rgba(2,8,16,0.8);
  border:1px solid rgba(0,200,220,0.15); border-radius:4px;
  padding:11px 14px; color:#f0f8ff;
  font-family:'Inter',sans-serif; font-size:0.9rem;
  outline:none; transition:border 0.25s, box-shadow 0.25s;
}
.book-field input:focus, .book-field select:focus, .book-field textarea:focus {
  border-color:#00c8dc; box-shadow:0 0 12px rgba(0,200,220,0.12);
}
.book-field textarea { min-height:80px; resize:vertical; }
.book-field select option { background:#0a1a2e; }
.book-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.hp-field { display:none !important; }

@media(max-width:480px) {
  .book-row { grid-template-columns:1fr; }
  .intro-corner { display:none; }
  .intro-brand { font-size:1.6rem; }
}