/* REHLA — 3D hero slider, news and affiliates */

/* ---------- Hero background slide (two images, left to right) ---------- */
.hero{background:var(--forest-dark);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg__layer{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;will-change:transform;transition:transform 1.15s cubic-bezier(.7,0,.3,1)}
.hero-bg__layer.is-front{transform:translateX(0)}
.hero-bg__layer.is-back{transform:translateX(-100%)}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(24,50,37,.86) 0%,rgba(24,50,37,.68) 48%,rgba(24,50,37,.08) 100%)}
.hero .hero-inner{position:relative;z-index:3}
.hero .hero-mark{z-index:3}
.hero.has-3d .hero-mark{right:auto;left:5%}

/* ---------- 3D hero slider ---------- */
.hero-3d{position:absolute;right:5.5%;top:50%;translate:0 -50%;width:min(320px,28vw);perspective:1400px;z-index:2;pointer-events:none}
.hero-3d__stage{position:relative;width:100%;aspect-ratio:4/5;transform-style:preserve-3d;animation:heroTilt 11s ease-in-out infinite}
.hero-3d__card{position:absolute;inset:0;margin:0;border-radius:18px;overflow:hidden;box-shadow:0 28px 58px rgba(8,22,15,.55);transform-style:preserve-3d;will-change:transform;transition:transform 1.05s cubic-bezier(.66,0,.34,1),opacity 1.05s ease}
.hero-3d__card img{width:100%;height:100%;object-fit:cover}
.hero-3d__card.is-front{transform:translateZ(0) rotateY(0deg);opacity:1}
.hero-3d__card.is-back{transform:translateZ(-100px) rotateY(-64deg) translateX(30px);opacity:0}
@keyframes heroTilt{0%,100%{transform:rotateY(-8deg) rotateX(2deg)}50%{transform:rotateY(8deg) rotateX(-2deg)}}
@media (prefers-reduced-motion: reduce){
  .hero-3d__stage{animation:none}
  .hero-3d__card{transition:none}
}

