/*
 * Lettijalee landing page
 *
 * MAIN DESIGN SETTINGS
 * --ll-bg is the current coral sampled from the centre GIF.
 * Change this one value later if you want a different background.
 * --ll-frame controls the centre frame opacity.
 */
:root{
  --ll-bg:#e04050;
  --ll-frame:rgba(255,255,255,.96);
  --ll-side-width:clamp(220px,26vw,380px);
  --ll-centre-width:min(64vw,1040px);
  --ll-gap:clamp(18px,2.8vw,44px);
  --ll-logo-width:clamp(72px,8vw,120px);
  --ll-left-speed:46s;
  --ll-right-speed:52s;
}

html body.lettijalee-landing-page{
  overflow:hidden !important;
  background:var(--ll-bg) !important;
}

.lettijalee-landing{
  position:fixed;
  z-index:999999;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:var(--ll-bg);
  font-family:Arial,Helvetica,sans-serif;
}

.lettijalee-logo{
  position:absolute;
  z-index:30;
  top:22px;
  left:24px;
  width:var(--ll-logo-width);
  height:auto;
  mix-blend-mode:multiply;
}

.lettijalee-columns{
  position:absolute;
  inset:0;
  display:block;
  padding:0 0 clamp(62px,8vh,92px);
}

.lettijalee-side{
  position:absolute;
  top:0;
  bottom:0;
  width:var(--ll-side-width);
  overflow:hidden;
  z-index:5;
}

.lettijalee-side-left{ left:0; }
.lettijalee-side-right{ right:0; }

.lettijalee-track{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  display:flex;
  flex-direction:column;
  will-change:transform;
}

.lettijalee-track-left{animation:lettijalee-up var(--ll-left-speed) linear infinite;}
.lettijalee-track-right{animation:lettijalee-down var(--ll-right-speed) linear infinite;}

.lettijalee-set{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:14px;
}

.lettijalee-side img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:426/240;
  object-fit:contain;
  background:transparent;
}

@keyframes lettijalee-up{
  from{transform:translateY(0);}
  to{transform:translateY(-50%);}
}
@keyframes lettijalee-down{
  from{transform:translateY(-50%);}
  to{transform:translateY(0);}
}

.lettijalee-centre-frame{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:20;
  width:var(--ll-centre-width);
  max-width:92vw;
  padding:clamp(10px,1.25vw,18px);
  background:var(--ll-frame);
  box-shadow:0 16px 50px rgba(0,0,0,.16);
}

.lettijalee-centre{
  display:block;
  width:100%;
  height:auto;
}

.lettijalee-bottom{
  position:absolute;
  z-index:40;
  left:0;
  right:0;
  bottom:clamp(40px,6vh,64px);
  height:auto;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:transparent;
  border-top:none;
}

.lettijalee-marquee{
  width:max-content;
  white-space:nowrap;
  font-size:clamp(20px,3vw,40px);
  letter-spacing:.14em;
  font-weight:700;
  font-family:Helvetica,Arial,sans-serif;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  animation:lettijalee-marquee 18s linear infinite;
}

@keyframes lettijalee-marquee{
  from{transform:translateX(100vw);}
  to{transform:translateX(-100%);}
}

/* -----------------------------------------------------------
   Contact email (small, clickable, bottom of screen)
   ----------------------------------------------------------- */
.lettijalee-email-wrap{
  position:absolute;
  z-index:45;
  left:0;
  right:0;
  bottom:clamp(12px,2.5vh,24px);
  display:flex;
  justify-content:center;
}

.lettijalee-email{
  font-size:clamp(12px,1.3vw,16px);
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
  text-decoration:none;
  letter-spacing:.02em;
  opacity:.9;
}

.lettijalee-email:hover{ opacity:1; text-decoration:underline; }

@media(max-width:800px){
  :root{
    /* Mobile sizing is based on the actual viewport width so the GIF columns
       visibly shrink on portrait phones instead of retaining desktop scale. */
    --ll-side-width:24vw;
    --ll-centre-width:68vw;
    --ll-gap:6px;
  }
  .lettijalee-set{gap:6px;padding-bottom:6px;}
  .lettijalee-logo{top:10px;left:10px;width:clamp(48px,12vw,78px);}
  .lettijalee-centre-frame{padding:5px;max-width:68vw;}
  .lettijalee-side img{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    aspect-ratio:426/240;
  }
}

@media(max-width:480px){
  :root{
    --ll-side-width:24vw;
    --ll-centre-width:68vw;
  }
  .lettijalee-set{gap:4px;padding-bottom:4px;}
  .lettijalee-centre-frame{padding:4px;max-width:70vw;}
  .lettijalee-marquee{font-size:16px;}
  .lettijalee-email{font-size:10px;}
}

/* Extra-short portrait screens: keep every image tied to viewport width. */
@media (max-width:800px) and (orientation:portrait){
  :root{
    --ll-side-width:24vw;
    --ll-centre-width:68vw;
  }
  .lettijalee-landing{
    height:100dvh;
    min-height:100dvh;
  }
  .lettijalee-side{width:24vw;}
  .lettijalee-centre-frame{
    width:68vw;
    max-width:68vw;
    max-height:60dvh;
    overflow:hidden;
  }
  .lettijalee-centre{
    max-height:calc(60dvh - 8px);
    object-fit:contain;
  }
  .lettijalee-bottom{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10vh);
  }
  .lettijalee-email-wrap{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 3vh);
  }
  .lettijalee-marquee{font-size:16px;}
  .lettijalee-email{font-size:11px;}
}

@media (max-width:800px) and (orientation:landscape){
  .lettijalee-side{width:20vw;}
  .lettijalee-centre-frame{width:58vw;max-width:58vw;}
}

@media(prefers-reduced-motion:reduce){
  .lettijalee-track,
  .lettijalee-marquee{animation-play-state:paused;}
}


/* v1.2.4 - mobile scrolling layout
   Desktop remains unchanged. On mobile, decorative side GIFs remain
   independent while the central content participates in normal page flow. */
@media screen and (max-width: 767px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stop full-screen wrappers from trapping the page at viewport height. */
  .coming-soon-wrapper,
  .coming-soon-container,
  .hero,
  .landing-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* The animated side columns remain decorative and don't determine page height. */
  .side-gifs,
  .left-gifs,
  .right-gifs,
  .gif-column,
  .gif-column-left,
  .gif-column-right {
    pointer-events: none;
  }

  /* Ensure central content can extend below the centre GIF and be scrolled to. */
  .coming-soon,
  .coming-soon-content,
  .coming-soon-text,
  .email,
  .email-address,
  .site-content,
  .content {
    position: relative;
    z-index: 20;
  }

  /* Prevent viewport-fixed centre artwork from blocking document scrolling. */
  .center-gif,
  .centre-gif,
  .main-gif {
    max-height: none;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  html, body {
    overflow-y: auto !important;
  }

  .coming-soon-wrapper,
  .coming-soon-container,
  .hero,
  .landing-page {
    height: auto !important;
    min-height: 100dvh !important;
  }
}