@property --scroll-progress {
	inherits: true;
	initial-value: 0;
	syntax: "<number>";
}

@property --layer-index {
	syntax: "<integer>";
	inherits: true;
	initial-value: 1;
}

@property --layer-count {
	syntax: "<integer>";
	inherits: true;
	initial-value: 1;
}

@property --divider-index {
	syntax: "<integer>";
	inherits: true;
	initial-value: 1;
}

@property --divider-count {
	syntax: "<integer>";
	inherits: true;
	initial-value: 1;
}

@layer reset,
base,
typography,
layout,
comparator,
navigation,
links;

@layer reset {
	*,
	*::after,
	*::before {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	html {
		color-scheme: light dark;
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		text-size-adjust: 100%;
		overflow-y: scroll;
	}
}

@layer base {
	:root {
		--color-light: #fafafa;
		--color-dark: #1f1408;
		--color-light-lighter: color-mix(in oklch, var(--color-light), #fff 10%);
		--color-light-darker: color-mix(in oklch, var(--color-light), #000 10%);
		--color-dark-lighter: color-mix(in oklch, var(--color-dark), #fff 10%);
		--color-dark-darker: color-mix(in oklch, var(--color-dark), #000 10%);
		--color-bg: var(--color-light);
		--color-bg-alt: var(--color-light-darker);
		--color-text: var(--color-dark);
		--color-text-muted: var(--color-dark-lighter);
		--color-accent: color-mix(in oklch, var(--color-dark), #fff 60%);

		--support-message-bg: var(--color-dark-darker);
		--support-message-text: var(--color-light-lighter);

		--space-md: 1rem;
		--space-lg: 1.5rem;
		--space-xl: 2rem;
		--space-xxl: 3rem;
		--line-tight: 1.2;
		--line-base: 1.5;
		--line-loose: 1.75;

		--comparator-duration: 200vh;
		--comparator-offset: 0vh;
		--comparator-max-width: 100vw;
		--comparator-max-height: 100vh;
		--comparator-aspect-ratio: 4/3;

		accent-color: var(--color-accent);
	}

	@media (max-width: 48em) {
		:root {
			--comparator-aspect-ratio: 3/4;
		}
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--color-bg: var(--color-dark);
			--color-bg-alt: var(--color-dark-lighter);
			--color-text: var(--color-light);
			--color-text-muted: var(--color-light-darker);
			--color-accent: color-mix(in oklch, var(--color-dark), #fff 75%);
			--support-message-bg: var(--color-light-darker);
			--support-message-text: var(--color-dark-lighter);
		}
	}

	::selection {
		background: var(--color-accent);
		color: var(--color-bg);
	}
}

@layer layout {
	.scroll-section {
		block-size: 300vh;
		position: relative;
	}
}

@layer comparator {
	.comparator-container {
		align-items: center;
		block-size: 100vh;
		display: flex;
		inset-block-start: 0;
		justify-content: center;
		overflow: hidden;
		position: sticky;
	}

	.comparator-wrapper {
		animation-range: 200vh;
		animation-timeline: scroll(root);
		aspect-ratio: var(--comparator-aspect-ratio);
		inline-size: 100%;
		max-block-size: var(--comparator-max-height);
		max-inline-size: var(--comparator-max-width);
		overflow: hidden;
		position: relative;
	}

	.comparator {
		animation: progress-calc linear both;
		animation-range: var(--comparator-offset)
			calc(var(--comparator-offset) + var(--comparator-duration));
		animation-timeline: scroll(root);
		block-size: 100%;
		display: grid;
		inline-size: 100%;
		position: relative;
	}

	.image-layers,
	.divider-lines {
		grid-area: 1 / -1;
		display: grid;
		position: relative;
	}

	.image-layer {
		grid-area: 1 / -1;
		position: relative;
		z-index: calc(sibling-count() - sibling-index() + 1);
        display: flex;
        align-items: center;
        justify-content: center;
	}

	.image-layer:not(:last-child) {
		--layer-index: sibling-index();
		--layer-count: sibling-count();
		--layer-start: calc((var(--layer-index) - 1) / (var(--layer-count) - 1));
		--layer-end: calc(var(--layer-index) / (var(--layer-count) - 1));

		animation: clip-reveal linear both;
		animation-timeline: scroll(root);
		animation-range: calc(
				var(--comparator-offset) + (var(--comparator-duration) * var(--layer-start))
			)
			calc(
				var(--comparator-offset) + (var(--comparator-duration) * var(--layer-end))
			);
	}

	img {
		grid-area: 1 / -1;
		max-block-size: var(--comparator-max-height);
		inline-size: 100%;
		block-size: 100%;
		display: block;
	}

	.image-layer img {
		block-size: 100%;
		display: block;
		inline-size: 100%;
		object-fit: cover;
		object-position: center;
		aspect-ratio: var(--comparator-aspect-ratio);
		background: color-mix(in oklch, var(--color-bg), var(--color-text) 5%);
	}

	.divider-line {
		--divider-index: sibling-index();
		--divider-count: sibling-count();
		--layer-start: calc((var(--divider-index) - 1) / var(--divider-count));
		--layer-end: calc(var(--divider-index) / var(--divider-count));

		background: transparent;
		block-size: 100%;
		border-inline-start: thin solid var(--color-bg);
		box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent), transparent 50%);
		grid-area: 1 / -1;
		inline-size: 1px;
		pointer-events: none;
		position: relative;
		z-index: calc(20 - var(--divider-index));

		animation: divider-move linear both;
		animation-timeline: scroll(root);
		animation-range: calc(
				var(--comparator-offset) + (var(--comparator-duration) * var(--layer-start))
			)
			calc(
				var(--comparator-offset) + (var(--comparator-duration) * var(--layer-end))
			);
	}

	.comparator-overlay {
		block-size: 100%;
		display: flex;
		flex-direction: column;
		grid-area: 1 / -1;
		inline-size: 100%;
		max-block-size: var(--comparator-max-height);
		position: absolute;
		transform: translateZ(30px);
	}

	.image-text {
		position: relative;
		white-space: nowrap;
		z-index: 10;
	}

	@keyframes progress-calc {
		from {
			--scroll-progress: 0;
		}

		to {
			--scroll-progress: 100;
		}
	}

	@keyframes clip-reveal {
		from {
			clip-path: inset(0 0 0 0);
		}

		to {
			clip-path: inset(0 100% 0 0);
		}
	}

	@keyframes divider-move {
		0% {
			inset-inline-start: 100%;
			opacity: 0;
		}

		2% {
			opacity: 1;
		}

		98% {
			opacity: 1;
		}

		100% {
			inset-inline-start: 0%;
			opacity: 0;
		}
	}
}

/*.ai-illustration-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 60px;
    top: 0;
    overflow: hidden;
}

.ai-illustration-wrapper .before {
    background-image: linear-gradient(to right, #dbedfd, #daeefe);
    width: 50%;
    height: 100%;
}

.ai-illustration-wrapper .after {
    background-image: linear-gradient(to right, #a9cdfc, #e8fce3);
    width: 50%;
    height: 100%;
}*/


#ai-illustration-container {
  position: relative;
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-stream {
  position: absolute;
  width: 100vw;
  height: 45vh;
  display: flex;
  align-items: center;
  overflow: visible;
}

.card-line {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-gap: 30px;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  will-change: transform;
}

.card-line:active {
  cursor: grabbing;
}

.card-line.dragging {
  cursor: grabbing;
}

.card-line.css-animated {
  animation: scrollCards 40s linear infinite;
}

@keyframes scrollCards {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }
}

.card-wrapper {
  position: relative;
  width: 30vw;
  height: 45vh;
  flex-shrink: 0;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 30vw;
  height: 45vh;
  overflow: hidden;
}

.card-before {
  background: transparent;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  color: white;
  z-index: 2;
  position: relative;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  filter: brightness(1.1) contrast(1.1);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}

.card-image:hover {
  filter: brightness(1.2) contrast(1.2);
}

.card-after {
  background: transparent;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 30vw;
  height: 45vh;
  overflow: hidden;
}

@keyframes glitch {
	0% {
		opacity: 1;
	}
	15% {
		opacity: 0.9;
	}
	16% {
		opacity: 1;
	}
	49% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
	}
	99% {
		opacity: 0.9;
	}
	100% {
		opacity: 1;
	}
}

.scanner {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 17vh;
	border-radius: 30px;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(255, 255, 255, 0.8),
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.8),
		transparent
	);
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.4);
	animation: scanPulse 2s ease-in-out infinite alternate;
	z-index: 10;
}

