/* ═══════════════════════════════════════════════════════════════
   Rafed SVG Identity — decorative layers for dark navy sections
   Assets: core/static/img/identity/
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rf-id-corner: url('../img/identity/rafed-r-corner.svg');
  --rf-id-wave: url('../img/identity/rafed-wave-dots.svg');
  --rf-id-waves: url('../img/identity/rafed-bg-waves.svg');
  --rf-id-watermark: url('../img/identity/rafed-hero-watermark.svg');
  --rf-id-grid: url('../img/identity/rafed-soft-grid.svg');
  --rf-id-strength: 1;
  --rf-id-cover-h: clamp(11rem, 18vw, 14rem);
}

/* ── عناصر زخرفية صريحة (CTA + أغلفة الدورات) ── */

.rf-id-deco,
.rf-cover-id {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}



.rf-id-deco--glow {
  inset: 0;
  background:
    radial-gradient(ellipse 22rem 14rem at 92% 18%, color-mix(in srgb, var(--orange-400) 32%, transparent), transparent 68%),
    radial-gradient(ellipse 20rem 16rem at 6% 82%, color-mix(in srgb, var(--blue-400) 26%, transparent), transparent 66%),
    radial-gradient(ellipse 16rem 12rem at 50% 100%, color-mix(in srgb, var(--orange-500) 18%, transparent), transparent 72%);
  opacity: .95;
}

.rf-id-deco--corner {
  inset-inline-start: -2.5rem;
  bottom: -1.25rem;
  width: clamp(20rem, 42vw, 32rem);
  height: 78%;
  background: var(--rf-id-corner) no-repeat left bottom / contain;
  opacity: 1;
  filter: saturate(1.35) brightness(1.08);
}

.rf-id-deco--grid {
  inset-inline-end: -1rem;
  bottom: -0.5rem;
  width: clamp(13rem, 24vw, 18rem);
  height: 58%;
  background: var(--rf-id-grid) no-repeat right bottom / contain;
  opacity: .95;
  filter: saturate(1.25);
}

.rf-id-deco--wave {
  inset-inline: -8%;
  bottom: -1.5rem;
  height: 52%;
  background: var(--rf-id-wave) no-repeat center bottom / 118% auto;
  opacity: 1;
  filter: saturate(1.4) brightness(1.06);
}

.rf-cta {
  position: relative;
}

.rf-cta::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 55%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blue-900) 8%, transparent));
}

.rf-cta-box::before,
.rf-home .rf-cta-box::before {
  display: none;
}

.rf-cta-box {
  isolation: isolate;
  border-color: color-mix(in srgb, #fff 16%, transparent);
  box-shadow:
    var(--elevation-3),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--blue-400) 12%, transparent);
}

.rf-cta-box::after {
  display: block;
  content: '';
  position: absolute;
  inset-inline: 1.25rem;
  top: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--orange-400) 70%, transparent) 18%,
    color-mix(in srgb, #fff 55%, transparent) 50%,
    color-mix(in srgb, var(--orange-400) 70%, transparent) 82%,
    transparent
  );
  opacity: .85;
}

.rf-cta-text,
.rf-cta-actions {
  position: relative;
  z-index: 2;
}

.rf-id-deco {
  z-index: 1;
}

.rf-cover-id {
  inset: 0;
  overflow: hidden;
  background: var(--rf-id-grid) no-repeat 92% 8% / var(--rf-id-cover-h) auto;
  opacity: 1;
  filter: saturate(1.2);
}

.rf-cover-id::before {
  content: '';
  position: absolute;
  inset-inline-start: -18%;
  bottom: -12%;
  width: 72%;
  height: 115%;
  background: var(--rf-id-corner) no-repeat left bottom / contain;
  opacity: 1;
  filter: saturate(1.35) brightness(1.1);
}

