/* ===============================
   Base
=============================== */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg0:#000;
  --bg1:#111;
  --text:#fff;
  --muted:#a8a8a8;
  --orange:#ff6a1a;
  --orange2:#ff4e00;
}

body{
  min-height:100vh;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:#000;
}

/* ===============================
   Layout
=============================== */
.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:48px 20px;
}

.card{
  width:100%;
  max-width: 1060px;
  text-align:center;
      margin-top: -50px;
}

/* ===============================
   Logo
=============================== */
.logo-wrapper{
  width: 400px;
  height: 400px;
  margin: -80px auto -80px; /* extra spacing so text never touches */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;   /* critical */
}

.logo-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* prevents cropping & overlap */
  display: block;
}


/* ===============================
   Typography
=============================== */
.brand{
  font-size:clamp(44px,5vw,78px);
  font-weight:500;
  letter-spacing:-.03em;
  margin-bottom:14px;
}

.brand span{color:var(--orange)}

.headline{
  font-family:'Source Serif 4',serif;
  font-size:clamp(20px,2vw,28px);
  color:var(--orange);
  line-height:1.35;
  margin-bottom:18px;
}

.subtext{
  font-size:clamp(24px,1.5vw,20px);
  color:var(--muted);
  margin-bottom:32px;
}


/* ===============================
   Shining Divider
=============================== */
.shine-divider{
  width:min(320px,70%);
  height:10px;
  margin:50px auto 50px;
  position:relative;
}

.shine-divider::before{
  content:"";
  position:absolute;
  inset:0;
  top:50%;
  transform:translateY(-50%);
  height:3px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,106,26,.9) 20%,
    rgba(255,180,90,1) 50%,
    rgba(255,78,0,.9) 80%,
    transparent 100%
  );
  border-radius:999px;
  box-shadow:
    0 0 14px rgba(255,106,26,.6),
    0 0 38px rgba(255,106,26,.25);
  animation:shimmer 3.5s ease-in-out infinite;
}

/* ===============================
   Email Form
=============================== */
.email-form{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}

.email-form input{
  width:min(520px,100%);
  padding:18px 22px;
  font-size:18px;
  border-radius:999px;
  border:1px solid #242424;
  background:rgba(17,17,17,.75);
  color:#fff;
  outline:none;
  animation:inputFloat 6s ease-in-out infinite;
}

.email-form input::placeholder{color:#808080}

.email-form input:focus{
  animation:none;
  border-color:rgba(255,106,26,.55);
  box-shadow:0 0 0 4px rgba(255,106,26,.15);
}

.email-form button{
  padding:18px 34px;
  font-size:18px;
  font-weight:600;
  border-radius:999px;
  border:none;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#ff7a18,#ff4e00);
  box-shadow:
    0 16px 50px rgba(255,100,0,.35),
    0 0 40px rgba(255,106,26,.18);
  animation:glowPulse 3.8s ease-in-out infinite;
}

.email-form button:hover{
  animation:none;
  transform:translateY(-2px);
}

/* ===============================
   Animations
=============================== */
.animate{
  opacity:0;
  transform:translateY(18px);
  animation:fadeUp .9s ease-out forwards;
}

.fade-up{animation-name:fadeUp}

.delay-1{animation-delay:.15s}
.delay-2{animation-delay:.3s}
.delay-3{animation-delay:.45s}
.delay-4{animation-delay:.6s}
.delay-5{animation-delay:.75s}
.delay-6{animation-delay:.9s}

@keyframes fadeUp{
  to{opacity:1;transform:translateY(0)}
}

@keyframes shimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes inputFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}

@keyframes glowPulse{
  0%,100%{
    box-shadow:
      0 16px 50px rgba(255,100,0,.35),
      0 0 40px rgba(255,106,26,.18);
  }
  50%{
    box-shadow:
      0 22px 70px rgba(255,120,40,.55),
      0 0 70px rgba(255,160,90,.35);
  }
}



/* Hide content until logo finishes */
.content-after-logo{
  opacity: 0;
  transition: 0.3s ease-in-out;
}

/* Reveal content when ready */
.content-after-logo.show{
  opacity: 1;
  transition: 0.3s ease-in-out;
}

/* Reuse existing animation */
.content-after-logo.show .fade-up{
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.6s ease-out forwards;
}

.content-after-logo.show .headline{ animation-delay: 0.1s; }
.content-after-logo.show .shine-divider{ animation-delay: 0.25s; }
.content-after-logo.show .subtext{ animation-delay: 0.4s; }
.content-after-logo.show .email-form{ animation-delay: 0.55s; }

/* ===============================
   Responsive
=============================== */
@media (max-width:600px){
  .logo-wrapper {
        width: 340px;
        margin: -40px auto -40px;
    }
    .subtext {
    font-size: clamp(20px, 1.5vw, 20px);
}
  .email-form input,
  .email-form button{width:100%}
}

/* ===============================
   Reduced Motion
=============================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}