header { position: relative; }

.logo .shape { width: calc(44rem * .18); height: calc(68rem * .18); background-image: url(../media/logo-shape.png); background-size: contain; background-position: center; background-repeat: no-repeat; }
.logo .text { width: 33rem; height: 12rem; background-image: url(../media/logo-text.png); background-size: contain; background-position: center; background-repeat: no-repeat; }
.mobile .logo .text { width: calc(33rem * 1.5); height: calc(12rem * 1.5); }


/* animate logo */

@keyframes logo-animation {
    68% { transform: translateX(-50%); opacity: .7; }
    88% { transform: translateX(-50%) translateY(calc((-50svh + 50rem - 100rem) * .41 - 50svh + 50rem)) scale(0.18,0.18); height: calc(50svh - 50rem + 100rem); opacity: .7; }
    100% {transform: translateX(calc(-50% - 18rem)) translateY(calc(-100rem * .41 - 100svh + 100rem)) scale(0.18,0.18); height: 100rem; opacity: 0; }
}
@keyframes logo-shape {
    68% { transform: translateX(-50%); }
    88% { transform: translateX(-50%) translateY(-41rem) scale(0.18,0.18); height: 68rem; opacity: 0; }
    100% { transform: translateX(calc(-50% - 18rem)) translateY(-41rem) scale(0.18,0.18); height: 68rem; opacity: .7; }
}
@keyframes logo-text {
    0% { }
    88% { max-width: 0; opacity: 0; }
    100% { max-width: 33rem; opacity: .7; }
}
.scroll #hero .logo { opacity: 0; transition: opacity .8s ease; }
#hero .logo { width: 100%; height: 12rem; overflow-x: hidden; transition: opacity .8s .4s ease; }
#hero .logo .animation { position: fixed; z-index: 11; bottom: 0; left: 50%; width: 100%; object-fit: contain; transform: translateX(-50%); height: calc(50svh - 50rem + 100rem); opacity: 0; }
body:not(.animate) #hero .logo .animation { animation: logo-animation 0s forwards; }
.loaded .animate #hero .logo .animation { animation: logo-animation 4s ease-in-out forwards; }
.mobile #hero .logo .animation { object-fit: cover; }
#hero .logo .shape { position: absolute; z-index: 12; top: 16rem; left: 50%; width: 44rem; transform: translateX(-50%); height: calc(50svh - 50rem + 68rem); opacity: 0; }
body:not(.animate) #hero .logo .shape { animation: logo-shape 0s forwards; }
.loaded .animate #hero .logo .shape { animation: logo-shape 4s ease-in-out forwards; }
#hero .logo .text { position: absolute; z-index: 12; top: 3.2rem; left: 50%; background-size: 33rem 12rem; transform: translateX(calc(-50% + 4rem)); max-width: 0; opacity: 0; }
body:not(.animate) #hero .logo .text { animation: logo-text 0s forwards; }
.loaded .animate #hero .logo .text { animation: logo-text 4s ease-in-out forwards; }
.mobile #hero .logo .text { top: 0; }


/* hero background */

@keyframes background-static {
    82% { opacity: 0; }
    100% { opacity: .7; }
}
@keyframes background-video {
    20% { opacity: .7; }
    85% { opacity: .7; }
    97% { opacity: 0; }
    100% { opacity: 0; }
}
#hero .background { position: relative; height: calc(60svh - 12rem); min-height: 250px; width: 100%; }
.animate #hero .background { height: calc(100svh - 12rem); }
@media (max-width: 767px) {
    .animate #hero .background { height: 60rem; }
}
#hero .background .static img { position: absolute; z-index: -3; top: 0; left: 0; height: 100%; width: 100%; object-position: bottom; object-fit: cover; }
#hero .background .static { opacity: 0; }
body:not(.animate) #hero .background .static { animation: background-static 0s 0s forwards; }
.loaded .animate #hero .background .static { animation: background-static 12.5s 3.5s ease-in-out forwards; }
#hero .background .video { position: absolute; z-index: -2; top: 0; left: 0; height: 100%; width: 100%;  object-fit: cover; object-position: bottom; opacity: 0; }
.loaded .animate #hero .background .video { animation: background-video 12.5s 3.5s ease-in-out forwards; }
#hero .background .overlay { position: absolute; z-index: 0; top: -2px; left: 0; height: 100%; width: 100%; background: linear-gradient(rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 100%); }


