/*
Theme Name: Baddy Media
Theme URI: https://example.com
Author: Baddy Media
Author URI: https://example.com
Description: Custom theme converted from the Baddy Yellow & Black static website.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: baddy-media
*/


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@600&display=swap&subset=cyrillic');

.about-card .about-img {
  object-fit: cover;
  object-position: center 0%; /* shift image up by 20% */
  aspect-ratio: 1/1;
  height: auto;
  display: block;
}
/* Theme variables: white / yellow / black */
:root{
  --bg: rgba(255,255,255,0.98); /* slightly translucent page white */
  --accent: #ffd400;
  --accent-2: #e6b800;
  --text: #0b0b0b;
  --muted: #666666;
  --card-bg: rgba(255,255,255,0.92); /* subtle translucent card background */
}

/* Hero animation variables — tweak these to adjust overlay baseline and float behavior */
:root{
  --hero-overlay-offset: -160px;    /* baseline offset for the overlay (negative moves up) */
  --hero-float-amplitude: 15px;    /* additional amplitude applied above baseline */
  --hero-float-duration: 5s;       /* animation duration */
  --hero-float-easing: cubic-bezier(.2,.9,.2,1); /* easing for float */
}
/* About page enhancements */
.about-card {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  background: linear-gradient(180deg, var(--card-bg), rgba(255,255,255,0.95));
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(11,11,11,0.06);
  padding: 2rem 1.6rem;
  margin-bottom: 2rem;
  position: relative;
}
.about-card .left-col {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  width: auto;
}
.about-card .left-col .fun-facts { width: 100%; max-width: 440px; }
.about-card .about-img {
  flex-shrink: 0;
  width: clamp(180px, 19vw, 280px); /* reduced to roughly half the previous visual size */
  max-width: 34vw;
  border-radius: 50%;
  margin: 0 1.5rem 1rem 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .3s;
}
.about-card .about-img:hover {
  transform: scale(1.04) rotate(-2deg);
}
.about-card .text {
  flex: 1 1 320px;
  min-width: 260px;
}
.about-card .fun-facts {
  margin-top: 2rem;
  background: rgba(255,212,0,0.07);
  border-radius: 18px;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 2px 12px rgba(255,212,0,0.06);
  animation: fadeInUp 1s;
}

/* Avatar framed card */
.avatar-card{display:flex;align-items:center;justify-content:center;border-radius:20px;padding:12px;background:linear-gradient(180deg,rgba(255,212,0,0.06),rgba(255,212,0,0.03));border:1px solid rgba(255,212,0,0.12);box-shadow:0 6px 20px rgba(0,0,0,0.06)}
.avatar-card .about-img{width:clamp(160px,18vw,260px);height:clamp(160px,18vw,260px);border-radius:50%;display:block}

/* Compact stat list */
.stat-list{display:flex;flex-direction:column;gap:.5rem;padding:0;margin:0;list-style:none}
.stat-list li{font-size:1rem;color:var(--muted);display:flex;gap:.5rem;align-items:baseline}
.stat-list li strong{color:var(--accent-dark);font-size:1.05rem;margin-right:.35rem}

/* About CTA */
.about-cta{margin-top:1.25rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.about-cta .cta-text{margin:0;color:var(--muted)}
.btn-primary{display:inline-block;padding:0.8rem 1.2rem;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-dark));color:#000;font-weight:700;text-decoration:none;transition:transform .18s,box-shadow .18s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,212,0,0.18)}

/* Eyebrow and heading hierarchy */
.about-header{width:100%;margin-bottom:1rem}
.about-header .eyebrow{font-size:0.85rem;font-weight:600;color:var(--accent-dark);letter-spacing:0.6px;text-transform:uppercase;margin-bottom:0.25rem}
.about-header h1{font-size:1.6rem;margin:0;color:var(--text);line-height:1.15}

/* Lead paragraph for stronger visual hierarchy */
.lead{font-size:1.12rem;font-weight:700;color:var(--text);margin-bottom:0.9rem;line-height:1.45}

