/* ==========================================================================
   sourca: homepage motion (inc/motion.php, assets/js/motion.js).
   Loaded on the front page only.
   ========================================================================== */

/* Sticky needs no clipping ancestor; clip sideways on the body instead. */
body.sourca-motion-story { overflow-x: clip; }
body.sourca-motion-story #page-container,
body.sourca-motion-story #et-main-area,
body.sourca-motion-story #main-content,
body.sourca-motion-story .et-l--post,
body.sourca-motion-story .et_builder_inner_content { overflow: visible !important; }

/* ---------- Hero: headline words rise in ---------- */
.sourca-js .sourca-hero .sourca-display .sourca-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.sourca-js .sourca-hero .sourca-display .sourca-w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--sourca-ease); transition-delay: calc(var(--i) * 70ms + 120ms); }
.sourca-js .sourca-hero.is-live .sourca-display .sourca-w > span { transform: none; }
.sourca-js .sourca-hero .sourca-hero__copy .et_pb_module:not(:nth-child(-n+2)) { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--sourca-ease), transform .9s var(--sourca-ease); transition-delay: calc(var(--d, 0) * 90ms + 700ms); }
.sourca-js .sourca-hero.is-live .sourca-hero__copy .et_pb_module { opacity: 1 !important; transform: none !important; }

/* ---------- Hero film ---------- */
body.sourca-motion-hero .sourca-hero__visual .et_pb_module.sourca-hero__galaxy { display: none !important; }
.sourca-hero__visual .et_pb_module.sourca-hero__film {
  position: absolute !important; top: 50%; left: 55%; width: clamp(300px, 30vw, 430px); margin: 0 !important;
  transform: translate(-50%, -50%); z-index: 1; line-height: 0;
}
.sourca-hero__film video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(75% 60% at 50% 50%, #000 62%, transparent 100%); }
@media (max-width: 980px) {
  .sourca-hero__visual .et_pb_module.sourca-hero__film { left: 50%; width: min(86vw, 360px); }
  body.sourca-motion-hero .et_pb_column.sourca-hero__visual { min-height: min(142vw, 600px); margin-top: 8px !important; }
  body.sourca-motion-hero .sourca-hero__visual .et_pb_module.sourca-hero__tag { left: 50%; bottom: 7%; transform: translateX(-50%); white-space: nowrap; }
}

/* ---------- Background films ---------- */
.sourca-film { display: block; width: 100%; height: 100%; object-fit: cover; }
.sourca-film-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sourca-film-bg .sourca-film { opacity: .42; }
.sourca-film-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.35) 70%, #000 100%); }
.et_pb_section.sourca-field, .et_pb_section.sourca-cta { position: relative; isolation: isolate; }
.et_pb_section.sourca-field > .et_pb_row, .et_pb_section.sourca-cta > .et_pb_row { position: relative; z-index: 1; }

.sourca-filmband { position: relative; height: clamp(320px, 62vh, 620px); overflow: hidden; background: #000; }
.sourca-filmband .sourca-film { position: absolute; inset: 0; opacity: .6; transform: scale(var(--zoom, 1.08)); will-change: transform; }
.sourca-filmband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.2) 35%, rgba(0,0,0,.45) 80%, #F3F0E9 100%); }
.sourca-filmband__text { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0 var(--sourca-gutter); text-align: center; }
.sourca-filmband__line { margin: 0; padding: 0; color: #fff; font-size: clamp(34px, 6.4vw, 84px); line-height: .98; letter-spacing: -.04em; font-weight: 700; max-width: 14ch;
  opacity: var(--o, 1); transform: translateY(var(--y, 0)); }
/* Desktop: the corridor film is portrait, so it sits in a tall frame beside the line rather than full width. */
@media (min-width: 981px) {
  .sourca-filmband { height: auto; padding: clamp(64px, 8vw, 110px) var(--sourca-gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 6vw, 96px); max-width: 1180px; margin: 0 auto; box-sizing: border-box; background: transparent; }
  .sourca-filmband::after { display: none; }
  .sourca-filmband .sourca-film { position: relative; inset: auto; order: 2; width: clamp(260px, 26vw, 340px); height: auto; aspect-ratio: 9 / 16; opacity: 1; border-radius: 28px; transform: scale(var(--zoom, 1)); box-shadow: 0 40px 90px -30px rgba(255,106,0,.35); }
  .sourca-filmband__text { position: static; display: block; text-align: left; padding: 0; }
  .sourca-filmband__line { max-width: 12ch; }
}

