/* =========================================================
   VISIONDER LEGAL OVERLAY V7 — CANONICAL
   Cinematic editorial legal surface
   Instant content / clean closing / internal scroll
   ========================================================= */


/* =========================================================
   01. OVERLAY / CINEMATIC VEIL
   ========================================================= */

.visionder-legal-overlay{
  position:fixed;
  inset:0;
  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:
    max(28px, env(safe-area-inset-top))
    max(30px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(30px, env(safe-area-inset-left));

  background:
    rgba(1,4,10,.68);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(110%);

  backdrop-filter:
    blur(14px)
    saturate(110%);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  /*
   * The veil may disappear softly.
   * The text itself will NOT linger while closing.
   */
  transition:
    opacity .14s ease-out,
    visibility 0s linear .14s;

  will-change:opacity;

  -webkit-transform:
    translateZ(0);

  transform:
    translateZ(0);
}


.visionder-legal-overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transition:
    opacity .14s ease-out,
    visibility 0s linear 0s;
}


/* =========================================================
   02. PAGE LOCK
   ========================================================= */

html.visionder-legal-open,
body.visionder-legal-open{
  overscroll-behavior:none;
}


body.visionder-legal-open{
  overflow:hidden !important;
}


/* =========================================================
   03. INVISIBLE CINEMATIC STAGE
   ========================================================= */

.visionder-legal-dialog{
  position:relative;

  width:min(
    940px,
    calc(100vw - 96px)
  );

  height:min(
    86vh,
    900px
  );

  overflow:hidden;

  border:0;
  border-radius:0;

  background:transparent;
  box-shadow:none;

  /*
   * Blank stage never blocks true outside click.
   */
  pointer-events:none;

  opacity:0;
  visibility:hidden;

  transform:
    translateY(6px)
    scale(.996)
    translateZ(0);

  /*
   * CRITICAL:
   * closing has NO transition.
   * Text disappears immediately.
   */
  transition:none;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}


/*
 * Opening remains subtle and premium.
 */
.visionder-legal-overlay.is-open
.visionder-legal-dialog{
  opacity:1;
  visibility:visible;

  transform:
    translateY(0)
    scale(1)
    translateZ(0);

  transition:
    opacity .14s ease-out,
    transform .20s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   04. FLOATING TITLE ROW
   ========================================================= */

.visionder-legal-head{
  position:absolute;

  top:0;
  left:50%;
  right:auto;

  z-index:10;

  width:min(
    790px,
    calc(100% - 24px)
  );

  height:100px;
  min-height:100px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0;

  border:0;

  background:transparent;

  pointer-events:none;

  transform:
    translateX(-50%);
}


.visionder-legal-kicker{
  display:none;
}


.visionder-legal-title{
  margin:0;

  max-width:
    calc(100% - 72px);

  color:#f7f4ee;

  font-size:
    clamp(
      40px,
      4.3vw,
      55px
    );

  font-weight:700;
  line-height:.98;

  letter-spacing:-.052em;

  text-shadow:
    0 14px 40px
    rgba(0,0,0,.42);
}


/* =========================================================
   05. FLOATING CLOSE
   ========================================================= */

.visionder-legal-close{
  position:relative;

  flex:0 0 auto;

  width:44px;
  height:44px;

  margin:0;
  padding:0;

  display:grid;
  place-items:center;

  pointer-events:auto;

  cursor:pointer;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:50%;

  background:
    rgba(4,8,16,.18);

  color:
    rgba(247,244,238,.92);

  font:inherit;
  font-size:22px;
  line-height:1;

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.13);

  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}


.visionder-legal-close:hover{
  transform:
    scale(1.035);

  border-color:
    rgba(120,202,255,.22);

  background:
    rgba(120,202,255,.07);
}


.visionder-legal-close:active{
  transform:
    scale(.98);
}


/* =========================================================
   06. DOCUMENT SCROLL SURFACE
   Only this element scrolls.
   ========================================================= */

