/* الصفحة الرئيسية — منقولة من HomePage/preview.html في نظام التصميم، بمتغيرات style.css */
.swrap{max-width:1120px;margin:0 auto;padding:0 var(--space-3)}
.shero{position:relative;min-height:640px;overflow:hidden;color:var(--ink);background:#1c130d url(../assets/library-hall.jpg) center/cover no-repeat}
.shero::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(28,19,13,.55) 0%,rgba(28,19,13,.28) 40%,rgba(28,19,13,.04) 100%)}
.shero::after{content:"";position:absolute;inset:auto 0 0 0;height:14%;background:linear-gradient(0deg,var(--surface-100),transparent)}
.glow{position:absolute;left:-4%;bottom:-10%;width:46%;height:80%;background:radial-gradient(closest-side,rgba(217,168,78,.22),transparent 72%)}
.sheikh{position:absolute;left:1%;bottom:0;height:88%;width:auto;z-index:1;filter:sepia(.28) saturate(.85) brightness(.9) contrast(1.05) drop-shadow(0 16px 48px rgba(0,0,0,.55));-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 22%);mask-image:linear-gradient(0deg,transparent 0,#000 22%)}
.dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.shero .copy{position:absolute;z-index:2;right:max(6%,calc((100% - 1120px)/2 + 16px));bottom:12%;width:380px;text-shadow:0 2px 18px rgba(0,0,0,.75)}
.eyebrow{font-size:14px;line-height:20px;font-weight:600;color:var(--gold);margin:0 0 var(--space-2)}
.rule{width:64px;height:2px;background:var(--gold);margin:0 0 var(--space-3)}
.shero h1{font-family:var(--display);font-size:56px;line-height:68px;font-weight:700;margin:0 0 var(--space-3);color:var(--ink)}
.tag{font-size:18px;line-height:32px;color:var(--ink-muted);margin:0 0 var(--space-4)}
.actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.btn.primary,.btn.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);font:600 16px/24px var(--ui);text-decoration:none}
.btn.primary{background:var(--gold);color:var(--on-gold);border:1px solid var(--gold)}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink-muted)}
.shero .btn.secondary:hover{border-color:var(--gold);color:var(--gold)}
.swrap>.resume{margin:var(--space-4) 0 0}
.block{padding:var(--space-7) 0}.block.alt{background:var(--surface-200);border-block:1px solid var(--line)}
.block h2{font-family:var(--display);font-size:40px;line-height:56px;font-weight:700;margin:0;color:var(--ink)}
.head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}.head p{margin:0;color:var(--ink-muted)}
#series{position:relative;overflow:hidden;background:var(--surface-100);color:var(--ink)}#series .swrap{position:relative;z-index:1}
.air{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 58%,rgba(217,168,78,.10),transparent 70%)}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:0;animation:mote 12s linear infinite}
@keyframes mote{0%{transform:translate(0,0);opacity:0}15%{opacity:.5}85%{opacity:.35}100%{transform:translate(var(--mx),-160px);opacity:0}}
.floaters{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--space-6) var(--space-7);padding:var(--space-5) 0 var(--space-6);perspective:1100px}
.bk{width:min(calc(var(--cm,15)*17.5px),calc(var(--cm,15)*2.6vw))}
.fbook{display:block;position:relative;color:inherit;text-decoration:none;container-type:inline-size;aspect-ratio:var(--ar,.667);animation:floatY var(--dur,7s) ease-in-out var(--delay,0s) infinite;filter:drop-shadow(0 22px 24px rgba(0,0,0,.5));transition:filter .15s}
.fbook:hover,.fbook:focus-visible{filter:drop-shadow(0 22px 28px rgba(217,168,78,.35));text-decoration:none}
.bk.soon .fbook{cursor:not-allowed;filter:drop-shadow(0 22px 24px rgba(0,0,0,.5)) saturate(.7) brightness(.8)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.book3d{position:absolute;inset:0;transform-style:preserve-3d;--rx:8deg;--ry:-30deg;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.face{position:absolute;backface-visibility:hidden;overflow:hidden}
.face.front{inset:0;transform:translateZ(calc(var(--t)/2))}.face.front>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.face.front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%,rgba(0,0,0,.10))}
.face.back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--t)/2));background:#872032}
.face.spine{top:0;bottom:0;width:var(--t);left:calc(50% - var(--t)/2);transform:rotateY(90deg) translateZ(50cqw);background-color:var(--leather)}
.face.img{background-size:100% 100%;background-repeat:no-repeat;background-position:center}
.face.pages{top:1.2cqw;bottom:1.2cqw;width:calc(var(--t) - 1cqw);left:calc(50% - var(--t)/2 + .5cqw);transform:rotateY(-90deg) translateZ(49cqw);background:repeating-linear-gradient(0deg,#e8dcc2 0 1px,#cdbf9f 1px 2px)}
.face.top,.face.bottom{left:1cqw;right:1cqw;height:calc(var(--t) - 1cqw);top:calc(50% - var(--t)/2 + .5cqw);background:repeating-linear-gradient(90deg,#e8dcc2 0 1px,#cdbf9f 1px 2px)}
.face.top{transform:rotateX(90deg) translateZ(calc(50cqw/var(--ar,.667) - .5cqw))}.face.bottom{transform:rotateX(-90deg) translateZ(calc(50cqw/var(--ar,.667) - .5cqw));filter:brightness(.7)}
.fcap{margin-top:var(--space-4);text-align:center;min-width:12rem;margin-inline:-3rem}
.fcap b{display:block;font-family:var(--display);font-size:22px;line-height:34px;color:var(--ink)}.fcap span{font-size:14px;color:var(--ink-muted)}
.bk.soon .fcap span{color:var(--gold)}
.shelfline{height:8px;background:var(--leather-deep);border-top:1px solid var(--line)}
.sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.scard{display:flex;flex-direction:column;gap:var(--space-1);background:var(--surface-100);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-4);color:var(--ink);min-height:120px;box-shadow:var(--shadow-raised)}
.scard strong{font-family:var(--display);font-size:28px;line-height:40px;color:var(--ink)}.scard span:not(.st){font-size:14px;line-height:24px;color:var(--ink-muted)}
.scard .st{font-size:14px;font-weight:600;color:var(--gold)}
.scard.active:hover{background:var(--surface-300);text-decoration:none}.scard.active strong{color:var(--gold)}
.scard.soon{border-style:dashed;box-shadow:none;cursor:not-allowed}.scard.soon strong{color:var(--ink-muted)}
.ph-block{margin-top:var(--space-3)}
.block .ph{font-size:18px}
@media (max-width:760px){
  .shero{min-height:820px}
  .shero::before{background:linear-gradient(180deg,rgba(28,19,13,.6) 0%,rgba(28,19,13,.3) 55%,rgba(28,19,13,.05) 100%)}
  .shero .copy{position:relative;right:auto;bottom:auto;width:auto;padding:var(--space-6) var(--space-3) 0}
  .shero h1{font-size:46px;line-height:58px}
  .sheikh{left:50%;transform:translateX(-50%);height:42%}
  .actions .btn{flex:1 1 100%}
  .block{padding:var(--space-6) 0}.block h2{font-size:32px;line-height:44px}
  .head{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .bk{width:min(calc(var(--cm,15)*9px),44vw)}.floaters{gap:var(--space-5) var(--space-4)}.fcap{min-width:0;margin-inline:0}
}
@media (prefers-reduced-motion:reduce){.fbook,.mote{animation:none}.mote{opacity:.3}.fbook{transition:none}}