/* ============================================
   GOOD MORNING EGYPT — Styles
   Palette: Lapis night → golden dawn
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:        #E6B84A;
  --gold-light:  #F5D98B;
  --gold-dark:   #B8860B;
  --lapis:       #1A1040;
  --lapis-mid:   #2D1B69;
  --dawn-pink:   #FF7B54;
  --dawn-orange: #FFB347;
  --sand:        #C9A96E;
  --sand-light:  #E8D5A3;
  --sand-dark:   #8B6914;
  --text-light:  #FFF8E7;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Cormorant Garamond', serif;
}

/* ---- Canvas Particles ---- */
#particles {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---- Stars ---- */
.stars {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 60%;
  z-index: 2;
  pointer-events: none;
}
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  opacity: var(--op, 0.7);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--op, 0.7); transform: scale(1); }
  50%       { opacity: 0.1; transform: scale(0.5); }
}

/* ---- Scene ---- */
.scene {
  position: relative;
  width: 100vw; height: 100vh;
  overflow: hidden;
}

/* ---- Sky ---- */
.sky { position: absolute; inset: 0; z-index: 0; }
.sky-layer { position: absolute; inset: 0; }
.sky-deep {
  background: linear-gradient(180deg, #0D0826 0%, #1A1040 40%, #2D1B69 70%, #5C2D91 100%);
}
.sky-dawn {
  background: linear-gradient(180deg, transparent 50%, #7B2D8B 70%, #C0392B 85%, #E67E22 95%, #F39C12 100%);
  animation: dawnRise 4s ease-out forwards;
}
.sky-glow {
  background: radial-gradient(ellipse 60% 30% at 50% 100%, rgba(255,140,0,0.5) 0%, transparent 70%);
  animation: glowPulse 3s ease-in-out infinite alternate;
}
@keyframes dawnRise { from { opacity: 0; } to { opacity: 1; } }
@keyframes glowPulse { from { opacity: 0.6; } to { opacity: 1; } }

/* ---- Sun ---- */
.sun-container {
  position: absolute;
  bottom: 38%; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  animation: sunRise 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes sunRise {
  from { bottom: 28%; opacity: 0; }
  to   { bottom: 38%; opacity: 1; }
}
.sun {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF5CC 0%, #FFD700 40%, #FF8C00 80%, #FF4500 100%);
  box-shadow:
    0 0 40px 20px rgba(255,200,0,0.6),
    0 0 80px 40px rgba(255,140,0,0.3),
    0 0 120px 60px rgba(255,80,0,0.15);
  animation: sunPulse 2s ease-in-out infinite alternate;
}
@keyframes sunPulse {
  from { box-shadow: 0 0 40px 20px rgba(255,200,0,0.6), 0 0 80px 40px rgba(255,140,0,0.3); }
  to   { box-shadow: 0 0 60px 30px rgba(255,220,0,0.8), 0 0 120px 60px rgba(255,160,0,0.4); }
}
.sun-halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(255,215,0,0.3);
  animation: haloExpand 2s ease-out infinite;
}
.sun-halo-2 {
  width: 160px; height: 160px;
  border-color: rgba(255,165,0,0.15);
  animation-delay: 1s;
}
@keyframes haloExpand {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}

/* ---- Nile ---- */
.nile {
  position: absolute;
  bottom: 32%; left: 0; right: 0;
  height: 6%;
  background: linear-gradient(180deg, #1A4A6B 0%, #0D2E45 100%);
  z-index: 6;
  overflow: hidden;
}
.nile-shimmer {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0px, rgba(255,215,0,0.08) 20px, transparent 40px);
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  from { transform: translateX(-40px); }
  to   { transform: translateX(40px); }
}

/* ---- Desert ---- */
.desert {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 34%; z-index: 7;
}
.sand-dune {
  position: absolute; bottom: 0;
  border-radius: 50% 50% 0 0;
}
.dune-1 { width: 70%; height: 80%; left: -10%; background: linear-gradient(180deg, #C9A96E 0%, #8B6914 100%); }
.dune-2 { width: 60%; height: 65%; right: -5%; background: linear-gradient(180deg, #D4B483 0%, #9A7520 100%); }
.dune-3 { width: 50%; height: 50%; left: 25%; background: linear-gradient(180deg, #E8D5A3 0%, #B8960C 100%); }

/* ---- Pyramids ---- */
.pyramids {
  position: absolute;
  bottom: 32%; left: 0; right: 0;
  height: 25%; z-index: 8;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pyramid { width: 0; height: 0; border-style: solid; filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); }
.pyramid-far   { border-width: 0 50px 90px 50px;   border-color: transparent transparent #5C4A1E transparent; transform: translateX(-80px); opacity: 0.6; }
.pyramid-mid   { border-width: 0 70px 120px 70px;  border-color: transparent transparent #7A6228 transparent; transform: translateX(-20px); opacity: 0.75; }
.pyramid-main  { border-width: 0 100px 170px 100px; border-color: transparent transparent #C9A96E transparent; position: relative; z-index: 9; filter: drop-shadow(0 0 20px rgba(230,184,74,0.4)); }
.pyramid-small { border-width: 0 45px 80px 45px;   border-color: transparent transparent #6B5420 transparent; transform: translateX(30px); opacity: 0.65; }

/* ---- Palm Trees ---- */
.palms { position: absolute; bottom: 32%; z-index: 10; width: 100%; pointer-events: none; }
.palm  { position: absolute; bottom: 0; }
.palm-left  { left: 8%; }
.palm-right { right: 8%; transform: scaleX(-1); }
.palm-trunk {
  width: 8px; height: 80px;
  background: linear-gradient(180deg, #8B6914, #5C4A1E);
  margin: 0 auto; border-radius: 4px; transform: rotate(5deg);
}
.palm-fronds { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); }
.palm-fronds span {
  display: block; position: absolute;
  width: 40px; height: 6px;
  background: linear-gradient(90deg, #2D5A1B, #4A8A2A);
  border-radius: 0 50% 50% 0;
  transform-origin: left center;
  top: 0; left: 0;
}
.palm-fronds span:nth-child(1) { transform: rotate(0deg); }
.palm-fronds span:nth-child(2) { transform: rotate(40deg); }
.palm-fronds span:nth-child(3) { transform: rotate(80deg); }
.palm-fronds span:nth-child(4) { transform: rotate(-40deg); }
.palm-fronds span:nth-child(5) { transform: rotate(-80deg); }

/* ---- Birds ---- */
.birds { position: absolute; top: 15%; left: 0; width: 100%; z-index: 11; pointer-events: none; }
.bird {
  position: absolute;
  width: 20px; height: 6px;
  border-top: 3px solid rgba(255,215,0,0.7);
  border-radius: 50% 50% 0 0;
}
.bird::before, .bird::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 10px; height: 6px;
  border-top: 3px solid rgba(255,215,0,0.7);
  border-radius: 50% 50% 0 0;
}
.bird::before { left: -10px; }
.bird::after  { right: -10px; }
.bird-1 { top: 10%; left: 10%; animation: flyBird 8s linear infinite; }
.bird-2 { top: 20%; left: 5%;  animation: flyBird 10s linear infinite 2s; }
.bird-3 { top: 5%;  left: 15%; animation: flyBird 12s linear infinite 1s; }
.bird-4 { top: 15%; left: 8%;  animation: flyBird 9s linear infinite 3s; }
@keyframes flyBird {
  from { transform: translateX(-50px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translateX(110vw); opacity: 0; }
}

/* ---- Ornament Frame ---- */
.ornament-frame { position: absolute; inset: 16px; z-index: 20; pointer-events: none; }
.ornament-corner { position: absolute; width: 60px; height: 60px; border-color: var(--gold); border-style: solid; opacity: 0.6; }
.ornament-tl { top: 0; left: 0;     border-width: 2px 0 0 2px; }
.ornament-tr { top: 0; right: 0;    border-width: 2px 2px 0 0; }
.ornament-bl { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.ornament-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* ---- Content ---- */
.content {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.content-inner {
  text-align: center;
  animation: fadeUp 1.5s ease-out 0.5s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.eyebrow-text {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gold-light); opacity: 0.85;
}
.hieroglyph { font-size: 1.1rem; color: var(--gold); opacity: 0.8; }

.arabic-greeting {
  font-family: 'Noto Naskh Arabic', serif;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 700;
  color: var(--gold-light);
  text-shadow: 0 0 30px rgba(230,184,74,0.8), 0 0 60px rgba(230,184,74,0.4), 2px 2px 0 rgba(0,0,0,0.5);
  line-height: 1.1; margin-bottom: 16px;
  animation: glowText 2s ease-in-out infinite alternate;
}
@keyframes glowText {
  from { text-shadow: 0 0 30px rgba(230,184,74,0.8), 0 0 60px rgba(230,184,74,0.4), 2px 2px 0 rgba(0,0,0,0.5); }
  to   { text-shadow: 0 0 50px rgba(255,215,0,1), 0 0 100px rgba(255,165,0,0.6), 2px 2px 0 rgba(0,0,0,0.5); }
}

.divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px auto 14px; width: 280px; }
.divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ankh { font-size: 1.4rem; color: var(--gold); text-shadow: 0 0 10px rgba(230,184,74,0.8); }

.main-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.6rem, 5vw, 3.2rem);
  font-weight: 700; color: var(--text-light);
  letter-spacing: 0.12em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  margin-bottom: 14px;
}

.subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.9rem, 2.5vw, 1.15rem);
  font-style: italic; color: rgba(255,248,231,0.8);
  line-height: 1.7; margin-bottom: 20px;
}

.hieroglyphs-row {
  display: flex; justify-content: center; gap: 14px;
  font-size: 1.5rem; color: var(--gold);
  margin-bottom: 18px; opacity: 0.75;
}
.hieroglyphs-row span { cursor: default; transition: transform 0.3s, opacity 0.3s; }
.hieroglyphs-row span:hover { transform: scale(1.4) translateY(-4px); opacity: 1; }

.time-display {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--gold-light); letter-spacing: 0.1em;
  margin-bottom: 18px;
  text-shadow: 0 0 20px rgba(230,184,74,0.5);
}

.blessing-card {
  display: inline-block;
  border: 1px solid rgba(230,184,74,0.35);
  background: rgba(26,16,64,0.5);
  backdrop-filter: blur(8px);
  padding: 12px 32px; border-radius: 2px; margin-bottom: 22px;
}
.blessing-arabic { font-family: 'Noto Naskh Arabic', serif; font-size: 1.3rem; color: var(--gold-light); margin-bottom: 4px; }
.blessing-english { font-family: 'Cormorant Garamond', serif; font-size: 0.85rem; font-style: italic; color: rgba(255,248,231,0.65); letter-spacing: 0.08em; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 32px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: #1A1040;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  border: none; cursor: pointer; border-radius: 2px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(230,184,74,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(230,184,74,0.6); }
.btn-icon { font-size: 1rem; }

/* ---- Blessing Overlay ---- */
.blessing-overlay {
  position: fixed; inset: 0;
  background: rgba(13,8,38,0.85);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.blessing-overlay.active { opacity: 1; pointer-events: all; }
.blessing-popup {
  text-align: center;
  border: 1px solid rgba(230,184,74,0.5);
  background: linear-gradient(135deg, rgba(26,16,64,0.95), rgba(45,27,105,0.95));
  padding: 48px 56px; border-radius: 4px;
  box-shadow: 0 0 60px rgba(230,184,74,0.3);
  animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.popup-glyph { font-size: 3.5rem; color: var(--gold); text-shadow: 0 0 30px rgba(230,184,74,0.8); margin-bottom: 16px; animation: glowText 1.5s ease-in-out infinite alternate; }
.popup-arabic { font-family: 'Noto Naskh Arabic', serif; font-size: 2rem; color: var(--gold-light); margin-bottom: 8px; }
.popup-english { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-style: italic; color: rgba(255,248,231,0.7); margin-bottom: 24px; }
.popup-close {
  background: transparent; border: 1px solid rgba(230,184,74,0.4);
  color: var(--gold); width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer; font-size: 0.9rem; transition: background 0.2s;
}
.popup-close:hover { background: rgba(230,184,74,0.15); }

@media (max-width: 480px) {
  .ornament-corner { width: 36px; height: 36px; }
  .blessing-popup  { padding: 32px 28px; }
  .hieroglyphs-row { font-size: 1.2rem; gap: 10px; }
}