:root{ --black:#040403; --black2:#080705; --panel:#0d0a07; --gold:#d8a349; --gold2:#f4ce7d; --gold3:#8c5e25; --cream:#f4e9da; --muted:#b9aa97; --border:rgba(216,163,73,.4); --soft:rgba(216,163,73,.15); --serif:"Cormorant Garamond",serif; --script:"Great Vibes",cursive; --sans:"Montserrat",sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:radial-gradient(circle at top,rgba(150,90,20,.08),transparent 35%),var(--black); color:var(--cream); font-family:var(--sans); line-height:1.65; overflow-x:hidden } a{text-decoration:none;color:inherit} button,input,select,textarea{font:inherit} button{cursor:pointer} .container{width:min(92%,1180px);margin:auto} .narrow{max-width:850px} .section{padding:100px 0} .dark{background:#080705} h1,h2,h3,h4{font-family:var(--serif);font-weight:500} h2{color:var(--gold2);font-size:clamp(2.5rem,5vw,4.1rem);line-height:1} .eyebrow{color:var(--gold);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:12px} .lead{font-family:var(--serif);font-size:1.35rem;color:#fff9ef} .heading{text-align:center;max-width:700px;margin:0 auto 55px} .heading p:last-child{color:var(--muted);margin-top:13px} .diamond{color:var(--gold);margin:18px 0} .small-line,.gold-line{height:1px;background:linear-gradient(90deg,var(--gold),transparent)} .small-line{width:120px;margin:24px 0} .gold-line{width:220px;margin:24px 0 28px} .header{ position:fixed; z-index:1000; width:100%; background:rgba(3,3,3,.86); border-bottom:1px solid rgba(216,163,73,.12); backdrop-filter:blur(12px) } .nav-wrap{width:min(94%,1250px);height:84px;margin:auto;display:flex;align-items:center;justify-content:space-between} .logo{display:flex;align-items:center;color:var(--gold2)} .big-logo{font-family:var(--serif);font-size:4rem;line-height:.7} .logo>span:last-child{display:flex;flex-direction:column;line-height:.8;margin-left:-8px} .logo b{font-family:var(--serif);font-size:1.35rem;font-weight:500} .logo em{font-family:var(--script);font-size:1.55rem} .logo small{font-size:.4rem;letter-spacing:.4em} nav{display:flex;align-items:center;gap:25px} nav a{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em} .book-nav{padding:10px 18px;background:linear-gradient(135deg,var(--gold2),var(--gold3));color:#120b05} .menu-btn{display:none;width:38px;background:none;border:0} .menu-btn span{display:block;height:1px;background:var(--gold);margin:7px 0} .hero{ min-height:100vh; padding-top:84px; display:flex; align-items:center; position:relative; background: radial-gradient(circle at 75% 45%,rgba(170,103,24,.2),transparent 32%), linear-gradient(110deg,#020202,#090704 67%,#020202) } .hero-inner{width:min(92%,1250px);margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:55px;align-items:center} .brand-lockup{display:inline-block;color:var(--gold2)} .brand-lockup>div:first-child{height:120px;display:flex;align-items:center} .hero-n{font-family:var(--serif);font-size:10.5rem;line-height:.7;background:linear-gradient(145deg,#ffe39a,#a56d27);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .hero-kaay{font-family:var(--serif);font-size:3.6rem;margin-left:-20px;margin-top:45px} .hero-henna{font-family:var(--script);font-size:5.2rem;line-height:.75;margin-left:70px} .hero-beauty{margin-left:95px;margin-top:17px;letter-spacing:.55em;font-size:.85rem} .hero h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.18} .hero h1 span{color:var(--gold2)} .hero-copy>p{color:var(--muted);max-width:560px;margin:22px 0 30px} .buttons{display:flex;gap:13px;flex-wrap:wrap} .btn{display:inline-block;padding:14px 23px;border:1px solid var(--gold);font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;transition:.25s} .btn:hover{transform:translateY(-2px)} .gold{background:linear-gradient(135deg,var(--gold2),var(--gold3));color:#150e06} .outline{color:var(--gold2)} .outline:hover{background:var(--gold);color:#000} .hero-art{ height:650px; border:1px solid var(--border); border-radius:48% 48% 5px 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background: radial-gradient(circle at 55% 35%,rgba(216,163,73,.18),transparent 18%), radial-gradient(circle at 50% 75%,rgba(120,75,20,.2),transparent 27%), linear-gradient(145deg,#120d07,#030302) } .art-symbol{font-size:9rem;color:rgba(216,163,73,.45)} .art-text h3{font-size:2.3rem;color:var(--gold2)} .art-text p{color:var(--muted)} .features{display:grid;grid-template-columns:repeat(4,1fr);background:#070604;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .features article{text-align:center;padding:34px 18px;border-right:1px solid var(--soft)} .features article:last-child{border-right:0} .features span,.why span{width:60px;height:60px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--gold);font-size:1.4rem} .features h3,.why h3{font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;color:var(--gold2)} .features p,.why p{color:var(--muted);font-family:var(--serif);margin-top:6px} .split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .image-frame{padding:12px;border:1px solid var(--gold3)} .placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(210,150,60,.13),transparent 35%),linear-gradient(150deg,#171109,#050504)} .placeholder.tall{height:610px} .placeholder span{font-size:7rem;color:rgba(216,163,73,.4)} .placeholder h3{font-size:2rem;color:var(--gold2)} .placeholder p{color:var(--muted)} .split>div:last-child>p{margin-top:20px} .split h2 span{display:block} .signature{font-family:var(--script);font-size:2rem;color:var(--gold);margin-top:30px} .services{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .service{display:grid;grid-template-columns:.55fr 1.45fr;min-height:245px;border:1px solid var(--border);background:linear-gradient(145deg,#0e0b08,#060504);transition:.25s} .service:hover{transform:translateY(-3px);border-color:var(--gold)} .service-number{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:4.8rem;color:rgba(216,163,73,.33);background:radial-gradient(circle,rgba(216,163,73,.12),transparent 40%)} .service>div:last-child{padding:28px;display:flex;flex-direction:column;justify-content:center} .service h3{font-size:1.55rem;text-transform:uppercase;color:var(--gold2)} .service p{color:var(--muted);font-size:.86rem;margin:10px 0 16px} .service strong{color:var(--gold);font-size:.68rem;letter-spacing:.13em} .design-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;border:1px solid var(--border)} .design-grid article{text-align:center;background:#090705;padding-bottom:20px} .design-art{height:320px;display:flex;align-items:center;justify-content:center;font-size:9rem;color:rgba(216,163,73,.42);background:radial-gradient(circle,rgba(198,126,36,.16),transparent 30%),linear-gradient(140deg,#181007,#030302)} .design-grid h3{font-size:1.3rem;text-transform:uppercase;color:var(--gold2);margin-top:17px} .design-grid p{font-family:var(--serif);color:var(--muted)} .filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px} .filter{border:1px solid var(--border);background:none;color:var(--gold);padding:8px 17px;font-size:.64rem;text-transform:uppercase;letter-spacing:.13em} .filter.active,.filter:hover{background:var(--gold);color:#100a04} .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .gallery-item{height:315px;border:1px solid rgba(216,163,73,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(200,132,38,.16),transparent 28%),linear-gradient(145deg,#171006,#030302)} .gallery-item span{font-size:6rem;color:rgba(216,163,73,.45)} .gallery-item b{font-family:var(--serif);font-size:1.4rem;color:var(--gold2);font-weight:500} .gallery-item.hidden{display:none} .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .price-box{padding:34px 27px;border:1px solid var(--border);background:linear-gradient(145deg,#100d09,#060504)} .price-box h3{text-align:center;font-size:2rem;text-transform:uppercase;color:var(--gold2);padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--soft)} .price-box>div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dotted rgba(216,163,73,.17);font-family:var(--serif);font-size:1.04rem} .price-box b{color:var(--gold);white-space:nowrap} .price-note{text-align:center;color:var(--muted);font-size:.78rem;max-width:680px;margin:30px auto 0} .why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .why article{text-align:center;padding:28px 18px} .why span{width:76px;height:76px;font-size:1.8rem} .aftercare{border-top:1px solid var(--border)} .aftercare>div{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:27px 0;border-bottom:1px solid var(--border)} .aftercare>div>span{font-family:var(--serif);font-size:3rem;color:rgba(216,163,73,.34)} .aftercare section h3{font-size:1.45rem;color:var(--gold2)} .aftercare section p{color:var(--muted)} .testimonial{display:grid;grid-template-columns:50px 1fr 50px;align-items:center;border:1px solid var(--border);min-height:275px;padding:30px 10px} .testimonial button{background:none;border:0;color:var(--gold);font-size:3rem} .review{display:none;text-align:center} .review.active{display:block} .quote{font-size:5rem;line-height:.6;color:var(--gold);font-family:var(--serif)} .review p{font-family:var(--serif);font-size:1.4rem;max-width:620px;margin:auto} .review strong{display:block;color:var(--gold);font-family:var(--serif);font-weight:400;margin-top:20px} .contact{background:radial-gradient(circle at 80% 40%,rgba(183,111,25,.1),transparent 30%)} .contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px} .contact-row{display:flex;align-items:center;gap:15px;margin:21px 0} .contact-row>span{width:48px;height:48px;flex:0 0 48px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold)} .contact-row>div{display:flex;flex-direction:column} .contact-row small{color:var(--gold);font-size:.6rem;letter-spacing:.13em} .booking{border:1px solid var(--border);background:linear-gradient(145deg,#110d09,#050403);padding:40px} .booking h3{text-align:center;text-transform:uppercase;font-size:2rem;color:var(--gold2);margin-bottom:25px} .form-two{display:grid;grid-template-columns:1fr 1fr;gap:15px} .booking label{display:block;margin-bottom:16px} .booking label>span{display:block;color:var(--gold);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px} .booking input,.booking select,.booking textarea{width:100%;padding:13px;background:#080705;color:var(--cream);border:1px solid rgba(216,163,73,.28);outline:none} .booking input:focus,.booking select:focus,.booking textarea:focus{border-color:var(--gold)} .submit{width:100%} #formMessage{text-align:center;color:var(--gold2);margin-top:15px} .final{text-align:center;padding:110px 20px;background:radial-gradient(circle,rgba(177,108,24,.16),transparent 48%),#050403;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .final p{font-family:var(--serif);font-size:2rem} .final h2{font-family:var(--script);font-size:clamp(4rem,8vw,7rem);font-weight:400} .final span{display:block;color:var(--muted);margin:10px 0 27px} footer{background:#020202;padding-top:62px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px} .footer-logo{font-family:var(--serif);font-size:2.4rem;color:var(--gold2)} .footer-logo em{display:block;font-family:var(--script);font-size:2rem} .footer-logo small{display:block;font-family:var(--sans);font-size:.46rem;letter-spacing:.4em} .footer-grid p{color:var(--muted);font-family:var(--serif);margin-top:15px} .footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:8px} .footer-grid h4{font-family:var(--sans);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .footer-grid a{font-size:.79rem;color:var(--muted)} .footer-bottom{border-top:1px solid rgba(216,163,73,.12);padding:18px 4%;display:flex;justify-content:space-between;color:#70675d;font-size:.66rem} #topButton{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border:1px solid var(--gold);background:#060504;color:var(--gold);opacity:0;pointer-events:none;transition:.25s} #topButton.visible{opacity:1;pointer-events:auto} @media(max-width:1000px){ .services{grid-template-columns:1fr} .design-grid{grid-template-columns:repeat(2,1fr)} .prices{grid-template-columns:1fr} .why{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .section{padding:72px 0} .nav-wrap{height:74px} .menu-btn{display:block} nav{display:none;position:absolute;top:74px;left:0;right:0;padding:27px;flex-direction:column;background:#050504;border-bottom:1px solid var(--border)} nav.open{display:flex} .hero{padding-top:105px} .hero-inner{grid-template-columns:1fr} .hero-copy{text-align:center} .gold-line{margin-left:auto;margin-right:auto} .buttons{justify-content:center} .hero-art{height:470px} .features{grid-template-columns:1fr 1fr} .split{grid-template-columns:1fr;gap:48px} .design-grid{grid-template-columns:1fr} .gallery{grid-template-columns:1fr 1fr} .contact-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr} } @media(max-width:520px){ .hero-n{font-size:6.5rem} .hero-kaay{font-size:2.2rem} .hero-henna{font-size:3.5rem;margin-left:35px} .hero-beauty{margin-left:50px} .service{grid-template-columns:1fr} .service-number{height:160px} .gallery{grid-template-columns:1fr} .why{grid-template-columns:1fr} .form-two{grid-template-columns:1fr} .booking{padding:27px 18px} .footer-grid{grid-template-columns:1fr;text-align:center} .footer-bottom{flex-direction:column;text-align:center;gap:5px} } /* ========================================================= NKAAY ART LAYER — KAi INJECTION 01 ========================================================= */ :root{ --nkaay-gold:#d4a54a; --nkaay-gold-light:#f1cf81; --nkaay-deep:#050505; } /* Soft luxury gold atmosphere */ body{ overflow-x:hidden; background: radial-gradient(circle at 85% 12%,rgba(212,165,74,.08),transparent 22rem), radial-gradient(circle at 10% 55%,rgba(212,165,74,.045),transparent 25rem), #050505; } /* Decorative henna artwork added from JS */ .kai-henna-art{ position:absolute; width:340px; height:340px; pointer-events:none; opacity:.16; z-index:0; } .kai-henna-art::before, .kai-henna-art::after{ content:""; position:absolute; inset:0; border-radius:50%; } .kai-henna-art::before{ background: repeating-conic-gradient( from 0deg, transparent 0deg 7deg, rgba(212,165,74,.9) 7deg 8deg, transparent 8deg 15deg ); -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 18.5% 20%, transparent 20.5% 31%, #000 31.5% 33%, transparent 33.5% 43%, #000 43.5% 45%, transparent 45.5% 100%); mask: radial-gradient(circle, transparent 0 18%, #000 18.5% 20%, transparent 20.5% 31%, #000 31.5% 33%, transparent 33.5% 43%, #000 43.5% 45%, transparent 45.5% 100%); } .kai-henna-art::after{ inset:21%; border:1px solid rgba(212,165,74,.8); box-shadow: 0 0 0 14px rgba(212,165,74,.035), 0 0 0 28px rgba(212,165,74,.025), 0 0 45px rgba(212,165,74,.08); } /* Left/right artwork positioning */ .kai-art-left{ top:18%; left:-170px; transform:rotate(-18deg); } .kai-art-right{ top:50%; right:-175px; transform:rotate(23deg); } /* Gold ornamental separators */ .kai-ornament{ display:flex; align-items:center; justify-content:center; gap:14px; width:min(520px,80%); margin:38px auto; opacity:.85; } .kai-ornament::before, .kai-ornament::after{ content:""; height:1px; flex:1; background:linear-gradient( 90deg, transparent, rgba(212,165,74,.7), transparent ); } .kai-ornament span{ color:var(--nkaay-gold); font-size:25px; line-height:1; transform:rotate(45deg); } /* Luxury text treatment */ .kai-gold-word{ color:var(--nkaay-gold-light); text-shadow:0 0 25px rgba(212,165,74,.13); } .kai-signature{ position:relative; padding:70px 24px; text-align:center; overflow:hidden; background: linear-gradient( 180deg, transparent, rgba(212,165,74,.035), transparent ); } .kai-signature::before{ content:""; position:absolute; width:260px; height:260px; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(212,165,74,.09); border-radius:50%; box-shadow: 0 0 0 28px rgba(212,165,74,.025), 0 0 0 58px rgba(212,165,74,.015); } .kai-signature-inner{ position:relative; z-index:2; max-width:720px; margin:auto; } .kai-signature-small{ display:block; margin-bottom:13px; font-family:Montserrat,sans-serif; font-size:.72rem; letter-spacing:.35em; text-transform:uppercase; color:rgba(255,255,255,.58); } .kai-signature-title{ margin:0; font-family:"Cormorant Garamond",serif; font-size:clamp(2rem,6vw,4rem); font-weight:500; line-height:1.02; color:#f5e7ca; } .kai-signature-script{ display:block; margin-top:9px; font-family:"Great Vibes",cursive; font-size:clamp(2.1rem,6vw,4.4rem); color:var(--nkaay-gold); } .kai-signature p{ max-width:560px; margin:20px auto 0; color:rgba(255,255,255,.67); font-family:Montserrat,sans-serif; font-weight:300; line-height:1.8; } /* Delicate button polish */ a[class*="btn"], button, .btn{ position:relative; overflow:hidden; } a[class*="btn"]::after, button::after, .btn::after{ content:""; position:absolute; top:-100%; left:-40%; width:25%; height:300%; transform:rotate(24deg); background:linear-gradient( 90deg, transparent, rgba(255,255,255,.22), transparent ); transition:left .7s ease; } a[class*="btn"]:hover::after, button:hover::after, .btn:hover::after{ left:130%; } /* Very restrained animation */ @keyframes kaiHennaFloat{ 0%,100%{transform:translateY(0) rotate(-18deg);} 50%{transform:translateY(-12px) rotate(-15deg);} } .kai-art-left{ animation:kaiHennaFloat 12s ease-in-out infinite; } @media(max-width:700px){ .kai-henna-art{ width:230px; height:230px; opacity:.12; } .kai-art-left{ left:-145px; } .kai-art-right{ right:-150px; } .kai-signature{ padding:55px 20px; } } @media(prefers-reduced-motion:reduce){ .kai-henna-art{ animation:none !important; } } /* ========================================================= NKAAY LIVE POLISH — KAi BATCH ========================================================= */ .kai-trust-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px; padding:18px 20px; border-top:1px solid rgba(212,165,74,.14); border-bottom:1px solid rgba(212,165,74,.14); background:rgba(255,255,255,.015); font-family:Montserrat,sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.68); } .kai-trust-strip span{ position:relative; padding-left:15px; } .kai-trust-strip span::before{ content:"✦"; position:absolute; left:0; color:#d4a54a; font-size:.7rem; } .kai-reveal{ opacity:0; transform:translateY(24px); transition: opacity .8s ease, transform .8s ease; } .kai-reveal.kai-visible{ opacity:1; transform:none; } .kai-hero-subline{ max-width:680px; margin:20px auto 0; padding:0 20px; font-family:"Cormorant Garamond",serif; font-size:clamp(1.1rem,2vw,1.45rem); line-height:1.55; color:rgba(255,255,255,.72); } .kai-footer-note{ margin-top:20px; font-family:Montserrat,sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); } @media(max-width:700px){ .kai-trust-strip{ gap:10px 18px; font-size:.65rem; letter-spacing:.1em; } } @media(prefers-reduced-motion:reduce){ .kai-reveal{ opacity:1; transform:none; transition:none; } } /* ========================================================= NKAAY TEMP GALLERY ========================================================= */ .kai-gallery{ max-width:1200px; margin:0 auto; padding:90px 24px; } .kai-gallery-heading{ text-align:center; margin-bottom:48px; } .kai-gallery-heading small{ display:block; margin-bottom:10px; font-family:Montserrat,sans-serif; font-size:.7rem; letter-spacing:.35em; color:#cda34e; text-transform:uppercase; } .kai-gallery-heading h2{ margin:0; font-family:"Cormorant Garamond",serif; font-size:clamp(2.3rem,6vw,4.5rem); font-weight:500; color:#f3e7cf; } .kai-gallery-heading p{ max-width:570px; margin:15px auto 0; line-height:1.8; color:rgba(255,255,255,.58); } .kai-gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .kai-gallery-card{ position:relative; overflow:hidden; border:1px solid rgba(212,165,74,.18); background:#090909; aspect-ratio:4/5; } .kai-gallery-card img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 1s ease,filter 1s ease; } .kai-gallery-card:hover img{ transform:scale(1.04); } .kai-gallery-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 180deg, transparent 50%, rgba(0,0,0,.38) ); } .kai-gallery-temp{ position:absolute; z-index:3; right:12px; top:12px; padding:6px 8px; border:1px solid rgba(212,165,74,.3); background:rgba(0,0,0,.6); font:500 .55rem Montserrat,sans-serif; letter-spacing:.12em; color:rgba(255,255,255,.65); text-transform:uppercase; } @media(max-width:760px){ .kai-gallery{ padding:65px 16px; } .kai-gallery-grid{ grid-template-columns:1fr; } .kai-gallery-card{ aspect-ratio:4/4.7; } } /* ========================================================= NKAAY WOW MOTION LAYER ========================================================= */ html{ scroll-behavior:smooth; } body{ position:relative; } /* ---------- INITIAL CINEMATIC REVEAL ---------- */ body.kai-loading{ overflow:hidden; } .kai-intro{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:#050505; transition: opacity 1.1s ease, visibility 1.1s ease; } .kai-intro.kai-intro-away{ opacity:0; visibility:hidden; pointer-events:none; } .kai-intro-inner{ text-align:center; transform:translateY(8px); animation:kaiIntroRise 1.4s ease forwards; } .kai-intro-n{ display:block; font-family:"Cormorant Garamond",serif; font-size:clamp(6rem,24vw,12rem); font-weight:500; line-height:.72; color:#d5a94f; text-shadow: 0 0 25px rgba(213,169,79,.18), 0 0 70px rgba(213,169,79,.10); } .kai-intro-name{ display:block; margin-top:28px; font-family:"Cormorant Garamond",serif; font-size:clamp(1.5rem,5vw,2.5rem); letter-spacing:.14em; color:#f5ead5; } .kai-intro-line{ width:0; height:1px; margin:18px auto 0; background:linear-gradient( 90deg, transparent, #d5a94f, transparent ); animation:kaiIntroLine 1.5s .25s ease forwards; } @keyframes kaiIntroRise{ from{ opacity:0; transform:translateY(30px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } } @keyframes kaiIntroLine{ to{width:220px;} } /* ---------- GOLD PARTICLES ---------- */ .kai-particles{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; } .kai-particle{ position:absolute; bottom:-30px; width:3px; height:3px; border-radius:50%; background:#e0b75f; opacity:0; box-shadow:0 0 8px rgba(224,183,95,.7); animation:kaiParticleRise linear infinite; } @keyframes kaiParticleRise{ 0%{ opacity:0; transform:translate3d(0,0,0) scale(.7); } 10%{ opacity:.45; } 80%{ opacity:.18; } 100%{ opacity:0; transform:translate3d(35px,-110vh,0) scale(1.4); } } /* ---------- STRONGER SCROLL REVEALS ---------- */ .kai-wow-reveal{ opacity:0; transform:translateY(55px) scale(.975); filter:blur(7px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), filter 1s ease; } .kai-wow-reveal.kai-wow-visible{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } .kai-wow-reveal:nth-of-type(even){ transition-delay:.08s; } /* ---------- HEADLINE GOLD SWEEP ---------- */ .kai-gold-sweep{ position:relative; display:inline-block; color:#dcb662; background: linear-gradient( 105deg, #a77c30 0%, #f4d78f 35%, #fff1bf 48%, #c99c42 62%, #e4bf6c 100% ); background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:kaiGoldSweep 5s linear infinite; } @keyframes kaiGoldSweep{ 0%{background-position:220% center;} 100%{background-position:-220% center;} } /* ---------- HERO DEPTH ---------- */ .kai-hero-wow{ position:relative; isolation:isolate; overflow:hidden; } .kai-hero-wow::before{ content:""; position:absolute; z-index:-1; width:550px; height:550px; left:50%; top:45%; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient( circle, rgba(215,171,82,.13), rgba(215,171,82,.035) 34%, transparent 68% ); animation:kaiAura 5s ease-in-out infinite; } @keyframes kaiAura{ 0%,100%{ transform:translate(-50%,-50%) scale(.92); opacity:.5; } 50%{ transform:translate(-50%,-50%) scale(1.13); opacity:1; } } /* ---------- GALLERY CINEMA ---------- */ .kai-gallery-card{ transform:translateZ(0); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, border-color .6s ease; } .kai-gallery-card:hover{ transform:translateY(-10px) scale(1.025); border-color:rgba(224,183,95,.58); box-shadow: 0 24px 55px rgba(0,0,0,.5), 0 0 35px rgba(212,165,74,.10); } .kai-gallery-card img{ transition: transform 1.25s cubic-bezier(.2,.8,.2,1), filter 1s ease; } .kai-gallery-card:hover img{ transform:scale(1.09); filter:brightness(1.08); } /* ---------- LUXURY BORDER GLOW ---------- */ .kai-gallery-card::before{ content:""; position:absolute; inset:-1px; z-index:4; pointer-events:none; opacity:0; border:1px solid transparent; background: linear-gradient( 120deg, transparent 15%, rgba(238,202,119,.6), transparent 55% ) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .6s ease; } .kai-gallery-card:hover::before{ opacity:1; } /* ---------- BUTTON PULSE ---------- */ .kai-wow-button{ animation:kaiButtonPulse 3s ease-in-out infinite; } @keyframes kaiButtonPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(210,166,73,0), 0 10px 35px rgba(0,0,0,.2); } 50%{ box-shadow: 0 0 0 7px rgba(210,166,73,.04), 0 0 30px rgba(210,166,73,.22); } } /* ---------- ORNAMENT ROTATION ---------- */ .kai-henna-art{ transition:transform .3s linear; } .kai-art-right{ animation:kaiArtRight 18s ease-in-out infinite; } @keyframes kaiArtRight{ 0%,100%{ transform:rotate(23deg) scale(1); } 50%{ transform:rotate(29deg) scale(1.05); } } /* ---------- MOBILE ---------- */ @media(max-width:700px){ .kai-wow-reveal{ transform:translateY(38px) scale(.985); filter:blur(4px); } .kai-particle:nth-child(n+15){ display:none; } .kai-gallery-card:hover{ transform:none; } .kai-hero-wow::before{ width:360px; height:360px; } } /* Accessibility */ @media(prefers-reduced-motion:reduce){ .kai-intro, .kai-particle, .kai-gold-sweep, .kai-hero-wow::before, .kai-wow-button, .kai-art-right{ animation:none !important; } .kai-wow-reveal{ opacity:1; transform:none; filter:none; } } /* ========================================================= NKAAY WOW MOTION LAYER ========================================================= */ html{ scroll-behavior:smooth; } body{ position:relative; } /* ---------- INITIAL CINEMATIC REVEAL ---------- */ body.kai-loading{ overflow:hidden; } .kai-intro{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:#050505; transition: opacity 1.1s ease, visibility 1.1s ease; } .kai-intro.kai-intro-away{ opacity:0; visibility:hidden; pointer-events:none; } .kai-intro-inner{ text-align:center; transform:translateY(8px); animation:kaiIntroRise 1.4s ease forwards; } .kai-intro-n{ display:block; font-family:"Cormorant Garamond",serif; font-size:clamp(6rem,24vw,12rem); font-weight:500; line-height:.72; color:#d5a94f; text-shadow: 0 0 25px rgba(213,169,79,.18), 0 0 70px rgba(213,169,79,.10); } .kai-intro-name{ display:block; margin-top:28px; font-family:"Cormorant Garamond",serif; font-size:clamp(1.5rem,5vw,2.5rem); letter-spacing:.14em; color:#f5ead5; } .kai-intro-line{ width:0; height:1px; margin:18px auto 0; background:linear-gradient( 90deg, transparent, #d5a94f, transparent ); animation:kaiIntroLine 1.5s .25s ease forwards; } @keyframes kaiIntroRise{ from{ opacity:0; transform:translateY(30px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } } @keyframes kaiIntroLine{ to{width:220px;} } /* ---------- GOLD PARTICLES ---------- */ .kai-particles{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; } .kai-particle{ position:absolute; bottom:-30px; width:3px; height:3px; border-radius:50%; background:#e0b75f; opacity:0; box-shadow:0 0 8px rgba(224,183,95,.7); animation:kaiParticleRise linear infinite; } @keyframes kaiParticleRise{ 0%{ opacity:0; transform:translate3d(0,0,0) scale(.7); } 10%{ opacity:.45; } 80%{ opacity:.18; } 100%{ opacity:0; transform:translate3d(35px,-110vh,0) scale(1.4); } } /* ---------- STRONGER SCROLL REVEALS ---------- */ .kai-wow-reveal{ opacity:0; transform:translateY(55px) scale(.975); filter:blur(7px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), filter 1s ease; } .kai-wow-reveal.kai-wow-visible{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } .kai-wow-reveal:nth-of-type(even){ transition-delay:.08s; } /* ---------- HEADLINE GOLD SWEEP ---------- */ .kai-gold-sweep{ position:relative; display:inline-block; color:#dcb662; background: linear-gradient( 105deg, #a77c30 0%, #f4d78f 35%, #fff1bf 48%, #c99c42 62%, #e4bf6c 100% ); background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:kaiGoldSweep 5s linear infinite; } @keyframes kaiGoldSweep{ 0%{background-position:220% center;} 100%{background-position:-220% center;} } /* ---------- HERO DEPTH ---------- */ .kai-hero-wow{ position:relative; isolation:isolate; overflow:hidden; } .kai-hero-wow::before{ content:""; position:absolute; z-index:-1; width:550px; height:550px; left:50%; top:45%; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient( circle, rgba(215,171,82,.13), rgba(215,171,82,.035) 34%, transparent 68% ); animation:kaiAura 5s ease-in-out infinite; } @keyframes kaiAura{ 0%,100%{ transform:translate(-50%,-50%) scale(.92); opacity:.5; } 50%{ transform:translate(-50%,-50%) scale(1.13); opacity:1; } } /* ---------- GALLERY CINEMA ---------- */ .kai-gallery-card{ transform:translateZ(0); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease, border-color .6s ease; } .kai-gallery-card:hover{ transform:translateY(-10px) scale(1.025); border-color:rgba(224,183,95,.58); box-shadow: 0 24px 55px rgba(0,0,0,.5), 0 0 35px rgba(212,165,74,.10); } .kai-gallery-card img{ transition: transform 1.25s cubic-bezier(.2,.8,.2,1), filter 1s ease; } .kai-gallery-card:hover img{ transform:scale(1.09); filter:brightness(1.08); } /* ---------- LUXURY BORDER GLOW ---------- */ .kai-gallery-card::before{ content:""; position:absolute; inset:-1px; z-index:4; pointer-events:none; opacity:0; border:1px solid transparent; background: linear-gradient( 120deg, transparent 15%, rgba(238,202,119,.6), transparent 55% ) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .6s ease; } .kai-gallery-card:hover::before{ opacity:1; } /* ---------- BUTTON PULSE ---------- */ .kai-wow-button{ animation:kaiButtonPulse 3s ease-in-out infinite; } @keyframes kaiButtonPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(210,166,73,0), 0 10px 35px rgba(0,0,0,.2); } 50%{ box-shadow: 0 0 0 7px rgba(210,166,73,.04), 0 0 30px rgba(210,166,73,.22); } } /* ---------- ORNAMENT ROTATION ---------- */ .kai-henna-art{ transition:transform .3s linear; } .kai-art-right{ animation:kaiArtRight 18s ease-in-out infinite; } @keyframes kaiArtRight{ 0%,100%{ transform:rotate(23deg) scale(1); } 50%{ transform:rotate(29deg) scale(1.05); } } /* ---------- MOBILE ---------- */ @media(max-width:700px){ .kai-wow-reveal{ transform:translateY(38px) scale(.985); filter:blur(4px); } .kai-particle:nth-child(n+15){ display:none; } .kai-gallery-card:hover{ transform:none; } .kai-hero-wow::before{ width:360px; height:360px; } } /* Accessibility */ @media(prefers-reduced-motion:reduce){ .kai-intro, .kai-particle, .kai-gold-sweep, .kai-hero-wow::before, .kai-wow-button, .kai-art-right{ animation:none !important; } .kai-wow-reveal{ opacity:1; transform:none; filter:none; } } /* ========================================================= NKAAY INTRO V2 — VERY OBVIOUS VERSION ========================================================= */ #kai-intro-v2{ position:fixed !important; inset:0 !important; z-index:2147483647 !important; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; perspective:900px; transition: opacity 1s ease, visibility 1s ease; } #kai-intro-v2.kai-v2-out{ opacity:0; visibility:hidden; pointer-events:none; } /* MASSIVE NADIA */ #kai-intro-v2 .nadia-v2{ position:absolute; left:50%; top:50%; font-family:"Great Vibes",cursive; font-size:clamp(7rem,30vw,18rem); white-space:nowrap; color:#e8bd5f; text-shadow: 0 0 15px #e0ad43, 0 0 50px rgba(224,173,67,.55), 0 0 110px rgba(224,173,67,.3); transform: translate(-50%,-50%) scale(.15); opacity:0; animation: nadiaV2 3.1s cubic-bezier(.2,.7,.15,1) forwards; } @keyframes nadiaV2{ 0%{ opacity:0; transform: translate(-50%,-50%) translateX(-100vw) rotateY(0deg) rotateZ(-25deg) scale(.15); filter:blur(15px); } 15%{ opacity:1; } 38%{ transform: translate(-50%,-50%) translateX(0) rotateY(360deg) rotateZ(8deg) scale(1.15); filter:blur(0); } 62%{ transform: translate(-50%,-50%) rotateY(720deg) rotateZ(-8deg) scale(.9); } 82%{ opacity:1; transform: translate(-50%,-50%) rotateY(1080deg) rotateZ(0deg) scale(1.4); filter:blur(1px); } 100%{ opacity:0; transform: translate(-50%,-50%) rotateY(1440deg) scale(4); filter:blur(30px); } } /* HUGE GOLD BLAST */ #kai-intro-v2 .blast-v2{ position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:50%; background:#fff4c6; opacity:0; animation: blastV2 .9s 2.55s ease-out forwards; } @keyframes blastV2{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.1); } 25%{ opacity:1; box-shadow: 0 0 40px 25px #fff0b2, 0 0 120px 70px rgba(231,184,79,.8), 0 0 300px 180px rgba(231,184,79,.38); transform: translate(-50%,-50%) scale(1); } 100%{ opacity:0; box-shadow: 0 0 100px 70px rgba(255,240,178,0), 0 0 280px 200px rgba(231,184,79,0); transform: translate(-50%,-50%) scale(20); } } /* NKAAY MATERIALISE */ #kai-intro-v2 .nkaay-v2{ position:absolute; left:50%; top:50%; opacity:0; transform: translate(-50%,-50%) scale(5); filter:blur(40px); font-family:"Cormorant Garamond",serif; font-size:clamp(6rem,27vw,17rem); font-weight:600; letter-spacing:.05em; background: linear-gradient( 110deg, #8d6426, #d9aa4d, #fff0ac, #d29c37, #f1d17d ); background-size:250% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation: nkaayV2 1.5s 2.95s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 3.5s linear infinite; } @keyframes nkaayV2{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(5); filter:blur(40px); } 55%{ opacity:1; transform: translate(-50%,-50%) scale(.85); filter:blur(0); } 75%{ transform: translate(-50%,-50%) scale(1.12); } 100%{ opacity:1; transform: translate(-50%,-50%) scale(1); filter:blur(0); } } @keyframes nkaayV2Shine{ from{ background-position:250% center; } to{ background-position:-250% center; } } /* SUBTITLE */ #kai-intro-v2 .sub-v2{ position:absolute; left:50%; top:68%; transform: translateX(-50%) translateY(30px); white-space:nowrap; opacity:0; font-family:Montserrat,sans-serif; font-size:clamp(.65rem,2.4vw,1rem); letter-spacing:.55em; color:#fff; text-transform:uppercase; animation: subV2 .8s 4s ease forwards; } @keyframes subV2{ to{ opacity:.75; transform: translateX(-50%) translateY(0); } } /* GOLD STARBURST */ #kai-intro-v2 .star-v2{ position:absolute; left:50%; top:50%; width:2px; height:2px; background:#efc565; border-radius:50%; opacity:0; box-shadow: 90px 0 #efc565, -90px 0 #efc565, 0 90px #efc565, 0 -90px #efc565, 65px 65px #efc565, -65px 65px #efc565, 65px -65px #efc565, -65px -65px #efc565; animation: starV2 1.2s 2.7s ease-out forwards; } @keyframes starV2{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.1) rotate(0deg); } 35%{ opacity:1; } 100%{ opacity:0; transform: translate(-50%,-50%) scale(4) rotate(180deg); } } @media(max-width:700px){ #kai-intro-v2 .sub-v2{ top:64%; } } /* ========================================================= NKAAY SALAAM PRE-INTRO Runs BEFORE existing Nadia V2 animation ========================================================= */ #kai-intro-v2 .salaam-v2{ position:absolute; left:50%; top:50%; z-index:20; width:90%; transform: translate(-50%,-50%) scale(.88); text-align:center; font-family:"Cormorant Garamond",serif; font-size:clamp(1.8rem,7vw,4.5rem); font-weight:400; letter-spacing:.025em; color:#f5ead5; text-shadow: 0 0 15px rgba(225,183,94,.22), 0 0 45px rgba(225,183,94,.10); opacity:0; animation: salaamV2 2.3s ease forwards; } #kai-intro-v2 .salaam-v2 span{ color:#e8bd5f; font-family:"Great Vibes",cursive; font-size:1.25em; } @keyframes salaamV2{ 0%{ opacity:0; transform: translate(-50%,-50%) translateY(20px) scale(.88); filter:blur(8px); } 25%{ opacity:1; transform: translate(-50%,-50%) translateY(0) scale(1); filter:blur(0); } 68%{ opacity:1; transform: translate(-50%,-50%) scale(1); } 100%{ opacity:0; transform: translate(-50%,-50%) scale(1.08); filter:blur(10px); } } /* Delay ONLY the existing V2 elements by 2.3 seconds. Their original animations remain otherwise identical. */ #kai-intro-v2 .nadia-v2{ animation-delay:2.3s; } #kai-intro-v2 .blast-v2{ animation-delay:4.85s; } #kai-intro-v2 .star-v2{ animation-delay:5s; } #kai-intro-v2 .nkaay-v2{ animation: nkaayV2 1.5s 5.25s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 5.8s linear infinite; } #kai-intro-v2 .sub-v2{ animation: subV2 .8s 6.3s ease forwards; } /* ========================================================= NKAAY NADIA INTRO — FINAL TIMING PASS Hi Salaam -> It's -> Nadia -> NKAAY ========================================================= */ /* Slightly softer final transition into the actual website */ #kai-intro-v2{ transition: opacity 1.6s ease, visibility 1.6s ease !important; } /* --------------------------------------------------------- FRAME 1 Hi, Salaam a Laykom Slow entrance. Long readable hold. Soft departure. --------------------------------------------------------- */ #kai-intro-v2 .salaam-v2{ animation: nkaaySalaamFinal 3.55s cubic-bezier(.2,.7,.25,1) forwards !important; } @keyframes nkaaySalaamFinal{ 0%{ opacity:0; transform: translate(-50%,-50%) translateY(35px) scale(.88); filter:blur(14px); } 20%{ opacity:1; transform: translate(-50%,-50%) translateY(0) scale(1); filter:blur(0); } /* Hold it here so Nadia can actually read it */ 72%{ opacity:1; transform: translate(-50%,-50%) scale(1); filter:blur(0); } 100%{ opacity:0; transform: translate(-50%,-50%) translateY(-12px) scale(1.04); filter:blur(7px); } } /* --------------------------------------------------------- FRAME 2 It's Deliberately quicker than greeting, but still clearly readable. --------------------------------------------------------- */ #kai-intro-v2 .its-v2{ position:absolute; left:50%; top:50%; z-index:21; transform: translate(-50%,-50%) scale(.75); opacity:0; font-family:"Cormorant Garamond",serif; font-size:clamp( 2.5rem, 11vw, 6.5rem ); font-style:italic; color:#f5ead5; text-shadow: 0 0 18px rgba(225,183,94,.28), 0 0 50px rgba(225,183,94,.10); animation: nkaayItsFinal 1.45s 3.15s cubic-bezier(.2,.75,.25,1) forwards; } @keyframes nkaayItsFinal{ 0%{ opacity:0; transform: translate(-50%,-50%) scale(.72); filter:blur(10px); } 30%{ opacity:1; transform: translate(-50%,-50%) scale(1); filter:blur(0); } 67%{ opacity:1; transform: translate(-50%,-50%) scale(1); } 100%{ opacity:0; transform: translate(-50%,-50%) scale(1.15); filter:blur(8px); } } /* --------------------------------------------------------- FRAME 3 NADIA Keep the actual Nadia animation EXACTLY the same. We only start it later. --------------------------------------------------------- */ #kai-intro-v2 .nadia-v2{ animation: nadiaV2 3.1s 4.35s cubic-bezier(.2,.7,.15,1) forwards !important; } /* Existing transformation effects: same timing relative to Nadia, simply shifted later. */ #kai-intro-v2 .blast-v2{ animation: blastV2 .9s 6.90s ease-out forwards !important; } #kai-intro-v2 .star-v2{ animation: starV2 1.2s 7.05s ease-out forwards !important; } #kai-intro-v2 .nkaay-v2{ animation: nkaayV2 1.5s 7.30s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 7.85s linear infinite !important; } #kai-intro-v2 .sub-v2{ animation: subV2 .8s 8.35s ease forwards !important; } /* Slightly gentler Nadia entrance — no redesign. This just avoids the first frame feeling abrupt. */ #kai-intro-v2 .nadia-v2{ transform-origin:center center; } /* Mobile readability */ @media(max-width:700px){ #kai-intro-v2 .salaam-v2{ width:88%; font-size: clamp( 2rem, 9vw, 3.4rem ); line-height:1.2; } #kai-intro-v2 .its-v2{ font-size: clamp( 3rem, 15vw, 5rem ); } } /* ========================================================= NKAAY FINAL MICRO TIMING Salaam = fraction quicker It's = touch slower Everything else preserved ========================================================= */ /* HI, SALAAM A LAYKOM — 3.55 -> 3.25 */ #kai-intro-v2 .salaam-v2{ animation: nkaaySalaamFinal 3.25s cubic-bezier(.2,.7,.25,1) forwards !important; } /* IT'S — slightly slower and given more presence */ #kai-intro-v2 .its-v2{ animation: nkaayItsFinal 1.75s 2.95s cubic-bezier(.2,.75,.25,1) forwards !important; } /* NADIA — same animation, tiny timing shift only */ #kai-intro-v2 .nadia-v2{ animation: nadiaV2 3.1s 4.40s cubic-bezier(.2,.7,.15,1) forwards !important; } /* Keep existing transformation perfectly aligned */ #kai-intro-v2 .blast-v2{ animation: blastV2 .9s 6.95s ease-out forwards !important; } #kai-intro-v2 .star-v2{ animation: starV2 1.2s 7.10s ease-out forwards !important; } #kai-intro-v2 .nkaay-v2{ animation: nkaayV2 1.5s 7.35s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 7.90s linear infinite !important; } #kai-intro-v2 .sub-v2{ animation: subV2 .8s 8.40s ease forwards !important; } /* ========================================================= NKAAY FINAL MICRO TIMING Salaam = fraction quicker It's = touch slower Everything else preserved ========================================================= */ /* HI, SALAAM A LAYKOM — 3.55 -> 3.25 */ #kai-intro-v2 .salaam-v2{ animation: nkaaySalaamFinal 3.25s cubic-bezier(.2,.7,.25,1) forwards !important; } /* IT'S — slightly slower and given more presence */ #kai-intro-v2 .its-v2{ animation: nkaayItsFinal 1.75s 2.95s cubic-bezier(.2,.75,.25,1) forwards !important; } /* NADIA — same animation, tiny timing shift only */ #kai-intro-v2 .nadia-v2{ animation: nadiaV2 3.1s 4.40s cubic-bezier(.2,.7,.15,1) forwards !important; } /* Keep existing transformation perfectly aligned */ #kai-intro-v2 .blast-v2{ animation: blastV2 .9s 6.95s ease-out forwards !important; } #kai-intro-v2 .star-v2{ animation: starV2 1.2s 7.10s ease-out forwards !important; } #kai-intro-v2 .nkaay-v2{ animation: nkaayV2 1.5s 7.35s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 7.90s linear infinite !important; } #kai-intro-v2 .sub-v2{ animation: subV2 .8s 8.40s ease forwards !important; } /* ========================================================= NKAAY INTRO — 3.00 / 2.25 TIMING ========================================================= */ /* HI, SALAAM A LAYKOM — 3 SECONDS */ #kai-intro-v2 .salaam-v2{ animation: nkaaySalaamFinal 3s cubic-bezier(.2,.7,.25,1) forwards !important; } /* IT'S — 2.25 SECONDS */ #kai-intro-v2 .its-v2{ animation: nkaayItsFinal 2.25s 2.75s cubic-bezier(.2,.75,.25,1) forwards !important; } /* NADIA — original animation unchanged */ #kai-intro-v2 .nadia-v2{ animation: nadiaV2 3.1s 4.75s cubic-bezier(.2,.7,.15,1) forwards !important; } /* ORIGINAL TRANSFORMATION — shifted to stay aligned */ #kai-intro-v2 .blast-v2{ animation: blastV2 .9s 7.30s ease-out forwards !important; } #kai-intro-v2 .star-v2{ animation: starV2 1.2s 7.45s ease-out forwards !important; } #kai-intro-v2 .nkaay-v2{ animation: nkaayV2 1.5s 7.70s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 8.25s linear infinite !important; } #kai-intro-v2 .sub-v2{ animation: subV2 .8s 8.75s ease forwards !important; } /* ========================================================= NKAAY INTRO — 2.65 / 2.85 FINAL TUNING ========================================================= */ /* HI, SALAAM A LAYKOM — 2.65s */ #kai-intro-v2 .salaam-v2{ animation: nkaaySalaamFinal 2.65s cubic-bezier(.2,.7,.25,1) forwards !important; } /* IT'S — 2.85s */ #kai-intro-v2 .its-v2{ animation: nkaayItsFinal 2.85s 2.40s cubic-bezier(.2,.75,.25,1) forwards !important; } /* NADIA — ORIGINAL ANIMATION */ #kai-intro-v2 .nadia-v2{ animation: nadiaV2 3.1s 5.00s cubic-bezier(.2,.7,.15,1) forwards !important; } /* EXISTING TRANSFORMATION — ONLY SHIFTED */ #kai-intro-v2 .blast-v2{ animation: blastV2 .9s 7.55s ease-out forwards !important; } #kai-intro-v2 .star-v2{ animation: starV2 1.2s 7.70s ease-out forwards !important; } #kai-intro-v2 .nkaay-v2{ animation: nkaayV2 1.5s 7.95s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 8.50s linear infinite !important; } #kai-intro-v2 .sub-v2{ animation: subV2 .8s 9.00s ease forwards !important; } /* NKAAY TIMING — SALAAM 2.65s / IT'S 3.10s */ #kai-intro-v2 .salaam-v2{ animation: nkaaySalaamFinal 2.65s cubic-bezier(.2,.7,.25,1) forwards !important; } #kai-intro-v2 .its-v2{ animation: nkaayItsFinal 3.10s 2.40s cubic-bezier(.2,.75,.25,1) forwards !important; } /* Everything below unchanged visually — shifted +0.25s */ #kai-intro-v2 .nadia-v2{ animation: nadiaV2 3.1s 5.25s cubic-bezier(.2,.7,.15,1) forwards !important; } #kai-intro-v2 .blast-v2{ animation: blastV2 .9s 7.80s ease-out forwards !important; } #kai-intro-v2 .star-v2{ animation: starV2 1.2s 7.95s ease-out forwards !important; } #kai-intro-v2 .nkaay-v2{ animation: nkaayV2 1.5s 8.20s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 8.75s linear infinite !important; } #kai-intro-v2 .sub-v2{ animation: subV2 .8s 9.25s ease forwards !important; } /* ========================================================= NKAAY "IT'S" RENDERING FIX Timing remains 3.10s ========================================================= */ #kai-intro-v2 .its-v2{ font-family:"Cormorant Garamond", Georgia, serif !important; font-style:normal !important; font-weight:500 !important; letter-spacing:.03em !important; color:#f3e5c7 !important; text-shadow: 0 0 10px rgba(225,183,94,.16), 0 0 26px rgba(225,183,94,.08) !important; animation: nkaayItsClean 3.10s 2.40s cubic-bezier(.22,.72,.24,1) forwards !important; } @keyframes nkaayItsClean{ 0%{ opacity:0; transform: translate(-50%,-50%) translateY(14px) scale(.96); filter:blur(4px); } 18%{ opacity:1; transform: translate(-50%,-50%) translateY(0) scale(1); filter:blur(0); } 72%{ opacity:1; transform: translate(-50%,-50%) translateY(0) scale(1); filter:blur(0); } 100%{ opacity:0; transform: translate(-50%,-50%) translateY(-14px) scale(1); filter:blur(2px); } } /* NKAAY MICRO TIMING — IT'S 3.10s -> 2.60s */ #kai-intro-v2 .its-v2{ animation: nkaayItsClean 2.60s 2.40s cubic-bezier(.22,.72,.24,1) forwards !important; } #kai-intro-v2 .nadia-v2{ animation: nadiaV2 3.1s 4.75s cubic-bezier(.2,.7,.15,1) forwards !important; } #kai-intro-v2 .blast-v2{ animation:blastV2 .9s 7.30s ease-out forwards !important; } #kai-intro-v2 .star-v2{ animation:starV2 1.2s 7.45s ease-out forwards !important; } #kai-intro-v2 .nkaay-v2{ animation: nkaayV2 1.5s 7.70s cubic-bezier(.15,.85,.2,1) forwards, nkaayV2Shine 1.8s 8.25s linear infinite !important; } #kai-intro-v2 .sub-v2{ animation:subV2 .8s 8.75s ease forwards !important; } /* ========================================================= NKAAY BRAND STORY ========================================================= */ .kai-brand-story{ position:relative; overflow:hidden; padding:95px 24px; text-align:center; background: radial-gradient( circle at 50% 50%, rgba(212,165,74,.055), transparent 55% ); } .kai-brand-story::before{ content:""; position:absolute; left:50%; top:50%; width:330px; height:330px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(212,165,74,.08); box-shadow: 0 0 0 35px rgba(212,165,74,.018), 0 0 0 75px rgba(212,165,74,.01); } .kai-brand-story-inner{ position:relative; z-index:2; max-width:720px; margin:auto; } .kai-brand-kicker{ display:block; margin-bottom:18px; font-family:Montserrat,sans-serif; font-size:.68rem; font-weight:500; letter-spacing:.34em; color:#cfa451; } .kai-brand-story h2{ margin:0 0 25px; font-family:"Cormorant Garamond",serif; font-size:clamp(2.6rem,7vw,5rem); font-weight:500; line-height:1; color:#f4e7ce; } .kai-brand-story p{ max-width:620px; margin:15px auto; font-family:Montserrat,sans-serif; font-size:.92rem; font-weight:300; line-height:1.9; color:rgba(255,255,255,.65); } .kai-story-signoff{ margin-top:35px; font-family:"Cormorant Garamond",serif; font-size:clamp(1.4rem,4vw,2rem); color:#efe2ca; } .kai-story-signoff span{ display:block; margin-top:3px; font-family:"Great Vibes",cursive; font-size:1.75em; color:#d8aa50; } @media(max-width:700px){ .kai-brand-story{ padding:70px 20px; } .kai-brand-story p{ font-size:.85rem; } } /* ========================================================= NKAAY REVEAL DEPTH Darker -> blurred -> delayed -> crisp foreground ========================================================= */ .kai-depth-reveal{ opacity:0; transform: translateY(42px) scale(.94); filter: blur(12px) brightness(.58); box-shadow: 0 25px 60px rgba(0,0,0,.35); transition: opacity 1.25s cubic-bezier(.2,.75,.2,1), transform 1.35s cubic-bezier(.2,.75,.2,1), filter 1.35s ease, box-shadow 1.35s ease; transition-delay:.32s; } .kai-depth-reveal.kai-depth-visible{ opacity:1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); box-shadow: 0 12px 35px rgba(0,0,0,.12); } /* Trust strip gets a slightly stronger foreground arrival */ .kai-trust-strip.kai-depth-reveal{ background: linear-gradient( 180deg, rgba(255,255,255,.008), rgba(212,165,74,.018), rgba(255,255,255,.008) ); backdrop-filter:blur(6px); } .kai-trust-strip.kai-depth-visible{ backdrop-filter:blur(0); } /* Give trust items their own subtle stagger */ .kai-trust-strip span{ opacity:.55; transform:translateY(6px); transition: opacity .7s ease, transform .7s ease; } .kai-trust-strip.kai-depth-visible span{ opacity:1; transform:none; } .kai-trust-strip.kai-depth-visible span:nth-child(1){ transition-delay:.10s; } .kai-trust-strip.kai-depth-visible span:nth-child(2){ transition-delay:.22s; } .kai-trust-strip.kai-depth-visible span:nth-child(3){ transition-delay:.34s; } .kai-trust-strip.kai-depth-visible span:nth-child(4){ transition-delay:.46s; } /* Slight gold halo as blocks arrive */ .kai-depth-reveal::after{ content:""; position:absolute; inset:-1px; pointer-events:none; opacity:0; background: radial-gradient( circle at 50% 50%, rgba(212,165,74,.07), transparent 60% ); transition:opacity 1.2s ease .45s; } .kai-depth-reveal.kai-depth-visible::after{ opacity:1; } /* Mobile: still obvious, but less heavy */ @media(max-width:700px){ .kai-depth-reveal{ transform: translateY(30px) scale(.965); filter: blur(8px) brightness(.68); transition-delay:.22s; } } @media(prefers-reduced-motion:reduce){ .kai-depth-reveal{ opacity:1; transform:none; filter:none; transition:none; } }