/* ===================================================================
   TazamonTech Site Styles
   -------------------------------------------------------------------
   Notes:
   - Behavior is left unchanged; this file only clarifies and organizes
     with comments for maintenance.
   - Ordering preserved as much as possible to avoid cascade surprises.
   =================================================================== */

/* =========== Base / Reset =========== */
html,
body {
  background-color: #000235;
  padding: 0;
  margin: 0;
  font-family: "Urbanist", sans-serif;
  /* Decorative page background */
  background-image: radial-gradient(circle, #3a3d99, #292f7e, #182265, #05154c, #000235);
  /* Prevent sideways bounce/overscroll on some mobile/desktop browsers */
  overscroll-behavior-x: none;
    overflow-x: clip;   
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Hide scrollbars globally (you can override per container if needed) */
::-webkit-scrollbar { display: none; }         /* Chrome/Safari/Edge */
html { scrollbar-width: none; }                /* Firefox */
html { -ms-overflow-style: none; }             /* IE/Edge Legacy */

/* =========== Header (sticky, always on top) =========== */
.site-header {
  position: sticky;
  top: 0;                    /* use 0 (not 0%) to avoid scroll quirks */
  z-index: 10000;            /* reliably above sections */
  padding: 24px;
  transform: translateZ(0);  /* own GPU layer (helps WebKit) */
  will-change: transform;
  width: 100%;
}

.site-header.scrolled {
  /* translucent glassy nav once user scrolls down */
  background-color: rgba(0, 2, 53, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.site-header .container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.site-header .logo { width: 100px; }
.site-header .menu-button { width: 30px; }

/* =========== Sections (wrapper blocks) =========== */
.section {
  position: relative;
  isolation: isolate;        /* creates a local stacking context */
  z-index: 0;                /* below the header */
  min-width: 0;              /* allow inner overflow inside flex/grid parents */
  padding: 32px 24px 0;
}

/* Optional section glow (currently disabled) */
.section::before {
  content: "";
  position: absolute;
  inset: 0;                  /* cover the whole section */
  pointer-events: none;
  z-index: -1;               /* behind section content, not behind page */
  /* Radial glow example (commented):
  background:
    radial-gradient(100% 100px at 50% 50%,
      rgba(255, 255, 255, 0.302) 0%,
      rgba(255, 255, 255, 0.067) 40%,
      rgba(255,255,255,0.00) 70%);
  */
}

/* Legacy blur DIVs kept in markup — but disabled visually */
.blur { display: none !important; }

/* =========== Typography / Hero Bits =========== */
.section-title {
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 16px 0;
}
.section-sub-title {
  color: #00afd67c;
  font-weight: 300;
  font-size: 1.1rem;
  margin: 0;
}
.section .code-image {
  margin-top: 16px;
  width: 325px;
  max-width: 100%;
  height: auto;
}
.hero-catch-text {
  margin: 16px 0 0 0;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 300;
}
.section .call-to-action {
  text-transform: uppercase;
  margin-top: 16px;
  width: 100%;
  height: 45px;
  font-size: 1rem;
  font-weight: bold;
  background-color: #00AFD6;
  color: #000235;
  outline: none;
  border: none;
  border-radius: 4px;
}
.scroll-button-area {
  width: 100%;
  text-align: center;
  margin-top: 72px;
}

.spacer { width: 100%; height: 72px; }

/* =========== Services Cards =========== */
.our-services-container { padding-top: 32px; }

.service-card {
  border-radius: 4px;
  border: 1px #00AFD6 solid;
  padding: 18px;
}
.service-card .icon { width: 39px; }
.service-card .title {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  margin: 8px 0 0 0;
}
.service-card .sub-title {
  margin: 8px 0 0 0;
  color: #00AFD6;
}
.service-card .desc {
  color: #fff;
  font-size: 0.8rem;
}

/* =========== How We Work =========== */
.how-items { display: grid; gap: 16px; }

.how-card {
  width: 100%;
  min-height: 100px;
  display: flex;
}
.how-card-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 18px;
}
.how-card-left img {
  width: 60px;
  height: auto;
}
.how-card-right { color: #fff; }
.how-card-right .title {
  font-weight: bold;
  text-transform: uppercase;
}

/* =========== Horizontal scrollers (tech stacks / our work) =========== */
.tech-stacks,
.scroll-left {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;                  /* horizontal scroll */
  -webkit-overflow-scrolling: touch; /* momentum on iOS */
  scroll-behavior: smooth;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  
}
.tech-stacks-section{
  padding-left: 0%;
  padding-right: 0%;
}
.tech-stacks img,
.our-work img {
  flex: 0 0 auto;
  width: 250px;           /* adjust per card */
  height: auto;
  border-radius: 8px;
  /* no z-index here to avoid creating accidental stacking contexts */
}

/* =========== Contact Form =========== */
.contact-form-container {
  width: 100%;
  background-color: #000235;
  border-radius: 8px;
  border: 1px #00AFD6 solid;
  padding: 16px;
  color: #fff;
}
.contact-form-container p { margin: 0; }

.sendBtn {
  text-transform: uppercase;
  margin-top: 16px;
  width: 100%;
  height: 45px;
  font-size: 1rem;
  font-weight: bold;
  background-color: #00AFD6;
  color: #000235;
  outline: none;
  border: none;
  border-radius: 4px;
}
/* click effect */
.sendBtn {
  position: relative;         /* needed for ripple positioning */
  overflow: hidden;           /* hide ripple overflow */
  transition: transform .12s ease, box-shadow .12s ease;
}

/* quick "press" feedback */
.sendBtn:active { transform: scale(0.98); }

/* ripple using CSS variables for click coords */
.sendBtn.rippling::after {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,.35);   /* tweak for theme */
  pointer-events: none;
  animation: btn-ripple .6s ease-out forwards;
}

@keyframes btn-ripple {
  0%   { width: 0;   height: 0;   opacity: .5; }
  100% { width: 400px; height: 400px; opacity: 0; }
}
.contact-form-container .input input {
  width: 100%;
  margin-top: 8px;
  height: 40px;
}
.contact-form-container textarea {
  width: 100%;
  height: 100px;
  margin-top: 8px;
  padding-top: 8px;
}
.contact-form-container textarea,
.contact-form-container input {
  outline: none;
  border-radius: 4px;
  background-color: #000235;
  border: 1px #00AFD6 solid;
  padding-left: 8px;
  color: #fff;
}

/* Number input steppers off */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ===== Footer ===== */
:root{
  --brand:#00AFD6;
  --text:#E5EEF9;
  --muted:rgba(229,238,249,.8);
  --line:rgba(0,175,214,.55);
  --bg1:#0b1d3e;
  --bg2:#081634;
}
.footer{
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text);
}
.footer-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 44px;
  text-align: left;
}
.footer-logo{
  width: 180px;
  height: auto;
  display: block;
  margin-bottom: 16px;
  opacity: .95;
}
.footer-tagline{
  margin: 0 0 20px 0;
  font-size: 22px;
  letter-spacing: .5px;
  color: rgba(0,175,214,.8);
  font-weight: 500;
}
.footer-line{
  border: none;
  border-top: 2px solid var(--line);
  margin: 18px 0 22px;
}
.footer-nav{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-nav a{
  color: var(--brand);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
/* remove underline from all links */
a { text-decoration: none; }
/* keep it off on hover/focus too */
a:hover,
a:focus { text-decoration: none; }
.footer-nav a:hover{ opacity:.85; }
.footer-list{
  list-style: none;
  padding: 0;
  margin: 10px 0 26px;
  display: grid;
  gap: 18px;
}
.footer-item{
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  column-gap: 12px;
}
.footer-ico{
  width: 18px; display: block;
  /* tint to brand for monochrome icons */
  filter: brightness(0) saturate(100%) invert(61%) sepia(74%) saturate(455%) hue-rotate(152deg) brightness(94%) contrast(102%);
}
.footer-item span{
  color: var(--muted);
  font-size: 12px;
}
.footer-copy{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--muted);
  margin-top: 8px;
}

/* Responsive tweaks for footer */
@media (max-width: 640px){
  .footer-logo{ width: 150px; }
  .footer-tagline{ font-size: 18px; }
  .footer-nav a{ font-size: 18px; }
  .footer-item span{ font-size: 16px; }
}

/* =========== Scroll reveal helpers (animate.css) =========== */
.reveal { opacity: 0; will-change: transform, opacity; }
.reveal.in-view { opacity: 1; }
/* softer default animate.css speed */
:root { --animate-duration: .7s; }

/* =========== Overlay Menu (50% transparent background) =========== */
:root{
  --brand: #00AFD6;
  --overlay-rgb: 5, 13, 47; /* #050d2f as RGB */
  --overlay-alpha: 0.5;     /* 50% transparency */
}
/* lock page when menu open */
body.menu-open { overflow: hidden; }
/* overlay shell */
.overlay-menu{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000235; /* original: flat dark; transparency can be rgba(var(--overlay-rgb), var(--overlay-alpha)) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.overlay-menu.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* layout inside menu */
.overlay-inner{
  min-height: 100dvh; /* mobile-toolbar safe */
  display: grid;
  grid-template-rows: auto 1fr auto auto; /* top / nav / cta / social */
  gap: 24px;
  padding: 20px;
}
.overlay-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.overlay-logo{ width: 36px; height: auto; display: block; }
.overlay-close{
  background: none;
  border: 0;
  font-size: 36px;
  line-height: 1;
  color: var(--brand);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
.overlay-close:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* nav links */
.overlay-nav{
  display: grid;
  place-content: center;
  gap: clamp(24px, 8vh, 56px);
  text-align: center;
}
.overlay-link{
  color: var(--brand);
  text-decoration: none;
  font-size: clamp(22px, 6vw, 36px);
  letter-spacing: .06em;
  font-weight: 500;
  transition: opacity .15s ease, transform .15s ease;
}
.overlay-link:hover,
.overlay-link:active{ opacity:.85; transform: translateY(-1px); }
.overlay-link:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 6px;
}
/* CTA button */
.overlay-cta{
  display: block;
  margin-inline: auto;
  width: min(560px, 92%);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .02em;
  background: var(--brand);
  color: #001432;
  padding: 18px 20px;
  border-radius: 8px;
  transition: transform .15s ease, filter .15s ease;
}
.overlay-cta:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.overlay-cta:active{ transform: translateY(0); }
.overlay-cta:focus-visible{
  outline: 3px solid rgba(0,175,214,.6);
  outline-offset: 3px;
}
/* social icons row */
.overlay-social{
  display: flex;
  justify-content: center;
  gap: 36px;
  padding-bottom: 8px;
}
.overlay-social a{
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  transition: background-color .15s ease, transform .15s ease;
}
.overlay-social a:hover{ background-color: rgba(255,255,255,.08); transform: translateY(-1px); }
.overlay-social img{ width: 24px; display: block; }
/* subtle entrance effects */
.overlay-menu.open .overlay-top,
.overlay-menu.open .overlay-link,
.overlay-menu.open .overlay-cta,
.overlay-menu.open .overlay-social{
  animation: om-fade .28s ease both;
}
.overlay-menu.open .overlay-top{ animation-delay:.02s; }
.overlay-menu.open .overlay-link:nth-child(1){ animation-delay:.05s; }
.overlay-menu.open .overlay-link:nth-child(2){ animation-delay:.12s; }
.overlay-menu.open .overlay-link:nth-child(3){ animation-delay:.19s; }
.overlay-menu.open .overlay-link:nth-child(4){ animation-delay:.26s; }
.overlay-menu.open .overlay-cta{ animation-delay:.34s; }
.overlay-menu.open .overlay-social{ animation-delay:.40s; }
@keyframes om-fade{
  from{ opacity:0; transform: translateY(6px); }
  to  { opacity:1; transform: none; }
}
/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .overlay-menu{ transition: none; }
  .overlay-menu.open .overlay-top,
  .overlay-menu.open .overlay-link,
  .overlay-menu.open .overlay-cta,
  .overlay-menu.open .overlay-social{ animation: none; }
}

/* =========== Boot/Loading Overlay =========== */
/* Shell covering entire viewport */
.boot-overlay{
  position: fixed;
  inset: 0;
  z-index: 30000;                   /* above everything */
  background: #050d2f;              /* solid backdrop while loading */
  color: #cfe6f5;
  display: grid;
  place-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility .32s ease;
}
/* Legacy hide class (fade out) */
.boot-overlay.hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* “terminal” card inside loader */
.boot-inner{
  width: min(720px, 92vw);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  padding: 16px 18px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.boot-title{
  font-weight: 700;
  color: #00AFD6;
  margin-bottom: 10px;
  letter-spacing: .3px;
}
.boot-code{
  margin: 0;
  white-space: pre-wrap;
  min-height: 120px;
  line-height: 1.45;
  font-size: 14px;
  color: #e8f1fa;
  position: relative;
}
/* blinking caret for typing effect */
.boot-code::after{
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  background: #00AFD6;
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink .9s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.boot-tip{
  margin-top: 12px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  letter-spacing: .3px;
}
.boot-tip .dot{ animation: pulse 1.2s infinite; }
.boot-tip .dot:nth-child(2){ animation-delay: .2s; }
.boot-tip .dot:nth-child(3){ animation-delay: .4s; }
@keyframes pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
/* prevent page scroll while loader is visible */
body.loading { overflow: hidden; }
/* Pause ONLY the hero's animate.css until boot finishes */
body:not(.boot-done) .section:first-of-type .animate__animated {
  animation-play-state: paused !important;
  opacity: 0 !important;   /* keep hidden until we start */
  will-change: opacity, transform;
}
/* When overlay says we're done, let hero animations run */
body.boot-done .section:first-of-type .animate__animated {
  animation-play-state: running !important;
  opacity: 1 !important;
}

/* Exit animation: overlay fades; inner scales & lifts */
.boot-overlay.leaving {
  animation: bootOverlayOut .42s ease forwards;
}
.boot-overlay.leaving .boot-inner {
  animation: bootInnerOut .42s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes bootOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes bootInnerOut {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-10px) scale(0.985); opacity: 0; }
}
/* Reduced motion: remove movement, quick fade only */
@media (prefers-reduced-motion: reduce){
  .boot-overlay.leaving { animation-duration: .2s; }
  .boot-overlay.leaving .boot-inner { animation: none; }
}


  /* --- Circular ring layout --- */
.ring-wrap{
  position: relative;
  width: min(92vw, 640px);
  height: min(92vw, 640px);
  margin: 32px auto 8px;
  touch-action: pan-y;             /* allow vertical page scroll, we handle drag X */
  user-select: none;
}

.ring-item{
  position: absolute;
  left: 50%; top: 50%;
  width: var(--item-size, 160px);
  height: auto;
  transform: translate(-50%,-50%);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  will-change: transform, filter, opacity, z-index;
  transition: filter .18s ease, opacity .18s ease;
  pointer-events: none;            /* images don’t block dragging */
}

.ring-item.is-front{
  filter: brightness(1.05) saturate(1.05);
}

@media (min-width: 768px){
  .ring-wrap{ width:min(78vw, 720px); height:min(78vw, 720px); }
  .ring-item{ --item-size: 180px; }
}
@media (min-width: 1280px){
  .ring-wrap{ width: 760px; height: 760px; }
  .ring-item{ --item-size: 190px; }
}