Beauty Hub \u2014 Luxury Beauty & Skincare<\/title>\r\n<style>\r\n \/* ============================================================\r\n 0. TOKENS\r\n ============================================================ *\/\r\n :root{\r\n --black:#000000;\r\n --black-soft:#0b0709;\r\n --charcoal:#161014;\r\n --pink:#F8C8DC;\r\n --pink-deep:#e6a9c4;\r\n --gold:#D4AF37;\r\n --gold-light:#f1d67a;\r\n --gold-dim:#8a6f22;\r\n --white:#fdf9f6;\r\n --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;\r\n --font-body: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;\r\n --ease: cubic-bezier(.22,.9,.24,1);\r\n }\r\n\r\n *{ box-sizing:border-box; }\r\n html{ scroll-behavior:smooth; }\r\n body{\r\n margin:0;\r\n background:var(--black);\r\n color:var(--white);\r\n font-family:var(--font-body);\r\n overflow-x:hidden;\r\n cursor:none;\r\n }\r\n @media (max-width:900px){ body{ cursor:auto; } }\r\n\r\n a{ color:inherit; text-decoration:none; }\r\n img{ max-width:100%; display:block; }\r\n ::selection{ background:var(--gold); color:var(--black); }\r\n\r\n \/* Google-style fallback fonts via system stack are used since external font\r\n files are not permitted; letter-spacing \/ weight compensate for the\r\n lack of a licensed display serif. *\/\r\n\r\n \/* ============================================================\r\n 1. CURSOR + PARTICLE TRAIL\r\n ============================================================ *\/\r\n #cursor-glow{\r\n position:fixed; top:0; left:0; width:26px; height:26px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(212,175,55,.9), rgba(212,175,55,0) 70%);\r\n pointer-events:none; z-index:9999; transform:translate(-50%,-50%);\r\n mix-blend-mode:screen; transition:transform .05s linear;\r\n }\r\n .trail-dot{\r\n position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;\r\n background:var(--gold-light); pointer-events:none; z-index:9998;\r\n transform:translate(-50%,-50%);\r\n box-shadow:0 0 8px 2px rgba(212,175,55,.8);\r\n animation:trailFade .7s ease-out forwards;\r\n }\r\n @keyframes trailFade{ to{ opacity:0; transform:translate(-50%,-50%) scale(.2);} }\r\n @media (max-width:900px){ #cursor-glow, .trail-dot{ display:none; } }\r\n\r\n \/* ============================================================\r\n 3. HERO\r\n ============================================================ *\/\r\n .hero{\r\n position:relative; width:100%; min-height:100vh;\r\n display:flex; align-items:center; justify-content:center;\r\n overflow:hidden;\r\n background:\r\n radial-gradient(ellipse at 20% 20%, rgba(212,175,55,.10), transparent 55%),\r\n radial-gradient(ellipse at 80% 80%, rgba(248,200,220,.08), transparent 55%),\r\n linear-gradient(180deg, #000000 0%, #0c0608 60%, #000000 100%);\r\n }\r\n .stage{\r\n position:absolute; inset:0; perspective:1400px; transform-style:preserve-3d;\r\n }\r\n .floater{\r\n position:absolute; will-change:transform; opacity:.85;\r\n transform-style:preserve-3d;\r\n filter:drop-shadow(0 10px 25px rgba(0,0,0,.6));\r\n animation:driftY var(--dur,14s) ease-in-out infinite,\r\n spin var(--spin,22s) linear infinite;\r\n }\r\n .floater svg{ width:100%; height:100%; display:block; }\r\n @keyframes driftY{\r\n 0%,100%{ transform:translateY(0) translateX(0) rotate(var(--r0,0deg)); }\r\n 50%{ transform:translateY(-26px) translateX(10px) rotate(var(--r1,8deg)); }\r\n }\r\n @keyframes spin{ from{ transform:rotateZ(0deg);} to{ transform:rotateZ(360deg);} }\r\n\r\n .hero-content{\r\n position:relative; z-index:20; text-align:center; max-width:900px;\r\n padding:0 24px;\r\n }\r\n .eyebrow{\r\n display:inline-block; font-size:.72rem; letter-spacing:6px; text-transform:uppercase;\r\n color:var(--gold); margin-bottom:18px; opacity:0;\r\n animation:fadeUp 1s var(--ease) .1s forwards;\r\n }\r\n .hero h1{\r\n font-family:var(--font-display); font-weight:800;\r\n font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:1.05; margin:0 0 22px;\r\n letter-spacing:1px;\r\n background:linear-gradient(100deg, var(--white) 30%, var(--gold-light) 45%, var(--gold) 55%, var(--white) 70%);\r\n background-size:300% 100%;\r\n -webkit-background-clip:text; background-clip:text; color:transparent;\r\n opacity:0; transform:translateY(40px);\r\n animation:fadeUp 1.1s var(--ease) .3s forwards, shimmerText 6s linear 1.4s infinite;\r\n }\r\n @keyframes fadeUp{ to{ opacity:1; transform:translateY(0);} }\r\n @keyframes shimmerText{ 0%{ background-position:0% 0;} 100%{ background-position:300% 0;} }\r\n\r\n .hero p.sub{\r\n font-size:clamp(1rem,2vw,1.2rem); color:#e9dfe4; font-weight:300;\r\n max-width:640px; margin:0 auto 40px; line-height:1.7;\r\n opacity:0; animation:fadeUp 1s var(--ease) .6s forwards;\r\n }\r\n\r\n .cta-row{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap;\r\n opacity:0; animation:fadeUp 1s var(--ease) .9s forwards; }\r\n\r\n .btn{\r\n position:relative; overflow:hidden; padding:16px 38px; font-size:.85rem;\r\n letter-spacing:2px; text-transform:uppercase; border-radius:40px;\r\n cursor:pointer; font-weight:600; transition:transform .4s var(--ease), box-shadow .4s var(--ease);\r\n border:1px solid var(--gold);\r\n }\r\n .btn-primary{ background:linear-gradient(120deg, var(--gold), var(--gold-light)); color:#1a1206; }\r\n .btn-secondary{ background:transparent; color:var(--gold-light); }\r\n .btn:hover{ transform:translateY(-4px) scale(1.04); box-shadow:0 12px 34px rgba(212,175,55,.45); }\r\n .btn .ripple{\r\n position:absolute; border-radius:50%; background:rgba(255,255,255,.5);\r\n transform:scale(0); animation:rip .6s ease-out forwards; pointer-events:none;\r\n }\r\n @keyframes rip{ to{ transform:scale(3); opacity:0; } }\r\n\r\n .scroll-cue{\r\n position:absolute; bottom:34px; left:50%; transform:translateX(-50%);\r\n display:flex; flex-direction:column; align-items:center; gap:8px; z-index:20;\r\n color:var(--pink); font-size:.65rem; letter-spacing:3px; text-transform:uppercase;\r\n opacity:.75;\r\n }\r\n .scroll-cue .line{ width:1px; height:36px; background:linear-gradient(var(--gold), transparent);\r\n animation:scrollLine 1.8s ease-in-out infinite; }\r\n @keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 50.01%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }\r\n\r\n \/* ============================================================\r\n 4. SECTION FRAME (shared)\r\n ============================================================ *\/\r\n section{ position:relative; padding:120px 6%; }\r\n .section-head{ text-align:center; max-width:720px; margin:0 auto 64px; }\r\n .section-head .tag{\r\n font-size:.72rem; letter-spacing:5px; text-transform:uppercase; color:var(--gold);\r\n }\r\n .section-head h2{\r\n font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem); font-weight:800;\r\n margin:14px 0 0; color:var(--white);\r\n }\r\n .reveal{ opacity:0; transform:translateY(50px); transition:opacity .9s var(--ease), transform .9s var(--ease); }\r\n .reveal.in{ opacity:1; transform:translateY(0); }\r\n .reveal.zoom{ transform:scale(.9); }\r\n .reveal.zoom.in{ transform:scale(1); }\r\n\r\n \/* ============================================================\r\n 5. INTERACTIVE LIPSTICK\r\n ============================================================ *\/\r\n .lip-section{\r\n background:linear-gradient(180deg, #000 0%, #14090f 50%, #000 100%);\r\n text-align:center; padding-top:100px;\r\n }\r\n .lip-hint{ color:var(--pink); font-size:.85rem; letter-spacing:2px; margin-top:10px; opacity:.8; }\r\n .lip-stage{\r\n position:relative; height:560px; max-width:520px; margin:60px auto 0;\r\n display:flex; align-items:flex-end; justify-content:center;\r\n touch-action:none;\r\n }\r\n .lipstick{\r\n position:relative; width:200px; height:440px; cursor:grab;\r\n transform-origin:bottom center;\r\n }\r\n .lipstick:active{ cursor:grabbing; }\r\n .lip-base{\r\n position:absolute; bottom:0; left:50%; transform:translateX(-50%);\r\n width:170px; height:220px; border-radius:16px 16px 30px 30px;\r\n background:linear-gradient(120deg,#0c0c0c 0%, #2a2a2a 30%, #050505 55%, #2a2a2a 80%, #0c0c0c 100%);\r\n box-shadow:inset 0 0 20px rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.7);\r\n border:1px solid #3a3a3a;\r\n }\r\n .lip-base::before{\r\n content:''; position:absolute; top:14px; left:14px; right:14px; bottom:14px;\r\n border:1px solid var(--gold-dim); border-radius:10px; opacity:.6;\r\n }\r\n .lip-gold-ring{\r\n position:absolute; left:50%; bottom:214px; transform:translateX(-50%);\r\n width:176px; height:26px; border-radius:50%;\r\n background:linear-gradient(90deg, var(--gold-dim), var(--gold-light), var(--gold), var(--gold-dim));\r\n box-shadow:0 4px 12px rgba(0,0,0,.6);\r\n }\r\n .lip-cap{\r\n position:absolute; left:50%; bottom:236px; transform:translateX(-50%);\r\n width:176px; height:200px; border-radius:20px 20px 60px 60px\/20px 20px 40px 40px;\r\n background:linear-gradient(120deg,#050505, #2c2c2c 40%, #050505 70%, #2c2c2c);\r\n box-shadow:0 20px 40px rgba(0,0,0,.6), inset 0 0 18px rgba(255,255,255,.06);\r\n transition:transform .05s linear;\r\n border:1px solid #3a3a3a;\r\n z-index:5;\r\n }\r\n .lip-cap::after{\r\n content:''; position:absolute; top:10%; left:18%; width:10px; height:60%;\r\n background:linear-gradient(rgba(255,255,255,.35), transparent);\r\n filter:blur(3px); border-radius:6px;\r\n }\r\n .lip-bullet{\r\n position:absolute; left:50%; bottom:238px; transform:translateX(-50%) translateY(0);\r\n width:96px; height:0px; border-radius:14px 14px 40px 40px;\r\n background:linear-gradient(180deg, #e35d7c, #b8264a 70%, #8c1638);\r\n box-shadow:0 0 30px rgba(216,60,100,.5), inset -8px 0 16px rgba(0,0,0,.35), inset 8px 0 16px rgba(255,255,255,.15);\r\n overflow:hidden; transition:height .05s linear; z-index:3;\r\n }\r\n .lip-shine{\r\n position:absolute; top:0; left:20%; width:14px; height:100%;\r\n background:linear-gradient(rgba(255,255,255,.55), transparent 70%);\r\n filter:blur(2px);\r\n }\r\n .sparkle{\r\n position:absolute; width:6px; height:6px; border-radius:50%;\r\n background:var(--gold-light); box-shadow:0 0 8px 2px rgba(241,214,122,.9);\r\n pointer-events:none; animation:sparkleUp 1s ease-out forwards;\r\n }\r\n @keyframes sparkleUp{ to{ transform:translateY(-70px) scale(0); opacity:0; } }\r\n\r\n .lip-info{\r\n max-width:640px; margin:50px auto 0; display:grid;\r\n grid-template-columns:repeat(3,1fr); gap:18px;\r\n }\r\n @media(max-width:640px){ .lip-info{ grid-template-columns:repeat(2,1fr);} }\r\n .lip-info .point{\r\n background:rgba(248,200,220,.06); border:1px solid rgba(212,175,55,.25);\r\n border-radius:14px; padding:16px 10px; font-size:.8rem; letter-spacing:.5px;\r\n color:var(--pink); opacity:0; transform:translateY(16px) scale(.9);\r\n transition:opacity .5s var(--ease), transform .5s var(--ease);\r\n }\r\n .lip-info .point.show{ opacity:1; transform:translateY(0) scale(1); }\r\n\r\n \/* ============================================================\r\n 6. ABOUT\r\n ============================================================ *\/\r\n .about{\r\n background:linear-gradient(180deg,#000, #0a0a0a);\r\n }\r\n .about-grid{\r\n display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;\r\n max-width:1180px; margin:0 auto;\r\n }\r\n @media(max-width:860px){ .about-grid{ grid-template-columns:1fr; } }\r\n .about-visual{\r\n position:relative; aspect-ratio:1\/1; border-radius:26px; overflow:hidden;\r\n background:radial-gradient(circle at 30% 30%, rgba(212,175,55,.25), transparent 60%),\r\n linear-gradient(145deg, #1b1113, #050203);\r\n border:1px solid rgba(212,175,55,.25);\r\n display:flex; align-items:center; justify-content:center;\r\n }\r\n .about-visual svg{ width:62%; }\r\n .about-copy p{\r\n color:#d8cdd1; line-height:1.9; font-weight:300; margin-bottom:20px; font-size:1.02rem;\r\n }\r\n .about-copy strong{ color:var(--gold-light); font-weight:600; }\r\n .stat-row{ display:flex; gap:40px; margin-top:36px; flex-wrap:wrap; }\r\n .stat b{ display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--gold); }\r\n .stat span{ font-size:.75rem; letter-spacing:1.5px; color:var(--pink); text-transform:uppercase; }\r\n\r\n \/* ============================================================\r\n 7. PRODUCTS\r\n ============================================================ *\/\r\n .products{ background:#000; }\r\n .grid{\r\n display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));\r\n gap:28px; max-width:1300px; margin:0 auto;\r\n }\r\n .card{\r\n position:relative; background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));\r\n border:1px solid rgba(212,175,55,.18); border-radius:20px; padding:26px 22px 24px;\r\n overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);\r\n }\r\n .card::before{\r\n content:''; position:absolute; top:0; left:-140%; width:60%; height:100%;\r\n background:linear-gradient(100deg, transparent, rgba(212,175,55,.25), transparent);\r\n transform:skewX(-20deg); transition:left .8s ease;\r\n }\r\n .card:hover::before{ left:140%; }\r\n .card:hover{\r\n transform:translateY(-10px) rotate(-.4deg);\r\n box-shadow:0 24px 50px rgba(212,175,55,.18);\r\n border-color:var(--gold);\r\n }\r\n .card-img{\r\n width:100%; aspect-ratio:1\/1; border-radius:14px; margin-bottom:18px;\r\n display:flex; align-items:center; justify-content:center;\r\n background:radial-gradient(circle at 35% 30%, rgba(248,200,220,.18), rgba(0,0,0,0) 60%),\r\n linear-gradient(150deg,#1a1214,#060404);\r\n }\r\n .card-img svg{ width:52%; height:52%; }\r\n .card h3{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 6px; color:var(--white); }\r\n .card p{ font-size:.85rem; color:#c9bcc2; line-height:1.55; margin:0 0 14px; min-height:44px; }\r\n .card-meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }\r\n .price{ font-family:var(--font-display); font-size:1.15rem; color:var(--gold-light); }\r\n .stars{ color:var(--gold); font-size:.8rem; letter-spacing:1px; }\r\n .buy{\r\n width:100%; padding:12px; border-radius:30px; border:1px solid var(--gold);\r\n background:transparent; color:var(--gold-light); font-size:.75rem; letter-spacing:2px;\r\n text-transform:uppercase; cursor:pointer; transition:background .35s, color .35s, transform .3s;\r\n }\r\n .buy:hover{ background:var(--gold); color:#160f04; transform:scale(1.03); }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"cursor-glow\"><\/div>\r\n\r\n\r\n<section class=\"hero\" id=\"home\" style=\"padding:0;\">\r\n <div class=\"stage\" id=\"stage\"><\/div>\r\n\r\n <div class=\"hero-content\">\r\n <span class=\"eyebrow\">Luxury Beauty & Skincare<\/span>\r\n <h1>Welcome to Beauty Hub<\/h1>\r\n <p class=\"sub\">Discover premium beauty products, luxurious skincare solutions, and makeup designed to bring out your natural beauty.<\/p>\r\n <div class=\"cta-row\">\r\n <button class=\"btn btn-primary\" onclick=\"location.href='#products'\">Shop Now<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"location.href='#products'\">Explore Collection<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scroll-cue\"><span>Scroll<\/span><span class=\"line\"><\/span><\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"lip-section\" id=\"lipstick\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"tag\">Our Signature<\/span>\r\n <h2>The Gold \u00c9dition Lipstick<\/h2>\r\n <p class=\"lip-hint\">Drag the bullet upward to reveal it, downward to close it<\/p>\r\n <\/div>\r\n\r\n <div class=\"lip-stage\">\r\n <div class=\"lipstick\">\r\n <div class=\"lip-base\"><\/div>\r\n <div class=\"lip-bullet\" id=\"bullet\"><div class=\"lip-shine\"><\/div><\/div>\r\n <div class=\"lip-gold-ring\"><\/div>\r\n <div class=\"lip-cap\" id=\"cap\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lip-info\" id=\"lipInfo\">\r\n <div class=\"point\">Premium quality<\/div>\r\n <div class=\"point\">Long lasting<\/div>\r\n <div class=\"point\">Waterproof<\/div>\r\n <div class=\"point\">Vegan formula<\/div>\r\n <div class=\"point\">Cruelty free<\/div>\r\n <div class=\"point\">Dermatologist tested<\/div>\r\n <div class=\"point\">Rich pigmentation<\/div>\r\n <div class=\"point\">Soft texture<\/div>\r\n <div class=\"point\">Luxury packaging<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"about\" id=\"about\">\r\n <div class=\"about-grid\">\r\n <div class=\"about-visual reveal zoom\">\r\n <svg viewBox=\"0 0 200 200\" fill=\"none\">\r\n <circle cx=\"100\" cy=\"100\" r=\"90\" stroke=\"#D4AF37\" stroke-width=\"1\" opacity=\".4\"\/>\r\n <path d=\"M100 40c-16 0-28 14-28 32 0 22 28 68 28 68s28-46 28-68c0-18-12-32-28-32z\" fill=\"#F8C8DC\" opacity=\".85\"\/>\r\n <circle cx=\"100\" cy=\"72\" r=\"12\" fill=\"#D4AF37\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"about-copy\">\r\n <div class=\"reveal\">\r\n <span class=\"tag\" style=\"color:var(--gold)\">About Beauty Hub<\/span>\r\n <h2 style=\"font-family:var(--font-display); font-size:clamp(1.8rem,3.4vw,2.6rem); margin:12px 0 26px;\">Where luxury meets skin science<\/h2>\r\n <\/div>\r\n <p class=\"reveal\">Beauty Hub was founded on a single belief: that <strong>premium skincare and makeup<\/strong> should feel like a ritual, not a routine. Our mission is to craft formulas that perform at the highest level while honoring the skin they touch, blending <strong>organic botanicals<\/strong> with clinically-proven actives.<\/p>\r\n <p class=\"reveal\">Every serum, cream, and pigment begins with sourcing \u2014 we work directly with growers of <strong>premium, sustainably harvested ingredients<\/strong>, avoiding shortcuts that compromise purity. Our vision is a world where luxury beauty is also honest beauty: cruelty-free, dermatologist-tested, and transparent about every ingredient.<\/p>\r\n <p class=\"reveal\">Our in-house makeup artists and chemists collaborate on every shade and texture, ensuring each product enhances <strong>natural beauty<\/strong> rather than masking it. From the first formulation trial to the final gold-foiled package, <strong>innovation and sustainability<\/strong> guide every decision \u2014 because customer satisfaction and the health of our planet are never in competition.<\/p>\r\n <div class=\"stat-row reveal\">\r\n <div class=\"stat\"><b>12+<\/b><span>Signature Products<\/span><\/div>\r\n <div class=\"stat\"><b>100%<\/b><span>Cruelty Free<\/span><\/div>\r\n <div class=\"stat\"><b>98%<\/b><span>Client Satisfaction<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"products\" id=\"products\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"tag\">Featured Collection<\/span>\r\n <h2>Signature Products<\/h2>\r\n <\/div>\r\n <div class=\"grid\" id=\"productGrid\"><\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/* ==================================================================\r\n ICON LIBRARY \u2014 simple inline SVGs standing in for product photography\r\n ================================================================== *\/\r\nconst ICONS = {\r\n lipstick: `<svg viewBox=\"0 0 60 60\"><rect x=\"22\" y=\"28\" width=\"16\" height=\"24\" rx=\"4\" fill=\"#1a1a1a\"\/><path d=\"M23 28 L23 14 Q30 4 37 14 L37 28 Z\" fill=\"#e35d7c\"\/><rect x=\"21\" y=\"26\" width=\"18\" height=\"6\" rx=\"2\" fill=\"#D4AF37\"\/><\/svg>`,\r\n perfume: `<svg viewBox=\"0 0 60 60\"><rect x=\"18\" y=\"22\" width=\"24\" height=\"30\" rx=\"6\" fill=\"#F8C8DC\" opacity=\".9\"\/><rect x=\"26\" y=\"10\" width=\"8\" height=\"12\" rx=\"2\" fill=\"#D4AF37\"\/><circle cx=\"30\" cy=\"8\" r=\"4\" fill=\"#D4AF37\"\/><\/svg>`,\r\n brush: `<svg viewBox=\"0 0 60 60\"><rect x=\"27\" y=\"20\" width=\"6\" height=\"34\" rx=\"3\" fill=\"#1a1a1a\"\/><rect x=\"26\" y=\"12\" width=\"8\" height=\"10\" rx=\"2\" fill=\"#D4AF37\"\/><ellipse cx=\"30\" cy=\"8\" rx=\"10\" ry=\"7\" fill=\"#2c2c2c\"\/><\/svg>`,\r\n foundation: `<svg viewBox=\"0 0 60 60\"><rect x=\"15\" y=\"18\" width=\"30\" height=\"34\" rx=\"8\" fill=\"#e9c9a8\"\/><rect x=\"15\" y=\"18\" width=\"30\" height=\"10\" rx=\"8\" fill=\"#D4AF37\"\/><\/svg>`,\r\n nail: `<svg viewBox=\"0 0 60 60\"><rect x=\"20\" y=\"22\" width=\"20\" height=\"28\" rx=\"3\" fill=\"#8c1638\"\/><rect x=\"24\" y=\"10\" width=\"12\" height=\"14\" rx=\"2\" fill=\"#1a1a1a\"\/><\/svg>`,\r\n cream: `<svg viewBox=\"0 0 60 60\"><rect x=\"14\" y=\"22\" width=\"32\" height=\"26\" rx=\"14\" fill=\"#F8C8DC\"\/><ellipse cx=\"30\" cy=\"20\" rx=\"16\" ry=\"6\" fill=\"#D4AF37\"\/><\/svg>`,\r\n serum: `<svg viewBox=\"0 0 60 60\"><rect x=\"20\" y=\"18\" width=\"20\" height=\"32\" rx=\"4\" fill=\"#c9a6ff\" opacity=\".8\"\/><rect x=\"24\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\" fill=\"#D4AF37\"\/><\/svg>`,\r\n compact: `<svg viewBox=\"0 0 60 60\"><circle cx=\"30\" cy=\"32\" r=\"20\" fill=\"#1a1a1a\"\/><circle cx=\"30\" cy=\"32\" r=\"15\" fill=\"#F8C8DC\" opacity=\".8\"\/><circle cx=\"30\" cy=\"12\" r=\"2.5\" fill=\"#D4AF37\"\/><\/svg>`,\r\n mascara: `<svg viewBox=\"0 0 60 60\"><rect x=\"25\" y=\"8\" width=\"10\" height=\"16\" rx=\"3\" fill=\"#D4AF37\"\/><rect x=\"23\" y=\"24\" width=\"14\" height=\"30\" rx=\"4\" fill=\"#1a1a1a\"\/><\/svg>`,\r\n eyeliner: `<svg viewBox=\"0 0 60 60\"><rect x=\"27\" y=\"10\" width=\"6\" height=\"36\" rx=\"3\" fill=\"#1a1a1a\"\/><rect x=\"25\" y=\"42\" width=\"10\" height=\"10\" rx=\"2\" fill=\"#D4AF37\"\/><\/svg>`,\r\n blush: `<svg viewBox=\"0 0 60 60\"><circle cx=\"30\" cy=\"32\" r=\"20\" fill=\"#F8C8DC\"\/><circle cx=\"30\" cy=\"32\" r=\"9\" fill=\"#e6a9c4\"\/><\/svg>`,\r\n facewash: `<svg viewBox=\"0 0 60 60\"><rect x=\"17\" y=\"20\" width=\"26\" height=\"32\" rx=\"6\" fill=\"#bfe6e0\"\/><rect x=\"24\" y=\"8\" width=\"12\" height=\"14\" rx=\"3\" fill=\"#D4AF37\"\/><\/svg>`,\r\n sunscreen: `<svg viewBox=\"0 0 60 60\"><rect x=\"16\" y=\"18\" width=\"28\" height=\"34\" rx=\"8\" fill=\"#fbe7b0\"\/><circle cx=\"30\" cy=\"32\" r=\"8\" fill=\"#D4AF37\" opacity=\".7\"\/><\/svg>`\r\n};\r\n\r\n\/* ==================================================================\r\n HERO \u2014 floating 3D product field\r\n ================================================================== *\/\r\nconst stage = document.getElementById('stage');\r\nconst floatKeys = ['lipstick','perfume','brush','foundation','nail','cream','serum','compact','mascara','eyeliner'];\r\nconst floaters = [];\r\n\r\nfloatKeys.forEach((key, i) => {\r\n const el = document.createElement('div');\r\n el.className = 'floater';\r\n el.innerHTML = ICONS[key];\r\n const size = 46 + Math.random()*54;\r\n const top = 6 + Math.random()*82;\r\n const left = 4 + Math.random()*88;\r\n const depth = Math.random(); \/\/ 0 = far, 1 = near\r\n el.style.width = size+'px';\r\n el.style.height = size+'px';\r\n el.style.top = top+'%';\r\n el.style.left = left+'%';\r\n el.style.setProperty('--dur', (10+Math.random()*10)+'s');\r\n el.style.setProperty('--spin', (16+Math.random()*20)+'s');\r\n el.style.setProperty('--r0', (Math.random()*20-10)+'deg');\r\n el.style.setProperty('--r1', (Math.random()*20-10)+'deg');\r\n el.style.opacity = 0.35 + depth*0.55;\r\n el.style.filter += ` blur(${(1-depth)*3}px)`;\r\n el.dataset.depth = depth;\r\n stage.appendChild(el);\r\n floaters.push(el);\r\n});\r\n\r\n\/* Parallax + cursor glow + golden trail *\/\r\nconst glow = document.getElementById('cursor-glow');\r\nlet mx = window.innerWidth\/2, my = window.innerHeight\/2;\r\nlet trailTick = 0;\r\n\r\nwindow.addEventListener('mousemove', (e) => {\r\n mx = e.clientX; my = e.clientY;\r\n glow.style.transform = `translate(${mx}px, ${my}px) translate(-50%,-50%)`;\r\n\r\n const cx = window.innerWidth\/2, cy = window.innerHeight\/2;\r\n const nx = (mx - cx)\/cx, ny = (my - cy)\/cy;\r\n\r\n floaters.forEach(f => {\r\n const depth = parseFloat(f.dataset.depth);\r\n const strength = 18 + depth*30;\r\n f.style.marginLeft = (nx * strength)+'px';\r\n f.style.marginTop = (ny * strength * .6)+'px';\r\n });\r\n\r\n trailTick++;\r\n if (trailTick % 2 === 0){\r\n const dot = document.createElement('div');\r\n dot.className = 'trail-dot';\r\n dot.style.left = mx+'px';\r\n dot.style.top = my+'px';\r\n document.body.appendChild(dot);\r\n setTimeout(()=>dot.remove(), 750);\r\n }\r\n});\r\n\r\n\/* Ripple on buttons *\/\r\ndocument.querySelectorAll('.btn').forEach(btn=>{\r\n btn.addEventListener('click', function(e){\r\n const r = document.createElement('span');\r\n r.className = 'ripple';\r\n const rect = this.getBoundingClientRect();\r\n const size = Math.max(rect.width, rect.height);\r\n r.style.width = r.style.height = size+'px';\r\n r.style.left = (e.clientX - rect.left - size\/2)+'px';\r\n r.style.top = (e.clientY - rect.top - size\/2)+'px';\r\n this.appendChild(r);\r\n setTimeout(()=>r.remove(), 650);\r\n });\r\n});\r\n\r\n\/* ==================================================================\r\n SCROLL REVEAL\r\n ================================================================== *\/\r\nconst io = new IntersectionObserver((entries)=>{\r\n entries.forEach((entry, i)=>{\r\n if(entry.isIntersecting){\r\n setTimeout(()=> entry.target.classList.add('in'), i*90);\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n}, { threshold:.18 });\r\ndocument.querySelectorAll('.reveal').forEach(el=>io.observe(el));\r\n\r\n\/* ==================================================================\r\n INTERACTIVE LIPSTICK \u2014 drag to open\/close\r\n ================================================================== *\/\r\nconst cap = document.getElementById('cap');\r\nconst bullet = document.getElementById('bullet');\r\nconst lipInfo = document.getElementById('lipInfo');\r\n\r\nconst MAX_OPEN = 150; \/\/ px the cap can travel\r\nconst MAX_BULLET = 130; \/\/ px the bullet extends\r\n\r\nlet dragging = false, startY = 0, startOpen = 0, openAmount = 0, isOpen = false;\r\n\r\nfunction applyOpen(amount, rotate){\r\n openAmount = Math.max(0, Math.min(MAX_OPEN, amount));\r\n const ratio = openAmount \/ MAX_OPEN;\r\n cap.style.transform = `translateX(-50%) translateY(${-openAmount}px) rotate(${rotate||0}deg)`;\r\n bullet.style.height = (ratio*MAX_BULLET) + 'px';\r\n bullet.style.bottom = (238 + ratio*30) + 'px';\r\n}\r\n\r\nfunction spawnSparkles(n){\r\n const rect = bullet.getBoundingClientRect();\r\n for(let i=0;i<n;i++){\r\n const s = document.createElement('div');\r\n s.className = 'sparkle';\r\n s.style.left = (rect.left + rect.width\/2 + (Math.random()*40-20)) + 'px';\r\n s.style.top = (rect.top + (Math.random()*20)) + 'px';\r\n document.body.appendChild(s);\r\n setTimeout(()=>s.remove(), 1000);\r\n }\r\n}\r\n\r\nfunction revealInfo(open){\r\n const points = lipInfo.querySelectorAll('.point');\r\n points.forEach((p,i)=>{\r\n setTimeout(()=> p.classList.toggle('show', open), open ? i*90 : (points.length-i)*40);\r\n });\r\n}\r\n\r\nfunction pointerDown(e){\r\n dragging = true;\r\n startY = (e.touches ? e.touches[0].clientY : e.clientY);\r\n startOpen = openAmount;\r\n document.querySelector('.lipstick').style.cursor='grabbing';\r\n}\r\nfunction pointerMove(e){\r\n if(!dragging) return;\r\n const y = (e.touches ? e.touches[0].clientY : e.clientY);\r\n const delta = startY - y; \/\/ dragging up = positive\r\n const rotate = Math.max(-8, Math.min(8, (startY - y)\/14));\r\n applyOpen(startOpen + delta, rotate);\r\n if(!isOpen && openAmount > MAX_OPEN*0.4 && Math.random()<0.3) spawnSparkles(1);\r\n}\r\nfunction pointerUp(){\r\n if(!dragging) return;\r\n dragging = false;\r\n const shouldOpen = openAmount > MAX_OPEN*0.45;\r\n applyOpen(shouldOpen ? MAX_OPEN : 0, 0);\r\n if(shouldOpen && !isOpen){ spawnSparkles(18); revealInfo(true); }\r\n if(!shouldOpen && isOpen){ revealInfo(false); }\r\n isOpen = shouldOpen;\r\n}\r\n\r\nconst lipEl = document.querySelector('.lipstick');\r\nlipEl.addEventListener('mousedown', pointerDown);\r\nlipEl.addEventListener('touchstart', pointerDown, {passive:true});\r\nwindow.addEventListener('mousemove', pointerMove);\r\nwindow.addEventListener('touchmove', pointerMove, {passive:true});\r\nwindow.addEventListener('mouseup', pointerUp);\r\nwindow.addEventListener('touchend', pointerUp);\r\n\r\n\/* ==================================================================\r\n PRODUCT GRID \u2014 generated cards\r\n ================================================================== *\/\r\nconst PRODUCTS = [\r\n { key:'lipstick', name:'Velvet Gold Lipstick', desc:'Rich, long-wear pigment with a satin finish.', price:'$32', stars:5 },\r\n { key:'foundation',name:'Silk Veil Foundation', desc:'Buildable, breathable coverage for every tone.', price:'$44', stars:4 },\r\n { key:'serum', name:'Radiance Face Serum', desc:'Vitamin C + peptides for a luminous glow.', price:'$58', stars:5 },\r\n { key:'cream', name:'Rosewater Moisturizer', desc:'24-hour hydration with botanical extracts.', price:'$46', stars:4 },\r\n { key:'sunscreen', name:'Daily Shield SPF 50', desc:'Weightless, non-greasy broad-spectrum protection.', price:'$29', stars:5 },\r\n { key:'facewash', name:'Gentle Cleansing Foam', desc:'Sulfate-free cleanser for a soft, clean feel.', price:'$24', stars:4 },\r\n { key:'perfume', name:'Gold Orchid Perfume', desc:'A warm floral scent with amber and musk.', price:'$76', stars:5 },\r\n { key:'mascara', name:'Lash Lift Mascara', desc:'Volumizing, smudge-proof, all-day wear.', price:'$26', stars:4 },\r\n { key:'eyeliner', name:'Precision Gel Eyeliner', desc:'Ultra-fine tip for a flawless, sharp line.', price:'$22', stars:5 },\r\n { key:'compact', name:'Powder Compact Deluxe', desc:'Silky, translucent finishing powder.', price:'$34', stars:4 },\r\n { key:'blush', name:'Petal Flush Blush', desc:'Buildable color for a natural, dewy flush.', price:'$28', stars:5 },\r\n { key:'facewash', name:'Purifying Clay Wash', desc:'Deep-clean formula for balanced, calm skin.', price:'$25', stars:4 },\r\n];\r\n\r\nconst grid = document.getElementById('productGrid');\r\nPRODUCTS.forEach((p, i)=>{\r\n const card = document.createElement('div');\r\n card.className = 'card reveal';\r\n card.innerHTML = `\r\n <div class=\"card-img\">${ICONS[p.key]}<\/div>\r\n <h3>${p.name}<\/h3>\r\n <p>${p.desc}<\/p>\r\n <div class=\"card-meta\">\r\n <span class=\"price\">${p.price}<\/span>\r\n <span class=\"stars\">${'\u2605'.repeat(p.stars)}${'\u2606'.repeat(5-p.stars)}<\/span>\r\n <\/div>\r\n <button class=\"buy\" onclick=\"this.textContent='Added \u2713'\">Buy Now<\/button>\r\n `;\r\n grid.appendChild(card);\r\n io.observe(card);\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Beauty Hub \u2014 Luxury Beauty & Skincare Luxury Beauty & Skincare Welcome to Beauty Hub Discover premium beauty products, luxurious […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":4,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/124"}],"wp:attachment":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n \t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBeauty Hub \u2014 Luxury Beauty & Skincare<\/title>\r\n<style>\r\n \/* ============================================================\r\n 0. TOKENS\r\n ============================================================ *\/\r\n :root{\r\n --black:#000000;\r\n --black-soft:#0b0709;\r\n --charcoal:#161014;\r\n --pink:#F8C8DC;\r\n --pink-deep:#e6a9c4;\r\n --gold:#D4AF37;\r\n --gold-light:#f1d67a;\r\n --gold-dim:#8a6f22;\r\n --white:#fdf9f6;\r\n --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;\r\n --font-body: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;\r\n --ease: cubic-bezier(.22,.9,.24,1);\r\n }\r\n\r\n *{ box-sizing:border-box; }\r\n html{ scroll-behavior:smooth; }\r\n body{\r\n margin:0;\r\n background:var(--black);\r\n color:var(--white);\r\n font-family:var(--font-body);\r\n overflow-x:hidden;\r\n cursor:none;\r\n }\r\n @media (max-width:900px){ body{ cursor:auto; } }\r\n\r\n a{ color:inherit; text-decoration:none; }\r\n img{ max-width:100%; display:block; }\r\n ::selection{ background:var(--gold); color:var(--black); }\r\n\r\n \/* Google-style fallback fonts via system stack are used since external font\r\n files are not permitted; letter-spacing \/ weight compensate for the\r\n lack of a licensed display serif. *\/\r\n\r\n \/* ============================================================\r\n 1. CURSOR + PARTICLE TRAIL\r\n ============================================================ *\/\r\n #cursor-glow{\r\n position:fixed; top:0; left:0; width:26px; height:26px;\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(212,175,55,.9), rgba(212,175,55,0) 70%);\r\n pointer-events:none; z-index:9999; transform:translate(-50%,-50%);\r\n mix-blend-mode:screen; transition:transform .05s linear;\r\n }\r\n .trail-dot{\r\n position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;\r\n background:var(--gold-light); pointer-events:none; z-index:9998;\r\n transform:translate(-50%,-50%);\r\n box-shadow:0 0 8px 2px rgba(212,175,55,.8);\r\n animation:trailFade .7s ease-out forwards;\r\n }\r\n @keyframes trailFade{ to{ opacity:0; transform:translate(-50%,-50%) scale(.2);} }\r\n @media (max-width:900px){ #cursor-glow, .trail-dot{ display:none; } }\r\n\r\n \/* ============================================================\r\n 3. HERO\r\n ============================================================ *\/\r\n .hero{\r\n position:relative; width:100%; min-height:100vh;\r\n display:flex; align-items:center; justify-content:center;\r\n overflow:hidden;\r\n background:\r\n radial-gradient(ellipse at 20% 20%, rgba(212,175,55,.10), transparent 55%),\r\n radial-gradient(ellipse at 80% 80%, rgba(248,200,220,.08), transparent 55%),\r\n linear-gradient(180deg, #000000 0%, #0c0608 60%, #000000 100%);\r\n }\r\n .stage{\r\n position:absolute; inset:0; perspective:1400px; transform-style:preserve-3d;\r\n }\r\n .floater{\r\n position:absolute; will-change:transform; opacity:.85;\r\n transform-style:preserve-3d;\r\n filter:drop-shadow(0 10px 25px rgba(0,0,0,.6));\r\n animation:driftY var(--dur,14s) ease-in-out infinite,\r\n spin var(--spin,22s) linear infinite;\r\n }\r\n .floater svg{ width:100%; height:100%; display:block; }\r\n @keyframes driftY{\r\n 0%,100%{ transform:translateY(0) translateX(0) rotate(var(--r0,0deg)); }\r\n 50%{ transform:translateY(-26px) translateX(10px) rotate(var(--r1,8deg)); }\r\n }\r\n @keyframes spin{ from{ transform:rotateZ(0deg);} to{ transform:rotateZ(360deg);} }\r\n\r\n .hero-content{\r\n position:relative; z-index:20; text-align:center; max-width:900px;\r\n padding:0 24px;\r\n }\r\n .eyebrow{\r\n display:inline-block; font-size:.72rem; letter-spacing:6px; text-transform:uppercase;\r\n color:var(--gold); margin-bottom:18px; opacity:0;\r\n animation:fadeUp 1s var(--ease) .1s forwards;\r\n }\r\n .hero h1{\r\n font-family:var(--font-display); font-weight:800;\r\n font-size:clamp(2.6rem, 7vw, 5.4rem); line-height:1.05; margin:0 0 22px;\r\n letter-spacing:1px;\r\n background:linear-gradient(100deg, var(--white) 30%, var(--gold-light) 45%, var(--gold) 55%, var(--white) 70%);\r\n background-size:300% 100%;\r\n -webkit-background-clip:text; background-clip:text; color:transparent;\r\n opacity:0; transform:translateY(40px);\r\n animation:fadeUp 1.1s var(--ease) .3s forwards, shimmerText 6s linear 1.4s infinite;\r\n }\r\n @keyframes fadeUp{ to{ opacity:1; transform:translateY(0);} }\r\n @keyframes shimmerText{ 0%{ background-position:0% 0;} 100%{ background-position:300% 0;} }\r\n\r\n .hero p.sub{\r\n font-size:clamp(1rem,2vw,1.2rem); color:#e9dfe4; font-weight:300;\r\n max-width:640px; margin:0 auto 40px; line-height:1.7;\r\n opacity:0; animation:fadeUp 1s var(--ease) .6s forwards;\r\n }\r\n\r\n .cta-row{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap;\r\n opacity:0; animation:fadeUp 1s var(--ease) .9s forwards; }\r\n\r\n .btn{\r\n position:relative; overflow:hidden; padding:16px 38px; font-size:.85rem;\r\n letter-spacing:2px; text-transform:uppercase; border-radius:40px;\r\n cursor:pointer; font-weight:600; transition:transform .4s var(--ease), box-shadow .4s var(--ease);\r\n border:1px solid var(--gold);\r\n }\r\n .btn-primary{ background:linear-gradient(120deg, var(--gold), var(--gold-light)); color:#1a1206; }\r\n .btn-secondary{ background:transparent; color:var(--gold-light); }\r\n .btn:hover{ transform:translateY(-4px) scale(1.04); box-shadow:0 12px 34px rgba(212,175,55,.45); }\r\n .btn .ripple{\r\n position:absolute; border-radius:50%; background:rgba(255,255,255,.5);\r\n transform:scale(0); animation:rip .6s ease-out forwards; pointer-events:none;\r\n }\r\n @keyframes rip{ to{ transform:scale(3); opacity:0; } }\r\n\r\n .scroll-cue{\r\n position:absolute; bottom:34px; left:50%; transform:translateX(-50%);\r\n display:flex; flex-direction:column; align-items:center; gap:8px; z-index:20;\r\n color:var(--pink); font-size:.65rem; letter-spacing:3px; text-transform:uppercase;\r\n opacity:.75;\r\n }\r\n .scroll-cue .line{ width:1px; height:36px; background:linear-gradient(var(--gold), transparent);\r\n animation:scrollLine 1.8s ease-in-out infinite; }\r\n @keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 50.01%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} }\r\n\r\n \/* ============================================================\r\n 4. SECTION FRAME (shared)\r\n ============================================================ *\/\r\n section{ position:relative; padding:120px 6%; }\r\n .section-head{ text-align:center; max-width:720px; margin:0 auto 64px; }\r\n .section-head .tag{\r\n font-size:.72rem; letter-spacing:5px; text-transform:uppercase; color:var(--gold);\r\n }\r\n .section-head h2{\r\n font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem); font-weight:800;\r\n margin:14px 0 0; color:var(--white);\r\n }\r\n .reveal{ opacity:0; transform:translateY(50px); transition:opacity .9s var(--ease), transform .9s var(--ease); }\r\n .reveal.in{ opacity:1; transform:translateY(0); }\r\n .reveal.zoom{ transform:scale(.9); }\r\n .reveal.zoom.in{ transform:scale(1); }\r\n\r\n \/* ============================================================\r\n 5. INTERACTIVE LIPSTICK\r\n ============================================================ *\/\r\n .lip-section{\r\n background:linear-gradient(180deg, #000 0%, #14090f 50%, #000 100%);\r\n text-align:center; padding-top:100px;\r\n }\r\n .lip-hint{ color:var(--pink); font-size:.85rem; letter-spacing:2px; margin-top:10px; opacity:.8; }\r\n .lip-stage{\r\n position:relative; height:560px; max-width:520px; margin:60px auto 0;\r\n display:flex; align-items:flex-end; justify-content:center;\r\n touch-action:none;\r\n }\r\n .lipstick{\r\n position:relative; width:200px; height:440px; cursor:grab;\r\n transform-origin:bottom center;\r\n }\r\n .lipstick:active{ cursor:grabbing; }\r\n .lip-base{\r\n position:absolute; bottom:0; left:50%; transform:translateX(-50%);\r\n width:170px; height:220px; border-radius:16px 16px 30px 30px;\r\n background:linear-gradient(120deg,#0c0c0c 0%, #2a2a2a 30%, #050505 55%, #2a2a2a 80%, #0c0c0c 100%);\r\n box-shadow:inset 0 0 20px rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.7);\r\n border:1px solid #3a3a3a;\r\n }\r\n .lip-base::before{\r\n content:''; position:absolute; top:14px; left:14px; right:14px; bottom:14px;\r\n border:1px solid var(--gold-dim); border-radius:10px; opacity:.6;\r\n }\r\n .lip-gold-ring{\r\n position:absolute; left:50%; bottom:214px; transform:translateX(-50%);\r\n width:176px; height:26px; border-radius:50%;\r\n background:linear-gradient(90deg, var(--gold-dim), var(--gold-light), var(--gold), var(--gold-dim));\r\n box-shadow:0 4px 12px rgba(0,0,0,.6);\r\n }\r\n .lip-cap{\r\n position:absolute; left:50%; bottom:236px; transform:translateX(-50%);\r\n width:176px; height:200px; border-radius:20px 20px 60px 60px\/20px 20px 40px 40px;\r\n background:linear-gradient(120deg,#050505, #2c2c2c 40%, #050505 70%, #2c2c2c);\r\n box-shadow:0 20px 40px rgba(0,0,0,.6), inset 0 0 18px rgba(255,255,255,.06);\r\n transition:transform .05s linear;\r\n border:1px solid #3a3a3a;\r\n z-index:5;\r\n }\r\n .lip-cap::after{\r\n content:''; position:absolute; top:10%; left:18%; width:10px; height:60%;\r\n background:linear-gradient(rgba(255,255,255,.35), transparent);\r\n filter:blur(3px); border-radius:6px;\r\n }\r\n .lip-bullet{\r\n position:absolute; left:50%; bottom:238px; transform:translateX(-50%) translateY(0);\r\n width:96px; height:0px; border-radius:14px 14px 40px 40px;\r\n background:linear-gradient(180deg, #e35d7c, #b8264a 70%, #8c1638);\r\n box-shadow:0 0 30px rgba(216,60,100,.5), inset -8px 0 16px rgba(0,0,0,.35), inset 8px 0 16px rgba(255,255,255,.15);\r\n overflow:hidden; transition:height .05s linear; z-index:3;\r\n }\r\n .lip-shine{\r\n position:absolute; top:0; left:20%; width:14px; height:100%;\r\n background:linear-gradient(rgba(255,255,255,.55), transparent 70%);\r\n filter:blur(2px);\r\n }\r\n .sparkle{\r\n position:absolute; width:6px; height:6px; border-radius:50%;\r\n background:var(--gold-light); box-shadow:0 0 8px 2px rgba(241,214,122,.9);\r\n pointer-events:none; animation:sparkleUp 1s ease-out forwards;\r\n }\r\n @keyframes sparkleUp{ to{ transform:translateY(-70px) scale(0); opacity:0; } }\r\n\r\n .lip-info{\r\n max-width:640px; margin:50px auto 0; display:grid;\r\n grid-template-columns:repeat(3,1fr); gap:18px;\r\n }\r\n @media(max-width:640px){ .lip-info{ grid-template-columns:repeat(2,1fr);} }\r\n .lip-info .point{\r\n background:rgba(248,200,220,.06); border:1px solid rgba(212,175,55,.25);\r\n border-radius:14px; padding:16px 10px; font-size:.8rem; letter-spacing:.5px;\r\n color:var(--pink); opacity:0; transform:translateY(16px) scale(.9);\r\n transition:opacity .5s var(--ease), transform .5s var(--ease);\r\n }\r\n .lip-info .point.show{ opacity:1; transform:translateY(0) scale(1); }\r\n\r\n \/* ============================================================\r\n 6. ABOUT\r\n ============================================================ *\/\r\n .about{\r\n background:linear-gradient(180deg,#000, #0a0a0a);\r\n }\r\n .about-grid{\r\n display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;\r\n max-width:1180px; margin:0 auto;\r\n }\r\n @media(max-width:860px){ .about-grid{ grid-template-columns:1fr; } }\r\n .about-visual{\r\n position:relative; aspect-ratio:1\/1; border-radius:26px; overflow:hidden;\r\n background:radial-gradient(circle at 30% 30%, rgba(212,175,55,.25), transparent 60%),\r\n linear-gradient(145deg, #1b1113, #050203);\r\n border:1px solid rgba(212,175,55,.25);\r\n display:flex; align-items:center; justify-content:center;\r\n }\r\n .about-visual svg{ width:62%; }\r\n .about-copy p{\r\n color:#d8cdd1; line-height:1.9; font-weight:300; margin-bottom:20px; font-size:1.02rem;\r\n }\r\n .about-copy strong{ color:var(--gold-light); font-weight:600; }\r\n .stat-row{ display:flex; gap:40px; margin-top:36px; flex-wrap:wrap; }\r\n .stat b{ display:block; font-family:var(--font-display); font-size:2.1rem; color:var(--gold); }\r\n .stat span{ font-size:.75rem; letter-spacing:1.5px; color:var(--pink); text-transform:uppercase; }\r\n\r\n \/* ============================================================\r\n 7. PRODUCTS\r\n ============================================================ *\/\r\n .products{ background:#000; }\r\n .grid{\r\n display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));\r\n gap:28px; max-width:1300px; margin:0 auto;\r\n }\r\n .card{\r\n position:relative; background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));\r\n border:1px solid rgba(212,175,55,.18); border-radius:20px; padding:26px 22px 24px;\r\n overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);\r\n }\r\n .card::before{\r\n content:''; position:absolute; top:0; left:-140%; width:60%; height:100%;\r\n background:linear-gradient(100deg, transparent, rgba(212,175,55,.25), transparent);\r\n transform:skewX(-20deg); transition:left .8s ease;\r\n }\r\n .card:hover::before{ left:140%; }\r\n .card:hover{\r\n transform:translateY(-10px) rotate(-.4deg);\r\n box-shadow:0 24px 50px rgba(212,175,55,.18);\r\n border-color:var(--gold);\r\n }\r\n .card-img{\r\n width:100%; aspect-ratio:1\/1; border-radius:14px; margin-bottom:18px;\r\n display:flex; align-items:center; justify-content:center;\r\n background:radial-gradient(circle at 35% 30%, rgba(248,200,220,.18), rgba(0,0,0,0) 60%),\r\n linear-gradient(150deg,#1a1214,#060404);\r\n }\r\n .card-img svg{ width:52%; height:52%; }\r\n .card h3{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 6px; color:var(--white); }\r\n .card p{ font-size:.85rem; color:#c9bcc2; line-height:1.55; margin:0 0 14px; min-height:44px; }\r\n .card-meta{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }\r\n .price{ font-family:var(--font-display); font-size:1.15rem; color:var(--gold-light); }\r\n .stars{ color:var(--gold); font-size:.8rem; letter-spacing:1px; }\r\n .buy{\r\n width:100%; padding:12px; border-radius:30px; border:1px solid var(--gold);\r\n background:transparent; color:var(--gold-light); font-size:.75rem; letter-spacing:2px;\r\n text-transform:uppercase; cursor:pointer; transition:background .35s, color .35s, transform .3s;\r\n }\r\n .buy:hover{ background:var(--gold); color:#160f04; transform:scale(1.03); }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"cursor-glow\"><\/div>\r\n\r\n\r\n<section class=\"hero\" id=\"home\" style=\"padding:0;\">\r\n <div class=\"stage\" id=\"stage\"><\/div>\r\n\r\n <div class=\"hero-content\">\r\n <span class=\"eyebrow\">Luxury Beauty & Skincare<\/span>\r\n <h1>Welcome to Beauty Hub<\/h1>\r\n <p class=\"sub\">Discover premium beauty products, luxurious skincare solutions, and makeup designed to bring out your natural beauty.<\/p>\r\n <div class=\"cta-row\">\r\n <button class=\"btn btn-primary\" onclick=\"location.href='#products'\">Shop Now<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"location.href='#products'\">Explore Collection<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scroll-cue\"><span>Scroll<\/span><span class=\"line\"><\/span><\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"lip-section\" id=\"lipstick\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"tag\">Our Signature<\/span>\r\n <h2>The Gold \u00c9dition Lipstick<\/h2>\r\n <p class=\"lip-hint\">Drag the bullet upward to reveal it, downward to close it<\/p>\r\n <\/div>\r\n\r\n <div class=\"lip-stage\">\r\n <div class=\"lipstick\">\r\n <div class=\"lip-base\"><\/div>\r\n <div class=\"lip-bullet\" id=\"bullet\"><div class=\"lip-shine\"><\/div><\/div>\r\n <div class=\"lip-gold-ring\"><\/div>\r\n <div class=\"lip-cap\" id=\"cap\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lip-info\" id=\"lipInfo\">\r\n <div class=\"point\">Premium quality<\/div>\r\n <div class=\"point\">Long lasting<\/div>\r\n <div class=\"point\">Waterproof<\/div>\r\n <div class=\"point\">Vegan formula<\/div>\r\n <div class=\"point\">Cruelty free<\/div>\r\n <div class=\"point\">Dermatologist tested<\/div>\r\n <div class=\"point\">Rich pigmentation<\/div>\r\n <div class=\"point\">Soft texture<\/div>\r\n <div class=\"point\">Luxury packaging<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"about\" id=\"about\">\r\n <div class=\"about-grid\">\r\n <div class=\"about-visual reveal zoom\">\r\n <svg viewBox=\"0 0 200 200\" fill=\"none\">\r\n <circle cx=\"100\" cy=\"100\" r=\"90\" stroke=\"#D4AF37\" stroke-width=\"1\" opacity=\".4\"\/>\r\n <path d=\"M100 40c-16 0-28 14-28 32 0 22 28 68 28 68s28-46 28-68c0-18-12-32-28-32z\" fill=\"#F8C8DC\" opacity=\".85\"\/>\r\n <circle cx=\"100\" cy=\"72\" r=\"12\" fill=\"#D4AF37\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"about-copy\">\r\n <div class=\"reveal\">\r\n <span class=\"tag\" style=\"color:var(--gold)\">About Beauty Hub<\/span>\r\n <h2 style=\"font-family:var(--font-display); font-size:clamp(1.8rem,3.4vw,2.6rem); margin:12px 0 26px;\">Where luxury meets skin science<\/h2>\r\n <\/div>\r\n <p class=\"reveal\">Beauty Hub was founded on a single belief: that <strong>premium skincare and makeup<\/strong> should feel like a ritual, not a routine. Our mission is to craft formulas that perform at the highest level while honoring the skin they touch, blending <strong>organic botanicals<\/strong> with clinically-proven actives.<\/p>\r\n <p class=\"reveal\">Every serum, cream, and pigment begins with sourcing \u2014 we work directly with growers of <strong>premium, sustainably harvested ingredients<\/strong>, avoiding shortcuts that compromise purity. Our vision is a world where luxury beauty is also honest beauty: cruelty-free, dermatologist-tested, and transparent about every ingredient.<\/p>\r\n <p class=\"reveal\">Our in-house makeup artists and chemists collaborate on every shade and texture, ensuring each product enhances <strong>natural beauty<\/strong> rather than masking it. From the first formulation trial to the final gold-foiled package, <strong>innovation and sustainability<\/strong> guide every decision \u2014 because customer satisfaction and the health of our planet are never in competition.<\/p>\r\n <div class=\"stat-row reveal\">\r\n <div class=\"stat\"><b>12+<\/b><span>Signature Products<\/span><\/div>\r\n <div class=\"stat\"><b>100%<\/b><span>Cruelty Free<\/span><\/div>\r\n <div class=\"stat\"><b>98%<\/b><span>Client Satisfaction<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"products\" id=\"products\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"tag\">Featured Collection<\/span>\r\n <h2>Signature Products<\/h2>\r\n <\/div>\r\n <div class=\"grid\" id=\"productGrid\"><\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/* ==================================================================\r\n ICON LIBRARY \u2014 simple inline SVGs standing in for product photography\r\n ================================================================== *\/\r\nconst ICONS = {\r\n lipstick: `<svg viewBox=\"0 0 60 60\"><rect x=\"22\" y=\"28\" width=\"16\" height=\"24\" rx=\"4\" fill=\"#1a1a1a\"\/><path d=\"M23 28 L23 14 Q30 4 37 14 L37 28 Z\" fill=\"#e35d7c\"\/><rect x=\"21\" y=\"26\" width=\"18\" height=\"6\" rx=\"2\" fill=\"#D4AF37\"\/><\/svg>`,\r\n perfume: `<svg viewBox=\"0 0 60 60\"><rect x=\"18\" y=\"22\" width=\"24\" height=\"30\" rx=\"6\" fill=\"#F8C8DC\" opacity=\".9\"\/><rect x=\"26\" y=\"10\" width=\"8\" height=\"12\" rx=\"2\" fill=\"#D4AF37\"\/><circle cx=\"30\" cy=\"8\" r=\"4\" fill=\"#D4AF37\"\/><\/svg>`,\r\n brush: `<svg viewBox=\"0 0 60 60\"><rect x=\"27\" y=\"20\" width=\"6\" height=\"34\" rx=\"3\" fill=\"#1a1a1a\"\/><rect x=\"26\" y=\"12\" width=\"8\" height=\"10\" rx=\"2\" fill=\"#D4AF37\"\/><ellipse cx=\"30\" cy=\"8\" rx=\"10\" ry=\"7\" fill=\"#2c2c2c\"\/><\/svg>`,\r\n foundation: `<svg viewBox=\"0 0 60 60\"><rect x=\"15\" y=\"18\" width=\"30\" height=\"34\" rx=\"8\" fill=\"#e9c9a8\"\/><rect x=\"15\" y=\"18\" width=\"30\" height=\"10\" rx=\"8\" fill=\"#D4AF37\"\/><\/svg>`,\r\n nail: `<svg viewBox=\"0 0 60 60\"><rect x=\"20\" y=\"22\" width=\"20\" height=\"28\" rx=\"3\" fill=\"#8c1638\"\/><rect x=\"24\" y=\"10\" width=\"12\" height=\"14\" rx=\"2\" fill=\"#1a1a1a\"\/><\/svg>`,\r\n cream: `<svg viewBox=\"0 0 60 60\"><rect x=\"14\" y=\"22\" width=\"32\" height=\"26\" rx=\"14\" fill=\"#F8C8DC\"\/><ellipse cx=\"30\" cy=\"20\" rx=\"16\" ry=\"6\" fill=\"#D4AF37\"\/><\/svg>`,\r\n serum: `<svg viewBox=\"0 0 60 60\"><rect x=\"20\" y=\"18\" width=\"20\" height=\"32\" rx=\"4\" fill=\"#c9a6ff\" opacity=\".8\"\/><rect x=\"24\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\" fill=\"#D4AF37\"\/><\/svg>`,\r\n compact: `<svg viewBox=\"0 0 60 60\"><circle cx=\"30\" cy=\"32\" r=\"20\" fill=\"#1a1a1a\"\/><circle cx=\"30\" cy=\"32\" r=\"15\" fill=\"#F8C8DC\" opacity=\".8\"\/><circle cx=\"30\" cy=\"12\" r=\"2.5\" fill=\"#D4AF37\"\/><\/svg>`,\r\n mascara: `<svg viewBox=\"0 0 60 60\"><rect x=\"25\" y=\"8\" width=\"10\" height=\"16\" rx=\"3\" fill=\"#D4AF37\"\/><rect x=\"23\" y=\"24\" width=\"14\" height=\"30\" rx=\"4\" fill=\"#1a1a1a\"\/><\/svg>`,\r\n eyeliner: `<svg viewBox=\"0 0 60 60\"><rect x=\"27\" y=\"10\" width=\"6\" height=\"36\" rx=\"3\" fill=\"#1a1a1a\"\/><rect x=\"25\" y=\"42\" width=\"10\" height=\"10\" rx=\"2\" fill=\"#D4AF37\"\/><\/svg>`,\r\n blush: `<svg viewBox=\"0 0 60 60\"><circle cx=\"30\" cy=\"32\" r=\"20\" fill=\"#F8C8DC\"\/><circle cx=\"30\" cy=\"32\" r=\"9\" fill=\"#e6a9c4\"\/><\/svg>`,\r\n facewash: `<svg viewBox=\"0 0 60 60\"><rect x=\"17\" y=\"20\" width=\"26\" height=\"32\" rx=\"6\" fill=\"#bfe6e0\"\/><rect x=\"24\" y=\"8\" width=\"12\" height=\"14\" rx=\"3\" fill=\"#D4AF37\"\/><\/svg>`,\r\n sunscreen: `<svg viewBox=\"0 0 60 60\"><rect x=\"16\" y=\"18\" width=\"28\" height=\"34\" rx=\"8\" fill=\"#fbe7b0\"\/><circle cx=\"30\" cy=\"32\" r=\"8\" fill=\"#D4AF37\" opacity=\".7\"\/><\/svg>`\r\n};\r\n\r\n\/* ==================================================================\r\n HERO \u2014 floating 3D product field\r\n ================================================================== *\/\r\nconst stage = document.getElementById('stage');\r\nconst floatKeys = ['lipstick','perfume','brush','foundation','nail','cream','serum','compact','mascara','eyeliner'];\r\nconst floaters = [];\r\n\r\nfloatKeys.forEach((key, i) => {\r\n const el = document.createElement('div');\r\n el.className = 'floater';\r\n el.innerHTML = ICONS[key];\r\n const size = 46 + Math.random()*54;\r\n const top = 6 + Math.random()*82;\r\n const left = 4 + Math.random()*88;\r\n const depth = Math.random(); \/\/ 0 = far, 1 = near\r\n el.style.width = size+'px';\r\n el.style.height = size+'px';\r\n el.style.top = top+'%';\r\n el.style.left = left+'%';\r\n el.style.setProperty('--dur', (10+Math.random()*10)+'s');\r\n el.style.setProperty('--spin', (16+Math.random()*20)+'s');\r\n el.style.setProperty('--r0', (Math.random()*20-10)+'deg');\r\n el.style.setProperty('--r1', (Math.random()*20-10)+'deg');\r\n el.style.opacity = 0.35 + depth*0.55;\r\n el.style.filter += ` blur(${(1-depth)*3}px)`;\r\n el.dataset.depth = depth;\r\n stage.appendChild(el);\r\n floaters.push(el);\r\n});\r\n\r\n\/* Parallax + cursor glow + golden trail *\/\r\nconst glow = document.getElementById('cursor-glow');\r\nlet mx = window.innerWidth\/2, my = window.innerHeight\/2;\r\nlet trailTick = 0;\r\n\r\nwindow.addEventListener('mousemove', (e) => {\r\n mx = e.clientX; my = e.clientY;\r\n glow.style.transform = `translate(${mx}px, ${my}px) translate(-50%,-50%)`;\r\n\r\n const cx = window.innerWidth\/2, cy = window.innerHeight\/2;\r\n const nx = (mx - cx)\/cx, ny = (my - cy)\/cy;\r\n\r\n floaters.forEach(f => {\r\n const depth = parseFloat(f.dataset.depth);\r\n const strength = 18 + depth*30;\r\n f.style.marginLeft = (nx * strength)+'px';\r\n f.style.marginTop = (ny * strength * .6)+'px';\r\n });\r\n\r\n trailTick++;\r\n if (trailTick % 2 === 0){\r\n const dot = document.createElement('div');\r\n dot.className = 'trail-dot';\r\n dot.style.left = mx+'px';\r\n dot.style.top = my+'px';\r\n document.body.appendChild(dot);\r\n setTimeout(()=>dot.remove(), 750);\r\n }\r\n});\r\n\r\n\/* Ripple on buttons *\/\r\ndocument.querySelectorAll('.btn').forEach(btn=>{\r\n btn.addEventListener('click', function(e){\r\n const r = document.createElement('span');\r\n r.className = 'ripple';\r\n const rect = this.getBoundingClientRect();\r\n const size = Math.max(rect.width, rect.height);\r\n r.style.width = r.style.height = size+'px';\r\n r.style.left = (e.clientX - rect.left - size\/2)+'px';\r\n r.style.top = (e.clientY - rect.top - size\/2)+'px';\r\n this.appendChild(r);\r\n setTimeout(()=>r.remove(), 650);\r\n });\r\n});\r\n\r\n\/* ==================================================================\r\n SCROLL REVEAL\r\n ================================================================== *\/\r\nconst io = new IntersectionObserver((entries)=>{\r\n entries.forEach((entry, i)=>{\r\n if(entry.isIntersecting){\r\n setTimeout(()=> entry.target.classList.add('in'), i*90);\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n}, { threshold:.18 });\r\ndocument.querySelectorAll('.reveal').forEach(el=>io.observe(el));\r\n\r\n\/* ==================================================================\r\n INTERACTIVE LIPSTICK \u2014 drag to open\/close\r\n ================================================================== *\/\r\nconst cap = document.getElementById('cap');\r\nconst bullet = document.getElementById('bullet');\r\nconst lipInfo = document.getElementById('lipInfo');\r\n\r\nconst MAX_OPEN = 150; \/\/ px the cap can travel\r\nconst MAX_BULLET = 130; \/\/ px the bullet extends\r\n\r\nlet dragging = false, startY = 0, startOpen = 0, openAmount = 0, isOpen = false;\r\n\r\nfunction applyOpen(amount, rotate){\r\n openAmount = Math.max(0, Math.min(MAX_OPEN, amount));\r\n const ratio = openAmount \/ MAX_OPEN;\r\n cap.style.transform = `translateX(-50%) translateY(${-openAmount}px) rotate(${rotate||0}deg)`;\r\n bullet.style.height = (ratio*MAX_BULLET) + 'px';\r\n bullet.style.bottom = (238 + ratio*30) + 'px';\r\n}\r\n\r\nfunction spawnSparkles(n){\r\n const rect = bullet.getBoundingClientRect();\r\n for(let i=0;i<n;i++){\r\n const s = document.createElement('div');\r\n s.className = 'sparkle';\r\n s.style.left = (rect.left + rect.width\/2 + (Math.random()*40-20)) + 'px';\r\n s.style.top = (rect.top + (Math.random()*20)) + 'px';\r\n document.body.appendChild(s);\r\n setTimeout(()=>s.remove(), 1000);\r\n }\r\n}\r\n\r\nfunction revealInfo(open){\r\n const points = lipInfo.querySelectorAll('.point');\r\n points.forEach((p,i)=>{\r\n setTimeout(()=> p.classList.toggle('show', open), open ? i*90 : (points.length-i)*40);\r\n });\r\n}\r\n\r\nfunction pointerDown(e){\r\n dragging = true;\r\n startY = (e.touches ? e.touches[0].clientY : e.clientY);\r\n startOpen = openAmount;\r\n document.querySelector('.lipstick').style.cursor='grabbing';\r\n}\r\nfunction pointerMove(e){\r\n if(!dragging) return;\r\n const y = (e.touches ? e.touches[0].clientY : e.clientY);\r\n const delta = startY - y; \/\/ dragging up = positive\r\n const rotate = Math.max(-8, Math.min(8, (startY - y)\/14));\r\n applyOpen(startOpen + delta, rotate);\r\n if(!isOpen && openAmount > MAX_OPEN*0.4 && Math.random()<0.3) spawnSparkles(1);\r\n}\r\nfunction pointerUp(){\r\n if(!dragging) return;\r\n dragging = false;\r\n const shouldOpen = openAmount > MAX_OPEN*0.45;\r\n applyOpen(shouldOpen ? MAX_OPEN : 0, 0);\r\n if(shouldOpen && !isOpen){ spawnSparkles(18); revealInfo(true); }\r\n if(!shouldOpen && isOpen){ revealInfo(false); }\r\n isOpen = shouldOpen;\r\n}\r\n\r\nconst lipEl = document.querySelector('.lipstick');\r\nlipEl.addEventListener('mousedown', pointerDown);\r\nlipEl.addEventListener('touchstart', pointerDown, {passive:true});\r\nwindow.addEventListener('mousemove', pointerMove);\r\nwindow.addEventListener('touchmove', pointerMove, {passive:true});\r\nwindow.addEventListener('mouseup', pointerUp);\r\nwindow.addEventListener('touchend', pointerUp);\r\n\r\n\/* ==================================================================\r\n PRODUCT GRID \u2014 generated cards\r\n ================================================================== *\/\r\nconst PRODUCTS = [\r\n { key:'lipstick', name:'Velvet Gold Lipstick', desc:'Rich, long-wear pigment with a satin finish.', price:'$32', stars:5 },\r\n { key:'foundation',name:'Silk Veil Foundation', desc:'Buildable, breathable coverage for every tone.', price:'$44', stars:4 },\r\n { key:'serum', name:'Radiance Face Serum', desc:'Vitamin C + peptides for a luminous glow.', price:'$58', stars:5 },\r\n { key:'cream', name:'Rosewater Moisturizer', desc:'24-hour hydration with botanical extracts.', price:'$46', stars:4 },\r\n { key:'sunscreen', name:'Daily Shield SPF 50', desc:'Weightless, non-greasy broad-spectrum protection.', price:'$29', stars:5 },\r\n { key:'facewash', name:'Gentle Cleansing Foam', desc:'Sulfate-free cleanser for a soft, clean feel.', price:'$24', stars:4 },\r\n { key:'perfume', name:'Gold Orchid Perfume', desc:'A warm floral scent with amber and musk.', price:'$76', stars:5 },\r\n { key:'mascara', name:'Lash Lift Mascara', desc:'Volumizing, smudge-proof, all-day wear.', price:'$26', stars:4 },\r\n { key:'eyeliner', name:'Precision Gel Eyeliner', desc:'Ultra-fine tip for a flawless, sharp line.', price:'$22', stars:5 },\r\n { key:'compact', name:'Powder Compact Deluxe', desc:'Silky, translucent finishing powder.', price:'$34', stars:4 },\r\n { key:'blush', name:'Petal Flush Blush', desc:'Buildable color for a natural, dewy flush.', price:'$28', stars:5 },\r\n { key:'facewash', name:'Purifying Clay Wash', desc:'Deep-clean formula for balanced, calm skin.', price:'$25', stars:4 },\r\n];\r\n\r\nconst grid = document.getElementById('productGrid');\r\nPRODUCTS.forEach((p, i)=>{\r\n const card = document.createElement('div');\r\n card.className = 'card reveal';\r\n card.innerHTML = `\r\n <div class=\"card-img\">${ICONS[p.key]}<\/div>\r\n <h3>${p.name}<\/h3>\r\n <p>${p.desc}<\/p>\r\n <div class=\"card-meta\">\r\n <span class=\"price\">${p.price}<\/span>\r\n <span class=\"stars\">${'\u2605'.repeat(p.stars)}${'\u2606'.repeat(5-p.stars)}<\/span>\r\n <\/div>\r\n <button class=\"buy\" onclick=\"this.textContent='Added \u2713'\">Buy Now<\/button>\r\n `;\r\n grid.appendChild(card);\r\n io.observe(card);\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Beauty Hub \u2014 Luxury Beauty & Skincare Luxury Beauty & Skincare Welcome to Beauty Hub Discover premium beauty products, luxurious […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":4,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/124"}],"wp:attachment":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}