/* Mike's Estate Manicure — Dark Green Animated Theme (2025) */

:root{
  --bg:#0b1f1a;
  --panel:#0f2b23;
  --deep:#0b3d2e;
  --green:#146a46;
  --mint:#21a67a;
  --text:#e7f3ee;
  --muted:#9fb7ae;
  --stroke:rgba(255,255,255,.07);
  --shadow: 0 12px 34px rgba(0,0,0,.35);
  --radius:16px;
  --max:1200px;
  --blur:12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text); background:
  radial-gradient(1200px 800px at 80% -10%, #14423522, transparent 60%),
  radial-gradient(900px 600px at -10% 110%, #0f3a2b22, transparent 50%),
  var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:var(--max); margin:0 auto; padding:28px}

/* ===== NAVIGATION ===== */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(var(--blur));
  background: linear-gradient(180deg, rgba(11,31,26,.75), rgba(11,31,26,.45));
  border-bottom:1px solid var(--stroke);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--text)}
.logo{
  width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(180deg, var(--mint), var(--green));
  color:#052019; font-weight:900; box-shadow:var(--shadow)
}
.navlinks{display:flex; gap:8px; align-items:center}
.navlinks a{
  color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:12px;
  border:1px solid transparent; font-weight:600;
}
.navlinks a:hover{color:var(--text); border-color:var(--stroke); background:rgba(255,255,255,.03)}
.navlinks a.active{color:#fff; background:linear-gradient(180deg,#155f44,#114b37); border-color:transparent}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  height: 85vh;
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.55) contrast(1.1);
  opacity: 0;
  animation: fadeIn 1.5s ease forwards;
}

.hero h1, .hero .tagline, .hero .cta {
  position: relative;
  z-index: 2;
  animation: fadeInUp 1.5s ease forwards;
}

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes fadeInUp {
  0% { opacity:0; transform:translateY(30px); }
  100% { opacity:1; transform:translateY(0); }
}

/* ===== SECTIONS ===== */
.section{
  margin:36px 0; padding:22px;
  background:linear-gradient(180deg, rgba(18,50,40,.65), rgba(18,50,40,.45));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--stroke);
}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{padding:16px; background:rgba(6,20,16,.6); border-radius:14px; border:1px solid var(--stroke); box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease;}
.card:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 16px 42px rgba(0,0,0,.28);}

.cta{
  background:linear-gradient(180deg,#188f63,#0f6a49);
  color:#eafff6; border:1px solid #0e5c40;
  padding:12px 18px; border-radius:12px; font-weight:800;
  cursor:pointer; box-shadow:var(--shadow); text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.cta:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.28);}
.cta:active{transform:translateY(0) scale(.98);}

input,textarea,select{
  width:100%; padding:10px 12px; border:1px solid var(--stroke);
  border-radius:10px; font-size:15px; margin-top:8px;
  color:var(--text); background:#0d221c;
}
label{display:block; margin:8px 0}

/* ===== FOOTER ===== */
.footer{margin-top:36px; padding:28px 0; color:var(--muted); font-size:14px; text-align:center; border-top:1px solid var(--stroke)}

/* ===== MOBILE NAV ===== */
@media (max-width:900px){.navlinks{display:none}.mobile-nav{display:block}}
.mobile-nav{display:none}

/* ===== GALLERY GRID ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.gallery-grid img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.gallery-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* ===== SERVICE IMAGES ===== */
.service-img {
  width: 100%;
  height: 230px;
  border-radius: 12px;
  margin-top: 10px;
  object-fit: cover;
  box-shadow: var(--shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.service-img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}

/* ===== LIGHTBOX (PORTFOLIO) ===== */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:80}
.lb-overlay img{max-width:92vw;max-height:88vh;border-radius:16px;box-shadow:var(--shadow)}
.lb-overlay.show{display:flex}

/* ===== ANIMATIONS & SCROLL REVEAL ===== */
[data-animate] { opacity: 0; will-change: transform, opacity; }
[data-animate].reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

[data-animate].pre.fade-up    { transform: translateY(24px); }
[data-animate].pre.fade-in    { transform: scale(.98); }
[data-animate].pre.slide-left { transform: translateX(28px); }
[data-animate].pre.slide-right{ transform: translateX(-28px); }
[data-animate].pre.zoom-in    { transform: scale(.92); }
[data-animate].pre.pop        { transform: scale(.96); }

