/* The Bitcoin Store — journey section scroll cinematic (pin + scrub) */

/* Default (no JS / reduced motion): track and pin are inert wrappers,
   section renders exactly as before. */
#tbs-journey-track,
#tbs-journey-pin { position: relative; width: 100%; }

/* All scrubbed values flow through custom properties (--jo/--jy/--jb/--js)
   because index.html's offline override nukes any inline style containing
   "opacity: 0" with !important. Custom props never trip that selector. */
.tbs-janim {
  opacity: var(--jo, 1);
  transform: translateY(var(--jy, 0px));
  will-change: transform, opacity;
}

/* headline words (spans injected by tbs-journey.js) */
.tbs-jw {
  display: inline-block;
  opacity: var(--jo, 1);
  transform: translateY(var(--jy, 0px));
  filter: blur(var(--jb, 0px));
  will-change: transform, opacity, filter;
}

/* gold shimmer sweep on the final word — driven by --gold (0 → 1) */
.tbs-jw-gold {
  background-image: linear-gradient(100deg,
    #FFBC13 0%, #FFD979 30%, #FFF3D1 42%, #F7F9FA 55%, #F7F9FA 100%);
  background-size: 400% 100%;
  background-position-x: calc(100% - var(--gold, 0) * 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* scroll cue (injected by tbs-journey.js) */
#tbs-jcue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
#tbs-jcue span:first-child {
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #7B849B;
}
.tbs-jcue-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid #FFBC13;
  border-bottom: 2px solid #FFBC13;
  transform: rotate(45deg);
  animation: tbs-jcue-bob 1.6s ease-in-out infinite;
}
@keyframes tbs-jcue-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 8px; }
}

/* feature columns cascade (classes added by tbs-journey.js) */
.tbs-jitem {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease var(--jd, 0s), transform .7s ease var(--jd, 0s);
}
.tbs-jitem.tbs-jin {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  #tbs-journey-track { height: 220vh; }
  #tbs-journey-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  /* keep the phones inside the pinned viewport */
  #tbs-journey-pin img[alt^="Buy Bitcoin"] {
    display: block;
    margin: 0 auto;
    width: auto !important;
    max-width: min(920px, 94vw) !important;
    max-height: 46vh;
    opacity: var(--jo, 1);
    transform: translateY(var(--jy, 0px)) scale(var(--js, 1));
    will-change: transform, opacity;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  #tbs-journey-track { height: 300vh; }
}