/* ==========================================================================
   Parudux Academy — Cinematic layer
   --------------------------------------------------------------------------
   Version : 1.0  (2026-09-26)
   Pairs with: parudux-cinematic.js      Load: after parudux-ui-v2.css

   WHAT IT DOES
   The home page is one long, even, near-black surface: every section sits on
   #0a0a0a with a 2% difference in tone, so nothing tells the eye where one
   part ends and the next begins. This layer turns the page into a sequence of
   "scenes", the way a film is cut:

     1. SCENES      full-width backdrops that alternate, soft spotlights, and a
                    "SCENE 02 — دوره‌ها" title card above each part.
     2. REVEAL      each scene rises out of a slight blur as it scrolls in; the
                    cards inside arrive one after another.
     3. OPENING     the hero opens like a letterbox on first load, then drifts
                    with parallax as you scroll away from it.
     4. DETAIL      film grain, a film-strip progress bar, a light that follows
                    the pointer across cards, a sheen across the main buttons,
                    and numbers that count up.

   HOW IT HOOKS IN
   The React source is not available, so nothing here targets its class names.
   parudux-cinematic.js reads the page and marks elements with data-cine-*
   attributes; every rule below keys off those. If the script never runs,
   none of this applies and the page looks exactly as before.

   NOTHING IS HIDDEN WITHOUT THE SCRIPT
   Content only starts invisible under html.cine-ready, which the script sets
   after it has attached the observer that reveals it again.

   Motion is switched off entirely for prefers-reduced-motion.
   ========================================================================== */

:root {
  --cine-gold: #d4af37;
  --cine-cyan: #00d4ff;
  --cine-violet: #7c3aed;
  --cine-ease: cubic-bezier(.16, 1, .3, 1);      /* long, soft landing */
  --cine-band-a: #0c0c14;
  --cine-band-b: #08080e;
  --cine-edge: rgba(212, 175, 55, .22);
  --cine-marker: rgba(243, 233, 220, .55);
  --cine-marker-num: var(--cine-gold);
}

html[data-theme="light"] {
  --cine-band-a: #ffffff;
  --cine-band-b: #eef2f8;
  --cine-edge: rgba(16, 19, 28, .10);
  --cine-marker: rgba(15, 19, 32, .55);
  --cine-marker-num: #8a6f27;
}


/* ==========================================================================
   1. SCENES — separation between the parts of the page
   ========================================================================== */

/* Breathing room: the cut between scenes needs space to read as a cut. */
html.cine [data-cine-scene] { scroll-margin-top: 96px; }
html.cine [data-cine-scene="courses"],
html.cine [data-cine-scene="reviews"],
html.cine [data-cine-scene="stats"] { margin-top: 7rem !important; }
html.cine [data-cine-scene="installments"],
html.cine [data-cine-scene="cta"] { margin-top: 6rem !important; }

/* Full-bleed backdrop behind a scene. Drawn on ::after of the scene itself,
   stretched to the viewport edges; #root clips horizontally (ui-v2 §1), so
   this never creates side-scroll. */
html.cine [data-cine-band] {
  position: relative;
  isolation: isolate;
}
html.cine [data-cine-band]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -4.5rem;
  bottom: -4.5rem;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(212, 175, 55, .07), transparent 70%),
    linear-gradient(180deg, transparent, var(--cine-band-a) 14%, var(--cine-band-a) 86%, transparent);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--cine-edge), transparent) 1;
  border-bottom: 1px solid transparent;
}
html.cine [data-cine-band="b"]::after {
  background:
    radial-gradient(55% 60% at 50% 100%, rgba(0, 212, 255, .06), transparent 70%),
    linear-gradient(180deg, transparent, var(--cine-band-b) 14%, var(--cine-band-b) 86%, transparent);
}
html[data-theme="light"].cine [data-cine-band]::after {
  background: linear-gradient(180deg, transparent, var(--cine-band-a) 12%, var(--cine-band-a) 88%, transparent);
}
html[data-theme="light"].cine [data-cine-band="b"]::after {
  background: linear-gradient(180deg, transparent, var(--cine-band-b) 12%, var(--cine-band-b) 88%, transparent);
}

