/*
 Theme Name: mADhouse
 Template: Divi
 Description: mADhouse Graduation Site
 Author: Evelyn / Starforce Creative
 Version: 1.0
*/

/* =========================
   GLOBAL
   ========================= */
p { text-wrap: pretty; }


/* =========================
   SHARED ANIMATIONS
   ========================= */
@keyframes facePopTwist {
  0%   { transform: translateZ(0) scale(1) rotate(0deg); }
  18%  { transform: translateZ(60px) scale(1.25) rotate(-6deg); }
  38%  { transform: translateZ(0) scale(0.95) rotate(3deg); }
  55%  { transform: translateZ(30px) scale(1.12) rotate(-2deg); }
  72%  { transform: translateZ(0) scale(0.99) rotate(1deg); }
  100% { transform: translateZ(0) scale(1) rotate(0deg); }
}


/* =========================
   HEADER (DESKTOP + MOBILE)
   ========================= */
#mobile-header { display: none; }

.main-logo{
  display: inline-block;
  transform-origin: center center;
  will-change: transform;
  perspective: 800px;
}
.main-logo:hover{
  animation: facePopTwist 0.85s cubic-bezier(.34,1.56,.64,1);
}

#header a,
#mobile-header .menu-icon{
  -webkit-text-stroke: 3px white;
  paint-order: stroke fill;
}

/* Mobile header + overlay */
#mobile-header .menu-overlay{
  position: fixed;
  width: 100%;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
@supports (backdrop-filter: blur(1px)){
  #mobile-header .menu-overlay{
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
  }
}
#mobile-header.is-menu-open .menu-overlay{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 240ms ease;
}
body.menu-open{ overflow: hidden; }

@media (max-width: 767px){
  #header{ display: none; }
  #mobile-header{ display: flex; }
  #mobile-header .main-logo{ width: 15vw !important; }
}


/* =========================
   SITE LOADER
   ========================= */
#site-loader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;

  display: grid;
  place-items: center;

  opacity: 1;
  transform: translateY(0);
  pointer-events: all;

  transition:
    transform 650ms cubic-bezier(.22,1,.36,1),
    opacity 350ms ease;

  will-change: transform, opacity;
}

.site-loader__mouth{
  width: min(22vw, 140px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  perspective: 800px;
}
.site-loader__mouth img,
.site-loader__mouth svg{
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: center center;
  will-change: transform;
  animation: facePopTwist 0.85s cubic-bezier(.34,1.56,.64,1) infinite;
}

/* loader exit states */
#site-loader.is-fading{ opacity: 0.98; }
#site-loader.is-exiting{ transform: translateY(-100%); opacity: 1; }
#site-loader.is-gone{
  display: none;
  pointer-events: none;
}


/* =========================
   NAV ACTIVE COLORS
   ========================= */
/* Cerita + Gangs = Pink */
body #page-container .et_pb_section .main-nav a.et_pb_button.et_pb_button_0_tb_header.is-active,
body #page-container .et_pb_section .main-nav a.et_pb_button.et_pb_button_2_tb_header.is-active{
  color: #FF7FC0 !important;
  -webkit-text-fill-color: #FF7FC0 !important;
}

/* Gilers + Projek Giler = Green */
body #page-container .et_pb_section .main-nav a.et_pb_button.et_pb_button_1_tb_header.is-active,
body #page-container .et_pb_section .main-nav a.et_pb_button.et_pb_button_3_tb_header.is-active{
  color: #45DFA6 !important;
  -webkit-text-fill-color: #45DFA6 !important;
}


/* =========================
   FULL-WIDTH SVG IMAGE MODULE
   ========================= */
.et_pb_image.fullwidth-svg .et_pb_image_wrap img{
  width: 100% !important;
  height: auto !important;
  display: block;
}


/* =========================
   PROJEK GILER — VIDEO
   ========================= */
.projek-giler-video-wrap{
  width: 100%;
  margin: 0;
  padding: 0;
}
.projek-giler-video-inner{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.projek-giler-video-inner .fluid-width-video-wrapper{
  width: 100% !important;
  padding-top: 56.25% !important; /* 16:9 */
  margin: 0 !important;
}
.projek-giler-video-inner .fluid-width-video-wrapper iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}


/* =========================
   PROJEK GILER — MEMBERS GRID
   ========================= */
.projek-giler-members{
  --gap: 24px;
  --min: 15vw;
  --max: 20vw;

  width: 100%;
  box-sizing: border-box;

  display: grid;
  gap: var(--gap);
  align-items: start;
  justify-content: center;

  grid-template-columns: repeat(4, minmax(var(--min), var(--max)));
}