.stagger > * { opacity: 0; transform: translateY(18px); }
.stagger.reveal > * { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
.stagger.reveal > *:nth-child(1){ transition-delay: .02s }
.stagger.reveal > *:nth-child(2){ transition-delay: .08s }
.stagger.reveal > *:nth-child(3){ transition-delay: .14s }
.stagger.reveal > *:nth-child(4){ transition-delay: .20s }
.stagger.reveal > *:nth-child(5){ transition-delay: .26s }
.stagger.reveal > *:nth-child(6){ transition-delay: .32s }

.navlinks a.active { position: relative; }
.navlinks a.active::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background: linear-gradient(90deg, transparent, var(--mint), transparent);
  filter: blur(.5px); opacity:.9; animation: shine 2.2s linear infinite;
}
@keyframes shine {0%{transform:translateX(-30%)}100%{transform:translateX(30%)}}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  .hero h1{font-size:2.2rem}
  .cta{padding:10px 16px}
  .service-img{height:200px}
}
/* =========================================================
   EXTRA ANIMATIONS & INTERACTIONS (paste at file bottom)
   ========================================================= */

/* --- New scroll-triggered variants (work with data-animate) --- */
[data-animate].pre.fade-down   { transform: translateY(-24px); }
[data-animate].pre.rotate-in   { transform: rotate(-5deg) scale(0.95); transform-origin:center; }
[data-animate].pre.scale-up    { transform: scale(0.85); }
[data-animate].pre.blur-in     { filter: blur(10px); opacity:0; }
[data-animate].reveal.blur-in  { filter: blur(0); opacity:1; transition: filter .8s ease, opacity .8s ease; }

/* Optional: softer timing for rotate/scale when revealing */
[data-animate].reveal.rotate-in,
[data-animate].reveal.scale-up { transition: opacity .7s ease, transform .7s ease; }

/* --- Hover micro-interactions (cards, headings, CTAs) --- */
.card:hover h3 {
  color: var(--mint);
  letter-spacing: .3px;
  transition: color .3s ease, letter-spacing .3s ease;
}
.cta:hover {
  background: linear-gradient(180deg,#1ab975,#139155);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}

/* --- Floating elements (use class="floating" on small decor) --- */
@keyframes float-slow { 
  0%,100% { transform: translateY(0) } 
  50%     { transform: translateY(-8px) } 
}
.floating { animation: float-slow 6s ease-in-out infinite; }

/* --- Page load fade-in --- */
body { opacity: 0; animation: pageFadeIn 1s ease forwards; }
@keyframes pageFadeIn { from { opacity:0 } to { opacity:1 } }

/* --- Hero scroll indicator (add <div class="scroll-indicator">▼</div>) --- */
.scroll-indicator {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 22px; color: var(--mint); opacity: .9; pointer-events: none;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,100% { transform: translate(-50%, 0) }
  50%     { transform: translate(-50%, 8px) }
}

/* --- Optional stagger helpers (longer sequences) --- */
.stagger.reveal > *:nth-child(7){  transition-delay: .38s }
.stagger.reveal > *:nth-child(8){  transition-delay: .44s }
.stagger.reveal > *:nth-child(9){  transition-delay: .50s }
.stagger.reveal > *:nth-child(10){ transition-delay: .56s }

/* --- Accessibility: reduce motion respects existing rule; keep additions safe --- */
@media (prefers-reduced-motion: reduce) {
  .floating, .scroll-indicator { animation: none !important; }
  body { animation: none !important; opacity: 1 !important; }
}
/* Coming Soon badges */
.coming-soon {
  position: relative;
  opacity: 0.8;
}
.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #e4b82d;
  color: #051c13;
  padding: 5px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow);
}
/* === Layout helpers for non-overlapping CTAs === */
.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.teaser-grid{ gap:22px; margin-bottom:12px; }  /* Adds space below cards */

/* Ghost button (outline style) */
.cta.ghost{
  background:transparent;
  border:1px solid var(--stroke);
  color: var(--text);
}

/* Yellow link style for content links (not nav/buttons) */
:root { --accent-yellow:#f6d74a; }
main a.link-yellow,
.section a.link-yellow,
.footer a.link-yellow {
  color: var(--accent-yellow);
  text-decoration:none;
  font-weight:700;
}
main a.link-yellow:hover,
.section a.link-yellow:hover,
.footer a.link-yellow:hover { opacity:.9; text-decoration:underline; }
/* === Fix blue links sitewide to match theme === */
a, a:visited {
  color: var(--accent-yellow);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: #f9e76a; /* lighter yellow hover */
  text-decoration: underline;
}