/* Typography & Colors - Beige, Maroon, Green Palette */
:root {
  --bg: #f8f6f0;           /* warm cream */
  --bg-contrast: #f0ede4;  /* soft beige */
  --ink: #1a2332;          /* deep navy */
  --ink-2: #4a5568;        /* muted slate */
  --accent: #8b4513;       /* maroon */
  --accent-2: #a0522d;     /* lighter maroon */
  --gold: #556b2f;         /* olive green */
  --gold-light: #6b8e23;   /* lighter olive green */
  --brick: #8b4513;        /* maroon */
  --line: #d4c4a8;         /* warm hairline */
  --cream: #fefcf7;        /* pure cream */
  --card: #f9f7f2;
  --arabic-gold: #556b2f;  /* olive green for Arabic text */
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; width: 100%; cursor: none; }

/* Hide default scrollbar */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3 { font-family: "Cormorant Garamond", serif; color: var(--ink); margin: 0 0 0.5rem; }
h1 { font-weight: 700; letter-spacing: 0.4px; line-height: 1.15; }
h2 { font-weight: 600; letter-spacing: 0.2px; }
h3 { font-weight: 600; }
p { margin: 0 0 1rem; color: var(--ink-2); }

/* Arabic Typography */
.arabic-text { 
  font-family: "Amiri", serif; 
  color: var(--arabic-gold); 
  font-weight: 700; 
  font-size: 1.1em;
  direction: rtl;
}
.arabic-subtitle { 
  font-family: "Scheherazade New", serif; 
  color: var(--gold); 
  font-size: 0.9rem; 
  direction: rtl;
  display: block;
  margin-top: 0.25rem;
}
.arabic-ornament { 
  font-family: "Amiri", serif; 
  color: var(--arabic-gold); 
  font-weight: 700; 
  font-size: 1.2rem;
  direction: rtl;
  opacity: 0.7;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.container { width: min(1120px, 92%); margin: 0 auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.1) blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, #fff 15% / 65%);
  border-bottom: 1px solid var(--line);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 18px rgba(0,0,0,.07); background: color-mix(in oklab, var(--bg) 70%, #fff 30% / 75%); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: 0.6px; }
.brand-mark { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--cream); }
.brand-name { font-family: "Cormorant Garamond", serif; font-size: 1.25rem; }

.nav-links { display: flex; align-items: center; gap: 1rem; }
.nav-links a { padding: 0.5rem 0.25rem; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }

.nav-toggle { 
  display: none; 
  background: transparent; 
  border: 0; 
  padding: 0.5rem; 
  cursor: pointer; 
  z-index: 100;
  position: relative;
}
.nav-toggle span { 
  display: block; 
  width: 22px; 
  height: 2px; 
  background: var(--ink); 
  margin: 5px 0; 
  transition: 0.3s ease;
  transform-origin: center;
}

/* Hamburger animation */
.nav-toggle.is-open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Buttons */
.btn { 
  display: inline-block; 
  padding: 1rem 2rem; 
  border-radius: 50px; 
  background: var(--accent); 
  color: #fff; 
  font-weight: 600; 
  letter-spacing: 0.5px; 
  border: 2px solid var(--accent); 
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 6px 20px rgba(139, 69, 19, 0.25);
  transition: all 0.4s ease;
  font-size: 1rem;
}
.btn:hover { 
  background: var(--gold); 
  border-color: var(--gold); 
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(85, 107, 47, 0.35);
}
.btn:active { 
  transform: translateY(0px); 
  box-shadow: 0 2px 8px rgba(45, 90, 135, 0.3);
}
.btn-outline { 
  background: var(--accent); 
  color: #fff; 
  border-color: var(--accent);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
}
.btn-outline:hover { 
  background: var(--gold); 
  border-color: var(--gold); 
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(85, 107, 47, 0.4);
}

/* Ensure Instagram button text is always white and visible */
.nav-links .btn-outline,
.nav-links .btn-outline:link,
.nav-links .btn-outline:visited,
.nav-links .btn-outline:active {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.nav-links .btn-outline:hover,
.nav-links .btn-outline:focus {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* Hero - Simple Style with Photo Backdrop */
.hero { 
  position: relative; 
  overflow: hidden; 
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Simple hero with photo backdrop */
.simple-hero {
  background: var(--bg);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.4) contrast(1.1);
}

.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg, 
    rgba(26, 35, 50, 0.7) 0%, 
    rgba(139, 69, 19, 0.5) 50%, 
    rgba(85, 107, 47, 0.6) 100%
  );
  z-index: 1;
}
.collage-hero {
  padding: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}
.hero-collage {
  margin-bottom: 0;
  width: 100%;
  max-width: none;
}
.hero-main {
  max-width: none;
  width: 100%;
  border-radius: 0;
  box-shadow: 
    0 50px 100px rgba(0,0,0,.4), 
    0 0 0 6px var(--gold), 
    0 0 0 12px rgba(212, 175, 55, 0.3),
    0 0 100px rgba(212, 175, 55, 0.4);
  position: relative;
}
.hero-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, 
    rgba(212, 175, 55, 0.1) 0%, 
    transparent 25%, 
    transparent 75%, 
    rgba(45, 90, 135, 0.1) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.hero-overlay {
  padding: 8rem 5rem 5rem;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.hero-headline {
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin-bottom: 1.5rem;
  line-height: 0.95;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 4px 8px rgba(0,0,0,0.5);
  position: relative;
}

/* Simple hero specific styling */
.simple-hero .hero-headline {
  color: #fff;
  text-shadow: 0 4px 12px rgba(0,0,0,0.7);
}

.hero-subhead {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Simple hero specific styling */
.simple-hero .hero-subhead {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.hero-content { 
  position: relative; 
  z-index: 2; 
  min-height: 60vh; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  padding: 2rem 0; 
  color: #fff; 
  max-width: 600px; 
  margin: 0 auto;
  text-align: center;
}

/* Simple hero content styling */
.simple-hero .hero-content::before { 
  content: ""; 
  position: absolute; 
  inset: -1.5rem -2rem; 
  background: rgba(0, 0, 0, 0.3); 
  backdrop-filter: blur(20px); 
  border-radius: 24px; 
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 20px 40px rgba(0,0,0,.3),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: -1;
}

@keyframes subtleGlow {
  0% { 
    box-shadow: 
      0 25px 50px rgba(0,0,0,.06),
      0 0 0 1px rgba(255, 255, 255, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 20px rgba(85, 107, 47, 0.08); 
  }
  100% { 
    box-shadow: 
      0 25px 50px rgba(0,0,0,.06),
      0 0 0 1px rgba(255, 255, 255, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 30px rgba(85, 107, 47, 0.12); 
  }
}
.hero-content .headline { 
  color: var(--ink); 
  text-shadow: 0 2px 4px rgba(0,0,0,.1); 
  margin-bottom: 1rem;
}
.hero-content .subhead { 
  color: var(--ink-2); 
  text-shadow: none; 
  margin-bottom: 1.5rem;
  line-height: 1.7;
}
.headline { font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: 1.1; }
.subhead { max-width: 50ch; font-size: 1.1rem; }
.hero-ctas { 
  display: flex; 
  gap: 1rem; 
  margin: 1.5rem 0 1rem 0; 
  align-items: center; 
  justify-content: center;
}
.time-inline { font-family: "Cormorant Garamond", serif; font-weight: 600; color: var(--gold); margin-right: .4rem; }

/* Islamic Time Elements */
.islamic-time { 
  margin-top: 1.5rem; 
  padding: 1rem 1.5rem; 
  background: rgba(212, 175, 55, 0.15); 
  border: 1px solid rgba(212, 175, 55, 0.4); 
  border-radius: 16px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.5rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.prayer-time { 
  font-family: "Cormorant Garamond", serif; 
  font-weight: 600; 
  color: var(--gold); 
  font-size: 1.2rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.ornament { position: absolute; width: 120px; aspect-ratio: 1; border: 1px solid var(--line); opacity: 0.4; box-shadow: inset 0 0 0 20px color-mix(in oklab, var(--bg) 88%, #fff 12%); }
.ornament.top-left { left: -40px; top: -40px; border-radius: 0 0 60px 0; }
.ornament.bottom-right { right: -40px; bottom: -40px; border-radius: 60px 0 0 0; }

/* Islamic Geometric Patterns */
.islamic-pattern { 
  position: absolute; 
  width: 250px; 
  height: 250px; 
  opacity: 0.15; 
  background: var(--accent);
}
.islamic-pattern.top-pattern { 
  top: 30px; 
  right: 30px; 
  background: 
    radial-gradient(circle at 50% 50%, transparent 20%, var(--gold) 20%, var(--gold) 25%, transparent 25%),
    conic-gradient(from 0deg, var(--accent) 0deg 45deg, transparent 45deg 90deg, var(--accent) 90deg 135deg, transparent 135deg 180deg, var(--accent) 180deg 225deg, transparent 225deg 270deg, var(--accent) 270deg 315deg, transparent 315deg 360deg);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
}
.islamic-pattern.bottom-pattern { 
  bottom: 30px; 
  left: 30px; 
  background: 
    repeating-linear-gradient(45deg, var(--gold) 0px, var(--gold) 15px, transparent 15px, transparent 30px),
    repeating-linear-gradient(-45deg, var(--accent) 0px, var(--accent) 15px, transparent 15px, transparent 30px);
  border-radius: 25px;
  box-shadow: 0 0 25px rgba(45, 90, 135, 0.2);
}

/* Arabic Ornaments */
.arabic-ornament { 
  position: absolute; 
  font-family: "Amiri", serif; 
  color: var(--arabic-gold); 
  font-weight: 700; 
  font-size: 1.2rem;
  direction: rtl;
  opacity: 0.6;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.arabic-ornament.left-ornament { 
  left: 2rem; 
  top: 25%; 
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.arabic-ornament.right-ornament { 
  right: 2rem; 
  top: 25%; 
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Calligraphic Design */
.calligraphic-design {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  width: 350px;
  height: 450px;
  background: 
    radial-gradient(ellipse at 60% 40%, transparent 30%, rgba(212, 175, 55, 0.2) 35%, rgba(212, 175, 55, 0.3) 40%, transparent 45%),
    conic-gradient(from 45deg at 70% 30%, 
      transparent 0deg, 
      rgba(212, 175, 55, 0.4) 10deg, 
      transparent 20deg,
      rgba(212, 175, 55, 0.3) 30deg,
      transparent 40deg,
      rgba(212, 175, 55, 0.35) 50deg,
      transparent 60deg,
      rgba(212, 175, 55, 0.4) 70deg,
      transparent 80deg,
      rgba(212, 175, 55, 0.3) 90deg,
      transparent 100deg,
      rgba(212, 175, 55, 0.35) 110deg,
      transparent 120deg,
      rgba(212, 175, 55, 0.4) 130deg,
      transparent 140deg,
      rgba(212, 175, 55, 0.3) 150deg,
      transparent 160deg,
      rgba(212, 175, 55, 0.35) 170deg,
      transparent 180deg,
      rgba(212, 175, 55, 0.4) 190deg,
      transparent 200deg,
      rgba(212, 175, 55, 0.3) 210deg,
      transparent 220deg,
      rgba(212, 175, 55, 0.35) 230deg,
      transparent 240deg,
      rgba(212, 175, 55, 0.4) 250deg,
      transparent 260deg,
      rgba(212, 175, 55, 0.3) 270deg,
      transparent 280deg,
      rgba(212, 175, 55, 0.35) 290deg,
      transparent 300deg,
      rgba(212, 175, 55, 0.4) 310deg,
      transparent 320deg,
      rgba(212, 175, 55, 0.3) 330deg,
      transparent 340deg,
      rgba(212, 175, 55, 0.35) 350deg,
      transparent 360deg
    ),
    linear-gradient(135deg, 
      transparent 0%, 
      rgba(212, 175, 55, 0.15) 20%, 
      rgba(212, 175, 55, 0.25) 40%, 
      rgba(212, 175, 55, 0.2) 60%, 
      rgba(212, 175, 55, 0.15) 80%, 
      transparent 100%
    );
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
  filter: blur(0.3px);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
}

.calligraphic-design::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 80% 20%, rgba(139, 69, 19, 0.2) 0%, transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(139, 69, 19, 0.15) 0%, transparent 25%),
    radial-gradient(circle at 60% 70%, rgba(139, 69, 19, 0.1) 0%, transparent 20%);
  border-radius: 50%;
}

.calligraphic-design::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  background: 
    conic-gradient(from 0deg at 50% 50%, 
      transparent 0deg,
      rgba(139, 69, 19, 0.3) 45deg,
      transparent 90deg,
      rgba(139, 69, 19, 0.2) 135deg,
      transparent 180deg,
      rgba(139, 69, 19, 0.25) 225deg,
      transparent 270deg,
      rgba(139, 69, 19, 0.3) 315deg,
      transparent 360deg
    );
  border-radius: 50%;
  opacity: 0.8;
}

/* Hero clock overlay - Enhanced Islamic Sundial */
.clock-overlay { position: absolute; right: 2%; bottom: 5%; pointer-events: none; z-index: 3; }
.dial { position: relative; width: clamp(120px, 15vw, 180px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0, var(--cream) 55%, var(--card) 75%); border: 2px solid var(--gold); box-shadow: 0 16px 32px rgba(0,0,0,.2), inset 0 0 0 2px var(--accent); }
.dial .ticks { position: absolute; inset: 0; background:
  conic-gradient(from 0deg,
   color-mix(in oklab, var(--ink) 30%, transparent) 0 2deg,
   transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
  mask: radial-gradient(circle, transparent 54%, #000 55%);
  opacity: .35;
}
.hand { position: absolute; left: 50%; top: 50%; transform-origin: 50% 100%; transform: translate(-50%, -90%) rotate(0deg); background: var(--ink); border-radius: 2px; }
.hand.hour { width: 4px; height: 28%; background: var(--accent); }
.hand.minute { width: 3px; height: 38%; opacity: .9; background: var(--ink); }
.hand.second { width: 2px; height: 42%; background: var(--gold); opacity: .9; }

/* Islamic Sundial Features */
.islamic-sundial { position: relative; }
.qibla-indicator { 
  position: absolute; 
  top: 10px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent; 
  border-right: 6px solid transparent; 
  border-bottom: 12px solid var(--gold); 
  opacity: 0.8;
}
.islamic-markers { 
  position: absolute; 
  inset: 0; 
  border-radius: 50%;
}
.marker { 
  position: absolute; 
  font-family: "Amiri", serif; 
  font-size: 0.7rem; 
  color: var(--arabic-gold); 
  font-weight: 700; 
  direction: rtl;
  opacity: 0.8;
}
.marker.fajr { top: 15%; left: 50%; transform: translateX(-50%); }
.marker.dhuhr { top: 50%; right: 15%; transform: translateY(-50%); }
.marker.asr { bottom: 15%; left: 50%; transform: translateX(-50%); }
.marker.maghrib { top: 50%; left: 15%; transform: translateY(-50%); }
.marker.isha { top: 25%; left: 25%; }

/* Sections */
.section { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--bg); }
.story { background: var(--bg); }
.about { background: var(--bg-contrast); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Collage Showcase */
.collage-showcase { 
  margin-bottom: 4rem; 
  display: flex; 
  justify-content: center; 
  position: relative;
}
.collage-main { 
  position: relative; 
  max-width: 900px; 
  width: 100%; 
  border-radius: 32px; 
  overflow: hidden; 
  box-shadow: 
    0 30px 60px rgba(0,0,0,.25), 
    0 0 0 4px var(--gold), 
    0 0 0 8px rgba(212, 175, 55, 0.3),
    0 0 40px rgba(212, 175, 55, 0.2);
  background: var(--cream);
  transform: translateY(0);
  transition: all 0.4s ease;
}
.collage-main:hover { 
  transform: translateY(-8px);
  box-shadow: 
    0 40px 80px rgba(0,0,0,.3), 
    0 0 0 4px var(--gold), 
    0 0 0 8px rgba(212, 175, 55, 0.4),
    0 0 60px rgba(212, 175, 55, 0.3);
}
.collage-main img { 
  width: 100%; 
  height: auto; 
  display: block; 
  transition: transform 0.6s ease;
  filter: brightness(1.1) contrast(1.05);
}
.collage-main:hover img { 
  transform: scale(1.03); 
}
.collage-overlay { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background: linear-gradient(transparent, rgba(26, 35, 50, 0.95)); 
  padding: 3rem 2rem 2rem; 
  color: white; 
  text-align: center;
  backdrop-filter: blur(4px);
}
.collage-overlay h2 { 
  font-size: clamp(2.5rem, 6vw, 4.5rem); 
  margin-bottom: 1.5rem; 
  color: var(--gold);
  text-shadow: 
    0 4px 8px rgba(0,0,0,.8), 
    0 0 30px rgba(212, 175, 55, 0.7),
    0 0 60px rgba(212, 175, 55, 0.4);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: "Cormorant Garamond", serif;
  line-height: 1.1;
}
.collage-overlay p { 
  font-size: 1.4rem; 
  line-height: 1.8; 
  margin: 0 auto 2rem; 
  opacity: 1;
  text-shadow: 
    0 3px 6px rgba(0,0,0,.8),
    0 0 20px rgba(255, 255, 255, 0.3);
  font-weight: 600;
  max-width: 700px;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.5px;
  color: #f8f8f8;
}
.story-badge { 
  display: inline-block; 
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(212, 175, 55, 0.2)); 
  color: var(--gold); 
  padding: 1rem 2rem; 
  border-radius: 30px; 
  font-size: 1.1rem; 
  font-weight: 700; 
  letter-spacing: 3px; 
  margin-bottom: 2rem; 
  border: 3px solid rgba(212, 175, 55, 0.7);
  backdrop-filter: blur(16px);
  text-shadow: 
    0 3px 6px rgba(0,0,0,.8),
    0 0 20px rgba(212, 175, 55, 0.6);
  box-shadow: 
    0 8px 20px rgba(0,0,0,.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 0 30px rgba(212, 175, 55, 0.3);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.story-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.8s ease;
}
.story-badge:hover::before {
  left: 100%;
}
.story-cta { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 0.25rem; 
  margin-top: 1rem;
}
.story-cta .arabic-text { 
  font-family: "Amiri", serif; 
  font-size: 1.5rem; 
  color: var(--gold); 
  font-weight: 700; 
  direction: rtl;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.story-cta .english-text { 
  font-size: 0.95rem; 
  color: var(--ink-2); 
  font-weight: 500; 
  letter-spacing: 2px;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  opacity: 0.9;
}
.tile-band { 
  height: 28px; 
  background: 
    repeating-linear-gradient(90deg, 
      var(--gold) 0px, var(--gold) 8px, 
      transparent 8px, transparent 16px,
      var(--accent) 16px, var(--accent) 24px,
      transparent 24px, transparent 32px
    ),
    repeating-linear-gradient(45deg, 
      var(--arabic-gold) 0px, var(--arabic-gold) 2px, 
      transparent 2px, transparent 4px
    ); 
  border-top: 2px solid var(--gold); 
  border-bottom: 2px solid var(--gold);
  position: relative;
}
.tile-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 14px 14px, var(--accent) 1px, transparent 1px),
    radial-gradient(circle at 42px 14px, var(--gold) 1px, transparent 1px);
  background-size: 56px 28px;
  opacity: 0.3;
}
.grid-2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1rem, 4vw, 2rem); align-items: center; }

/* About Section Styling */
.about { 
  position: relative;
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-contrast) 100%);
}
.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.about-header { 
  text-align: center; 
  margin-bottom: 4rem; 
  position: relative;
}
.about-header h2 { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  margin-bottom: 1rem; 
  color: var(--ink);
  font-weight: 700;
  position: relative;
}
.about-header h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold));
  border-radius: 2px;
}
.about-header .arabic-subtitle { 
  font-family: "Amiri", serif; 
  color: var(--arabic-gold); 
  font-size: 1.4rem; 
  direction: rtl;
  font-weight: 600;
  margin-top: 0.5rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.1);
}

.about-content { 
  align-items: center; 
  gap: 3rem;
}
.about-image-container { 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}
.about-media img { 
  width: 100%; 
  max-width: 500px; 
  border-radius: 24px; 
  border: 3px solid var(--gold); 
  box-shadow: 
    0 20px 50px rgba(0,0,0,.15), 
    0 0 0 6px rgba(212, 175, 55, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: var(--cream);
  transition: all 0.4s ease;
}
.about-media img:hover {
  transform: scale(1.02);
  box-shadow: 
    0 25px 60px rgba(0,0,0,.2), 
    0 0 0 6px rgba(212, 175, 55, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.about-ornament { 
  position: absolute; 
  top: -30px; 
  right: -30px; 
  width: 80px; 
  height: 80px; 
  background: radial-gradient(circle, var(--gold), var(--arabic-gold)); 
  border-radius: 50%; 
  opacity: 0.15; 
  z-index: -1;
  animation: subtlePulse 4s ease-in-out infinite alternate;
}

@keyframes subtlePulse {
  0% { transform: scale(1); opacity: 0.15; }
  100% { transform: scale(1.1); opacity: 0.25; }
}

.about-copy { 
  position: relative;
}
.about-copy p { 
  font-size: 1.2rem; 
  line-height: 1.9; 
  margin-bottom: 2.5rem; 
  color: var(--ink-2);
  position: relative;
  padding-left: 2rem;
}
.about-copy p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--gold), var(--accent), var(--gold));
  border-radius: 2px;
}

.about-features { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 1.25rem; 
}
.feature-item { 
  display: flex; 
  align-items: center; 
  gap: 1rem; 
  padding: 1.25rem 1.5rem; 
  background: linear-gradient(135deg, var(--card) 0%, rgba(255, 255, 255, 0.8) 100%); 
  border: 2px solid var(--line); 
  border-radius: 16px; 
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.feature-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.6s ease;
}
.feature-item:hover::before {
  left: 100%;
}
.feature-item:hover { 
  transform: translateX(12px) translateY(-2px); 
  box-shadow: 0 12px 30px rgba(0,0,0,.15); 
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--cream) 0%, rgba(255, 255, 255, 0.9) 100%);
}
.feature-icon { 
  font-size: 1.8rem; 
  width: 50px; 
  height: 50px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%); 
  border-radius: 50%; 
  border: 2px solid var(--gold);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}
