/* ========================== */
/* خطوط المستخدم */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ========================== */
/* Reset و body */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Clash Display', sans-serif; 
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  color: #d5d5db;
  cursor: crosshair;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
  transition: background 0.3s ease;
}

/* ========================== */
/* المطر */
.rain-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.drop {
  position: absolute;
  width: 2px;
  height: 15px;
  background: rgba(173, 194, 233, 0.6);
  opacity: 0.4;
  animation: fall linear infinite;
}

@keyframes fall {
  0% { transform: translateY(-20px) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(10deg); }
}

/* ========================== */
/* flicker + lightning cinematic متقدم */
body.flicker-active {
  animation: lightning-flicker 0.08s infinite alternate;
}

/* ومضات عشوائية أكثر واقعية */
@keyframes lightning-flicker {
  0%   { background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f); }
  10%  { background: linear-gradient(to bottom, #fefefe, #ccccff 70%, #222222); }
  15%  { background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f); }
  25%  { background: linear-gradient(to bottom, #ffffff, #aaaacc 70%, #111111); }
  40%  { background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f); }
  50%  { background: linear-gradient(to bottom, #ffffee, #9999aa 70%, #0a0a0a); }
  60%  { background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f); }
  70%  { background: linear-gradient(to bottom, #fdfdfd, #bbbbff 70%, #111111); }
  100% { background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f); }
}

/* ضباب خارجي متحرك */
body.flicker-active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.015) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  animation: fog-move 60s linear infinite; /* حركة بطيئة جدا */
  z-index: 0;
}

@keyframes fog-move {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-100px) translateY(20px); }
  100% { transform: translateX(0) translateY(0); }
}

/* ضباب داخلي سينمائي */
body.flicker-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.05), rgba(0,0,0,0.9));
  pointer-events: none;
  animation: inner-fog 15s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes inner-fog {
  0% { opacity: 0.1; }
  50% { opacity: 0.35; }
  100% { opacity: 0.1; }
}

/* تأثير الضوء على القطط والنصوص عند ومضات الرعد */
body.flicker-active .cat-gif,
body.flicker-active .text-block p,
body.flicker-active .logo {
  animation: flash-light 0.08s infinite alternate;
}

