/* ============================================================
   WASLEH — وصلة  ·  simple band site
   Palette pulled from the logo: pink #ea3c72 · yellow #f4cf34 · ink #15314a
   ============================================================ */

:root{
  --pink:#ea3c72;
  --pink-deep:#d62d62;
  --yellow:#f4cf34;
  --yellow-soft:#ffe267;
  --ink:#15314a;
  --ink-soft:#3a5670;
  --cream:#f7f3ec;
  --white:#fffdf9;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  overflow-x:hidden;
  line-height:1.5;
}
::selection{background:var(--pink);color:var(--white)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.ar,.about__ar{font-family:'Aref Ruqaa',serif;direction:rtl}

.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------- NAV ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,52px);
  transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s;
}
.nav.scrolled{
  padding:10px clamp(20px,5vw,52px);
  background:rgba(247,243,236,.8);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgba(21,49,74,.08);
}
.nav__logo{height:46px;width:auto;transition:height .4s var(--ease)}
.nav.scrolled .nav__logo{height:38px}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.6vw,32px);font-size:15px;font-weight:500}
.nav__links a:not(.nav__ig){position:relative;opacity:.85;transition:opacity .3s}
.nav__links a:not(.nav__ig):hover{opacity:1}
.nav__links a:not(.nav__ig)::after{content:'';position:absolute;left:0;bottom:-5px;height:1.5px;width:0;
  background:var(--pink);transition:width .35s var(--ease)}
.nav__links a:not(.nav__ig):hover::after{width:100%}
.nav__ig{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(21,49,74,.25);transition:background .3s,color .3s,border-color .3s}
.nav__ig:hover{background:var(--pink);color:var(--white);border-color:var(--pink)}

/* ---------------- HERO ---------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;overflow:hidden;padding:90px 20px 0}
.hero__blobs{position:absolute;inset:0;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(30px);will-change:transform}
.blob--pink{width:48vmax;height:48vmax;background:radial-gradient(circle at 40% 40%,#f47ba0,var(--pink-deep));
  top:6%;left:50%;transform:translateX(-50%);opacity:.5;animation:float1 17s ease-in-out infinite}
.blob--yellow{width:20vmax;height:20vmax;background:radial-gradient(circle,var(--yellow-soft),var(--yellow));
  top:8%;left:60%;opacity:.55;animation:float2 13s ease-in-out infinite}
.blob--yellow2{width:15vmax;height:15vmax;background:radial-gradient(circle,var(--yellow-soft),var(--yellow));
  bottom:18%;right:18%;opacity:.5;animation:float3 19s ease-in-out infinite}
.blob--navy{width:24vmax;height:24vmax;background:radial-gradient(circle,#3a5670,var(--ink));
  bottom:6%;left:14%;opacity:.32;animation:float2 22s ease-in-out infinite reverse}
@keyframes float1{50%{transform:translateX(-50%) translateY(4%) scale(1.05)}}
@keyframes float2{50%{transform:translate(5%,-4%) scale(1.07)}}
@keyframes float3{50%{transform:translate(-6%,5%) scale(1.09)}}

.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.hero__logo{width:min(560px,82vw);height:auto;filter:drop-shadow(0 24px 60px rgba(21,49,74,.18));
  animation:logoIn 1.4s var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.hero__tag{margin-top:24px;font-size:clamp(16px,2.2vw,22px);font-weight:300;color:var(--ink-soft);
  letter-spacing:.01em;animation:logoIn 1.4s var(--ease) .25s both}
.hero__ig{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:13px 24px;
  border-radius:50px;background:var(--ink);color:var(--cream);font-weight:500;font-size:15px;
  transition:background .35s,transform .35s var(--ease),box-shadow .35s;
  box-shadow:0 10px 28px rgba(21,49,74,.2);animation:logoIn 1.4s var(--ease) .4s both}
.hero__ig:hover{background:var(--pink);transform:translateY(-3px);box-shadow:0 16px 40px rgba(234,60,114,.4)}

.hero__marquee{position:absolute;bottom:40px;left:0;right:0;z-index:2;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;align-items:center;gap:20px;white-space:nowrap;width:max-content;
  animation:marq 34s linear infinite;font-weight:500;color:var(--ink-soft);font-size:14px;letter-spacing:.06em}
.marquee__track .sep{color:var(--pink)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------------- ABOUT ---------------- */
.about{max-width:880px;margin:0 auto;padding:clamp(90px,14vw,180px) clamp(22px,6vw,40px);text-align:center}
.about__ar{font-size:clamp(46px,9vw,90px);color:var(--pink);line-height:1;margin-bottom:26px}
.about__text{font-size:clamp(22px,3.4vw,40px);font-weight:300;line-height:1.35;letter-spacing:-.01em}

/* ---------------- TRIO ---------------- */
.trio{max-width:1100px;margin:0 auto;padding:0 clamp(22px,6vw,40px) clamp(80px,12vw,140px)}
.members{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.member{padding:clamp(30px,4vw,48px) 28px;border-radius:24px;text-align:center;
  background:var(--white);border:1px solid rgba(21,49,74,.08);
  transition:transform .5s var(--ease),box-shadow .5s,background .5s}
.member:nth-child(2){background:linear-gradient(160deg,var(--pink),var(--pink-deep));color:var(--white)}
.member:hover{transform:translateY(-8px);box-shadow:0 30px 60px -34px rgba(21,49,74,.5)}
.member__name{font-family:'Caveat';font-size:clamp(46px,6vw,66px);font-weight:700;line-height:.95}
.member:nth-child(2) .member__name{color:var(--yellow)}
.member__role{font-size:15px;font-weight:600;margin-top:8px;letter-spacing:.02em}
.member__from{font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-top:8px;
  color:var(--ink-soft)}
.member:nth-child(2) .member__from{color:rgba(255,253,249,.8)}

/* ---------------- CONTACT ---------------- */
.contact{background:var(--ink);color:var(--cream);text-align:center;
  padding:clamp(80px,12vw,150px) 20px clamp(40px,6vw,60px)}
.contact__inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.contact__ig{display:inline-flex;align-items:center;gap:12px;font-size:clamp(22px,4vw,38px);
  font-weight:500;letter-spacing:-.01em;transition:color .3s,transform .4s var(--ease)}
.contact__ig:hover{color:var(--yellow);transform:translateY(-3px)}
.contact__or{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,243,236,.45);margin-top:10px}
.contact__mail{font-size:clamp(18px,2.4vw,24px);font-weight:500;
  border-bottom:1.5px solid transparent;transition:border-color .3s,color .3s}
.contact__mail:hover{color:var(--yellow);border-color:var(--yellow)}
.contact__tel{font-size:16px;color:rgba(247,243,236,.7);transition:color .3s}
.contact__tel:hover{color:var(--cream)}
.footer{margin-top:clamp(50px,8vw,90px);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,243,236,.5)}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:760px){
  .members{grid-template-columns:1fr}
  .nav__links{gap:16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}