/* ============================================================
   Infinity Log — Launch Page
   File: css/style.css
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --bg-deep:      #02020a;

  --blue:         #3b5dff;
  --purple:       #7a3dff;
  --red:          #ff2236;

  --text:         #ffffff;
  --muted:        #9b9b9b;
  --line:         rgba(255,255,255,0.08);

  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, #0a0a1f 0%, #050510 50%, var(--bg-deep) 100%);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;letter-spacing:-0.011em;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--purple);color:#fff}

:focus-visible{
  outline:2px solid var(--purple);
  outline-offset:3px;
  border-radius:4px;
}


/* ============================================================
   1. ATMOSPHERIC BACKGROUND
   ============================================================ */

.bg-aura{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-aura .blob{
  position:absolute;border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}
.bg-aura .b-blue{
  top:20%;left:-15%;width:1100px;height:1100px;
  background:radial-gradient(circle,
    rgba(59,93,255,0.45) 0%,
    rgba(26,45,191,0.12) 40%,
    transparent 70%);
  animation:drift-l 30s ease-in-out infinite;
}
.bg-aura .b-red{
  top:20%;right:-15%;width:1100px;height:1100px;
  background:radial-gradient(circle,
    rgba(255,34,54,0.4) 0%,
    rgba(154,0,20,0.12) 40%,
    transparent 70%);
  animation:drift-r 32s ease-in-out infinite;
}
.bg-aura .b-purple{
  bottom:-30%;left:50%;
  width:1200px;height:1200px;
  margin-left:-600px;
  background:radial-gradient(circle,
    rgba(122,61,255,0.35) 0%,
    transparent 65%);
  animation:drift-c 26s ease-in-out infinite;
}
@keyframes drift-l{
  0%,100%{transform:translateY(0)}
  50%   {transform:translateY(60px)}
}
@keyframes drift-r{
  0%,100%{transform:translateY(0)}
  50%   {transform:translateY(-60px)}
}
@keyframes drift-c{
  0%,100%{transform:translateY(0)}
  50%   {transform:translateY(40px)}
}

.stars{position:fixed;inset:0;pointer-events:none;z-index:0}
.stars span{
  position:absolute;border-radius:50%;
  background:#fff;opacity:0;
  animation:twinkle 4s infinite;
  will-change:opacity;
}
@keyframes twinkle{
  0%,100%{opacity:0}
  50%   {opacity:0.6}
}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:0.3;mix-blend-mode:overlay;
}
.grain svg{width:100%;height:100%}


/* ============================================================
   2. TOP BAR
   ============================================================ */

.top-bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:18px 40px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  transition:transform .25s ease;
  touch-action:manipulation;
  flex-shrink:0;
  min-width:0;
}
.brand:hover{transform:scale(1.02)}
.brand-logo{
  width:54px;height:auto;
  filter:
    drop-shadow(0 4px 12px rgba(122,61,255,0.5))
    drop-shadow(0 6px 18px rgba(255,34,54,0.3));
}
.brand-name{
  font-size:14px;font-weight:700;letter-spacing:0.04em;
  color:#fff;line-height:1;text-transform:uppercase;
  white-space:nowrap;
}
.brand-bar{
  margin:0 4px;font-weight:300;
  background:linear-gradient(180deg,#7a3dff,#ff2236);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.top-meta{
  font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.18em;font-weight:600;
  white-space:nowrap;
  flex-shrink:0;
}


/* ============================================================
   3. MAIN CONTENT
   ============================================================ */

main{
  position:relative;z-index:2;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:110px 24px;
  text-align:center;
}

.live-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:100px;
  background:linear-gradient(180deg,
    rgba(122,61,255,0.18) 0%,
    rgba(255,34,54,0.08) 100%);
  border:1px solid rgba(122,61,255,0.35);
  font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:#d8c8ff;
  margin-bottom:36px;
  box-shadow:0 0 40px -5px rgba(122,61,255,0.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.live-badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--red));
  box-shadow:0 0 14px var(--purple);
  animation:pulse 1.6s infinite;
  flex-shrink:0;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%   {opacity:0.5;transform:scale(1.4)}
}


/* ============================================================
   4. ANIMATED INFINITY LOGO
   ============================================================ */