.feature-item:hover .feature-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4);
}
.feature-text { 
  font-weight: 600; 
  color: var(--ink); 
  font-size: 1.1rem;
  letter-spacing: 0.3px;
}

/* Menu Showcase */
.menu-showcase {
  background: var(--bg);
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.menu-showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.menu-showcase-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}
.menu-showcase-header h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1rem;
  color: var(--ink);
  position: relative;
}
.menu-showcase-header h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold));
  border-radius: 2px;
}
.menu-showcase-subtitle {
  color: var(--ink-2);
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.menu-showcase-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-image-container {
  position: relative;
  max-width: 800px;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 
    0 30px 60px rgba(0,0,0,.2), 
    0 0 0 4px var(--gold), 
    0 0 0 8px rgba(85, 107, 47, 0.3),
    0 0 40px rgba(85, 107, 47, 0.2);
  transition: all 0.4s ease;
  background: var(--cream);
}
.menu-image-container:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 40px 80px rgba(0,0,0,.25), 
    0 0 0 4px var(--gold), 
    0 0 0 8px rgba(85, 107, 47, 0.4),
    0 0 60px rgba(85, 107, 47, 0.3);
}
.menu-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
}
.menu-image-container:hover .menu-image {
  transform: scale(1.02);
}
.menu-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 2rem;
  display: flex;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.menu-image-container:hover .menu-overlay {
  opacity: 1;
}
.btn-menu-download {
  background: var(--accent);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}
