/* assets/css/modules.hunt.css */

/* Module: Hunt (claim -> text1 -> text2 add) */



.scrolly--hunt .scrolly__sticky{

  overflow: hidden;

}



/* Fill sticky */

.scrolly--hunt .hunt{

  position: absolute;

  inset: 0;

}



/* Base + layer always absolute (prevents stacking on mobile) */

.scrolly--hunt .hunt__base,

.scrolly--hunt .hunt__layer{

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: block;

}



.scrolly--hunt .hunt__base{

  object-fit: cover;

  z-index: 1;

  filter: brightness(0.92) contrast(1.05);

}



.scrolly--hunt .hunt__layer{

  object-fit: cover;

  z-index: 2;

  opacity: 0;

  transform: translateY(8px) scale(1.01);

  transition: opacity 320ms ease, transform 320ms ease;

  pointer-events: none;

}



/* layer appears from step 2 */

.scrolly--hunt[data-active-step="hunt-text1"] .hunt__layer--a,

.scrolly--hunt[data-active-step="hunt-text2"] .hunt__layer--a{

  opacity: 1;

  transform: none;

}



/* CLAIM: starts big centered, then becomes small top-left */

.scrolly--hunt .hunt__claim{

  position: absolute;

  z-index: 4;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%) scale(1.6);



  font-size: 18px;

  letter-spacing: 0.08em;

  text-transform: uppercase;



  opacity: 0;

  pointer-events: none;

  text-shadow: 0 0 18px rgba(0,0,0,0.65);



  transition:

    opacity 220ms ease,

    transform 520ms ease,

    left 520ms ease,

    top 520ms ease;

}



/* visible on step 1 (big centered) */

.scrolly--hunt[data-active-step="hunt-claim"] .hunt__claim{

  opacity: 0.95;

}



/* on step 2 and 3: keep visible, move to top-left, shrink */

.scrolly--hunt[data-active-step="hunt-text1"] .hunt__claim,
.scrolly--hunt[data-active-step="hunt-text2"] .hunt__claim{
  opacity: 0.9;
  left: var(--pad);
  top: calc(var(--scr-nav-height, 80px) + 10px);
  transform: translate(0, 0) scale(0.9);
}


/* --- Text staggering logic (robust) --- */

.scrolly--hunt .hunt__t1{ display: none; }

.scrolly--hunt .hunt__t2{ display: none; }



.scrolly--hunt[data-active-step="hunt-text1"] .hunt__t1{ display: block; }

.scrolly--hunt[data-active-step="hunt-text2"] .hunt__t1{ display: block; }



.scrolly--hunt[data-active-step="hunt-text2"] .hunt__t2{

  display: block;

  margin-top: 10px;

  animation: huntIn 220ms ease both;

}



@keyframes huntIn{

  from{ opacity: 0; transform: translateY(6px); }

  to{ opacity: 1; transform: translateY(0); }

}



/* --- Overlay base (no position by default) --- */

.scrolly--hunt .scrolly__overlay{

  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;

}



/* We will position t1 and t2 independently */

.scrolly--hunt .scrolly__headline{

  margin: 0;

  font-weight: 400;

}



/* Shared “micro-card” style for readability */

.scrolly--hunt .hunt__t1,

.scrolly--hunt .hunt__t2{

  border-radius: 14px;

  padding: 12px 12px 11px;

  max-width: min(520px, 42vw);

  line-height: 1.35;

  text-align: left;

}



/* --- DESKTOP POSITIONS --- */

/* t1: center-right */

.scrolly--hunt .hunt__t1{

  position: absolute;

  right: calc(var(--pad) + 4vw);

  top: 50%;

  transform: translateY(-50%);

}



/* t2: center-left */

.scrolly--hunt .hunt__t2{

  position: absolute;

  left: calc(var(--pad) + 4vw);

  top: 50%;

  transform: translateY(-50%);

  margin-top: 0; /* override stagger margin for absolute positioning */

}



/* --- MOBILE POSITIONS --- */

@media (max-width: 640px){

  .scrolly--hunt .hunt__claim{

    transform: translate(-50%, -50%) scale(1.35);

    font-size: 16px;

  }



  .scrolly--hunt[data-active-step="hunt-text1"] .hunt__claim,
  .scrolly--hunt[data-active-step="hunt-text2"] .hunt__claim{
    left: var(--pad);
    top: calc(var(--scr-nav-height, 80px) + 8px);
    transform: translate(0, 0) scale(0.85);
  }


  /* Make cards smaller and allow wrapping */

  .scrolly--hunt .hunt__t1,

  .scrolly--hunt .hunt__t2{

    max-width: calc(100% - (var(--pad) * 2));

    font-size: 13px;

    padding: 10px 10px 9px;

    border-radius: 12px;

    white-space: normal;

  }



  /* t1: top (mobile) */

  .scrolly--hunt .hunt__t1{
    left: var(--pad);
    right: var(--pad);
    top: calc(var(--scr-nav-height, 80px) + 56px);
    transform: none;
  }


  /* t2: bottom (mobile) */

  .scrolly--hunt .hunt__t2{
    left: var(--pad);
    right: var(--pad);
    top: auto;
    bottom: var(--pad);
    transform: none;
  }

  /* Step 3: keep t1 readable under the title and reserve bottom space for t2 */
  .scrolly--hunt[data-active-step="hunt-text2"] .hunt__t1{
    top: calc(var(--scr-nav-height, 80px) + 56px);
    bottom: 34vh;
    overflow: auto;
  }

  .scrolly--hunt[data-active-step="hunt-text2"] .hunt__t2{
    max-height: 28vh;
    overflow: auto;
  }
}