:root {
  --primary: #2c3e50;
  --accent: #3498db;
  --success: #27ae60;
  --error: #e74c3c;
  --bg-color: #ffffff;
  --card-bg: #f9f9f9;
  --footer-color: #555555;
  --btn-color: #2c3e50;
  --btn-hover: #34495e;
  --shadow: rgba(0,0,0,0.15);
}

/* Global */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Arial', sans-serif; background:var(--bg-color); color:var(--primary); display:flex; flex-direction:column; min-height:100vh; }

/* Header */
header { padding:20px; text-align:center; background:#fff; box-shadow:0 2px 10px var(--shadow); }
header a { text-decoration:none; color:var(--primary); display:flex; justify-content:center; align-items:center; gap:15px; }
header img {
    max-height:200px; /* bigger logo */
    transition: transform 0.3s ease;
}

/* Event Welcome Section */
.event-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px 20px;
  flex-wrap: wrap;
  background: #f9f9f9;
  border-radius: 20px;
  margin: 20px;
  box-shadow:0 12px 25px var(--shadow);
  animation: fadeSlideUp 1.2s ease forwards;
  opacity: 0;
}
.event-image img {
  max-width: 250px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.event-text { flex: 1; min-width: 250px; text-align: left; }
.event-text h2 { font-size: 2em; color: #2c3e50; margin-bottom: 15px; }
.event-text p { font-size: 1.2em; color: #34495e; }

/* Powered By Section */
.powered {
  text-align: center;
  padding: 40px 20px;
  background: #f8f9fa;
  animation: fadeSlideIn 1.2s ease forwards;
  opacity: 0;
}
.powered-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.powered-collab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
.envintra-logo {
  max-height: 70px;
  width: auto;
  transition: transform 0.2s ease;
  animation: fadeSlideLeft 1.5s ease forwards;
  opacity: 0;
}
.envintra-logo:hover { transform: scale(1.05); }
.collab-x {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
  animation: fadeIn 1.8s ease forwards;
  opacity: 0;
}
.ritik-link { text-decoration: none; }
.ritik-logo {
  font-family: 'Pacifico', cursive;
  font-size: 34px;
  color: #e74c3c;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, color 0.3s ease;
  animation: fadeSlideRight 1.5s ease forwards;
  opacity: 0;
}
.ritik-logo:hover { transform: scale(1.08); color: #c0392b; }

/* Scan Module */
.scan-area { padding:40px 20px; display:flex; flex-direction:column; align-items:center; }
.scan-card { background:var(--card-bg); padding:30px; border-radius:20px; box-shadow:0 12px 30px var(--shadow); width:100%; max-width:450px; text-align:center; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
.scan-card:hover { transform: translateY(-5px); box-shadow:0 16px 40px var(--shadow); }
button.scan-btn { padding:14px 30px; font-size:18px; border:none; background:var(--btn-color); color:#fff; border-radius:10px; cursor:pointer; transition: background 0.3s ease, transform 0.3s ease; }
button.scan-btn:hover { background:var(--btn-hover); transform: scale(1.05); }
#reader { width:100%; max-width:400px; margin:20px auto; display:none; border-radius:15px; overflow:hidden; box-shadow:0 8px 25px var(--shadow); }
#reader video { width:100% !important; height:auto !important; object-fit:cover; }

/* Footer */
footer {
  margin-top:auto;
  font-size:14px;
  color:var(--footer-color);
  padding:20px;
  text-align:center;
  background:#f1f1f1;
}
footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}
footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Modal Popup */
.modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); display:none; justify-content:center; align-items:center; z-index:1000; }
.modal-content { background:#fff; padding:30px; border-radius:15px; width:90%; max-width:400px; text-align:center; box-shadow:0 12px 30px var(--shadow); transition: transform 0.3s ease; }
.modal-content h2 { margin-bottom:20px; font-size:1.4em; }
.modal-content button { margin-top:20px; padding:12px 25px; border:none; background:var(--btn-color); color:#fff; border-radius:10px; cursor:pointer; transition: background 0.3s ease; }
.modal-content button:hover { background:var(--btn-hover); }
.success h2 { color:var(--success); }
.error h2 { color:var(--error); }

/* Flash animations */
.success-flash { background: #27ae60 !important; }
.error-flash { background: #e74c3c !important; }

/* Keyframes for animations */
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(40px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(40px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeSlideLeft { from { opacity:0; transform:translateX(-40px);} to{opacity:1; transform:translateX(0);} }
@keyframes fadeSlideRight { from { opacity:0; transform:translateX(40px);} to{opacity:1; transform:translateX(0);} }
@keyframes fadeIn { from { opacity:0; } to{opacity:1;} }

/* Responsive */
@media(max-width:768px){
  .event-welcome { flex-direction: column; text-align: center; }
  .event-text { text-align: center; }
  .powered-collab { flex-direction: column; gap: 5px; }
  .collab-x { display: block; font-size: 22px; margin: 5px 0; }
}