html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
}
/*3D CAROUSEL CONTAINER */
.slider-container {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 1500px;
position: relative;
overflow: visible;
margin: 0 auto;
background: linear-gradient(
135deg,
#07111f,
#102a43,
#07111f
);
}
/* ROTATING 3D SLIDER */
.slider {
position: absolute;
width: 280px;
height: 360px;
left: 28%;
top: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
transform-origin: center center;
/* animation: rotate 15s infinite linear; */
}
/* EACH IMAGE */
.slide {
position: absolute;
width: 280px;
height: 360px;
left: 0;
top: 0;
/* transform-origin: center center; */
border: 4px solid white;
border-radius: 15px;
overflow: hidden;
backface-visibility: visible;
box-sizing: border-box;
}
/* IMAGE */
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* POSITION EACH IMAGE AROUND THE 3D CYLINDER */
.slide:nth-child(1) {
transform:
rotateY(0deg)
translateZ(200px);
}
.slide:nth-child(2) {
transform:
rotateY(90deg)
translateZ(200px);
}
.slide:nth-child(3) {
transform:
rotateY(180deg)
translateZ(200px);
}
.slide:nth-child(4) {
transform:
rotateY(270deg)
translateZ(200px);
}
/* ==============================
TYPING CONTENT - ROTATION
============================= */
@keyframes rotate {
from {
transform:
translate(-50%, -50%)
rotateY(0deg);
}
to {
transform:
translate(-50%, -50%)
rotateY(360deg);
}
}
/* =====================================================
TYPING CONTENT-RIGHT SIDE
===================================================== */
.typing-content {
position: absolute;
left: 62%;
top: 50%;
transform: translateY(-50%);
width: 400px;
z-index: 10;
text-align: left;
}
/* =====================================================
TITLE
===================================================== */
#typingTitle {
margin: 0 0 20px 0;
font-size: 42px;
font-weight: 700;
letter-spacing: 2px;
color: #ffffff;
background: linear-gradient(
90deg,
#ffffff,
#7dd3fc,
#38bdf8
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* text-shadow:
0 0 15px rgba(56, 189, 248, 0.4); */
background-clip: text;
}
/* =====================================================
DESCRIPTION
===================================================== */
#typingText {
margin: 0;
font-size: 20px;
line-height: 1.7;
letter-spacing: 1px;
color: #e2e8f0 !important;
min-height: 100px;
white-space: pre-wrap;
}
/* =====================================================
TYPING CURSOR
===================================================== */
#typingText::after {
content: "|";
margin-left: 4px;
color: #38bdf8;
animation: blinkCursor 0.7s infinite;
}
/*=====================================================
CURSOR ANIMATION
=====================================================*/
@keyframes blinkCursor {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* =====================================================
SLIDER 1 EXIT ANIMATION
===================================================== */
.slider-one-exit {
animation:
sliderOneDisappear
1.2s
ease-in-out
forwards !important;
}
@keyframes sliderOneDisappear {
0% {
opacity: 1;
transform:
translate(-50%, -50%)
scale(1)
rotateY(0deg);
}
100% {
opacity: 0;
transform:
translate(-50%, -50%)
scale(0.4)
rotateY(-90deg);
}
}
-----------------SECOND SLIDER-------------
/* =====================================================
SLIDER 2 WRAPPER
===================================================== */
.slider-wrapper-two {
opacity: 0;
visibility: hidden;
z-index: 6;
}
/* =====================================================
SLIDER 2 ROTATING 3D SLIDER
===================================================== */
.slider-two {
position: absolute;
width: 280px;
height: 360px;
left: 28%;
top: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
transform-origin: center center;
transition: transform 1.2s ease-in-out;
}
/* =====================================================
SLIDER 2 IMAGES
===================================================== */
.slider-two-slide {
position: absolute;
width: 280px;
height: 360px;
left: 0;
top: 0;
border: 4px solid white;
border-radius: 15px;
overflow: hidden;
box-sizing: border-box;
backface-visibility: visible;
}
/* =====================================================
SLIDER 2 IMAGE
===================================================== */
.slider-two-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =====================================================
SLIDER 2 — 3 IMAGE 3D POSITION
===================================================== */
.slider-two-slide:nth-child(1) {
transform:
rotateY(0deg)
translateZ(200px);
}
.slider-two-slide:nth-child(2) {
transform:
rotateY(120deg)
translateZ(200px);
}
.slider-two-slide:nth-child(3) {
transform:
rotateY(240deg)
translateZ(200px);
}
/* =====================================================
SLIDER 2 ENTRY
===================================================== */
.slider-two-enter {
animation:
sliderTwoAppear
1.2s
ease-in-out
forwards;
}
/* =====================================================
SLIDER 2 ENTRY ANIMATION
===================================================== */
@keyframes sliderTwoAppear {
0% {
opacity: 0;
transform:
translate(-50%, -50%)
scale(1.5)
rotateY(90deg);
}
100% {
opacity: 1;
transform:
translate(-50%, -50%)
scale(1)
rotateY(0deg);
}
}
/* =====================================================
SLIDER 2 3D ROTATION
===================================================== */
@keyframes rotateSliderTwo {
from {
transform:
translate(-50%, -50%)
rotateY(0deg);
}
to {
transform:
translate(-50%, -50%)
rotateY(360deg);
}
}
/* =====================================================
SLIDER 2 ENTRY ANIMATION
===================================================== */
.slider-two-enter {
animation:
sliderTwoAppear
1.2s
ease-in-out
forwards;
}
@keyframes sliderTwoAppear {
0% {
opacity: 0;
transform:
translate(-50%, -50%)
scale(1.5)
rotateY(90deg);
}
100% {
opacity: 1;
transform:
translate(-50%, -50%)
scale(1)
rotateY(0deg);
}
}
/* =====================================================
SLIDER 1 EXIT ANIMATION
===================================================== */
.slider-two-exit {
animation:
sliderTwoDisappear
1.2s
ease-in-out
forwards !important;
}
@keyframes slidertwoDisappear {
0% {
opacity: 1;
transform:
translate(-50%, -50%)
scale(1)
rotateY(0deg);
}
100% {
opacity: 0;
transform:
translate(-50%, -50%)
scale(0.4)
rotateY(-90deg);
}
}
/*----------------Third slider------------*/
/* =====================================================
SLIDER 3 WRAPPER
===================================================== */
.slider-wrapper-three {
opacity: 0;
visibility: hidden;
z-index: 7;
position: absolute;
inset: 0;
transition:
opacity 0.4s ease,
visibility 0.4s ease;
}
.slider-wrapper-three.slider-three-visible {
opacity: 1;
visibility: visible;
}
/* =====================================================
SLIDER 3 ROTATING 3D SLIDER
===================================================== */
.slider-three {
position: absolute;
width: 280px;
height: 360px;
left: 28%;
top: 50%;
transform:
translate(-50%, -50%);
transform-style: preserve-3d;
transform-origin: center center;
/* IMPORTANT:
This creates the smooth 3D rotation */
transition:
transform 1.2s ease-in-out,
opacity 0.6s ease;
}
/* =====================================================
SLIDER 3 IMAGES
===================================================== */
.slider-three-slide {
position: absolute;
width: 280px;
height: 360px;
left: 0;
top: 0;
border: 4px solid white;
border-radius: 15px;
overflow: hidden;
box-sizing: border-box;
backface-visibility: visible;
}
/* =====================================================
SLIDER 3 IMAGE
===================================================== */
.slider-three-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =====================================================
SLIDER 3 — 3 IMAGE 3D POSITIONS
===================================================== */
/* IMAGE 1 */
.slider-three-slide:nth-child(1) {
transform:
rotateY(0deg)
translateZ(200px);
}
/* IMAGE 2 */
.slider-three-slide:nth-child(2) {
transform:
rotateY(180deg)
translateZ(200px);
}
/* IMAGE 3 */
/* .slider-three-slide:nth-child(3) {
transform:
rotateY(240deg)
translateZ(200px);
} */
/* =====================================================
SLIDER 3 ENTRY
===================================================== */
.slider-three-enter {
animation:
sliderThreeAppear
1.2s
ease-in-out
forwards;
}
/* =====================================================
SLIDER 3 ENTRY ANIMATION
===================================================== */
@keyframes sliderThreeAppear {
0% {
opacity: 0;
transform:
translate(-50%, -50%)
scale(1.5)
rotateY(90deg);
}
100% {
opacity: 1;
transform:
translate(-50%, -50%)
scale(1)
rotateY(0deg);
}
}
/* =====================================================
SLIDER 3 3D ROTATION
===================================================== */
@keyframes rotateSliderThree {
from {
transform:
translate(-50%, -50%)
rotateY(0deg);
}
to {
transform:
translate(-50%, -50%)
rotateY(360deg);
}
}
/*----------------Fourth slider------------*/
/* =====================================================
SLIDER 4 WRAPPER
===================================================== */
.slider-wrapper-four {
opacity: 0;
visibility: hidden;
z-index: 7;
position: absolute;
inset: 0;
transition:
opacity 0.4s ease,
visibility 0.4s ease;
}
.slider-wrapper-four.slider-four-visible {
opacity: 1;
visibility: visible;
}
/* =====================================================
SLIDER 4 ROTATING 3D SLIDER
===================================================== */
.slider-four {
position: absolute;
width: 280px;
height: 360px;
left: 28%;
top: 50%;
transform:
translate(-50%, -50%);
transform-style: preserve-3d;
transform-origin: center center;
/* IMPORTANT:
This creates the smooth 3D rotation */
transition:
transform 1.2s ease-in-out,
opacity 0.6s ease;
}
/* =====================================================
SLIDER 4 IMAGES
===================================================== */
.slider-four-slide {
position: absolute;
width: 280px;
height: 360px;
left: 0;
top: 0;
border: 4px solid white;
border-radius: 15px;
overflow: hidden;
box-sizing: border-box;
backface-visibility: visible;
}
/* =====================================================
SLIDER 4 IMAGE
===================================================== */
.slider-four-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =====================================================
SLIDER 4 — 2 IMAGE 3D POSITIONS
===================================================== */
/* IMAGE 1 */
.slider-four-slide:nth-child(1) {
transform:
rotateY(0deg)
translateZ(200px);
}
/* IMAGE 2 */
.slider-four-slide:nth-child(2) {
transform:
rotateY(180deg)
translateZ(200px);
}
/* IMAGE 3 */
/* .slider-three-slide:nth-child(3) {
transform:
rotateY(240deg)
translateZ(200px);
} */
/* =====================================================
SLIDER 4 ENTRY
===================================================== */
.slider-four-enter {
animation:
sliderThreeAppear
1.2s
ease-in-out
forwards;
}
/* =====================================================
SLIDER 4 ENTRY ANIMATION
===================================================== */
@keyframes sliderfourAppear {
0% {
opacity: 0;
transform:
translate(-50%, -50%)
scale(1.5)
rotateY(90deg);
}
100% {
opacity: 1;
transform:
translate(-50%, -50%)
scale(1)
rotateY(0deg);
}
}
/* =====================================================
SLIDER 4 3D ROTATION
===================================================== */
@keyframes rotateSliderThree {
from {
transform:
translate(-50%, -50%)
rotateY(0deg);
}
to {
transform:
translate(-50%, -50%)
rotateY(360deg);
}
}
/* =====================================================
SLIDER — MOBILE RESPONSIVE
===================================================== */
@media (max-width: 900px) {
.slider-container {
min-height: 100svh;
perspective: 900px;
overflow: hidden;
padding-top: 90px; /* clear the fixed navbar */
padding-bottom: 40px;
flex-direction: column;
}
.slider,
.slider-two,
.slider-three,
.slider-four {
left: 50%;
top: 42%;
transform: translate(-50%, -50%) scale(0.65);
}
.slide,
.slider-two-slide,
.slider-three-slide,
.slider-four-slide {
width: 220px;
height: 280px;
}
.slide:nth-child(1),
.slider-two-slide:nth-child(1),
.slider-three-slide:nth-child(1),
.slider-four-slide:nth-child(1) {
transform: rotateY(0deg) translateZ(160px);
}
.slide:nth-child(2),
.slider-two-slide:nth-child(2),
.slider-three-slide:nth-child(2),
.slider-four-slide:nth-child(2) {
transform: rotateY(90deg) translateZ(160px);
}
.slide:nth-child(3) {
transform: rotateY(180deg) translateZ(160px);
}
.slide:nth-child(4) {
transform: rotateY(270deg) translateZ(160px);
}
.typing-content {
left: 50%;
top: auto;
bottom: 8%;
transform: translateX(-50%);
width: 90%;
text-align: center;
}
#typingTitle { font-size: 22px; letter-spacing: 1px; }
#typingText { font-size: 14px; line-height: 1.5; min-height: 50px; }
}
@media (max-width: 500px) {
.slider,
.slider-two,
.slider-three,
.slider-four {
top: 40%;
transform: translate(-50%, -50%) scale(0.55);
}
.slide,
.slider-two-slide,
.slider-three-slide,
.slider-four-slide {
width: 190px;
height: 240px;
}
#typingTitle { font-size: 18px; }
#typingText { font-size: 13px; }
}
/* =====================================================
MOBILE-ONLY: FIT 3D PRODUCT CARDS ON SCREEN
(desktop ≥ 769px is NOT affected)
===================================================== */
@media (max-width: 768px) {
.product-container {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
padding: 12px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.product-item {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
transform: none !important;
}
.product-item img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 150px !important;
object-fit: contain !important;
display: block !important;
transform: none !important;
}
.product-item h4 {
font-size: 13px !important;
line-height: 1.3 !important;
margin: 6px 0 !important;
word-break: break-word !important;
}
}
@media (max-width: 400px) {
.product-container {
grid-template-columns: 1fr !important;
}
.product-item img {
max-height: 200px !important;
}
}
/* =====================================================
MOBILE-ONLY: KEEP 3D SLIDER BELOW THE FIXED NAVBAR
(desktop ≥ 901px is NOT affected)
===================================================== */
@media (max-width: 900px) {
.slider-container {
padding-top: 130px !important; /* more clearance for navbar */
padding-bottom: 40px !important;
min-height: 100svh !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Push the 3D slider a bit lower so it doesn't touch the navbar */
.slider,
.slider-two,
.slider-three,
.slider-four {
top: 50% !important; /* was 42% — moved down */
}
/* Ensure the images don't stick above their container */
.slide,
.slider-two-slide,
.slider-three-slide,
.slider-four-slide {
overflow: hidden;
}
.slide img,
.slider-two-slide img,
.slider-three-slide img,
.slider-four-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
@media (max-width: 500px) {
.slider-container {
padding-top: 120px !important;
}
.slider,
.slider-two,
.slider-three,
.slider-four {
top: 48% !important;
}
}
/* =====================================================
MOBILE: CENTER 3D SLIDER + KEEP IT BELOW NAVBAR
(desktop ≥ 901px is NOT affected)
===================================================== */
@media (max-width: 900px) {
/* 1. Reserve space so the slider never slides under the navbar */
.slider-container {
padding-top: 140px !important;
padding-bottom: 40px !important;
min-height: 100svh !important;
box-sizing: border-box !important;
overflow: hidden !important;
display: block !important; /* avoid flex centering quirks */
position: relative !important;
}
/* 2. Center every slider precisely — same translate for all */
.slider,
.slider-two,
.slider-three,
.slider-four {
position: absolute !important;
left: 50% !important;
top: 50% !important; /* center vertically */
transform: translate(-50%, -50%) scale(0.6) !important;
transform-origin: center center !important;
}
/* 3. Shrink translateZ so the 3D depth matches the visual scale */
.slide:nth-child(1),
.slider-two-slide:nth-child(1),
.slider-three-slide:nth-child(1),
.slider-four-slide:nth-child(1) {
transform: rotateY(0deg) translateZ(130px) !important;
}
.slide:nth-child(2),
.slider-two-slide:nth-child(2),
.slider-three-slide:nth-child(2),
.slider-four-slide:nth-child(2) {
transform: rotateY(90deg) translateZ(130px) !important;
}
.slide:nth-child(3),
.slider-three-slide:nth-child(3),
.slider-four-slide:nth-child(3) {
transform: rotateY(180deg) translateZ(130px) !important;
}
.slide:nth-child(4),
.slider-four-slide:nth-child(4) {
transform: rotateY(270deg) translateZ(130px) !important;
}
/* 4. Make sure slides stay inside their box */
.slide,
.slider-two-slide,
.slider-three-slide,
.slider-four-slide {
overflow: hidden !important;
}
.slide img,
.slider-two-slide img,
.slider-three-slide img,
.slider-four-slide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* 5. Make the navbar sit ABOVE the slider so they don't fight */
.navbar-wrapper {
z-index: 10000 !important;
}
}
/* Tiny phones */
@media (max-width: 500px) {
.slider-container {
padding-top: 120px !important;
}
.slider,
.slider-two,
.slider-three,
.slider-four {
transform: translate(-50%, -50%) scale(0.5) !important;
}
/* translateZ must shrink too, or the cube becomes huge */
.slide:nth-child(1),
.slider-two-slide:nth-child(1),
.slider-three-slide:nth-child(1),
.slider-four-slide:nth-child(1) {
transform: rotateY(0deg) translateZ(100px) !important;
}
.slide:nth-child(2),
.slider-two-slide:nth-child(2),
.slider-three-slide:nth-child(2),
.slider-four-slide:nth-child(2) {
transform: rotateY(90deg) translateZ(100px) !important;
}
.slide:nth-child(3),
.slider-three-slide:nth-child(3),
.slider-four-slide:nth-child(3) {
transform: rotateY(180deg) translateZ(100px) !important;
}
.slide:nth-child(4),
.slider-four-slide:nth-child(4) {
transform: rotateY(270deg) translateZ(100px) !important;
}
}
/* =====================================================
MINNI — the smallest light of Kayal
A warm jewel of light that lives on the page
===================================================== */
.minni {
position: fixed;
top: 60%;
left: 50%;
width: 46px;
height: 46px;
pointer-events: none;
z-index: 9998;
opacity: 0;
transform: translate(-50%, -50%) scale(0.6);
transition:
opacity 1.2s ease,
transform 2.6s cubic-bezier(.34, .05, .2, 1);
will-change: transform, opacity;
filter: drop-shadow(0 0 12px rgba(255, 200, 100, 0.55));
}
.minni.is-awake {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.minni.is-dissolving {
opacity: 0;
transform: translate(-50%, -50%) scale(2.4);
transition: opacity 0.8s ease, transform 0.8s ease;
}
/* ---------- HALO ---------- */
.minni-halo {
position: absolute;
inset: -30px;
border-radius: 50%;
background:
radial-gradient(circle,
rgba(255, 224, 140, 0.42) 0%,
rgba(255, 200, 100, 0.18) 35%,
rgba(255, 180, 80, 0.06) 60%,
transparent 75%);
animation: minniHalo 2.6s ease-in-out infinite;
pointer-events: none;
}
/* ---------- WINGS ---------- */
.minni-wing {
position: absolute;
top: 22px;
width: 22px;
height: 28px;
background:
radial-gradient(ellipse at 50% 30%,
rgba(255, 245, 210, 0.95) 0%,
rgba(255, 220, 140, 0.55) 45%,
rgba(255, 200, 100, 0.12) 75%,
transparent 90%);
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
filter: blur(0.3px);
opacity: 0.9;
}
.minni-wing.left {
left: 2px;
transform-origin: 100% 80%;
animation: wingFlapLeft 0.22s ease-in-out infinite alternate;
}
.minni-wing.right {
right: 2px;
transform-origin: 0% 80%;
animation: wingFlapRight 0.22s ease-in-out infinite alternate;
}
/* ---------- CORE ---------- */
.minni-core {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 24px;
margin: -12px 0 0 -10px;
background:
radial-gradient(ellipse at 50% 30%,
#fffbe0 0%,
#ffe08a 30%,
#ffbe4d 60%,
#e8892a 85%,
#b8621a 100%);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
box-shadow:
inset 0 -3px 6px rgba(180, 90, 20, 0.5),
inset 0 3px 4px rgba(255, 255, 240, 0.9),
0 0 14px rgba(255, 200, 100, 0.85),
0 0 30px rgba(255, 170, 60, 0.45);
animation: coreBreathe 2.2s ease-in-out infinite;
}
.minni-inner-light {
position: absolute;
top: 40%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 8px #fff;
animation: innerPulse 1.6s ease-in-out infinite;
}
/* ---------- LABEL ---------- */
.minni-label {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 6px);
margin-top: 18px;
padding: 5px 12px;
font-family: -apple-system, "Segoe UI", sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
color: #fff8e0;
background: rgba(40, 28, 12, 0.82);
border: 1px solid rgba(255, 200, 100, 0.35);
border-radius: 999px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
animation: labelGreet 5.5s ease forwards;
}
/* ---------- KEYFRAMES ---------- */
@keyframes minniHalo {
0%, 100% { transform: scale(1); opacity: 0.75; }
50% { transform: scale(1.22); opacity: 1; }
}
@keyframes coreBreathe {
0%, 100% { transform: scale(1); filter: brightness(0.95); }
45% { transform: scale(1.08); filter: brightness(1.25); }
}
@keyframes innerPulse {
0%, 100% { opacity: 0.6; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
@keyframes wingFlapLeft {
from { transform: rotate(-24deg) scaleY(1); }
to { transform: rotate(6deg) scaleY(0.82); }
}
@keyframes wingFlapRight {
from { transform: rotate(24deg) scaleY(1); }
to { transform: rotate(-6deg) scaleY(0.82); }
}
@keyframes labelGreet {
0% { opacity: 0; transform: translate(-50%, 10px); }
12% { opacity: 1; transform: translate(-50%, 0); }
70% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -4px); }
}
/* ---------- THE BURST ---------- */
.minni.is-dissolving .minni-halo {
animation: burstHalo 0.9s ease-out forwards;
}
.minni.is-dissolving .minni-core {
animation: burstCore 0.9s ease-out forwards;
}
.minni.is-dissolving .minni-wing {
animation: burstWing 0.9s ease-out forwards;
}
@keyframes burstHalo {
0% { transform: scale(1); opacity: 0.9; }
100% { transform: scale(4.5); opacity: 0; }
}
@keyframes burstCore {
0% { transform: scale(1); filter: brightness(1); }
40% { transform: scale(1.6); filter: brightness(2.5); }
100% { transform: scale(0.2); filter: brightness(3); opacity: 0; }
}
@keyframes burstWing {
0% { opacity: 0.9; transform: scale(1); }
100% { opacity: 0; transform: scale(2.4); }
}