/* ==========================================================
   ALTRAMINE V20
   1) Remove the large right-side Live Operations box in hero
   2) Give ALL homepage image cards a strong animated gold frame
   ========================================================== */

:root{
  --v20-gold:#d7a72b;
  --v20-gold2:#ffe58c;
  --v20-gold3:#8f5c05;
  --v20-white:#fff7cf;
}

/* ----------------------------------------------------------
   REMOVE SECOND-SCREEN CURSOR-MARKED HERO BOX
   ---------------------------------------------------------- */
.v17-hero-visual .v17-visual-frame,
.v17-hero-visual .v17-live-card,
.v17-hero-visual .v17-visual-label,
.v12-side,
.v12-video-card,
.v12-floating-price{
  display:none !important;
}

/* Keep the right 45% open so mining video remains visible */
.v17-hero-visual{
  display:block !important;
  min-height:420px !important;
  pointer-events:none !important;
}

/* Slightly improve video reveal on right */
.v17-hero-overlay{
  background:
    linear-gradient(
      90deg,
      rgba(2,7,12,.97) 0%,
      rgba(2,8,13,.90) 35%,
      rgba(2,8,13,.45) 56%,
      rgba(2,8,13,.14) 76%,
      rgba(2,8,13,.05) 100%
    ),
    linear-gradient(0deg,rgba(0,0,0,.68),transparent 52%) !important;
}

/* ----------------------------------------------------------
   FULL GOLD FRAME FOR ALL HOME IMAGES
   ---------------------------------------------------------- */
@property --v20-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

.v20-gold-frame{
  --v20-angle:0deg;
  --v20-x:50%;
  --v20-y:50%;

  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
  border-radius:16px !important;
  border:2px solid rgba(231,183,54,.70) !important;
  background:#070b0e;
  box-shadow:
    0 18px 48px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,229,143,.03),
    inset 0 0 20px rgba(255,215,87,.025);
  transition:
    transform .28s cubic-bezier(.16,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease;
}

/* Constant moving bright gold border */
.v20-gold-frame::before{
  content:"";
  position:absolute;
  inset:-3px;
  z-index:9;
  padding:3px;
  border-radius:inherit;
  pointer-events:none;

  background:
    conic-gradient(
      from var(--v20-angle),
      #8b5905 0deg,
      #d4a126 34deg,
      #ffe888 58deg,
      #fff9d4 70deg,
      #ffe37c 82deg,
      #c98f13 105deg,
      #8b5905 132deg,
      #d4a126 185deg,
      #ffe888 220deg,
      #fff9d4 234deg,
      #d4a126 260deg,
      #8b5905 300deg,
      #d4a126 360deg
    );

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

  animation:v20GoldBorderRotate 5.3s linear infinite;
}

@keyframes v20GoldBorderRotate{
  to{--v20-angle:360deg}
}

/* Animated inner glow */
.v20-gold-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(
      330px circle at var(--v20-x) var(--v20-y),
      rgba(255,236,168,.22),
      rgba(225,169,41,.10) 28%,
      transparent 62%
    );
  box-shadow:
    inset 0 0 32px rgba(255,207,72,.045),
    inset 0 0 0 1px rgba(255,233,153,.06);
}

/* moving sweep across the image */
.v20-shine{
  position:absolute;
  z-index:10;
  top:-45%;
  left:-35%;
  width:18%;
  height:190%;
  transform:rotate(18deg);
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,230,135,.10),
      rgba(255,255,255,.23),
      rgba(255,220,104,.11),
      transparent
    );
  filter:blur(.2px);
  animation:v20Sweep 6.5s ease-in-out infinite;
}

@keyframes v20Sweep{
  0%,25%{left:-35%}
  58%,100%{left:135%}
}

/* Four premium corner marks */
.v20-corner{
  position:absolute;
  width:25px;
  height:25px;
  z-index:11;
  pointer-events:none;
}

