/* ============================================
   section-5-timeline-acara.css — Section 05_Timeline_Acara
   Based on Figma frame: 06_Timline_Acara (393 x 742)
   ============================================ */

/* --- Section Wrapper --- */
#section-5-timeline-acara {
  position: relative;
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: visible;
}

/* --- Scale Box Container --- */
.section-5-scale-box {
  position: relative;
  display: flex;
  justify-content: center;
}

/* --- Mobile Preview Container --- */
.section-5-wrapper {
  position: relative;
  width: var(--s5-width);
  height: var(--s5-height);
  background-color: var(--s5-bg-color);
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: top center;
}

/* ============================================
   ELEMENTS
   ============================================ */

/* Pojok Kiri Atas (Flipped X in Figma) */
.s5-corner-tl {
  position: absolute;
  left: var(--s5-corner-tl-x);
  top: var(--s5-corner-tl-y);
  width: var(--s5-corner-tl-width);
  height: var(--s5-corner-tl-height);
  opacity: var(--s5-corner-tl-opacity);
  z-index: var(--s5-corner-tl-z);
  transform: scaleX(-1);
  pointer-events: none;
}

/* Pojok Kanan Atas (Normal) */
.s5-corner-tr {
  position: absolute;
  left: var(--s5-corner-tr-x);
  top: var(--s5-corner-tr-y);
  width: var(--s5-corner-tr-width);
  height: var(--s5-corner-tr-height);
  opacity: var(--s5-corner-tr-opacity);
  z-index: var(--s5-corner-tr-z);
  pointer-events: none;
}

/* Pojok Kiri Bawah (Flipped X & Y in Figma) */
.s5-corner-bl {
  position: absolute;
  left: var(--s5-corner-bl-x);
  top: var(--s5-corner-bl-y);
  width: var(--s5-corner-bl-width);
  height: var(--s5-corner-bl-height);
  opacity: var(--s5-corner-bl-opacity);
  z-index: var(--s5-corner-bl-z);
  transform: scale(-1, -1);
  pointer-events: none;
}

/* Pojok Kanan Bawah (Flipped Y in Figma) */
.s5-corner-br {
  position: absolute;
  left: var(--s5-corner-br-x);
  top: var(--s5-corner-br-y);
  width: var(--s5-corner-br-width);
  height: var(--s5-corner-br-height);
  opacity: var(--s5-corner-br-opacity);
  z-index: var(--s5-corner-br-z);
  transform: scaleY(-1);
  pointer-events: none;
}

/* Icon 5 */
.s5-icon {
  position: absolute;
  left: var(--s5-icon-x);
  top: var(--s5-icon-y);
  width: var(--s5-icon-width);
  height: var(--s5-icon-height);
  opacity: var(--s5-icon-opacity);
  z-index: var(--s5-icon-z);
  pointer-events: none;
}

/* Garis Tengah Timeline */
.s5-timeline-line {
  position: absolute;
  left: var(--s5-timeline-line-x);
  top: var(--s5-timeline-line-y);
  width: var(--s5-timeline-line-width);
  height: var(--s5-timeline-line-height);
  opacity: var(--s5-timeline-line-opacity);
  z-index: var(--s5-timeline-line-z);
  pointer-events: none;
}

/* General image fill */
#section-5-timeline-acara img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Title: Timeline Acara */
.s5-title {
  position: absolute;
  left: var(--s5-title-x);
  top: var(--s5-title-y);
  width: var(--s5-title-width);
  height: var(--s5-title-height);
  font-family: var(--s5-title-font-family);
  font-weight: var(--s5-title-font-weight, 700);
  font-size: var(--s5-title-font-size);
  color: var(--s5-title-color);
  line-height: var(--s5-title-line-height);
  letter-spacing: var(--s5-title-letter-spacing);
  opacity: var(--s5-title-opacity);
  z-index: var(--s5-title-z);
  text-align: center;
  pointer-events: none;
}