/* Optional visual treatments for the lead paragraph
   Uncomment the snippets you want to try. They are intentionally small, additive
   changes so you can enable one or combine two safely.
*/

/* 1) Drop-cap removed — keep first-letter styling here if you want to re-enable later */
/* .lead::first-letter { removed } */

/* 2) Subtle gradient text for the lead */
/*
.lead{background:linear-gradient(90deg,var(--accent-dark),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
*/

/* 3) Highlight band behind the lead (works well on light backgrounds) */
/*
.lead{position:relative;padding:.25rem .45rem;border-radius:8px;background:linear-gradient(90deg, rgba(255,212,0,0.08), rgba(255,212,0,0.03))}
*/

/* 4) Reveal animation: fade + slide up (enabled) */
.lead{opacity:0;transform:translateY(8px);transition:opacity .55s cubic-bezier(.2,.9,.2,1), transform .55s cubic-bezier(.2,.9,.2,1)}
.about-card .lead.visible, .lead.visible{opacity:1;transform:none}

/* 5) First-line emphasis (larger first line) */
/*
.lead::first-line{font-size:1.18rem;font-weight:700}
*/

/* 6) Soft text shadow for extra depth + reveal state (controlled by JS) */
.lead{
    /* Editorial serif: Playfair Display for the lead (serif headline feel) */
    font-family: 'Playfair Display', serif;
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.6;
  color: var(--text);
  max-width: 70ch; /* comfortable measure for long copy */
  margin-bottom: 1rem;
  text-rendering: optimizeLegibility;
  text-shadow: 0 2px 10px rgba(0,0,0,0.03);
  /* reveal defaults (kept) */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s cubic-bezier(.2,.9,.2,1), transform .45s cubic-bezier(.2,.9,.2,1);
    transition-delay: var(--delay, 0ms);
}

  .lead.visible{opacity:1;transform:none}

/* Reveal for all direct paragraphs inside .text (excludes CTA which is inside .about-cta) */
.text > p{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s cubic-bezier(.2,.9,.2,1), transform .45s cubic-bezier(.2,.9,.2,1);
  transition-delay: var(--delay, 0ms);
}
.text > p.visible{ opacity: 1; transform: none; }

/* Readability baseline (must-have): controlled measure and looser leading */
.text, .text p, .lead {
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}
.text p, .text > p { max-width: 66ch; margin-left: 0; margin-right: 0; line-height: 1.7; color: var(--text); }
.lead { max-width: 72ch; line-height: 1.8; margin-bottom: 1.25rem; }

/* Soft accent band (brand-friendly, non-invasive) */
.text > p::before{
  content: "";
  display: block;
  position: absolute;
}
.text { position: relative; }
.text > p{ position: relative; padding-left: 1rem; }
.text > p::before{
  left: 0;
  top: 0.4rem;
  width: 4px;
  height: calc(100% - 0.8rem);
  background: linear-gradient(180deg, rgba(255,212,0,0.18), rgba(230,178,0,0.12));
  border-radius: 2px;
  content: "";
  position: absolute;
  transform-origin: left top;
  opacity: 0.95;
}

@media (max-width:900px){
  .text > p::before{ display:none; }
  .text p, .lead { max-width: 58ch; }
}

/* Pull-quote highlight (use with the anecdote) */
.pull-quote {
  display: block;
  margin: 1.25rem 0;
  padding: 0.8rem 1rem;
  font-size: 1.18rem;
  font-weight: 700;
  font-style: italic;
  color: var(--text);
  background: linear-gradient(90deg, rgba(230,178,0,0.12), rgba(255,212,0,0.06));
  border-left: 6px solid rgba(230,178,0,0.28);
  border-radius: 6px;
}
.pull-quote.inline { display: inline-block; background: transparent; border-left: 0; padding: 0 0.25rem; font-weight:700; color: var(--accent-dark); }

/* Micro-typography: optical tuning and small polish */
body, p, li { font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; -moz-font-feature-settings: "liga" 1; text-wrap: balance; }
/* fallback for browsers that don't support text-wrap */
@supports not (text-wrap: balance){
  body, p, li { text-wrap: normal; }
}


/* prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce){
  .lead, .lead.visible{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* 7) Hover microinteraction: slight lift */
/*
.lead:hover{transform:translateY(-3px);transition:transform .18s}
*/

/* Stat icon styling */
.stat-icon{display:inline-block;vertical-align:middle;margin-right:8px;color:var(--accent-dark);flex:0 0 18px}
.stat-list li{display:flex;align-items:center;gap:.5rem}

/* Mobile sticky CTA: appears as a bottom bar on small screens */
@media (max-width:600px){
  .about-cta{position:fixed;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,0.97);padding:12px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.12);flex-direction:row;align-items:center;justify-content:space-between;z-index:11000}
  .about-cta .cta-text{display:none} /* keep it compact on mobile */
  .about-cta .btn-primary{padding:0.9rem 1rem;border-radius:10px}
  /* Make sure the section has extra bottom padding so content isn't hidden */
  section.about { padding-bottom: 6.5rem; }
}

@media (max-width:700px){
  .lead{font-size:1rem;max-width:58ch}
}

/* Hybrid option: serif for first line, sans for the rest
.lead{ font-family: Inter, system-ui, Arial, sans-serif; }
.lead::first-line{ font-family: 'Playfair Display', serif; font-size:1.22rem; font-weight:700 }
*/

.about-card .fun-facts h3 {
  margin-bottom: 0.7rem;
  font-size: 1.2rem;
  color: #b37f00; /* dark yellow */
  font-family: 'Playfair Display', serif;
}
.about-card .fun-facts ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
}
.about-card .fun-facts li {
  font-size: 1.08rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6a4a00; /* muted brownish yellow */
  font-weight: 500;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .about-card { flex-direction: column; align-items: center; padding: 1.2rem 0.5rem; }
  .about-card .about-img { margin: 0 0 1.5rem 0; max-width: 70vw; }
  .about-card .text { min-width: 0; }
}

/* Achievements logo grid: ensures all logos are visually consistent */
.achievements-logos{
  list-style: none; /* remove bullets */
  margin-top:0.75rem;
  padding: 0;
  display:block;
}
.fun-facts .achievements-logos{
  /* Specific override: .fun-facts ul uses flex elsewhere; ensure this UL stacks vertically */
  display: block !important;
  padding-left: 0 !important;
}
.achievements-logos li{
  margin:0.6rem 0;
  display:block; /* force each item to its own row */
  text-align:center; /* center the image */
}
.achievements-logos img{
  max-height:80px; /* slightly smaller for visual balance */
  height:auto; /* preserve aspect ratio */
  max-width:320px; /* prevent overly wide logos */
  width:auto;
  display:block;
  object-fit:contain;
  margin: 0 auto; /* center each image */
}
@media (max-width:420px){
  .achievements-logos img{ max-height:56px }
}



*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* Layout: use a column flex layout so footer is pushed to the bottom on short pages */
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensure viewport-filling container */
}
h1,h2,h3{font-family:'Playfair Display',serif}
a{text-decoration:none;color:inherit}

:root{
  /* Theme: white / yellow / black */
  --bg: #ffffff;
  --card-bg: #ffffff;
  --text: #0b0b0b;
  --muted: #444444;
  --accent: #ffd400; /* yellow */
  --accent-dark: #e6c200;
  --logo-color: #000; /* default logo tint (adjustable) — make visible */
  --glass: rgba(0,0,0,0.06);
}

/* Logo color helper
   Use CSS to control logo color site-wide. Example:
   .dark-mode { --logo-color: #fff; }
   or set directly: :root { --logo-color: #123456 }
*/
.baddy-logo, .page-logo-right { color: var(--logo-color); }

body{
  font-family:'Inter',sans-serif;
  line-height:1.6;
  color:#333;
  /* Background layers: decorative paper and torn edges first, then a centered logo layer (low opacity) */
  background-image: url('../images/nyolistyle.png'), url('../images/torn-up.png'), url('../images/torn-down.png'), url('../images/paper.jpg');
  background-position: center top, center top, center bottom, center;
  background-size: cover, 100% 120px, 100% 120px, cover;
  background-repeat: no-repeat, repeat-y, repeat-y, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
  opacity:1;
  transition:opacity .5s;
  cursor:auto;
}

