/* Inceptium — White background, English wordmark */

:root{
  --bg:        #FFFFFF;
  --fg:        #14181F;
  --muted:     rgba(20,24,31,0.55);
  --divider:   rgba(20,24,31,0.18);
  --accent:    oklch(0.45 0.16 250);
  --t-dot:     130ms;
  --t-cycle:   3200ms;
}

*{ box-sizing:border-box; }

html, body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

body{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}

.stage{
  width:min(880px, 92vw);
  display:flex; align-items:center; justify-content:center;
  padding:48px;
}
.stage .inner{
  display:flex; align-items:center; gap:36px;
}

.mark{ width:180px; height:180px; flex:none; }
.mark svg{ display:block; width:100%; height:100%; }

.divider{
  width:1px; height:128px;
  background:var(--divider);
  transform:scaleY(0); transform-origin:center;
}

.word{
  line-height:1;
  opacity:0; transform:translateX(-8px);
  color:var(--fg);
}
.word .name{
  font-size:56px; font-weight:600; letter-spacing:-0.018em;
}
.word .sub{
  margin-top:14px;
  font-size:12px; font-weight:500;
  letter-spacing:0.34em; text-transform:uppercase;
  color:var(--muted);
}

.replay{
  position:fixed; bottom:24px; right:24px;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px 9px 12px;
  background:transparent; color:var(--fg);
  border:1px solid rgba(20,24,31,0.16);
  border-radius:999px;
  font:inherit; font-size:12.5px; font-weight:500;
  letter-spacing:0.02em; cursor:pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.replay:hover{
  background:rgba(20,24,31,0.04);
  border-color:rgba(20,24,31,0.32);
}
.replay svg{ width:14px; height:14px; }

.dot          { opacity:0; transform:scale(0.2); transform-origin:center; transform-box:fill-box; }
.guide        { opacity:0; }
.sparkle      { opacity:0; }
.sparkle-halo { opacity:0; filter:blur(2.5px); }

.dot, .guide, .divider, .word, .sparkle, .sparkle-halo{
  animation-fill-mode: forwards;
}

.run .guide      { animation: guide   var(--t-cycle) ease-out 1 forwards; }
.run .dot        { animation: pop     var(--t-cycle) cubic-bezier(.2,1.4,.4,1) 1 forwards; }
.run .dot-0{ animation-delay: calc(var(--t-dot) * 0); }
.run .dot-1{ animation-delay: calc(var(--t-dot) * 1); }
.run .dot-2{ animation-delay: calc(var(--t-dot) * 2); }
.run .dot-3{ animation-delay: calc(var(--t-dot) * 3); }
.run .dot-4{ animation-delay: calc(var(--t-dot) * 4); }
.run .dot-5{ animation-delay: calc(var(--t-dot) * 5); }
.run .dot-6{ animation-delay: calc(var(--t-dot) * 6); }
.run .divider    { animation: divider var(--t-cycle) ease-out 1 forwards; }
.run .word       { animation: word    var(--t-cycle) ease-out 1 forwards; }
.run .sparkle-halo{
  animation: halo    var(--t-cycle) ease-out 1 forwards;
  animation-delay: calc(var(--t-dot) * 6 + 220ms);
}
.run .sparkle    {
  animation: sparkle var(--t-cycle) ease-out 1 forwards;
  animation-delay: calc(var(--t-dot) * 6 + 260ms);
}

@keyframes pop{
  0%   { opacity:0; transform:scale(0.2); }
  9%   { opacity:var(--final-op,1); transform:scale(1); }
  100% { opacity:var(--final-op,1); transform:scale(1); }
}
@keyframes guide{
  0%,2% { opacity:0; }
  10%   { opacity:0.22; }
  100%  { opacity:0.22; }
}
@keyframes divider{
  0%,30% { transform:scaleY(0); }
  42%    { transform:scaleY(1); }
  100%   { transform:scaleY(1); }
}
@keyframes word{
  0%,36% { opacity:0; transform:translateX(-8px); }
  52%    { opacity:1; transform:translateX(0); }
  100%   { opacity:1; transform:translateX(0); }
}
@keyframes sparkle{
  0%   { opacity:0;    transform:scale(0.2)  rotate(-12deg); transform-origin:78px 18px; transform-box:view-box; }
  18%  { opacity:1;    transform:scale(1.05) rotate(0deg);   transform-origin:78px 18px; transform-box:view-box; }
  34%  { opacity:0.95; transform:scale(1)    rotate(4deg);   transform-origin:78px 18px; transform-box:view-box; }
  60%  { opacity:0;    transform:scale(0.7)  rotate(8deg);   transform-origin:78px 18px; transform-box:view-box; }
  100% { opacity:0; }
}
@keyframes halo{
  0%   { opacity:0;    transform:scale(0.4); transform-origin:78px 18px; transform-box:view-box; }
  24%  { opacity:0.55; transform:scale(1.6); transform-origin:78px 18px; transform-box:view-box; }
  60%  { opacity:0;    transform:scale(2.1); transform-origin:78px 18px; transform-box:view-box; }
  100% { opacity:0; }
}

@media (max-width: 640px){
  .stage{ padding:24px; }
  .stage .inner{ gap:22px; }
  .mark{ width:120px; height:120px; }
  .divider{ height:92px; }
  .word .name{ font-size:38px; }
  .word .sub{ font-size:10.5px; letter-spacing:0.30em; margin-top:10px; }
}