/* ---------- News grid ---------- */
.news-section{background:#fff}
.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);min-width:0;transition:transform .25s,box-shadow .25s}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.news-card__image{height:230px;background:#e8ebe2;overflow:hidden;display:block}
.news-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.news-card:hover .news-card__image img{transform:scale(1.035)}
.news-card__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.news-card__source{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#927d52;margin-bottom:10px}
.news-card h3{font:500 22px/1.3 var(--serif);margin:0 0 10px;color:var(--forest-dark)}
.news-card p{font-size:13px;line-height:1.75;color:var(--muted);margin:0 0 16px;flex:1}
.news-card .text-link{align-self:flex-start}
.news-note{font-size:12px;color:#7a867b;margin-top:34px}

/* ---------- Affiliates ---------- */
.affiliate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.affiliate-grid article{background:#fff;border:1px solid var(--line);padding:24px 22px;min-height:150px}
.affiliate-grid h3{font:500 21px var(--serif);margin:0 0 8px;color:var(--forest-dark)}
.affiliate-grid p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.affiliate-perks{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px}
.affiliate-perks span{border:1px solid #d8dfd6;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:650;color:var(--forest)}
.affiliate-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

@media(max-width:960px){
  .hero-3d{width:min(240px,26vw);right:4%}
}
@media(max-width:760px){
  .hero-3d{position:relative;right:auto;top:auto;translate:none;width:min(240px,62%);margin:26px auto 0}
  .news-grid,.affiliate-grid{grid-template-columns:1fr}
  .news-card__image{height:200px}
}

/* ---------- Animated two-tone Islamic icons ----------
   Small decorative marks drawn with two theme colours (forest + gold in day
   mode, pink + blush in night mode). Motion is gentle and switches off for
   visitors who prefer reduced motion. */

.rx-ic{
  color:var(--forest);
  --rx-accent:var(--gold);
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:0 0 auto;line-height:0;
  transition:transform .3s ease,color .3s ease;
}
.rx-ic svg{width:100%;height:100%;display:block;overflow:visible}
.rx-ic .rx-l{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rx-ic .rx-f{fill:var(--rx-accent);stroke:none}

.rx-badge-row{margin:0 0 12px}
.rx-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(140deg,rgba(52,87,70,.10),rgba(185,161,111,.20));
  border:1px solid rgba(185,161,111,.34);
  box-shadow:0 8px 18px rgba(24,50,37,.07);
}
.rx-badge .rx-ic{width:24px;height:24px}

.rx-card-ic{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;margin:0 0 10px;
  background:linear-gradient(140deg,rgba(52,87,70,.08),rgba(185,161,111,.20));
  border:1px solid rgba(185,161,111,.28);
  transition:transform .3s ease,box-shadow .3s ease;
}
.rx-card-ic .rx-ic{width:22px;height:22px}
.product-card:hover .rx-card-ic,
.article-card:hover .rx-card-ic,
.news-card:hover .rx-card-ic,
.rss-card:hover .rx-card-ic,
.video-card:hover .rx-card-ic,
.affiliate-grid article:hover .rx-card-ic{transform:translateY(-3px);box-shadow:0 12px 22px rgba(24,50,37,.12)}

.rx-value-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:2px}
.rx-value-top .rx-card-ic{margin:0}

.rx-card-title{display:flex;align-items:center;gap:12px;margin-top:14px}
.rx-card-title .rx-card-ic{margin:0}
.rx-card-title h2{margin:0}

.rx-badge--light{
  background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(216,196,141,.24));
  border-color:rgba(222,205,155,.5);
  box-shadow:0 8px 20px rgba(6,20,12,.35);
}
.rx-badge--light .rx-ic{color:#f7f3e7;--rx-accent:#dcc688}
.rx-ic--light{color:#f4efe0;--rx-accent:#d9c489}

html[data-theme="night"] .rx-badge,
html[data-theme="night"] .rx-card-ic{
  background:linear-gradient(140deg,rgba(255,95,162,.14),rgba(255,168,207,.16));
  border-color:rgba(255,95,162,.34);
  box-shadow:0 8px 20px rgba(255,95,162,.16);
}
html[data-theme="night"] .rx-badge .rx-ic,
html[data-theme="night"] .rx-card-ic .rx-ic{color:#ff8ac4;--rx-accent:#ffd0e6}
html[data-theme="night"] .rx-badge--light .rx-ic{color:#ffe6f2;--rx-accent:#ffc2de}

.rx-ic--crescent svg{animation:rx-sway 7s ease-in-out infinite}
.rx-ic--leaf svg{animation:rx-sway 9s ease-in-out infinite}
.rx-ic--beads svg{animation:rx-spin 14s linear infinite}
.rx-ic--star8 svg{animation:rx-spin 18s linear infinite}
.rx-ic--globe svg{animation:rx-spin 16s linear infinite}
.rx-ic--lantern svg{animation:rx-glow 3.4s ease-in-out infinite}
.rx-ic--arch svg{animation:rx-glow 4.4s ease-in-out infinite}
.rx-ic--drop svg{animation:rx-bob 3.6s ease-in-out infinite}
.rx-ic--bag svg{animation:rx-bob 4.2s ease-in-out infinite}
.rx-ic--heart svg{animation:rx-pulse 2.8s ease-in-out infinite}
.rx-ic--play svg{animation:rx-pulse 3.2s ease-in-out infinite}
.rx-ic--mosque svg,
.rx-ic--kaaba svg,
.rx-ic--book svg,
.rx-ic--bottle svg,
.rx-ic--news svg{animation:rx-float 5s ease-in-out infinite}

@keyframes rx-float{0%,100%{transform:translateY(-1px)}50%{transform:translateY(1.6px)}}
@keyframes rx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
@keyframes rx-sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes rx-spin{to{transform:rotate(360deg)}}
@keyframes rx-pulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.12);opacity:1}}
@keyframes rx-glow{0%,100%{opacity:.6}45%{opacity:1}72%{opacity:.78}}

@media (prefers-reduced-motion: reduce){
  .rx-ic svg{animation:none !important}
}