
/* ==========================================================
   ALTRAMINE V19
   ALL HOME BOXES + IMAGES = PREMIUM ANIMATED GOLD BORDER
   ========================================================== */

:root{
  --v19-gold:#d7a72e;
  --v19-gold2:#ffe88d;
  --v19-gold3:#8e5b05;
  --v19-white:#fff8d4;
}

/* Apply premium frame to image/card containers */
.v19-gold-frame{
  --v19-angle:0deg;
  --v19-x:50%;
  --v19-y:50%;

  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
  border-radius:16px !important;
  border:1px solid rgba(231,183,59,.30) !important;
  background-clip:padding-box;
  box-shadow:
    0 16px 45px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,225,133,.025);
  transition:
    transform .28s cubic-bezier(.16,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease;
}

/* Rotating gold light around border */
@property --v19-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

.v19-gold-frame::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:8;
  padding:2px;
  border-radius:inherit;
  pointer-events:none;

  background:
    conic-gradient(
      from var(--v19-angle),
      transparent 0deg 36deg,
      rgba(255,217,106,.12) 50deg,
      var(--v19-gold) 68deg,
      var(--v19-gold2) 80deg,
      var(--v19-white) 88deg,
      var(--v19-gold2) 96deg,
      var(--v19-gold3) 108deg,
      transparent 124deg 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;

  animation:v19BorderRotate 4.5s linear infinite;
}

@keyframes v19BorderRotate{
  to{--v19-angle:360deg}
}

/* Cursor-following gold glow */
.v19-gold-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:7;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(
      270px circle at var(--v19-x) var(--v19-y),
      rgba(255,234,157,.22),
      rgba(226,171,45,.09) 26%,
      transparent 62%
    );
  opacity:.70;
  transition:opacity .25s ease;
}

.v19-gold-frame:hover::after{
  opacity:1;
}

.v19-gold-frame:hover{
  transform:translateY(-5px);
  border-color:rgba(255,224,117,.58) !important;
  box-shadow:
    0 26px 75px rgba(0,0,0,.40),
    0 0 34px rgba(220,158,25,.16),
    inset 0 0 28px rgba(255,216,94,.05);
}

/* Animated image zoom */
.v19-gold-frame img{
  transition:
    transform .8s cubic-bezier(.16,.8,.2,1),
    filter .6s ease;
}

.v19-gold-frame:hover img{
  transform:scale(1.045);
  filter:saturate(1.10) contrast(1.04) brightness(1.02);
}

/* Gold corners */
.v19-corner{
  position:absolute;
  z-index:10;
  width:20px;
  height:20px;
  pointer-events:none;
  opacity:.95;
}

.v19-corner::before,
.v19-corner::after{
  content:"";
  position:absolute;
  background:linear-gradient(90deg,var(--v19-white),var(--v19-gold),transparent);
  box-shadow:0 0 12px rgba(255,225,125,.42);
}

.v19-corner::before{width:20px;height:1px}
.v19-corner::after{width:1px;height:20px}

.v19-corner.tl{left:8px;top:8px}
.v19-corner.tr{right:8px;top:8px;transform:rotate(90deg)}
.v19-corner.bl{left:8px;bottom:8px;transform:rotate(-90deg)}
.v19-corner.br{right:8px;bottom:8px;transform:rotate(180deg)}

/* Extra gold sweep on image cards */
.v19-gold-frame .v19-shine{
  position:absolute;
  z-index:9;
  top:-30%;
  left:-45%;
  width:24%;
  height:165%;
  pointer-events:none;
  transform:rotate(18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,237,171,.08),
    rgba(255,255,255,.20),
    rgba(255,226,130,.08),
    transparent
  );
  animation:v19CardShine 5.8s ease-in-out infinite;
}

@keyframes v19CardShine{
  0%,28%{left:-45%}
  60%,100%{left:135%}
}

/* Make collage/image cards more premium */
.v11-img-card.v19-gold-frame,
.v11-op-card.v19-gold-frame,
.v11-sus-card.v19-gold-frame,
.v11-news-card.v19-gold-frame{
  background:#070b0e;
}

/* Left feature boxes */
.v11-feature-list > div.v19-gold-frame{
  border-radius:12px !important;
}

/* Market boxes */
.v11-market-cell.v19-gold-frame,
.v11-live.v19-gold-frame,
.v11-stat.v19-gold-frame{
  border-radius:10px !important;
}

/* Main about collage specifically */
.v11-about-collage{
  gap:16px !important;
}

.v11-img-card.big.v19-gold-frame{
  box-shadow:
    0 30px 80px rgba(0,0,0,.38),
    0 0 28px rgba(210,151,22,.08);
}

/* Prevent overlays from hiding animated border */
.v11-card-caption,
.v11-op-card h3,
.v11-op-card p,
.v11-op-card > span,
.v11-sus-card > div,
.v11-news-card > div{
  z-index:6;
}

/* Mobile */
@media(max-width:700px){
  .v19-gold-frame{
    border-radius:12px !important;
  }
  .v19-gold-frame:hover{
    transform:translateY(-2px);
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  .v19-gold-frame::before,
  .v19-gold-frame .v19-shine{
    animation:none !important;
  }
  .v19-gold-frame:hover{
    transform:none !important;
  }
}
