@import "tailwindcss";

/* Ensure the canvas sits behind content but inside the hero */
#hero { position: relative; overflow: hidden; }
#bg-canvas {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
    pointer-events: none; /* allow clicks through */
}
/* keep hero content above the canvas */
#hero .container { position: relative; z-index: 10; }

header {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
    background-color: #000000; /* solid red default */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
header.glass {
    backdrop-filter: blur(10px);
    background-color: rgba(160, 158, 158, 0.7);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#hero img {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 5;
    max-height: 100%;
    transform-origin: bottom right;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gallery-item:hover::after {
  opacity: 1;
}

.gallery-item img {
  display: block;
  will-change: transform;
}

#pointer-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;   
  height: 20px;
  border: 2px solid rgb(224, 48, 48);  
  border-radius: 50%;
  pointer-events: none;  
  transform: translate(-50%, -50%);
  background-color: transparent;  
  z-index: 9999;
  /* Make sure position is relative for pseudo-element */
  position: fixed;
}

/* Small dot in center */
#pointer-circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;       /* size of dot */
  height: 3px;
  background-color: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}