body {
    margin: 0;
    background: black;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
  }
  
/* Replace the existing animation line on .logo-container with: */
.logo-container {
  position: absolute;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;

  /* Shrink + move logo higher after the intro */
  animation: shrinkDock 1.2s ease-out 2.0s forwards;
}

/* New keyframe: shrink + move up (to ~20% above center) */
@keyframes shrinkDock {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -78%) scale(0.5); }
}

  .logo-container svg {
    height: 50vh;    /* adjust 100vh up or down until it feels right */
    width: auto; 
    max-width: 90vw;    /* preserves aspect ratio */
  }
  
  /* Hide all shapes initially */
  #t1, #t2, #t3, #t4 {
    opacity: 0;
  }
  
  /* 1st wave: top (t1) from left, bottom (t2) from right */
  #t1 {
    transform: translateX(-500px);
    animation: slide-in-left 0.8s ease-out forwards;
  }
  #t2 {
    transform: translateX(500px);
    animation: slide-in-right 0.8s ease-out forwards;
  }
  
  /* 2nd wave (delay 0.8s): middle-left (t3) & middle-right (t4) */
  #t3 {
    transform: translateX(-500px);
    animation: slide-in-left 0.8s ease-out 0.8s forwards;
  }
  #t4 {
    transform: translateX(500px);
    animation: slide-in-right 0.8s ease-out 0.8s forwards;
  }
  
  /* Draw the outline (delay 1.6s) */
  #outline {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: draw-outline 1.2s ease-out 2s forwards;
  }
  
  /* Keyframes */
  @keyframes slide-in-left {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slide-in-right {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes draw-outline {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  /* Combined shrink + move-up */
  @keyframes shrinkUp {
    /* first half: shrink */
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(0.8); }
    /* second half: shrink + move up 10% */
    100% { transform: translate(-50%, -60%) scale(0.8); }
  }
  
  @keyframes text-appear {
      to {
          opacity: 1;
          transform: translate(-50%, 0);
      }
  }

  @keyframes shrink {
      from { transform: translate(-50%, -50%) scale(1); }
      to   { transform: translate(-50%, -50%) scale(0.8); }
  }
    
  @keyframes moveUp {
      from { transform: translate(-50%, -50%) scale(0.8); }
      to   { transform: translate(-50%, -60%) scale(0.8); }
  }

  @media screen and (max-width: 600px) {
    .logo-container {
      /* move the logo higher on the viewport */
      top: 30%;           /* instead of the default 50% */
      /* keep the same transform so it still centers around that point */
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes bumpIn {
  0%   { visibility: visible; opacity: 0; transform: translateY(28px); }
  60%  { visibility: visible; opacity: 1; transform: translateY(-8px); }
  80%  { visibility: visible; opacity: 1; transform: translateY(4px);  }
  100% { visibility: visible; opacity: 1; transform: translateY(0);    }
  }
  /* Primary menu: appears after the logo docks */
.menu{
  position: absolute;
  left: 50%;
  top: 50%;                         /* center vertically */
  transform: translate(-50%, -50%);  /* center both axes */
  width: min(1000px, 92vw);
  z-index: 2;                        /* above logo if they overlap */
  animation: menuIn 0.4s ease-out 3.2s forwards;
}

@keyframes menuIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.menu-item{
  display:block;
  text-align:center;
  padding:8px 6px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:clamp(18px, 2.2vw, 24px);
  line-height:1.2;
  letter-spacing:0.2px;
  background:none;
  border:none;

  /* animation */
  opacity:0;                       /* hidden until animated */
  transform:translateY(28px);      /* start below */
  visibility: hidden;
  animation:bumpIn 620ms ease-out forwards;
  will-change:transform, opacity;  /* perf hint */
}

/* Starts after your nav fade-in (3.2s → finishes ~3.6s) */
.menu-item:nth-child(1){ animation-delay: 3.30s; } /* About Me */
.menu-item:nth-child(2){ animation-delay: 3.45s; } /* Services  */
.menu-item:nth-child(3){ animation-delay: 3.60s; } /* Clients   */
.menu-item:nth-child(4){ animation-delay: 3.75s; } /* Private   */

@media (hover:hover) and (pointer:fine) {
  .menu-item:hover { text-decoration: underline; opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .logo-container {
    transform: translate(-50%, -86%) scale(0.5);
  }
  .menu {
    opacity: 1;
    transform: translate(-50%, 0);
  }
    * { animation: none !important; transition: none !important; }
  .menu-item{ visibility: visible; opacity: 1; transform: none; }
}

/* Short viewport height adjustments */
@media (max-height: 760px) {
  .menu-item { font-size: clamp(16px, 2.2vh, 20px); }
}
@media (max-height: 620px) {
  .menu-item { font-size: 16px; }
}