/*animasi teks 1*/
.focus-word{
    display:inline-block;
    animation:focusAnim 7s;
}

.execute-word{
    display:inline-block;
    animation:executeAnim 7s;
}

.repeat-word{
    display:inline-block;
    animation:repeatAnim 7s;
}

@keyframes focusAnim{
    0%,20%{
        transform:scale(1.15);
        letter-spacing:4px;
        color:#60a5fa;
    }
    30%,100%{
        transform:scale(1);
        letter-spacing:0;
        color:inherit;
    }
}

@keyframes executeAnim{
    30%,50%{
        transform:translateX(15px);
        color:#22c55e;
    }
    60%,100%{
        transform:translateX(0);
        color:inherit;
    }
}

@keyframes repeatAnim{
    60%,80%{
        transform:rotate(-10deg) scale(1.1);
        color:#f59e0b;
    }
    90%,100%{
        transform:rotate(0) scale(1);
        color:inherit;
    }
}

/*k*/
.typewriter-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* center horizontal */
  text-align: center;
  font-family: monospace;
  color: #93c5fd;
}

.line {
  overflow: hidden;
  white-space: nowrap;
}

/* Baris pertama */
.line1 {
  width: 0;
  animation: typing1 3s steps(45, end) forwards;
}

/* Wrapper agar baris kedua tidak terlihat sebelum waktunya */
.line-wrapper {
  height: 1.5em;
}

/* Baris kedua */
.line2 {
  width: 0;
  opacity: 0;
  border-right: 2px solid #93c5fd;
  animation:
    showLine2 0s 3s forwards,
    typing2 2.5s steps(35, end) 3s forwards,
    blink-caret .75s step-end infinite 5.5s;
}

@keyframes typing1 {
  from { width: 0 }
  to { width: 48ch }
}

@keyframes showLine2 {
  to { opacity: 1 }
}

@keyframes typing2 {
  from { width: 0 }
  to { width: 27ch }
}

@keyframes blink-caret {
  0%,100% { border-color: transparent; }
  50% { border-color: #93c5fd; }
}

/*---------------------------------------*/
.subtle-pattern {
            background-color: #1e3a5f;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 30px 30px;
        }
        
        .toggle-checkbox:checked {
            left: 20px;
        }

/* Animasi utama untuk seluruh SVG */
.animated-svg {
  animation: fadeInUp 1s ease-out forwards;
  max-width: 280px;
    height: auto;
    margin: 20px auto;
}

/* Animasi untuk irisan Pie Chart */
.pie-slice {
  transform-origin: 158.592px 189.631px; /* Titik tengah dari pie chart */
  transform: scale(0);
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pie-slice-1 { animation-delay: 0.8s; }
.pie-slice-2 { animation-delay: 1.0s; }
.pie-slice-3 { animation-delay: 1.2s; }
.pie-slice-4 { animation-delay: 1.4s; }

.pie-chart {
    transform-origin: 158.592px 189.631px;
    animation: rotatePie 12s linear infinite;
}

/* Animasi untuk batang Bar Chart */
.bar {
  transform-box: fill-box; /* Memastikan transform-origin dihitung berdasarkan elemen itu sendiri */
  transform-origin: center bottom;
  transform: scaleY(0);
  animation: growUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bar-1 {
  animation: chartBar1 3s ease-in-out infinite;
}

.bar-2 {
  animation: chartBar2 3s ease-in-out infinite;
}

.bar-3 {
  animation: chartBar3 3s ease-in-out infinite;
}

.bar-4 {
  animation: chartBar4 3s ease-in-out infinite;
}

/* Animasi untuk garis-garis teks */
.text-line {
  opacity: 0;
  transform: translateX(-10px);
  animation: slideInLeft 0.5s ease-out forwards;
}

.text-line-1 { animation-delay: 2.4s; }
.text-line-2 { animation-delay: 2.5s; }
.text-line-3 { animation-delay: 2.6s; }
.text-line-4 { animation-delay: 2.7s; }
.text-line-5 { animation-delay: 2.8s; }
.text-line-6 { animation-delay: 2.9s; }

/* Animasi untuk header/judul window */
.header {
  opacity: 0;
  transform: translateY(-10px);
  animation: slideDown 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* Keyframes Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes growUp {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 0.2; /* Mengembalikan opacity asli sesuai inline style SVG */
    transform: translateX(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 0.4; /* Mengembalikan opacity asli sesuai inline style SVG */
    transform: translateY(0);
  }
}

@keyframes chartBar1 {
  0%,100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

@keyframes chartBar2 {
  0%,100% { transform: scaleY(0.8); }
  50% { transform: scaleY(0.5); }
}

@keyframes chartBar3 {
  0%,100% { transform: scaleY(0.6); }
  50% { transform: scaleY(1.2); }
}

@keyframes chartBar4 {
  0%,100% { transform: scaleY(1); }
  50% { transform: scaleY(0.7); }
}

@keyframes rotatePie {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/** floating stars **/
.floating-stars{
    position:absolute;
    inset:0;
    width:120px;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.floating-stars span{
    position:absolute;
    bottom:-30px;
    color:gray;
font-size:20px;
    animation:starFloat linear infinite;
}

.floating-stars span::before{
    content:"★";
    font-size:18px;
    font-weight:300;
}

.floating-stars span:nth-child(1){
    left:10px;
    animation:starFloat 12s linear infinite;
}
.floating-stars span:nth-child(2){
    left:25px;
    animation:starFloat 18s linear infinite -4s;
}
.floating-stars span:nth-child(3){
    left:45px;
    animation:starFloat 15s linear infinite -8s;
}
.floating-stars span:nth-child(4){
    left:65px;
    animation:starFloat 20s linear infinite -2s;
}
.floating-stars span:nth-child(5){
    left:85px;
    animation:starFloat 14s linear infinite -10s;
}
.floating-stars span:nth-child(6){
    left:35px;
    animation:starFloat 17s linear infinite -6s;
}
.floating-stars span:nth-child(7){
    left:75px;
    animation:starFloat 13s linear infinite -3s;
}
.floating-stars span:nth-child(8){
    left:100px;
    animation:starFloat 21s linear infinite -12s;
}

@keyframes starFloat{
    0%{
        transform:translateY(0) translateX(0) rotate(0deg);
        opacity:0;
    }

    15%{
        opacity:.3;
    }

    50%{
        transform:translateY(-300px) translateX(10px) rotate(180deg);
        opacity:.2;
    }

    100%{
        transform:translateY(-900px) translateX(-10px) rotate(360deg);
        opacity:0;
    }
}