/* =========================================================================
   Programmed Rose Letter — style.css  (v3)
   Dark cinematic RTL microsite: sacred Kufi opening, realistic layered rose,
   falling red petals, premium framed Qur'an verse panels.
   Fonts: Cairo (body) + 'PRL Kufi' (sacred) are injected via @font-face from
   PHP so their paths always resolve to this plugin's /assets/fonts/ folder.
   ========================================================================= */

@property --prl-petal-hi    { syntax: '<color>'; inherits: true; initial-value: #3a3a40; }
@property --prl-petal-light { syntax: '<color>'; inherits: true; initial-value: #2a2a2f; }
@property --prl-petal-mid   { syntax: '<color>'; inherits: true; initial-value: #161619; }
@property --prl-petal-dark  { syntax: '<color>'; inherits: true; initial-value: #050506; }
@property --prl-core-light  { syntax: '<color>'; inherits: true; initial-value: #1c1c20; }
@property --prl-core-dark   { syntax: '<color>'; inherits: true; initial-value: #050506; }

.prl-stage {
	--prl-black:    #050505;
	--prl-gray:     #15151a;
	--prl-red:      #7d0a16;
	--prl-red-soft: #b11221;
	--prl-red-glow: rgba(177, 18, 33, 0.40);
	--prl-white:    #f4efe9;
	--prl-muted:    #9a9088;
	--prl-gold:     #c9a35b;
	--prl-gold-dim: rgba(201, 163, 91, 0.45);

	--prl-petal-hi:#3a3a40; --prl-petal-light:#2a2a2f; --prl-petal-mid:#161619;
	--prl-petal-dark:#050506; --prl-core-light:#1c1c20; --prl-core-dark:#050506;
	--prl-stem:#2c3a2c; --prl-leaf:#243024;

	/* Body font = Cairo. Sacred font = Kufi (with graceful fallbacks). */
	--prl-font: 'Cairo', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
	--prl-kufi: 'PRL Kufi', 'Aref Ruqaa', 'Amiri', 'Cairo', 'Traditional Arabic', serif;

	position: relative; width: 100%; min-height: 100vh; margin: 0; padding: 0;
	overflow: hidden; background: var(--prl-black); color: var(--prl-white);
	font-family: var(--prl-font); font-weight: 400; line-height: 2.05;
	text-align: center; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.prl-stage * { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Background atmosphere
--------------------------------------------------------------------------- */
.prl-bg {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(120% 80% at 50% -10%, #100406 0%, transparent 55%),
		radial-gradient(120% 90% at 50% 110%, #0a0203 0%, transparent 55%),
		var(--prl-black);
}
.prl-bg__glow {
	position: absolute; left: 50%; width: 70vmax; height: 70vmax;
	transform: translateX(-50%); border-radius: 50%;
	background: radial-gradient(circle, var(--prl-red-glow) 0%, transparent 60%);
	filter: blur(40px); opacity: 0.55; animation: prl-breathe 9s ease-in-out infinite;
}
.prl-bg__glow--top { top: -30vmax; }
.prl-bg__glow--bottom { bottom: -30vmax; animation-delay: 3s; opacity: 0.4; }
.prl-particles { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes prl-breathe {
	0%,100% { opacity: 0.35; transform: translateX(-50%) scale(1); }
	50% { opacity: 0.6; transform: translateX(-50%) scale(1.08); }
}
.prl-petal-rain {
	position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%;
	pointer-events: none; opacity: 0; transition: opacity 2.4s ease;
}
.prl-petal-rain.is-active { opacity: 0.92; }

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.prl-btn {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	gap: 0.6em; margin: 0; padding: 0.85em 2.2em;
	font-family: var(--prl-font); font-weight: 600; font-size: clamp(1rem, 2.4vw, 1.15rem);
	color: var(--prl-white);
	background: linear-gradient(180deg, rgba(177,18,33,0.18), rgba(125,10,22,0.10));
	border: 1px solid var(--prl-gold-dim); border-radius: 999px; cursor: pointer;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	transition: transform .3s ease, box-shadow .4s ease, border-color .4s ease, opacity .4s ease;
}
.prl-btn:hover, .prl-btn:focus-visible {
	transform: translateY(-1px); border-color: rgba(201,163,91,0.7);
	box-shadow: 0 0 28px var(--prl-red-glow); outline: none;
}
.prl-btn:focus-visible { outline: 2px solid var(--prl-gold); outline-offset: 3px; }
.prl-btn--ghost {
	background: transparent; border-color: rgba(154,144,136,0.35);
	color: var(--prl-muted); font-weight: 400; font-size: 0.95rem; padding: 0.6em 1.5em;
}
.prl-btn--ghost:hover { color: var(--prl-white); }

/* ---------------------------------------------------------------------------
   Intro screen (sacred opening + rose + title + button), staggered reveal
--------------------------------------------------------------------------- */
.prl-intro {
	position: relative; z-index: 2; min-height: 100vh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(1.4rem, 4.5vh, 2.6rem); padding: 9vh 1.5rem;
	transition: opacity 1.1s ease, transform 1.1s ease;
}
.prl-intro.is-hidden { opacity: 0; transform: scale(1.04); pointer-events: none; }

/* --- Sacred hadith block (Kufi typography, ornamental frame, glow) --- */
.prl-hadith {
	max-width: 760px; width: 100%;
	animation: prl-fade-up 2s ease 0.3s both;
}
.prl-hadith__frame {
	position: relative; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
	border: 1px solid var(--prl-gold-dim); border-radius: 14px;
	background:
		radial-gradient(120% 140% at 50% 0%, rgba(177,18,33,0.10), transparent 60%),
		linear-gradient(180deg, rgba(20,16,10,0.55), rgba(8,6,5,0.4));
	box-shadow: inset 0 0 0 1px rgba(201,163,91,0.10), 0 20px 60px rgba(0,0,0,0.5);
}
.prl-hadith__frame::before {  /* faint inner gold line for a manuscript feel */
	content: ""; position: absolute; inset: 8px; border: 1px solid rgba(201,163,91,0.16);
	border-radius: 9px; pointer-events: none;
}
.prl-hadith__text {
	margin: 0; font-family: var(--prl-kufi); font-weight: 400;
	font-size: clamp(1.05rem, 3.2vw, 1.5rem); line-height: 2.3; color: #efe4cf;
	letter-spacing: 0.01em; text-shadow: 0 0 18px rgba(201,163,91,0.22);
}
.prl-hadith__orn {
	display: block; color: var(--prl-gold); opacity: 0.7;
	font-size: clamp(1rem, 3vw, 1.4rem); line-height: 1;
}
.prl-hadith__orn--top { margin-bottom: 0.8rem; }
.prl-hadith__orn--bottom { margin-top: 0.8rem; }

.prl-intro .prl-rose { width: clamp(160px, 34vmin, 300px); animation: prl-fade-up 1.6s ease 1.3s both; }
.prl-intro__title {
	margin: 0; max-width: 22ch; font-weight: 600; font-size: clamp(1.5rem, 5.5vw, 2.5rem);
	letter-spacing: 0.01em; color: var(--prl-white); text-shadow: 0 2px 30px rgba(177,18,33,0.25);
	animation: prl-fade-up 1.6s ease 2.0s both;
}
.prl-btn--open { animation: prl-fade-up 1.4s ease 2.6s both; }

@keyframes prl-fade-up { from { opacity: 0; transform: translateY(18px);} to { opacity: 1; transform: translateY(0);} }

.prl-experience { position: relative; z-index: 2; }
.prl-experience.is-active { animation: prl-fade-in 1.4s ease both; }
@keyframes prl-fade-in { from { opacity: 0;} to { opacity: 1;} }

/* ---------------------------------------------------------------------------
   Rose scene
--------------------------------------------------------------------------- */
.prl-rose-scene {
	position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
	height: 58vh; margin-bottom: -6vh;
}
.prl-aura {
	position: absolute; width: 48vmin; height: 48vmin; border-radius: 50%;
	background: radial-gradient(circle, var(--prl-red-glow) 0%, transparent 65%);
	filter: blur(34px); opacity: 0; transition: opacity 3s ease;
}
.prl-rose-scene.is-bloom .prl-aura { opacity: 0.85; animation: prl-breathe 6s ease-in-out infinite; }

/* ---------------------------------------------------------------------------
   THE REALISTIC ROSE
--------------------------------------------------------------------------- */
.prl-rose { position: relative; width: clamp(200px, 44vmin, 400px); aspect-ratio: 1 / 1; }
.prl-rose__svg { width: 100%; height: 100%; overflow: visible; display: block; }
.prl-rose {
	transition: --prl-petal-hi 4s ease, --prl-petal-light 4s ease, --prl-petal-mid 4s ease,
		--prl-petal-dark 4s ease, --prl-core-light 4s ease, --prl-core-dark 4s ease;
}
.prl-rose.is-open {
	--prl-petal-hi:#e24a60; --prl-petal-light:#c21f33; --prl-petal-mid:#8e0f20;
	--prl-petal-dark:#3f060e; --prl-core-light:#b11221; --prl-core-dark:#4a0610;
}
.prl-petal {
	transform-box: view-box; transform-origin: 120px 108px;
	transform: scale(calc(var(--petal-scale) * 0.40));
	transition: transform 3.2s cubic-bezier(.2,.6,.25,1); will-change: transform;
}
.prl-petal__gloss { opacity: 0; transition: opacity 2.6s ease 1.2s; mix-blend-mode: screen; }
.prl-rose.is-open .prl-petal--outer { transform: scale(calc(var(--petal-scale) * 1.08)); transition-delay: calc(var(--petal-i)*0.08s + 0.10s); }
.prl-rose.is-open .prl-petal--mid   { transform: scale(calc(var(--petal-scale) * 0.98)); transition-delay: calc(var(--petal-i)*0.08s + 0.55s); }
.prl-rose.is-open .prl-petal--inner { transform: scale(calc(var(--petal-scale) * 0.82)); transition-delay: calc(var(--petal-i)*0.08s + 0.95s); }
.prl-rose.is-open .prl-petal--core  { transform: scale(calc(var(--petal-scale) * 0.66)); transition-delay: calc(var(--petal-i)*0.08s + 1.30s); }
.prl-rose.is-open .prl-petal__gloss { opacity: 0.6; }
.prl-rose.is-open .prl-rose__bloom { animation: prl-sway 8s ease-in-out 3.6s infinite; transform-box: view-box; transform-origin: 120px 130px; }
@keyframes prl-sway { 0%,100% { transform: rotate(0);} 50% { transform: rotate(1.3deg);} }

/* ---------------------------------------------------------------------------
   Letter card
--------------------------------------------------------------------------- */
.prl-card {
	position: relative; margin: 0 auto;
	background: linear-gradient(160deg, rgba(21,21,26,0.74), rgba(11,11,13,0.64));
	border: 1px solid rgba(201,163,91,0.14); border-radius: 22px;
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.03);
}
.prl-letter { position: relative; z-index: 2; padding: 2vh 1.2rem 6vh; }
.prl-card--letter { max-width: 700px; padding: clamp(1.6rem, 5vw, 3.2rem); }
.prl-letter__body { min-height: 2em; }
.prl-paragraph {
	margin: 0 0 1.8em; font-size: clamp(1.05rem, 3.2vw, 1.3rem); font-weight: 400;
	color: var(--prl-white); white-space: pre-line; opacity: 0; transform: translateY(10px);
	transition: opacity 1.1s ease, transform 1.1s ease;
}
.prl-paragraph.is-visible { opacity: 1; transform: translateY(0); }
.prl-paragraph:last-child { margin-bottom: 0.5em; }
.prl-cursor {
	display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px;
	vertical-align: -0.15em; background: var(--prl-gold); animation: prl-blink 1s steps(1) infinite;
}
@keyframes prl-blink { 50% { opacity: 0; } }
.prl-controls { margin-top: 1.5rem; display: flex; justify-content: center; }
.prl-controls.is-done .prl-skip { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------------------
   Qur'an verse sections — premium sacred panels (Kufi, gold corners, glow)
--------------------------------------------------------------------------- */
.prl-verses { position: relative; z-index: 2; padding: 5vh 1.2rem; }
.prl-verses--taqwa { padding-top: 2vh; }
.prl-verses__intro {
	margin: 0 0 2.4rem; font-family: var(--prl-kufi); font-weight: 400; color: var(--prl-gold);
	font-size: clamp(1.2rem, 3.6vw, 1.6rem); letter-spacing: 0.06em;
	text-shadow: 0 0 20px rgba(201,163,91,0.25);
}
.prl-verses__intro::after {  /* small underline flourish */
	content: ""; display: block; width: 60px; height: 1px; margin: 0.9rem auto 0;
	background: linear-gradient(90deg, transparent, var(--prl-gold-dim), transparent);
}
.prl-verses__grid { display: grid; gap: 1.4rem; max-width: 720px; margin: 0 auto; }

.prl-verse-panel {
	position: relative; margin: 0; padding: clamp(1.8rem, 5vw, 2.8rem) clamp(1.4rem, 4vw, 2.4rem);
	border-radius: 16px;
	background:
		radial-gradient(130% 120% at 50% 0%, rgba(177,18,33,0.08), transparent 60%),
		linear-gradient(180deg, rgba(18,18,22,0.7), rgba(9,9,11,0.62));
	border: 1px solid rgba(201,163,91,0.12);
	box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 0 30px rgba(177,18,33,0.04);
	opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s ease;
}
.prl-verse-panel.is-visible { opacity: 1; transform: translateY(0); }

/* Ornamental gold corner brackets */
.prl-corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--prl-gold); opacity: 0.55; }
.prl-corner--tl { top: 10px; inset-inline-start: 10px; border-top-width: 1.5px; border-inline-start-width: 1.5px; border-top-left-radius: 4px; }
.prl-corner--tr { top: 10px; inset-inline-end: 10px;   border-top-width: 1.5px; border-inline-end-width: 1.5px; border-top-right-radius: 4px; }
.prl-corner--bl { bottom: 10px; inset-inline-start: 10px; border-bottom-width: 1.5px; border-inline-start-width: 1.5px; border-bottom-left-radius: 4px; }
.prl-corner--br { bottom: 10px; inset-inline-end: 10px;   border-bottom-width: 1.5px; border-inline-end-width: 1.5px; border-bottom-right-radius: 4px; }

.prl-verse {
	margin: 0; font-family: var(--prl-kufi); font-weight: 400;
	font-size: clamp(1.35rem, 4.8vw, 1.95rem); line-height: 2.3; color: #f3ead8;
	text-shadow: 0 0 22px rgba(201,163,91,0.18);
}
.prl-verse-ref {
	margin-top: 1.2rem; font-family: var(--prl-font); font-weight: 400;
	font-size: clamp(0.8rem, 2.4vw, 0.95rem); color: var(--prl-muted); letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   Final English quote
--------------------------------------------------------------------------- */
.prl-final {
	position: relative; z-index: 2; min-height: 62vh; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 1rem; padding: 8vh 1.5rem; direction: ltr;
}
.prl-final__rose-glow {
	position: absolute; width: 40vmin; height: 40vmin; border-radius: 50%;
	background: radial-gradient(circle, var(--prl-red-glow), transparent 65%);
	filter: blur(40px); opacity: 0.7; animation: prl-breathe 6s ease-in-out infinite;
}
.prl-quote-en {
	position: relative; margin: 0; font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(1.3rem, 4.5vw, 2.1rem); font-style: italic; letter-spacing: 0.02em;
	color: var(--prl-white); text-shadow: 0 2px 30px rgba(177,18,33,0.3);
	opacity: 0; transform: translateY(16px); transition: opacity 1.6s ease, transform 1.6s ease;
}
.prl-quote-note {
	position: relative; margin: 0; font-size: 0.72rem; letter-spacing: 0.06em;
	color: rgba(154,144,136,0.45); opacity: 0; transition: opacity 2s ease 0.6s;
}
.prl-final.is-visible .prl-quote-en { opacity: 1; transform: translateY(0); }
.prl-final.is-visible .prl-quote-note { opacity: 0.55; }
.prl-veil { position: fixed; inset: 0; z-index: 5; background: var(--prl-black); opacity: 0; pointer-events: none; transition: opacity 2.5s ease; }

/* ---------------------------------------------------------------------------
   Audio control
--------------------------------------------------------------------------- */
.prl-audio { position: fixed; z-index: 6; bottom: max(1.2rem, env(safe-area-inset-bottom)); inset-inline-start: 1.2rem; }
.prl-btn--pulse { padding: 0.6em 1.3em; font-size: 0.92rem; font-weight: 600; border-color: rgba(201,163,91,0.3); }
.prl-pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--prl-red-soft); box-shadow: 0 0 10px var(--prl-red-soft); }
.prl-btn--pulse.is-playing .prl-pulse-dot { animation: prl-heartbeat 1.4s ease-in-out infinite; }
@keyframes prl-heartbeat {
	0%,100% { transform: scale(1); opacity: 0.8; }
	15% { transform: scale(1.6); opacity: 1; } 30% { transform: scale(1); opacity: 0.8; }
	45% { transform: scale(1.4); opacity: 1; } 60% { transform: scale(1); opacity: 0.8; }
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (min-width: 768px) { .prl-rose-scene { height: 66vh; } }
@media (max-width: 480px) {
	.prl-rose-scene { height: 46vh; margin-bottom: -2vh; }
	.prl-audio { inset-inline-start: 0.8rem; bottom: 0.9rem; }
	.prl-btn--pulse { padding: 0.55em 1em; font-size: 0.85rem; }
	.prl-stage { line-height: 1.95; }
	.prl-hadith__text { line-height: 2.1; }
}

/* ---------------------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.prl-stage *, .prl-stage *::before, .prl-stage *::after {
		animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
		transition-duration: 0.2s !important;
	}
	.prl-petal { transition: transform 0.3s ease !important; }
	.prl-petal-rain { display: none !important; }
}