@font-face{
  font-family:"Gate";
  src:url("/fonts/ti/Gate-Regular.woff2") format("woff2"),
      url("/fonts/ti/Gate-Regular.woff") format("woff");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#fff4ff;
  --fg:#3d0052;
  --font-stack: "Gate", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
html,body{
  height:100%;
  margin:0;
}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-stack);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  text-align:center;
  padding:1.5rem;
  box-sizing:border-box;
}
main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  max-width:900px;
  margin:0 auto;
}
.logo{
  width:clamp(320px,50vw,640px);
}
footer{
  flex-shrink:0;
  padding-top:1.5rem;
}
p{
  margin:0;
  opacity:0.9;
  font-size:clamp(1rem,2.2vw,1.25rem);
}
.vat{
  margin-top:.5rem;
  font-size:clamp(.75rem,1.4vw,.9rem);
  opacity:0.7;
}
a{ color:var(--fg); text-decoration:none; }
.cover{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--bg);
  pointer-events:none;
  animation:cover-fade .8s ease-in 2.2s forwards;
}
.spark-icon{
  position:fixed;
  top:50%;
  left:50%;
  width:300vmax;
  height:300vmax;
  z-index:10000;
  background:var(--fg);
  pointer-events:none;
  -webkit-mask-image:url(/img/ti/spark.svg);
  mask-image:url(/img/ti/spark.svg);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:400vmax 400vmax;
  mask-size:400vmax 400vmax;
  transform:translate(-50%,-50%);
  animation:
    spark-zoom-out 1.2s ease-in forwards,
    spark-zoom-in 1s ease-in 1.6s forwards;
}
@media (prefers-reduced-motion: reduce){
  .cover, .spark-icon{ display:none; }
}
@keyframes spark-zoom-out{
  0%{
    -webkit-mask-size:400vmax 400vmax;
    mask-size:400vmax 400vmax;
    transform:translate(-50%,-50%) rotate(0deg);
    opacity:1;
  }
  100%{
    -webkit-mask-size:130px 130px;
    mask-size:130px 130px;
    transform:translate(-50%,-50%) rotate(180deg);
    opacity:1;
  }
}
@keyframes spark-zoom-in{
  0%{
    -webkit-mask-size:130px 130px;
    mask-size:130px 130px;
    transform:translate(-50%,-50%) rotate(0deg);
    opacity:1;
  }
  100%{
    -webkit-mask-size:400vmax 400vmax;
    mask-size:400vmax 400vmax;
    transform:translate(-50%,-50%) rotate(180deg);
    opacity:0;
  }
}
@keyframes cover-fade{
  0%{ opacity:1; }
  100%{ opacity:0; }
}