/* Google Fonts now loaded via a direct in (faster than @import) */
:root {
--gold: #c9a961;
--gold-bright: #e8c86a;
--gold-deep: #a88a3f;
--gold-soft: #f3e5b8;
--ivory: #fdfcf7;
--cream: #f7f1e3;
--ink: #0a0a0a;
--charcoal: #1a1a1a;
--smoke: #2a2a26;
}
html, body {
margin: 0;
padding: 0;
background: var(--ivory);
color: var(--ink);
font-family: "Cairo", "Tajawal", sans-serif;
direction: rtl;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
* { box-sizing: border-box; }
.font-display { font-family: "Amiri", "Playfair Display", serif; font-weight: 700; letter-spacing: -0.01em; }
.font-latin { font-family: "Playfair Display", serif; }
.gold-text {
position: relative;
background: linear-gradient(110deg, #8a6d2b 0%, #c9a961 20%, #f5e28c 35%, #ffffff 45%, #f5e28c 55%, #e8c86a 70%, #c9a961 85%, #8a6d2b 100%);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: goldWave 4s ease-in-out infinite;
text-shadow: 0 0 30px rgba(232, 200, 106, 0.35);
filter: drop-shadow(0 0 8px rgba(232, 200, 106, 0.25));
}
@keyframes goldWave { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.gold-border { border: 1px solid rgba(201, 169, 97, 0.35); }
.gold-ring { box-shadow: 0 0 0 1px rgba(201, 169, 97, 0.25), 0 20px 60px -20px rgba(201, 169, 97, 0.3); }
.marble-bg {
background: radial-gradient(ellipse at 30% 20%, rgba(201, 169, 97, 0.12), transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(232, 200, 106, 0.08), transparent 50%),
linear-gradient(135deg, #fdfcf7 0%, #f7f1e3 100%);
}
.dark-marble-bg {
background: radial-gradient(ellipse at 20% 30%, rgba(201, 169, 97, 0.22), transparent 55%),
radial-gradient(ellipse at 80% 70%, rgba(232, 200, 106, 0.14), transparent 55%),
linear-gradient(160deg, #0a0a0a 0%, #14120a 60%, #0a0a0a 100%);
}
.grain { position: relative; }
.grain::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
opacity: 0.06;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
.gold-btn {
position: relative;
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #e8c86a 0%, #c9a961 50%, #8a6d2b 100%);
color: #0a0a0a;
font-weight: 700;
padding: 0.9rem 2rem;
border-radius: 999px;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
box-shadow: 0 10px 30px -10px rgba(201, 169, 97, 0.6);
border: 1px solid rgba(255, 240, 190, 0.4);
isolation: isolate;
}
.gold-btn::before {
content: "";
position: absolute; width: 18px; height: 18px; left: 0; top: 0;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0%, #fff8d6 30%, #ffe9a8 60%, transparent 75%);
box-shadow: 0 0 8px #ffffff, 0 0 16px #ffe9a8, 0 0 24px rgba(232, 200, 106, 0.6);
offset-path: inset(0 round 999px);
offset-distance: 0%;
animation: btnMeteor 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
pointer-events: none; z-index: 3; opacity: 0;
}
.gold-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(201, 169, 97, 0.8); }
.gold-btn::after {
content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
transform: skewX(-25deg);
transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1;
}
.gold-btn:hover::after { left: 130%; }
.outline-btn {
position: relative;
display: inline-flex;
align-items: center;
padding: 0.85rem 1.9rem;
border-radius: 999px;
border: 1px solid rgba(201, 169, 97, 0.6);
color: #c9a961;
font-weight: 600;
transition: all 0.3s;
background: transparent;
isolation: isolate;
}
.outline-btn::before {
content: ""; position: absolute; width: 14px; height: 14px; left: 0; top: 0;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0%, #ffe9a8 40%, transparent 75%);
box-shadow: 0 0 6px #ffffff, 0 0 14px #ffe9a8, 0 0 22px rgba(201, 169, 97, 0.6);
offset-path: inset(0 round 999px);
offset-distance: 0%;
animation: btnMeteor 4.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
animation-delay: 1.2s;
pointer-events: none; opacity: 0;
}
.outline-btn:hover { background: rgba(201, 169, 97, 0.1); color: #e8c86a; }
@keyframes btnMeteor {
0% { offset-distance: 0%; opacity: 0; }
5% { opacity: 1; }
70% { offset-distance: 100%; opacity: 1; }
78% { offset-distance: 100%; opacity: 0; }
100% { offset-distance: 100%; opacity: 0; }
}
.icon-orbit { position: relative; isolation: isolate; }
.icon-orbit::before {
content: ""; position: absolute; width: 10px; height: 10px; left: 0; top: 0;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0%, #fff8d6 30%, #ffe9a8 60%, transparent 75%);
box-shadow: 0 0 6px #ffffff, 0 0 12px #ffe9a8, 0 0 20px rgba(232, 200, 106, 0.7);
offset-path: circle(50%);
offset-distance: 0%;
animation: iconMeteor 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
pointer-events: none; z-index: 3; opacity: 0;
}
@keyframes iconMeteor {
0% { offset-distance: 0%; opacity: 0; }
6% { opacity: 1; }
72% { offset-distance: 100%; opacity: 1; }
80% { offset-distance: 100%; opacity: 0; }
100% { offset-distance: 100%; opacity: 0; }
}
.shine-heading {
position: relative;
display: inline-block;
background: linear-gradient(110deg, #8a6d2b 0%, #c9a961 18%, #f5e28c 32%, #ffffff 46%, #f5e28c 60%, #e8c86a 74%, #c9a961 88%, #8a6d2b 100%);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: goldWave 5s ease-in-out infinite;
filter: drop-shadow(0 0 12px rgba(232, 200, 106, 0.35)) drop-shadow(0 0 24px rgba(232, 200, 106, 0.18));
}
.shine-heading::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,248,214,.7) 50%, rgba(255,255,255,.55) 52%, transparent 70%);
background-size: 200% 100%;
background-position: 200% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: shineSweep 5s ease-in-out infinite;
pointer-events: none;
mix-blend-mode: screen;
}
@keyframes shineSweep { 0%,100% { background-position: 200% 0; } 50% { background-position: -100% 0; } }
.card-3d { transform-style: preserve-3d; perspective: 1200px; cursor: pointer; }
.card-3d-inner { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; }
.card-3d:hover .card-3d-inner, .card-3d.is-flipped .card-3d-inner { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; overflow: hidden; }
.card-face-back { transform: rotateY(180deg); }
.tilt-hover { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.tilt-hover:hover { transform: perspective(800px) rotateX(4deg) rotateY(-4deg) translateY(-6px); }
.hero-title { font-family: "Amiri", serif; font-weight: 700; font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.section-title { font-family: "Amiri", serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; }
.eyebrow { font-family: "Cairo", sans-serif; text-transform: uppercase; letter-spacing: 0.35em; font-size: 0.72rem; color: #c9a961; font-weight: 600; }
.divider-gold { width: 64px; height: 2px; background: linear-gradient(90deg, transparent, #c9a961, transparent); }
.gallery-img { filter: saturate(1.05) contrast(1.02); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s; }
.gallery-img:hover { transform: scale(1.05); filter: saturate(1.15) contrast(1.08); }
.glass { background: rgba(253, 252, 247, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(201, 169, 97, 0.2); }
.glass-dark { background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(201, 169, 97, 0.25); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f7f1e3; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c9a961, #8a6d2b); border-radius: 4px; }
::selection { background: #c9a961; color: #0a0a0a; }
a, button { cursor: pointer; }
@keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } }
.float { animation: float 6s ease-in-out infinite; }
@keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rotate-slow { animation: rotateSlow 40s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { animation: marquee 40s linear infinite; display: flex; width: max-content; }
/* ---- Reveal-on-scroll (replaces framer-motion whileInView) ---- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-scale.reveal-visible { opacity: 1; transform: scale(1); }
.reveal-x { opacity: 0; transform: translateX(30px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal-x.reveal-visible { opacity: 1; transform: translateX(0); }
/* Scroll chevron bounce */
@keyframes chevronBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.chevron-bounce { animation: chevronBounce 1.6s ease-in-out infinite; }
/* WhatsApp float ping */
@keyframes wa-ping { 75%, 100% { transform: scale(1.6); opacity: 0; } }
.wa-ping { animation: wa-ping 2s cubic-bezier(0,0,.2,1) infinite; }
/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }
/* three.js canvas container */
.three-canvas-wrap { position: absolute; inset: 0; }
.three-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }
/* ---- 3D rotating gallery carousel (octagonal prism, 8 faces = 8 gallery images) ---- */
.gallery-hex-scene {
position: relative;
width: 100%;
height: 420px;
perspective: 1600px;
-webkit-perspective: 1600px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 767px) { .gallery-hex-scene { height: 320px; } }
.gallery-hex-scale-wrap {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
@media (max-width: 767px) {
.gallery-hex-scale-wrap { transform: scale(0.72); -webkit-transform: scale(0.72); }
}
.gallery-hex-spinner {
position: relative;
width: 220px;
height: 300px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: galleryHexSpin 34s linear infinite;
}
.gallery-hex-face {
position: absolute;
top: 0; left: 0;
width: 220px; height: 300px;
border-radius: 18px;
overflow: hidden;
border: 1.5px solid rgba(201, 169, 97, 0.55);
box-shadow: 0 0 26px rgba(201, 169, 97, 0.28), inset 0 0 30px rgba(0, 0, 0, 0.25);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.gallery-hex-face img { width: 100%; height: 100%; object-fit: cover; }
.gallery-hex-face .shade {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,10,10,0.55), transparent 55%);
}
/* Inline SVG icons (replace FontAwesome tags) - sized via font-size like an icon font */
.icon-svg {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: currentColor;
stroke: currentColor;
flex-shrink: 0;
}
@keyframes galleryHexSpin {
from { transform: rotateX(-8deg) rotateY(0deg); }
to { transform: rotateX(-8deg) rotateY(360deg); }
}
.gallery-hex-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(201, 169, 97, 0.2);
pointer-events: none;
}
.gallery-hex-ring-1 { width: 460px; height: 460px; animation: galleryHexPulse 6s ease-in-out infinite; }
.gallery-hex-ring-2 { width: 360px; height: 360px; border-color: rgba(232, 200, 106, 0.18); animation: galleryHexPulse 6s ease-in-out infinite 1.5s; }
@media (max-width: 767px) {
.gallery-hex-ring-1 { width: 340px; height: 340px; }
.gallery-hex-ring-2 { width: 260px; height: 260px; }
}
@keyframes galleryHexPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.08); opacity: 0.9; } }