/* Sean Magnee Theme — Main Styles */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }
body {
  background:var(--ink); color:var(--paper);
  font-family:'Barlow',sans-serif; font-weight:300;
  overflow-x:hidden; cursor:none;
}

/* ── CURSOR ── */
#cursor {
  position:fixed; width:10px; height:10px;
  background:var(--pink); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s;
}
#cursor.big { width:36px; height:36px; background:transparent; border:1.5px solid var(--pink); }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem; height:54px;
  background:rgba(9,9,11,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s,backdrop-filter .3s;
}
nav.scrolled { background:rgba(9,9,11,.95); }
.nav-logo-link { display:flex; align-items:center; text-decoration:none; }
.nav-logo { height:28px; width:auto; display:block; }
.nav-logo-text {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper);
}
nav ul { list-style:none; display:flex; gap:0; }
nav a.nl {
  font-family:'Barlow Condensed',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(244,241,235,.7); text-decoration:none;
  padding:0 2rem; height:54px; display:flex; align-items:center;
  border-left:1px solid rgba(255,255,255,.06);
  transition:color .2s,background .2s;
}
nav a.nl:last-child { border-right:1px solid rgba(255,255,255,.06); }
nav a.nl:hover { color:#fff; background:rgba(255,255,255,.05); }

/* ── HERO ── */
#hero {
  position:relative; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.vimeo-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#000; }
.vimeo-bg iframe {
  position:absolute; top:50%; left:50%;
  width:177.78vh; height:56.25vw;
  min-width:100vw; min-height:100vh;
  transform:translate(-50%,-50%); border:none;
}
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:rgba(0,0,0,.58);
}
.hero-glow {
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(ellipse 70% 40% at 50% 100%, rgba(var(--pink-rgb),.12) 0%, transparent 65%);
}
.hero-center {
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
  animation:fadeUp .9s ease both; animation-delay:.3s;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.hero-tagline {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(.9rem,1.6vw,1.15rem); font-weight:300;
  letter-spacing:.03em; color:rgba(244,241,235,.72);
  max-width:520px; line-height:1.65; margin-bottom:2.2rem;
}
.hero-cta {
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.82rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  border:1.5px solid rgba(255,255,255,.65); padding:.88rem 2.6rem;
  transition:background .25s,border-color .25s; margin-bottom:2.8rem;
}
.hero-cta:hover { background:var(--pink); border-color:var(--pink); }
.hero-meta {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(244,241,235,.3); line-height:2;
}
.hero-meta span { display:block; }

.scroll-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'Barlow Condensed',sans-serif; font-size:.58rem;
  letter-spacing:.25em; text-transform:uppercase; color:rgba(244,241,235,.22);
}
.scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,var(--pink),transparent); animation:sp 2s ease-in-out infinite; }
@keyframes sp{0%,100%{opacity:.3}50%{opacity:1}}

/* ── CLIENT STRIP ── */
#clients-strip {
  background:var(--ink); overflow:hidden; white-space:nowrap;
  padding:1.8rem 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.strip-inner { display:inline-block; animation:stripScroll 26s linear infinite; }
.strip-inner a {
  font-family:'Barlow Condensed',sans-serif; font-size:.95rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,241,235,.22); text-decoration:none;
  padding:0 2.8rem; cursor:pointer; transition:color .25s;
}
.strip-inner a:hover { color:rgba(244,241,235,.75); }
@keyframes stripScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SHARED ── */
.section-label {
  font-family:'Barlow Condensed',sans-serif; font-size:.68rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--pink); margin-bottom:.8rem;
}
.section-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2.8rem,5.5vw,5.5rem); font-weight:900; text-transform:uppercase; line-height:.93;
}

/* ── WORK ── */
#work { background:var(--off); padding:7rem 3rem; }
.work-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.work-item { position:relative; overflow:hidden; background:#0d0d10; cursor:pointer; display:block; text-decoration:none; color:inherit; }
/* Force aspect ratio via inner pseudo-element so it works on <a> tags in grid */
.work-item::before { content:''; display:block; padding-top:75%; /* 4:3 */ }
.work-item--wide { grid-column:span 2; }
.work-item--wide::before { padding-top:37.5%; /* 8:3 */ }
.wp { position:absolute; inset:0; overflow:hidden; transition:transform .55s; background:#0d0d10; }
.work-item:hover .wp { transform:scale(1.05); }
.work-thumb { width:100%;height:100%;object-fit:cover;filter:saturate(.4) brightness(.7);transition:filter .5s; }
.work-item:hover .work-thumb { filter:saturate(1) brightness(.85); }
.work-orbs { width:100%;height:100%;position:relative; }
.orb{position:absolute;border-radius:50%;opacity:.2;animation:ofl 7s ease-in-out infinite;}
.o1{width:65%;height:65%;top:-10%;left:15%;}
.o2{width:45%;height:45%;bottom:-15%;right:-5%;animation-delay:-2.5s;}
@keyframes ofl{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.work-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem;opacity:0;transition:opacity .32s;}
.work-item:hover .work-overlay{opacity:1;}
.work-item-link{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;}
.work-cat{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);margin-bottom:.3rem;}
.work-name{font-family:'Barlow Condensed',sans-serif;font-size:1.5rem;font-weight:900;text-transform:uppercase;line-height:1;color:var(--paper);}
.work-cta{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,235,.5);margin-top:.4rem;transition:color .2s;}
.work-item:hover .work-cta{color:var(--pink);}