.btn-menu-download:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(85, 107, 47, 0.4);
}

/* Menu */
.menu { 
  background: var(--bg-contrast); 
  position: relative;
  border-top: 1px solid var(--line);
}
.menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.menu h2 { 
  margin-bottom: 1rem; 
  text-align: center;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--ink);
  position: relative;
}
.menu h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--gold);
}

.menu-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
  gap: 2rem; 
  margin-top: 2rem;
}
.menu-group { 
  margin-bottom: 2rem; 
  background: var(--card); 
  border-radius: 20px; 
  padding: 1.5rem; 
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.group-title { 
  font-family: "Cormorant Garamond", serif; 
  font-weight: 700; 
  letter-spacing: .5px; 
  margin-bottom: 1rem; 
  font-size: 1.5rem;
  color: var(--accent);
  text-align: center;
  position: relative;
}
.group-title::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.dial-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 1.25rem; 
}
.dial-card { 
  background: var(--cream); 
  border: 2px solid var(--gold); 
  border-radius: 20px; 
  padding: 1.5rem; 
  text-align: center; 
  box-shadow: 0 12px 28px rgba(0,0,0,.08), inset 0 0 0 1px rgba(212, 175, 55, 0.1); 
  display: grid; 
  gap: 1rem; 
  align-content: start; 
  position: relative; 
  transition: all 0.3s ease;
}
.dial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12), 0 0 0 1px rgba(212, 175, 55, 0.2);
  border-color: var(--accent);
}
.dial-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--gold), var(--accent), var(--gold));
  border-radius: 20px;
  z-index: -1;
  opacity: 0.1;
}
.dial-face { 
  width: 120px; 
  height: 120px; 
  border-radius: 50%; 
  margin: 0 auto; 
  background: radial-gradient(circle, #ffffff 0, var(--cream) 65%, color-mix(in oklab, var(--accent-2) 20%, #fff 80%) 100%); 
  border: 3px solid var(--gold); 
  position: relative; 
  box-shadow: 
    inset 0 0 0 2px var(--accent),
    0 8px 20px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.dial-card:hover .dial-face {
  transform: scale(1.05);
  box-shadow: 
    inset 0 0 0 2px var(--accent),
    0 12px 28px rgba(0,0,0,.15);
}
.dial-face::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--accent) 25%, transparent) 0 2deg, transparent 2deg 30deg); 
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%); 
  mask: radial-gradient(circle, transparent 55%, #000 56%); 
  opacity: .4; 
}
.dial-title { 
  position: absolute; 
  inset: 0; 
  display: grid; 
  place-items: center; 
  font-weight: 700; 
  padding: 0 0.5rem; 
  font-size: 0.9rem;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
}
.dial-desc { 
  color: var(--ink-2); 
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.menu-poster { 
  margin-top: 0; 
  display: grid; 
  justify-items: start; 
  gap: 1rem; 
  position: sticky; 
  top: 100px; 
}
.menu-poster img { 
  width: min(400px, 100%); 
  border-radius: 16px; 
  border: 2px solid var(--gold); 
  box-shadow: 0 16px 40px rgba(0,0,0,.1), 0 0 0 4px rgba(212, 175, 55, 0.1); 
  background: var(--cream);
  transition: all 0.3s ease;
}
.menu-poster img:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,.15), 0 0 0 4px rgba(212, 175, 55, 0.2);
}