/* Timeline Text Common */
.s5-time,
.s5-event {
  position: absolute;
  font-family: var(--s5-text-font-family);
  font-weight: var(--s5-text-font-weight, 700);
  font-size: var(--s5-text-font-size);
  color: var(--s5-text-color);
  line-height: var(--s5-text-line-height);
  letter-spacing: var(--s5-text-letter-spacing);
  opacity: var(--s5-text-opacity);
  z-index: var(--s5-text-z);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Timeline specific positioning */
.s5-time-1 {
  left: var(--s5-time-1-x);
  top: var(--s5-time-1-y);
  width: var(--s5-time-1-width);
  height: var(--s5-time-1-height);
}

.s5-event-1 {
  left: var(--s5-event-1-x);
  top: var(--s5-event-1-y);
  width: var(--s5-event-1-width);
  height: var(--s5-event-1-height);
}

.s5-time-2 {
  left: var(--s5-time-2-x);
  top: var(--s5-time-2-y);
  width: var(--s5-time-2-width);
  height: var(--s5-time-2-height);
}

.s5-event-2 {
  left: var(--s5-event-2-x);
  top: var(--s5-event-2-y);
  width: var(--s5-event-2-width);
  height: var(--s5-event-2-height);
}

.s5-time-3 {
  left: var(--s5-time-3-x);
  top: var(--s5-time-3-y);
  width: var(--s5-time-3-width);
  height: var(--s5-time-3-height);
}

.s5-event-3 {
  left: var(--s5-event-3-x);
  top: var(--s5-event-3-y);
  width: var(--s5-event-3-width);
  height: var(--s5-event-3-height);
}

.s5-time-4 {
  left: var(--s5-time-4-x);
  top: var(--s5-time-4-y);
  width: var(--s5-time-4-width);
  height: var(--s5-time-4-height);
}

.s5-event-4 {
  left: var(--s5-event-4-x);
  top: var(--s5-event-4-y);
  width: var(--s5-event-4-width);
  height: var(--s5-event-4-height);
}

.s5-time-5 {
  left: var(--s5-time-5-x);
  top: var(--s5-time-5-y);
  width: var(--s5-time-5-width);
  height: var(--s5-time-5-height);
}

.s5-event-5 {
  left: var(--s5-event-5-x);
  top: var(--s5-event-5-y);
  width: var(--s5-event-5-width);
  height: var(--s5-event-5-height);
}

.s5-time-6 {
  left: var(--s5-time-6-x);
  top: var(--s5-time-6-y);
  width: var(--s5-time-6-width);
  height: var(--s5-time-6-height);
}

.s5-event-6 {
  left: var(--s5-event-6-x);
  top: var(--s5-event-6-y);
  width: var(--s5-event-6-width);
  height: var(--s5-event-6-height);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes s5RaiseUp {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateY(48px);
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes s5DropDown {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateY(-48px);
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Initial state: Hidden before animation triggers */
#section-5-timeline-acara .s5-icon,
#section-5-timeline-acara .s5-title,
#section-5-timeline-acara .s5-time,
#section-5-timeline-acara .s5-event {
  opacity: 0;
  visibility: hidden;
}

/* Ensure non-animated elements stay visible */
#section-5-timeline-acara .s5-timeline-line,
#section-5-timeline-acara .s5-corner-tl,
#section-5-timeline-acara .s5-corner-tr,
#section-5-timeline-acara .s5-corner-bl,
#section-5-timeline-acara .s5-corner-br,
#section-5-timeline-acara .s5-corner-top-left,
#section-5-timeline-acara .s5-corner-top-right,
#section-5-timeline-acara .s5-corner-bottom-left,
#section-5-timeline-acara .s5-corner-bottom-right {
  opacity: 1;
  visibility: visible;
  animation: none !important;
}

/* Trigger animations when .is-visible is added */
#section-5-timeline-acara.is-visible .s5-icon {
  animation: s5DropDown 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

#section-5-timeline-acara.is-visible .s5-title {
  animation: s5RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

#section-5-timeline-acara.is-visible .s5-time,
#section-5-timeline-acara.is-visible .s5-event {
  animation: s5RaiseUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered animation delays for timeline items */
#section-5-timeline-acara.is-visible .s5-time-1,
#section-5-timeline-acara.is-visible .s5-event-1 {
  animation-delay: 0.5s;
}

#section-5-timeline-acara.is-visible .s5-time-2,
#section-5-timeline-acara.is-visible .s5-event-2 {
  animation-delay: 0.7s;
}

#section-5-timeline-acara.is-visible .s5-time-3,
#section-5-timeline-acara.is-visible .s5-event-3 {
  animation-delay: 0.9s;
}

#section-5-timeline-acara.is-visible .s5-time-4,
#section-5-timeline-acara.is-visible .s5-event-4 {
  animation-delay: 1.1s;
}

#section-5-timeline-acara.is-visible .s5-time-5,
#section-5-timeline-acara.is-visible .s5-event-5 {
  animation-delay: 1.3s;
}

#section-5-timeline-acara.is-visible .s5-time-6,
#section-5-timeline-acara.is-visible .s5-event-6 {
  animation-delay: 1.5s;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #section-5-timeline-acara * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}