.visionder-legal-body{
  position:absolute;
  inset:0;

  z-index:2;

  overflow-y:auto;
  overflow-x:hidden;

  -webkit-overflow-scrolling:touch;

  overscroll-behavior:contain;

  touch-action:pan-y;

  padding:
    126px
    0
    88px;

  border:0;
  border-radius:0;

  background:transparent;

  box-shadow:none;

  color:#d4dce8;

  pointer-events:auto;

  scroll-padding-top:124px;

  /*
   * The document is scrollable,
   * but Visionder does not expose a scrollbar.
   */
  scrollbar-width:none;

  -ms-overflow-style:none;


  /*
   * Content naturally disappears beneath
   * the suspended title.
   */
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 64px,
      rgba(0,0,0,.10) 82px,
      rgba(0,0,0,.52) 104px,
      #000 126px,
      #000 calc(100% - 34px),
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent 64px,
      rgba(0,0,0,.10) 82px,
      rgba(0,0,0,.52) 104px,
      #000 126px,
      #000 calc(100% - 34px),
      transparent 100%
    );
}


.visionder-legal-body::-webkit-scrollbar{
  display:none;

  width:0;
  height:0;
}


/* =========================================================
   07. EDITORIAL COLUMN
   ========================================================= */

.visionder-legal-body > *{
  width:min(
    790px,
    calc(100% - 24px)
  );

  box-sizing:border-box;

  margin-left:auto !important;
  margin-right:auto !important;
}


/* =========================================================
   08. TYPOGRAPHY
   ========================================================= */

.visionder-legal-body h1,
.visionder-legal-body h2,
.visionder-legal-body h3{
  color:#f7f4ee;

  letter-spacing:-.025em;
}


.visionder-legal-body h1{
  max-width:760px;

  margin:
    6px
    0
    26px;

  font-size:
    clamp(
      25px,
      2.8vw,
      31px
    );

  line-height:1.16;
}


.visionder-legal-body h2{
  margin:
    52px
    0
    18px;

  font-size:21px;

  line-height:1.25;
}


.visionder-legal-body h3{
  margin:
    38px
    0
    16px;

  font-size:18px;
}


.visionder-legal-body p,
.visionder-legal-body li{
  max-width:69ch;

  color:
    rgba(218,226,237,.82);

  font-size:15.5px;

  line-height:1.82;
}


.visionder-legal-body a{
  color:#78caff;
}


/* =========================================================
   09. FAILURE FALLBACK
   ========================================================= */

.visionder-legal-loading{
  min-height:300px;

  display:grid;
  place-items:center;

  color:#96a4bb;

  text-align:center;
}


/* =========================================================
   10. MOBILE / COMPACT
   ========================================================= */

@media(max-width:720px){

  .visionder-legal-overlay{
    padding:
      max(
        18px,
        env(safe-area-inset-top)
      )
      20px
      max(
        16px,
        env(safe-area-inset-bottom)
      );
  }


  .visionder-legal-dialog{
    width:100%;

    height:90vh;
  }


  .visionder-legal-head{
    width:100%;

    height:84px;
    min-height:84px;
  }


  .visionder-legal-title{
    max-width:
      calc(100% - 64px);

    font-size:
      clamp(
        34px,
        9.5vw,
        44px
      );
  }


  .visionder-legal-close{
    width:42px;
    height:42px;

    font-size:20px;
  }


  .visionder-legal-body{
    padding:
      108px
      0
      70px;

    scroll-padding-top:
      106px;

    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent 50px,
        rgba(0,0,0,.12) 68px,
        rgba(0,0,0,.54) 86px,
        #000 106px,
        #000 calc(100% - 28px),
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent 50px,
        rgba(0,0,0,.12) 68px,
        rgba(0,0,0,.54) 86px,
        #000 106px,
        #000 calc(100% - 28px),
        transparent 100%
      );
  }


  .visionder-legal-body > *{
    width:
      calc(100% - 10px);
  }


  .visionder-legal-body p,
  .visionder-legal-body li{
    font-size:15px;

    line-height:1.78;
  }

}


/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media(
  prefers-reduced-motion:reduce
){

  .visionder-legal-overlay,
  .visionder-legal-dialog,
  .visionder-legal-close{
    transition:none !important;
  }

}