/* carina-gold-leaf.css
   Efecto dorado premium para la hoja/ramita lateral de Restaurante Carina.
   Uso recomendado:
   <span class="carina-gold-leaf" aria-hidden="true"></span>

   IMPORTANTE:
   Cambia la ruta de --carina-leaf-mask por el SVG real.
   Si Work conecta DeviceOrientation, puede actualizar:
   --carina-gold-angle, --carina-gold-x y --carina-gold-y.
*/

:root {
  --carina-gold-1: #7a4d12;
  --carina-gold-2: #b77a22;
  --carina-gold-3: #e2b85c;
  --carina-gold-4: #fff0b8;
  --carina-gold-5: #c79232;
  --carina-gold-6: #8c5b17;

  --carina-gold-angle: 118deg;
  --carina-gold-x: 0px;
  --carina-gold-y: 0px;

  /* Reemplazar con la ruta real del SVG */
  --carina-leaf-mask: url("/assets/carina-v2/hoja-dorada-ui.png");
}

.carina-gold-leaf {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 42px;
  flex: 0 0 auto;

  transform:
    translate3d(var(--carina-gold-x), var(--carina-gold-y), 0)
    rotate(calc((var(--carina-gold-angle) - 118deg) * 0.035));

  transform-origin: 50% 70%;
  isolation: isolate;
  will-change: transform, filter;
}

/* Cuerpo dorado metálico */
.carina-gold-leaf::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      var(--carina-gold-angle),
      var(--carina-gold-1) 0%,
      var(--carina-gold-2) 16%,
      var(--carina-gold-4) 34%,
      #ffffff 42%,
      var(--carina-gold-3) 50%,
      var(--carina-gold-5) 66%,
      var(--carina-gold-2) 82%,
      var(--carina-gold-6) 100%
    );

  background-size: 220% 220%;
  background-position: 20% 50%;

  -webkit-mask-image: var(--carina-leaf-mask);
  mask-image: var(--carina-leaf-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  filter:
    drop-shadow(0 1px 0 rgba(255, 246, 206, 0.72))
    drop-shadow(0 2px 3px rgba(111, 68, 12, 0.18));

  animation: carinaGoldFlow 5.8s ease-in-out infinite alternate;
}

/* Reflejo fino que cruza la hoja */
.carina-gold-leaf::after {
  content: "";
  position: absolute;
  inset: -12%;

  background:
    linear-gradient(
      108deg,
      transparent 34%,
      rgba(255, 255, 255, 0.00) 40%,
      rgba(255, 247, 206, 0.32) 45%,
      rgba(255, 255, 255, 0.90) 49%,
      rgba(255, 237, 169, 0.38) 53%,
      rgba(255, 255, 255, 0.00) 59%,
      transparent 66%
    );

  background-size: 240% 100%;
  background-position: 130% 0;

  -webkit-mask-image: var(--carina-leaf-mask);
  mask-image: var(--carina-leaf-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  mix-blend-mode: screen;
  opacity: 0.78;
  pointer-events: none;

  animation: carinaGoldShimmer 4.6s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Hover/touch: un poco más de vida, sin verse chillón */
.carina-gold-leaf:hover::before,
.carina-gold-leaf:active::before {
  filter:
    brightness(1.07)
    saturate(1.04)
    drop-shadow(0 1px 0 rgba(255, 248, 217, 0.85))
    drop-shadow(0 3px 5px rgba(110, 65, 7, 0.20));
}

@keyframes carinaGoldFlow {
  0% {
    background-position: 15% 48%;
    filter:
      brightness(0.99)
      saturate(0.98)
      drop-shadow(0 1px 0 rgba(255, 246, 206, 0.70))
      drop-shadow(0 2px 3px rgba(111, 68, 12, 0.16));
  }

  100% {
    background-position: 86% 54%;
    filter:
      brightness(1.07)
      saturate(1.03)
      drop-shadow(0 1px 0 rgba(255, 250, 224, 0.85))
      drop-shadow(0 3px 5px rgba(111, 68, 12, 0.20));
  }
}

@keyframes carinaGoldShimmer {
  0%,
  56% {
    background-position: 135% 0;
    opacity: 0;
  }

  68% {
    opacity: 0.78;
  }

  84% {
    background-position: -34% 0;
    opacity: 0.66;
  }

  100% {
    background-position: -34% 0;
    opacity: 0;
  }
}

/* Tamaño ideal dentro de las tarjetas */
.menu-card .carina-gold-leaf {
  width: 22px;
  height: 34px;
  opacity: 0.94;
}

/* Si Work conecta el sensor del teléfono:
   actualizar --carina-gold-angle entre aprox. 95deg y 145deg.
   El gradiente responderá al movimiento sin cambiar este archivo.
*/

@media (prefers-reduced-motion: reduce) {
  .carina-gold-leaf,
  .carina-gold-leaf::before,
  .carina-gold-leaf::after {
    animation: none !important;
    transition: none !important;
  }

  .carina-gold-leaf::after {
    opacity: 0.24;
    background-position: 50% 0;
  }
}