.rf-cover-id::after {
  content: '';
  position: absolute;
  inset-inline: -10%;
  bottom: -18%;
  height: 62%;
  background: var(--rf-id-wave) no-repeat center bottom / 125% auto;
  opacity: 1;
  filter: saturate(1.45) brightness(1.08);
}

.rf-course-cover .rf-cover-art,
.rf-course-cover .rf-course-tag,
.live-course-card-cover .live-course-card-icon,
.live-course-card-cover .live-course-badge,
.course-card-thumb .course-type-tag {
  position: relative;
  z-index: 2;
}

@keyframes rfIdDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(1.2%, -1%) scale(1.02); }
}

@keyframes rfIdWaveShift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-1.5%); }
}

/* ── Shared decorative pseudo mixins via attribute selectors ── */

.rf-page-hero::before {
  background:
    var(--rf-id-watermark) no-repeat -8% -18% / clamp(22rem, 52vw, 38rem) auto,
    radial-gradient(34rem 20rem at 15% 0%, color-mix(in srgb, var(--blue-600) 30%, transparent), transparent 62%),
    radial-gradient(30rem 22rem at 88% 20%, color-mix(in srgb, var(--blue-700) 20%, transparent), transparent 65%);
}

.rf-page-hero::after {
  background:
    var(--rf-id-wave) no-repeat center 132% / 118% auto,
    radial-gradient(color-mix(in srgb, #fff 5%, transparent) 1px, transparent 1px);
  background-size: 118% auto, 30px 30px;
  -webkit-mask-image:
    linear-gradient(to top, #000 0%, #000 55%, transparent 92%),
    radial-gradient(ellipse 90% 80% at 50% 0%, #000, transparent 78%);
  mask-image:
    linear-gradient(to top, #000 0%, #000 55%, transparent 92%),
    radial-gradient(ellipse 90% 80% at 50% 0%, #000, transparent 78%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: .96;
}

.rf-why-band::before {
  background:
    var(--rf-id-corner) no-repeat calc(100% + 1.5rem) calc(100% - 1rem) / clamp(14rem, 26vw, 20rem) auto,
    radial-gradient(38rem 22rem at 12% 8%, color-mix(in srgb, var(--blue-400) 50%, transparent), transparent 60%),
    radial-gradient(34rem 24rem at 90% 18%, color-mix(in srgb, var(--orange-400) 45%, transparent), transparent 62%),
    radial-gradient(40rem 26rem at 70% 100%, color-mix(in srgb, var(--blue-300) 34%, transparent), transparent 60%);
}

.rf-why-band::after {
  background:
    var(--rf-id-waves) no-repeat center 138% / 125% auto,
    radial-gradient(color-mix(in srgb, #fff 5%, transparent) 1px, transparent 1px);
  background-size: 125% auto, 30px 30px;
  -webkit-mask-image:
    linear-gradient(to top, #000 0%, #000 28%, transparent 78%),
    radial-gradient(ellipse 95% 70% at 50% 0%, #000, transparent 78%);
  mask-image:
    linear-gradient(to top, #000 0%, #000 28%, transparent 78%),
    radial-gradient(ellipse 95% 70% at 50% 0%, #000, transparent 78%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: .94;
}

.rf-pillars-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    var(--rf-id-corner) no-repeat -3rem calc(100% - .5rem) / clamp(13rem, 24vw, 19rem) auto,
    var(--rf-id-grid) no-repeat 92% calc(100% - 2rem) / clamp(11rem, 20vw, 16rem) auto;
  opacity: .9;
}

.rf-pillars-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--rf-id-wave) no-repeat center 136% / 130% auto,
    radial-gradient(color-mix(in srgb, #fff 6%, transparent) 1px, transparent 1px);
  background-size: 130% auto, 30px 30px;
  -webkit-mask-image:
    linear-gradient(to top, #000 0%, #000 24%, transparent 72%),
    radial-gradient(ellipse 90% 60% at 50% 0%, #000, transparent 75%);
  mask-image:
    linear-gradient(to top, #000 0%, #000 24%, transparent 72%),
    radial-gradient(ellipse 90% 60% at 50% 0%, #000, transparent 75%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: .94;
}

/* الصفحة الرئيسية */
.rf-home .rf-course-cover:not(.has-cover)::before,
.rf-home .rf-course-cover:not(.has-cover)::after {
  display: none;
}

.rf-home .rf-course-cover:not(.has-cover) .rf-cover-id {
  --rf-id-cover-h: clamp(9rem, 16vw, 12rem);
}

.rf-home .rf-cta-box {
  border-color: color-mix(in srgb, #fff 18%, transparent);
}

/* ── الفوتر — زخرفة فنية ── */

.footer-id-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.footer-id-deco--top-wave {
  inset-inline: -4%;
  top: -1.35rem;
  height: 5.5rem;
  background: var(--rf-id-wave) no-repeat center top / 118% auto;
  opacity: 1;
  filter: saturate(1.45) brightness(1.08);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
}



.footer-id-deco--corner-start {
  
  opacity: .92;
  filter: saturate(1.3) brightness(1.06);
}



.footer-id-deco--floor {
  inset-inline: -6%;
  bottom: -1.75rem;
  height: 46%;
  background:
    var(--rf-id-waves) no-repeat center bottom / 132% auto,
    var(--rf-id-wave) no-repeat center calc(100% - .5rem) / 125% auto;
  opacity: 1;
  filter: saturate(1.35) brightness(1.05);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 36%, transparent 88%);
  mask-image: linear-gradient(to top, #000 0%, #000 36%, transparent 88%);
}

.footer-id-deco--glow {
  inset: 0;
  background:
    radial-gradient(ellipse 26rem 14rem at 78% 12%, color-mix(in srgb, var(--orange-400) 24%, transparent), transparent 68%),
    radial-gradient(ellipse 22rem 16rem at 14% 88%, color-mix(in srgb, var(--blue-400) 20%, transparent), transparent 66%);
  opacity: .9;
}

.footer::after {
  display: none;
}

.footer {
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(4rem, 7vw, 5rem);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

.footer::before {
  z-index: 2;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--orange-500) 12%,
    color-mix(in srgb, #fff 70%, var(--orange-400)) 50%,
    var(--orange-500) 88%,
    transparent
  );
  opacity: .95;
}

.footer-inner,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.footer-brand p,
.footer-pill {
  text-shadow: 0 1px 12px rgb(0 0 0 / .18);
}

.rf-course-cover:not(.has-cover)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--rf-id-grid) no-repeat 88% calc(100% - .75rem) / 9rem auto,
    var(--rf-id-corner) no-repeat -16% calc(100% + .25rem) / 11rem auto;
  opacity: .78;
  mix-blend-mode: screen;
}

.rf-course-cover:not(.has-cover)::after {
  background:
    var(--rf-id-wave) no-repeat center 136% / 165% auto,
    radial-gradient(circle at 80% 20%, color-mix(in srgb, #fff 16%, transparent), transparent 45%),
    radial-gradient(color-mix(in srgb, #fff 7%, transparent) 1px, transparent 1px);
  background-size: 165% auto, 100% 100%, 20px 20px;
}

.auth-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--rf-id-corner) no-repeat -16% calc(100% + .25rem) / 14rem auto,
    var(--rf-id-wave) no-repeat center 138% / 150% auto;
  opacity: .84;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 26%, transparent 86%);
  mask-image: linear-gradient(to top, #000 0%, #000 26%, transparent 86%);
}

.hero::before {
  background:
    var(--rf-id-watermark) no-repeat -6% -20% / clamp(18rem, 40vw, 28rem) auto,
    radial-gradient(circle, color-mix(in srgb, var(--orange-500) 38%, transparent), transparent 70%);
}

.hero::after {
  background:
    var(--rf-id-wave) no-repeat center 112% / 125% auto,
    radial-gradient(circle, color-mix(in srgb, var(--blue-400) 50%, transparent), transparent 70%);
}

.hero-grid-pattern {
  background-image:
    var(--rf-id-grid),
    linear-gradient(color-mix(in srgb, var(--white) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--white) 6%, transparent) 1px, transparent 1px);
  background-size: clamp(12rem, 22vw, 16rem) auto, 46px 46px, 46px 46px;
  background-position: 92% 18%, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  opacity: .85;
}

@media (prefers-reduced-motion: no-preference) {
  .rf-page-hero::before,
  .rf-why-band::before {
    animation: rfIdDrift 24s ease-in-out infinite;
    will-change: transform;
  }

  .rf-cta-box::after,
  .rf-pillars-band::after,
  .footer-id-deco--floor,
  .footer-id-deco--top-wave,
  .rf-id-deco--wave {
    animation: rfIdWaveShift 18s ease-in-out infinite;
    will-change: transform;
  }
}

@media (max-width: 768px) {
  .rf-page-hero::before {
    background-size: clamp(16rem, 70vw, 22rem) auto, auto, auto;
    background-position: -20% -10%, 15% 0%, 88% 20%;
  }

  .rf-why-band::before {
    background-size: clamp(11rem, 42vw, 15rem) auto, auto, auto, auto;
    background-position: calc(100% + 3rem) calc(100% - .5rem), 12% 8%, 90% 18%, 70% 100%;
  }

  .rf-home .rf-cta-box::before,
  .rf-cta-box::before {
    background-size: clamp(14rem, 44vw, 20rem) auto, clamp(9rem, 30vw, 12rem) auto;
    opacity: .92;
  }

  .rf-home .rf-cta-box::after {
    background-size: 165% auto, 26px 26px;
  }

  .rf-pillars-band::before {
    background-size: clamp(10rem, 36vw, 14rem) auto, clamp(8rem, 30vw, 11rem) auto;
  }
}

@media (max-width: 480px) {
  .rf-page-hero::after,
  .rf-why-band::after,
  .rf-pillars-band::after,
  .rf-cta-box::after {
    background-size: 160% auto, 30px 30px;
  }
}

/* ── صفحات pages.css — أقسام كحلية إضافية ── */

.page-hero {
  isolation: isolate;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--rf-id-watermark) no-repeat -4% -24% / clamp(22rem, 48vw, 36rem) auto,
    radial-gradient(28rem 18rem at 88% 10%, color-mix(in srgb, var(--blue-500) 28%, transparent), transparent 65%);
  opacity: 1;
  filter: saturate(1.25) brightness(1.05);
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--rf-id-waves) no-repeat center calc(100% + 1.5rem) / 128% auto;
  opacity: .98;
  filter: saturate(1.35) brightness(1.06);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 88%);
  mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 88%);
}

.page-recorded-courses .page-hero::before,
.page-live-courses .page-hero::before {
  background:
    var(--rf-id-watermark) no-repeat -6% -20% / clamp(24rem, 50vw, 38rem) auto,
    radial-gradient(32rem 20rem at 82% 8%, color-mix(in srgb, var(--orange-400) 22%, transparent), transparent 62%),
    radial-gradient(30rem 18rem at 12% 0%, color-mix(in srgb, var(--blue-500) 26%, transparent), transparent 65%);
}

.page-recorded-courses .page-hero::after,
.page-live-courses .page-hero::after {
  background:
    var(--rf-id-wave) no-repeat center calc(100% + .5rem) / 132% auto,
    var(--rf-id-waves) no-repeat center calc(100% + 2rem) / 135% auto;
  background-size: 132% auto, 135% auto;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 90%);
  mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 90%);
}

.page-hero-pattern {
  background-image:
    var(--rf-id-grid),
    linear-gradient(color-mix(in srgb, var(--white) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--white) 6%, transparent) 1px, transparent 1px);
  background-size: clamp(13rem, 22vw, 17rem) auto, 46px 46px, 46px 46px;
  background-position: 88% calc(100% - 1.5rem), 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  opacity: 1;
  filter: saturate(1.2);
}

.page-hero .container,
.page-hero-pattern {
  position: relative;
  z-index: 1;
}

.page-recorded-courses .course-card-thumb:not(.has-cover),
.live-course-card-cover:not(.has-image),
.rf-course-cover:not(.has-cover) {
  overflow: hidden;
}

.page-recorded-courses .page-hero p a,
.page-live-courses .page-hero p a {
  color: var(--orange-300);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.page-recorded-courses .page-hero p a:hover,
.page-live-courses .page-hero p a:hover {
  color: #fff;
}

.page-live-courses .page-content-wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.live-course-card-cover:not(.has-image) {
  overflow: hidden;
  background: var(--gradient-primary);
}

.live-course-card-cover:not(.has-image) .rf-cover-id {
  --rf-id-cover-h: clamp(8.5rem, 14vw, 11rem);
}

.live-course-card-cover:not(.has-image) .live-course-card-icon {
  z-index: 2;
}

.course-card-thumb:not(.has-cover) .rf-cover-id {
  --rf-id-cover-h: clamp(8rem, 13vw, 10.5rem);
}

.page-recorded-courses .course-card-thumb:not(.has-cover)::before,
.page-recorded-courses .course-card-thumb:not(.has-cover)::after,
.live-course-card-cover:not(.has-image)::before,
.live-course-card-cover:not(.has-image)::after {
  display: none;
}

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--rf-id-corner) no-repeat -8% calc(100% + .5rem) / clamp(14rem, 30vw, 20rem) auto,
    var(--rf-id-grid) no-repeat 94% calc(100% - 1rem) / clamp(9rem, 16vw, 13rem) auto;
  opacity: .84;
}

.cta-band::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--rf-id-wave) no-repeat center 138% / 130% auto;
  opacity: .9;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 68%);
  mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 68%);
}

.cta-inner {
  position: relative;
  z-index: 1;
}

.course-card-thumb:not(.has-cover)::before,
.course-pro-cover:not(.has-cover)::before,
.live-detail-cover:not(.has-cover)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--rf-id-grid) no-repeat 88% 10% / 8.5rem auto,
    var(--rf-id-corner) no-repeat -20% 110% / 10rem auto;
  opacity: .7;
}

.course-card-thumb:not(.has-cover)::after,
.course-pro-cover:not(.has-cover)::after,
.live-detail-cover:not(.has-cover)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    var(--rf-id-wave) no-repeat center 125% / 155% auto,
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--white) 14%, transparent), transparent 45%),
    linear-gradient(120deg, transparent 60%, color-mix(in srgb, #000 18%, transparent));
  opacity: .92;
}

.course-card-thumb:not(.has-cover) > *,
.course-pro-cover:not(.has-cover) > *,
.live-detail-cover:not(.has-cover) > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .rf-id-deco--corner {
    width: clamp(16rem, 58vw, 22rem);
    inset-inline-start: -3rem;
    bottom: -1rem;
  }

  .rf-id-deco--grid {
    width: clamp(10rem, 34vw, 14rem);
    opacity: .88;
  }

  .rf-id-deco--wave {
    inset-inline: -12%;
    height: 48%;
    background-size: 135% auto;
  }

  .rf-cover-id::before {
    width: 78%;
  }

  .page-recorded-courses .page-hero::before,
  .page-live-courses .page-hero::before {
    background-size: clamp(18rem, 78vw, 26rem) auto, auto, auto;
  }

  .footer-id-deco--corner-start {
    width: clamp(14rem, 48vw, 20rem);
    inset-inline-start: -3rem;
  }

  .footer-id-deco--corner-end,
  .footer-id-deco--grid {
    opacity: .45;
  }

  .footer-id-deco--watermark {
    width: clamp(18rem, 72vw, 26rem);
    opacity: .42;
  }
}