/* Decorative fixed logo on the right side of the page (non-interactive) */
/* The decorative logo should be a background element (behind content). Keep the DOM node for screen readers but visually hide the fixed overlay so it doesn't sit above interactive content. */
.page-logo-right{
  position: absolute; /* keep in DOM but not fixed on top */
  width: 0 !important; /* collapse visual footprint */
  height: 0 !important;
  overflow: hidden;
  pointer-events: none; /* never block clicks */
  z-index: 0; /* ensure it's behind all page layers */
  opacity: 0; /* visually hidden but remains in accessibility tree */
}

/* Add the PNG logo as a faint centered background layer on the body (behind content) */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  display: block;
  background-image: url('../images/BaddyMedia-logo.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: clamp(140px, 44vw, 420px);
  opacity: 0.15; /* very subtle watermark */
  pointer-events: none;
  z-index: 0; /* behind everything */
}

/* Ensure main content stacks above the decorative background. Give the header/navbar
  a higher stacking order so later page sections don't cover navigation links. */
header { position: relative; z-index: 60; }
.navbar { position: relative; z-index: 70; }
/* Make main take remaining vertical space so footer stays at the bottom */
main { flex: 1 0 auto; }
section { position: relative; z-index: 1; }
footer { position: relative; z-index: 1; }
.section-inner { position: relative; z-index: 1; }

.page-logo-right svg{
  width: 100%;
  height: auto; /* let intrinsic aspect-ratio determine height */
  display: block;
  max-width: none;
  /* modern browsers: preserve aspect ratio reliably */
  aspect-ratio: 2 / 3; /* corresponds to viewBox 1024:1536 */
}

/* Styling for PNG fallback logo when using img element */
.baddy-logo-img{
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
  object-fit: contain;
}

.page-logo-right svg path,
.page-logo-right svg rect,
.page-logo-right svg circle{
  fill: currentColor;
}

/* Force all inlined SVG children to inherit currentColor — this overrides hardcoded fill attributes when SVG is inlined */
.page-logo-right svg * {
  fill: currentColor !important;
  stroke: none !important;
}

/* Fallback: force fill in case an inlined path has an explicit fill attribute (last resort) */
@media (max-width:900px){ .page-logo-right{ display:none; } }

/* On very small screens, scale down or hide the centered logo to avoid obstructing content */
@media (max-width:600px){
  .page-logo-right{ width: clamp(100px, 30vw, 180px); opacity: 0.9; }
}

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

/* Progress */
#progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--accent);z-index:9999;box-shadow:0 0 18px rgba(0,0,0,.08)}

/* Navbar */

.logo{font-weight:800;letter-spacing:.5px}
.logo img.header-logo{height:36px;display:block;object-fit:contain}

/* Responsive logo sizing */

