*{box-sizing:border-box;margin:0;padding:0}
:root{--white:#f5f5f5}
html,body{width:100%;height:100%;background:#000}
html{background:#000}
body{
  min-height:100vh;
  min-height:100svh;
  background:#000;
  color:var(--white);
  font-family:"Segoe UI",Arial,sans-serif;
  overflow:hidden;
}
.page{
  position:relative;
  width:100%;
  height:100vh;
  height:100svh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  background:#000;
}

/* The complete logo + text/button composition is centered as ONE unit.
   This prevents different aspect ratios from pushing the text up/down. */
.hero{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0;
}

/* Keep the logo responsive in BOTH width and height. */
.logo-stage{
  position:relative;
  width:min(760px,82vw,58dvh);
  aspect-ratio:1200/801;
  flex:0 1 auto;
  max-height:58dvh;
}
.logo-video,.logo-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.logo-video{
  z-index:1;
  object-fit:cover;
  background:#000;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
}
.logo-video.mask-ready{
  -webkit-mask-image:url("assets/trailx_logo_white_transparent.png");
  mask-image:url("assets/trailx_logo_white_transparent.png");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-mode:alpha;
  mask-mode:alpha;
}
.logo-video.playing{opacity:1;visibility:visible}
.logo-fallback{
  z-index:2;
  object-fit:contain;
  opacity:1;
  transition:opacity .25s ease;
}
.logo-fallback.hide{opacity:0}

/* Text stays directly under the logo and is part of the centered group. */
.content{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  margin-top:clamp(10px,1.8vh,22px);
  flex:0 0 auto;
}
.tagline{
  font-size:clamp(1.05rem,2vw,1.75rem);
  line-height:1.2;
  min-height:1.2em;
  letter-spacing:-0.02em;
  color:#ddd;
  white-space:nowrap;
}
.notify-btn{
  margin-top:clamp(12px,1.7vh,20px);
  min-width:108px;
  padding:11px 22px;
  border:1px solid rgba(255,255,255,.8);
  background:transparent;
  color:#fff;
  font-size:.9rem;
  line-height:1.2;
  cursor:pointer;
}
.notify-btn:hover{background:#fff;color:#000}

/* Footer is independent from the centered main composition. */
.footer{
  position:absolute;
  left:0;
  right:0;
  bottom:max(16px,3.2dvh);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  width:100%;
  text-align:center;
}
.coming{
  font-size:.8rem;
  line-height:1.2;
  color:#cfcfcf;
  letter-spacing:.17em;
  white-space:nowrap;
}
.socials{display:flex;gap:28px;align-items:center}
.socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:#d0d0d0;
  transition:color .3s ease,transform .3s ease;
  text-decoration:none;
}
.socials a:hover{color:#ff7a1a;transform:translateY(-2px)}
.socials svg{width:22px;height:22px;fill:currentColor;stroke:none}
.socials a:last-child svg .dot{fill:currentColor;stroke:none}

.modal{
  position:fixed;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.86);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{
  width:min(420px,92vw);
  padding:34px 28px 28px;
  background:#0b0b0b;
  border:1px solid #333;
  text-align:center;
  position:relative;
}
.modal-card h2{margin-bottom:10px;font-weight:500}
.modal-card>p{margin-bottom:20px;color:#999;font-size:.9rem;line-height:1.5}
.modal-close{position:absolute;top:6px;right:12px;border:0;background:none;color:#777;font-size:1.7rem;cursor:pointer}
#notifyForm{display:flex;flex-direction:column;gap:10px}
#notifyForm input{padding:12px;background:#050505;color:#fff;border:1px solid #333}
#notifyForm button{padding:12px;border:1px solid #fff;background:#fff;color:#000;font-weight:600}
.form-msg{min-height:1.2em;margin:12px 0 0!important;color:#aaa!important}

/* Phones: center the same composition, while leaving enough room for footer. */
@media (max-width:640px){
  .hero{
    justify-content:center;
    padding:0 12px;
  }
  .logo-stage{
    width:min(88vw,52dvh);
    max-height:52dvh;
  }
  .content{margin-top:10px}
  .tagline{font-size:clamp(.95rem,4.5vw,1.15rem)}
  .notify-btn{margin-top:14px;padding:10px 20px}
  .footer{
    bottom:max(12px,2.2dvh);
    gap:9px;
  }
  .coming{font-size:.66rem;letter-spacing:.13em}
  .socials{gap:22px}
  .socials a{width:22px;height:22px}
  .socials svg{width:20px;height:20px}
}

/* Short desktop/laptop screens. Scale the whole centered composition rather
   than changing top/bottom padding, which was causing vertical jumps. */
@media (min-width:641px) and (max-height:850px){
  .logo-stage{
    width:min(700px,78vw,54dvh);
    max-height:54dvh;
  }
  .content{margin-top:8px}
  .notify-btn{margin-top:12px;padding:10px 20px}
  .footer{bottom:12px;gap:9px}
}

/* Very short displays (e.g. 768p laptops). */
@media (min-width:641px) and (max-height:700px){
  .logo-stage{
    width:min(620px,76vw,47dvh);
    max-height:47dvh;
  }
  .content{margin-top:6px}
  .tagline{font-size:1.05rem}
  .notify-btn{margin-top:9px;padding:9px 18px}
  .footer{bottom:7px;gap:6px}
  .coming{font-size:.64rem}
  .socials{gap:20px}
  .socials a{width:21px;height:21px}
  .socials svg{width:19px;height:19px}
}

/* Extra-tall TVs/monitors: never let the main artwork become excessively large. */
@media (min-width:1400px) and (min-height:900px){
  .logo-stage{width:min(820px,60vw,58dvh)}
}

/* Prevent accidental horizontal overflow on narrow devices. */
@media (max-width:360px){
  .hero{padding:0 8px}
  .logo-stage{width:min(92vw,50dvh)}
  .content{margin-top:8px}
  .tagline{font-size:.9rem}
  .notify-btn{margin-top:11px}
  .footer{bottom:10px}
  .coming{font-size:.59rem}
  .socials{gap:18px}
}