/* ===========================
  BODY & GLOBAL STYLES
  =========================== */
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #1a001f, #3a0066);
color: #ffffff;
text-align: center;
margin: 0;
padding: 0;
transition: background-color 0.3s ease, color 0.3s ease;
opacity: 1 !important; /* 🔥 Prevents invisible body flash */
}

/* ===========================
  HEADER
  =========================== */
header {
padding: 30px 20px;
}

.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
border: 3px solid #b3003b;
}

h1 {
font-family: 'Playfair Display', serif;
color: #ffffff;
margin-bottom: 5px;
}

h2 {
color: #ffffff;
font-family: 'Playfair Display', serif;
text-transform: uppercase;
letter-spacing: 1px;
}

p, h3, label {
color: #ffffff;
}

/* ===========================
  BUTTONS
  =========================== */
button {
padding: 10px 20px;
background-color: #9b4dff;
border: none;
color: #ffffff;
border-radius: 30px;
cursor: pointer;
margin-top: 10px;
font-weight: 600;
transition: background-color 0.3s ease, transform 0.2s ease;
}

button:disabled {
background-color: #999;
cursor: not-allowed;
}

button:hover:not(:disabled) {
background-color: #b3003b;
transform: scale(1.05);
}

/* ===========================
  SECTIONS
  =========================== */
#about,
#portfolio,
#contact {
max-width: 700px;
margin: 40px auto;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px;
border: 1px solid #b3003b;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
color: #ffffff;
}

/* ===========================
  INPUTS
  =========================== */
#contact input,
#contact textarea {
width: 100%;
padding: 12px;
margin: 10px 0;
font-size: 1rem;
border: 1px solid #9b4dff;
border-radius: 5px;
background-color: rgba(255,255,255,0.1);
color: #ffffff;
}

#contact input::placeholder,
#contact textarea::placeholder {
color: #ddd;
}

#contact textarea {
min-height: 100px;
}

/* ===========================
  SERVICE CARDS
  =========================== */
.projects {
display: flex;
flex-direction: column;
gap: 20px;
}

.project-card {
background-color: #2a002f;
border: 1px solid #9b4dff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 15px rgba(179, 0, 59, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
color: #ffffff;
}

.project-card:hover {
transform: scale(1.02);
box-shadow: 0 0 20px rgba(179, 0, 59, 0.5);
}

.project-card i {
font-size: 2rem;
color: #b3003b;
margin-bottom: 10px;
}

.project-card h3 {
color: #ffffff;
}

/* ===========================
  REVIEW BUTTON
  =========================== */
.review-btn {
margin-top: 10px;
background-color: #d4a5f9;
color: #fff;
border: none;
padding: 10px 18px;
border-radius: 8px;
font-family: "Poppins", sans-serif;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
display: inline-block;
}

.review-btn:hover {
background-color: #b77de6;
}

/* ===========================
  DARK MODE
  =========================== */
.dark-mode {
background: #0b0b0b;
color: #ffffff;
}

.dark-mode #about,
.dark-mode #contact,
.dark-mode #portfolio,
.dark-mode .project-card {
background-color: #121212;
border: 1px solid #9b4dff;
color: #ffffff;
}

.dark-mode button {
background-color: #9b4dff;
color: #ffffff;
}

.dark-mode button:hover {
background-color: #b3003b;
}

/* ===========================
  SCROLL ANIMATIONS
  =========================== */
.hidden {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  opacity: 1 !important;    /* make visible immediately */
  transform: translateY(0) !important; /* reset transform */
  transition: none !important; /* remove animation temporarily */
}

.show {
opacity: 1;
transform: translateY(0);
}

/* ===========================
  RESPONSIVE LAYOUT
  =========================== */
@media (min-width: 768px) {
.projects {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.project-card {
flex: 1 1 250px;
max-width: 300px;
}
}

/* ===========================
  FOOTER
  =========================== */
footer {
margin-top: 40px;
padding: 20px;
background-color: #0b0b0b;
color: #ffffff;
font-size: 0.9rem;
}

.social-icons {
margin-top: 10px;
}

.social-icons a {
color: #b3003b;
margin: 0 10px;
font-size: 1.8rem;
text-decoration: none;
transition: color 0.3s ease;
}

.social-icons a:hover {
color: #9b4dff;
}

.service-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
border: 3px solid #b3003b;
box-shadow: 0 0 8px rgba(179, 0, 59, 0.4);
}

/* ===========================
  GALLERY PAGE (REVIEW)
  =========================== */
.container {
max-width: 1100px;
margin: 30px auto;
padding: 0 16px;
}

.gallery-intro {
text-align: left;
margin-bottom: 18px;
}

.back-link {
display: inline-block;
margin-top: 8px;
color: #ffffff;
text-decoration: none;
font-weight: 600;
background: rgba(179,0,59,0.12);
padding: 6px 10px;
border-radius: 8px;
}

.nail-gallery {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 18px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.gallery-card {
background: rgba(0,0,0,0.45);
padding: 14px;
border-radius: 10px;
text-align: center;
border: 1px solid rgba(155,77,255,0.18);
}

.gallery-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
display: block;
}

/* image button makes image accessible/clickable */
.img-btn {
border: none;
background: none;
padding: 0;
width: 100%;
cursor: pointer;
}

/* titles & captions */
.gallery-card h3 { margin: 10px 0 6px; color: #fff; }
.gallery-card p { font-size: 0.95rem; color: #ddd; margin: 0; }

/* Lightbox */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
justify-content: center;
align-items: center;
z-index: 9999;
padding: 20px;
flex-direction: column;
}
.lightbox img { max-width: 90%; max-height: 70vh; border-radius: 8px; margin-bottom: 10px; }
.lightbox p { color: #fff; margin: 0; }
.lb-close {
position: absolute;
top: 18px;
right: 18px;
background: transparent;
color: #fff;
border: none;
font-size: 1.6rem;
cursor: pointer;
}

/* responsive grid */
@media (min-width: 640px) {
.nail-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.nail-gallery { grid-template-columns: repeat(3, 1fr); }
}