/* Начален екран: златен мусхаф, който се отваря след „Бисмиллях“. Само CSS 3D (transform/opacity) — гладко и на телефон.
   Мусхафът се чете отдясно наляво: гръбчето е вдясно и корицата се отваря надясно. */
.intro { display: none; }
html.intro-on .intro { display: block; }
html.intro-on body { overflow: hidden; }

.intro {
  --w: min(54vw, 36vh, 270px);
  --h: calc(var(--w) * 1.4);
  --d: calc(var(--w) * .13);
  --g1: #5e3f0c; --g2: #9c6f1f; --g3: #d9ad4f; --g4: #f7df94; --g5: #fff5cf;
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  color: #f3e3b4; font-family: var(--ui);
  background: radial-gradient(120% 90% at 50% 38%, #123b30 0%, #08201a 45%, #030b08 100%);
  transition: opacity .9s ease;
  -webkit-tap-highlight-color: transparent;
}
.intro.gone { opacity: 0; pointer-events: none; }

/* фон: геометрия от осмолъчни звезди, лъчи и звезди */
.in-pattern {
  position: absolute; inset: -10%; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23e8c46a' stroke-width='1.2'%3E%3Cpath d='M36 12l7 17 17 7-17 7-7 17-7-17-17-7 17-7z'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Ccircle cx='72' cy='0' r='8'/%3E%3Ccircle cx='0' cy='72' r='8'/%3E%3Ccircle cx='72' cy='72' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
  mask-image: radial-gradient(closest-side at 50% 42%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 20%, transparent 100%);
}
.in-rays {
  position: absolute; left: 50%; top: 42%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, .10) 0 4deg, transparent 4deg 15deg);
  mask-image: radial-gradient(closest-side, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 70%);
  opacity: .25; animation: in-spin 90s linear infinite;
  transition: opacity 2.5s ease;
}
.intro.lit .in-rays { opacity: .9; animation-duration: 40s; }
@keyframes in-spin { to { transform: rotate(360deg); } }
.in-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff3c8; box-shadow: 0 0 6px 1px rgba(255, 225, 150, .8); animation: in-twinkle 3.5s ease-in-out infinite; }
@keyframes in-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }

/* сцена и книга */
.in-stage {
  position: absolute; left: 0; right: 0; top: 0; height: 74%;
  display: grid; place-items: center; perspective: 1300px; perspective-origin: 50% 40%;
  transition: transform 1.6s cubic-bezier(.55, 0, .2, 1), opacity 1.2s ease;
}
.in-glow {
  position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 3.4); height: calc(var(--w) * 3.4);
  margin: calc(var(--w) * -1.7) 0 0 calc(var(--w) * -1.7); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 226, 150, .55), rgba(255, 200, 90, .18) 45%, transparent 72%);
  opacity: .35; transform: scale(.7); transition: opacity 2.4s ease, transform 2.4s ease;
}
.intro.lit .in-glow { opacity: 1; transform: scale(1.15); }
.in-float { animation: in-float 6s ease-in-out infinite; transform-style: preserve-3d; }
@keyframes in-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
.intro.opening .in-float { animation-play-state: paused; }

.book {
  position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-30deg) rotateZ(1deg);
  transition: transform 1.8s cubic-bezier(.45, 0, .2, 1);
}
.intro.opening .book { transform: rotateX(6deg) scale(var(--fit, 1)); }
/* докато корицата се отваря надясно, книгата се плъзга наляво — отвореният мусхаф остава в средата */
.intro.opened .book { transform: rotateX(6deg) scale(var(--fit, 1)) translateX(calc(var(--w) * -.5)); transition-duration: 2.6s; transition-timing-function: cubic-bezier(.5, 0, .15, 1); }
.intro.lit .book { transform: rotateX(4deg) scale(calc(var(--fit, 1) * 1.04)) translateX(calc(var(--w) * -.5)); }
.book > div { position: absolute; }