@media (min-width: 981px){
  .projek-giler-members.members-1{ grid-template-columns: repeat(1, minmax(var(--min), var(--max))); }
  .projek-giler-members.members-2{ grid-template-columns: repeat(2, minmax(var(--min), var(--max))); }
  .projek-giler-members.members-3{ grid-template-columns: repeat(3, minmax(var(--min), var(--max))); }
  .projek-giler-members.members-4{ grid-template-columns: repeat(4, minmax(var(--min), var(--max))); }

  .projek-giler-members.members-5{
    grid-template-columns: repeat(3, minmax(var(--min), var(--max)));
  }
  .projek-giler-members.members-5 > .projek-giler-members__row2{
    grid-column: 1 / -1;
    display: grid;
    gap: var(--gap);
    justify-content: center;
    margin: 20px 0;
    grid-template-columns: repeat(2, minmax(var(--min), var(--max)));
  }
}

.projek-giler-member{
  display: block;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  min-width: 0;
}
.projek-giler-member:hover > .projek-giler-member__img{ transform: scale(1.1); }

@media (max-width: 980px){
  .projek-giler-members{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
  .projek-giler-members > .projek-giler-members__row2{ display: contents; }

  .projek-giler-members.members-3 > .projek-giler-member:last-child,
  .projek-giler-members.members-5 > .projek-giler-member:last-child{
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 40vw;
    width: 100%;
  }
}

.projek-giler-member__img{
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  transition: transform .5s ease;
}
.projek-giler-member__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.projek-giler-member__name{
  margin-top: 20px;
  font-weight: normal;
  text-align: center;
  font-family: 'Ghoulish Fright AOE';
  text-transform: uppercase;
  font-size: 2vw;
}
@media (max-width: 767px){
  .projek-giler-member__name{ font-size: 6vw; }
}


/* =========================
   PROJEK GILER — PREV/NEXT BUTTONS
   ========================= */
a.et_pb_button.pg-prev,
a.et_pb_button.pg-next{
  display: inline-flex !important;
  width: auto !important;
  white-space: nowrap !important;

  transition: opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform;
}
a.et_pb_button.pg-prev{
  justify-content: flex-start !important;
  text-align: left !important;
}
a.et_pb_button.pg-next{
  justify-content: flex-end !important;
  text-align: right !important;
}
a.et_pb_button.pg-prev:before,
a.et_pb_button.pg-prev:after,
a.et_pb_button.pg-next:before,
a.et_pb_button.pg-next:after{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
a.et_pb_button.pg-fade{ opacity: 0; }


/* =========================
   PROJEK GILER — SELECTION PINNED STACK
   ========================= */
.projek-giler-selection{
  --pg-sticky-top: 20vh;
  --pg-stage-pad-x: 4vw;
  --pg-stage-max: 1200px;
  --pg-card-h: 65vh;
  --pg-step: 90vh;
  --pg-enter: 120vh;
  --pg-card-radius: 0px;
}

.projek-giler-selection .pg-stage{
  position: relative;
  width: 100%;
  padding-left: var(--pg-stage-pad-x);
  padding-right: var(--pg-stage-pad-x);
}
.projek-giler-selection .pg-pin{
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}
.projek-giler-selection .pg-stack{
  position: relative;
  width: 100%;
  max-width: var(--pg-stage-max);
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}
.projek-giler-selection .pg-item{
  position: absolute;
  left: 0;
  right: 0;
  top: var(--pg-sticky-top);

  margin: 0;
  padding: 0;

  will-change: transform;
  transform: translateY(var(--pg-enter));

  pointer-events: none;
}
.projek-giler-selection .pg-card{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;

  transform: rotate(var(--pg-rot, 0deg));
  transform-origin: 50% 60%;
}
.projek-giler-selection .pg-link{
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}
.projek-giler-selection .pg-img{
  display: block;
  width: auto;
  height: var(--pg-card-h);
  border-radius: var(--pg-card-radius);
}

.projek-giler-selection .pg-footerTitle{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;

  display: none;
  justify-content: center;

  pointer-events: none;
  font-family: 'Ghoulish Fright AOE';
  font-size: 2vw;
}
.projek-giler-selection.pg-footer-on .pg-footerTitle{ display: flex; }

.projek-giler-selection .pg-footerTitle-inner{
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: 'Ghoulish Fright AOE';
  font-size: 2vw;
}

.pg-footerChevron--left{
  display: inline-block;
  margin-right: 3vw;
  transition: all .5s ease;
}
.pg-footerChevron--right{
  display: inline-block;
  margin-left: 3vw;
  transition: all .5s ease;
}
.projek-giler-selection:has(.pg-link:hover) .pg-footerChevron--left{ margin-right: 2vw; }
.projek-giler-selection:has(.pg-link:hover) .pg-footerChevron--right{ margin-left: 2vw; }

.projek-giler-selection .pg-spacer{ height: 200vh; }

.pg-shell,
.pg-shell .et_pb_code,
.pg-shell .et_pb_code_inner,
.pg-shell .projek-giler-selection,
.pg-shell .pg-stage,
.pg-shell .pg-pin,
.pg-shell .pg-stack{
  overflow: visible !important;
}
.pg-shell,
.pg-shell .et_pb_row,
.pg-shell .et_pb_column,
.pg-shell .et_pb_code,
.pg-shell .et_pb_code_inner{
  transform: none !important;
}
.pg-shell .et_pb_column{ min-height: 0; }
.pg-shell,
.pg-shell *{ contain: none !important; }

@media (max-width: 767px){
  .projek-giler-selection .pg-pin{ position: static; height: auto; }
  .projek-giler-selection .pg-stack{ height: auto; }
  .projek-giler-selection .pg-item{
    position: static;
    transform: none;
    pointer-events: auto;
    margin-bottom: 60px;
  }
  .projek-giler-selection .pg-img{ width: 100%; height: auto; }
  .projek-giler-selection .pg-footerTitle{ display: none !important; }
  .projek-giler-selection .pg-spacer{ display: none; }
}


/* =========================
   FOOTER LINKS
   ========================= */
.footer-info a:link,
.footer-info a:visited{
  color: white;
  transition: all .5s ease;
}
.footer-info a:hover{ color: #FFDE02; }


/* =========================
   WORK NAV (GRID LAYOUT)
   ========================= */
.worknav{
  position: relative;
  display: inline-block;
}

.worknav__toggle{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  line-height: 0;

  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(-50%);

  z-index: 20;
  pointer-events: auto;
}

.worknav__burger{
  display: inline-block;
  width: 34px;
  height: 22px;
  position: relative;
}
.worknav__burger::before,
.worknav__burger::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;

  transition:
    transform 320ms cubic-bezier(.2,.9,.2,1),
    top 320ms cubic-bezier(.2,.9,.2,1),
    opacity 200ms linear;
}
.worknav__burger::before{ top: 3px; }
.worknav__burger::after{ top: 15px; }

.worknav.is-open .worknav__burger::before{ top: 9px; transform: rotate(45deg); }
.worknav.is-open .worknav__burger::after{ top: 9px; transform: rotate(-45deg); }

.worknav__items{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 16px 24px;

  margin-left: 72px;
  position: relative;
  z-index: 10;
}

@media (min-width: 981px){
  .worknav__items{ opacity: 0; pointer-events: none; }
  .worknav.is-open .worknav__items{ opacity: 1; pointer-events: auto; }
}

.worknav__item{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.worknav__imgwrap{
  display: inline-block;
  position: relative;
}
.worknav__img{
  display: block;
  height: 7vh;
  width: auto;
  max-width: none;
}

.worknav__item:nth-child(1){ margin-left: -5vh; }
.worknav__item:nth-child(2){ margin-left: -8vh; }
.worknav__item:nth-child(3){ margin-left: 0; }
.worknav__item:nth-child(4){ margin-left: 0; }

.worknav__item:nth-child(1) .worknav__imgwrap{ transform: rotate(-4deg); }
.worknav__item:nth-child(2) .worknav__imgwrap{ transform: rotate(2.5deg); }
.worknav__item:nth-child(3) .worknav__imgwrap{ transform: rotate(1deg); }
.worknav__item:nth-child(4) .worknav__imgwrap{ transform: rotate(-3deg); }

.worknav__img--on{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1);
  transition:
    opacity 200ms linear,
    transform 320ms cubic-bezier(.2,.9,.2,1);
}
.worknav__img--off{
  opacity: 1;
  transition: opacity 200ms linear;
}

.worknav__item:hover .worknav__img--on,
.worknav__item.is-active .worknav__img--on{ opacity: 1; }
.worknav__item:hover .worknav__img--off,
.worknav__item.is-active .worknav__img--off{ opacity: 0; }

@media (min-width: 981px){
  .worknav__item{
    opacity: 0;
    transform: translateY(14px) scale(.92);
    transition:
      opacity 220ms linear,
      transform 520ms cubic-bezier(.16, 1.25, .3, 1);
  }
  .worknav.is-open .worknav__item{
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .worknav.is-open .worknav__item:nth-child(1){ transition-delay: 40ms; }
  .worknav.is-open .worknav__item:nth-child(2){ transition-delay: 80ms; }
  .worknav.is-open .worknav__item:nth-child(3){ transition-delay: 120ms; }
  .worknav.is-open .worknav__item:nth-child(4){ transition-delay: 160ms; }

  .worknav.is-open .worknav__imginner{
    animation: worknavPop 520ms cubic-bezier(.16, 1.25, .3, 1) both;
  }
  @keyframes worknavPop{
    0%   { transform: scale(.92); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }
}

@media (max-width: 980px){
  .worknav__toggle{ display: none; }

  .worknav__items{
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-left: 0;
  }
  .worknav__item{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .worknav__imgwrap{ animation: none !important; }
  .worknav__img{ height: 10vw; }
}

@media (prefers-reduced-motion: reduce){
  .worknav__burger::before,
  .worknav__burger::after,
  .worknav__item,
  .worknav__img--on,
  .worknav__imgwrap{
    transition: none !important;
    animation: none !important;
  }
}


/* =========================
   HOME — BIO BUTTONS
   ========================= */
.btn-bio .btn-bio-hover,
.home-btn .btn-hover{
  opacity: 0;
  transition: opacity .3s ease;
}
.btn-bio:hover > .btn-bio-hover,
.home-btn:hover > .btn-hover{
  opacity: 1;
}

.home-btn.btn-cerita{
  transform: translateX(14vw) translateY(-50%) rotateZ(-22deg);
}
.home-btn.btn-gilers{
  transform: translateX(15vw) translateY(-50%) rotateZ(22deg);
}

@media (max-width: 767px){
  .home-btn.btn-cerita{
    transform: translateX(14vw) translateY(4vw) rotateZ(-22deg);
  }
  .home-btn.btn-gilers{
    transform: translateX(-45vw) translateY(10%) rotateZ(22deg);
  }
}


/* =========================
   WORK PAGE — STICKY + STACKING GALLERY
   ========================= */
.individual-work{
  --sticky-top: 20vh;
  --stack-gap: 26vh;
}

.individual-work,
.individual-work .et_pb_row,
.individual-work .et_pb_column,
.individual-work .et_pb_code,
.individual-work .et_pb_code_inner{
  overflow: visible !important;
}

.individual-work .work-info{
  position: sticky;
  top: 15vh;
  align-self: flex-start;
}

.individual-work .work-gallery .et_pb_code_inner > p{
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-bottom: var(--stack-gap) !important;

  position: sticky;
  top: var(--sticky-top);
  will-change: transform;
}

.individual-work .work-gallery .work-card{
  display: block;
  width: 100%;
}
.individual-work .work-gallery .work-rot{
  display: block;
  transform-origin: center center;
}
.individual-work .work-gallery .work-rot > img{
  display: block;
  width: 100%;
  height: auto;
}
.individual-work .work-gallery .work-gallery-spacer{
  height: 120vh;
}

/* z-index stack */
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(1){ z-index: 1; }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(2){ z-index: 2; }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(3){ z-index: 3; }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(4){ z-index: 4; }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(5){ z-index: 5; }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(6){ z-index: 6; }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(7){ z-index: 7; }

/* rotation pattern */
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(1) .work-rot{ transform: rotate(0deg); }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(2) .work-rot{ transform: rotate(-2deg); }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(3) .work-rot{ transform: rotate(2deg); }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(4) .work-rot{ transform: rotate(-3deg); }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(5) .work-rot{ transform: rotate(2.5deg); }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(6) .work-rot{ transform: rotate(-2.5deg); }
.individual-work .work-gallery .et_pb_code_inner > p:nth-of-type(7) .work-rot{ transform: rotate(3deg); }

@media (max-width: 980px){
  .individual-work{
    --sticky-top: 0px;
    --stack-gap: 10vh;
  }
  .individual-work .work-info{
    position: relative;
    top: auto;
  }
  .individual-work .work-gallery .et_pb_code_inner > p{
    position: relative;
    top: auto;
  }
  .individual-work .work-gallery .work-gallery-spacer{ display: none; }
}


/* =========================
   HOMEPAGE — MARQUEE + CHARACTER POP
   ========================= */
.madness-marquee{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 30vw;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.madness-marquee__track{
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  width: 200vw;
  will-change: transform;
  transform: translate3d(0, -50%, 0);
  animation: madness-marquee-img 18s linear infinite;
}

.madness-marquee__strip{
  width: 98vw;
  margin: 0 1vw;
  flex: 0 0 auto;

  max-width: none !important;
  height: auto;
  display: block;
  opacity: 1;
}

@keyframes madness-marquee-img{
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(-100vw, -50%, 0); }
}

@media (prefers-reduced-motion: reduce){
  .madness-marquee__track{
    animation: none;
    transform: translate(0, -50%);
  }
}

@media (max-width: 767px){
  .madness-marquee{ height: 60vw; }
  .madness-marquee__strip{
    width: 198vw;
    margin: 0 1vw;
    max-width: none !important;
  }
  .madness-marquee__track{ animation-duration: 12s; }

  @keyframes madness-marquee-img{
    from { transform: translate3d(0, -50%, 0); }
    to   { transform: translate3d(-200vw, -50%, 0); }
  }
}

/* character overlay */
.mh-charpop{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: grid;
  place-items: center;
}
.mh-charpop__img{
  height: 75vh;
  width: auto;
  max-width: 92vw;
  transform-origin: center center;
  opacity: 0;
}
.mh-charpop__img.is-anim{
  animation: mh-char-pop 500ms cubic-bezier(.15, 1.35, .35, 1) both;
}
@keyframes mh-char-pop{
  0%   { opacity: 0; transform: translateY(10px) scale(0); }
  45%  { opacity: 1; transform: translateY(0) scale(1.05); }
  60%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .mh-charpop__img{ opacity: 1; transform: none; }
  .mh-charpop__img.is-anim{ animation: none; }
}
@media (max-width: 767px){
  .mh-charpop__img{
    width: 90vw;
    height: 118vw;
    opacity: 0;
  }
}


/* =========================
   CERITA — SCENES + REVEALS
   ========================= */
.scene2-img{ width: 85%; }
.scene4-img{ width: 100%; }
.scene2-img img,
.scene4-img img{
  width: 100% !important;
  height: auto !important;
}

/* scene text positioning */
.scene-2 .text-scene{ bottom: 27vw; left: 50%; top: auto; right: auto; transform: translateX(15.5vw); }
.scene-2 .text-1{ bottom: 33vw; left: 50%; top: auto; right: auto; transform: translateX(-28vw) rotate(2deg); }
.scene-2 .text-3{ bottom: 12vw; left: 50%; top: auto; right: auto; transform: translateX(21vw) rotate(-6deg); }
.scene-2 .text-4{ bottom: 8vw; left: 50%; top: auto; right: auto; transform: translateX(24vw) rotate(3deg); }

.scene-3 .text-scene{ bottom: 15vw; left: 4vw; top: auto; right: auto; }
.scene-3 .text-1{ bottom: 36vw; left: 3vw; top: auto; right: auto; }
.scene-3 .text-2{ bottom: 32vw; left: 10vw; top: auto; right: auto; transform: rotate(3deg); }
.scene-3 .text-4{ bottom: 36vw; left: auto; top: auto; right: 5vw; transform: rotate(4deg); }

.scene-4 .text-scene{ bottom: 23vw; left: 10vw; top: auto; right: auto; }
.scene-4 .text-1{ bottom: 39vw; left: 8vw; top: auto; right: auto; transform: rotate(0); }
.scene-4 .text-2{ bottom: 37vw; left: 20vw; top: auto; right: auto; transform: rotate(-4deg); }

.scene-5 .text-scene{ bottom: 30vw; left: 5vw; top: auto; right: auto; }
.scene-5 .text-2{ bottom: 15vw; left: 6vw; top: auto; right: auto; }
.scene-5 .text-3{ bottom: 12vw; left: 12vw; top: auto; right: auto; transform: rotate(-5deg); }

/* reveal system */
.cerita-scene .cerita-reveal img,
.cerita-scene .text-reveal p{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.cerita-scene.is-active .cerita-reveal img,
.cerita-scene.is-active .text-reveal p{
  opacity: 1;
  transform: translateY(0);
}
.cerita-scene .text-reveal p{
  -webkit-text-stroke: 3px white;
  paint-order: stroke fill;
  z-index: 3;
}

/* stagger */
.cerita-scene.is-active .cerita-reveal.d1 img,
.cerita-scene.is-active .text-reveal.d1 p{ transition-delay: .8s; }
.cerita-scene.is-active .cerita-reveal.d2 img,
.cerita-scene.is-active .text-reveal.d2 p{ transition-delay: 1.1s; }
.cerita-scene.is-active .cerita-reveal.d3 img,
.cerita-scene.is-active .text-reveal.d3 p{ transition-delay: 1.4s; }
.cerita-scene.is-active .cerita-reveal.d4 img,
.cerita-scene.is-active .text-reveal.d4 p{ transition-delay: 1.7s; }
.cerita-scene.is-active .cerita-reveal.d5 img,
.cerita-scene.is-active .text-reveal.d5 p{ transition-delay: 2s; }

/* Cerita mobile wrapper switch */
.cerita-mobile{ display: none; }
@media (max-width: 767px){
  .cerita-wrap,
  .cerita-audio-btn{ display: none; }
  .cerita-mobile{ display: flex; }
}


/* =========================
   CERITA — AUDIO BUTTONS
   ========================= */
.cerita-audio-btn{
  position: fixed;
  top: 12vh;
  left: 5vw;
  z-index: 99;

  display: flex;
  align-items: center;
  gap: 0.6rem;

  background: none;
  border: none;
  color: #000;
  padding: 0.45rem 0.75rem;
  cursor: pointer;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.cerita-audio-btn.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.cerita-audio-icon{
  width: 3vw;
  height: 3vw;
  flex-shrink: 0;
}
.cerita-audio-icon img{
  width: 100%;
  height: 100%;
  display: block;
}
.cerita-audio-label{
  font-family: 'Ghoulish Fright AOE';
  text-transform: uppercase;
  font-size: 1.5vw;
  white-space: nowrap;
}

/* mobile rotated button */
.cerita-audio-btn--mobile{
  position: fixed;
  top: 80px;
  right: 5vw;
  left: auto;
  z-index: 99;

  width: auto !important;
  max-width: max-content;
  white-space: nowrap;

  display: inline-flex;
  align-items: center;

  color: #000;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;

  transform: rotate(-90deg) translateY(-100%);
  transform-origin: top right;
}
.cerita-audio-btn--mobile span{ transform: rotate(180deg); }

.cerita-audio-btn--mobile .cerita-audio-icon{
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.cerita-audio-btn--mobile .cerita-audio-icon img{
  width: 100%;
  height: 100%;
  display: block;
}
.cerita-audio-btn--mobile .cerita-audio-label{
  font-size: 16px;
  white-space: nowrap;
}
@media (min-width: 788px){
  .cerita-audio-btn--mobile{ display: none !important; }
}


/* =========================
   GANGS
   ========================= */
.gang-section .gang-desc-mobile{ display: none; }

.gang-title-mobile,
.gang-title-mobile .et_pb_text_inner,
.gang-title-mobile p{
  display: inline-block;
}
.gang-title-mobile p{
  -webkit-text-stroke: 5px white;
  paint-order: stroke fill;
}

@media (max-width: 767px){
  .gang-section .gang-text-desktop{ display: none; }
  .gang-section .gang-desc-mobile{ display: flex; }
}


/* =========================
   BANNER HERO — CHARACTER ANIMATIONS
   ========================= */
.banner-hero .element{ opacity: 0; }

.banner-hero .ana-head{
  left: 12%;
  transform-origin: center;
  animation: headTwist 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .chain{
  left: 30.7%;
  top: 74%;
  transform-origin: top right;
  animation: chainTwist 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .bandana{
  left: 49%;
  top: 34%;
  transform-origin: bottom right;
  animation: bandanaFade 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .eyes{
  transform-origin: top center;
  left: 57.5%;
  top: 69%;
  animation: eyesMove 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .arm{
  transform-origin: center bottom;
  right: 2%;
  top: -15%;
  left: auto;
  animation: armTwist 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .pointy{
  right: -6.3%;
  bottom: -36.3%;
  top: auto;
  left: auto;
  transform-origin: bottom left;
  animation: pointyFinger 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .leaky{
  transform-origin: top center;
  right: 2.1%;
  bottom: 7.7%;
  top: auto;
  left: auto;
  animation: leaking 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .hole{
  transform-origin: left center;
  left: -3.4%;
  top: 131.8%;
  bottom: auto;
  right: auto;
  animation: holeOut 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .holefront{
  transform-origin: center;
  left: -3.4%;
  top: 131.8%;
  bottom: auto;
  right: auto;
  animation: holeCover 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .pzhand{
  transform-origin: top right;
  left: -2.8%;
  top: 56%;
  bottom: auto;
  right: auto;
  animation: pullPants 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .pzpants{
  transform-origin: top;
  left: -2.1%;
  top: 136.8%;
  bottom: auto;
  right: auto;
  animation: pantsUp 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .jing-head{
  transform-origin: center;
  left: 18%;
  top: 39%;
  bottom: auto;
  right: auto;
  animation: jingheadTwist 6s ease infinite;
  animation-delay: 4s;
}
.banner-hero .wiggleEye{
  transform-origin: bottom left;
  left: 37.7%;
  top: -16.15%;
  bottom: auto;
  right: auto;
  animation: eyeWiggle 6s ease infinite;
  animation-delay: 4s;
}

/* keyframes */
@keyframes holeOut{
  0%{ transform: scale(0); opacity: 0; }
  10%{ transform: scale(1); opacity: 1; }
  82%{ transform: scale(1); opacity: 1; }
  84%{ transform: scale(0); opacity: 0; }
  100%{ transform: scale(0); opacity: 0; }
}
@keyframes holeCover{
  0%{ opacity: 0; }
  10%{ opacity: 0; }
  14%{ opacity: 1; }
  80%{ opacity: 1; }
  82%{ opacity: 0; }
  100%{ opacity: 0; }
}
@keyframes pullPants{
  0%{ opacity: 0; transform: translateY(5vw); }
  9%{ opacity: 0; transform: translateY(5vw) rotate(40deg) scale(0); }
  10%{ opacity: 1; transform: translateY(5vw) rotate(40deg) scale(0); }
  25%{ opacity: 1; transform: translateY(5vw) rotate(0) scale(1); }
  40%{ opacity: 1; transform: translateY(5vw) rotate(0) scale(1); }
  50%{ opacity: 1; transform: translateY(-1vw) rotate(0) scale(1); }
  75%{ opacity: 1; transform: translateY(-1vw) rotate(0) scale(1); }
  78%{ opacity: 1; transform: translateY(5vw) rotate(0) scale(1); }
  79%{ opacity: 1; transform: translateY(5vw) rotate(0) scale(1); }
  82%{ opacity: 0; transform: translateY(5vw) rotate(40deg) scale(0); }
  100%{ opacity: 0; }
}
@keyframes pantsUp{
  0%{ opacity: 0; transform: translateY(5vw); }
  38%{ opacity: 0; transform: translateY(5vw); }
  40%{ opacity: 1; transform: translateY(5vw); }
  50%{ opacity: 1; transform: translateY(-1vw); }
  75%{ opacity: 1; transform: translateY(-1vw); }
  78%{ opacity: 1; transform: translateY(5vw); }
  79%{ opacity: 0; transform: translateY(5vw); }
  100%{ opacity: 0; }
}
@keyframes armTwist{
  0%{ transform: scale(0) rotate(50deg); opacity: 0; }
  10%{ transform: scale(1) rotate(-6deg); opacity: 1; }
  20%{ transform: scale(1) rotate(5deg); opacity: 1; }
  30%{ transform: scale(1) rotate(-6deg); opacity: 1; }
  40%{ transform: scale(1) rotate(5deg); opacity: 1; }
  50%{ transform: scale(1) rotate(-6deg); opacity: 1; }
  60%{ transform: scale(1) rotate(5deg); opacity: 1; }
  72%{ transform: scale(1) rotate(5deg); opacity: 1; }
  74%{ transform: scale(1) rotate(-6deg); opacity: 1; }
  76%{ transform: scale(1) rotate(5deg); opacity: 1; }
  78%{ transform: scale(1) rotate(-6deg); opacity: 1; }
  80%{ transform: scale(0) rotate(50deg); opacity: 0; }
  100%{ transform: scale(0) rotate(50deg); opacity: 0; }
}
@keyframes eyeWiggle{
  0%{ transform: scale(0); opacity: 0; }
  10%{ transform: scale(1); opacity: 1; }
  20%{ transform: scale(1) scaleX(1); opacity: 1; }
  30%{ transform: scale(1) scaleX(0.8); opacity: 1; }
  40%{ transform: scale(1) scaleX(1); opacity: 1; }
  50%{ transform: scale(1) scaleX(0.8); opacity: 1; }
  60%{ transform: scale(1) scaleX(1); opacity: 1; }
  72%{ transform: scale(1) scaleX(1); opacity: 1; }
  74%{ transform: scale(1) scaleX(0.9); opacity: 1; }
  76%{ transform: scale(1) scaleX(1); opacity: 1; }
  78%{ transform: scale(1) scaleX(0.9); opacity: 1; }
  80%{ transform: scale(0) scaleX(1); opacity: 0; }
  100%{ transform: scale(0) scaleX(1); opacity: 0; }
}
@keyframes jingheadTwist{
  0%{ transform: scale(0) rotate(0deg); opacity: 0; }
  8%{ transform: scale(0) rotate(0deg); opacity: 0; }
  15%{ transform: scale(1) rotate(3deg); opacity: 1; }
  25%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  35%{ transform: scale(1) rotate(3deg); opacity: 1; }
  45%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  55%{ transform: scale(1) rotate(3deg); opacity: 1; }
  72%{ transform: scale(1) rotate(3deg); opacity: 1; }
  74%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  76%{ transform: scale(1) rotate(3deg); opacity: 1; }
  78%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  80%{ transform: scale(0) rotate(3deg); opacity: 0; }
  100%{ transform: scale(0) rotate(3deg); opacity: 0; }
}
@keyframes headTwist{
  0%{ transform: scale(0) rotate(0deg); opacity: 0; }
  10%{ transform: scale(0) rotate(0deg); opacity: 0; }
  25%{ transform: scale(1) rotate(0deg); opacity: 1; }
  35%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  45%{ transform: scale(1) rotate(3deg); opacity: 1; }
  55%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  72%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  74%{ transform: scale(1) rotate(3deg); opacity: 1; }
  76%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  78%{ transform: scale(1) rotate(3deg); opacity: 1; }
  80%{ transform: scale(0) rotate(-3deg); opacity: 0; }
  100%{ transform: scale(0) rotate(-3deg); opacity: 0; }
}
@keyframes chainTwist{
  0%{ transform: scale(0) rotate(0deg); opacity: 0; }
  16%{ transform: scale(0) rotate(0deg); opacity: 0; }
  26%{ transform: scale(1) rotate(0deg); opacity: 1; }
  34%{ transform: scale(1) rotate(3deg); opacity: 1; }
  44%{ transform: scale(1) rotate(-4deg); opacity: 1; }
  52%{ transform: scale(1) rotate(4deg); opacity: 1; }
  60%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  72%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  74%{ transform: scale(1) rotate(3deg); opacity: 1; }
  76%{ transform: scale(1) rotate(-3deg); opacity: 1; }
  78%{ transform: scale(1) rotate(3deg); opacity: 1; }
  80%{ transform: scale(0) rotate(-3deg); opacity: 0; }
  100%{ transform: scale(0) rotate(-3deg); opacity: 0; }
}
@keyframes bandanaFade{
  0%{ transform: scale(0); opacity: 0; }
  35%{ transform: scale(0); opacity: 0; }
  44%{ transform: scale(1); opacity: 1; }
  74%{ transform: scale(1); opacity: 1; }
  77%{ transform: scale(0); opacity: 0; }
  100%{ transform: scale(0); opacity: 0; }
}
@keyframes eyesMove{
  0%{ transform: scale(0); opacity: 0; }
  33%{ transform: scale(0) rotate(0deg); opacity: 0; }
  43%{ transform: scale(1) rotate(8deg); opacity: 1; }
  53%{ transform: scale(1) rotate(-5deg); opacity: 1; }
  60%{ transform: scale(1) rotate(8deg); opacity: 1; }
  72%{ transform: scale(1) rotate(8deg); opacity: 1; }
  74%{ transform: scale(1) rotate(-5deg); opacity: 1; }
  76%{ transform: scale(1) rotate(0deg); opacity: 1; }
  78%{ transform: scale(0) rotate(-10deg); opacity: 0; }
  100%{ transform: scale(0); opacity: 0; }
}
@keyframes leaking{
  0%{ transform: scale(0); opacity: 0; }
  28%{ transform: scale(0); opacity: 0; }
  32%{ transform: scale(1); opacity: 1; }
  77%{ transform: scale(1); opacity: 1; }
  80%{ transform: scale(0); opacity: 0; }
  100%{ transform: scale(0); opacity: 0; }
}
@keyframes pointyFinger{
  0%{ transform: scale(0) rotate(8deg); opacity: 0; }
  15%{ transform: scale(0) rotate(8deg); opacity: 0; }
  25%{ transform: scale(1) rotate(0deg); opacity: 1; }
  35%{ transform: scale(1) rotate(8deg); opacity: 1; }
  45%{ transform: scale(1) rotate(0deg); opacity: 1; }
  55%{ transform: scale(1) rotate(8deg); opacity: 1; }
  72%{ transform: scale(1) rotate(8deg); opacity: 1; }
  74%{ transform: scale(1) rotate(0deg); opacity: 1; }
  76%{ transform: scale(1) rotate(8deg); opacity: 1; }
  78%{ transform: scale(1) rotate(0deg); opacity: 1; }
  80%{ transform: scale(0) rotate(8deg); opacity: 0; }
  100%{ transform: scale(0) rotate(8deg); opacity: 0; }
}