/* sticky header */

@keyframes header-sticky {
    100% { opacity: 1; }
}
#sticky { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; padding-right: 4rem; text-align: center; text-align-last: center;background-color: rgba(255,255,255,0); transition: all .8s ease; opacity: 0; }
body:not(.animate) #sticky { animation: header-sticky 0s 0s forwards; }
.loaded .animate #sticky { animation: header-sticky .7s 3.5s ease-in-out forwards; }
#sticky .logo, #sticky .logo * { display: inline-block; vertical-align: middle; }
#sticky .logo * { margin: 3.1rem -0.5rem 3.1rem 1.85rem; opacity: 0; transition: all .8s ease; }
.scroll #sticky { background-color: rgba(255,255,255,0.7); }
.scroll #sticky .logo * { margin: calc(3.1rem * .25) calc(-0.5rem * .66) calc(3.1rem * .25) calc(1.85rem * .66); opacity: 1; }
.scroll #sticky .logo .shape { width: calc(44rem * .18 * .5); height: calc(68rem * .18 * .5); margin-left: -1rem; }
.scroll #sticky .logo .text { width: calc(33rem * .66); height: calc(12rem * .66); }
.mobile.scroll #sticky .logo .shape { width: calc(44rem * .18 * .66); height: calc(68rem * .18 * .66); margin: calc(3.1rem * .125) calc(-0.5rem * .66) calc(3.1rem * .125) calc(1.85rem * .66); }
.mobile #sticky .logo .text { width: calc(33rem * 1.5 * .66); height: calc(12rem * 1.5 * .66); }


/* menu & shortcuts */

#sticky .carticon .card-header { display: none; }
#sticky > *:not(.logo) { position: absolute; top: 24px; line-height: .66em; transition: all 1s ease; }
.scroll #sticky > *:not(.logo) { top: 50%; transform: translateY(calc(-50% - 2px)); }
#sticky > *:first-child { left: 24px; }
#sticky > *:last-child { right: 24px; }
.mobile #sticky > *:not(.logo) { top: 50%; transform: translateY(-50%); } 
.mobile:not(.scroll) #sticky > *:first-child { left: 28px; }
.burger .line { height: 1.5px; width: 20px; margin: 5px 0; background-color: #bf919b; }

.shortcuts > * { display: inline-block; margin-left: 1.5rem; position: relative; }
.shortcuts .carticon::before { content: "shopping_basket"; display: block; height: 36px; width: 36px; font-size: 36px; transform: translateY(1px); font-family: 'Material Symbols Rounded';  }
.shortcuts .carticon i { display: none; }
.shortcuts .cart-item-count { font-size: .6em; font-weight: 600; display: block; position: absolute; right: 0; bottom: 1em; width: 1.5em; height: 1.5em; line-height: 1.5em; border-radius: .75em; text-align: center; background-color: #bf919b; color: #fff; }
@media (max-width: 767px) {
    .shortcuts > * { position: unset; }
    .shortcuts .carticon::before { display: none; }
    .shortcuts .cart-item-count { right: calc(100vw - 64px - 1.5em); bottom: 0; }
}


/* claim */

@keyframes claim-letter {
  0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0% { opacity: 0; transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0); }
  75% { opacity: 1; transform: translate3d(0, -10px, 0); }
  90% { opacity: 1; transform: translate3d(0, 5px, 0); }
  100% { opacity: 1; transform: none; }
}
.claim { position: absolute; bottom: 10rem; left: 50%; transform: translateX(-50%); font-size: calc(.5em + 1.5rem); }
.claim h1, .claim h2, .claim h3, .claim h4, .claim h5, .claim h6, .claim pre, .claim .d-block { padding: .3em 0 0; }
.claim-letter { opacity: 0; }
.animated.loaded .claim-letter { animation: claim-letter 2s; animation-fill-mode: forwards; }

header { color: #bf919b; }
header .icon { font-size: 36px; }
.mobile header .icon { font-size: 32px; }

.fadein { opacity: 0 !important; transition: all 2s ease; }
.animated .fadein { opacity: 1 !important; }