/*
  =====================================================
  SAEI WEBSITE - FULL 3D EFFECTS SYSTEM
  3D Perspective, Tilt, Depth & Immersive Animations
  =====================================================
*/

/* ── 3D Global Scene Setup ── */
:root {
    --perspective: 1200px;
    --depth-shadow: 0 30px 80px rgba(217, 123, 154, 0.25), 0 10px 30px rgba(0,0,0,0.08);
    --glow-pink: 0 0 30px rgba(217, 123, 154, 0.35), 0 0 60px rgba(217, 123, 154, 0.15);
    --glow-sage: 0 0 30px rgba(200, 216, 192, 0.5);
    --3d-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Animated Background depth ── */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(217, 123, 154, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(200, 216, 192, 0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════════════════════
   HERO SECTION 3D
══════════════════════════════════════════════════════ */

.hero-pink {
    perspective: var(--perspective);
    transform-style: preserve-3d;
}

.hero-pink-title {
    text-shadow:
        2px 2px 0 rgba(217,123,154,0.15),
        4px 4px 0 rgba(217,123,154,0.10),
        6px 6px 0 rgba(217,123,154,0.06),
        0 20px 40px rgba(217,123,154,0.2);
    transition: var(--3d-transition);
}

/* Hero CTA buttons 3D */
.btn-shop-now {
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow:
        0 6px 0 rgba(184, 95, 125, 0.5),
        0 8px 20px rgba(217, 123, 154, 0.3);
    position: relative;
}

.btn-shop-now:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow:
        0 12px 0 rgba(184, 95, 125, 0.4),
        0 16px 35px rgba(217, 123, 154, 0.45),
        var(--glow-pink);
}

.btn-shop-now:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 rgba(184, 95, 125, 0.5),
        0 4px 10px rgba(217, 123, 154, 0.2);
}

.btn-outline-sage:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(200, 216, 192, 0.4), var(--glow-sage);
}

/* ══════════════════════════════════════════════════════
   PROMISE / TRUST BADGE CARDS 3D
══════════════════════════════════════════════════════ */

.promise-card {
    transform-style: preserve-3d;
    transition: var(--3d-transition);
    cursor: pointer;
    position: relative;
}