/* ── QUOTE ── */
#quote { background:var(--pink); padding:6rem 3rem; }
#quote blockquote { max-width:820px; margin:0 auto; text-align:center; }
#quote blockquote p { font-family:'Barlow Condensed',sans-serif; font-size:clamp(1.7rem,3vw,2.9rem); font-weight:900; text-transform:uppercase; line-height:1.18; color:#fff; margin-bottom:1.8rem; }
#quote blockquote cite { font-family:'Barlow',sans-serif; font-size:.82rem; font-style:normal; color:rgba(255,255,255,.55); letter-spacing:.05em; }

/* ── ABOUT ── */
#about { background:var(--ink); padding:7rem 3rem; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.about-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(2.2rem,4.5vw,5rem); font-weight:900; text-transform:uppercase; line-height:.92; margin-bottom:2.2rem; }
.about-title .ghost { color:transparent; -webkit-text-stroke:1px rgba(244,241,235,.2); display:block; }
.about-body { font-size:1rem; line-height:1.82; color:rgba(244,241,235,.52); margin-bottom:1.4rem; }
.about-body strong { color:var(--paper); font-weight:400; }
.about-body a { color:var(--pink); text-decoration:none; border-bottom:1px solid currentColor; }
.about-body a:hover { color:var(--pink2); }

.about-contact-block {
  margin:1.6rem 0 2.2rem;
  padding:1.4rem 1.6rem;
  border-left:2px solid var(--pink);
  background:rgba(255,61,154,.05);
}
.about-contact-heading {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--paper); margin-bottom:.7rem;
}
.about-contact-link {
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.95rem; font-weight:400;
  letter-spacing:.04em;
  color:var(--pink); text-decoration:none;
  transition:color .2s; margin-bottom:.2rem;
}
.about-contact-link:hover { color:var(--pink2); }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; border-top:1px solid rgba(244,241,235,.08); padding-top:2.5rem; }
.stat-n { font-family:'Barlow Condensed',sans-serif; font-size:2.8rem; font-weight:900; color:var(--pink); line-height:1; }
.stat-l { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,241,235,.33); margin-top:.3rem; }
.about-visual { width:100%; aspect-ratio:3/4; overflow:hidden; background:#0a0a0a; clip-path:polygon(8% 0,100% 0,92% 100%,0 100%); position:relative; }
.av-ring{position:absolute;border-radius:50%;border:1px solid rgba(var(--pink),.25);animation:rp 4.5s ease-in-out infinite;}
.av-ring:nth-child(1){width:55%;height:55%;top:22%;left:22%;}
.av-ring:nth-child(2){width:75%;height:75%;top:12%;left:12%;animation-delay:-1.5s;}
.av-ring:nth-child(3){width:38%;height:38%;top:31%;left:31%;animation-delay:-3s;}
@keyframes rp{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}
.av-label{position:absolute;bottom:2rem;left:2.5rem;font-family:'Black Han Sans',sans-serif;font-size:5.5rem;color:rgba(255,61,154,.08);letter-spacing:-.03em;user-select:none;}
.about-visual-wrap { position:relative; }
.av-tag{position:absolute;top:2rem;right:-.5rem;background:var(--pink);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:.5rem .9rem;writing-mode:vertical-rl;transform:rotate(180deg);}

/* ── SERVICES ── */
#services { background:var(--mid); padding:7rem 3rem; }
.services-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:4rem; }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(244,241,235,.07); }
.svc-card { background:var(--mid); padding:2.8rem 2.2rem; position:relative; overflow:hidden; transition:background .3s; }
.svc-card::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.svc-card:hover{background:#22222a;}
.svc-card:hover::after{transform:scaleX(1);}
.svc-num{font-family:'Barlow Condensed',sans-serif;font-size:.65rem;font-weight:600;letter-spacing:.22em;color:var(--pink);margin-bottom:1.4rem;}
.svc-title{font-family:'Barlow Condensed',sans-serif;font-size:1.7rem;font-weight:900;text-transform:uppercase;line-height:1;margin-bottom:1rem;color:var(--paper);}
.svc-desc{font-size:.88rem;line-height:1.72;color:rgba(244,241,235,.38);}

/* ── CONTACT ── */
#contact{background:var(--ink);padding:8rem 3rem;text-align:center;position:relative;overflow:hidden;}
.contact-ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Black Han Sans',sans-serif;font-size:clamp(5rem,22vw,20rem);color:rgba(255,61,154,.03);white-space:nowrap;user-select:none;pointer-events:none;letter-spacing:-.03em;z-index:0;}
#contact{isolation:isolate;}
.contact-title{position:relative;z-index:1;font-family:'Barlow Condensed',sans-serif;font-size:clamp(2.5rem,6vw,6.5rem);font-weight:900;text-transform:uppercase;line-height:.93;margin-bottom:1.4rem;}
.contact-sub{position:relative;z-index:1;font-size:1rem;color:rgba(244,241,235,.36);margin-bottom:3rem;}
.contact-email{position:relative;z-index:1;font-family:'Barlow Condensed',sans-serif;font-size:clamp(1.4rem,2.8vw,2.6rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:4px;display:inline-block;transition:color .2s,border-color .2s;}
.contact-email:hover{color:var(--pink2);border-color:var(--pink2);}
.contact-phone{position:relative;z-index:1;display:block;margin-top:1rem;font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;color:rgba(244,241,235,.28);text-decoration:none;letter-spacing:.1em;transition:color .2s;}
.contact-phone:hover{color:var(--paper);}

/* ── FOOTER ── */
footer{background:var(--off);padding:2rem 3rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(244,241,235,.05);}
.footer-logo{height:28px;width:auto;opacity:.6;}
.footer-name{font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);}
.footer-copy{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,235,.2);}
.kvk{font-size:.65rem;color:rgba(244,241,235,.15);margin-top:3px;}
.footer-soc{display:flex;gap:1.5rem;}
.footer-soc a{font-family:'Barlow Condensed',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,235,.26);text-decoration:none;transition:color .2s;}
.footer-soc a:hover{color:var(--pink);}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s,transform .85s;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav{padding:0 1rem;}
  nav ul{display:none;}
  .vimeo-bg iframe{width:100vw;height:56.25vw;min-height:unset;}
  #work,#quote,#services,#contact{padding:5rem 1.5rem;}
  #about{grid-template-columns:1fr;padding:5rem 1.5rem;}
  .about-visual-wrap{display:none;}
  .work-grid{grid-template-columns:1fr;}
  .work-item--wide{grid-column:span 1;}
  .work-item--wide::before{padding-top:56.25%;}
  .svc-grid{grid-template-columns:1fr;}
  .services-header,.work-header{flex-direction:column;align-items:flex-start;gap:1rem;}
  footer{flex-direction:column;gap:1rem;text-align:center;}
  .footer-soc{justify-content:center;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
  #clients-strip{padding:1.2rem 0;}
}

