/* مقدمة لاجونا السينمائية: الشعار، خمسة مشاهد، وشريط تحميل يتحول لموجة */

#lgi { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--ivory); color: #fff; }
#lgi.gone { display: none; }
#lgi * { box-sizing: border-box; }

/* ——— الشعار ——— */
.lgi-logo { position: absolute; left: 50%; top: 46%; width: min(74vw, 430px); aspect-ratio: 2000 / 652; transform: translate(-50%, -50%); z-index: 3; }
.lgi-logo img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; will-change: transform, opacity, filter; }
.lgi-logo .lp-l { clip-path: inset(0 69% 0 0); }
.lgi-logo .lp-r { clip-path: polygon(50.3% 0, 100% 0, 100% 100%, 53.6% 100%, 53.6% 74.8%, 50.3% 74.8%); }
.lgi-logo .lp-g { clip-path: polygon(31% 0, 50.3% 0, 50.3% 74.8%, 53.6% 74.8%, 53.6% 100%, 31% 100%); transform-origin: 42% 55%; }
.lgi-logo .lp-shine { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  -webkit-mask: url(img/logo.webp) center / 100% 100% no-repeat; mask: url(img/logo.webp) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; }
.lgi-tag { position: absolute; left: 50%; top: calc(46% + min(15vw, 86px)); transform: translateX(-50%); z-index: 3; font-size: 11.5px; letter-spacing: .38em; color: var(--muted); opacity: 0; white-space: nowrap; }
.lgi-drops { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lgi-drops i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); opacity: 0; }

/* ——— المشاهد ——— */
/* صندوق المشاهد: يملأ الجوال، وعلى الشاشات العريضة يصير إطار عمودي 4:5 في النص حتى ما تنقص اللقطات العمودية */
.lgi-scenes { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
@media (min-aspect-ratio: 4/5) {
  .lgi-scenes { left: 50%; right: auto; width: min(100vw, 80vh); transform: translateX(-50%); box-shadow: 0 0 120px 40px rgba(0,0,0,.35); }
  #lgi.dark { background: radial-gradient(120% 90% at 50% 40%, #0B3550, #041726) !important; }
}
.lgi-scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--deep); visibility: hidden; }
.lgi-scene.on { visibility: visible; }
.lgi-scene .media { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; will-change: transform; }
.lgi-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,24,40,.72) 0%, rgba(4,24,40,.05) 42%, rgba(4,24,40,.18) 100%); pointer-events: none; }
/* موجة الشعار (حرف الـ G) كرمز: نفس صورة الشعار مقصوصة على الموجة */
.lgi-mark { position: relative; display: inline-block; width: 1.1em; height: 1em; overflow: hidden; font-size: 26px; vertical-align: middle; }
.lgi-mark img { position: absolute; left: -1.51em; top: -.27em; width: 4.87em; max-width: none; height: auto; }

