@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes slideUp{0%{transform:translate3d(0,40px,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}100%{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes slideOutRight{0%{transform:translateX(0);opacity:1}100%{transform:translateX(100%);opacity:0}}@keyframes scaleUp{0%{transform:scale(1)}100%{transform:scale(1.05)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes flipCard{0%{transform:rotateY(0deg)}100%{transform:rotateY(180deg)}}/* Fade-in scroll animation - footer excluded to prevent jumping */
.fade-in-scroll{opacity:0;transform:translate3d(0,30px,0);transition:opacity 0.4s ease-out,transform 0.4s ease-out;will-change:opacity,transform}.fade-in-scroll.visible{opacity:1;transform:translate3d(0,0,0);will-change:auto}

/* Ensure footer is always visible and positioned correctly - prevents footer jumping on page load */
.footer{opacity:1 !important;transform:none !important}.fade-in-scroll[data-delay="1"]{transition-delay:0.1s}.fade-in-scroll[data-delay="2"]{transition-delay:0.2s}.fade-in-scroll[data-delay="3"]{transition-delay:0.3s}.fade-in-scroll[data-delay="4"]{transition-delay:0.4s}.fade-in-scroll[data-delay="5"]{transition-delay:0.5s}.fade-in-scroll[data-delay="6"]{transition-delay:0.6s}.animate-hero-title{animation:slideUp 0.8s ease-out forwards}.animate-hero-subtitle{animation:slideUp 0.8s ease-out 0.2s forwards;opacity:0}.animate-cta{animation:fadeIn 0.8s ease-out 0.4s forwards;opacity:0}.hover-scale{transition:transform 0.3s ease-out,box-shadow 0.3s ease-out}.hover-scale:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}.hover-underline{position:relative}.hover-underline::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--color-accent-600);transition:width 0.3s ease-out}.hover-underline:hover::after{width:100%}.btn{transition:all 0.3s ease-out}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.flip-card-container{perspective:1000px;width:100%;cursor:pointer;contain:layout style}.flip-card-inner{position:relative;width:100%;transition:transform 0.8s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d}.flip-card-container:hover .flip-card-inner,.flip-card-container:focus .flip-card-inner{will-change:transform}.flip-card-container.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{position:relative;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;min-height:100%}.flip-card-back{transform:rotateY(180deg);position:absolute;top:0;left:0;height:100%}.flip-card-container.flipped .flip-card-front{position:absolute;top:0;left:0;height:100%}.flip-card-container.flipped .flip-card-back{position:relative}/* Flip indicator styling - positioned at bottom right of card faces */
.flip-indicator{position:absolute;bottom:var(--spacing-4);right:var(--spacing-4);background-color:rgba(0,0,0,0.7);color:white;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-full);font-size:var(--text-sm);opacity:0.8;transition:opacity 0.3s ease-out;z-index:10;pointer-events:none}

/* Front indicator - normal display, hidden when card is flipped
 * Uses backface-visibility to hide when rotated away from viewer
 * Also explicitly hidden when container has flipped class for better browser support */
.flip-card-front .flip-indicator{backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* Hide the indicator completely when card is flipped */
.flip-card-container.flipped .flip-card-front .flip-indicator{opacity:0;visibility:hidden}



/* Back indicator - counter-rotated to appear correctly when back face is shown
 * The back face is rotated 180deg, so the indicator must also be rotated 180deg
 * to appear normal. Using scaleX(-1) as alternative for better iPhone/Safari support
 * This prevents the text from appearing mirrored on iOS devices */
.flip-card-back .flip-indicator{transform:scaleX(1);-webkit-transform:scaleX(1)}.flip-card-container:hover .flip-indicator{opacity:1}.mobile-menu{position:fixed;top:0;right:0;width:100%;height:100vh;background-color:var(--color-primary-50);z-index:var(--z-modal);transform:translateX(100%);transition:transform 0.3s ease-out}.mobile-menu.active{transform:translateX(0)}.mobile-menu-link{opacity:0;transform:translateX(20px);transition:opacity 0.3s ease-out,transform 0.3s ease-out}.mobile-menu.active .mobile-menu-link{opacity:1;transform:translateX(0)}.mobile-menu.active .mobile-menu-link:nth-child(1){transition-delay:0.05s}.mobile-menu.active .mobile-menu-link:nth-child(2){transition-delay:0.1s}.mobile-menu.active .mobile-menu-link:nth-child(3){transition-delay:0.15s}.mobile-menu.active .mobile-menu-link:nth-child(4){transition-delay:0.2s}.mobile-menu.active .mobile-menu-link:nth-child(5){transition-delay:0.25s}.mobile-menu.active .mobile-menu-link:nth-child(6){transition-delay:0.3s}.hamburger{width:24px;height:20px;position:relative;cursor:pointer}.hamburger-line{position:absolute;width:100%;height:2px;background-color:var(--color-primary-900);transition:all 0.3s ease-out;left:0}.hamburger-line:nth-child(1){top:0}.hamburger-line:nth-child(2){top:50%;transform:translateY(-50%)}.hamburger-line:nth-child(3){bottom:0}.hamburger.active .hamburger-line:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.hamburger.active .hamburger-line:nth-child(2){opacity:0}.hamburger.active .hamburger-line:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}.header{position:sticky;top:0;width:100%;z-index:var(--z-sticky);background-color:transparent;transition:background-color 0.3s ease-out,box-shadow 0.3s ease-out,backdrop-filter 0.3s ease-out}.header.scrolled{background-color:rgba(250,250,250,0.9);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm)}.gallery-item{opacity:0;transform:translate3d(0,20px,0);animation:slideUp 0.4s ease-out forwards;contain:layout style}.gallery-item:nth-child(1){animation-delay:0s}.gallery-item:nth-child(2){animation-delay:0.05s}.gallery-item:nth-child(3){animation-delay:0.1s}.gallery-item:nth-child(4){animation-delay:0.15s}.gallery-item:nth-child(5){animation-delay:0.2s}.gallery-item:nth-child(6){animation-delay:0.25s}.gallery-item:nth-child(7){animation-delay:0.3s}.gallery-item:nth-child(8){animation-delay:0.35s}.gallery-item:nth-child(9){animation-delay:0.4s}.gallery-item:nth-child(10){animation-delay:0.45s}.gallery-item:nth-child(11){animation-delay:0.5s}.gallery-item:nth-child(12){animation-delay:0.55s}.viewer-main-image{transition:opacity 0.2s ease-out,transform 0.2s ease-out;will-change:opacity;transform:translate3d(0,0,0)}.viewer-main-image.changing{opacity:0.5}.viewer-thumbnail{transition:opacity 0.2s ease-out,transform 0.2s ease-out,border-color 0.2s ease-out,box-shadow 0.2s ease-out;border:2px solid transparent;transform:translate3d(0,0,0);will-change:transform}.viewer-thumbnail.active{border-color:var(--color-accent-500);box-shadow:0 0 0 2px var(--color-accent-200)}.viewer-thumbnail:hover{opacity:0.8;transform:translate3d(0,0,0) scale(1.05)}.modal-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,0.75);z-index:var(--z-modal-backdrop);animation:fadeIn 0.3s ease-out}.modal-content{animation:slideUp 0.3s ease-out}.modal-backdrop.closing{animation:fadeIn 0.3s ease-out reverse}.modal-content.closing{animation:slideUp 0.3s ease-out reverse}.skeleton{background:linear-gradient( 90deg,var(--color-primary-200) 0%,var(--color-primary-100) 50%,var(--color-primary-200) 100% );background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.spinner{width:40px;height:40px;border:3px solid var(--color-primary-200);border-top-color:var(--color-accent-500);border-radius:50%;animation:spin 0.8s linear infinite}.pulse{animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}.btn-loading{position:relative;pointer-events:none;color:transparent}.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin-top:-8px;margin-left:-8px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 0.6s linear infinite}.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none !important}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-accent-500);box-shadow:0 0 0 3px rgba(99,102,241,0.1);transition:border-color 0.2s ease-out,box-shadow 0.2s ease-out}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}.error-shake{animation:shake 0.5s ease-out}@keyframes checkmark{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}.success-checkmark{stroke-dasharray:100;stroke-dashoffset:100;animation:checkmark 0.6s ease-out forwards}@media (max-width:767px){.hover-scale:hover{transform:scale(1.02)}.gallery-item:hover .gallery-item-image{transform:scale(1.02)}}@media (prefers-reduced-motion:reduce){.fade-in-scroll,.gallery-item,.mobile-menu,.mobile-menu-link,.flip-card-inner,.modal-backdrop,.modal-content{animation:none !important;transition:none !important}.fade-in-scroll{opacity:1 !important;transform:none !important}}
