/* AutoDOT website styles (Brand Style Guide v2026.1)
   Layout and spacing come from Tailwind classes in the HTML; this file holds the custom pieces. */
:root { --silver-light: #E4E7EA; --silver-pale: #C9CDD1; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
  body { -webkit-font-smoothing: antialiased; }

  /* Hexagon grid motif (echoes microdot shape) */
  .hexgrid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
  }
  .hex { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); }

  /* Holographic microdot surface */
  .holo {
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 35%),
      conic-gradient(from 210deg, #34B7E8, #8DC63F, #1FAE7D, #A0A5AA, #34B7E8, #8DC63F, #34B7E8);
  }

  /* Metallic pill CTA - per Style Guide btn-pill-metallic */
  .btn-metallic {
    background: linear-gradient(180deg, var(--silver-light) 0%, #A0A5AA 55%, var(--silver-pale) 100%);
    padding: 4px; border-radius: 9999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  }
  .btn-metallic > span {
    display: inline-flex; align-items: center; gap: .5rem;
    background: #008A44; color: #111; font-weight: 700;
    border-radius: 9999px; padding: .7rem 1.4rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
  }
  .btn-metallic:hover > span { background: #006E36; color: #fff; }

  /* Homepage hero motion: scan line across the microdot */
  @keyframes scan { 0% { transform: translateY(-110%); } 100% { transform: translateY(110%); } }
  .scanline { animation: scan 3.2s cubic-bezier(.6,0,.4,1) infinite; }
  @keyframes readout { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .readout > * { opacity: 0; animation: readout .5s ease forwards; }
  .readout > *:nth-child(1) { animation-delay: .6s; }
  .readout > *:nth-child(2) { animation-delay: 1.0s; }
  .readout > *:nth-child(3) { animation-delay: 1.4s; }
  .readout > *:nth-child(4) { animation-delay: 1.8s; }

  /* Login pop-up */
  #loginModal[hidden] { display: none; }
  @keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  #loginModal .pop { animation: pop .28s ease-out; }
  @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(141,198,63,.45); } 100% { box-shadow: 0 0 0 18px rgba(141,198,63,0); } }
  .lock-ring { animation: pulse-ring 2s ease-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scanline { animation: none; display: none; }
    .readout > * { opacity: 1; animation: none; }
    #loginModal .pop, .lock-ring { animation: none; }
  }

  /* Active page indicator in the navigation */
  .nav-link { position: relative; padding: .25rem 0; transition: color .15s; }
  .nav-link:hover { color: #008A44; }
  .nav-link[aria-current="page"] { color: #008A44; font-weight: 700; }
  .nav-link[aria-current="page"]::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -10px;
    height: 3px; border-radius: 2px; background: #008A44;
  }
  .mnav-link { display: block; padding: .5rem .75rem; border-left: 3px solid transparent; border-radius: 0 .375rem .375rem 0; }
  .mnav-link[aria-current="page"] { color: #008A44; font-weight: 700; border-left-color: #008A44; background: #E6F4EC; }

  :focus-visible { outline: 3px solid #34B7E8; outline-offset: 3px; border-radius: 4px; }