/* Highlights Play/Pause control (positioned inside .project-grid) */
.highlights-controls{
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(230,178,0,0.12);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: 60;
}
.highlights-controls .hp-btn{
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.highlights-controls .hp-btn:hover{ background: rgba(0,0,0,0.06); }
.highlights-controls .hp-indicator{
  font-size: 13px;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 6px;
}
.highlights-controls .hp-spinner{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 6px;
  box-sizing: border-box;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: var(--accent);
  opacity: 0.0;
  transform: scale(.9);
  transition: opacity .18s, transform .18s;
}
.highlights-controls .hp-spinner.running{
  opacity: 1;
  transform: scale(1);
  animation: hp-spin 900ms linear infinite;
}
@keyframes hp-spin{ to { transform: rotate(360deg); } }
.highlights-controls.paused{ box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
.highlights-controls.paused .hp-indicator{ color: #b33; font-weight:700 }

/* Make controls unobtrusive on small screens */
@media (max-width:700px){
  .highlights-controls{ right: 8px; top: 8px; padding: 4px 6px; }
  .highlights-controls .hp-indicator{ display: none; }
}
@media (max-width: 480px) {
  /* Small phones */
  .logo img.header-logo { height: 28px; }
}

@media (min-width: 481px) and (max-width: 900px) {
  /* Small tablets / large phones */
  .logo img.header-logo { height: 32px; }
}

@media (min-width: 1200px) {
  /* Large desktop */
  .logo img.header-logo { height: 44px; }
}
.logo{display:inline-flex;align-items:center;gap:10px}
.nav-links{display:flex;list-style:none;align-items:center}
.nav-links li{margin-left:1rem}
.nav-links a{color:var(--text);font-weight:500;transition:color .18s}
.nav-links a:hover,.nav-links a.active{color:var(--accent);text-decoration:underline}
.menu-toggle{display:none;cursor:pointer}
.social-icons{display:flex;gap:1rem;margin-left:1rem}
.social-icons a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.03);box-shadow:0 4px 8px rgba(0,0,0,0.04);transition:all .18s}
.social-icons a:hover{background:var(--accent);color:#000;transform:scale(1.08)}

/* Hero */

.hero{min-height:calc(100vh - 72px);height:auto;display:flex;justify-content:center;align-items:center;position:relative;text-align:center;color:var(--text);overflow:hidden;background-attachment:fixed;background-size:cover;background-position:center;padding-top:1rem;padding-bottom:1rem;box-sizing:border-box}
.hero .overlay{background:linear-gradient(180deg, rgba(255,212,0,0.06), rgba(255,212,0,0.03));padding:2rem 2.4rem;border-radius:12px;backdrop-filter:blur(4px);animation:float var(--hero-float-duration) var(--hero-float-easing) infinite;box-shadow:0 6px 20px rgba(255,212,0,0.05);max-width:78%;
  /* use CSS variables so overlay baseline and animation are configurable */
  transform: translateY(var(--hero-overlay-offset));
}
.hero h1{font-size:2.2rem;line-height:1.18}
.hero p{font-size:1.05rem;margin-top:.6rem}

/* Hero readability: controlled measure and comfortable leading */
.hero .overlay h1, .hero .overlay p{ max-width: 72ch; margin-left: auto; margin-right: auto; line-height: 1.45; }
@media (max-width:900px){
  .hero{min-height:calc(100vh - 64px);padding-top:0.75rem}
  .hero .overlay{padding:1.2rem 1.4rem}
  .hero .overlay h1{ font-size:1.7rem }
  .hero .overlay p{ font-size:1rem }
}
@media (max-width:480px){
  .hero{min-height:calc(100vh - 56px);padding-top:0.6rem}
  .hero .overlay{padding:1rem 1rem}
  .hero .overlay h1{ font-size:1.4rem }
  .hero .overlay p{ font-size:0.95rem }
}
@keyframes float{0%{transform:translateY(var(--hero-overlay-offset))}50%{transform:translateY(calc(var(--hero-overlay-offset) - var(--hero-float-amplitude)))}100%{transform:translateY(var(--hero-overlay-offset))}}

/* Sections */
section{padding:6rem 2rem 4rem;position:relative}
.section-inner{max-width:1100px;margin:0 auto}

/* Brand section: image left, text right layout */
.brand-row{
  display:flex;
  gap:2rem;
  align-items:center;
}
.brand-image{flex:0 0 44%;max-width:44%;}
.brand-image img{width:100%;height:auto;display:block;object-fit:contain}
.brand-copy{flex:1 1 56%;}

@media (max-width:800px){
  .brand-row{flex-direction:column;}
  .brand-image{max-width:80%;flex-basis:auto;margin:0 auto}
  .brand-copy{width:100%}
}

/* Improve readability for brand copy against busy background */
.brand-copy.text{
  /* warm, subtle yellow tint to match brand palette while preserving readability */
  background: linear-gradient(180deg, rgba(190,150,6,0.40), rgba(190,150,6,0.15));
  padding: 1.6rem 2.6rem;
  border-radius: 14px;
  box-shadow: 0 14px 48px rgba(230,178,0,0.4);
  border: 1px solid rgba(230,178,0,0);
}
.brand-copy.text p{ color: var(--text); line-height:1.85; margin-bottom:1rem }

@media (max-width:900px){
  .brand-copy.text{ padding: 1.1rem 1.2rem; border-radius:12px }
}

/* Gradient headings */
.gradient-text{background: #fff url('../images/paper.jpg') center / cover fixed no-repeat;-webkit-background-clip:text;background-clip:text;color:#0c0c0c;animation:hue 8s linear infinite}
/* Section headings should be plain black for better legibility */
.section-inner > h2.gradient-text { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; color: #000 !important; }
/* Ensure hero headline uses solid black instead of the gradient texture */
.hero .overlay > h1.gradient-text,
.hero .overlay h1.gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #000 !important;
}
@keyframes hue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}

/* Waves */
.wave{position:relative;height:80px;overflow:hidden}
.wave svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:2rem}
.card{position:relative;border-radius:16px;overflow:hidden;background:var(--card-bg);box-shadow:0 8px 24px rgba(0,0,0,0.06);backdrop-filter:blur(4px);border:1px solid rgba(0,0,0,0.06);transition:transform .3s,box-shadow .3s}
.card img{width:100%;display:block;border-radius:16px}
.card::after{content:attr(data-title);position:absolute;bottom:0;left:0;right:0;background:rgba(255,212,0,.9);color:#000;padding:.5rem;text-align:center;opacity:0;transform:translateY(100%);transition:all .4s ease}
.card:hover::after{opacity:1;transform:translateY(0)}
.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 8px 32px rgba(31,38,135,.25)}

/* Service card text */
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop to match projects */
  gap: 2rem;
}

