/* ================================
   HOME PAGE — home.css
   Dedicated styles for segway.html
================================ */

:root {
    --white: #ffffff;
    --black: #000000;
    --grey: rgba(255,255,255,0.4);
    --line: rgba(255,255,255,0.12);
  }
  
  ::selection { background: #fff; color: #000; }
  
  /* ================================
     BASE
  ================================ */
  body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    font-family: 'Orbitron', sans-serif;
    /* Desktop: normal flow */
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  
  /* ================================
     CORNER NAVIGATION
  ================================ */
  .corner-contain {
    position: fixed; /* fixed so it stays in corners regardless of scroll */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    pointer-events: none;
    z-index: 2;


  }
  
  .corner {
    position: absolute;
    font-size: clamp(1rem, 4vw, 2rem);
    text-shadow: none;
    transition: text-shadow 0.3s ease;
    pointer-events: auto;
    color: white;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
  }
  
  .corner:hover {
    text-shadow:
      0 0 6px rgba(255,255,255,0.6),
      0 0 18px rgba(255,255,255,0.3);
  }
  
  .corner a {
    text-decoration: none;
    color: inherit;
  }
  
  .top-left    { top: 2%; left: 2%; animation-delay: 0.25s; }
  .top-right   { top: 2%; right: 2%; animation-delay: 0.5s; }
  .bottom-left { bottom: 10%; left: 2%; animation-delay: 0.75s; }
  .bottom-right{ bottom: 10%; right: 2%; animation-delay: 1s; }
  
  /* ================================
     FADE IN ANIMATION
  ================================ */
  .fade-in-element {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 4s;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  /* ================================
     PARENT / LOGO CONTAINER
  ================================ */
  .parent {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1; /* takes all space between top and footer on desktop too */
    min-height: 0; /* prevents flex overflow */
  }
  
  .intro2 {
    width: clamp(250px, 45vw, 700px);
    height: auto;
    object-fit: contain;
    pointer-events: none;
    display: block;
  }
  
  /* ================================
     CURSOR SVG
  ================================ */
  #cursorSvg {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(60px, 15vw, 140px);
    height: clamp(60px, 15vw, 140px);
    pointer-events: none;
    z-index: -1;
  }
  
  /* ================================
     FOOTER
  ================================ */
  .site-footer {
    background: var(--black);
    border-top: 1px solid var(--line);
    padding: 24px 60px;
    flex-shrink: 0; /* never shrink the footer */
  }
  
  .footer-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .footer-content p {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--grey);
    margin: 0;
  }
  
  .footer-icons {
    display: flex;
    gap: 20px;
  }
  
  .footer-icons a {
    color: var(--grey);
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
  }
  
  .footer-icons a:hover {
    color: var(--white);
    transform: translateY(-2px);
  }
  
  .footer-icons svg {
    width: 20px;
    height: 20px;
  }

  .site-footer:hover .footer-content p {color: var(--white); transition: color 0.2s ease;}

  
  /* ================================
     MOBILE
  ================================ */
  @media (max-width: 768px) {
    body {
      min-height: 100svh; /* svh accounts for iOS Safari browser chrome */
    }
  
    .parent {
      /* flex: 1 already set above — logo fills remaining space naturally */
      padding: 20px;
    }
  
    .intro2 {
      width: clamp(200px, 70vw, 400px); /* scale down on small screens */
    }
  
    .site-footer {
      padding: 16px 24px;
    }
  
    /* Corner links — slightly smaller on mobile */
    .corner {
      font-size: clamp(0.7rem, 3.5vw, 1.2rem);
    }
  }

  @media (min-width: 800px) and (max-width: 1200px){
    #cursorSvg {
      width: 80px; /* 7vh is the same for ipad*/
      height: 80px;
    }
    
  }