/* ============================================================
   eyes.css — os olhos do abismo
   Cada olho é um elemento de 100×56 px redimensionado via
   --eye-scale; a forma de amêndoa vem de um clip-path fixo.
   ============================================================ */

.eye {
  --eye-scale: 1;
  --hue: 0deg;
  position: absolute;
  width: 100px;
  height: 56px;
  margin-left: -50px; /* centraliza o olho sobre sua coordenada left/top */
  margin-top: -28px;
  transform: scale(var(--eye-scale));
  pointer-events: none;
  user-select: none;
  filter: hue-rotate(var(--hue)) drop-shadow(0 0 16px rgba(216, 160, 74, 0.18));
}

/* As pálpebras: abrir, fechar e piscar acontecem aqui */
.eye__lids {
  position: absolute;
  inset: 0;
  transform: scaleY(1);
  transition: transform 0.65s cubic-bezier(0.22, 1.35, 0.36, 1);
}

.eye--closed .eye__lids {
  transform: scaleY(0);
  transition: transform 0.35s ease-in;
}

.eye.is-blink .eye__lids {
  animation: eye-blink 0.26s ease-in-out;
}

@keyframes eye-blink {
  0% { transform: scaleY(1); }
  45% { transform: scaleY(0.04); }
  100% { transform: scaleY(1); }
}

/* A amêndoa do olho */
.eye__shape {
  position: absolute;
  inset: 0;
  clip-path: path('M 2 28 Q 50 -14 98 28 Q 50 70 2 28 Z');
  background: radial-gradient(ellipse at 50% 45%, #221a2b 0%, #0b0712 70%, #050308 100%);
}

/* Íris âmbar, brilhando no escuro — segue o ponteiro via JS */
.eye__iris {
  position: absolute;
  left: 33px;
  top: 11px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 34%,
    #ffe9ae 0%,
    #f3b95a 28%,
    #b46a1d 55%,
    #58300b 78%,
    #1c0e04 100%
  );
  box-shadow:
    0 0 16px rgba(243, 185, 90, 0.35),
    inset 0 0 8px rgba(0, 0, 0, 0.65);
  will-change: transform;
}

/* Pupila em fenda, como a de algo que caça no escuro */
.eye__pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 22px;
  margin: -11px 0 0 -4.5px;
  border-radius: 50%;
  background: #020104;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  will-change: transform;
}

.eye__glint {
  position: absolute;
  left: 30%;
  top: 22%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 245, 220, 0.85);
  filter: blur(0.5px);
}

/* Sombra interna das pálpebras, para dar volume */
.eye__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55),
    transparent 35%,
    transparent 72%,
    rgba(0, 0, 0, 0.45)
  );
}

/* ---------- Variações ---------- */

/* O olho colossal que dorme atrás do conteúdo final */
.eye--colossal {
  opacity: 0.16;
  filter: hue-rotate(var(--hue)) blur(3px) saturate(0.75);
}

.eye--colossal .eye__lids {
  transition-duration: 2.4s;
}

/* Olhos pequenos nos cantos dos cards de projeto */
.eye--mini {
  margin: 0;
  transform-origin: top right;
}

@media (prefers-reduced-motion: reduce) {
  .eye__lids {
    transition: none;
  }

  .eye.is-blink .eye__lids {
    animation: none;
  }
}