/* Gallery */
.gallery { 
  background: var(--bg-contrast); 
  border-top: 1px solid var(--line); 
  border-bottom: 1px solid var(--line);
  position: relative;
}
.gallery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.gallery-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
.gallery-header h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 1rem;
  color: var(--ink);
  position: relative;
}
.gallery-header h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--gold);
}
.gallery-subtitle {
  color: var(--ink-2);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto;
}

.gallery .mosaic {
  display: grid; 
  gap: 1.5rem; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
}
.gallery .frame { 
  position: relative; 
  overflow: hidden; 
  border-radius: 20px; 
  border: 2px solid var(--line); 
  background: var(--card); 
  box-shadow: 0 12px 30px rgba(0,0,0,.1); 
  transition: all 0.4s ease;
  cursor: pointer;
}
.gallery .frame:hover { 
  transform: translateY(-8px); 
  box-shadow: 0 20px 40px rgba(0,0,0,.15); 
  border-color: var(--gold);
}
.gallery .frame img { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform .6s ease; 
}
.gallery .frame:hover img { 
  transform: scale(1.08); 
}

/* Large frames span 2 columns */
.gallery .frame-large {
  grid-column: span 2;
}

/* Add overlay effect */
.gallery .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(85, 107, 47, 0.1) 0%, transparent 50%, rgba(139, 69, 19, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.gallery .frame:hover::after {
  opacity: 1;
}

@media (max-width: 900px) {
  .gallery .mosaic { 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 1rem;
  }
  .gallery .frame-large {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .gallery .mosaic { 
    grid-template-columns: repeat(2, 1fr); 
    gap: 0.75rem; 
    grid-auto-rows: 200px;
  }
  .gallery-header {
    margin-bottom: 2rem;
  }
}

/* Order */
.order .cta-stack { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.order .small { color: var(--ink-2); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-contrast); }
.footer-grid { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: 1rem 0; }
.brandline { display: inline-flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.divider { color: var(--ink-2); opacity: 0.7; }
.contact { display: inline-flex; gap: 1rem; }
.contact a { color: var(--ink-2); }
.contact a:hover { color: var(--ink); }

/* Responsive */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .menu-grid { 
    grid-template-columns: 1fr; 
    gap: 1.5rem;
  }
  .dial-grid { 
    grid-template-columns: 1fr; 
    gap: 1rem;
  }
  .menu-group { 
    padding: 1.25rem; 
    margin-bottom: 1.5rem;
  }
  .dial-card { 
    padding: 1.25rem; 
  }
  .dial-face { 
    width: 100px; 
    height: 100px; 
  }
  .dial-title { 
    font-size: 0.85rem; 
  }
  .dial-desc { 
    font-size: 0.9rem; 
  }
}

@media (max-width: 760px) {
  .nav-toggle { display: inline-block; }
  .nav-links { 
    position: absolute; 
    right: 4%; 
    top: 70px; 
    background: var(--bg); 
    border: 1px solid var(--line); 
    border-radius: 12px; 
    padding: 1rem; 
    display: none; 
    flex-direction: column; 
    min-width: 240px; 
    box-shadow: 0 12px 30px rgba(0,0,0,.15); 
    z-index: 99;
    backdrop-filter: blur(10px);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
  }
  .nav-links a:hover {
    background: var(--bg-contrast);
    color: var(--ink);
  }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.3); backdrop-filter: blur(4px); z-index: 98; }
  /* Hide email in footer on mobile */
  .contact a[href^="mailto"] { display: none; }
  /* Improve hero readability */
  .hero { min-height: 80vh; padding: 0; }
  .hero-content { padding: 2rem 0; }
  .simple-hero .hero-content::before { 
    inset: -1.5rem -2rem; 
    border-radius: 24px;
  }
  .hero-headline { 
    font-size: clamp(3rem, 12vw, 5rem); 
    margin-bottom: 1.5rem;
    line-height: 0.9;
  }
  .hero-subhead { 
    font-size: 1.2rem; 
    margin-bottom: 2rem; 
  }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .btn { padding: 0.75rem 1.25rem; font-size: 0.95rem; }
  .story-badge { 
    font-size: 0.8rem; 
    padding: 0.5rem 1rem; 
    margin-bottom: 0.75rem; 
    letter-spacing: 1px;
  }
  .story-cta .arabic-text { 
    font-size: 1.1rem; 
    letter-spacing: 0.5px;
  }
  .story-cta .english-text { 
    font-size: 0.9rem; 
    letter-spacing: 1px;
  }
  .about-header { margin-bottom: 2rem; }
  .about-header h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
  .about-header .arabic-subtitle { font-size: 1rem; }
  .about-copy p { font-size: 1rem; margin-bottom: 1.5rem; }
  .feature-item { padding: 0.6rem 0.8rem; }
  .feature-icon { font-size: 1.25rem; width: 35px; height: 35px; }
  .feature-text { font-size: 0.9rem; }
  
  /* Menu Showcase Mobile */
  .menu-showcase {
    padding: clamp(2rem, 6vw, 4rem) 0;
  }
  .menu-showcase-header {
    margin-bottom: 2rem;
  }
  .menu-showcase-header h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }
  .menu-showcase-subtitle {
    font-size: 1rem;
  }
  .menu-image-container {
    max-width: 100%;
    border-radius: 16px;
  }
  .menu-overlay {
    padding: 1rem;
  }
  .btn-menu-download {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* Reveal animation */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Timeline */
.timeline { background: var(--bg-contrast); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chrono { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
.chrono.fancy { grid-template-columns: repeat(3, minmax(0,1fr)); }
.time-card { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; box-shadow: 0 10px 22px rgba(0,0,0,.06); }
.mini-dial { position: relative; width: 100px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffffff 0, var(--cream) 60%, color-mix(in oklab, var(--accent-2) 30%, #fff 70%) 100%); border: 1px solid var(--line); margin-left: 0.25rem; }
.mini-dial .ticks { position: absolute; inset: 0; background: conic-gradient(from 0deg, color-mix(in oklab, var(--ink) 25%, transparent) 0 2deg, transparent 2deg 30deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); opacity: .35; }
.mini-dial .hand { position: absolute; left: 50%; top: 50%; transform-origin: 50% 100%; transform: translate(-50%, -90%); background: var(--ink); }
.mini-dial .hand.hour { width: 3px; height: 28%; transform: translate(-50%, -90%) rotate(calc(var(--h, 0) * 30deg + var(--m, 0) * 0.5deg)); }
.mini-dial .hand.minute { width: 2px; height: 38%; transform: translate(-50%, -90%) rotate(calc(var(--m, 0) * 6deg)); background: var(--brick); }
.time-copy .t { font-weight: 700; color: var(--ink); display: inline-block; margin-bottom: 0.25rem; }

@media (max-width: 1000px) {
  .chrono.fancy { grid-template-columns: 1fr; }
}

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }



/* Scroll Clock (custom scrollbar) */
.scroll-clock { 
  position: fixed; 
  right: 20px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 64px; 
  height: calc(100vh - 120px); 
  display: grid; 
  place-items: center; 
  pointer-events: none; 
  z-index: 60; 
  opacity: 0.95;
  transition: opacity 0.3s ease;
}

.scroll-clock:hover {
  opacity: 1;
}

.scroll-clock .clock-track { 
  position: absolute; 
  inset: 30px 28px; 
  border-radius: 999px; 
  background: linear-gradient(to bottom, color-mix(in oklab, var(--accent-2) 40%, #fff 60%), color-mix(in oklab, var(--bg-contrast) 30%, #fff 70%)); 
  border: 1px solid var(--line); 
  box-shadow: inset 0 0 0 6px color-mix(in oklab, var(--bg) 70%, #fff 30%); 
  pointer-events: auto;
  cursor: pointer;
}

.scroll-clock .clock-knob { 
  position: absolute; 
  width: 48px; 
  height: 48px; 
  border-radius: 50%; 
  background: radial-gradient(circle, #ffffff 0, var(--cream) 65%, var(--card) 100%); 
  border: 2px solid var(--line); 
  box-shadow: 0 8px 18px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.1); 
  left: 8px; 
  top: 30px; 
  transform: translateY(0); 
  transition: transform .08s ease-out, box-shadow 0.2s ease; 
  pointer-events: auto;
  cursor: grab;
}

.scroll-clock .clock-knob:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.15);
}

.scroll-clock .clock-knob:active {
  cursor: grabbing;
  box-shadow: 0 6px 12px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.15);
}

.scroll-clock .clock-face { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  border-radius: 50%; 
}

.scroll-clock .ticks { 
  position: absolute; 
  inset: 0; 
  background: conic-gradient(from 0deg, color-mix(in oklab, var(--ink) 25%, transparent) 0 2deg, transparent 2deg 30deg); 
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); 
  mask: radial-gradient(circle, transparent 60%, #000 61%); 
  opacity: .35; 
}

.scroll-clock .hand { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform-origin: 50% 100%; 
  transform: translate(-50%, -90%); 
  background: var(--ink); 
  border-radius: 1px;
}

.scroll-clock .hand.hour { 
  width: 3px; 
  height: 28%; 
}

.scroll-clock .hand.minute { 
  width: 2px; 
  height: 38%; 
  background: var(--brick); 
}

@media (max-width: 1024px) {
  .scroll-clock { display: none; }
}

/* Custom Clock Cursor */
.cursor-clock {
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.1s ease-out;
  will-change: transform, opacity;
}

.cursor-clock.visible {
  opacity: 0.95;
}

.cursor-clock.clicking {
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 1;
}

.cursor-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-20px);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid var(--gold);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  z-index: 10;
}

.cursor-clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, var(--cream) 60%, var(--card) 100%);
  border: 1.5px solid var(--gold);
  box-shadow: 
    0 2px 8px rgba(0,0,0,.25),
    inset 0 0 0 0.5px var(--accent),
    0 0 0 0.5px rgba(255,255,255,0.3);
}

