.elementor-5896 .elementor-element.elementor-element-5a07592{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.5;}.elementor-5896 .elementor-element.elementor-element-5a07592:not(.elementor-motion-effects-element-type-background), .elementor-5896 .elementor-element.elementor-element-5a07592 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-5896 .elementor-element.elementor-element-5a07592::before, .elementor-5896 .elementor-element.elementor-element-5a07592 > .elementor-background-video-container::before, .elementor-5896 .elementor-element.elementor-element-5a07592 > .e-con-inner > .elementor-background-video-container::before, .elementor-5896 .elementor-element.elementor-element-5a07592 > .elementor-background-slideshow::before, .elementor-5896 .elementor-element.elementor-element-5a07592 > .e-con-inner > .elementor-background-slideshow::before, .elementor-5896 .elementor-element.elementor-element-5a07592 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5896 .elementor-element.elementor-element-7d9e24f3 > .elementor-widget-container{padding:0px 300px 0px 300px;}.elementor-5896 .elementor-element.elementor-element-7d9e24f3{text-align:center;}.elementor-5896 .elementor-element.elementor-element-7d9e24f3 .elementor-heading-title{font-family:"Star Jedi", Sans-serif;font-size:27px;font-weight:600;line-height:33px;letter-spacing:0.9px;color:#F6D311;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5896 .elementor-element.elementor-element-6c1debb4 > .elementor-widget-container{padding:51px 0px 0px 0px;}.elementor-5896 .elementor-element.elementor-element-6c1debb4 img{max-width:14%;}.elementor-5896 .elementor-element.elementor-element-140f29cc{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;}.elementor-5896 .elementor-element.elementor-element-140f29cc:not(.elementor-motion-effects-element-type-background), .elementor-5896 .elementor-element.elementor-element-140f29cc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://mystifi3d.com/wp-content/uploads/2025/09/SWBD_eC_1.1-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}body:not(.rtl) .elementor-5896 .elementor-element.elementor-element-21b7e649{right:0px;}body.rtl .elementor-5896 .elementor-element.elementor-element-21b7e649{left:0px;}.elementor-5896 .elementor-element.elementor-element-21b7e649{top:0px;}.elementor-5896 .elementor-element.elementor-element-21b7e649 .elementor-widget-container{--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-5896 .elementor-element.elementor-element-da6dcb1{--display:flex;}.elementor-5896 .elementor-element.elementor-element-1e8b02f4 .elementor-heading-title{font-family:"Star Jedi", Sans-serif;font-weight:400;color:#FFFFFF;}body:not(.rtl) .elementor-5896 .elementor-element.elementor-element-6d08892f{left:0px;}body.rtl .elementor-5896 .elementor-element.elementor-element-6d08892f{right:0px;}.elementor-5896 .elementor-element.elementor-element-6d08892f{bottom:0px;}.elementor-5896 .elementor-element.elementor-element-6d08892f .elementor-widget-container{--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-5896 .elementor-element.elementor-element-11b96f9a{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;}.elementor-5896 .elementor-element.elementor-element-11b96f9a:not(.elementor-motion-effects-element-type-background), .elementor-5896 .elementor-element.elementor-element-11b96f9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-position:center center;background-repeat:no-repeat;background-size:cover;}body:not(.rtl) .elementor-5896 .elementor-element.elementor-element-d0c9c73{right:0px;}body.rtl .elementor-5896 .elementor-element.elementor-element-d0c9c73{left:0px;}.elementor-5896 .elementor-element.elementor-element-d0c9c73{top:0px;}body:not(.rtl) .elementor-5896 .elementor-element.elementor-element-99770cd{left:0px;}body.rtl .elementor-5896 .elementor-element.elementor-element-99770cd{right:0px;}.elementor-5896 .elementor-element.elementor-element-99770cd{top:0px;}.elementor-5896 .elementor-element.elementor-element-ceb422d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}@media(max-width:1024px){.elementor-5896 .elementor-element.elementor-element-7d9e24f3 > .elementor-widget-container{padding:0px 100px 0px 100px;}.elementor-5896 .elementor-element.elementor-element-6c1debb4 img{max-width:18%;}}@media(max-width:767px){.elementor-5896 .elementor-element.elementor-element-7d9e24f3{text-align:center;}.elementor-5896 .elementor-element.elementor-element-7d9e24f3 .elementor-heading-title{font-size:25px;}.elementor-5896 .elementor-element.elementor-element-140f29cc:not(.elementor-motion-effects-element-type-background), .elementor-5896 .elementor-element.elementor-element-140f29cc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mystifi3d.com/wp-content/uploads/2025/09/SWBD_eC_1.8a-scaled.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-5896 .elementor-element.elementor-element-140f29cc{--min-height:100vh;}.elementor-5896 .elementor-element.elementor-element-21b7e649 > .elementor-widget-container{margin:0vw 0vw 0vw 0vw;}body:not(.rtl) .elementor-5896 .elementor-element.elementor-element-21b7e649{right:-41.556vw;}body.rtl .elementor-5896 .elementor-element.elementor-element-21b7e649{left:-41.556vw;}.elementor-5896 .elementor-element.elementor-element-21b7e649{top:122px;}.elementor-5896 .elementor-element.elementor-element-21b7e649 img{width:100%;max-width:43%;}.elementor-5896 .elementor-element.elementor-element-da6dcb1{--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:25px 0px;--row-gap:25px;--column-gap:0px;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5896 .elementor-element.elementor-element-1e8b02f4 > .elementor-widget-container{margin:0px 0px -15px 0px;padding:0px 0px 0px 20px;}.elementor-5896 .elementor-element.elementor-element-1e8b02f4{text-align:left;}.elementor-5896 .elementor-element.elementor-element-1e8b02f4 .elementor-heading-title{font-size:28px;letter-spacing:1.8px;}.elementor-5896 .elementor-element.elementor-element-c801d2c{text-align:center;}.elementor-5896 .elementor-element.elementor-element-c801d2c img{max-width:90%;}.elementor-5896 .elementor-element.elementor-element-6d08892f > .elementor-widget-container{--e-transform-rotateZ:10deg;}body:not(.rtl) .elementor-5896 .elementor-element.elementor-element-6d08892f{left:25px;}body.rtl .elementor-5896 .elementor-element.elementor-element-6d08892f{right:25px;}.elementor-5896 .elementor-element.elementor-element-6d08892f{bottom:75px;}.elementor-5896 .elementor-element.elementor-element-6d08892f img{max-width:35%;}.elementor-5896 .elementor-element.elementor-element-11b96f9a:not(.elementor-motion-effects-element-type-background), .elementor-5896 .elementor-element.elementor-element-11b96f9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://mystifi3d.com/wp-content/uploads/2025/09/SWBD_eC_4-scaled.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-5896 .elementor-element.elementor-element-11b96f9a{--min-height:100vh;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-5896 .elementor-element.elementor-element-d0c9c73 > .elementor-widget-container{--e-transform-rotateZ:159deg;}body:not(.rtl) .elementor-5896 .elementor-element.elementor-element-d0c9c73{right:-272px;}body.rtl .elementor-5896 .elementor-element.elementor-element-d0c9c73{left:-272px;}.elementor-5896 .elementor-element.elementor-element-d0c9c73{top:145px;}.elementor-5896 .elementor-element.elementor-element-d0c9c73 img{max-width:30%;}.elementor-5896 .elementor-element.elementor-element-99770cd{top:81vh;}.elementor-5896 .elementor-element.elementor-element-99770cd img{max-width:60%;}.elementor-5896 .elementor-element.elementor-element-ceb422d{--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for image, class: .elementor-element-21b7e649 */.ship-img img { width: clamp(120px, 30vw, 330px); }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-355c6aba */<!-- STAR WARS CRAWL — smaller text/width to avoid right cutoff -->
<style>
  :root{
    --crawl-color:#f6d311;
    --crawl-width:86vw;       /* was 90vw */
    --max-width:980px;
    --perspective:800px;
    --tilt:28deg;
    --safe-bottom:22vh;       /* space for your button/graphics */
  }

  @font-face{
    font-family:"NewsGothicBold";
    src:
      url("/wp-content/uploads/fonts/NewsGothic-Bold.woff2") format("woff2"),
      url("/wp-content/uploads/fonts/NewsGothic-Bold.woff")  format("woff");
    font-weight:700;
    font-style:normal;
    font-display:swap;
  }

  .crawl-wrap{
    position: relative;
    width: 100%;
    height: calc(100vh - var(--safe-bottom));
    margin-top: 6vh;
    overflow: hidden;  /* keep panel tidy */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
  }

  .crawl-stage{
    position: relative;
    width: var(--crawl-width);
    max-width: var(--max-width);
    height: 68vh;                    /* travel area */
    perspective: var(--perspective);
    perspective-origin: 50% 70%;
    overflow: hidden;                /* needed for fades */
  }

  /* Top fade on the crawl box */
  .crawl-stage::before{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:16%;
    background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
    pointer-events:none;
  }

  /* Optional bottom fade */
  .crawl-stage::after{
    content:"";
    position:absolute;
    bottom:0; left:0; right:0;
    height:12%;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%);
    z-index: 2;
    pointer-events:none;
  }

  /* Base (not animating); tilt applied here */
  .crawl{
    position: absolute;
    bottom: -14%;
    width: 100%;
    transform-origin: 50% 100%;
    transform: rotateX(var(--tilt));
    z-index: 1; /* below fades */
  }

  /* Animate when class present */
  .crawl.animate{
    animation: crawl-up 45s linear forwards;
  }

  .crawl p{
    margin: 0 0 1.05em 0;
    color: var(--crawl-color);
    text-align: left;              /* classic crawl edge */
    line-height: 1.28;
    font-family: "NewsGothicBold","News Cycle",Arial,sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 7.1vw, 56px);  /* smaller than before */
    letter-spacing: 0;             /* keep natural spacing */
    white-space: nowrap;           /* respect manual <br> */
  }

  @keyframes crawl-up{
    0%   { transform: rotateX(var(--tilt)) translateY(0); }
    100% { transform: rotateX(var(--tilt)) translateY(-145%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .crawl.animate { animation-duration: 1ms; animation-iteration-count: 1; }
  }
</style>

<div class="crawl-wrap">
  <div class="crawl-stage" id="crawlStage">
    <div class="crawl" id="crawlBlock" aria-label="Opening crawl">
      <!-- Paragraph 1 -->
      <p>
        In a galaxy far, far away,<br>
        war rages on. The fate of<br>
        the Rebellion hangs in the<br>
        balance across the stars.
      </p>

      <!-- Paragraph 2 (name inline) -->
      <p>
        On the embattled world<br>
        of Dantooine, a Rebel base<br>
        is under attack. As Imperial<br>
        forces close in, a hidden<br>
        transmission is dispatched<br>
        to Padawan <span id="lname">Last</span>.
      </p>

      <!-- Paragraph 3 -->
      <p>
        Its message could decide<br>
        the fate of worlds and<br>
        shape the destiny of the<br>
        galaxy itself…
      </p>
    </div>
  </div>
</div>

<script>
(function(){
  // Personalization
  const params = new URLSearchParams(window.location.search);
  const clean  = s => (s||'').trim().replace(/[<>]/g,'');
  const title  = str => str.split(/\s+/).map(w => w? w[0].toUpperCase()+w.slice(1):'').join(' ');

  const first = title(clean(params.get('first')));
  const last  = title(clean(params.get('last')));

  // Page 1: first name (Heading widget with ID recipientFirst)
  if(first){
    const fwrap = document.getElementById('recipientFirst');
    if(fwrap){
      const inner = fwrap.querySelector('.elementor-heading-title, h1,h2,h3,h4,h5,h6,p,span') || fwrap;
      inner.textContent = first.replace(/[.!?]+$/,'');
    }
  }

  // Page 2: last name inline
  if(last){
    const lwrap = document.getElementById('lname');
    if(lwrap) lwrap.textContent = last.replace(/[.!?]+$/,'');
  }

  // Replay logic with 2s delay (no mid-crawl restart)
  const stage = document.getElementById('crawlStage');
  const crawl = document.getElementById('crawlBlock');
  if(!stage || !crawl) return;

  const DURATION_MS      = 45000;  // match CSS duration
  const RESTART_DELAY_MS = 2000;   // your 2s delay

  let firstPlayed = false;
  let isPlaying   = false;
  let endTimer    = null;
  let delayTimer  = null;

  function startCrawl(){
    clearTimeout(endTimer);
    crawl.classList.remove('animate');
    void crawl.offsetWidth;     // reflow
    crawl.classList.add('animate');
    isPlaying = true;
    endTimer = setTimeout(()=>{ isPlaying = false; }, DURATION_MS);
  }

  function scheduleRestart(delay){
    clearTimeout(delayTimer);
    delayTimer = setTimeout(()=> startCrawl(), delay);
  }

  const observer = new IntersectionObserver(entries=>{
    entries.forEach(entry=>{
      if(entry.isIntersecting){
        if(!firstPlayed){
          startCrawl();          // first time: immediate
          firstPlayed = true;
        } else if(!isPlaying){
          scheduleRestart(RESTART_DELAY_MS); // on return: wait a bit
        }
      } else {
        clearTimeout(delayTimer); // leaving view cancels pending restart
      }
    });
  }, { threshold: 0.5 });

  observer.observe(stage);

  crawl.addEventListener('animationend', ()=>{ isPlaying = false; });
})();
</script>
<style>
  /* FORCE the crawl to be a bit smaller (override earlier rules) */
  .crawl-stage {
    width: 90vw !important;   /* was 86–90vw */
    max-width: 960px !important;
  }
  .crawl p {
    font-size: clamp(26px, 7vw, 54px) !important; /* was larger */
    letter-spacing: 0 !important;
  }
  /* If the far-right still clips, give a hair of padding: */
  /* .crawl { padding-right: 2vw !important; box-sizing: border-box; } */
</style>/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-99770cd *//* Start hidden + unclickable; smooth fade when revealed */
.reveal-delay img,
.reveal-delay a img {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  transform-origin: center;
  filter: drop-shadow(0 0 0 rgba(246,211,17,0)); /* base */
}

/* Keyframes for the pulse/glow */
@keyframes breathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.045); }
}
@keyframes glow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(246,211,17,0)); }
  50%     { filter: drop-shadow(0 0 22px rgba(246,211,17,0.95)); }
}

