@font-face{font-family:Montserrat;src:url('/assets/montserrat-italic.ttf') format('truetype');font-style:italic;font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#111}
body{color:white;font-family:Montserrat,sans-serif;font-weight:700;font-style:italic;overflow-x:hidden}
.background{position:fixed;inset:0;pointer-events:none;background:#111}
.background canvas{width:100%;height:100%;opacity:.1}
main{min-height:100svh;position:relative;display:grid;place-items:center;padding:0 20px 32px}
.landing{text-align:center;transform:translateY(12px)}
h1{font-size:clamp(80px,6.666667vw,128px);line-height: normal;letter-spacing:0;margin:0 auto 5px;width:max-content}
p{font-size:clamp(15px,1.25vw,24px);line-height: normal;margin:0;white-space:nowrap}
.gradient-text{position:relative;color:#ff4c4c}
.gradient-text canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gradient-text.rendered{color:transparent}
.visit{text-decoration:none;display:inline-block}
.visit:hover{filter:brightness(1.18)}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:5px 5px max(5px,env(safe-area-inset-bottom))}
nav a{display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:transform .2s}
nav a:hover{transform:translateY(-3px)}
.icon{display:block;width:24px;height:24px;background:linear-gradient(110deg,#ff9e9e,#ff7878,#f00);background-size:300% 300%;animation:gradient-move 8s ease-in-out infinite;mask:var(--icon) center / 24px 24px no-repeat;-webkit-mask:var(--icon) center / 24px 24px no-repeat}
.icon canvas{width:24px;height:24px}
a:focus-visible{outline:2px solid #ff9e9e;outline-offset:6px;border-radius:2px}
body.no-webgpu .gradient-text{background:linear-gradient(110deg,#ff9e9e,#ff7878,#f00);background-size:300% 300%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:gradient-move 8s ease-in-out infinite}
body.no-webgpu .background{background:linear-gradient(125deg,#2a1a1a,#291313,#211b1b);background-size:300% 300%;animation:gradient-move 12s ease-in-out infinite}
@keyframes gradient-move{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:600px){main{padding-bottom:40px}.landing{transform:none}nav{gap:14px;padding-bottom:max(14px,env(safe-area-inset-bottom))}nav a{width:32px;height:32px}}

@view-transition {
  navigation: auto;
}

main {
  view-transition-name: page-content;
}

.background {
  view-transition-name: page-background;
}

nav {
  view-transition-name: social-links;
}

::view-transition-group(*) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

::view-transition-old(page-content) {
  animation: page-out 180ms ease-out both;
}

::view-transition-new(page-content) {
  animation: page-in 340ms cubic-bezier(.2, .8, .2, 1) both;
}

::view-transition-group(social-links),
::view-transition-old(social-links),
::view-transition-new(social-links) {
  animation: none;
}

::view-transition-old(social-links) {
  display: none;
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-12px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@supports not (view-transition-name: page-content) {
  main { animation: page-in 340ms ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}