/* العنوان: سطر رفيع فيه موجة الشعار، والعنوان ينكشف من اليمين لليسار مثل الضوء */
.lgi-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(12% + env(safe-area-inset-bottom)); padding: 0 26px; text-align: center; pointer-events: none; }
.lgi-rule { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lgi-rule i { width: 64px; height: 1.5px; background: linear-gradient(90deg, rgba(159,221,244,0), #9FDDF4); transform: scaleX(0); }
.lgi-rule i:last-child { background: linear-gradient(270deg, rgba(159,221,244,0), #9FDDF4); }
.lgi-rule .lgi-mark { font-size: 25px; opacity: 0; }
.lgi-rule .lgi-mark img { filter: brightness(0) invert(1); }
.lgi-t { display: block; margin-top: 14px; font-size: clamp(30px, 8.6vw, 54px); line-height: 1.18; font-weight: 700; letter-spacing: 0; text-wrap: balance;
  text-shadow: 0 2px 28px rgba(3, 25, 42, .5);
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 60%); mask-image: linear-gradient(to left, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 0% 0; mask-position: 0% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.lgi-scene.cap-on .lgi-rule i { animation: lgiRule .9s cubic-bezier(.3,.7,.2,1) forwards; }
.lgi-scene.cap-on .lgi-rule i:first-child { transform-origin: left; } .lgi-scene.cap-on .lgi-rule i:last-child { transform-origin: right; }
.lgi-scene.cap-on .lgi-rule .lgi-mark { animation: lgiFade .7s .25s ease-out forwards; }
.lgi-scene.cap-on .lgi-t { animation: lgiWipe 1.5s .3s cubic-bezier(.45,.05,.25,1) forwards; }
@keyframes lgiRule { to { transform: scaleX(1); } }
@keyframes lgiFade { to { opacity: .95; } }
@keyframes lgiWipe { to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.lgi-scene::after { background: linear-gradient(0deg, rgba(3,25,42,.72) 0%, rgba(3,25,42,.14) 36%, rgba(3,25,42,0) 58%, rgba(3,25,42,.18) 100%) !important; }

/* الأفق: خط ينرسم بالنص، وستارتين بلون البحر بالليل تقفل عليه وتنفتح */
.lgi-shut { position: absolute; left: 0; right: 0; height: 50.2%; will-change: transform; }
.lgi-shut.top { top: 0; transform: translateY(-101%); background: linear-gradient(180deg, #03182A 0%, #06324F 100%); }
.lgi-shut.bot { bottom: 0; transform: translateY(101%); background: linear-gradient(0deg, #03182A 0%, #06324F 100%); }
.lgi-horizon { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; opacity: 0; transform: scaleX(0); transform-origin: right;
  background: linear-gradient(90deg, rgba(159,221,244,0), #9FDDF4 25%, #fff 50%, #9FDDF4 75%, rgba(159,221,244,0)); box-shadow: 0 0 12px rgba(0,166,230,.6); }
.lgi-mark.center { position: absolute; left: 50%; top: 50%; font-size: 40px; opacity: 0; transform: translate(-50%, -50%); background: #06324F; border-radius: 6px; }

/* الجملة الختامية: تنكشف بنفس طريقة العناوين */
.lgi-final.on span { animation: lgiWipe 1.4s cubic-bezier(.45,.05,.25,1) forwards; }

/* ——— عناصر الانتقالات ——— */
.lgi-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.lgi-foam { position: absolute; top: -5%; height: 110%; width: 160px; }
.lgi-drop { position: absolute; width: 26px; height: 38px; margin: -19px 0 0 -13px; }
.lgi-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); transform: translate(-50%, -50%); }
.lgi-steam { position: absolute; bottom: -10%; width: 40vw; height: 60vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(22px); }
/* دائرة ضوء مثل عدسة الكاميرا: قلب ناعم وحافة أفتح قليلًا، بلون الضوء اللي جات منه */
.lgi-bokeh { --c: 255, 196, 110; position: absolute; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(var(--c), .55) 0 52%, rgba(var(--c), .95) 63%, rgba(var(--c), 0) 71%);
  box-shadow: 0 0 18px 2px rgba(var(--c), .35); filter: saturate(1.2); }
.lgi-streak { position: absolute; top: 0; bottom: 0; left: 20%; width: 60%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7) 45%, rgba(191,232,248,.9) 50%, rgba(255,255,255,.7) 55%, transparent); filter: blur(10px); }
.lgi-ember { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFD27A; box-shadow: 0 0 8px 2px rgba(255,160,60,.8); }
.lgi-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #FFF8E8, #FFE2A8 60%, #F3B866); opacity: 0; }
/* ستارة عاجية فيها حروف الشعار مفرغة: من خلالها يبان أول مشهد، وتكبر حتى تختفي */
.lgi-veil { position: absolute; inset: 0; z-index: 2; background: var(--ivory); pointer-events: none; will-change: transform, opacity; }
.lgi-crest { position: absolute; left: -2%; width: 104%; height: 170px; top: 0; filter: drop-shadow(0 -6px 18px rgba(255,255,255,.4)); }
.lgi-spray { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #F3E3CF; box-shadow: 0 0 4px rgba(255,255,255,.6); }
.lgi-pulse { position: absolute; aspect-ratio: 4 / 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(220,245,255,.95), rgba(0,166,230,.45) 55%, rgba(0,166,230,0)); mix-blend-mode: screen; }
.lgi-logo.glow img { filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(0,166,230,1)) drop-shadow(0 0 22px rgba(0,166,230,.75)); }
.lgi-dim { position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 80% at 50% 45%, rgba(3,24,42,.55), rgba(3,24,42,.95)); opacity: 0; pointer-events: none; }

/* ——— الختام ——— */
.lgi-final { position: absolute; inset: auto 0 64px; z-index: 3; text-align: center; pointer-events: none; }
.lgi-final span { display: inline-block; font-size: clamp(22px, 6vw, 32px); font-weight: 700; letter-spacing: 0; text-shadow: 0 2px 24px rgba(0,0,0,.45);
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent 60%); mask-image: linear-gradient(to left, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 0% 0; mask-position: 0% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ——— شريط التحميل والموجة ——— */
#lgi-wave { position: fixed; inset: 0; z-index: 102; width: 100%; height: 100%; pointer-events: none; }
#lgi-wave.gone { display: none; }

.lgi-skip { position: absolute; z-index: 6; top: max(16px, env(safe-area-inset-top)); left: 16px; border: 1px solid rgba(11,27,43,.14); background: rgba(255,255,255,.55); backdrop-filter: blur(10px);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--ink); transition: color .4s, background .4s, border-color .4s; }
#lgi.dark .lgi-skip { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
.lgi-count { position: absolute; z-index: 6; top: max(22px, env(safe-area-inset-top)); right: 20px; font: 600 11px/1 Inter, var(--font); letter-spacing: .25em; color: var(--muted); direction: ltr; transition: color .4s; }
#lgi.dark .lgi-count { color: rgba(255,255,255,.75); }