/* ═══════════════════════════════════════════
   G11 HOME PAGE — INDEX.CSS
   ═══════════════════════════════════════════ */

/* ── Base ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html::-webkit-scrollbar {
    width: 6px;
}

html::-webkit-scrollbar-track {
    background: #f8fafc;
}

html::-webkit-scrollbar-thumb {
    background: #a5b4fc;
    border-radius: 99px;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    display: block;
}

/* ── Messages ── */
.msg-toast {
    animation: toastIn .4s ease, toastOut .4s ease 4.6s forwards;
}

.msg-toast.success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.msg-toast.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.msg-toast.info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

@keyframes toastIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ── Floating geometric shapes ── */
.shape {
    position: absolute;
    border-radius: 16px;
    opacity: 0.12;
    animation: shapeFloat 8s ease-in-out infinite;
}

.shape-1 {
    width: 80px;
    height: 80px;
    border: 2px solid #a5b4fc;
    top: 12%;
    left: 8%;
    animation-delay: 0s;
    transform: rotate(15deg);
}

.shape-2 {
    width: 60px;
    height: 60px;
    background: #818cf8;
    top: 65%;
    right: 10%;
    animation-delay: 1.5s;
    border-radius: 50%;
}

.shape-3 {
    width: 50px;
    height: 50px;
    border: 2px solid #c4b5fd;
    top: 30%;
    right: 22%;
    animation-delay: 3s;
    transform: rotate(45deg);
}

.shape-4 {
    width: 40px;
    height: 40px;
    background: #a5b4fc;
    bottom: 18%;
    left: 15%;
    animation-delay: 2s;
    border-radius: 50%;
}

.shape-5 {
    width: 70px;
    height: 70px;
    border: 2px solid #e879f9;
    bottom: 35%;
    right: 35%;
    animation-delay: 4s;
    transform: rotate(-20deg);
}

@keyframes shapeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(var(--r, 15deg));
    }

    50% {
        transform: translateY(-25px) rotate(calc(var(--r, 15deg) + 10deg));
    }
}

/* ── Hero reveal animation ── */
.reveal-hero {
    opacity: 0;
    transform: translateY(40px);
    animation: heroReveal .9s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(var(--d, 0) * .15s + .3s);
}

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Scroll-triggered reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Stagger reveal for grid items ── */
.reveal-stagger {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--i, 0) * .1s);
}

.reveal-stagger.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ── 3D Tilt Cards ── */
.tilt-card {
    perspective: 800px;
}

.tilt-card .card-inner {
    transform-style: preserve-3d;
    transition: transform .35s ease, box-shadow .35s ease;
    will-change: transform;
}

/* ── 3D Flip Cards (Wishlist) ── */
.flip-card {
    perspective: 600px;
    height: 220px;
}

.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-back {
    transform: rotateY(180deg);
}

/* ── Magnetic button effect marker ── */
.mag-btn {
    transition: transform .2s ease;
}

/* ── Feature glass cards ── */
.feature-glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Line clamp ── */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .flip-card {
        height: 200px;
    }

    #hero h1 {
        font-size: 2.8rem !important;
    }
}