html,body{overflow-x:clip}
/* Isolated hero-mark motion. Kept separate so the portfolio stylesheet stays untouched. */
.big-star{
  position:relative;
  isolation:isolate;
  overflow:visible;
  transform-style:preserve-3d;
  will-change:transform;
  background:
    radial-gradient(circle at 28% 18%,#ffffffcc 0 2%,transparent 18%),
    linear-gradient(145deg,#a9ff41 0%,#37eb68 38%,#079f3d 100%);
  border:1px solid #dfff78;
  border-radius:30px;
  box-shadow:
    inset 10px 10px 18px #dfff7866,
    inset -12px -16px 22px #00572990,
    0 20px 32px #050b1f66;
  color:#fbfff1;
  text-shadow:2px 3px 0 #89bc5a,5px 7px 0 #265a42,0 0 22px #ffffff99;
  animation:hero-mark-float 6s ease-in-out infinite;
}
.big-star::before,
.big-star::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  background:transparent;
}
.big-star::before{
  inset:-14px;
  z-index:-1;
  border:1px solid #dfff78aa;
  transform:rotateX(64deg) rotateZ(-18deg) scaleX(1.35);
  box-shadow:0 0 0 8px #dfff7822,0 0 26px #dfff7866;
}
.big-star::after{
  inset:-19px;
  z-index:-1;
  border:1px solid #a7b7ec88;
  transform:rotateY(68deg) rotateZ(30deg) scaleX(1.15);
  box-shadow:0 0 0 7px #a7b7ec18;
}
@keyframes hero-mark-float{
  0%,100%{transform:rotateX(0deg) rotateY(0deg) translateY(0)}
  35%{transform:rotateX(8deg) rotateY(-12deg) translateY(-7px)}
  70%{transform:rotateX(-5deg) rotateY(10deg) translateY(3px)}
}
@media(max-width:720px){
  .big-star{animation-duration:7s;border-radius:26px}
  .big-star::before{inset:-11px}
  .big-star::after{inset:-15px}
}
@media(prefers-reduced-motion:reduce){
  .big-star{animation:none!important}
}