.cursor-ticks {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, 
    color-mix(in oklab, var(--ink) 35%, transparent) 0deg 1.5deg, 
    transparent 1.5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
  mask: radial-gradient(circle, transparent 58%, #000 59%);
  opacity: .5;
  border-radius: 50%;
}

.cursor-hand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -90%);
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cursor-hand.cursor-hour {
  width: 1.5px;
  height: 30%;
  background: var(--accent);
  box-shadow: 0 0 1px rgba(139, 69, 19, 0.5);
}

.cursor-hand.cursor-minute {
  width: 1px;
  height: 40%;
  background: var(--ink);
  box-shadow: 0 0 1px rgba(26, 35, 50, 0.5);
}

.cursor-hand.cursor-second {
  width: 0.8px;
  height: 45%;
  background: var(--gold);
  opacity: 0.8;
  box-shadow: 0 0 1px rgba(85, 107, 47, 0.6);
  transition: none; /* No transition for second hand - jumps every second */
}

.cursor-clock-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 2px rgba(139, 69, 19, 0.6);
  z-index: 10;
}

/* Hide cursor on interactive elements that need default cursor */
a, button, input, textarea, select, .nav-toggle {
  cursor: none;
}

a:hover, button:hover, input:hover, textarea:hover, select:hover, .nav-toggle:hover {
  cursor: none;
}

/* Click animation for clock cursor */
@keyframes clockClick {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 768px) {
  .cursor-clock {
    display: none;
  }
  html, body {
    cursor: auto;
  }
}