:root {
  --bg: #12102a;
  --sf: #1d1a3f;
  --tx: #f1eefc;
  --mu: #9c97c4;
  --a: #ff5d8f;
  --b: #5de4ff;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

html {
  scroll-padding-top:env(safe-area-inset-top,0px);
  scroll-behavior:smooth;
}

*,*::before,*::after {
  box-sizing:inherit;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  overflow-x:hidden;
}

a {
  color:inherit;
  text-decoration:none;
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--b);
  outline-offset:3px;
}

html.has-cursor,
html.has-cursor * {
  cursor:none !important;
}

#c-dot {
  position:fixed;
  left:0;
  top:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1.5px rgba(18,16,42,.55);
  pointer-events:none;
  z-index:100;
  opacity:0;
  will-change:transform;
  transition:opacity .25s ease,width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),
             background-color .3s ease,box-shadow .3s ease;
}

#c-dot.on {
  opacity:1;
}

#c-dot.hover {
  width:46px;
  height:46px;
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 1.5px #fff;
}

#c-dot.down {
  width:5px;
  height:5px;
}

#c-dot.hover.down {
  width:34px;
  height:34px;
}

main,header,footer {
  position:relative;
  z-index:1;
}

.hero {
  min-height:92vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6vh 6vw;
}

.hero h1 {
  margin:0;
  font-weight:800;
  font-size:clamp(4rem,19vw,16rem);
  line-height:.9;
  letter-spacing:-.04em;
  display:flex;
  flex-wrap:wrap;
  position:relative;
}

.hero h1 span {
  display:inline-block;
  position:relative;
  color:rgba(241,238,252,.04);
  -webkit-text-stroke:1.5px rgba(156,151,196,.5);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
  animation:rise 1s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i,0) * 80ms);
}

.hero h1 span::after {
  content:attr(data-c);
  position:absolute;
  inset:-.2em -.1em;
  padding:.2em .1em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:0;
  pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='420'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004%200.7'%20numOctaves='3'%20seed='7'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%201.5%200%200%200%20-.55'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='720'%20height='420'%3E%3Cfilter%20id='n'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.003%200.9'%20numOctaves='3'%20seed='21'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201.6%200%200%200%20-.75'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%),
    linear-gradient(115deg,#ff5d8f 0%,#c9a4ff 50%,#5de4ff 100%);
  background-size:720px 420px,720px 420px,var(--hw,100%) 100%,var(--hw,100%) 100%;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-position:calc(.1em - var(--lx,0px)) 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-mask-image:radial-gradient(circle var(--r,0.01px) at calc(var(--mx,-999px) + .1em) calc(var(--my,-999px) + .2em),#000 0%,#000 45%,transparent 100%);
  mask-image:radial-gradient(circle var(--r,0.01px) at calc(var(--mx,-999px) + .1em) calc(var(--my,-999px) + .2em),#000 0%,#000 45%,transparent 100%);
}

@keyframes rise {
  from {
    opacity:0;
    translate:0 .35em;
  }
}

.rv {
  opacity:0;
  translate:0 56px;
  scale:.96;
  transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--d,0s);
}

.rv.in {
  opacity:1;
  translate:none;
  scale:none;
}

.hero p {
  max-width:34ch;
  font-size:clamp(1.1rem,2.2vw,1.6rem);
  font-weight:300;
  color:var(--mu);
  margin:2rem 0 0;
}

.hero p b {
  color:var(--tx);
  font-weight:500;
}

.mq {
  overflow:hidden;
  border-block:1px solid #ffffff1f;
  padding:.6rem 0;
  display:grid;
  gap:.4rem;
}

.mq .row {
  white-space:nowrap;
  display:flex;
  width:max-content;
  animation:mq 24s linear infinite;
}

.mq:hover .row {
  animation-play-state:paused;
}

.mq a {
  font-size:clamp(1.6rem,4vw,3rem);
  font-weight:800;
  color:transparent;
  -webkit-text-stroke: 1px var(--mu);
  padding:0 1.4rem;
  position:relative;
  transition:color .2s,-webkit-text-stroke-color .2s;
}

.mq a::after {
  content:"✦";
  position:absolute;
  right:-.4rem;
  color:var(--a);
  -webkit-text-stroke: 0;
  font-size:.6em;
  top:.35em;
}

.mq a:hover,.mq a:focus-visible {
  color:var(--a);
  -webkit-text-stroke-color: var(--a);
}

@keyframes mq {
  to {
    transform:translateX(-50%);
  }
}

.work {
  padding:12vh 6vw 6vh;
}

.work h2,.contact h2 {
  font-size:clamp(2rem,5vw,3.6rem);
  margin:0 0 .4rem;
  letter-spacing:-.02em;
}

.work>p {
  color:var(--mu);
  margin:0 0 4rem;
  max-width:50ch;
}

.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:3.5rem 2.5rem;
}

.card {
  display:block;
  perspective:1000px;
}