/* When .pg-on is added, start pulse/glow loops */
.reveal-delay img.pg-on,
.reveal-delay a img.pg-on {
  animation:
    breathe 3.8s ease-in-out infinite,
    glow    2.6s ease-in-out infinite;
}

/* Optional hover tweak */
.reveal-delay img:hover,
.reveal-delay a img:hover {
  transform: scale(1.045);
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-223a707 */.elementor-5896 .elementor-element.elementor-element-223a707 { 
  position:absolute; 
  width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap;
}
/* Elementor's ".elementor-5896 .elementor-element.elementor-element-223a707" targets this exact widget */
.elementor-5896 .elementor-element.elementor-element-223a707 {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}/* End custom CSS */
/* Start custom CSS */#receiveImg .elementor-image a {
  display: inline-block;
  position: relative;
  z-index: 1;
}

#receiveImg img {
  position: relative;
  z-index: 1;
  transform-origin: center;
  animation: receiveBreathe 3.8s ease-in-out infinite,
             receiveGlow    2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 0 rgba(246,211,17,0)); /* start no glow */
}

@keyframes receiveBreathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.045); }
}
@keyframes receiveGlow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(246,211,17,0)); }
  50%     { filter: drop-shadow(0 0 22px rgba(246,211,17,0.95)); }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Star Jedi';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://mystifi3d.com/wp-content/uploads/2025/09/StarJedi.woff2') format('woff2'),
		url('https://mystifi3d.com/wp-content/uploads/2025/09/StarJedi.woff') format('woff'),
		url('https://mystifi3d.com/wp-content/uploads/2025/09/Starjedi.ttf') format('truetype');
}
/* End Custom Fonts CSS */