/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

   @font-face {
    font-family: 'Pantcake';
    src: url('PantcakeFont-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  * {
    box-sizing: border-box;
  }
  
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  body {
    background-color: white;
    color:black;
    font-family: 'Pantcake';
    margin: 0;
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    font-size: 20px;
    position: relative;
    overflow-x: hidden;
  }
  
  h1 {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  
  .container {
    position: relative;
    width: 90vw;
    height: 70vh;
    max-width: 1400px;
    max-height: 800px;
    min-width: 800px;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transform: scale(1.2);
  }
  
  /* Corner items positioning */
  .corner-item {
    position: absolute;
    width: 200px;
    height: 200px;
    cursor: url('assets/cursor/cursor.png'), url('assets/cursor/cursor-pt.png');
    transition: transform 0.2s ease;
  }
  
  .corner-item:hover {
    transform: scale(1.1);
  }
  
  .corner-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.2s ease;
    /* Threshold filter: convert to pure black (0) or white (255) */
    filter: grayscale(100%) contrast(2000%) brightness(1.1);
  }
  
  .corner-item .off-image {
    opacity: 1;
  }
  
  .corner-item .on-image {
    opacity: 0;
  }
  
  .top-left {
    top: 48%;
    left: 32%;
  }
  
  .top-right {
    top: 48%;
    right: 32%;
  }
  
  .bottom-left {
    bottom: 45%;
    left: 32%;
  }
  
  .bottom-right {
    bottom: 48%;
    right: 32%;
  }
  
  /* Persona container */
  .persona-container {
    position: relative;
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.45);
  }
  
  .persona-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Threshold filter: convert to pure black (0) or white (255) */
    filter: grayscale(100%) contrast(2000%) brightness(1.1);
  }
  
  .face-base {
    z-index: 1;
  }
  
  .eyes {
    z-index: 2;
    transition: opacity 0.1s ease;
    top: -2%;
    left: 49%;
    transform: translateX(-50%) scale(0.78);
  }
  
  .eyes-look {
    opacity: 1;
  }
  
  .eyes-blink {
    opacity: 0;
  }
  
  .mouth {
    z-index: 2;
    top: 26%;
    left: 48%;
    transform: translateX(-50%) scale(0.22);
  }
  
  /* Custom cursor */
  * {
    cursor: url('assets/cursor/cursor.png'), auto;
  }
  
  /* Custom cursor for images */
  img {
    cursor: url('assets/cursor/cursor-pt.png'), pointer;
  }
  
  /* Optional: Different cursor for clickable items */
  .corner-item {
    position: absolute;
    width: 240px;
    height: 240px;
    cursor: url('assets/cursor/cursor-pt.png'), pointer;
    transition: transform 0.2s ease;
  }
  
  /* Hide default cursor */
  * {
    cursor: none !important;
  }
  
  /* Custom cursor - resize by changing width/height */
  .custom-cursor {
    position: fixed;
    width: 24px;
    height: 24px;
    background-image: url('assets/cursor/cursor.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
    display: block;
    left: 0;
    top: 0;
    /* Force GPU acceleration */
    transform: translate3d(0, 0, 0) translate(-50%, -50%);
    backface-visibility: hidden;
  }
  
  /* Custom cursor pointer - resize by changing width/height */
  .custom-cursor-pointer {
    position: fixed;
    width: 24px;
    height: 24px;
    background-image: url('assets/cursor/cursor-pt.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
    display: none;
    left: 0;
    top: 0;
    /* Force GPU acceleration */
    transform: translate3d(0, 0, 0) translate(-50%, -50%);
    backface-visibility: hidden;
  }
  
  /* Optimize eyes for animations */
  .eyes {
    z-index: 2;
    transition: opacity 0.1s ease;
    top: -2%;
    left: 49%;
    transform: translateX(-50%) scale(0.78);
    will-change: transform;
    backface-visibility: hidden;
  }
  
  /* Stars background */
  .stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  
  .star {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('assets/star.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: sparkle-clockwise 3s infinite;
  }
  
  @keyframes sparkle-clockwise {
    0% {
      opacity: 0;
      transform: scale(0) rotate(0deg);
    }
    20% {
      opacity: 1;
      transform: scale(1) rotate(180deg);
    }
    40% {
      opacity: 1;
      transform: scale(1) rotate(360deg);
    }
    60% {
      opacity: 1;
      transform: scale(1) rotate(540deg);
    }
    80% {
      opacity: 0.5;
      transform: scale(0.8) rotate(720deg);
    }
    100% {
      opacity: 0;
      transform: scale(0) rotate(900deg);
    }
  }
  
  @keyframes sparkle-counterclockwise {
    0% {
      opacity: 0;
      transform: scale(0) rotate(0deg);
    }
    20% {
      opacity: 1;
      transform: scale(1) rotate(-180deg);
    }
    40% {
      opacity: 1;
      transform: scale(1) rotate(-360deg);
    }
    60% {
      opacity: 1;
      transform: scale(1) rotate(-540deg);
    }
    80% {
      opacity: 0.5;
      transform: scale(0.8) rotate(-720deg);
    }
    100% {
      opacity: 0;
      transform: scale(0) rotate(-900deg);
    }
  }
  
  .star.clockwise {
    animation-name: sparkle-clockwise;
  }
  
  .star.counterclockwise {
    animation-name: sparkle-counterclockwise;
  }
  
  /* Ensure content is above stars */
  .container,
  h1 {
    position: relative;
    z-index: 1;
  }