.service{padding:1.6rem;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:360px}
.service h3{margin-bottom:.75rem}
.service p{opacity:.95; line-height:1.7; max-width:56ch}

/* Background images for services (subtle watermark with readable overlay) */
.service:nth-child(1){
  background-image: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.40)), url('../images/work.jpg');
  background-size: cover;
  background-position: center center;
}
.service:nth-child(2){
  background-image: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.40)), url('../images/AIvisuals.webp');
  background-size: cover;
  background-position: center center;
}
.service:nth-child(3){
  background-image: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.40)), url('../images/ugc.jpg');
  background-size: cover;
  background-position: center center;
}
.service:nth-child(4){
  background-image: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.40)), url('../images/mentor.jpg');
  background-size: cover;
  background-position: center center;
}
.service:nth-child(5){
  background-image: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.40)), url('../images/building.jpg');
  background-size: cover;
  background-position: center center;
}

/* Ensure text remains readable over the images: use light text + subtle shadow */
.service h3, .service p { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }

@media (max-width:700px){
  /* On small screens prefer the regular card background for clarity and performance */
  .service{background-image:none;background-color:var(--card-bg)}
}

/* Responsive breakpoints for services to match projects grid behavior */
@media (max-width:1100px){
  .service-grid{grid-template-columns: repeat(2, 1fr);} /* 2 columns on medium */
}
@media (max-width:700px){
  .service-grid{grid-template-columns: 1fr;} /* 1 column on small */
  .service{min-height: auto}
}

