/*
Theme Name: AERINlina
Theme URI: https://yourdomain.com
Author: AERINlina
Description: A bold pink-purple photography portfolio theme.
Version: 1.0
*/

:root {
  --p1: #ff6ec7;
  --p2: #c94fff;
  --p3: #7b2fff;
  --p4: #ff9ef5;
  --bg: #0d0010;
  --mid: #160020;
  --card: #1a0028;
  --text: #fce9ff;
  --muted: #b08ec0;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:'Helvetica Neue',Arial,sans-serif; }

nav {
  position:fixed; top:0; width:100%; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 2.5rem;
  background:rgba(13,0,16,.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,79,255,.12);
}
.logo {
  font-size:1.3rem; font-weight:900; letter-spacing:-.5px;
  background:linear-gradient(90deg,var(--p1),var(--p2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-decoration:none;
}
.logo span { font-weight:300; opacity:.7; }
.nav-links { display:flex; gap:2rem; }
.nav-links a {
  color:var(--muted); text-decoration:none; font-size:.85rem;
  letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  transition:color .2s;
}
.nav-links a:hover { color:var(--p1); }

.hero {
  min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:6rem 2rem 4rem; position:relative; overflow:hidden;
  background:radial-gradient(ellipse at 30% 50%,rgba(201,79,255,.18) 0%,transparent 60%),
             radial-gradient(ellipse at 70% 40%,rgba(255,110,199,.12) 0%,transparent 55%),
             var(--bg);
}
.hero-tag {
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  font-weight:700; color:var(--p1); margin-bottom:1.2rem;
  display:flex; align-items:center; gap:.6rem;
}
.hero-tag::before,.hero-tag::after {
  content:''; display:inline-block; width:30px; height:1px;
  background:var(--p1); opacity:.5;
}
.hero h1 {
  font-size:clamp(3.5rem,10vw,8rem); font-weight:900;
  line-height:.95; letter-spacing:-3px; margin-bottom:1.5rem;
}
.hero h1 .line1 {
  display:block;
  background:linear-gradient(135deg,var(--p4),var(--p1));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero h1 .line2 {
  display:block;
  background:linear-gradient(135deg,var(--p2),var(--p3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p { font-size:1rem; color:var(--muted); max-width:420px; line-height:1.7; margin-bottom:2.5rem; }
.btn {
  display:inline-block; padding:.9rem 2.4rem; border-radius:50px;
  font-weight:800; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; background:linear-gradient(135deg,var(--p1),var(--p2),var(--p3));
  color:#fff; box-shadow:0 0 30px rgba(201,79,255,.4); transition:transform .2s,box-shadow .2s;
}
.btn:hover { transform:translateY(-3px); box-shadow:0 0 50px rgba(201,79,255,.6); }

.section-header { text-align:center; padding:5rem 2rem 2.5rem; }
.section-header .tag {
  display:inline-block; font-size:.7rem; letter-spacing:.3em;
  text-transform:uppercase; font-weight:700; color:var(--p1); margin-bottom:.8rem;
}
.section-header h2 {
  font-size:clamp(2rem,5vw,3.2rem); font-weight:900; letter-spacing:-1px;
  background:linear-gradient(135deg,var(--text),var(--p4));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.divider { width:50px; height:3px; margin:1rem auto 0; background:linear-gradient(90deg,var(--p1),var(--p3)); border-radius:2px; }

.filters { display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem; padding:0 2rem 2.5rem; }
.filter-btn {
  padding:.45rem 1.3rem; border-radius:50px; font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  border:1px solid rgba(201,79,255,.25); background:transparent; color:var(--muted);
  transition:all .2s;
}
.filter-btn:hover,.filter-btn.active {
  background:linear-gradient(135deg,var(--p1),var(--p3));
  border-color:transparent; color:#fff; box-shadow:0 0 20px rgba(201,79,255,.35);
}

.gallery-wrap { padding:0 1.5rem 4rem; max-width:1400px; margin:0 auto; }
.masonry { columns:3; column-gap:1rem; }
@media(max-width:900px){ .masonry{ columns:2; } }
@media(max-width:540px){ .masonry{ columns:1; } }

.photo-card {
  break-inside:avoid; margin-bottom:1rem; position:relative;
  overflow:hidden; border-radius:14px; cursor:pointer; background:var(--card);
  border:1px solid rgba(201,79,255,.1); transition:border-color .3s,box-shadow .3s;
}
.photo-card:hover { border-color:rgba(201,79,255,.4); box-shadow:0 0 30px rgba(201,79,255,.2); }
.photo-card img { width:100%; display:block; border-radius:14px; transition:transform .4s; }
.photo-card:hover img { transform:scale(1.04); }
.photo-card .overlay {
  position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(to top,rgba(13,0,16,.85) 0%,transparent 55%);
  opacity:0; transition:opacity .3s; display:flex; align-items:flex-end; padding:1.2rem;
}
.photo-card:hover .overlay { opacity:1; }
.overlay-text { font-size:.85rem; font-weight:700; color:#fff; }
.overlay-cat { font-size:.65rem; color:var(--p1); text-transform:uppercase; letter-spacing:.12em; display:block; margin-bottom:.2rem; }

.about { background:var(--mid); padding:5rem 2rem; }
.about-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media(max-width:700px){ .about-inner{ grid-template-columns:1fr; } }
.about-img-wrap { position:relative; }
.about-img-wrap::before {
  content:''; position:absolute; inset:-10px; border-radius:18px;
  background:linear-gradient(135deg,var(--p1),var(--p2),var(--p3));
  z-index:0; opacity:.6; filter:blur(2px);
}
.about-img-wrap img { position:relative; z-index:1; width:100%; border-radius:14px; display:block; aspect-ratio:4/5; object-fit:cover; }
.about-text .tag { font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--p1); }
.about-text h2 {
  font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-1px; margin:.6rem 0 1.2rem;
  background:linear-gradient(135deg,var(--text),var(--p4));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.about-text p { color:var(--muted); line-height:1.8; margin-bottom:1rem; }
.about-stats { display:flex; gap:2rem; margin-top:2rem; flex-wrap:wrap; }
.stat .num { font-size:2.2rem; font-weight:900; background:linear-gradient(135deg,var(--p1),var(--p2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat .label { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }

.lightbox { display:none; position:fixed; inset:0; z-index:999; background:rgba(13,0,16,.95); justify-content:center; align-items:center; padding:2rem; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:85vh; border-radius:14px; box-shadow:0 0 80px rgba(201,79,255,.3); }
.lb-close {
  position:fixed; top:1.5rem; right:1.5rem; font-size:1.2rem; color:#fff; cursor:pointer;
  background:rgba(201,79,255,.2); border:1px solid rgba(201,79,255,.3);
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .2s; font-weight:700;
}
.lb-close:hover { background:var(--p2); border-color:var(--p2); }
.lb-caption { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); color:var(--muted); font-size:.85rem; }

footer { text-align:center; padding:3rem 2rem; color:var(--muted); font-size:.8rem; border-top:1px solid rgba(201,79,255,.1); }
.footer-logo { font-size:1.4rem; font-weight:900; margin-bottom:.5rem; background:linear-gradient(90deg,var(--p1),var(--p2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:block; }
.socials { display:flex; justify-content:center; gap:1.5rem; margin-bottom:1rem; }
.socials a { color:var(--muted); text-decoration:none; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
.socials a:hover { color:var(--p1); }