.logo-stage{
  position:relative;
  width:520px;max-width:100%;height:340px;
  margin-bottom:18px;
  display:grid;place-items:center;
  perspective:1200px;
}
.halo{
  position:absolute;border-radius:50%;
  border:1px solid transparent;
  pointer-events:none;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.halo-1{
  width:340px;height:340px;
  border-color:rgba(122,61,255,0.22);
  box-shadow:
    inset 0 0 60px rgba(122,61,255,0.12),
    0 0 30px rgba(122,61,255,0.08);
  animation:halo-rot 36s linear infinite;
}
.halo-2{
  width:440px;height:440px;
  border-color:rgba(255,34,54,0.14);
  animation:halo-rot-rev 30s linear infinite;
}
.halo-3{
  width:560px;height:560px;
  background:radial-gradient(circle,
    rgba(122,61,255,0.22) 0%,
    rgba(59,93,255,0.06) 35%,
    rgba(255,34,54,0.05) 55%,
    transparent 70%);
  filter:blur(20px);
  animation:halo-pulse 4.5s ease-in-out infinite;
}
@keyframes halo-rot{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes halo-rot-rev{
  to{transform:translate(-50%,-50%) rotate(-360deg)}
}
@keyframes halo-pulse{
  0%,100%{opacity:0.75;transform:translate(-50%,-50%) scale(1)}
  50%   {opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}

.logo-float{
  position:relative;z-index:2;
  width:480px;max-width:100%;
  animation:float 6s ease-in-out infinite;
  filter:
    drop-shadow(0 14px 40px rgba(122,61,255,0.45))
    drop-shadow(0 28px 70px rgba(255,34,54,0.28));
  will-change:transform;
}
.logo-img{
  width:100%;height:auto;
  animation:wobble 9s ease-in-out infinite;
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%   {transform:translateY(-12px)}
}
@keyframes wobble{
  0%,100%{transform:rotate(0deg)}
  25%   {transform:rotate(0.8deg)}
  50%   {transform:rotate(0deg)}
  75%   {transform:rotate(-0.8deg)}
}


/* ============================================================
   5. APP NAME
   ============================================================ */

.name-wrap{
  position:relative;
  margin-bottom:38px;
  padding:0.1em 0 0.15em;
}
h1.app-name{
  font-size:clamp(40px, 7.5vw, 88px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:0.04em;
  display:flex;align-items:center;justify-content:center;
  gap:0.18em;flex-wrap:nowrap;
  color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,0.5);
}
h1.app-name .bar{
  color:transparent;
  background:linear-gradient(180deg,#7a3dff 0%,#ff2236 100%);
  -webkit-background-clip:text;background-clip:text;
  font-weight:300;
  text-shadow:none;
  filter:drop-shadow(0 0 18px rgba(122,61,255,0.6));
  margin:0 -0.04em;
  animation:bar-pulse 3s ease-in-out infinite;
}
@keyframes bar-pulse{
  0%,100%{filter:drop-shadow(0 0 18px rgba(122,61,255,0.6))}
  50%   {filter:drop-shadow(0 0 30px rgba(255,34,54,0.7))}
}
.tagline{
  font-size:13px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.42em;font-weight:500;
  margin-top:14px;
}


/* ============================================================
   6. LAUNCH HEADLINE & DIVIDER
   ============================================================ */

.divider-line{
  width:1px;height:60px;
  background:linear-gradient(180deg,
    transparent,
    rgba(122,61,255,0.5),
    rgba(255,34,54,0.5),
    transparent);
  margin:24px auto 36px;
}
.launch-headline{
  font-family:var(--font-sans);
  font-style:italic;
  font-weight:300;
  font-size:clamp(28px, 4.4vw, 60px);
  letter-spacing:-0.025em;
  line-height:1.1;
  margin-bottom:24px;
  max-width:900px;
  color:#e6e6e6;
}
.launch-headline .red{
  font-weight:400;
  background:linear-gradient(135deg,#7a3dff 0%,#c92a6a 50%,#ff2236 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(255,34,54,0.4));
}
.launch-sub{
  font-size:13px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.32em;font-weight:600;
  margin-bottom:50px;
}


/* ============================================================
   7. COUNTDOWN
   ============================================================ */

.countdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:640px;width:100%;margin:0 auto;
}
.cd-cell{
  padding:22px 12px;border-radius:20px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.01) 100%);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
@media (hover:hover){
  .cd-cell:hover{
    transform:translateY(-4px);
    border-color:rgba(122,61,255,0.45);
    box-shadow:0 20px 50px -15px rgba(122,61,255,0.4);
  }
}
.cd-num{
  font-size:clamp(32px, 4.8vw, 50px);
  font-weight:800;letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 0%,#888 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;
}
.cd-lab{
  font-size:10px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.18em;
  margin-top:8px;font-weight:600;
}


/* ============================================================
   8. FOOTER
   ============================================================ */

.footer-line{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  padding:24px 40px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.18em;font-weight:600;
}
.footer-line .left,
.footer-line .right{white-space:nowrap}
.footer-line .right{display:flex;align-items:center;gap:8px}
.footer-line .pulse-dot{
  width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--red));
  box-shadow:0 0 10px var(--purple);
  animation:pulse 1.6s infinite;
  flex-shrink:0;
}


/* ============================================================
   9. REVEAL ANIMATIONS
   ============================================================ */

.reveal{
  opacity:0;transform:translateY(30px);
  animation:rise 1.2s cubic-bezier(.2,.8,.3,1) forwards;
  will-change:opacity,transform;
}
.reveal.d1{animation-delay:0.10s}
.reveal.d2{animation-delay:0.30s}
.reveal.d3{animation-delay:0.55s}
.reveal.d4{animation-delay:0.80s}
.reveal.d5{animation-delay:1.05s}
@keyframes rise{
  to{opacity:1;transform:translateY(0)}
}


/* ============================================================
   10. RESPONSIVE
   ============================================================ */

@media (max-width: 900px){
  main{padding:100px 20px}
  .logo-stage{width:420px;height:280px;margin-bottom:14px}
  .logo-float{width:380px}
  .halo-1{width:280px;height:280px}
  .halo-2{width:360px;height:360px}
  .halo-3{width:460px;height:460px}
  h1.app-name{font-size:clamp(36px, 7vw, 64px);letter-spacing:0.03em}
}

@media (max-width: 600px){
  .top-bar{padding:14px 18px;gap:12px}
  .brand-logo{width:42px}
  .brand-name{font-size:12px;letter-spacing:0.04em}
  .brand-bar{margin:0 3px}
  .top-meta{font-size:10px;letter-spacing:0.12em}

  main{padding:84px 18px}

  .live-badge{
    font-size:10.5px;
    letter-spacing:0.1em;
    padding:7px 14px;
    margin-bottom:28px;
  }

  .logo-stage{width:340px;height:230px;margin-bottom:10px}
  .logo-float{width:300px}
  .halo-1{width:230px;height:230px}
  .halo-2{width:290px;height:290px}
  .halo-3{width:380px;height:380px}

  .name-wrap{margin-bottom:28px}
  h1.app-name{font-size:clamp(28px, 9vw, 50px);letter-spacing:0.03em;gap:0.15em}
  .tagline{font-size:11px;letter-spacing:0.36em;margin-top:10px}

  .divider-line{height:42px;margin:14px auto 24px}

  .launch-headline{font-size:clamp(22px, 6.8vw, 36px);margin-bottom:16px;line-height:1.2}
  .launch-sub{font-size:11px;letter-spacing:0.24em;margin-bottom:36px}

  .countdown{gap:8px;max-width:100%}
  .cd-cell{padding:16px 4px;border-radius:14px}
  .cd-num{font-size:24px;letter-spacing:-0.025em}
  .cd-lab{font-size:9px;letter-spacing:0.12em;margin-top:6px}

  .footer-line{padding:18px 20px;font-size:9.5px;letter-spacing:0.14em;gap:10px}

  .bg-aura .blob{filter:blur(70px)}
  .bg-aura .b-blue{width:800px;height:800px}
  .bg-aura .b-red{width:800px;height:800px}
  .bg-aura .b-purple{width:900px;height:900px;margin-left:-450px}
}

@media (max-width: 380px){
  .top-bar{padding:12px 14px;gap:8px}
  .brand-logo{width:36px}
  .brand-name{font-size:11px}
  .top-meta{font-size:9px;letter-spacing:0.1em}

  main{padding:72px 14px}

  .logo-stage{width:280px;height:190px;margin-bottom:6px}
  .logo-float{width:250px}
  .halo-1{width:190px;height:190px}
  .halo-2{width:240px;height:240px}
  .halo-3{width:320px;height:320px}

  h1.app-name{font-size:28px}
  .live-badge{font-size:10px;padding:6px 12px;letter-spacing:0.08em}

  .countdown{gap:6px}
  .cd-cell{padding:14px 2px;border-radius:12px}
  .cd-num{font-size:20px}
  .cd-lab{font-size:8.5px;letter-spacing:0.1em}

  .footer-line{padding:14px 14px;font-size:9px}
}

@media (max-height: 700px) and (max-width: 900px){
  main{padding:80px 18px;justify-content:flex-start}
  .live-badge{margin-bottom:22px}
  .name-wrap{margin-bottom:22px}
  .divider-line{height:30px;margin:6px auto 18px}
  .launch-sub{margin-bottom:30px}
}


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

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .stars{display:none}
  .reveal{opacity:1;transform:none}
}