/* Taraf Scroll Motion — scroll scenes (film + cups). Brand: forest green, terracotta accent, cream, kraft, Poppins. */
.tsf,
.tcups {
  --t-green: #3F553D;
  --t-deep: #2B3B2C;
  --t-terracotta: #CC8656;
  --t-cream: #F2E9DE;
  --t-sand: #E5D8C6;
  --t-kraft: #C7A47C;
  position: relative;
  width: 100%;
  font-family: 'Poppins', var(--wd-text-font, sans-serif);
}

/* Sticky needs every ancestor to have visible overflow; WPBakery stretched rows set overflow:hidden. */
.vc_row:has(.tsf),
.vc_row:has(.tcups) {
  overflow: visible !important;
}

/* Inside a WPBakery row the column adds padding/margins; let the scene sit edge to edge. */
.vc_column-inner > .wpb_wrapper > .tsf,
.vc_column-inner > .wpb_wrapper > .tcups {
  margin: 0;
}

/* ---------- Scroll film ---------- */
.tsf {
  height: var(--tsf-height, 420vh);
  background: var(--t-cream);
}

.tsf-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tsf-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--t-deep);
  /* JS animates this inset from a rounded card to full-bleed */
  clip-path: inset(var(--tsf-inset, 0px) round var(--tsf-radius, 0px));
  will-change: clip-path;
}

.tsf-canvas,
.tsf-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tsf.is-live .tsf-poster {
  visibility: hidden;
}

.tsf-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(43, 59, 44, .82) 0%, rgba(43, 59, 44, .45) 38%, rgba(43, 59, 44, 0) 62%),
    linear-gradient(0deg, rgba(43, 59, 44, .55) 0%, rgba(43, 59, 44, 0) 35%);
}

.tsf-copy {
  position: absolute;
  left: max(24px, 7vw);
  bottom: max(84px, 13vh);
  width: min(560px, 84vw);
  height: clamp(250px, 40vh, 360px);
  color: var(--t-cream);
}

.tsf-eyebrow {
  margin: 0 0 18px;
  color: var(--t-cream);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: .85;
}

.tsf-eyebrow::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  border-radius: 3px;
  background: var(--t-terracotta);
}

.tsf-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.tsf-title {
  margin: 0 0 12px;
  color: var(--t-cream) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(38px, 6.4vw, 92px) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -1.5px;
}

.tsf-text {
  margin: 0;
  max-width: 420px;
  color: var(--t-cream) !important;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  opacity: .9;
}

.tsf-progress {
  position: absolute;
  left: max(24px, 7vw);
  right: max(24px, 7vw);
  bottom: 36px;
  height: 2px;
  border-radius: 2px;
  background: rgba(242, 233, 222, .25);
  overflow: hidden;
}

.tsf-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--t-terracotta);
  transform-origin: left center;
  transform: scaleX(var(--tsf-progress, 0));
}

.tsf-hint {
  position: absolute;
  right: max(24px, 7vw);
  bottom: 52px;
  color: var(--t-cream);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: var(--tsf-hint, .8);
}

/* Static fallback (no JS / reduced motion): one screen, poster + all captions listed */
.tsf:not(.is-live) {
  height: auto;
}

.tsf:not(.is-live) .tsf-sticky {
  position: relative;
  height: auto;
  min-height: 80vh;
}

.tsf:not(.is-live) .tsf-frame {
  min-height: 80vh;
}

.tsf:not(.is-live) .tsf-copy {
  height: auto;
}

.tsf:not(.is-live) .tsf-caption {
  position: static;
  margin-bottom: 18px;
}

.tsf:not(.is-live) .tsf-title {
  font-size: clamp(28px, 4vw, 48px) !important;
}

.tsf:not(.is-live) .tsf-progress,
.tsf:not(.is-live) .tsf-hint {
  display: none;
}

