/* ===== Tokens - same palette and fonts as the Design Area site ===== */
:root{
  --bg-page:#240C53;
  --frame-line:#854CFF;
  --chip-line:#8C55FF;
  --text:#FFFFFF;
  --text-soft:#E6DAFF;
  --text-dim:#C3A7FF;
  --accent-mint:#36E8B8;
  --font:'Nunito',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --thin:'Jost',system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  background:var(--bg-page);
  color:var(--text);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;overflow-x:hidden;
}

/* striped glass band at the top + soft glow, faded out at the bottom */
.bg-fx{position:absolute;inset:0 0 auto 0;height:720px;overflow:hidden;pointer-events:none;z-index:0}
.bg-fx::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100%,2400px);aspect-ratio:2400/611;
  background:url('../assets/images/bg-texture.webp') top center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 80px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 80px),transparent 100%);
  opacity:.85;
}
.bg-fx::after{
  content:"";position:absolute;left:50%;top:180px;width:min(900px,140%);height:480px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(133,76,255,.35),transparent);
}

/* ===== Layout ===== */
.page{
  position:relative;z-index:1;
  min-height:100vh;min-height:100svh;
  max-width:760px;margin-inline:auto;
  padding:72px 24px 64px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:36px;
}

/* ===== Logo + name ===== */
.brand{display:flex;flex-direction:column;align-items:center;gap:14px}
.brand-mark{width:132px;height:auto;filter:drop-shadow(0 10px 40px rgba(54,232,184,.25))}
.brand-name{font-family:var(--thin);font-weight:200;font-size:56px;line-height:1;letter-spacing:.12em;margin-right:-.12em}

/* ===== Text ===== */
.intro{display:flex;flex-direction:column;gap:16px;color:var(--text-soft)}
.intro .lead{font-family:var(--thin);font-size:26px;font-weight:300;line-height:1.35;color:var(--text)}

.motto{
  font-family:var(--thin);font-weight:200;
  font-size:42px;line-height:1.2;letter-spacing:.02em;color:var(--text);text-wrap:balance;
}

/* ===== Coming soon - big thin letters that rise in one by one, then a soft
   light wave keeps travelling across them (letters are split in js/coming-soon.js) ===== */
.soon{
  position:relative;margin-top:12px;padding-bottom:26px;
  font-family:var(--thin);font-weight:200;
  font-size:clamp(40px,9vw,96px);line-height:1;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:var(--text-soft);
}
.soon-line{display:inline-block;margin-right:-.2em}   /* cancel the trailing tracking so it centres */
.soon .ch{
  display:inline-block;
  opacity:0;transform:translateY(.45em);filter:blur(8px);
  animation:
    ch-in 1.1s var(--ease-out) calc(.7s + var(--i) * .07s) forwards,
    ch-wave 4.2s ease-in-out calc(2.2s + var(--i) * .11s) infinite;
}
/* hairline that draws out from the centre under the word */
.soon::after{
  content:"";position:absolute;left:50%;bottom:0;width:min(60%,420px);height:1px;
  transform:translateX(-50%) scaleX(0);
  background:linear-gradient(90deg,transparent,var(--accent-mint),var(--frame-line),transparent);
  animation:line-in 1.4s var(--ease-out) 1.6s forwards;
}
@keyframes ch-in{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ch-wave{
  0%,100%{color:var(--text-soft);text-shadow:none}
  12%{color:#fff;text-shadow:0 0 18px rgba(54,232,184,.7),0 0 42px rgba(133,76,255,.6)}
  26%{color:var(--text-soft);text-shadow:none}
}
@keyframes line-in{to{transform:translateX(-50%) scaleX(1)}}

/* ===== Entrance ===== */
.page > *{opacity:0;transform:translateY(14px);animation:rise .9s var(--ease-out) forwards}
.page > :nth-child(2){animation-delay:.12s}
.page > :nth-child(3){animation-delay:.24s}
.page > :nth-child(4){animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .page > *,.soon .ch{animation:none;opacity:1;transform:none;filter:none}
  .soon::after{animation:none;transform:translateX(-50%)}
}

/* ===== Mobile ===== */
@media (max-width:600px){
  body{font-size:16px}
  .page{padding:48px 16px 48px;gap:28px}
  .brand-mark{width:104px}
  .brand-name{font-size:44px}
  .intro .lead{font-size:22px}
  .motto{font-size:30px}
  .soon{letter-spacing:.12em}
  .soon-line{margin-right:-.12em}
}