@property --delay{syntax: "<time>"; initial-value: 0s; inherits: true;}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}:root{--letter-gap: .2em;--scale-x: 1.02;--scale-y: 1.025;--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;padding:48px var(--gutter);color:var(--foreground-dark)}.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;overflow:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}.content{position:relative}}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-top:var(--header-height)}.ghost-grid{position:absolute;top:0;left:var(--gutter);width:calc(100% - var(--gutter) * 2);pointer-events:none;row-gap:calc(var(--gap) * 1.75);.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{padding-inline:var(--gutter);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(8px);&.animate{animation:heroRevealLine 2.75s 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-2xl);line-height:var(--leading-snug);color:light-dark(var(--foreground-dim-light),var(--foreground-dim-dark));text-align:center;font-weight:400}}@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))}}.card{will-change:transform;position:relative;a{display:block;position:relative;overflow:clip;text-decoration:none;color:inherit;&:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:40%;pointer-events:none;opacity:0;will-change:opacity;z-index:1;transition:opacity .3s var(--ease-smooth);background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 100%)}}figure{display:flex;isolation:isolate;transform:scaleY(var(--scale-y)) scaleX(var(--scale-x));will-change:transform;transition:transform .5s ease;img{width:100%;aspect-ratio:3 / 4;object-fit:cover;display:block;transition:filter .5s ease}}.info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:40px;pointer-events:none;z-index:2;color:var(--foreground-dark);gap:.5rem;.title-mask{overflow:clip}.title{position:relative;transform:translateY(100%);will-change:transform;z-index:3;transition:transform .5s var(--ease-out);font-family:var(--font-serif);font-weight:500;font-size:var(--text-3xl);text-align:center}.location{position:relative;opacity:0;will-change:opacity;z-index:3;transition:opacity .5s var(--ease-out);font-size:var(--text-lg);text-align:center}}&:hover,&:has(a:focus-visible){z-index:6;a:before{opacity:1}figure img{filter:grayscale(0)}.info .title{transform:translateY(0)}.info .location{opacity:1}}}.grid:has(.card:hover,.card a:focus-visible) .card:not(:hover):not(:has(a:focus-visible)){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{--gap: 20px;--col-end: -420%}}@media(max-width:1280px){:root{--col-end: -420%}}@media(max-width:1024px){:root{--gap: 8px;--col-end: -419%;--scale-x: 1;--scale-y: 1;--gutter: 24px;--header-height: 76px}.card .info .title{font-size:32px}.card .info .location{font-size:18px}#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}}}.card .info{padding:16px;gap:4px;.title{font-size:20px}.location{font-size:14px}}#preloader .counter{font-size:24px}}@media(max-width:480px){:root{--col-end: -631%}#preloader .counter,.card .info .title{font-size:16px}.card .info .location{font-size:14px}}@media(prefers-reduced-motion:reduce){.card a:before,.card figure,.card figure img,.card .info .title,.card .info .location{transition:none}.card figure{transform:none}.card .info .title{transform:none}.card .info .location{opacity:1}.card a:before{opacity:1}.grid:has(.card:hover,.card a:focus-visible) .card:not(:hover):not(:has(a:focus-visible)) figure{transform:none}.grid:has(.card:hover,.card a:focus-visible) .card:not(:hover):not(:has(a:focus-visible)) figure img{filter:none}}