/* ---------- How it works: the phone story ---------- */
.sourca-story { position: relative; margin-top: clamp(32px, 5vw, 56px); }
.sourca-story__pin { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.sourca-story__phone { width: min(300px, 70%); justify-self: center; }
.sourca-story__phone .sourca-screen::before { display: none; }
.sourca-story__phone .sourca-screen::after { top: 2.4cqw; z-index: 3; }
.sourca-story__shots { position: relative; display: block; aspect-ratio: 590 / 1282; background: #F6F4EF; }
.sourca-story__shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--sourca-ease), transform .8s var(--sourca-ease); }
.sourca-story__shot.is-on { opacity: 1; transform: none; }
.sourca-story__shot video, .sourca-story__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sourca-story__bar { display: flex; gap: 6px; margin-bottom: 28px; }
.sourca-story__bar i { position: relative; flex: 1; max-width: 40px; height: 4px; border-radius: 2px; background: var(--sourca-ink-600); overflow: hidden; }
.sourca-story__bar i::after { content: ""; position: absolute; inset: 0; background: var(--sourca-orange); transform: scaleX(var(--p, 0)); transform-origin: left; }
.sourca-story__side { width: 100%; }
.et_pb_section .sourca-story__steps { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.et_pb_section .sourca-story__step { list-style: none !important; margin: 0; }
.sourca-story__step::marker { content: none; }
.sourca-story__step { padding: 0 0 26px; }
.sourca-story__step + .sourca-story__step { padding-top: 26px; border-top: 1px solid var(--sourca-ink-700); }
.sourca-story__step .sourca-card-title { color: var(--sourca-white); margin: 0 0 10px; }
.et_pb_section .sourca-story__step p.sourca-muted { color: var(--sourca-ink-300); font-size: 17px; line-height: 1.5; }

/* Live (JS, motion allowed): the phone pins and each step takes a stretch of the scroll. */
.sourca-story.is-live { height: calc(var(--steps) * 62vh + 100vh); }
.sourca-story.is-live .sourca-story__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 80px 0 40px; box-sizing: border-box; }
.sourca-story.is-live .sourca-story__phone { width: min(300px, 70%, calc((100svh - 160px) * .46)); }
.sourca-story.is-live .sourca-story__steps { position: relative; min-height: 200px; }
.sourca-story.is-live .sourca-story__step { position: absolute; inset: 0 0 auto 0; padding: 0; border: 0; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--sourca-ease), transform .6s var(--sourca-ease); }
.sourca-story.is-live .sourca-story__step.is-on { opacity: 1; transform: none; }

@media (min-width: 981px) {
  .sourca-story__step .sourca-card-title { font-size: clamp(30px, 2.8vw, 44px); line-height: 1.05; letter-spacing: -.03em; }
  .et_pb_section .sourca-story__step p.sourca-muted { font-size: 19px; max-width: 34ch; }
  .sourca-story.is-live .sourca-story__steps { min-height: 280px; }
}
@media (max-width: 980px) {
  .sourca-story__pin { grid-template-columns: 1fr; gap: 28px; }
  .sourca-story__side { width: 100%; max-width: 480px; justify-self: center; text-align: center; }
  .sourca-story__bar { justify-content: center; }
  .sourca-story.is-live .sourca-story__pin { padding: 70px 0 24px; gap: 20px; align-content: center; }
  .sourca-story.is-live .sourca-story__phone { width: min(260px, 58vw, calc((100svh - 330px) * .46)); }
  .sourca-story.is-live .sourca-story__steps { min-height: 150px; }
  .sourca-story.is-live .sourca-story__step .sourca-card-title { font-size: 24px; }
  .et_pb_section .sourca-story.is-live .sourca-story__step p.sourca-muted { font-size: 15px; }
}

/* ---------- Problem statement: words light up with the scroll ---------- */
.sourca-js .sourca-problem .sourca-statement .sourca-w { opacity: .16; transition: opacity .25s linear; }
.sourca-js .sourca-problem .sourca-statement .sourca-w.is-lit { opacity: 1; }

/* ---------- Footer ---------- */
.et_pb_section.sourca-footer { position: relative; }
.et_pb_section.sourca-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--sourca-orange); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--sourca-ease); z-index: 2; }
.et_pb_section.sourca-footer.is-in::before { transform: scaleX(1); }
.sourca-js .sourca-footer .et_pb_column { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--sourca-ease), transform .9s var(--sourca-ease); transition-delay: calc(var(--d, 0) * 110ms + 200ms); }
.sourca-js .sourca-footer.is-in .et_pb_column { opacity: 1; transform: none; }

/* ---------- Reduced motion: still pictures, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .sourca-js .sourca-hero .sourca-display .sourca-w > span,
  .sourca-js .sourca-hero .sourca-hero__copy .et_pb_module,
  .sourca-js .sourca-footer .et_pb_column { transform: none !important; opacity: 1 !important; transition: none !important; }
  .sourca-js .sourca-problem .sourca-statement .sourca-w { opacity: 1; }
  .et_pb_section.sourca-footer::before { transform: none; transition: none; }
  .sourca-filmband .sourca-film { transform: none; }
}