hiệu ứng nhịp nháy

Kitty_Fall/Kitty_Fall/Kitty_Fall.Website/Program.cs

@@ -15,6 +15,7 @@ var builder = WebApplication.CreateBuilder(args);
 // Add services to the container.
 builder.Services.AddControllersWithViews();
 builder.Services.AddMemoryCache();
+builder.Services.AddDistributedMemoryCache();
 
 builder.Services.Configure<Microsoft.AspNetCore.Builder.ForwardedHeadersOptions>(options =>
 {
@@ -29,7 +30,9 @@ builder.Services.AddSession(options =>
     options.Cookie.HttpOnly = true;
     options.Cookie.IsEssential = true;
     options.Cookie.Name = "Kitty_Fall.Website.Session";
-    options.Cookie.SecurePolicy = Microsoft.AspNetCore.Http.CookieSecurePolicy.Always;
+    // Send the session cookie over both HTTP and HTTPS. On HTTPS the cookie is
+    // still marked Secure; on HTTP it remains usable instead of causing a login loop.
+    options.Cookie.SecurePolicy = Microsoft.AspNetCore.Http.CookieSecurePolicy.SameAsRequest;
     options.Cookie.SameSite = Microsoft.AspNetCore.Http.SameSiteMode.Lax;
 });
 
@@ -52,7 +55,6 @@ if (!app.Environment.IsDevelopment())
 }
 
 app.UseForwardedHeaders();
-app.UseHttpsRedirection();
 app.UseStaticFiles();
 
 app.UseSession();

Kitty_Fall/Kitty_Fall/Kitty_Fall.Website/wwwroot/kitty/css/all.min.css

@@ -340,7 +340,7 @@ button {
 
 .kitty-cat {
     position: absolute;
-    z-index: 0;
+    z-index: 2;
     top: 68px;
     left: 50%;
     width: 271px;
@@ -419,6 +419,16 @@ button {
     height: 43px;
     object-fit: contain;
     transform: rotate(-7deg);
+    transform-origin: center bottom;
+    animation: gift-box-wiggle 0.8s ease-in-out infinite;
+    will-change: transform;
+}
+
+@keyframes gift-box-wiggle {
+    0%, 100% { transform: rotate(-7deg) translateY(0); }
+    25% { transform: rotate(-15deg) translateY(-1px); }
+    50% { transform: rotate(1deg) translateY(0); }
+    75% { transform: rotate(-13deg) translateY(-1px); }
 }
 
 .package-copy {
@@ -3589,6 +3599,82 @@ button {
     transform: rotate(-4deg);
 }
 
+/* Soft pulse / breathing motion for the Kittyfall brand characters. */
+.kitty-logo {
+    --kitty-breath-transform: translateX(calc(-50% - 3px)) rotate(3.7deg);
+}
+
+.kitty-cat {
+    --kitty-breath-transform: translateX(calc(-50% + 5.5px));
+}
+
+.login-logo,
+.guide-logo {
+    --kitty-breath-transform: translateZ(0);
+}
+
+.login-cat {
+    --kitty-breath-transform: rotate(-4deg);
+}
+
+.guide-cat {
+    --kitty-breath-transform: translateZ(0);
+}
+
+.kitty-logo,
+.login-logo,
+.guide-logo {
+    transform-origin: center center;
+    animation: kittyfall-logo-breathe 0.4s ease-in-out infinite;
+    will-change: transform;
+}
+
+.kitty-cat,
+.login-cat,
+.guide-cat {
+    transform-origin: center bottom;
+    animation: kittyfall-cat-breathe 2.6s ease-in-out infinite;
+    animation-delay: -0.7s;
+    will-change: transform;
+}
+
+@keyframes kittyfall-logo-breathe {
+    0%, 100% {
+        transform: var(--kitty-breath-transform) scale(1);
+    }
+    50% {
+        transform: var(--kitty-breath-transform) scale(1.07);
+    }
+}
+
+@keyframes kittyfall-cat-breathe {
+    0%, 100% {
+        transform: var(--kitty-breath-transform) scale(1);
+    }
+    50% {
+        transform: var(--kitty-breath-transform) scale(1.035);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .package-icon {
+        animation: none;
+        will-change: auto;
+        transform: rotate(-7deg);
+    }
+
+    .kitty-logo,
+    .login-logo,
+    .guide-logo,
+    .kitty-cat,
+    .login-cat,
+    .guide-cat {
+        animation: none;
+        will-change: auto;
+        transform: var(--kitty-breath-transform);
+    }
+}
+
 .login-card {
     position: relative;
     width: min(100%, 382px);

Kitty_Fall/Kitty_Fall/Kitty_Fall.Website/wwwroot/kitty/css/input.css

@@ -340,7 +340,7 @@ button {
 
 .kitty-cat {
     position: absolute;
-    z-index: 0;
+    z-index: 2;
     top: 68px;
     left: 50%;
     width: 271px;
@@ -419,6 +419,16 @@ button {
     height: 43px;
     object-fit: contain;
     transform: rotate(-7deg);
+    transform-origin: center bottom;
+    animation: gift-box-wiggle 0.8s ease-in-out infinite;
+    will-change: transform;
+}
+
+@keyframes gift-box-wiggle {
+    0%, 100% { transform: rotate(-7deg) translateY(0); }
+    25% { transform: rotate(-15deg) translateY(-1px); }
+    50% { transform: rotate(1deg) translateY(0); }
+    75% { transform: rotate(-13deg) translateY(-1px); }
 }
 
 .package-copy {
@@ -3589,6 +3599,82 @@ button {
     transform: rotate(-4deg);
 }
 
+/* Soft pulse / breathing motion for the Kittyfall brand characters. */
+.kitty-logo {
+    --kitty-breath-transform: translateX(calc(-50% - 3px)) rotate(3.7deg);
+}
+
+.kitty-cat {
+    --kitty-breath-transform: translateX(calc(-50% + 5.5px));
+}
+
+.login-logo,
+.guide-logo {
+    --kitty-breath-transform: translateZ(0);
+}
+
+.login-cat {
+    --kitty-breath-transform: rotate(-4deg);
+}
+
+.guide-cat {
+    --kitty-breath-transform: translateZ(0);
+}
+
+.kitty-logo,
+.login-logo,
+.guide-logo {
+    transform-origin: center center;
+    animation: kittyfall-logo-breathe 2.4s ease-in-out infinite;
+    will-change: transform;
+}
+
+.kitty-cat,
+.login-cat,
+.guide-cat {
+    transform-origin: center bottom;
+    animation: kittyfall-cat-breathe 3.6s ease-in-out infinite;
+    animation-delay: -0.7s;
+    will-change: transform;
+}
+
+@keyframes kittyfall-logo-breathe {
+    0%, 100% {
+        transform: var(--kitty-breath-transform) scale(1);
+    }
+    50% {
+        transform: var(--kitty-breath-transform) scale(1.07);
+    }
+}
+
+@keyframes kittyfall-cat-breathe {
+    0%, 100% {
+        transform: var(--kitty-breath-transform) scale(1);
+    }
+    50% {
+        transform: var(--kitty-breath-transform) scale(1.035);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .package-icon {
+        animation: none;
+        will-change: auto;
+        transform: rotate(-7deg);
+    }
+
+    .kitty-logo,
+    .login-logo,
+    .guide-logo,
+    .kitty-cat,
+    .login-cat,
+    .guide-cat {
+        animation: none;
+        will-change: auto;
+        transform: var(--kitty-breath-transform);
+    }
+}
+
 .login-card {
     position: relative;
     width: min(100%, 382px);