/* ==========================================
   LUXURY INTRO — RESILIENT PROFESSIONAL BUILD
   ========================================== */

   .fv-intro {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 99999;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
  }
  
  /* BG */
  .fv-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,#0d0d0d 0%,#000 82%);
  }
  
  /* UNDERLIGHT */
  .fv-underlight {
    position:absolute;
    left:50%;
    bottom:-220px;
    width:900px;
    height:620px;
    transform:translateX(-50%) scale(.3);
    opacity:0;
  
    background:radial-gradient(circle,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.05) 35%,
      transparent 72%);
  
    filter:blur(30px);
    transition:all 2.2s cubic-bezier(.22,.8,.22,1);
  }
  
  /* MACHINE */
  .fv-machine-wrap {
    position:absolute;
    top:50%;
    left:50%;
    width:min(460px,75vw);
  
    opacity:0;
    transform:translate(-50%,-50%) scale(.95);
  
    transition:
      transform 2.4s cubic-bezier(.22,.8,.22,1),
      opacity .7s ease;
  }
  
  .fv-machine {
    width:100%;
    display:block;
    filter:drop-shadow(0 0 80px rgba(0,0,0,.95));
  }
  
  /* TEXT */
  .fv-text {
    position:absolute;
    top:50%;
    left:60%;
    max-width:420px;
  
    opacity:0;
    transform:translateY(-50%) translateX(40px);
  
    transition:
      transform 2.4s cubic-bezier(.22,.8,.22,1),
      opacity .7s ease;
  }
  
  .fv-text h1 {
    margin:0 0 12px;
    font-family:Inter,sans-serif;
    font-size:clamp(2.2rem,4vw,4.8rem);
    font-weight:800;
    color:#fff;
  }
  
  .fv-text p {
    margin:0;
    font-size:1.1rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:rgba(255,255,255,.82);
  }
  
  /* ---------- STATES ---------- */
  
  .fv-intro.start-light .fv-underlight {
    opacity:1;
    transform:translateX(-50%) scale(1);
  }
  
  .fv-intro.start-machine .fv-machine-wrap {
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  
  .fv-intro.show-text .fv-text {
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
  
  /* ====================================
     DYNAMIC BORDER EXIT (JS VARIABLE)
     ==================================== */
  
  .fv-intro.slide-border .fv-machine-wrap {
    transform:
      translate(calc(-50% - var(--slide-distance, 0px)), -50%);
  }
  
  .fv-intro.slide-border .fv-text {
    /* text trails behind machine */
    transform:
      translate(calc(-50% - var(--slide-distance, 0px) + 90px), -50%);
  }
  
  .fv-intro.fade-items .fv-machine-wrap,
  .fv-intro.fade-items .fv-text {
    opacity:0;
  }
  
  /* BLACK FADE */
  .fv-intro.fv-exit {
    animation:fvFadeOut 1.2s ease forwards;
  }
  
  @keyframes fvFadeOut {
    to {
      opacity:0;
      visibility:hidden;
    }
  }
  
  /* MOBILE */
  @media (max-width:768px){
  
    .fv-machine-wrap { width:62vw; }
  
    .fv-text{
      left:50%;
      top:78%;
      text-align:center;
      transform:translate(-50%,20px);
    }
  
    .fv-intro.show-text .fv-text{
      transform:translate(-50%,0);
    }
  
    .fv-intro.slide-border .fv-text{
      transform:
        translate(calc(-50% - var(--slide-distance,0px) + 70px),0);
    }
  }



  .fv-intro.slide-border .fv-text {
    transition-delay: 280ms;
  }