/* The title card: "SCENE 02 ———— دوره‌ها". Decorative; the section's own
   heading remains the accessible name. */
html.cine [data-cine-label]::before {
  content: attr(data-cine-num) "\00a0\00a0" attr(data-cine-label);
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.6rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
  color: var(--cine-marker);
  direction: ltr;
  justify-content: flex-end;          /* sits on the right, the RTL start */
  text-transform: uppercase;
  grid-column: 1 / -1;                /* spans the row when the scene is a grid */
  background:
    linear-gradient(90deg, transparent, var(--cine-edge)) left center / calc(100% - 15rem) 1px no-repeat;
  padding-left: 0;
}
html.cine [data-cine-scene="stats"][data-cine-label]::before { margin-bottom: .4rem; }

/* Cards-in-a-card scenes (installments, CTA): a lit rim instead of a band. */
html.cine [data-cine-scene="installments"],
html.cine [data-cine-scene="cta"],
html.cine [data-cine-scene="hero"] {
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, .10),
    0 40px 120px -40px rgba(0, 0, 0, .9),
    0 0 80px -30px rgba(124, 58, 237, .35);
}
html[data-theme="light"].cine [data-cine-scene="installments"],
html[data-theme="light"].cine [data-cine-scene="cta"],
html[data-theme="light"].cine [data-cine-scene="hero"] {
  box-shadow: 0 0 0 1px rgba(16, 19, 28, .06), 0 30px 80px -40px rgba(16, 19, 28, .35);
}


/* ==========================================================================
   2. REVEAL — scenes arrive as they scroll in
   ========================================================================== */

html.cine-ready [data-cine-reveal] {
  opacity: 0;
  transform: translate3d(0, 48px, 0) scale(.985);
  filter: blur(6px);
  transition:
    opacity 1s var(--cine-ease),
    transform 1.2s var(--cine-ease),
    filter 1s var(--cine-ease);
  will-change: opacity, transform, filter;
}
html.cine-ready [data-cine-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Drop the compositor hint once the scene has landed. */
html.cine-ready [data-cine-reveal].is-done { will-change: auto; }

/* Children of a revealed scene: one after another. */
html.cine-ready [data-cine-reveal] [data-cine-item] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity .9s var(--cine-ease) calc(var(--cine-i, 0) * 90ms + 150ms),
    transform 1s var(--cine-ease) calc(var(--cine-i, 0) * 90ms + 150ms);
}
html.cine-ready [data-cine-reveal].is-in [data-cine-item] {
  opacity: 1;
  transform: none;
}

/* Headings focus like a lens pulling focus. */
html.cine-ready [data-cine-reveal] h2 {
  transition: letter-spacing 1.4s var(--cine-ease), filter 1.1s var(--cine-ease);
  letter-spacing: .04em;
  filter: blur(3px);
}
html.cine-ready [data-cine-reveal].is-in h2 {
  letter-spacing: normal;
  filter: none;
}


/* ==========================================================================
   3. OPENING — the hero
   ========================================================================== */

/* Letterbox open, once per page load. */
html.cine-ready [data-cine-scene="hero"] {
  animation: cine-letterbox 1.6s var(--cine-ease) both;
}
@keyframes cine-letterbox {
  from { clip-path: inset(18% 0 18% 0 round 2.5rem); opacity: .4; }
  to   { clip-path: inset(0 0 0 0 round 2.5rem); opacity: 1; }
}