.about-photo { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; filter:brightness(.92) contrast(1.05); transition:transform .6s ease; }
.about-visual:hover .about-photo { transform:scale(1.03); }

/* ── WORK FILTERS ── */
.work-filters {
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2rem;
}
.wf-btn {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,241,235,.45);
  background:transparent;
  border:1px solid rgba(244,241,235,.15);
  padding:.55rem 1.2rem;
  cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.wf-btn:hover { color:var(--paper); border-color:rgba(244,241,235,.4); }
.wf-btn.active { color:#fff; background:var(--pink); border-color:var(--pink); }

/* hidden filtered items */
.work-item.hidden {
  display:none;
}

/* service card as link */
a.svc-card { text-decoration:none; display:block; }

/* ── CONTACT SOCIALS ── */
.contact-socials {
  position:relative; z-index:2;
  display:flex; justify-content:center; flex-wrap:wrap; gap:1rem;
  margin-top:2.5rem;
}
.contact-social-link {
  display:flex; align-items:center; gap:.5rem;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,241,235,.35); text-decoration:none;
  border:1px solid rgba(244,241,235,.12);
  padding:.6rem 1.4rem;
  transition:color .2s, border-color .2s, background .2s;
  cursor:pointer;
}
.contact-social-link svg { width:14px; height:14px; flex-shrink:0; }
.contact-social-link:hover { color:#fff; border-color:var(--pink); background:rgba(255,61,154,.08); }

/* ── LOAD MORE ── */
.work-item--hidden { display:none; }

.load-more-wrap {
  text-align:center;
  padding:2.5rem 0 0;
}
.load-more-btn {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.82rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:transparent;
  border:1.5px solid rgba(244,241,235,.25);
  padding:.95rem 2.5rem;
  display:inline-flex; align-items:center; gap:.5rem;
  cursor:pointer;
  transition:background .25s, border-color .25s;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
}
.load-more-btn svg { width:18px; height:18px; fill:currentColor; }
.load-more-btn:hover { background:var(--pink); border-color:var(--pink); }
.load-more-btn.all-loaded { display:none; }