/* Contact */
form{max-width:560px;margin:auto;display:flex;flex-direction:column;gap:1rem}
input,textarea{padding:1rem;border:1px solid #ccc;border-radius:8px}
button{padding:1rem;border:none;background:linear-gradient(90deg,var(--accent),var(--accent-dark));color:#000;cursor:pointer;border-radius:8px;font-weight:bold;transition:all .3s}
button:hover{filter:brightness(.95);transform:translateY(-2px)}

/* Footer */
/* single :root with translucent white tokens */

/* Loader removed - spinner and overlay deleted */

/* Hide decorative waves */
.wave{display:none}

/* Particles & Cursor */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.25}
#cursor{display:none !important}
/* Responsive nav */
@media (max-width:768px){.nav-links{display:none;flex-direction:column;position:absolute;top:60px;right:0;background:rgba(255,255,255,.95);width:220px;padding:1rem}.menu-toggle{display:block}.nav-links.active{display:flex}}

/* Page transition */
.fade-out{opacity:0}


/* Contact form styling */
.contact-card {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 20px;
  background: rgba(255,255,255,0.24);
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.contact-card form { display:flex; flex-direction:column; gap:1rem; }
.contact-card input, .contact-card textarea {
  padding:0.8rem;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,0.6);
  outline:none;
}
.contact-card button {
  padding:1rem;
  border:none;
  border-radius:30px;
  background:linear-gradient(135deg,var(--accent),#e6c200);
  color:#000;
  font-weight:bold;
  cursor:pointer;
  transition: all 0.3s;
}
.contact-card button:hover { transform:scale(1.05); box-shadow:0 6px 20px rgba(255,212,0,0.45); }
.error { color:red; font-size:0.8rem; }
.hidden { display:none; }
#formSuccess { color:green; margin-top:1rem; font-weight:600; }
#formError { color:red; margin-top:1rem; font-weight:600; }

/* Tooltip styling */
.social-icons a { position:relative; }
.social-icons a::after {
  content: attr(title);
  position:absolute;
  top:130%;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.75);
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  font-size:0.75rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.social-icons a:hover::after {
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}


/* Pull-quote styling */
.pull-quote {
  display:block;
  margin:2rem auto;
  padding:1rem 1.5rem;
  font-size:1.4rem;
  font-weight:600;
  text-align:center;
  background:linear-gradient(90deg,#e6c200,var(--accent),#fff4b8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-style:italic;
}


/* Project cards: fixed heights so card box doesn't expand with image changes */
.project-grid .card{
  cursor: pointer;
  height: 360px; /* desktop fixed height */
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  display: block;
}
.project-grid .card img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the card area while preserving aspect */
  display: block;
}

/* Also apply to generic .grid used on pages like projects.html */
.grid .card{
  cursor: pointer;
  height: 360px;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  display: block;
}
.grid .card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Poster overlay for video cards (shows static image in the grid) */
.grid .card .video-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.grid .card .video-play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* let click pass to poster */
}

/* Ensure project grid matches service grid (3/2/1 columns) for consistent alignment */
.project-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width:1100px){
  .project-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:700px){
  .project-grid{ grid-template-columns: 1fr; }
  .project-grid .card{ height: 220px; }

  /* Crossfade helpers for dynamic image swapping */
  .cf-wrapper{position:relative;display:block}
  .cf-wrapper img{display:block;width:100%;height:auto;border-radius:16px;transition:opacity .6s ease}
  .cf-fade-out{opacity:0}
  .cf-fade-in{opacity:1}

  /* Generic swap fade for whole card content: opacity + transform + subtle blur for a smoother crossfade */
  .swap-fade{
    transition: opacity .52s cubic-bezier(.2,.9,.2,1), transform .52s cubic-bezier(.2,.9,.2,1), filter .52s ease;
    opacity:1;
    transform: translateY(0) scale(1);
    filter: blur(0px) saturate(1);
  }
  .swap-fade.swap-hidden{
    opacity:0;
    transform: translateY(6px) scale(.99);
    filter: blur(2px) saturate(.96);
  }
}

/* Ensure swap-fade styles are applied on all viewports (not only mobile) */
.swap-fade{
  transition: opacity .52s cubic-bezier(.2,.9,.2,1), transform .52s cubic-bezier(.2,.9,.2,1), filter .52s ease;
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0px) saturate(1);
}
.swap-fade.swap-hidden{
  opacity:0;
  transform: translateY(6px) scale(.99);
  filter: blur(2px) saturate(.96);
}

/* Lightbox / modal: fixed centered overlay that doesn't affect layout */
#lightbox{
  display:none; /* JS toggles this to flex */
  position:fixed;
  inset:0;
  z-index:110000; /* sit above navbar and other content */
  background: rgba(0,0,0,0.6);
  align-items:center;
  justify-content:center;
  padding: 2rem;
}
#lightbox img#lb-img{
  /* Slightly smaller than full-bleed — keep comfortable margins */
  max-width: 70vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  display:block;
  object-fit:cover;
}
#lightbox .lb-content{
  display:flex;
  gap:1.25rem;
  align-items:center;
  max-width: min(1200px, calc(100% - 4rem));
  width:100%;
  justify-content:center;
}
#lb-meta{
  max-width: 420px;
  color: #0b0b0b;
  text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.94));
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.04);
  max-height: 80vh; /* ensure meta doesn't overflow the viewport */
  overflow: auto; /* allow scrolling for long descriptions */
}
#lb-meta h3{ margin: 0 0 .5rem 0; font-size:1.25rem; color:var(--text); font-family:'Playfair Display', serif }
#lb-meta p{ margin:0; color:var(--muted); line-height:1.6; font-family: 'Inter', sans-serif }