.promise-card:hover {
    transform: perspective(800px) rotateX(-8deg) rotateY(5deg) translateZ(20px) scale(1.06);
    box-shadow:
        0 25px 50px rgba(217, 123, 154, 0.2),
        0 10px 20px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.promise-icon-wrap {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.promise-card:hover .promise-icon-wrap {
    transform: translateZ(20px) scale(1.25) rotateY(360deg);
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ══════════════════════════════════════════════════════
   AGE CARDS 3D (Circular)
══════════════════════════════════════════════════════ */

.age-card {
    display: block;
    text-align: center;
    transition: var(--3d-transition);
}

.age-card:hover {
    transform: translateY(-14px);
}

.age-circle {
    transition: var(--3d-transition);
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(217, 123, 154, 0.2),
        0 4px 10px rgba(0,0,0,0.08);
}

.age-card:hover .age-circle {
    transform: perspective(600px) rotateX(-10deg) rotateY(8deg) translateZ(10px);
    box-shadow:
        0 25px 55px rgba(217, 123, 154, 0.4),
        0 12px 25px rgba(0,0,0,0.12),
        var(--glow-pink);
}

.age-circle img {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.age-card:hover .age-circle img {
    transform: scale(1.12);
}

.age-title {
    transition: all 0.4s ease;
}

.age-card:hover .age-title {
    color: var(--color-button);
    text-shadow: 0 4px 12px rgba(217,123,154,0.3);
    transform: scale(1.05);
}

/* ══════════════════════════════════════════════════════
   CATEGORY CARDS 3D
══════════════════════════════════════════════════════ */

.category-card {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: var(--3d-transition);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        0 4px 10px rgba(217,123,154,0.1);
}

.category-card:hover {
    transform: perspective(1000px) rotateX(-5deg) rotateY(5deg) translateZ(25px) scale(1.03);
    box-shadow:
        0 35px 75px rgba(217, 123, 154, 0.32),
        0 15px 35px rgba(0,0,0,0.12),
        var(--glow-pink);
}

.category-card img {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

.category-card:hover img {
    transform: scale(1.1);
}

.category-overlay {
    background: linear-gradient(to top, rgba(217,123,154,0.92) 0%, rgba(184,95,125,0.5) 50%, transparent 100%);
    transition: all 0.4s ease;
}

.category-card:hover .category-overlay {
    background: linear-gradient(to top, rgba(184,95,125,0.98) 0%, rgba(217,123,154,0.7) 60%, rgba(217,123,154,0.1) 100%);
}

.category-overlay-title {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    text-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.category-card:hover .category-overlay-title {
    transform: translateY(-6px) scale(1.06);
    text-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

/* ══════════════════════════════════════════════════════
   PRODUCT CARDS 3D
══════════════════════════════════════════════════════ */

.product-card {
    transition: var(--3d-transition);
    position: relative;
    border-radius: var(--radius-lg);
    box-shadow:
        0 4px 15px rgba(217, 123, 154, 0.08),
        0 2px 6px rgba(0,0,0,0.04);
    will-change: transform;
}

.product-card::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 10%;
    right: 10%;
    height: 20px;
    background: rgba(217, 123, 154, 0.15);
    filter: blur(12px);
    border-radius: 50%;
    transition: all 0.5s ease;
    opacity: 0;
    z-index: -1;
}

.product-card:hover {
    transform: perspective(1000px) rotateX(-6deg) rotateY(4deg) translateZ(30px) scale(1.03);
    box-shadow:
        0 40px 80px rgba(217, 123, 154, 0.28),
        0 18px 35px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.product-card:hover::after {
    opacity: 1;
    bottom: -22px;
    left: 5%;
    right: 5%;
}

.product-img-wrapper img {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

.product-card:hover .product-img-wrapper img {
    transform: scale(1.08) translateY(-4px);
}

/* Product badge float */
.product-badge {
    position: absolute;
    top: 14px; left: 14px;
    animation: badge3dFloat 3s ease-in-out infinite;
    z-index: 5;
}

@keyframes badge3dFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.product-wishlist {
    transition: var(--3d-transition);
}

.product-wishlist:hover {
    transform: scale(1.35) rotate(10deg);
    color: #e74c3c !important;
}

/* ══════════════════════════════════════════════════════
   STAT CARDS 3D
══════════════════════════════════════════════════════ */

.stat-card {
    transition: var(--3d-transition);
    position: relative;
    overflow: visible;
}

.stat-card:hover {
    transform: perspective(800px) rotateX(-12deg) rotateY(6deg) translateZ(40px) scale(1.06);
    box-shadow:
        0 45px 85px rgba(217, 123, 154, 0.28),
        0 22px 42px rgba(0,0,0,0.1),
        inset 0 1px 0 rgba(255,255,255,0.9),
        var(--glow-pink);
}

.stat-number {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    text-shadow: 0 4px 15px rgba(217,123,154,0.3);
}

.stat-card:hover .stat-number {
    transform: scale(1.12);
    text-shadow:
        0 6px 20px rgba(217,123,154,0.5),
        var(--glow-pink);
}

/* ══════════════════════════════════════════════════════
   COLLECTION / FEATURED CARDS 3D
══════════════════════════════════════════════════════ */

.collection-card {
    transition: var(--3d-transition);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 15px 40px rgba(0,0,0,0.1),
        0 6px 15px rgba(217,123,154,0.1);
}

.collection-card:hover {
    transform: perspective(1200px) rotateX(-4deg) rotateY(5deg) translateZ(20px);
    box-shadow:
        0 45px 90px rgba(217, 123, 154, 0.32),
        0 22px 44px rgba(0,0,0,0.12);
}

.collection-card img {
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.collection-card:hover img {
    transform: scale(1.08);
}

.collection-content {
    transition: transform 0.4s ease;
}

.collection-card:hover .collection-content {
    transform: translateY(-6px);
}

/* ══════════════════════════════════════════════════════
   REVIEW CARDS 3D
══════════════════════════════════════════════════════ */

.review-card {
    transition: var(--3d-transition);
    position: relative;
    cursor: default;
}

.review-card::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 15%;
    right: 15%;
    height: 15px;
    background: rgba(217, 123, 154, 0.12);
    filter: blur(10px);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: -1;
}

.review-card:hover {
    transform: perspective(900px) rotateX(-8deg) rotateY(4deg) translateZ(25px) scale(1.04);
    box-shadow:
        0 32px 65px rgba(217, 123, 154, 0.22),
        0 14px 28px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,1);
}

.review-card:hover::after {
    opacity: 1;
    bottom: -18px;
}

.review-quote {
    transition: transform 0.4s ease;
}

.review-card:hover .review-quote {
    transform: scale(1.2) rotate(-5deg);
}

.review-stars i {
    transition: transform 0.2s ease;
}

.review-card:hover .review-stars i:nth-child(1) { transform: scale(1.3) rotate(-5deg); transition-delay: 0s; }
.review-card:hover .review-stars i:nth-child(2) { transform: scale(1.3) rotate(5deg);  transition-delay: 0.05s; }
.review-card:hover .review-stars i:nth-child(3) { transform: scale(1.4) rotate(-3deg); transition-delay: 0.1s; }
.review-card:hover .review-stars i:nth-child(4) { transform: scale(1.3) rotate(3deg);  transition-delay: 0.15s; }
.review-card:hover .review-stars i:nth-child(5) { transform: scale(1.3) rotate(-5deg); transition-delay: 0.2s; }

/* ══════════════════════════════════════════════════════
   INSTAGRAM GRID 3D
══════════════════════════════════════════════════════ */

.insta-item {
    transition: var(--3d-transition);
    position: relative;
    overflow: hidden;
}

.insta-item:hover {
    transform: perspective(600px) rotateX(-5deg) rotateY(5deg) translateZ(15px) scale(1.05);
    box-shadow:
        0 28px 55px rgba(217, 123, 154, 0.32),
        0 12px 22px rgba(0,0,0,0.1);
    z-index: 10;
}

.insta-item img {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.insta-item:hover img {
    transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════
   NAVBAR 3D
══════════════════════════════════════════════════════ */

.nav-icon-btn {
    transition: var(--3d-transition);
}

.nav-icon-btn:hover {
    transform: translateY(-3px) scale(1.15);
    box-shadow: 0 8px 20px rgba(217,123,154,0.25);
}

.logo-mask {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.logo-mask:hover {
    transform: perspective(400px) rotateY(-8deg) scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(217,123,154,0.4));
}

/* ══════════════════════════════════════════════════════
   FOOTER 3D LINKS
══════════════════════════════════════════════════════ */

.footer-links li a {
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    display: inline-block;
}

.footer-links li a:hover {
    transform: translateX(8px) scale(1.05);
    text-shadow: 0 2px 8px rgba(255,255,255,0.2);
}

.footer-social a {
    transition: var(--3d-transition);
    display: inline-flex !important;
}

.footer-social a:hover {
    transform: translateY(-7px) rotateY(15deg) scale(1.25);
    box-shadow: 0 12px 28px rgba(255,255,255,0.15);
}

/* ══════════════════════════════════════════════════════
   NEWSLETTER SECTION 3D
══════════════════════════════════════════════════════ */

.newsletter-input {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.newsletter-input:focus {
    transform: scale(1.02);
    box-shadow:
        0 0 0 3px rgba(255,255,255,0.3),
        0 10px 30px rgba(0,0,0,0.1);
}

.btn-newsletter {
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-newsletter:hover {
    transform: translateY(-4px) scale(1.07);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.2),
        0 4px 12px rgba(0,0,0,0.1);
}

/* ══════════════════════════════════════════════════════
   SECTION TITLES 3D TEXT EFFECT
══════════════════════════════════════════════════════ */

.section-title {
    transition: all 0.4s ease;
}

.section-title:hover {
    text-shadow:
        3px 3px 0 rgba(217,123,154,0.2),
        6px 6px 0 rgba(217,123,154,0.12),
        9px 9px 0 rgba(217,123,154,0.06),
        0 15px 30px rgba(217,123,154,0.15);
    transform: scale(1.02);
}

/* ══════════════════════════════════════════════════════
   HERO IMAGE FLOAT ANIMATION
══════════════════════════════════════════════════════ */

.hero-img-wrapper {
    filter: drop-shadow(0 30px 60px rgba(217,123,154,0.35));
    animation: heroImgFloat3d 6s ease-in-out infinite;
}

@keyframes heroImgFloat3d {
    0%, 100% {
        transform: rotateX(2deg) rotateY(-2deg) translateY(0);
        filter: drop-shadow(0 30px 60px rgba(217,123,154,0.35));
    }
    33% {
        transform: rotateX(-2deg) rotateY(2deg) translateY(-12px);
        filter: drop-shadow(0 42px 80px rgba(217,123,154,0.45));
    }
    66% {
        transform: rotateX(3deg) rotateY(-3deg) translateY(-6px);
        filter: drop-shadow(0 36px 70px rgba(217,123,154,0.4));
    }
}

/* ══════════════════════════════════════════════════════
   FLOATING STARS & LEAVES 3D
══════════════════════════════════════════════════════ */

.floating-star {
    filter: drop-shadow(0 4px 8px rgba(217,123,154,0.4));
}

.floating-leaf {
    filter: drop-shadow(0 4px 8px rgba(200,216,192,0.4));
}

/* ══════════════════════════════════════════════════════
   ORGANIC BLOB MORPHING
══════════════════════════════════════════════════════ */

.organic-blob {
    animation: blobMorph3d 12s ease-in-out infinite !important;
}

@keyframes blobMorph3d {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: rotate(90deg) scale(1.05); }
    50%       { border-radius: 50% 60% 30% 60% / 40% 30% 70% 50%; transform: rotate(180deg) scale(0.95); }
    75%       { border-radius: 40% 70% 60% 30% / 60% 40% 50% 70%; transform: rotate(270deg) scale(1.02); }
}

/* ══════════════════════════════════════════════════════
   MEGA MENU 3D DROP
══════════════════════════════════════════════════════ */

@keyframes megaMenuDrop3d {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateX(-15deg) translateY(-20px) scaleY(0.9);
    }
    100% {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg) translateY(0) scaleY(1);
    }
}

.mega-menu {
    transform-origin: top center;
    animation: megaMenuDrop3d 0.4s cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.mega-menu-column .dropdown-item:hover {
    transform: translateX(8px) scale(1.02) !important;
}

/* ══════════════════════════════════════════════════════
   CURSOR GLOW
══════════════════════════════════════════════════════ */

.cursor-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217,123,154,0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    mix-blend-mode: multiply;
}

/* ══════════════════════════════════════════════════════
   CART & CHECKOUT 3D
══════════════════════════════════════════════════════ */

.cart-item:hover,
.order-card:hover {
    transform: perspective(800px) rotateX(-3deg) translateZ(10px);
    box-shadow: 0 18px 40px rgba(217,123,154,0.15);
    transition: var(--3d-transition);
}

/* ══════════════════════════════════════════════════════
   INPUT FOCUS 3D
══════════════════════════════════════════════════════ */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
textarea:focus,
select:focus {
    transform: scale(1.01);
    outline: none;
    box-shadow:
        0 0 0 2px var(--color-button),
        0 8px 20px rgba(217,123,154,0.18);
    transition: all 0.3s ease;
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE — REDUCE 3D INTENSITY
══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .product-card:hover,
    .category-card:hover,
    .review-card:hover,
    .stat-card:hover {
        transform: perspective(800px) rotateX(-3deg) rotateY(2deg) translateZ(10px) scale(1.02);
    }
    .promise-card:hover {
        transform: perspective(600px) rotateX(-4deg) rotateY(2deg) translateZ(10px) scale(1.03);
    }
    .age-card:hover {
        transform: translateY(-8px);
    }
    .cursor-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}