/* Clean dark-blue tech theme — readable typography, minimal UI, consistent motion tokens */

/* Web font + fallbacks */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
  /* Colors */
  --bg-900: #031026;     /* page background */
  --bg-800: #052038;     /* slightly lighter */
  --panel:   #0b2236;    /* card background */
  --panel-2: #06202b;    /* alternate panel */
  --surface: #eaf6ff;    /* light surface for high-contrast cards (used sparingly) */
  --text-100:#e7f6ff;    /* main light text */
  --text-900:#06212b;    /* dark text for light panels */
  --muted:   #94b7d6;    /* secondary text */
  --accent:  #2ab0ff;    /* primary accent */
  --accent-2:#08a0f0;    /* secondary accent */
  --glass-border: rgba(255,255,255,0.04);
  --shadow:  0 10px 30px rgba(2,8,20,0.6);

  /* Layout */
  --max-width:1100px;
  --radius:10px;

  /* Motion tokens */
  --motion-fast: 180ms;
  --motion-med: 260ms;
  --easing: cubic-bezier(.2,.9,.2,1);

  /* responsive square size: min 120px, preferred 18vw, max 220px */
  --img-size: clamp(120px, 18vw, 220px);
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;color:var(--text-100);background:var(--bg-900);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--accent)}
img{max-width:100%;display:block}

/* Page background — subtle radial lights + low-contrast grid for tech feel */
body{
  background-image:
    radial-gradient(800px 400px at 10% 10%, rgba(42,176,255,0.03), transparent 6%),
    radial-gradient(600px 300px at 90% 80%, rgba(8,160,240,0.02), transparent 6%),
    linear-gradient(180deg,var(--bg-800),var(--bg-900));
  background-attachment: fixed;
  background-size: cover;
}

/* Container to align content */
.container{max-width:var(--max-width);margin:0 auto;padding:0 16px;position:relative;z-index:2}

/* Header / marquee */
hr{border:0;height:6px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:8px;margin:12px 0}
h1{margin:8px 0;color:var(--text-100);font-weight:700;font-size:1.45rem;text-align:center}
.site-marquee, marquee.site-marquee {
  display:block;padding:10px 12px;margin:8px auto;border-radius:8px;font-weight:600;
  background: linear-gradient(90deg, rgba(42,176,255,0.06), rgba(8,160,240,0.04));
  color:var(--text-100);border:1px solid var(--glass-border);max-width:100%;
  text-align:center;
  box-shadow:0 8px 22px rgba(2,6,20,0.36);
}

/* Navigation pills — clear, accessible targets */
.nav-menu{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:10px 0}
.nav-menu a{
  display:inline-block;padding:.55rem .9rem;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border:1px solid var(--glass-border);color:var(--text-100);font-weight:600;text-decoration:none;
  box-shadow:0 6px 18px rgba(2,8,20,0.45);transition:transform var(--motion-fast) var(--easing), box-shadow var(--motion-fast) var(--easing), background var(--motion-fast) var(--easing);
  position:relative;overflow:hidden;
}
.nav-menu a:hover{ transform: translateY(-3px); box-shadow:0 14px 32px rgba(2,8,20,0.6); background: linear-gradient(180deg, rgba(42,176,255,0.06), rgba(8,160,240,0.03)); border-color: rgba(42,176,255,0.12); }
.nav-menu a:focus{ outline:3px solid rgba(42,176,255,0.10); outline-offset:3px }

/* Simple content card */
.content-section{
  background: linear-gradient(180deg, rgba(11,34,50,0.85), rgba(7,26,40,0.8));
  border-radius:var(--radius);padding:18px;margin:14px auto;max-width:var(--max-width);box-shadow:var(--shadow);
  border:1px solid var(--glass-border);
}
.content-section h3{color:var(--accent);margin:0 0 8px 0}
.content-section p{color:var(--muted);margin:0}

/* Typography hierarchy */
h2{color:var(--text-100);font-weight:600;text-align:center;margin:6px 0}
h3, h4{font-weight:600}
p, li { font-size:0.98rem; color:var(--muted) }

/* Gallery grid — clean cards, subtle hover lift */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:var(--max-width);margin:12px auto;padding:0 12px}
.gallery-item{position:relative;background:linear-gradient(180deg, rgba(7,26,38,0.6), rgba(5,18,30,0.5));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);box-shadow:0 10px 26px rgba(2,8,20,0.5);transition:transform var(--motion-fast) var(--easing), box-shadow var(--motion-fast) var(--easing)}
.gallery-item img{height:160px;object-fit:cover;border-radius:8px;margin-bottom:10px}
.gallery-item h4{color:var(--accent);margin:6px 0}
.gallery-item p{color:var(--muted);font-size:.95rem}
.gallery-item:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(2,8,20,0.6)}

/* Table styling — readable and uncluttered */
table{width:100%;border-collapse:collapse;max-width:var(--max-width);margin:0 auto;background:transparent;border-radius:8px;overflow:hidden}
table td, table th{padding:12px;border-bottom:1px solid rgba(255,255,255,0.03);vertical-align:top;color:var(--text-100)}
table tr:hover td{background:linear-gradient(90deg, rgba(42,176,255,0.02), transparent)}