/* Responsive: stack image above meta on narrow viewports */
@media (max-width:900px){
  #lightbox .lb-content{ flex-direction:column; }
  #lb-meta{ max-width: none; width:100%; }
  #lightbox img#lb-img{ max-width: 100%; max-height: 60vh; }
}

/* Appear/scale animation for modal and internals */
#lightbox .lb-content{ transform: scale(.98) translateY(6px); opacity: 0; transition: transform .26s cubic-bezier(.2,.9,.2,1), opacity .26s ease; }
#lightbox.lb-visible .lb-content{ transform: scale(1) translateY(0); opacity: 1; }
#lb-meta{ transform: translateY(6px); opacity: 0; transition: transform .36s cubic-bezier(.2,.9,.2,1) .06s, opacity .36s .06s; }
#lightbox.lb-visible #lb-meta{ transform: translateY(0); opacity: 1; }
#lightbox .nav, #lb-close{
  position: absolute;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
}
#lb-close{ top: 18px; right: 22px; }
#lb-prev{ left: 18px; top: 50%; transform: translateY(-50%); }
#lb-next{ right: 18px; top: 50%; transform: translateY(-50%); }
#lightbox img{ pointer-events: none; } /* clicks on overlay close if outside img */

/* About section cleanup */
.about{ background: none !important; }

/* About card specific */
.about-card{background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.8));border:1px solid rgba(0,0,0,0.04);box-shadow:0 8px 30px rgba(0,0,0,0.04);padding:2rem;border-radius:18px}
.left-col{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.fun-facts{background:rgba(255, 212, 0, 0.06);border-radius:12px;padding:0.8rem;margin-top:0.75rem;width:100%;max-width:320px;border:1px solid rgba(0,0,0,0.04)}
.fun-facts h3{margin:0 0 .5rem 0;color:var(--text)}
.fun-facts ul{list-style:none;padding-left:0;margin:0}
.fun-facts li{padding:.25rem 0;color:var(--muted)}

/* Pull-quote fallback color when background-clip isn't available */
.pull-quote{color:var(--accent);}

main, section, header, footer { position: relative; }


/* Navbar blend + clickability */
.navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  display:flex; justify-content:space-between; align-items:center;
  padding: 1rem 2rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 10050; /* higher than most elements */
  pointer-events: auto;
}
.navbar *{ pointer-events: auto; }
.navbar.scrolled{ background: rgba(255,255,255,0.5); backdrop-filter: blur(8px); }
.hero{ position: relative; z-index: 0; } /* make sure hero never covers the navbar */

/* Footer styles */
footer{
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04));
  padding: 1rem 1rem;
  margin-top: 3rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  border-top: 1px solid rgba(0,0,0,0.03);
}
footer p{ margin:0; }
footer a{ color:var(--text); text-decoration:underline; font-weight:600 }
footer a:hover{ color:var(--accent); text-decoration:none }

@media (max-width:700px){
  footer{ padding: 1.4rem 0.8rem; font-size:0.95rem }
}

/* Footer nav and back-to-top */
.footer-inner{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:1rem; padding:0 1rem }
.footer-meta{ color:var(--muted); margin:0 }

#back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(180deg,var(--accent),var(--accent-dark));
  color: #000;
  border: none;
  display: none; /* shown by JS when scrolled down */
  align-items:center;justify-content:center;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,0.12);cursor:pointer;z-index:12000
}

@media (max-width:900px){
  .footer-inner{ flex-direction:column; align-items:center; text-align:center }
  #back-to-top{ right: 12px; bottom: 12px }
}