/* ===================================================================
   dm-intro.css — دخلة "دار المشاوي" على Oracle APEX
   نسخة 4 (REV 4، 10 أكتوبر 2026): دخلة «الختم»، اختيار مدحت من ديمو
   الـ 3 أفكار. الشاشة بتبقى شواية: 4 أسياخ نار بتعلّم عليها وهي سخنة
   وتبرد، وبعدين لوجو البيت بيتختم في النص بخبطة تهز الشاشة وشرار،
   والاسم بيطلع أبيض من السخونية ويبرد على لونه.
     الأسياخ 0.12 لـ 0.6 · الختم 1.0 · الاسم 1.3 · الجملة 1.62 لـ 2.02
     الدخلة بتقفل على 2.4 (dm-intro.js) وبتختفي في 0.35.
   ارفعه في: Shared Components > Static Application Files
   =================================================================== */

#dmIntro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #17110D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
}
#dmIntro.dm-out { opacity: 0; transform: scale(1.04); pointer-events: none }

#dmIntro svg { display: block; overflow: visible }
#dmIntro .in { display: flex; flex-direction: column; align-items: center }
#dmIntro .em { width: min(80vw, 42vh); max-width: 440px; height: auto }
#dmIntro .wd { width: min(88vw, 50vh); max-width: 500px; height: auto; margin-top: 1vh }

/* fill-box بس على الحاجات اللي بتتحرك. اللي عليه transform ثابت في الـ SVG بيفضل على أصله */
#dmIntro .in, #dmIntro .bar, #dmIntro .smk, #dmIntro .st, #dmIntro .flk, #dmIntro .sw,
#dmIntro .spk, #dmIntro .nm, #dmIntro .tg { transform-box: fill-box }

#dmSkip {
  position: absolute;
  bottom: 26px;
  background: transparent;
  border: 1px solid #6B5946;
  color: #C4A985;
  border-radius: 8px;
  padding: 7px 20px;
  font: 400 14px/1 "Cairo", "Tajawal", "Segoe UI", sans-serif;
  cursor: pointer;
  opacity: 0;
  animation: dmFade .3s ease .5s forwards;
}
#dmSkip:hover { color: #EBD9BE; border-color: #C4A985 }
#dmSkip:focus-visible { outline: 2px solid #D2701E; outline-offset: 3px }

/* ---------- الحركات ---------- */
@keyframes dmFade  { from { opacity: 0 } to { opacity: 1 } }
@keyframes dmUp    { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@keyframes dmHotA  { from { fill: #FFF1D2 } to { fill: #D2701E } }
@keyframes dmHotB  { from { fill: #FFF1D2 } to { fill: #EBD9BE } }
@keyframes dmSpark { 0% { opacity: 0; transform: translate(0, 0) scale(1) } 12% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.35) } }
@keyframes dmFlick { 0%,100% { transform: scale(1, 1) } 25% { transform: scale(.95, 1.08) } 50% { transform: scale(1.05, .94) } 75% { transform: scale(.97, 1.05) } }
@keyframes dmGlow  { 0% { opacity: 0 } 12% { opacity: .4 } 42% { opacity: .3 } 47% { opacity: .85 } 70%,100% { opacity: .45 } }
@keyframes dmBarIn { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes dmSear  { 0% { fill: #FFF6E0 } 18% { fill: #FFC04D } 42% { fill: #E8621F } 100% { fill: #4A2A18 } }
@keyframes dmSmoke { 0% { opacity: 0; transform: translateY(0) scale(.6) } 30% { opacity: .45 } 100% { opacity: 0; transform: translateY(-80px) scale(1.5) } }
@keyframes dmStamp { 0% { opacity: 0; transform: scale(1.7) } 55% { opacity: 1; transform: scale(.92) } 100% { opacity: 1; transform: scale(1) } }
@keyframes dmHotS  { from { stroke: #FFF6E0 } to { stroke: #EBD9BE } }
@keyframes dmHotF  { from { fill: #FFF6E0 } to { fill: #EBD9BE } }
@keyframes dmHotO  { from { fill: #FFF6E0 } to { fill: #E8621F } }
@keyframes dmWave  { 0% { opacity: 0; transform: scale(.3) } 6% { opacity: .9; transform: scale(.36) } 100% { opacity: 0; transform: scale(1.45) } }
@keyframes dmShake { 0% { transform: translate(0, 0) } 20% { transform: translate(-6px, 5px) } 40% { transform: translate(6px, -4px) } 60% { transform: translate(-4px, 3px) } 80% { transform: translate(2px, -1px) } 100% { transform: translate(0, 0) } }

/* ---------- توزيع التوقيت ---------- */
#dmIntro .glow { animation: dmGlow 2.4s ease-out both }
#dmIntro .bar  { transform-origin: 100% 50%; animation: dmBarIn .24s cubic-bezier(.2,.9,.3,1) both, dmSear 1.25s ease-out both }
#dmIntro .smk  { opacity: 0; transform-origin: 50% 100%; animation: dmSmoke 1.5s ease-out both }
#dmIntro .spk  { opacity: 0; transform-origin: 50% 50%; animation-name: dmSpark; animation-timing-function: cubic-bezier(.15,.7,.3,1); animation-fill-mode: both }

#dmIntro .st   { opacity: 0; transform-origin: 50% 50%; animation: dmStamp .42s cubic-bezier(.3,1.4,.5,1) 1s both }
#dmIntro .roof { stroke: #EBD9BE; animation: dmHotS 1s ease-out 1s both }
#dmIntro .chim { fill: #EBD9BE; animation: dmHotF 1s ease-out 1s both }
#dmIntro .fo   { fill: #E8621F; animation: dmHotO 1s ease-out 1s both }
#dmIntro .fi   { fill: #FFC04D }
#dmIntro .flk  { transform-origin: 50% 100%; animation: dmFlick 1.2s ease-in-out 1.45s infinite }
#dmIntro .sw   { opacity: 0; transform-origin: 50% 50%; animation: dmWave .55s ease-out 1.05s both }
#dmIntro .in   { animation: dmShake .3s linear 1.06s both }

#dmIntro .t1   { fill: #D2701E }
#dmIntro .t2   { fill: #EBD9BE }
#dmIntro .nm   { animation: dmUp .4s cubic-bezier(.2,1,.4,1) 1.3s both }
#dmIntro .nm .t1 { animation: dmHotA .9s ease-out 1.3s both }
#dmIntro .nm .t2 { animation: dmHotB .9s ease-out 1.3s both }
#dmIntro .tg   { fill: #C4A985; animation: dmUp .4s cubic-bezier(.2,1,.4,1) 1.62s both }

@media (max-height: 620px) { #dmIntro .em { width: min(62vw, 36vh) } }

/* اللي قافل الحركة على موبايله بيشوف اللوجو ثابت على شكله الأخير */
@media (prefers-reduced-motion: reduce) {
  #dmIntro, #dmIntro * { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important }
}