/* Elssu holding page: recreation of the live Framer site at www.elssu.com.
   Layout rules, sizes, breakpoints and animation settings were read from the
   live site's CSS and JavaScript:
     desktop  >= 1200px
     tablet   810px - 1199.98px
     mobile   <= 809.98px
   Like the original, type sizes are fixed per breakpoint (Framer does not scale them fluidly). */

@font-face{font-family:'Louize';src:url(../assets/fonts/Louize.otf) format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Louize';src:url(../assets/fonts/Louize-Italic.otf) format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Founders Grotesk';src:url(../assets/fonts/FoundersGrotesk-RegularItalic.otf) format('opentype');font-weight:400;font-style:italic;font-display:swap}

:root{
  --louize:'Louize',Georgia,serif;
  --founders:'Founders Grotesk','Helvetica Neue',Arial,sans-serif;
  --ease-appear:cubic-bezier(.44,0,.56,1);   /* live: [.44,0,.56,1] */
  --ease-text:cubic-bezier(.5,0,.88,.77);    /* live: [.5,0,.88,.77] */

  /* Section 1 on the live site ends at 606px (desktop). The opening screen is
     stretched to at least the viewport height so nothing below the slogan shows
     on load. Set --hero-fill to 0px to get the live site's exact fixed layout. */
  --hero-live-end:606px;
  --hero-fill:100svh;
  --hero-end:max(var(--hero-live-end),var(--hero-fill));
  --tail:594px;                               /* live page height 1200 minus section 1 end */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:#b9bccd}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:#000;text-decoration:none}
a:focus-visible{outline:1px solid #000;outline-offset:4px}

/* ---------- page (live: framer-72rtr7) ---------- */
.page{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  min-height:100vh;
  height:calc(var(--hero-end) + var(--tail));
  padding-top:130px;
  overflow:clip;
  background:#b9bccd url(../assets/images/elssu-sky-4096.jpg) center / cover no-repeat;
}

/* ---------- section 1: logo + slogan (live: framer-vgojuh) ---------- */
.s1{
  flex:none;width:100%;
  height:calc(var(--hero-end) - 130px);
  display:flex;flex-direction:column;align-items:center;gap:100px;
}
.logo{flex:none;display:block;width:143px;height:86px;animation:appear-fade 1.5s var(--ease-appear) both}
.slogan-box{flex:none;width:600px;animation:appear-scale 1.5s var(--ease-appear) both}
.slogan{
  font:400 70px/1.1 var(--louize);
  color:#0a0908;text-align:center;
  white-space:pre-wrap;word-break:break-word;text-wrap:balance;
}
.slogan em{font-style:italic}

/* ---------- section 2 (live: framer-1u36vgl) ---------- */
.s2{flex:none;position:relative;width:100%;height:600px}
.about,.status,.email{position:absolute;text-align:center;color:#000}
.about p,.status,.email{white-space:pre-wrap;word-break:break-word}
.about{top:42px;left:calc(50% - 411.5px);width:823px;font:400 31px/1.2 var(--louize)}
.status{bottom:163px;left:calc(50% - 195.5px);width:391px;height:46px;font:italic 400 22px/1.2 var(--founders)}
.email{bottom:127px;left:calc(50% - 139px);width:278px;height:36px;font:400 22px/1.2 var(--louize)}

.m-only{display:none}

/* ---------- scroll-triggered reveals (live: Framer appear effects) ----------
   fade-in : opacity 0 -> 1, 0.5s, ease [.5,0,.88,.77], at 50% visible   (paragraph)
   fade    : opacity 0 -> 1, 0.5s, ease [.44,0,.56,1], at 50% visible   (desktop email)
   slide   : opacity 0 + 10px right -> 1 + 0, 1.1s, ease [.44,0,.56,1], at first pixel (status; mobile email)
   All reverse when the element leaves view (animateOnce: false). */
.js [data-reveal]{opacity:0}
.js [data-reveal].in{opacity:1}
.js [data-reveal="fade-in"]{transition:opacity .5s var(--ease-text)}
.js [data-reveal="fade"]{transition:opacity .5s var(--ease-appear)}
.js [data-reveal="slide"]{transform:translateX(10px);transition:opacity 1.1s var(--ease-appear),transform 1.1s var(--ease-appear)}
.js [data-reveal="slide"].in{transform:none}

/* ---------- load appear effects (live: ql966o, 61iw4e) ---------- */
@keyframes appear-fade{from{opacity:.001}to{opacity:1}}
@keyframes appear-scale{from{opacity:.001;transform:scale(1.7)}to{opacity:1;transform:none}}

/* ---------- tablet ---------- */
@media (max-width:1199.98px){
  :root{--hero-live-end:506px;--tail:694px}
  .about{top:102px;left:calc(50% - 287px);width:574px}
  .status{bottom:107px}
  .email{bottom:79px}
}

/* ---------- mobile ---------- */
@media (max-width:809.98px){
  :root{--hero-live-end:706px;--tail:494px}
  .page{background-image:url(../assets/images/elssu-sky-2048.jpg)}
  .logo{width:117px;height:70px}
  .slogan-box{width:275px;height:260px}
  .slogan{font-size:50px}

  .d-only{display:none}
  .m-only{display:block}
  br.m-only{display:inline}

  .s2{height:auto}
  .about.m-only{position:relative;top:0;left:auto;margin:0 auto;width:315px;font-size:20px}
  .m-foot{position:relative}
  .m-foot .status{top:117px;bottom:auto;left:calc(50% - 100px);width:200px;font-size:18px}
  .m-foot .email{top:174px;bottom:auto;left:calc(50% - 139px);font-size:18px}
}
@media (max-width:809.98px) and (min-resolution:2dppx){
  .page{background-image:url(../assets/images/elssu-sky-4096.jpg)}
}

/* ---------- reduced motion: no animation, all text visible ---------- */
@media (prefers-reduced-motion:reduce){
  .logo,.slogan-box{animation:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}