/* ============================================
   WAQT — Editorial Design System
   ============================================ */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: auto; /* Lenis handles it */
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
  background: #0A0A0B;
  cursor: none;
}

@media (max-width: 1023px) {
  body { cursor: auto; }
}

/* ============================================
   NOISE TEXTURE — film grain
   ============================================ */
.noise {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}

/* ============================================
   GRID BACKGROUND
   ============================================ */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(245, 242, 236, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245, 242, 236, 0.035) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* ============================================
   HAIRLINES & DIVIDERS
   ============================================ */
.bg-line { background-color: rgba(245, 242, 236, 0.08); }
.border-line { border-color: rgba(245, 242, 236, 0.08); }

/* ============================================
   ARABIC TYPE — Amiri
   ============================================ */
.font-arabic {
  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
  direction: rtl;
  unicode-bidi: isolate;
  font-weight: 400;
  letter-spacing: 0;
}

.waqt-arabic {
  color: rgba(245, 242, 236, 0.92);
  font-feature-settings: "liga", "kern";
  font-weight: 400;
}

.vertical-rule {
  width: 1px;
  height: 100%;
  min-height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(245, 242, 236, 0.15), transparent);
}

/* ============================================
   MASTHEAD — magazine-style section divider
   ============================================ */
.masthead {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem max(1.5rem, calc((100vw - 1440px)/2 + 2.5rem));
  border-top: 1px solid rgba(245, 242, 236, 0.08);
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.5);
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.masthead .num { color: #C8A97E; }
.masthead .label { color: #F5F2EC; }
.masthead .meta { color: rgba(245, 242, 236, 0.5); margin-left: auto; }
.masthead .rule {
  flex: 1;
  height: 1px;
  background: rgba(245, 242, 236, 0.15);
  transform: scaleX(0);
  transform-origin: left;
  animation: ruleIn 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.masthead .rule:last-of-type { transform-origin: right; }
@keyframes ruleIn {
  to { transform: scaleX(1); }
}

@media (max-width: 768px) {
  .masthead { gap: 0.75rem; padding: 1rem 1.5rem; }
  .masthead .label { display: none; }
}

/* ============================================
   NAVBAR
   ============================================ */
#navbar.scrolled {
  background: rgba(10, 10, 11, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
}

.nav-link {
  position: relative;
  font-weight: 400;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 4px;
  height: 1px;
  background: #C8A97E;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-link:hover::after {
  transform: scaleX(1);
}

#mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================
   HERO
   ============================================ */
.hero-line {
  transform: translateY(110%);
  will-change: transform;
}

.scroll-cue {
  animation: cuePulse 2s ease-in-out infinite;
  transform-origin: left;
}
@keyframes cuePulse {
  0%, 100% { transform: scaleX(1); opacity: 0.4; }
  50%      { transform: scaleX(2); opacity: 1; }
}

/* ============================================
   MARQUEE
   ============================================ */
.marquee-track {
  animation: marquee 50s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-section { background: linear-gradient(to right, transparent, rgba(200, 169, 126, 0.02), transparent); }

/* ============================================
   REVEAL ANIMATIONS — initial state
   ============================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

.matrix-cell,
.service-block,
.stage-card,
.stage-row-mobile,
.why-row,
.contact-row,
.manifesto-row,
.partner-row {
  opacity: 0;
  transform: translateY(30px);
}

/* Stages — line fill is set via GSAP, scale-x via Tailwind utility on initial state */
.stages-line-fill { will-change: transform; }

/* Partner principle rows */
.partner-row { transition: background-color 0.5s ease; }
.partner-row:hover { background: rgba(200, 169, 126, 0.02); }

/* ============================================
   IMAGES — figure framing & treatment
   Cool the warm imagery slightly so it doesn't tip
   the page into "antique gold" territory.
   ============================================ */
figure img,
#atmo-img,
#manifesto-img {
  filter: brightness(0.88) contrast(1.06) saturate(0.72);
  transition: filter 0.6s ease, transform 0.6s ease;
}
figure:hover img {
  filter: brightness(0.94) contrast(1.08) saturate(0.78);
}
.parallax-img { will-change: transform; }

/* ============================================
   HOURGLASS VIDEO — frameless floating element
   The video has a pure black background. Using
   `screen` blend mode makes black 100% transparent
   so only the lit hourglass remains visible — it
   appears to float in the page void with no border.
   ============================================ */
.hourglass-stage {
  background: transparent;
}
.hourglass-video {
  mix-blend-mode: screen;          /* black → transparent, only the lit hourglass remains */
  filter: contrast(1.25) brightness(1.06) saturate(0.85);
  will-change: transform, opacity;
}

/* ============================================
   TICKING CLOCK — animated second hand
   ============================================ */
.ticking-clock .hand-sec {
  transform-origin: 50px 50px;
  animation: clockTick 60s steps(60, end) infinite;
}
.ticking-clock .hand-min {
  transform-origin: 50px 50px;
  animation: clockTick 3600s linear infinite;
}
@keyframes clockTick {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ticking-clock .hand-sec,
  .ticking-clock .hand-min { animation: none; }
}

/* ============================================
   SVG DRAW ANIMATIONS
   ============================================ */
.draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.draw.is-drawn {
  animation: drawIn 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes drawIn {
  to { stroke-dashoffset: 0; }
}

.service-icon .draw,
.matrix-icon .draw {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

/* ============================================
   SERVICE BLOCKS
   ============================================ */
.service-block {
  position: relative;
  transition: background-color 0.6s ease;
}
.service-block:hover {
  background: rgba(200, 169, 126, 0.015);
}
.service-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: #C8A97E;
  transition: width 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.service-block:hover::before {
  width: 100%;
}
.service-block:hover .service-icon { transform: rotate(15deg); }
.service-icon { transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }

/* ============================================
   MATRIX CELLS — hover lift accent
   ============================================ */
.matrix-cell {
  transition: background-color 0.5s ease;
  position: relative;
}
.matrix-cell:hover { background: rgba(200, 169, 126, 0.02); }
.matrix-cell:hover .matrix-icon { transform: scale(1.05) rotate(5deg); }
.matrix-icon { transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }

/* ============================================
   STAGE ROWS
   ============================================ */
.stage-row {
  cursor: default;
  position: relative;
}
.stage-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: #C8A97E;
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.stage-row:hover::before {
  width: 3px;
}

/* ============================================
   WHY ROWS
   ============================================ */
.why-row { transition: background-color 0.5s ease; }
.why-row:hover { background: rgba(200, 169, 126, 0.02); }

/* ============================================
   MANIFESTO ROWS
   ============================================ */
.manifesto-row { transition: padding-left 0.4s ease; }
.manifesto-row:hover { padding-left: 0.5rem; }

/* ============================================
   CONTACT ROWS
   ============================================ */
.contact-row { transition: padding-left 0.4s ease; }
.contact-row:hover { padding-left: 0.75rem; }

/* ============================================
   MAGNETIC BUTTONS
   ============================================ */
.magnetic { display: inline-flex; will-change: transform; }

/* ============================================
   CUSTOM CURSOR
   ============================================ */
#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: #C8A97E;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.15s ease;
  will-change: transform;
}
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(200, 169, 126, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}
#cursor-ring.expand {
  width: 60px; height: 60px;
  border-color: rgba(200, 169, 126, 0.7);
  background: rgba(200, 169, 126, 0.05);
}

/* ============================================
   FOOTER MARK — animation on scroll
   ============================================ */
.footer-mark h2 {
  background: linear-gradient(180deg, #F5F2EC 0%, rgba(245, 242, 236, 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.06em;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 0; background: transparent; }

/* ============================================
   LOADER
   ============================================ */
#loader.done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease 0.2s;
}

/* ============================================
   FOCUS STATES
   ============================================ */
a:focus-visible,
button:focus-visible {
  outline: 1px solid #C8A97E;
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============================================
   TYPOGRAPHY REFINEMENTS
   ============================================ */
.font-display {
  font-feature-settings: "ss01", "ss02";
  letter-spacing: -0.015em;
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-up,
  .matrix-cell,
  .why-row,
  .service-block,
  .stage-row,
  .manifesto-row,
  .contact-row,
  .hero-line,
  .draw {
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  body { cursor: auto; }
  #cursor-dot, #cursor-ring { display: none !important; }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
  #navbar, #loader, #scroll-progress, .marquee-track, .noise,
  #cursor-dot, #cursor-ring, .masthead { display: none !important; }
  body { background: white; color: black; }
}