@font-face {
  font-family: 'Demather';
  src: url('Demather.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Beauty';
  src: url('BeautyDemo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

h1{
    color:red;
    font-family: "Helvetica";
    font-size: 55px;
}

p{
    font-size: 23px;
}

:root{
  --frame: 0.5s;   
  --total: 15;   
}

.stage {
  position: relative;
  width: 600px;             
  aspect-ratio: 4 / 5;       
  margin: 40px auto;
  background: transparent;  
  overflow: hidden;
  border-radius: 12px;
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;                   
  opacity: 0;
  animation: show calc(var(--total) * var(--frame)) linear infinite;
  animation-delay: calc(var(--i) * var(--frame));
  will-change: opacity;
}

@keyframes show {
  0%   { opacity: 0 }
  2%   { opacity: 1 }   /* fade in */
  10%  { opacity: 1 }   /* hold */
  12%  { opacity: 0 }   /* fade out */
  100% { opacity: 0 }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .frame { animation: none; opacity: 1; }
}