/* styles.css - NashvilleHamby.com
   Dark modern + gothic accents. Keep this file in the same folder as index.php.
*/

/* Basic reset and variables */
:root{
  --bg:#0c0b0e;
  --panel:#0f0e12;
  --muted:#9a9aa0;
  --accent-deep:#4b1530;   /* deep red/gothic */
  --accent-plum:#312033;   /* dark plum */
  --accent-yellow:#e4c84a; /* subtle yellow for MCG nods */
  --glass: rgba(255,255,255,0.03);
  --text:#ececef;
  --soft:#bdbcc2;
  --radius:12px;
  --transition:300ms cubic-bezier(.2,.9,.3,1);
  font-synthesis: none;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, var(--bg), #0a0910 120%);
  color:var(--text);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* ===============================
   BACKGROUND LAYER (Parallax Sync)
   =============================== */

#bg-layer {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(75,21,48,0.18) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(49,32,51,0.2) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(228,200,74,0.05) 0%, transparent 60%),
              #0b090d;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  animation: drift 40s linear infinite;
  transition: background-position 1.2s ease, filter 1.2s ease;
  z-index: -2;
}

#bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('assets/noise-texture.png');
  background-size: cover;
  opacity: 0.07;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes drift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Landing */
.landing{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(10,8,12,0.95), rgba(6,4,8,0.95));
  z-index:1200;
  transition:opacity var(--transition), transform var(--transition);
}
.landing-inner{
  text-align:center; padding:48px; max-width:880px;
}
.name{
  font-family: 'Cinzel', serif;
  font-weight:700;
  font-size:48px;
  margin:0;
  letter-spacing:0.04em;
  text-shadow: 0 6px 20px rgba(0,0,0,0.6);
  color:var(--text);
}
.subtitle{
  font-family: 'Cinzel', serif;
  font-size:18px; margin:8px 0 6px; color:var(--soft);
}
.tagline{margin:12px 0 20px; color:var(--muted)}
.enter-btn{
  background:linear-gradient(90deg,var(--accent-plum),var(--accent-deep));
  border:0; color:#fff; padding:12px 22px; border-radius:999px;
  cursor:pointer; font-weight:600; letter-spacing:0.02em;
  box-shadow: 0 8px 30px rgba(75,21,48,0.25);
  transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.enter-btn:hover{transform:translateY(-3px); box-shadow: 0 16px 40px rgba(75,21,48,0.32)}
.hint{opacity:0.6; margin-top:14px; font-size:13px; color:var(--muted)}

/* Hide landing when .entered is added by JS */
body.entered .landing{opacity:0; pointer-events:none; transform:scale(.995); visibility:hidden}

/* Navigation */
.site-nav{
  position:sticky; top:20px; z-index:1000; display:flex; justify-content:center;
  padding:10px 20px; backdrop-filter: blur(6px);
}
.nav-inner{width:100%; max-width:1100px; display:flex; align-items:center; justify-content:space-between;}
.nav-brand{color:var(--text); text-decoration:none; font-weight:600; font-size:16px; font-family:'Cinzel',serif}
.nav-links{list-style:none; margin:0; padding:0; display:flex; gap:12px; align-items:center}
.nav-links a{color:var(--soft); text-decoration:none; padding:6px 10px; border-radius:8px; transition:background var(--transition)}
.nav-links a:hover{background:var(--glass); color:var(--text)}

/* Panels */
.panel{padding:64px 20px}
.container{max-width:1100px;margin:0 auto}

/* Headings */
.panel-title{
  font-family:'Cinzel',serif; margin:0 0 12px; font-size:24px; color:var(--text)
}
.lead{color:var(--soft); margin-bottom:18px}

/* Intro grid */
.intro-grid{display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start}
.photo-wrap{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0.02)); padding:8px; border-radius:10px; display:flex; justify-content:center; align-items:center}
.photo-wrap img{width:100%; height:auto; border-radius:8px; display:block; max-width:300px; object-fit:cover}
.intro-aside .meta{margin:10px 0}

/* Projects */
.projects-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:18px}
.project-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); padding:16px; border-radius:10px; transition:transform var(--transition), box-shadow var(--transition)}
.project-card:hover{transform:translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.6)}
.project-head h4{margin:0 0 4px}
.proj-sub{display:block; color:var(--muted); font-size:13px; margin-bottom:8px}
.proj-blurb{color:var(--soft)}
.proj-actions{margin-top:12px}
.btn{display:inline-block; padding:8px 12px; border-radius:8px; background:linear-gradient(90deg,var(--accent-plum),var(--accent-deep)); color:#fff; text-decoration:none; font-weight:600; transition:transform var(--transition)}
.btn.outline{background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--soft)}
.btn:hover{transform:translateY(-3px)}

/* Cards, grid utility */
.card{background:var(--panel); border-radius:12px; padding:18px; box-shadow: 0 8px 30px rgba(0,0,0,0.45)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* testimonial */
.testimonial blockquote{border-left:4px solid var(--accent-deep); padding-left:14px; color:var(--soft); margin:14px 0}
.testimonial cite{display:block; margin-top:10px; color:var(--muted); font-size:14px}

/* past roles */
.past-roles ul{list-style:disc; padding-left:20px; color:var(--soft)}
.closing-para h5{margin-top:18px}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{margin:8px 0}
.small{font-size:13px}
.muted{color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .intro-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav-inner{justify-content:space-between}
}

/* subtle focus styles for accessibility */
a:focus, button:focus{outline:2px solid rgba(228,200,74,0.18); outline-offset:3px; box-shadow:0 6px 20px rgba(75,21,48,0.12)}

/* Konami toast */
.egg-toast{
  position:fixed; right:20px; top:22px; padding:12px 18px; background:linear-gradient(90deg,var(--accent-deep),var(--accent-plum)); color:#fff;
  border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,0.6); opacity:0; transform:translateY(-8px);
  transition:opacity 300ms ease, transform 300ms ease; z-index:2000; font-weight:600;
}
.egg-toast.visible{opacity:1; transform:translateY(0)}

/* ===============================
   SECTION TRANSITION ANIMATIONS
   =============================== */

body.entered {
  overflow: hidden; /* disable default scroll */
}

.panel {
  position: fixed;
  inset: 0;
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  overflow-y: auto;
  pointer-events: none;
  z-index: 0;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Active section visible */
.panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 1;
}

/* Slide directions for transition */
.panel.from-below {
  transform: translateY(60px);
}
.panel.from-above {
  transform: translateY(-60px);
}
.panel.slide-up {
  transform: translateY(-60px);
  opacity: 0;
}
.panel.slide-down {
  transform: translateY(60px);
  opacity: 0;
}

/* smoother container scroll inside panels */
.panel .container {
  scroll-behavior: smooth;
}

/* ===============================
   FOOTER FIX — pinned to bottom
   =============================== */

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(12,10,14,0.8) 0%, rgba(8,6,10,0.95) 100%);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.05);
  color: var(--muted);
  padding: 14px 20px;
  text-align: center;
  z-index: 2000;
}

.site-footer .footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.site-footer .social-inline a {
  margin: 0 6px;
  color: var(--soft);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition);
}
.site-footer .social-inline a:hover {
  color: var(--accent-yellow);
}

.site-footer .backtop a {
  font-size: 13px;
  color: var(--accent-plum);
  text-decoration: none;
}