@keyframes flash-light {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(3) drop-shadow(0 0 15px #fff); }
}

/* ========================== */
/* نصوص وواجهة المستخدم */
.text-regular { font-weight: 400; } 
.text-bold { font-weight: 600; }

.container { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; align-items: center; justify-content: center; gap: 1rem; position: relative; }

.logo {
  width: 200px; height: auto;
  border: 2px solid #e0c3fc;
  background: linear-gradient(145deg, #fdfbfb, #f3e7ff);
  padding: 5px; border-radius: 40px;
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.35), 0 0 70px rgba(150,120,250,0.2);
  -webkit-user-drag: none; user-drag: none;
}

.text-block p {
  margin: 0.3rem 0;
  font-size: 1.1rem;
  color: #d5d5db;
  text-shadow: 0 0 4px rgba(150, 120, 250, 0.2);
}

.text-block a { color: #9d7be5; text-decoration: underline; user-select: text; }
.instagram-color { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.telegram-color { color: #0088cc; } .whatsapp-color { color: #25d366; }

.cursor-blink { display:inline-block; animation: blink-animation 1s step-end infinite; }
@keyframes blink-animation { 50% { opacity:0; } }

/* overlay تم استبداله بتأثير flicker-active عند الضغط */

/* form-switch */
.form-switch { cursor:pointer; }
.form-switch i {
  position: relative; display:inline-block; margin-right:.5rem;
  width:46px; height:26px; background-color:#e0c3fc; border-radius:23px;
  transition: all 0.3s linear; box-shadow:0 0 10px rgba(180,140,255,0.3);
}
.form-switch i::before {
  content:""; position:absolute; left:0; width:42px; height:22px; background-color:#f9f7ff;
  border-radius:11px; transform:translate3d(2px,2px,0); transition: all 0.25s linear;
}
.form-switch i::after {
  content:""; position:absolute; left:0; width:22px; height:22px; background-color:#fff; border-radius:11px; box-shadow:0 2px 4px rgba(0,0,0,0.2); transform:translate3d(2px,2px,0); transition: all 0.2s ease-in-out;
}
.form-switch input { display:none; }
.form-switch input:checked + i { background-color:#ff0000; }
.form-switch input:checked + i { box-shadow: 0 0 40px rgba(255, 0, 0, 0.979), 0 0 70px rgba(250, 120, 120, 0.2); }
.form-switch input:checked + i::before { transform:translate3d(18px,2px,0) scale3d(0,0,0); }
.form-switch input:checked + i::after { transform:translate3d(22px,2px,0); }

/* منع تحديد النص */
body, p, span { user-select: none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.text-block a { user-select:text; }

/* ========================== */
/* القطط */
.cat-one .cat-gif 
{ position:absolute; 
  top:-80px; 
  left:85%; 
  transform:translateX(-50%); 
  width:100px; 
  animation: cat-one-move 4s ease-in-out infinite; 
  pointer-events:none; mix-blend-mode:difference; 
}
.cat-two .cat-gif 
{ position:absolute; 
  top:-70px; left:15%; 
  transform:translateX(-50%); width:70px; 
  animation: cat-two-move 4s ease-in-out infinite; 
  pointer-events:none; 
}
.cat-there .cat-gif 
{ position:absolute; 
  top:70px; left:-0%; 
  transform:translateX(-50%); 
  width:70px; 
  animation: cat-there-move 4s ease-in-out infinite; 
  pointer-events:none; 
}
.cat-four .cat-gif 
{ position:absolute; 
  top:160px; left:60%; 
  transform:translateX(-50%); 
  width:70px;
   animation: cat-four-move 4s ease-in-out infinite;
    pointer-events:none; 
}

@keyframes cat-one-move 
{0%,100%{transform:translateX(-50%) translateY(0px) rotate(0deg);} 
25%{transform:translateX(-50%) translateY(-10px) rotate(-5deg);} 
50%{transform:translateX(-50%) translateY(0px) rotate(5deg);} 
75%{transform:translateX(-50%) translateY(-5px) rotate(-2deg);}}
@keyframes cat-two-move 
{0%,100%{transform:translateX(-50%) translateY(0px) rotate(0deg);}
25%{transform:translateX(-50%) translateY(-8px) rotate(-3deg);} 
50%{transform:translateX(-50%) translateY(0px) rotate(3deg);} 
75%{transform:translateX(-50%) translateY(-4px) rotate(-2deg);}}
@keyframes cat-there-move 
{0%,100%{transform:translateX(40%) translateY(0px) rotate(0deg);}
25%{transform:translateX(10%) translateY(-8px) rotate(-3deg);}
50%{transform:translateX(-10%) translateY(20px) rotate(8deg);}}
@keyframes cat-four-move 
{0%,100%{transform:translateX(40%) translateY(0px) rotate(0deg);}
25%{transform:translateX(50%) translateY(-90px) rotate(20deg);}
50%{transform:translateX(90%) translateY(20px) rotate(7deg);}
75%{transform:translateX(100%) translateY(-9px) rotate(-2deg);}}

.form-switch-container { position:absolute; top:-80px; left:50%; transform:translateX(-50%); text-align:center; }
.form-switch-label { font-weight:900; font-size:22px; color:#dad5d5; margin-bottom:8px; display:block; letter-spacing:1px; -webkit-text-stroke:0.3px #111010; animation: neonPulse 2s infinite alternate; }

/* ========================== */
/* responsive */
@media screen and (max-width: 768px) {
  body { font-size:0.9rem; padding:10px; }
  .container { gap:0.8rem; }
  .row { flex-direction:column; align-items:center; gap:1rem; }
  .logo { width:200px; border-radius:30px; padding:4px; }
  .text-block p { font-size:1rem; text-align:center; word-wrap:break-word; }
  .cat-gif { top:-50px; width:60px; }
  .form-switch-container { top:-50px; }
}
@media screen and (max-width: 480px) {
  body { font-size:0.8rem; }
  .logo { width:120px; border-radius:25px; padding:3px; }
  .text-block p { font-size:0.9rem; }
  .container { gap:0.5rem; }
  .cat-gif { top:-40px; width:50px; }
  .form-switch-container { top:-40px; }
}