/* ============================================================
   MI Design — custom layer (effects Tailwind utilities can't do)
   ============================================================ */

/* ---- Theme tokens (single light theme, plain white) -------------------- */
:root{
  /* channel triplets → Tailwind tokens (paper/ink/ink2/sand/sky) keep /opacity */
  --t-paper: 255 255 255;   /* page + cards: plain white */
  --t-ink:    10  14  26;
  --t-ink2:  255 255 255;   /* surfaces are white too — structure comes from borders */
  /* deep slate so faint /40–/55 meta labels stay legible on white */
  --t-sand:   33  41  54;
  /* eyebrow accent — deep indigo, clearly readable on white */
  --t-sky:    38  51 130;
  --t-line: rgba(16,22,40,.12);
  /* component vars used below */
  --blue:#1e47ff; --blueon:#3f63ff;
  --c-scroll-track:#eef1f7; --c-scroll-thumb:#c3cad9; --c-scroll-thumb-h:#a7b1c6;
  --c-nav-bg:rgba(255,255,255,.85); --c-nav-border:rgba(16,22,40,.10);
  --c-nav-shadow:0 10px 30px -14px rgba(16,22,40,.25);
  --c-card-hover:#f4f6fb;
  --c-input-bg:#ffffff; --c-input-border:rgba(16,22,40,.14); --c-input-text:#0a0e1a;
  --c-input-ph:rgba(59,70,88,.5); --c-input-focus-bg:#ffffff;
  --map-filter:grayscale(.12) contrast(1.02);
  color-scheme:light;
}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--c-scroll-track)}
::-webkit-scrollbar-thumb{background:var(--c-scroll-thumb);border:3px solid var(--c-scroll-track);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--c-scroll-thumb-h)}
html{scrollbar-color:var(--c-scroll-thumb) var(--c-scroll-track);scrollbar-width:thin}

/* --- Header shell ------------------------------------------------------- */
.nav-shell{ background:transparent; border:1px solid transparent; }
#siteHeader.scrolled .nav-shell{
  background:var(--c-nav-bg);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-color:var(--c-nav-border);
  box-shadow:var(--c-nav-shadow);
}
.navlink::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1.5px;
  background:var(--blueon);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.navlink:hover::after,.navlink.active::after{transform:scaleX(1)}

/* burger */
.burger{display:block;width:18px;height:14px;position:relative}
.burger span{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transition:.3s}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:6px}
.burger span:nth-child(3){top:12px}
body.menu-open .burger span:nth-child(1){top:6px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:6px;transform:rotate(-45deg)}

#mobileMenu.open{visibility:visible;opacity:1}
#mobileMenu .mobitem{opacity:0;transform:translateY(18px);transition:.5s ease}
#mobileMenu.open .mobitem{opacity:1;transform:none}
#mobileMenu.open .mobitem:nth-child(1){transition-delay:.06s}
#mobileMenu.open .mobitem:nth-child(2){transition-delay:.12s}
#mobileMenu.open .mobitem:nth-child(3){transition-delay:.18s}
#mobileMenu.open .mobitem:nth-child(4){transition-delay:.24s}
#mobileMenu.open .mobitem:nth-child(5){transition-delay:.30s}
#mobileMenu.open .mobitem:nth-child(6){transition-delay:.36s}
#mobileMenu.open .mobitem:nth-child(7){transition-delay:.42s}

/* --- Marquee ------------------------------------------------------------ */
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:2rem;padding-right:2rem;white-space:nowrap;animation:scroll-x 48s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* --- Depth ruler bead --------------------------------------------------- */
.depth-bead{animation:dive 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes dive{
  0%,100%{top:0%}
  45%{top:100%}
  55%{top:100%}
}

/* --- Cards -------------------------------------------------------------- */
.service-card{transition:background-color .3s ease}
.service-card:hover{background-color:var(--c-card-hover)}
.rig-card{transition:transform .35s ease, border-color .35s ease}
.rig-card:hover{border-color:rgba(67,107,255,.5)}

/* --- Form --------------------------------------------------------------- */
.form-input{
  width:100%;background:var(--c-input-bg);border:1px solid var(--c-input-border);
  border-radius:.75rem;padding:.8rem 1rem;color:var(--c-input-text);font-size:.92rem;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.form-input::placeholder{color:var(--c-input-ph)}
.form-input:focus{outline:none;border-color:var(--blueon);background:var(--c-input-focus-bg);box-shadow:0 0 0 3px rgba(63,99,255,.15)}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%233f63ff' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}

/* --- Anchor offset for the fixed header --------------------------------- */
section[id]{scroll-margin-top:5.5rem}

/* --- Honeypot: keep off-screen (more robust than display:none) ---------- */
.hp{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px;height:1px;overflow:hidden}

/* --- Map embed: natural in light, dark-tinted in dark; true on hover ----- */
.map-embed{
  filter:var(--map-filter);
  transition:filter .6s ease;
}
.map-wrap:hover .map-embed{filter:none}

/* --- Scroll reveal (progressive enhancement: hidden only when JS on) ----- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track,.depth-bead{animation:none}
  html{scroll-behavior:auto}
}