@property --delay{syntax: "<time>"; initial-value: 0s; inherits: true;}html{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}:root{--letter-gap: .2em;--col1-start: 130%;--col2-start: 210%;--col3-start: 170%;--col-end: -412%;--grid-start: 100%;--settle-end: -20%;--gallery-delay: .25s;--hero-delay: 1s}body{overflow:clip;touch-action:none;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}&.scroll-unlocked{overflow:auto;touch-action:auto}}#preloader{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:999;display:flex;flex-direction:column;flex:1;background:var(--background-dark);overflow:clip;pointer-events:none;cursor:default;transform:translateZ(0);transition:transform .8s ease-in;will-change:transform;backface-visibility:hidden;isolation:isolate;contain:strict;&.closed{transform:translate3d(0,-100%,0)}.inner{display:flex;flex-direction:column;flex:1;color:var(--foreground-dark);padding:var(--gutter)}.letters-and-counter{display:flex;flex-direction:column;flex:1;justify-content:space-between}.letters{display:flex;justify-content:center;gap:0;@media(width>767px){gap:var(--letter-gap)}}.letter-slot{position:relative;display:flex;justify-content:center;overflow:clip;&.space{width:.3em}.letter-char{line-height:1;font-size:var(--text-2xl);font-weight:700;white-space:pre;&:last-child{position:absolute;top:0;transform:translateY(calc(100% + var(--letter-gap)))}@media(width>767px){font-size:var(--text-5xl)}}}&.playing .letter-slot .letter-char{&:first-child{animation:anim1Double 1s var(--delay) ease-in-out forwards}&:last-child{animation:anim2Double 1s var(--delay) ease-in-out forwards}}@supports (width: sibling-count()){.letter-slot{--delay: calc(.2s + sibling-index()*.06s) }}.counter{text-align:center;font-size:var(--text-2xl)}}@keyframes anim1Double{to{transform:translateY(calc(-100% - var(--letter-gap)))}}@keyframes anim2Double{0%{transform:translateY(calc(100% + var(--letter-gap)))}to{transform:translateY(0)}}#gallery{position:relative;height:100vh;width:100%;overflow:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}.content{position:relative;width:var(--site-container);margin-inline:auto;padding:4px}}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-xxs);padding-top:var(--header-height)}.ghost-grid{position:absolute;inset-inline:0;pointer-events:none;.card figure{transform:none!important}.card{&:nth-child(3n+1){transform:translateY(var(--col1-start))}&:nth-child(3n+2){transform:translateY(var(--col2-start))}&:nth-child(3n+3){transform:translateY(var(--col3-start))}}&.animate .card{&:nth-child(3n+1){animation:slideCol1 3s var(--gallery-delay) forwards}&:nth-child(3n+2){animation:slideCol2 3s var(--gallery-delay) forwards}&:nth-child(3n+3){animation:slideCol3 3s var(--gallery-delay) forwards}}&.settle{animation:ghostSettle 3s var(--gallery-delay) forwards}}.main-content{transform:translateY(100%);&.animate{animation:gridEntrance 3s var(--gallery-delay) forwards}}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px var(--gutter) 48px;padding-block-start:20vh;max-width:1400px;margin-inline:auto;gap:24px;text-wrap:balance;opacity:0;transform:translateY(50%);filter:blur(15px);&.animate{animation:heroRevealLine 3s var(--ease-out) var(--hero-delay) forwards}h1{font-family:var(--font-display);font-size:var(--text-6xl);letter-spacing:var(--tracking-tight);line-height:var(--leading-tighter);text-align:center;@media(width>767px){font-size:var(--text-9xl)}}p{font-family:var(--font-sans);font-size:var(--text-xl);line-height:var(--leading-normal);text-wrap:balance;color:light-dark(var(--foreground-dim-light),var(--foreground-dim-dark));text-align:center;font-weight:400}.hero-buttons{display:flex;gap:1rem;margin-block-start:1rem}}@keyframes heroRevealLine{to{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes gridEntrance{0%{transform:translateY(var(--grid-start))}to{transform:translateY(0)}}@keyframes slideCol1{0%{transform:translateY(var(--col1-start))}to{transform:translateY(var(--col-end))}}@keyframes slideCol2{0%{transform:translateY(var(--col2-start))}to{transform:translateY(var(--col-end))}}@keyframes slideCol3{0%{transform:translateY(var(--col3-start))}to{transform:translateY(var(--col-end))}}@keyframes ghostSettle{0%{transform:translateY(0)}to{transform:translateY(var(--settle-end))}}#custom-cursor{position:fixed;top:0;left:0;width:48px;height:48px;pointer-events:none;z-index:9999;mix-blend-mode:difference;color:#fff;opacity:0;transform:translate(-50%,-50%) scale(0);transition:opacity .3s ease,transform .3s ease;will-change:transform;&.active{opacity:1;transform:translate(-50%,-50%) scale(1)}svg{width:100%;height:100%;display:block;animation:cursor-spark-spin 3s linear infinite}}@keyframes cursor-spark-spin{to{transform:rotate(360deg)}}.card{will-change:transform;position:relative;cursor:pointer;overflow:clip;aspect-ratio:3 / 4;figure{height:100%;width:100%;display:flex;isolation:isolate;transform:scale(1.05);will-change:transform;transition:transform .5s ease;img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease,filter .3s ease}}&:hover,&:focus-visible{z-index:6;figure img{filter:grayscale(0)}}}#real-grid:has(.card:hover,.card:focus-visible) .card:not(:hover):not(:focus-visible){@media(min-width:768px){figure img{filter:grayscale(1)}}figure{transform:scale(1)}}@media(max-width:1920px){:root{--col-end: -415%}}@media(max-width:1600px){:root{--col-end: -419%}}@media(max-width:1440px){:root{--col-end: -420%}}@media(max-width:1280px){:root{--col-end: -420%}}@media(max-width:1024px){#preloader .counter{font-size:48px}}@media(max-width:767px){:root{--col1-start: 220%;--col2-start: 300%;--col3-start: 260%;--col-end: -625%;--grid-start: 85%;--gutter: 16px;--header-height: 56px;--letter-gap: 8px}.grid{grid-template-columns:repeat(2,1fr)}.ghost-grid{.card{&:nth-child(3n+1),&:nth-child(3n+2),&:nth-child(3n+3){transform:unset}&:nth-child(odd){transform:translateY(var(--col1-start))}&:nth-child(2n){transform:translateY(var(--col2-start))}}&.animate .card{&:nth-child(3n+1),&:nth-child(3n+2),&:nth-child(3n+3){animation:unset}&:nth-child(odd){animation:slideCol1 3s var(--gallery-delay) forwards}&:nth-child(2n){animation:slideCol2 3s var(--gallery-delay) forwards}}}#preloader .counter{font-size:24px}}@media(max-width:480px){:root{--col-end: -631%}#preloader .counter{font-size:16px}}@media(prefers-reduced-motion:reduce){.card figure,.card figure img{transition:none}.card figure{transform:none}#real-grid:has(.card:hover,.card:focus-visible) .card:not(:hover):not(:focus-visible) figure{transform:none}#real-grid:has(.card:hover,.card:focus-visible) .card:not(:hover):not(:focus-visible) figure img{filter:none}}