/* метален златен ефект */
.gold, .bk-back, .bk-spine, .cv-front {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 250, 220, .45), transparent 50%),
    linear-gradient(135deg, var(--g2) 0%, var(--g4) 18%, var(--g3) 34%, var(--g5) 48%, var(--g3) 60%, var(--g2) 78%, var(--g4) 92%, var(--g2) 100%);
}
.bk-back { inset: 0; transform: translateZ(calc(var(--d) * -1)); border-radius: 4px 10px 10px 4px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); filter: brightness(.75); }
.bk-spine {
  right: 0; top: 0; width: var(--d); height: 100%; transform-origin: right center;
  transform: translateZ(calc(var(--d) * -1)) rotateY(90deg); filter: brightness(.82);
  background: linear-gradient(90deg, var(--g1), var(--g3) 25%, var(--g5) 45%, var(--g3) 65%, var(--g1));
}
/* ръбовете на страниците (отляво, отгоре, отдолу) */
.bk-edge { background: repeating-linear-gradient(90deg, #f6ecd0 0 1px, #e3d3a8 1px 2px); }
.bk-edge.l { left: 3px; top: 1.5%; width: var(--d); height: 97%; transform-origin: left center; transform: translateZ(calc(var(--d) * -1)) rotateY(-90deg); background: repeating-linear-gradient(90deg, #f6d985 0 1px, #b98f33 1px 2px), #d9b458; box-shadow: inset 0 0 14px rgba(110, 70, 5, .5); }
.bk-edge.t { top: 3px; left: 1.5%; width: 97%; height: var(--d); transform-origin: top center; transform: translateZ(calc(var(--d) * -1)) rotateX(90deg); background: repeating-linear-gradient(0deg, #f6d985 0 1px, #b98f33 1px 2px); }
.bk-edge.b { bottom: 3px; left: 1.5%; width: 97%; height: var(--d); transform-origin: bottom center; transform: translateZ(calc(var(--d) * -1)) rotateX(-90deg); background: repeating-linear-gradient(0deg, #f6d985 0 1px, #b98f33 1px 2px); }

/* първата страница — Ал-Фатиха */
.bk-page {
  left: 1.5%; top: 1.5%; width: 97%; height: 97%; transform: translateZ(-1px);
  background: radial-gradient(120% 90% at 50% 45%, #fffaea, #f5e8c6 70%, #e9d6a4); border-radius: 2px 6px 6px 2px;
  box-shadow: inset -10px 0 18px -10px rgba(120, 80, 10, .45);
  display: grid; place-items: center; overflow: hidden;
}
.pg-svg, .sp-svg, .eb-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-in { position: absolute; left: 19%; right: 19%; top: 15.5%; bottom: 15.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--w) * .025); text-align: center; }
.pg-head {
  font-family: 'Hafs', serif; direction: rtl; color: #fff8dc; font-size: calc(var(--w) * .055); line-height: 1.6;
  padding: 0 calc(var(--w) * .08); border-radius: 6px; background: linear-gradient(90deg, #163f78, #1d4f91 30%, #2a64ad 50%, #1d4f91 70%, #163f78);
  box-shadow: 0 0 0 1.5px #e2c476, 0 0 0 3px #1d4f91, 0 0 0 4.5px #b8892c;
}
.pg-text { font-family: 'Hafs', serif; direction: rtl; color: #1d2a25; font-size: calc(var(--w) * .047); line-height: 2; word-spacing: .04em; }
.bk-page::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2.2s ease;
  background: radial-gradient(closest-side at 50% 50%, transparent 55%, rgba(255, 226, 140, .55) 85%, rgba(255, 214, 110, .9));
}
.intro.lit .bk-page::after { opacity: .35; }
.bk-page { transition: box-shadow 2.2s ease; }
.intro.lit .bk-page { box-shadow: inset -10px 0 18px -10px rgba(120, 80, 10, .45), 0 0 50px 14px rgba(255, 214, 120, .55), 0 0 120px 40px rgba(255, 200, 90, .25); }
.intro.calm .bk-page::after { opacity: .2; }

/* корицата се отваря надясно около гръбчето */
.bk-cover {
  inset: 0; transform-style: preserve-3d; transform-origin: right center; transform: translateZ(1px) rotateY(0deg);
  transition: transform 2.6s cubic-bezier(.5, 0, .15, 1);
}
.intro.opened .bk-cover { transform: translateZ(1px) rotateY(166deg); }
.cv-front, .cv-inside { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px 10px 10px 4px; }
.cv-front { box-shadow: inset 0 0 0 1px rgba(255, 245, 200, .7), inset 0 0 22px rgba(90, 55, 0, .55); overflow: hidden; }
.cv-front::after { /* отблясък, който минава по корицата */
  content: ''; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 240, .75) 50%, transparent 60%);
  transform: translateX(-70%); animation: in-sheen 5.5s ease-in-out infinite 1s;
}
@keyframes in-sheen { 0%, 60% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
.cv-front svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-title {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  font-family: 'Hafs', serif; font-size: calc(var(--w) * .078); line-height: 1.28; direction: rtl; display: flex; flex-direction: column; align-items: center;
  color: #5a3b08; text-shadow: 0 1px 0 rgba(255, 246, 205, .9), 0 -1px 0 rgba(70, 40, 0, .5);
}
.cv-inside { transform: rotateY(180deg); background: linear-gradient(90deg, #e9d6a4, #f6ebcc 12%, #f3e4bd); box-shadow: inset 12px 0 20px -12px rgba(120, 80, 10, .5); }
.cv-inside { overflow: hidden; }

.book > .bk-ribbon {
  right: 22%; top: 97%; width: 6.5%; height: 22%; transform-origin: top center;
  background: linear-gradient(90deg, #07382b, #1c8b69 40%, #6fd1ad 50%, #1c8b69 60%, #07382b);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 87%, 0 100%);
  transform: translateZ(calc(var(--d) * -.45)) rotateZ(2deg); animation: in-ribbon 4.5s ease-in-out infinite;
}
@keyframes in-ribbon { 0%, 100% { transform: translateZ(calc(var(--d) * -.45)) rotateZ(3deg); } 50% { transform: translateZ(calc(var(--d) * -.45)) rotateZ(-2.5deg); } }
.bk-shadow { position: absolute; left: 50%; top: 100%; width: calc(var(--w) * 1.2); height: calc(var(--w) * .16); margin: 18px 0 0 calc(var(--w) * -.6); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(4px); }

/* златни искри */
.spark { position: absolute; left: 50%; top: 46%; width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
  background: #fff4c4; box-shadow: 0 0 8px 2px rgba(255, 210, 110, .9); opacity: 0;
  animation: in-spark var(--t, 3s) ease-out var(--dl, 0s) forwards; }
@keyframes in-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}

/* долната част: бутон „Бисмиллях“ */
.in-bottom { position: absolute; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); top: 72%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; transition: opacity .8s ease, transform .8s ease; }
.intro.opening .in-bottom { opacity: 0; transform: translateY(20px); pointer-events: none; }
.in-bism {
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  padding: 12px 30px 12px; border-radius: 999px; color: #fff3cf;
  background: linear-gradient(180deg, rgba(20, 70, 56, .9), rgba(8, 36, 28, .9));
  border: 1.5px solid #d9ad4f; box-shadow: 0 0 0 4px rgba(217, 173, 79, .15), 0 0 30px rgba(230, 190, 90, .35), inset 0 1px 0 rgba(255, 240, 200, .25);
  animation: in-pulse 2.8s ease-in-out infinite;
}
.in-bism:focus-visible { outline: 2px solid #fff3cf; outline-offset: 4px; }
@keyframes in-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(217, 173, 79, .15), 0 0 24px rgba(230, 190, 90, .25), inset 0 1px 0 rgba(255, 240, 200, .25); } 50% { box-shadow: 0 0 0 8px rgba(217, 173, 79, .08), 0 0 44px rgba(240, 200, 100, .55), inset 0 1px 0 rgba(255, 240, 200, .25); } }
.in-bism .ar { font-family: 'Hafs', serif; font-size: clamp(24px, 7vw, 34px); line-height: 1.7; direction: rtl; }
.in-bism small { font: 600 13px/1.3 var(--ui); letter-spacing: .3px; color: #e8cf8c; }
.in-mean { margin: 0; font: italic 500 16px/1.4 var(--serif); color: rgba(243, 227, 180, .75); text-align: center; }
.in-skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 2; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(217, 173, 79, .35); background: rgba(0, 0, 0, .25); color: #e8cf8c; font: 600 13px var(--ui); cursor: pointer; }
.in-skip:focus-visible { outline: 2px solid #fff3cf; outline-offset: 2px; }

/* накрая: приближаване към страницата и плавно влизане в приложението */
.intro.enter .in-stage { transform: scale(1.9) translateY(4%); opacity: 0; }
.intro.enter .in-rays, .intro.enter .in-pattern { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .in-float, .in-rays, .in-star, .cv-front::after, .in-bism, .book > .bk-ribbon { animation: none !important; }
  .book, .bk-cover, .in-stage, .in-glow { transition-duration: .01s !important; }
}

/* 3D (WebGL): платното е под бутоните; когато е готово, CSS сцената изчезва плавно */
.in-gl-host { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.in-gl-host canvas { display: block; width: 100%; height: 100%; }
.intro.gl .in-gl-host { opacity: 1; }
.intro.gl .in-stage, .intro.gl .in-pattern, .intro.gl .in-rays, .intro.gl #inStars { opacity: 0; transition: opacity .8s ease; }
.intro.gl-open .in-gl-host { transition: opacity 1s ease 5.4s; }