.v20-corner::before,
.v20-corner::after{
  content:"";
  position:absolute;
  background:linear-gradient(90deg,var(--v20-white),var(--v20-gold2),transparent);
  box-shadow:0 0 12px rgba(255,226,127,.48);
}

.v20-corner::before{width:25px;height:2px}
.v20-corner::after{width:2px;height:25px}

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

/* Gold circular pulse points similar to screenshot reference */
.v20-pulse-dot{
  position:absolute;
  z-index:12;
  width:50px;
  height:50px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 30%,#fff4b7 0 12%,#ffe27a 13% 48%,#d99f1c 70%,#8b5906 100%);
  border:1px solid rgba(255,244,183,.65);
  box-shadow:
    0 0 0 1px rgba(255,214,86,.14),
    0 0 24px rgba(233,173,38,.28);
  animation:v20PulseDot 2.4s ease-in-out infinite;
}
.v20-pulse-dot::before,
.v20-pulse-dot::after{
  content:"";
  position:absolute;
  background:rgba(135,89,9,.42);
}
.v20-pulse-dot::before{width:18px;height:1px;left:15px;top:24px}
.v20-pulse-dot::after{width:1px;height:18px;left:24px;top:15px}
.v20-pulse-dot.top{left:12px;top:12px}
.v20-pulse-dot.bottom{left:12px;bottom:12px;animation-delay:.9s}

@keyframes v20PulseDot{
  0%,100%{transform:scale(.92);filter:brightness(.95)}
  50%{transform:scale(1.08);filter:brightness(1.12)}
}

/* hover */
.v20-gold-frame:hover{
  transform:translateY(-5px);
  border-color:var(--v20-gold2) !important;
  box-shadow:
    0 28px 82px rgba(0,0,0,.44),
    0 0 38px rgba(225,163,27,.19),
    inset 0 0 32px rgba(255,213,87,.06);
}

.v20-gold-frame img{
  transition:
    transform .85s cubic-bezier(.16,.8,.2,1),
    filter .65s ease;
}
.v20-gold-frame:hover img{
  transform:scale(1.045);
  filter:saturate(1.10) contrast(1.04) brightness(1.02);
}

/* Improve caption readability */
.v20-gold-frame .v11-card-caption,
.v20-gold-frame .v11-op-overlay{
  z-index:6;
}

.v20-gold-frame .v11-card-caption{
  background:linear-gradient(90deg,rgba(3,6,9,.80),rgba(3,6,9,.20));
  padding:10px 12px;
  border-left:2px solid var(--v20-gold2);
}

/* Operations cards */
.v11-op-card.v20-gold-frame{
  border-radius:15px !important;
}
.v11-op-card.v20-gold-frame > span{
  z-index:12 !important;
  box-shadow:0 0 18px rgba(228,171,36,.25);
}

/* Smaller sustainability/news image cards */
.v11-sus-card.v20-gold-frame,
.v11-news-card.v20-gold-frame{
  border-radius:14px !important;
}

/* About collage spacing */
.v11-about-collage{
  gap:18px !important;
}

/* Remove previous odd marker borders/dots if old versions still loaded */
.v15-corner,
.v19-corner,
.v19-shine{
  display:none !important;
}

/* Keep previous pseudo border layers from fighting V20 */
.v19-gold-frame::before,
.v19-gold-frame::after,
.v15-light-border::before,
.v15-light-border::after{
  display:none !important;
}

/* Responsive */
@media(max-width:920px){
  .v17-hero-visual{
    display:none !important;
  }
}

@media(max-width:700px){
  .v20-gold-frame{
    border-radius:12px !important;
  }
  .v20-pulse-dot{
    width:42px;
    height:42px;
  }
  .v20-pulse-dot::before{width:16px;left:12px;top:20px}
  .v20-pulse-dot::after{height:16px;left:20px;top:12px}
}

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