@keyframes scanPulse {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scaleY(1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1.1);
  }
}

.scanner-label {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.card-before {
  clip-path: inset(0 0 0 var(--clip-right, 0%));
}

.card-after {
  clip-path: inset(0 calc(100% - var(--clip-left, 0%)) 0 0);
}

.scan-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: scanEffect 0.6s ease-out;
  pointer-events: none;
  z-index: 5;
}

@keyframes scanEffect {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

.instructions {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  max-width: 200px;
  text-align: right;
  z-index: 5;
}

#particleCanvas {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100vw;
  height: 45vh;
  z-index: 0;
  pointer-events: none;
}

#scannerCanvas {
  position: absolute;
  top: 50%;
  left: -3px;
  transform: translateY(-50%);
  z-index: 15;
  pointer-events: none;
}

@media (max-width: 1200px) {
	#particleCanvas, .card-stream {
		height: 45vh;
	}

	.card, .card-wrapper, .card-after {
		width: 35vw;
		height: 45vh;
	}
}

@media (max-width: 992px) {
	#particleCanvas, .card-stream {
		height: 45vh;
	}

	.card, .card-wrapper, .card-after {
		width: 50vw;
		height: 45vh;
	}
}

@media (max-width: 768px) {
	#particleCanvas, .card-stream {
		height: 45vh;
	}

	.card, .card-wrapper, .card-after {
		width: 65vw;
		height: 45vh;
	}
}