/* Buttons: uniform style with ripple and focus */
.btn{
  display:inline-block;padding:.55rem .9rem;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#042134;font-weight:700;border:none;cursor:pointer;box-shadow:0 8px 22px rgba(8,24,40,0.48);
  transition:transform var(--motion-fast) var(--easing), box-shadow var(--motion-fast) var(--easing), opacity var(--motion-fast) var(--easing);
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-3px)}
.btn:focus{outline:3px solid rgba(42,176,255,0.10);outline-offset:3px}

/* Centered CSS ripple (simple and unobtrusive) */
.btn::after, .nav-menu a::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:rgba(255,255,255,0.06);opacity:0;pointer-events:none;
}
.btn:active::after, .nav-menu a:active::after{
  width:300px;height:300px;opacity:1;transform:translate(-50%,-50%) scale(1);transition:transform 600ms var(--easing),opacity 600ms var(--easing);
}

/* Media elements */
audio,video,iframe{display:block;margin:12px 0;border-radius:10px;box-shadow:0 12px 28px rgba(2,8,20,0.6);max-width:100%}

/* Fade-in utility for gentle loading */
.fade-in{opacity:0;transform:translateY(6px);animation:fadeIn var(--motion-med) var(--easing) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Skeleton shimmer for placeholders */
.skeleton{background:linear-gradient(90deg,#072033 8%, #0b3147 20%, #072033 34%);border-radius:8px;position:relative;overflow:hidden}
.skeleton.shimmer::before{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent 0 30%, rgba(255,255,255,0.03) 50%, transparent 70%);animation:shimmer 1000ms linear infinite}
@keyframes shimmer{100%{transform:translateX(100%) }}

/* Progress bar */
.progress{background:rgba(255,255,255,0.03);border-radius:8px;overflow:hidden;height:10px}
.progress .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 800ms var(--easing)}

/* Modal/dialog */
.modal{display:none;position:fixed;inset:0;align-items:center;justify-content:center;background:rgba(0,4,8,0.6);padding:20px;z-index:999}
.modal.open{display:flex}
.modal .dialog{background:linear-gradient(180deg, rgba(7,26,38,0.98), rgba(5,18,30,0.98));padding:18px;border-radius:12px;transform:scale(.98);opacity:0;animation:modalIn var(--motion-med) var(--easing) both}
@keyframes modalIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* Tooltip & dropdown micro animations */
.tooltip .tooltip-text{position:absolute;left:50%;transform:translateX(-50%) translateY(6px);bottom:120%;background:rgba(3,12,20,0.96);color:var(--text-100);padding:6px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity var(--motion-fast),var(--transform) var(--motion-fast)}
.tooltip:hover .tooltip-text{opacity:1;transform:translateX(-50%) translateY(0)}
.dropdown .menu{opacity:0;transform:translateY(-6px);transition:opacity var(--motion-fast) var(--easing),transform var(--motion-fast) var(--easing);pointer-events:none;position:absolute;right:0;top:100%;background:rgba(3,12,20,0.96);border-radius:8px;padding:8px;min-width:180px}
.dropdown.open .menu{opacity:1;transform:translateY(0);pointer-events:auto}

/* Status indicators */
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:middle}
.status-dot.loading{background:linear-gradient(90deg,var(--accent),var(--accent-2));animation:pulse 1200ms infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(42,176,255,0.18)}70%{box-shadow:0 0 0 10px rgba(42,176,255,0.02)}100%{box-shadow:0 0 0 0 rgba(42,176,255,0)}}

/* Accessibility: strong focus outlines, large tap targets */
button,input,textarea,a { touch-action: manipulation }
button, .nav-menu a, .btn { min-height:38px; min-width:44px }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *{animation-duration:0ms!important;transition-duration:0ms!important;scroll-behavior:auto!important}
  .gallery-item:hover, .content-section:hover{transform:none;box-shadow:none}
}

/* Responsive tweaks */
@media (max-width:720px){
  .gallery-grid{grid-template-columns:repeat(1,1fr)}
  .nav-menu{gap:.4rem}
  .content-section{padding:14px}
}

/* Ensure table layout remains usable on small screens */
@media (max-width:520px) {
	:root { --img-size: clamp(80px, 28vw, 140px); }
	table img { width: 120px; height: 120px; }
	.gallery-item img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; } /* fill column */
}

/* Print */
@media print{nav, .nav-menu, marquee, hr, .site-marquee, .modal, .footer{display:none} body{background:#fff;color:#000}}

/* Apply square crop and centering everywhere images appear */
img,
.gallery-item img,
.profile-img,
table img {
	width: var(--img-size);
	height: var(--img-size);
	object-fit: cover;    /* crop to fill the square */
	object-position: center;
	border-radius: var(--radius);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* For gallery grid make items align nicely */
.gallery-grid { align-items: start; }