/*
Theme Name: Sunan Al-Naqaa Cupping Center
Theme URI: https://mashhoor.hijamahome.com
Author: Elite Creative Engineering
Description: Custom luxury RTL WordPress theme for Sunan Al-Naqaa Hijama Center — cinematic scroll, GSAP micro-interactions, glass booking flow.
Version: 1.0.0
Text Domain: sunan-alnaqaa
*/

:root{
  --c-obsidian:#142622;
  --c-obsidian-2:#0d1c19;
  --c-cream:#FBF9F4;
  --c-cream-dim:#F1ECE0;
  --c-gold:#D4AF37;
  --c-gold-soft:#e7cd7a;
  --c-orange:#C9622B;
  --c-orange-soft:#E8834C;
  --c-blue:#1B4B66;
  --c-blue-soft:#2C6E93;
  --c-white:#FFFFFF;
  --font-display:'Amiri', 'Noto Naskh Arabic', serif;
  --font-body:'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
  --ease-lux: cubic-bezier(.16,.84,.32,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  background:var(--c-cream);
  color:var(--c-obsidian);
  font-family:var(--font-body);
  overflow-x:hidden;
  direction:rtl;
}
::selection{background:var(--c-gold);color:var(--c-obsidian);}

h1,h2,h3,h4{font-family:var(--font-display);}

.lux-eyebrow{
  font-family:var(--font-mono);
  letter-spacing:.15em;
  font-size:.72rem;
  color:var(--c-gold);
  text-transform:uppercase;
}

/* Custom cursor */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{width:7px;height:7px;background:var(--c-gold);}
.cursor-ring{
  width:38px;height:38px;border:1px solid rgba(212,175,55,.55);
  transition:width .3s var(--ease-lux),height .3s var(--ease-lux),border-color .3s;
}
.cursor-ring.is-active{
  width:70px;height:70px;
  border-color:var(--c-orange);
  background:rgba(201,98,43,.08);
}
@media (hover:none){ .cursor-dot,.cursor-ring{display:none;} }

/* overflow-hidden line reveal helper */
.split-line{overflow:hidden;display:block;}
.split-word{display:inline-block;transform:translateY(115%);will-change:transform;}

/* Hero */
.hero-frame{
  position:relative;
  border-radius:0 0 120px 0;
  overflow:hidden;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.55) saturate(1.05);
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,38,34,.55) 0%, rgba(20,38,34,.35) 35%, rgba(13,28,25,.85) 100%);
}
.hero-scrim::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%, rgba(212,175,55,.14), transparent 55%);
}

/* gold progress path */
.timeline-path-track{stroke:rgba(20,38,34,.15);}
.timeline-path-fill{
  stroke:var(--c-gold);
  filter:drop-shadow(0 0 6px rgba(212,175,55,.65));
}

/* horizontal services rail */
.services-rail{
  display:flex;
  will-change:transform;
}
.service-card{
  flex:0 0 auto;
  transition:background .5s var(--ease-lux);
}

/* image bleed cursor-follow preview */
.service-preview{
  position:fixed;top:0;left:0;pointer-events:none;z-index:40;
  width:280px;height:190px;border-radius:6px;overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.85);
  will-change:transform,opacity;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.service-preview img{width:100%;height:100%;object-fit:cover;}

/* glass form */
.glass-panel{
  background:rgba(251,249,244,.06);
  border:1px solid rgba(212,175,55,.25);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.glass-input{
  background:rgba(251,249,244,.05);
  border:1px solid rgba(251,249,244,.18);
  color:var(--c-cream);
}
.glass-input::placeholder{color:rgba(251,249,244,.45);}
.glass-input:focus{outline:none;border-color:var(--c-gold);background:rgba(251,249,244,.09);}

.step-dot{width:8px;height:8px;border-radius:50%;background:rgba(251,249,244,.25);transition:all .4s var(--ease-lux);}
.step-dot.is-active{background:var(--c-gold);width:26px;border-radius:5px;}

.btn-lux{
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease-lux);
}
.btn-lux span{position:relative;z-index:2;}
.btn-lux::before{
  content:'';position:absolute;inset:0;
  background:var(--c-gold);
  transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-lux);
  z-index:1;
}
.btn-lux:hover::before{transform:scaleX(1);}
.btn-lux:hover{color:var(--c-obsidian)!important;}

@media (max-width: 767px){
  .hero-frame{border-radius:0 0 48px 0;}
  .service-preview{display:none;}
}