@media (max-width: 576px) {
	/*width: 95vw; height: */
	#particleCanvas, .card-stream {
		height: 35vh;
	}

	.card, .card-wrapper, .card-after {
		width: 80vw;
		height: 35vh;
	}
}

/* VIDEO ANIMATION */

#video-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 750px;
	position: relative;
	cursor: none;
	max-width: 100%;
}

#play-button {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 100px;
    width: 120px;
    height: 120px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(255 255 255 / 15%);
    opacity: 1;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 25%);
    backdrop-filter: blur(8px);
    cursor: none;
	display: flex;
    justify-content: center;
    align-items: center;
}

#video {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.play-icon {
	height: 30px;
}

/* CONTACT US PAGE */

.contact-hero-section-bg {
    background-image: url(../images/CONTACT-HERO-image-BG-5.jpg);
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	opacity: 0.5;
}

.primary-bg-gradient {
	background: linear-gradient(158deg, rgba(201, 224, 248, 1) 10%, #eff5ff 60%);
}

.secondary-bg-gradient {
	background: linear-gradient(158deg, #c1efb3 10%, #edf4f5 60%);
}

/* FEATURES PAGE */
:root {
    /* vars */
    --glow-sens: 30;
    --card-bg: linear-gradient(8deg,var(--dark) 75%, color-mix(in hsl, var(--dark), white 2.5%) 75.5%);
    --blend: soft-light;
    --glow-blend: plus-lighter;
    --glow-color: 0deg 0% 100%;
    --glow-boost: 0%;
}

.light .card-icon {
    --card-bg: linear-gradient(8deg,color-mix(in hsl, hsl(260, 25%, 95%), var(--dark) 2.5%) 75%, hsl(260, 25%, 95%) 75.5%);
    --blend: darken;
    --glow-blend: luminosity;
    --glow-color: 210deg 100% 75%;
    --glow-boost: 20%;
    --fg: black; 
    color: var(--fg);
}

.card-icon {
    --pads: 40px;
    --color-sens: calc(var(--glow-sens) + 20);
    --pointer-°: 45deg;
    
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 20px;
    isolation: isolate;
    transform: translate3d(0, 0, 0.01px);
    display: grid;
    border: 1px solid rgb(255 255 255 / 25%);
    background: var(--card-bg);
    background-repeat: no-repeat;
    
    &::before,
    &::after,
    & > .glow {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        transition: opacity 0.25s ease-out;
        z-index: -1;
    }
     
    &:not(:hover):not(.animating) {
        &::before,
        &::after,
        & > .glow {
            opacity: 0;
            transition: opacity 0.75s ease-in-out;
        }
    }
    
    &::before {
        
        /* mesh gradient border */
        
        border: 1px solid transparent;
        
        background:
            linear-gradient(var(--card-bg) 0 100%) padding-box,
            linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
            radial-gradient(at 80% 55%, rgb(163, 232, 255) 0px, transparent 50%) border-box,
            radial-gradient(at 69% 34%, rgb(161, 243, 254) 0px, transparent 50%) border-box,
            radial-gradient(at 8% 6%, rgb(181, 253, 200) 0px, transparent 50%) border-box,
            radial-gradient(at 41% 38%, rgb(136, 231, 255) 0px, transparent 50%) border-box,
            radial-gradient(at 86% 85%, rgb(141, 244, 255) 0px, transparent 50%) border-box,
            radial-gradient(at 82% 18%, rgb(152, 251, 155) 0px, transparent 50%) border-box,
            radial-gradient(at 51% 4%, rgb(154, 187, 255) 0px, transparent 50%) border-box,
            linear-gradient(#99c9ff 0 100%) border-box;
        
        /* opacity increases as pointer gets near edge */
        opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
        
        /* border is masked to a cone, originating from the center towards the pointer */
        mask-image: 
            conic-gradient( 
                from var(--pointer-°) at center, black 25%, transparent 40%, transparent 60%, black 75%
            );
    }
    
    &::after {
        
        /* mesh gradient background */
        
        border: 1px solid transparent;
        
        background:
            radial-gradient(at 80% 55%, rgb(163, 232, 255) 0px, transparent 50%) padding-box,
            radial-gradient(at 69% 34%, rgb(161, 243, 254) 0px, transparent 50%) padding-box,
            radial-gradient(at 8% 6%, rgb(181, 253, 200) 0px, transparent 50%) padding-box,
            radial-gradient(at 41% 38%, rgb(136, 231, 255) 0px, transparent 50%) padding-box,
            radial-gradient(at 86% 85%, rgb(141, 244, 255) 0px, transparent 50%) padding-box,
            radial-gradient(at 82% 18%, rgb(152, 251, 155) 0px, transparent 50%) padding-box,
            radial-gradient(at 51% 4%, rgb(154, 187, 255) 0px, transparent 50%) padding-box,
            linear-gradient(#99c9ff 0 100%) padding-box;
        
        /* 5 radial masks to create a squircle-cut-out, and then a cone-gradient 
            originating from the center towards the pointer to highlight the edges */
        mask-image:
            linear-gradient( to bottom, black, black ),
            radial-gradient( ellipse at 50% 50%, black 40%, transparent 65% ),
            radial-gradient( ellipse at 66% 66%, black 5%, transparent 40% ),
            radial-gradient( ellipse at 33% 33%, black 5%, transparent 40% ),
            radial-gradient( ellipse at 66% 33%, black 5%, transparent 40% ),
            radial-gradient( ellipse at 33% 66%, black 5%, transparent 40% ),
            conic-gradient( from var(--pointer-°) at center, transparent 5%, black 15%, black 85%, transparent 95% );

        mask-composite: subtract,add,add,add,add,add;
        
        /* opacity increases as pointer gets near edge */
        opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
        mix-blend-mode: var(--blend);
        
    }
    
    & > .glow {
        
        /* glowing border edges */
        
        --outset: var(--pads);
        
        /* outer padding so the glow can overflow the element without being masked */
        inset: calc(var(--outset) * -1);
        pointer-events: none;
        z-index: 1;
        
        /* glow is masked to a cone, originating from the center towards the pointer */
        mask-image: 
            conic-gradient( 
                from var(--pointer-°) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
            );
        
        /* opacity increases as pointer gets near edge */
        opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
        mix-blend-mode: var(--glow-blend);
        
        &::before {
            content: "";
            position: absolute;
            inset: var(--outset);
            border-radius: inherit;
            box-shadow: 
                inset 0 0 0 1px #fff, 
                
                inset 0 0 1px 0 hsl( var(--glow-color) / calc(var(--glow-boost) + 60%)), 
                inset 0 0 3px 0 hsl( var(--glow-color) / calc(var(--glow-boost) + 50%)), 
                inset 0 0 6px 0 hsl( var(--glow-color) / calc(var(--glow-boost) + 40%)), 
                inset 0 0 15px 0 hsl( var(--glow-color) / calc(var(--glow-boost) + 30%)), 
                inset 0 0 25px 2px hsl( var(--glow-color) / calc(var(--glow-boost) + 20%)), 
                inset 0 0 50px 2px hsl( var(--glow-color) / calc(var(--glow-boost) + 10%)), 
                
                0 0 1px 0 hsl( var(--glow-color) / calc(var(--glow-boost) + 60%)), 
                0 0 3px 0 hsl( var(--glow-color) / calc(var(--glow-boost) + 50%)), 
                0 0 6px 0 hsl( var(--glow-color) / calc(var(--glow-boost) + 40%)), 
                0 0 15px 0 hsl( var(--glow-color) / calc(var(--glow-boost) + 30%)), 
                0 0 25px 2px hsl( var(--glow-color) / calc(var(--glow-boost) + 20%)), 
                0 0 50px 2px hsl( var(--glow-color) / calc(var(--glow-boost) + 10%));
            ;
        }
    }
}

.card-icon {
	box-shadow: rgb(255 255 255 / 10%) 0px 0px 20px, rgb(255 255 255 / 10%) 0px 0px 40px;
}
.light .card-icon {
	box-shadow: rgb(105 88 139 / 20%) 0px 0px 20px, rgb(105 88 139 / 5%) 0px 0px 40px;
}

/* ABOUT US PAGE */

.about-us-hero-section-bg {
    background-image: url(../images/CONTACT-HERO-image-BG-5.jpg);
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	opacity: 0.1;
}

.img-cover {
	object-fit: cover;
}

#resoft-anim-container {
	align-items: center;
	block-size: 100vh;
	display: flex;
	inset-block-start: 0;
	justify-content: center;
	overflow: hidden;
	position: sticky;
	background-color: #FCFAFE;
}

/*features page header animation*/

.features-wrapper {
    position: relative;
    height: 400px;
    width: 100%;
    perspective: 1000px;
}

.feature-card {
    --card-i: sibling-index();
	--card-trans-duration: 1000ms;
	--cards: 3;
	--card-trans-easing:linear(0, 0.01 0.8%, 0.038 1.6%, 0.154 3.4%, 0.781 9.7%, 1.01 12.5%, 1.089 13.8%, 1.153 15.2%, 1.195 16.6%, 1.219 18%, 1.224 19.7%, 1.208 21.6%, 1.172 23.6%, 1.057 28.6%, 1.007 31.2%, 0.969 34.1%, 0.951 37.1%, 0.953 40.9%, 0.998 50.4%, 1.011 56%, 0.998 74.7%, 1);
	--card-width: 450px;
	--card-gap: 100px;

	@supports not (order:sibling-index()) {
		/* fallback */
		&:nth-child(1) { --card-i: 1; }
		&:nth-child(2) { --card-i: 2; }
		&:nth-child(3) { --card-i: 3; }
	}
}

@keyframes cardFlip {
	0% {
		transform: rotateY(15deg) translateX(0) translateZ(0) scale(1);
		z-index: calc(10 + var(--card-i));
	}
	25% {
		transform: rotateY(10deg)
				   translateX(-370px)
				   translateZ(0)
				   scale(1);
		z-index: calc(10 + var(--card-i));
	}
	49% {
		z-index: 200;
	}
	50% {
		z-index: 200;
	}
	100% {
		transform: rotateY(0deg) 
		           translateZ(100px) 
		           translateX(calc(25vw - var(--card-i) * var(--card-gap) - var(--card-width) / 2))
		           scale(1.1);
		z-index: 200;
	}
}

@keyframes cardFlipReverse {
	0% {
		transform: rotateY(0deg) 
		           translateZ(100px) 
		           translateX(calc(25vw - var(--card-i) * var(--card-gap) - var(--card-width) / 2))
		           scale(1.1);
		z-index: 200;
	}
	50% {
		z-index: 200;
	}
	51% {
		z-index: 200;
	}
	70% {
		transform: rotateY(10deg) translateX(-370px) translateZ(0) scale(1);
		z-index: calc(10 + var(--card-i));
	}
	100% {
		transform: rotateY(15deg) translateX(0) translateZ(0) scale(1);
		z-index: calc(10 + var(--card-i));
	}
}

.feature-card {
	position: absolute;
    left: calc(var(--card-i) * var(--card-gap));
	top: 0px;
	height: 100%;
	border-radius: 33px;
    overflow: hidden;
    box-shadow: rgb(255 255 255 / 10%) 0px 0px 20px;
	width: var(--card-width);
	transform: rotateY(15deg);
	transform-style: preserve-3d;
	backface-visibility: visible;
	z-index: calc(10 + var(--card-i));
}

.flip-card {
	animation: cardFlip .8s ease-in-out forwards;
}
.flip-card-reverse {
	animation: cardFlipReverse .8s ease-in-out forwards;
}