/* =============================================================================
   LGV — Hero title motion
   Variant: "Dalle iniziali" (chosen by the client on 22/10/2026)
   The initials L · G · V slide in first, one line after the other, then each
   word unrolls from its own initial — all in white. Once the words have
   landed, the initials colour white -> the theme's tertiary colour
   (--rt-tertiary-color, Customizer) one after the other, with a soft colour
   fade — no glow / pulse flourish. Change that colour in the Customizer and
   the animation follows automatically.

   NB: #F9EC00 (in the JS) is only the SIGNATURE used to find the initials in the
   Elementor markup — it is NOT the colour applied. Leave it alone unless the
   Elementor markup itself is changed.

   Activated by assets/hero-motion.js, which splits the title into per-letter
   spans, sets the delays (--d, --dl) and toggles the .lgv-motion / .lgv-play /
   .lgv-lit / .lgv-done classes on the hero's .slider-content. Nothing here
   fires until the JS has run, so if the JS is blocked the hero simply shows its
   normal, static layout.
   ============================================================================= */

/* letters must be inline-block to accept transforms */
.rt-hero-slider .slider-content.lgv-motion .lgv-init,
.rt-hero-slider .slider-content.lgv-motion .lgv-ch{
  display:inline-block;
}

/* ---- FROM state: invisible; the initials a little to the left and smaller,
   the letters tucked behind their initial; every initial starts WHITE ---- */
.rt-hero-slider .slider-content.lgv-motion .lgv-init{
  opacity:0;
  transform:translateX(-.45em) scale(.86);
  color:#FFFFFF;
}
.rt-hero-slider .slider-content.lgv-motion .lgv-ch{
  opacity:0;
  transform:translateX(-.5em);
}

/* eyebrow + paragraph fade/rise in around the title */
.rt-hero-slider .slider-content.lgv-motion .sub-title{ opacity:0; transform:translateY(-14px); }
.rt-hero-slider .slider-content.lgv-motion .slider-text{ opacity:0; transform:translateY(22px); }

/* ---- PLAY: each element slides to its home position (all in white) ---- */
.rt-hero-slider .slider-content.lgv-motion.lgv-play .lgv-init{
  opacity:1;
  transform:none;
  transition:opacity .55s ease, transform .8s cubic-bezier(.2,.9,.3,1);
  transition-delay:var(--d,0ms);
}
.rt-hero-slider .slider-content.lgv-motion.lgv-play .lgv-ch{
  opacity:1;
  transform:none;
  transition:opacity .4s ease, transform .55s cubic-bezier(.2,.9,.3,1);
  transition-delay:var(--d,0ms);
}
/* ---- LIT: once the words have composed, the initials colour white -> yellow ---- */
/* (the .lgv-lit class is added by the JS a beat after the letters land; the
   selector carries .lgv-play too, or it loses on specificity against the PLAY
   rule above and the colour would snap instead of fading) */
.rt-hero-slider .slider-content.lgv-motion.lgv-play.lgv-lit .lgv-init{
  color:var(--rt-tertiary-color, #FFB700);
  transition:color .7s ease;
  transition-delay:var(--dl,0ms);
}

.rt-hero-slider .slider-content.lgv-motion.lgv-play .sub-title{
  opacity:1; transform:none;
  transition:opacity .9s ease .1s, transform .9s ease .1s;
}
.rt-hero-slider .slider-content.lgv-motion.lgv-play .slider-text{
  opacity:1; transform:none;
  transition:opacity 1s ease, transform 1s ease;
  transition-delay:var(--textDelay,2.8s);
}

/* ---- DONE: lock the final look and drop every GPU layer (scale/translate
   still create compositing layers; transform:none removes them) ---- */
.rt-hero-slider .slider-content.lgv-done .lgv-init,
.rt-hero-slider .slider-content.lgv-done .lgv-ch,
.rt-hero-slider .slider-content.lgv-done .sub-title,
.rt-hero-slider .slider-content.lgv-done .slider-text{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
  animation:none !important;
}
.rt-hero-slider .slider-content.lgv-done .lgv-init{ color:var(--rt-tertiary-color, #FFB700) !important; }

/* NB: prefers-reduced-motion is intentionally NOT handled — the entrance plays
   for every visitor (client's choice). Re-add a reduced-motion @media block here
   if accessibility behaviour is wanted again. */

/* =============================================================================
   The LGV title on tablet and phone: three lines, as on desktop.

   Below 992px the theme hides the title's <br> (finwave style.css), so the
   three words ran into one sentence ("LawyersGenerating Value") and wrapped
   mid-word. Below 768px Elementor also shrinks the initials to 44px while the
   words keep their inline 80px, so the initials came out smaller than the
   letters after them.

   [data-lgv] is set by hero-motion.js on the LGV title only; the anti-FOUC
   snippet keeps the hero hidden until then, so the broken layout never shows.
   ============================================================================= */
@media (max-width: 991px){
  .rt-hero-slider .slider-title[data-lgv] br{ display:inline; }
}

@media (max-width: 767px){
  /* The menu bar (104px) sits over the hero, and the theme centres the content
     in the whole hero, bar included: with the taller title the eyebrow ended
     up under the bar. The padding centres it in the part below the bar. With
     a longer text the hero grows (it is a min-height), it does not overlap.
     The extra 32px: with the longer claim (22/10/2026) the content fills the
     hero and the eyebrow stuck to the bar. Below, the content already has its
     own 30px, so the two gaps match. */
  .rt-hero-slider .single-slider{ padding-top:136px; }

  /* Desktop proportions (initials 123px, words 80px = .65em) scaled to the
     screen, so "Generating", the longest line, always fits: about 311px out
     of 366 at 390px wide. Its lines are left-aligned so L · G · V stay in a
     column. The block follows the hero's Alignment control (mobile), like the
     eyebrow and the paragraph: inline-block, not a table with auto margins.
     On 13/11/2026 the studio asked for left-aligned text on the phone, and
     the centred block left the title 31px to the right of the paragraph.
     vertical-align:top keeps the vertical spacing as it was. */
  .rt-hero-slider .slider-title[data-lgv]{
    font-size:min(21.5vw, 100px) !important;
    display:inline-block;
    vertical-align:top;
    text-align:left;
  }
  .rt-hero-slider .slider-title[data-lgv] .lgv-rest{ font-size:.65em !important; }
}