/* ---------- Flying cups ---------- */
.tcups {
  height: 280vh;
  background: var(--t-sand);
}

.tcups-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.tcups-marquee {
  position: absolute;
  top: 50%;
  left: 0;
  white-space: nowrap;
  transform: translate3d(var(--tcups-x, 0px), -58%, 0);
  will-change: transform;
  pointer-events: none;
}

.tcups-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 4vw;
}

.tcups-marquee-track span {
  color: var(--t-green);
  font-size: clamp(64px, 13vw, 210px);
  font-weight: 600;
  letter-spacing: -4px;
  line-height: 1;
  opacity: .14;
}

.tcups-marquee-track i {
  flex: 0 0 auto;
  width: clamp(16px, 2.2vw, 34px);
  height: clamp(16px, 2.2vw, 34px);
  border-radius: 50%;
  background: var(--t-terracotta);
  opacity: .55;
}

.tcups-stage {
  position: absolute;
  inset: 0;
}

.tcups-item {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  will-change: transform, opacity;
}

.tcups-item img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 40px rgba(43, 59, 44, .28));
  animation: tcups-float 5.5s ease-in-out infinite;
  animation-play-state: paused;
}

.tcups.is-settled .tcups-item img {
  animation-play-state: running;
}

.tcups-green img {
  animation-delay: -2.2s;
}

.tcups-bag img {
  animation-delay: -1.1s;
  animation-duration: 7s;
}

@keyframes tcups-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.tcups-bag {
  width: clamp(210px, 26vw, 400px);
  margin-left: calc(clamp(210px, 26vw, 400px) / -2);
  z-index: 1;
}

.tcups-cream,
.tcups-green {
  width: clamp(130px, 15.5vw, 240px);
  margin-left: calc(clamp(130px, 15.5vw, 240px) / -2);
  z-index: 2;
}

.tcups-copy {
  position: absolute;
  left: max(24px, 6vw);
  top: calc(var(--tcups-header, 80px) + 6vh);
  width: min(420px, 84vw);
  opacity: var(--tcups-copy, 1);
  transform: translateY(var(--tcups-copy-y, 0px));
  z-index: 3;
}

.tcups-title {
  margin: 0 0 12px;
  color: var(--t-green) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(30px, 3.6vw, 52px) !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: -1px;
}

.tcups-text {
  margin: 0 0 22px;
  color: var(--t-green);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
}

.tcups-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--t-green);
  color: var(--t-cream) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background-color .25s ease, transform .25s ease;
}

.tcups-btn:hover {
  background: var(--t-deep);
  transform: translateY(-2px);
}

/* Static fallback for cups: one screen, items in their final spots */
.tcups:not(.is-live) {
  height: auto;
}

.tcups:not(.is-live) .tcups-sticky {
  position: relative;
  height: 100vh;
  min-height: 620px;
}

.tcups:not(.is-live) .tcups-cream { transform: translateX(-130%) rotate(-7deg); }
.tcups:not(.is-live) .tcups-green { transform: translateX(130%) rotate(8deg); }

@media (max-width: 767px) {
  .tcups-copy {
    top: 10vh;
  }

  .tcups-item {
    bottom: 7vh;
  }

  .tcups-bag {
    width: 190px;
    margin-left: -95px;
  }

  .tcups-cream,
  .tcups-green {
    width: 110px;
    margin-left: -55px;
  }

  .tsf-copy {
    bottom: 96px;
    height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcups-item img {
    animation: none;
  }
}

/* WoodMart Button widget placed inside [taraf_cups]...[/taraf_cups] */
.tcups-actions .wd-button-wrapper {
  margin: 0;
}

.tcups-actions .btn {
  background: var(--t-green) !important;
  color: var(--t-cream) !important;
  border: 2px solid var(--t-green) !important;
  border-radius: 999px;
}

.tcups-actions .btn:hover {
  background: var(--t-deep) !important;
  border-color: var(--t-deep) !important;
}