/* ============================================================
   CitaLoka Fest 2026 — Custom Styles
   Companion to Tailwind utility classes used in index.html
   ============================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

body {
  font-family: "IBM Plex Sans", sans-serif;
}

/* ---------- Grain Paper Overlay ---------- */
.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  /* background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDuPkFqg_UTSFCl-x7zWDdx5XOCk7Hp69DOreck7-4Hy3HvB8BlQrjA6U8h2ITHkPaGUVjgjN-NoKW7iXm0WjlZ7PpM5as3EjPfU9zAF57ZFIxC7Lt_ctXrDjkatT-OQBuG5O167sg_rw9o0LGbGQo0ddaJFES_oGpPd7OmVIMQqpDrCBNG0XW00SGREx5uPy4dgWcF7P3-k0F3XMBEhMA4WOAe-BoMur7OYS7OJkA7QZRB6jxXRZAcCkq9ScJ0LbKFCqaU_GgqF1op"); */
}

#hero{
   background-image: 
    url('https://asset-1.tribunnews.com/img/citaloka/red-2.png'),    /* top-left */
    url('https://asset-1.tribunnews.com/img/citaloka/red-3.png'),    /* center-right */
    url('https://asset-1.tribunnews.com/img/citaloka/red-1.png');    /* bottom-left */
  background-position: 
   left 2rem top 8rem,    
   right 5rem center,  
   left 5rem bottom;
  background-repeat: 
    no-repeat,
    no-repeat,
    no-repeat;
  background-size: 
    200px auto,
    200px auto,
    300px auto;
}

#vision{
  background-image: 
    url('https://asset-1.tribunnews.com/img/citaloka/blue-1.png'),    
    url('https://asset-1.tribunnews.com/img/citaloka/blue-2.png');
  background-position: 
    right 9rem top 8rem,    
    left 15rem bottom;  
  background-repeat:
    no-repeat,
    no-repeat;
  background-size:
    200px auto,
    300px auto;
}


/* ---------- Kinetic Hollow Text ---------- */
.kinetic-text {
  -webkit-text-stroke: 1px #b61722;
  color: transparent;
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.kinetic-text:hover {
  color: #b61722;
  -webkit-text-stroke: 1px transparent;
}

/* ---------- Nav Blur ---------- */
.nav-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f9f9f9; }
::-webkit-scrollbar-thumb { background: #e4beba; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #b61722; }

/* ---------- Animations (mimic Framer Motion effects) ---------- */

/* Slow rotate - 20s (logo & header ornament) */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-rotate-slow {
  animation: rotate-slow 20s linear infinite;
}

/* Slow rotate - 60s (hero ornament stamp) */
.animate-rotate-slow-60 {
  animation: rotate-slow 60s linear infinite;
}

/* Bouncy scroll arrow */
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.animate-bounce-soft {
  animation: bounce-soft 1.6s ease-in-out infinite;
}

/* Reveal-on-scroll — initial hidden state */
.reveal-up,
.reveal-fade,
.reveal-section {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-fade {
  transform: none;
  transition: opacity 1.5s ease;
}
.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for the hero block */
.reveal-up.delay-1 { transition-delay: 0.1s; }
.reveal-up.delay-2 { transition-delay: 0.3s; }
.reveal-up.delay-3 { transition-delay: 0.35s; }
.reveal-up.delay-4 { transition-delay: 0.4s; }

/* Preloader fade-out */
.preloader-fade-out {
  opacity: 0 !important;
  transform: scale(1.05);
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1),
              transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none !important;
}

/* Tab active — kotak biru di kiri */
/* Tab active — kotak biru di kiri */
.tab-btn.tab-active {
  border-left: none !important;
  padding-left: 0 !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tab-btn.tab-active::before {
  content: '';
  display: inline-block;
  width: 36px;
  height: 24px;
  background-color: #1C80F7;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Tab inactive */
.tab-btn:not(.tab-active) {
  border-left: none !important;
  padding-left: 16px;
}
/* Modal/drawer entrance */
.modal-enter {
  animation: modal-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.modal-enter-backdrop {
  animation: fade-in 0.3s ease both;
}
@keyframes modal-enter {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Story card entrance (used when filtering) */
.story-card-enter {
  animation: story-enter 0.5s ease both;
}
@keyframes story-enter {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Toast entrance */
.toast-enter {
  animation: toast-spring 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes toast-spring {
  from { opacity: 0; transform: translate(-50%, 55px) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Line clamp helpers (tailwind has these but ensuring availability) */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* For prose containers — disable global justify */
.modal-body,
.modal-body p {
  text-align: left;
}

/* Form-input focus polish (matches React `focus:ring-1` look) */
.form-input:focus,
.form-input:focus-within {
  outline: none;
  border-color: #b61722;
  box-shadow: 0 0 0 1px #b61722;
}

/* Slightly larger custom text sizes used by source (not in default Tailwind) */
.text-2\.5xl { font-size: 1.75rem; line-height: 2.1rem; }
.text-3\.5xl { font-size: 2rem; line-height: 2.4rem; }
@media (min-width: 768px) {
  .md\:text-3\.5xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

 #schedule{
  background-image: url(https://asset-1.tribunnews.com/img/citaloka/red-4.png);
  background-position: right 17rem top 2rem;
  background-repeat: no-repeat;
  background-size: 150px auto;
}

/*#showcase{
   background-image: url('https://asset-1.tribunnews.com/img/citaloka/SGGG.png'), url('https://asset-1.tribunnews.com/img/citaloka/SG_CLF.png');
    background-position: center top, center bottom;
    background-repeat: no-repeat, repeat;
} */

#schedule ~ .grain-overlay,
.grain-overlay {
  mix-blend-mode: normal;
}
#showcase{
  background-image: url(https://asset-1.tribunnews.com/img/citaloka/blue-3.png);
  background-position: center top 1rem;
  background-repeat: no-repeat;
  background-size: 300px auto;
}
#story{
  background-image: url(https://asset-1.tribunnews.com/img/citaloka/bg-section.png);
  background-repeat: no-repeat;
    background-size: cover;
    min-height: 90vh;
}
#inovasi{
   background-image: url(https://asset-1.tribunnews.com/img/citaloka/bg-inovasi.png);
  background-repeat: no-repeat;
    background-size: cover;
    min-height: 90vh;
}
/* #stories{
   background-color: #03122B;
  background-image:
    url( './CLF_Red.png'),   
    url('./SG_CLF_Blue.png');    
  background-position:
    right top,
    left bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: 420px, 380px;
} */
/* Override stories text colors for dark bg */
#stories .font-mono.text-\[\#1C80F7\] {
  color: #60a5fa;
}
#stories h2.text-\[\#0D3B99\] {
  color: #ffffff;
}
#stories p.text-neutral-500 {
  color: rgba(255,255,255,0.65);
}
#stories .bg-white {
  border-color: rgba(255,255,255,0.12);
}
#stories .text-neutral-800 {
  color: #ffffff;
}
#stories .text-neutral-500,
#stories .text-neutral-400 {
  color: rgba(255,255,255,0.55);
}
#stories .border-neutral-100 {
  border-color: rgba(255,255,255,0.1);
}
@media (max-width: 576px) {
  #vision {
    background-position: right 9rem top 0rem, left 15rem bottom;
  }
}