.tilt {
  position:relative;
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
  border-radius:18px;
  background:var(--sf);
  padding:12px;
  box-shadow:0 30px 60px -30px #000c;
}

.bar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 6px 10px;
}

.bar i {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffffff33;
}

.bar em {
  margin-left:10px;
  flex:1;
  font-style:normal;
  font-size:.8rem;
  color:var(--mu);
  background:#0000004d;
  border-radius:20px;
  padding:4px 12px;
}

.view {
  aspect-ratio: 16 / 10;
  overflow:hidden;
  border-radius:10px;
  position:relative;
  background: #0d0b1f;
}

.pg {
  transition:transform 4.5s cubic-bezier(.45,.05,.2,1);
  will-change:transform;
}

.card:hover .pg {
  transform: translateY(calc(var(--dist, 0) * -1px));
}

.pg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top;
}

.pg .nv {
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background:hsl(var(--h) 40% 12%);
}

.pg .nv b {
  width:46px;
  height:8px;
  border-radius:4px;
  background:hsl(var(--h) 90% 65%);
}

.pg .nv u {
  width:90px;
  height:6px;
  border-radius:3px;
  background:#ffffff44;
}

.pg .hr {
  height:190px;
  padding:28px 20px;
  background:linear-gradient(135deg,hsl(var(--h) 80% 55%),hsl(calc(var(--h) + 50) 80% 35%));
  color:#fff;
  position:relative;
  overflow:hidden;
}

.pg .hr strong {
  display:block;
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:-.03em;
  position:relative;
}

.pg .hr s {
  display:block;
  height:7px;
  width:60%;
  margin-top:12px;
  border-radius:4px;
  background:#ffffff77;
  text-decoration:none;
  position:relative;
}

.pg .hr s+s {
  width:42%;
}

.pg .hr::after {
  content:"";
  position:absolute;
  right:-40px;
  top:-30px;
  width:200px;
  height:200px;
  border-radius:50%;
  background:#ffffff22;
  animation:fl 6s ease-in-out infinite alternate;
}

@keyframes fl {
  to {
    transform:translate(-30px,40px) scale(1.2);
  }
}

.pg .cs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:18px;
  background:hsl(var(--h) 30% 96%);
}

.pg .cs div {
  height:90px;
  border-radius:8px;
  background:#fff;
  border-top:5px solid hsl(var(--h) 80% 60%);
  box-shadow:0 2px 8px #0001;
}

.pg .tx {
  padding:22px;
  background:#fff;
}

.pg .tx i {
  display:block;
  height:8px;
  border-radius:4px;
  background:#e4e2ee;
  margin-bottom:10px;
}

.pg .tx i:nth-child(2) {
  width:80%;
}

.pg .tx i:nth-child(3) {
  width:55%;
}

.pg .ft {
  height:80px;
  background:hsl(var(--h) 40% 12%);
}

.glare {
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),#ffffff2e,transparent 55%);
  opacity:0;
  transition:opacity .2s;
}

.card:hover .glare {
  opacity:1;
}

.meta {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:1.1rem;
  gap:1rem;
}

.meta h3 {
  margin:0;
  font-size:1.7rem;
  letter-spacing:-.02em;
}

.meta span {
  color:var(--mu);
  font-size:.95rem;
}

.meta .go {
  color:var(--b);
  font-weight:500;
  white-space:nowrap;
}

.contact {
  margin:10vh 6vw 0;
  padding:clamp(2rem,6vw,5rem);
  border-radius:28px;
  background:linear-gradient(120deg,var(--a),#7a5cff);
  position:relative;
  overflow:hidden;
}

.contact p {
  max-width:40ch;
  font-size:1.2rem;
  margin:0 0 2rem;
}

.dc {
  font:inherit;
  font-size:clamp(1.6rem,5vw,3.2rem);
  font-weight:800;
  color:#12102a;
  background:#fff;
  border:0;
  border-radius:999px;
  padding:.6em 1.2em;
  cursor:pointer;
  transition:transform .1s;
  will-change:transform;
}

.dc:active {
  scale:.97;
}

.dc small {
  display:block;
  font-size:.8rem;
  font-weight:500;
  opacity:.6;
  margin-top:2px;
}

.ring {
  position:absolute;
  right:-80px;
  bottom:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  border:2px dashed #ffffff66;
  animation:sp 30s linear infinite;
}

@keyframes sp {
  to {
    transform:rotate(360deg);
  }
}

footer {
  padding:4rem 6vw 3rem;
  color:var(--mu);
  font-size:.9rem;
}

#toast {
  position:fixed;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,120px);
  background:#fff;
  color:#12102a;
  padding:.8rem 1.4rem;
  border-radius:999px;
  font-weight:500;
  transition:transform .35s cubic-bezier(.2,1.4,.4,1);
  z-index:9;
}

#toast.on {
  transform:translate(-50%,0);
}

@media (hover:none),(pointer:coarse) {
  #c-dot {
    display:none;
  }

  .hero h1 span::after {
    -webkit-mask-image:none;
    mask-image:none;
  }
}

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