/* style.css */
:root{
  --bg1: #eafaf0;
  --primary: #2ecc71;
  --card: rgba(255,255,255,0.95);
  --muted: #556b5a;
  --accent: #27ae60;
  --font-ar: 'Cairo', sans-serif;
  --font-display: 'Amiri', serif;
}
*{box-sizing:border-box}
body{
  margin:0;
  padding:0;
  font-family: var(--font-ar);
  background: linear-gradient(135deg,#dff7ea,#e6f8f0);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  direction:rtl;
  text-align:right;
}

/* Welcome screen */
.welcome-screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #66bb6a, #2ecc71);
  background-size:200% 200%;
  animation: bgMove 12s ease infinite;
  color:white;
  font-family: var(--font-display);
  z-index:20;
}
@keyframes bgMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
#welcome-message{
  font-size:2rem;
  opacity:0;
  animation: welcomeFade 6s ease-in-out forwards;
  margin:0 16px;
}
@keyframes welcomeFade{
  0%{opacity:0; transform:translateY(12px)}
  12%{opacity:1; transform:translateY(0)}
  75%{opacity:1}
  100%{opacity:0; transform:translateY(-12px)}
}
.app-name{margin-top:14px; opacity:0.9; font-size:1rem}

/* Main app */
.app-container{
  width:92%;
  max-width:720px;
  padding:22px;
  border-radius:14px;
  background:var(--card);
  box-shadow: 0 12px 30px rgba(30,50,30,0.12);
  transform:translateY(0);
}
.hidden{display:none}
.headline{font-weight:600; color:var(--muted); font-family:var(--font-display); text-align:center; margin:6px 0 14px 0}

/* sections */
section{margin-top:12px}
input, textarea{width:100%; padding:10px; border-radius:8px; border:1px solid #d7eadd; font-family:var(--font-ar)}
button{background:var(--accent); color:white; border:0; padding:8px 12px; border-radius:10px; cursor:pointer}
button:hover{opacity:0.95}
#motivation{padding:16px; border-radius:10px; background:linear-gradient(180deg,#ffffff,#f6fff8); font-weight:600; min-height:64px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display)}

#timer{font-size:1.4rem; font-weight:700; color:var(--accent)}
.timer-controls{display:flex; gap:8px; margin-top:8px}
@media (max-width:600px){
  #welcome-message{font-size:1.4rem}
  .app-container{padding:16px}
}