FileKrypt First Commit

Author: Codilosopher

app.js

@@ -0,0 +1,119 @@
+/* ── Background Grid & Interactive Spotlights ── */
+.bg-grid {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  /* Premium Checker Design: One Fade (0.02), One Normal (0.1) */
+  background-image:
+    conic-gradient(rgba(142, 182, 155, 0.1) 0deg 90deg,
+      rgba(142, 182, 155, 0.02) 90deg 180deg,
+      rgba(142, 182, 155, 0.1) 180deg 270deg,
+      rgba(142, 182, 155, 0.02) 270deg);
+  background-size: 100px 100px;
+  background-position: 0 0;
+  /* Mask image creates the mouse-following spotlight effect */
+  -webkit-mask-image: radial-gradient(circle 500px at var(--mouseX, 50vw) var(--mouseY, 50vh), black 0%, transparent 100%);
+  mask-image: radial-gradient(circle 500px at var(--mouseX, 50vw) var(--mouseY, 50vh), black 0%, transparent 100%);
+  transition: opacity var(--trans);
+}
+
+/* ── Decrypt Mode Background Variation ── */
+body.decrypt-mode .bg-grid {
+  background-image:
+    conic-gradient(rgba(232, 220, 196, 0.08) 0deg 90deg,
+      rgba(232, 220, 196, 0.02) 90deg 180deg,
+      rgba(232, 220, 196, 0.08) 180deg 270deg,
+      rgba(232, 220, 196, 0.02) 270deg);
+}
+
+/* ── Why Section Title Hover Effect ── */
+.why-title-wrapper {
+  position: relative;
+  display: inline-block;
+  cursor: default;
+  --mouse-x: -999px;
+  --mouse-y: -999px;
+}
+
+.why-title {
+  font-size: 58px;
+  margin-bottom: 24px;
+  letter-spacing: -1.5px;
+  font-weight: 800;
+  margin: 0;
+  white-space: nowrap;
+}
+
+/* Static text layer */
+.main-layer {
+  position: relative;
+  z-index: 1;
+}
+
+/* Hover reveal layer (flashlight effect) */
+.hover-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  pointer-events: none;
+  /* Flashlight Mask Effect - 80px Soft Feathered Circle */
+  -webkit-mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), black 0%, black 40px, transparent 80px);
+  mask-image: radial-gradient(circle at var(--mouse-x) var(--mouse-y), black 0%, black 40px, transparent 80px);
+  transition: none;
+}
+
+/* ── Typography Colors ── */
+.why-accent {
+  color: var(--accent);
+}
+
+.why-white {
+  color: #fff;
+}
+
+/* ── Decrypt Mode Color Overrides for Why Section ── */
+body.decrypt-mode .why-accent {
+  color: #E8DCC4;
+  /* Base 'Why' and 'Krypt' turn beige */
+}
+
+body.decrypt-mode .hover-layer .why-accent {
+  color: #E8DCC4;
+  /* 'File' turns beige when hovered */
+}
+
+body.decrypt-mode .hover-layer .why-white {
+  color: #fff;
+  /* 'Why' and 'Krypt' turn white when hovered */
+}
+
+/* ── Mobile & Tablet Responsiveness ── */
+@media (max-width: 1024px) {
+  .bg-grid {
+    animation: none !important;
+  }
+
+  .water-ripple {
+    display: none !important;
+  }
+
+  /* Disable interactive background effects on mobile for stability */
+  .bg-grid {
+    -webkit-mask-image: none !important;
+    mask-image: none !important;
+    opacity: 0.08 !important;
+    /* Static, subtle grid */
+  }
+
+  .hover-layer {
+    display: none !important;
+  }
+
+  .bg-grid::after {
+    display: none !important;
+  }
+}

assets/KryptLogo.svg

@@ -0,0 +1,15 @@
+// ─── Cursor Spotlight ─────────────────────────────────────
+const updateBgGridPos = (e) => {
+  const bgGrid = document.querySelector('.bg-grid');
+  if (bgGrid) {
+    const x = e.clientX || (e.touches && e.touches[0].clientX);
+    const y = e.clientY || (e.touches && e.touches[0].clientY);
+    if (x !== undefined && y !== undefined) {
+      bgGrid.style.setProperty('--mouseX', `${x}px`);
+      bgGrid.style.setProperty('--mouseY', `${y}px`);
+    }
+  }
+};
+document.addEventListener('mousemove', updateBgGridPos);
+document.addEventListener('touchstart', updateBgGridPos, { passive: true });
+document.addEventListener('touchmove', updateBgGridPos, { passive: true });