/* Scroll parallax. --cine-p runs 0 -> 1 as the hero leaves the screen. */
html.cine-ready [data-cine-scene="hero"] > .absolute {
  transform: translate3d(0, calc(var(--cine-p, 0) * 120px), 0) scale(calc(1 + var(--cine-p, 0) * .25));
}
html.cine-ready [data-cine-scene="hero"] [data-cine-hero-copy] {
  transform: translate3d(0, calc(var(--cine-p, 0) * -40px), 0);
  opacity: calc(1 - var(--cine-p, 0) * .6);
}
/* The featured-course card floats and tilts toward the pointer. */
html.cine-ready [data-cine-hero-card] {
  transform:
    perspective(1100px)
    rotateX(var(--cine-rx, 0deg))
    rotateY(var(--cine-ry, 0deg))
    translate3d(0, calc(var(--cine-p, 0) * 60px), 0);
  transition: transform .5s var(--cine-ease);
  animation: cine-float 7s ease-in-out infinite;
}
@keyframes cine-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}


/* ==========================================================================
   4. DETAIL
   ========================================================================== */

/* Film-strip progress, just under the sticky header. */
.cine-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  transform-origin: right center;     /* fills from the right: RTL reading order */
  transform: scaleX(var(--cine-scroll, 0));
  background: linear-gradient(270deg, var(--cine-gold), var(--cine-cyan) 60%, var(--cine-violet));
  box-shadow: 0 0 12px rgba(212, 175, 55, .55);
}
.cine-progress::after {
  /* sprocket holes */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0, 0, 0, .55) 10px 13px);
}

/* Film grain. Dark mode only, desktop only: it reads as texture on a big
   black screen and as dirt on a small bright one. */
@media (min-width: 900px) {
  html[data-theme="dark"].cine body::after,
  html:not([data-theme]).cine body::after {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: 70;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: cine-grain 1.2s steps(6) infinite;
  }
}
@keyframes cine-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* A soft light that follows the pointer across a card. */
html.cine [data-cine-card] {
  position: relative;
  transition: transform .5s var(--cine-ease), box-shadow .5s var(--cine-ease), border-color .4s;
}
html.cine [data-cine-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 55, .14), transparent 45%);
  z-index: 1;
}
html.cine [data-cine-card]:hover::after { opacity: 1; }
@media (hover: hover) {
  html.cine [data-cine-card]:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(212, 175, 55, .25);
  }
  html[data-theme="light"].cine [data-cine-card]:hover {
    box-shadow: 0 24px 50px -28px rgba(16, 19, 28, .35), 0 0 0 1px rgba(138, 111, 39, .25);
  }
}

/* A sweep of light across the main call-to-action buttons. */
html.cine [data-cine-cta] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html.cine [data-cine-cta]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: 40%;
  right: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  animation: cine-sheen 4.5s var(--cine-ease) infinite;
  pointer-events: none;
}
@keyframes cine-sheen {
  0%, 60% { right: -60%; }
  100%    { right: 130%; }
}


/* ==========================================================================
   5. STILL — for people who asked their system for less motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.cine-ready [data-cine-reveal],
  html.cine-ready [data-cine-reveal] [data-cine-item],
  html.cine-ready [data-cine-reveal] h2 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: normal !important;
    transition: none !important;
  }
  html.cine-ready [data-cine-scene="hero"],
  html.cine-ready [data-cine-hero-card],
  html.cine [data-cine-cta]::before,
  html.cine body::after {
    animation: none !important;
  }
  html.cine-ready [data-cine-scene="hero"] > .absolute,
  html.cine-ready [data-cine-hero-copy],
  html.cine-ready [data-cine-hero-card] {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media print {
  html.cine-ready [data-cine-reveal],
  html.cine-ready [data-cine-reveal] [data-cine-item] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .cine-progress, html.cine body::after { display: none !important; }
}


/* ==========================================================================
   6. INSTALLMENTS SECTION — hidden unless the admin switch is on
   --------------------------------------------------------------------------
   Controlled from Master Admin > صفحات و محتوای سایت. The section is the
   only element in the bundle with bg-[#04040d], so it can be matched before
   the script has marked anything, which is what prevents a flash on load.
   ========================================================================== */
html:not(.prdx-inst-on) section[class^="bg-[#04040d]"],
html:not(.prdx-inst-on) section[class*=" bg-[#04040d]"],
html:not(.prdx-inst-on) [data-cine-scene="installments"] {
  display: none !important;
}