/* =========================================================
   MAIN SKWER — Professional Maritime Theme
   - Clear section contrast
   - High readability
   - Unified color system
   ========================================================= */

:root {
  --primary: #0f2742;    /* Deep navy */
  --accent:  #00a896;    /* Turquoise (fresh maritime) */
  --light-bg:#f5f8fa;    /* Light neutral for section contrast */
  --text:    #1b1b1b;    /* Main readable text */
  --muted:   #6c757d;    /* Muted text */
  --white:   #ffffff;
  --shadow:  0 6px 16px rgba(0,0,0,.06);
}

html { scroll-behavior: smooth; }
body { color: var(--text); }

/* ---------- Navbar ---------- */
.navbar {
  background-color: var(--white) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.navbar a,
.navbar-brand {
  color: var(--text) !important;
  font-weight: 500;
}
.navbar a:hover { color: var(--accent) !important; }
.navbar .btn {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.navbar .btn:hover {
  background-color: var(--accent) !important;
  color: var(--white) !important;
}

/* ---------- Hero ---------- */
.hero-section{
  min-height: 80vh;
  padding-top: 72px;
  color: var(--white);
  background:
    radial-gradient(1200px 600px at 12% 12%, rgba(13,110,253,.22), transparent 60%),
    linear-gradient(120deg, #0b2239 0%, #0e2f52 60%, #0b2239 100%);
}
.hero-section h1, .hero-section p { color: var(--white); }

/* ---------- Generic cards/tiles ---------- */
.project-tile{ background:#f8fbff; border:1px solid #e6eef9; }
.card-title{ color:#0d2b52; }
#about img{ max-width:420px; width:100%; }

/* ---------- Services ---------- */
#services {
  background-color: var(--light-bg);
  padding: 80px 0;
}
#services h2 { color: var(--primary); }
#services p  { color: var(--muted); }
#services .card {
  background: var(--white);
  border: 1px solid #dce6ee;
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease;
}
#services .card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

/* ---------- About ---------- */
#about {
  background: var(--white);
  padding: 80px 0;
}
#about h2 { color: var(--primary); }
#about p  { color: var(--muted); }

/* ---------- References ---------- */
#references {
  background-color: #eaf2f9; /* Soft maritime blue */
  padding: 80px 0;
}
#references h2 { color: var(--primary); }
#references p  { color: var(--muted); }
#references .card {
  background: var(--white);
  border: 1px solid #d4e0ea;
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease;
}
#references .card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

/* ---------- Contact (left content readable, form white) ---------- */
#contact {
  background: linear-gradient(180deg, #0f2742 0%, #0a1c31 100%);
  color: var(--white);
  padding: 80px 0;
}
#contact h2, #contact h3, #contact p, #contact li, #contact address, #contact .lead {
  color: var(--white) !important;
  opacity: 1 !important;
}
#contact a {
  color: #7ae1d5 !important;
  text-decoration: none;
}
#contact a:hover { color: var(--white) !important; text-decoration: underline; }

/* form card on the right stays white and readable */
#contact .card {
  background: var(--white);
  border: 1px solid #e5eaf0;
  box-shadow: var(--shadow);
  color: var(--text) !important;
}
#contact label               { color: var(--text) !important; }
#contact .form-control,
#contact textarea            { background:#fff; color:var(--text); border:1px solid #d6dbe3; }
#contact .form-check-label   { color: var(--text) !important; }
#contact .btn-primary        { background:#0d6efd; border-color:#0d6efd; }
#contact .btn-primary:hover  { background:#0b5ed7; border-color:#0a58ca; }

/* ---------- Footer ---------- */
footer {
  background-color: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 24px 0;
  font-size: .95rem;
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }
/* =========================================================
   PREMIUM MICRO-INTERACTIONS + SCROLL REVEALS
   ========================================================= */

/* Smooth transitions for common elements */
:root {
  --easing: cubic-bezier(.2,.7,.2,1);
  --dur: 600ms;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Hover polish ---------- */

/* Links: subtle underline grow from center */
a {
  position: relative;
  text-decoration: none;
}
a::after {
  content:"";
  position:absolute;
  left: 50%;
  bottom:-2px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .25s var(--easing), left .25s var(--easing);
}
a:hover::after {
  width: 100%;
  left: 0;
}

/* Primary buttons: lift + glow */
.btn,
button,
input[type="submit"] {
  transition: transform .2s var(--easing), box-shadow .2s var(--easing), background-color .2s var(--easing), color .2s var(--easing);
}
.btn:hover,
button:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

/* Service/Reference cards: subtle raise */
.card {
  transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

/* Navbar underline on hover for items */
.navbar .nav-link {
  position: relative;
}
.navbar .nav-link::after {
  content:"";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .25s var(--easing), left .25s var(--easing);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
  width: 100%;
  left: 0;
}

/* ---------- Scroll reveal system ---------- */
/* Usage: add class="reveal fade-up" (or fade-in / slide-left / zoom-in) */

.reveal {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
  transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing);
}

/* When visible */
.reveal.is-visible { opacity: 1; transform: none; }

/* Variants */
.fade-up   { transform: translate3d(0, 24px, 0); }
.fade-in   { transform: none; opacity: 0; }
.slide-left{ transform: translate3d(-24px, 0, 0); }
.zoom-in   { transform: scale(.96); }

.reveal.is-visible.fade-in   { opacity: 1; }
.reveal.is-visible.fade-up   { transform: translate3d(0,0,0); }
.reveal.is-visible.slide-left{ transform: translate3d(0,0,0); }
.reveal.is-visible.zoom-in   { transform: scale(1); }

/* Stagger helper (optional): add .stagger to a parent container */
.stagger > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.stagger.is-visible > *:nth-child(1){ transition-delay:  80ms; }
.stagger.is-visible > *:nth-child(2){ transition-delay: 160ms; }
.stagger.is-visible > *:nth-child(3){ transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(4){ transition-delay: 320ms; }
.stagger.is-visible > *:nth-child(5){ transition-delay: 400ms; }