/* paladice-cone.css - lightweight styles for cone placement and eye tracking */
.cone-wrapper {
  position: absolute;            /* positioned relative to .card */
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  max-width: 28vw;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1);
  transform-origin: center;
  z-index: 6;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.14));
}

.hero-loaded .cone-wrapper,
.card .cone-wrapper { /* ensure it becomes visible */
  opacity: 1;
}

.cone-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  object-fit:cover;
  backface-visibility: hidden;
  will-change: transform;
}

.cone-wrapper .eye {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  transform: translateZ(0);
}

.cone-wrapper .eye .pupil {
  width: 18px;
  height: 18px;
  background: #2b1409;
  border-radius:50%;
  transform: translate(0,0);
  transition: transform 0.06s linear;
  will-change: transform;
}

/* Rough positions: tune with devtools if needed */
.cone-wrapper .left-eye  { left: 20%; top: 28%; }
.cone-wrapper .right-eye { left: 58%; top: 28%; }

@media (max-width: 900px) {
  .cone-wrapper { width: 220px; right: 6%; }
  .cone-wrapper .eye { width:36px; height:36px; }
  .cone-wrapper .eye .pupil { width:14px; height:14px; }
}

.cone-floating {
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0% { transform: translateY(-50%) translateX(0) rotate(-0.3deg); }
  50% { transform: translateY(-52%) translateX(2px) rotate(0.3deg); }
  100% { transform: translateY(-50%) translateX(0) rotate(-0.3deg); }
}