/* ===================================================
   FOCUS ON INFINITY — Styles
   Premium dark-themed creative agency site
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-light: #1a1a1a;
  --color-text: #ffffff;
  --color-text-muted: rgba(255,255,255,0.45);
  --color-text-dim: rgba(255,255,255,0.25);
  --color-accent-gold: #c8a55a;
  --color-footer-bg: #f2f0eb;
  --color-footer-text: #1a1a1a;
  --color-footer-muted: #6b6b6b;
  --color-border: rgba(255,255,255,0.08);
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --section-padding: clamp(80px, 10vh, 140px);
  --container-padding: clamp(24px, 4vw, 60px);
  --max-width: 1400px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-medium: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 1s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); background:var(--color-bg); color:var(--color-text); line-height:1.6; overflow-x:hidden; cursor:none; }
a { color:inherit; text-decoration:none; cursor:none; }
ul,ol { list-style:none; }
img { max-width:100%; display:block; }
button { background:none; border:none; color:inherit; font-family:inherit; cursor:none; }
::selection { background:var(--color-accent-gold); color:var(--color-bg); }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--color-bg); }
::-webkit-scrollbar-thumb { background:var(--color-surface-light); border-radius:3px; }

/* Cursor */
.cursor-dot { position:fixed; top:0; left:0; width:10px; height:10px; background:#fff; border-radius:50%; pointer-events:none; z-index:10000; transform:translate(-50%,-50%); transition:width .3s var(--ease-out-expo), height .3s var(--ease-out-expo), background .3s var(--ease-out-expo); mix-blend-mode:difference; }
.cursor-dot.cursor-hover { width:40px; height:40px; background:var(--color-accent-gold); mix-blend-mode:normal; opacity:0.7; }

/* Navigation */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:24px var(--container-padding); display:flex; justify-content:space-between; align-items:flex-start; mix-blend-mode:difference; }
.nav-brand { font-weight:700; font-size:1rem; letter-spacing:-0.02em; white-space:nowrap; display:flex; align-items:center; gap:10px; }
.nav-logo { height:18px; width:auto; opacity:0.7; mix-blend-mode:screen; }
.nav-brand span { font-weight:300; opacity:0.6; margin-left:6px; font-size:0.8rem; }
.nav-links { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.nav-links a { font-size:0.7rem; font-weight:400; text-transform:uppercase; letter-spacing:0.08em; opacity:0.6; transition:opacity var(--transition-fast); padding:2px 0; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:#fff; transition:width var(--transition-fast); }
.nav-links a:hover { opacity:1; }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { opacity:1; }
.nav-links a.active::before { content:'→ '; font-size:0.65rem; }

/* Hero */
.hero { position:relative; height:100vh; min-height:600px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-video-wrap { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; overflow:hidden; }
.hero-video-wrap iframe { position:absolute; top:50%; left:50%; width:177.78vh; min-width:100%; height:100vh; min-height:56.25vw; transform:translate(-50%,-50%); border:0; pointer-events:none; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.1) 30%, rgba(10,10,10,0.1) 70%, rgba(10,10,10,0.7) 100%); z-index:2; }
.hero-content { position:relative; z-index:3; text-align:center; padding:0 var(--container-padding); }
.hero-tagline { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.8rem); font-weight:300; font-style:normal; letter-spacing:-0.03em; line-height:1.15; opacity:0; transform:translateY(30px); animation:taglineFade 4.5s var(--ease-out-expo) 0.5s forwards; }

/* Scroll Badge */
.scroll-badge { position:absolute; bottom:80px; left:var(--container-padding); z-index:3; width:70px; height:70px; opacity:0; animation:fadeInUp 1s var(--ease-out-expo) 1.2s forwards; }
.scroll-badge svg { width:100%; height:100%; animation:rotateBadge 12s linear infinite; }
.scroll-badge-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; border:1.5px solid #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.scroll-badge-center svg { width:10px; height:10px; animation:none; }

/* Sound Toggle */
.sound-toggle { position:absolute; bottom:40px; right:var(--container-padding); z-index:5; display:flex; align-items:center; gap:8px; padding:10px 18px; border:1px solid rgba(255,255,255,0.25); border-radius:100px; background:rgba(0,0,0,0.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:0.7rem; font-family:var(--font-body); letter-spacing:0.06em; text-transform:uppercase; transition:border-color var(--transition-fast), background var(--transition-fast); cursor:none; }
.sound-toggle:hover { border-color:rgba(255,255,255,0.5); background:rgba(0,0,0,0.6); }
.sound-toggle.active .icon-muted { display:none; }
.sound-toggle.active .icon-unmuted { display:block !important; }
.sound-toggle .icon-unmuted { display:none; }

/* Manifesto */
.manifesto { padding:var(--section-padding) var(--container-padding); max-width:var(--max-width); margin:0 auto; }
.manifesto-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.5; margin-bottom:60px; }
.manifesto-label::before { content:'→ '; font-size:0.6rem; }
.manifesto-text { font-family:var(--font-display); font-size:clamp(2.2rem,5.5vw,4.5rem); font-weight:400; line-height:1.1; letter-spacing:-0.03em; max-width:900px; }
.manifesto-text .word { display:inline-block; opacity:0; transform:translateY(20px); transition:opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.manifesto-text .word.revealed { opacity:1; transform:translateY(0); }
.manifesto-sub { font-family:var(--font-display); font-size:clamp(2.2rem,5.5vw,4.5rem); font-weight:400; line-height:1.1; letter-spacing:-0.03em; max-width:900px; color:var(--color-text-muted); margin-top:0; }
.manifesto-sub .word { display:inline-block; opacity:0; transform:translateY(20px); transition:opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.manifesto-sub .word.revealed { opacity:1; transform:translateY(0); }

/* About */
.about { padding:0 var(--container-padding) var(--section-padding); max-width:var(--max-width); margin:0 auto; }
.about-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.5; margin-bottom:40px; }
.about-label::before { content:'→ '; font-size:0.6rem; }
.about-body { max-width:640px; }
.about-body p { font-family:var(--font-body); font-size:0.78rem; line-height:1.7; opacity:0.7; font-weight:300; margin-bottom:16px; }
.about-body p:last-child { margin-bottom:0; }

/* Clients Carousel */
.clients { padding:0 0 var(--section-padding); max-width:100%; overflow:hidden; position:relative; background:#000; }
.clients-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.5; margin-bottom:30px; padding-left:var(--container-padding); max-width:var(--max-width); margin-left:auto; margin-right:auto; }
.clients-label::before { content:'→ '; font-size:0.6rem; }
.clients-track-wrap { position:relative; overflow:hidden; width:100%; }
.clients-track-wrap::before, .clients-track-wrap::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.clients-track-wrap::before { left:0; background:linear-gradient(to right, #000, transparent); }
.clients-track-wrap::after { right:0; background:linear-gradient(to left, #000, transparent); }
.clients-track { display:flex; align-items:center; gap:50px; white-space:nowrap; animation:scrollClients 35s linear infinite; width:max-content; padding:16px 0; }
.client-logo { max-height:90px; max-width:140px; width:auto; height:auto; object-fit:contain; opacity:0.6; transition:opacity var(--transition-fast); flex-shrink:0; mix-blend-mode:screen; -webkit-mask-image:radial-gradient(ellipse 90% 90% at center, black 65%, transparent 90%); mask-image:radial-gradient(ellipse 90% 90% at center, black 65%, transparent 90%); }
.client-logo:hover { opacity:1; }
.client-logo-invert { filter:invert(1); max-height:40px; }
@keyframes scrollClients { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* Team */
.team { padding:40px var(--container-padding) var(--section-padding); max-width:var(--max-width); margin:0 auto; }
.team-header { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.4; margin-bottom:40px; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:30px; max-width:700px; }

/* Card Container */
.team-card { position:relative; border-radius:4px; overflow:hidden; aspect-ratio:3/4; background:var(--color-surface); transition:transform var(--transition-medium); }
.team-card:hover { transform:scale(1.02); }
.team-card.expanded { transform:none; }

/* Photo */
.team-card-visual { width:100%; height:100%; position:relative; overflow:hidden; }
.team-card-photo { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 1.2s var(--ease-out-expo), filter 0.6s var(--ease-out-expo); }
.team-card:hover .team-card-photo { transform:scale(1.04); }
.team-card.expanded .team-card-photo { transform:scale(1.08); filter:brightness(0.3) blur(2px); }

/* Name/Role Overlay */
.team-card-overlay { position:absolute; bottom:0; left:0; right:0; padding:30px 24px; background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); z-index:2; transition:opacity 0.4s var(--ease-out-expo); }
.team-card.expanded .team-card-overlay { opacity:0; pointer-events:none; }
.team-card-role { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.6; margin-bottom:8px; }
.team-card-name { font-family:var(--font-display); font-size:clamp(1.4rem,2.5vw,1.8rem); font-weight:400; line-height:1.2; }

/* Expand Button */
.team-card-expand { position:absolute; bottom:24px; right:24px; width:36px; height:36px; border:1px solid rgba(255,255,255,0.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:background var(--transition-fast), border-color var(--transition-fast), transform 0.4s var(--ease-out-expo); z-index:5; }
.team-card:hover .team-card-expand { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.5); }
.team-card.expanded .team-card-expand { transform:rotate(45deg); background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.6); }

/* Bio Panel */
.team-card-bio { position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end; padding:28px 24px; opacity:0; pointer-events:none; transition:opacity 0.5s var(--ease-out-expo); }
.team-card.expanded .team-card-bio { opacity:1; pointer-events:auto; }
.team-card-bio-inner { transform:translateY(20px); transition:transform 0.6s var(--ease-out-expo); }
.team-card.expanded .team-card-bio-inner { transform:translateY(0); }
.team-card-bio-role { font-size:0.55rem; text-transform:uppercase; letter-spacing:0.12em; opacity:0.5; margin-bottom:6px; }
.team-card-bio-name { font-family:var(--font-display); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:500; letter-spacing:-0.02em; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.12); }
.team-card-bio-inner p { font-size:0.78rem; line-height:1.7; opacity:0.7; margin-bottom:8px; font-weight:300; }

/* Contact / Footer */
.contact { background:var(--color-footer-bg); color:var(--color-footer-text); padding:var(--section-padding) var(--container-padding); position:relative; }
.contact-inner { max-width:var(--max-width); margin:0 auto; }
.contact-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-footer-muted); margin-bottom:8px; }
.contact-label::before { content:'→ '; font-size:0.6rem; }
.contact-brand { font-weight:700; font-size:1rem; margin-bottom:16px; letter-spacing:-0.02em; }
.contact-heading { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4rem); font-weight:400; line-height:1.1; letter-spacing:-0.03em; margin-bottom:60px; }

.contact-email-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-footer-muted); margin-bottom:8px; }
.contact-email { font-size:clamp(1rem,2vw,1.3rem); color:var(--color-accent-gold); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(200,165,90,0.3); transition:text-decoration-color var(--transition-fast); display:inline-block; margin-bottom:60px; }
.contact-email:hover { text-decoration-color:var(--color-accent-gold); }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-top:50px; border-top:1px solid rgba(0,0,0,0.08); }
.footer-office h4 { font-size:0.9rem; font-weight:600; margin-bottom:12px; }
.footer-office p { font-size:0.78rem; line-height:1.7; color:var(--color-footer-muted); margin-bottom:14px; }
.footer-office a.map-link { font-size:0.72rem; display:inline-flex; align-items:center; gap:6px; transition:opacity var(--transition-fast); }
.footer-office a.map-link::before { content:'→'; font-size:0.6rem; }
.footer-office a.map-link:hover { opacity:0.6; }
.footer-social h4 { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-footer-muted); margin-bottom:16px; }
.footer-social a { display:block; font-size:0.88rem; font-weight:500; padding:4px 0; transition:opacity var(--transition-fast); }
.footer-social a:hover { opacity:0.5; }
.back-to-top { position:absolute; bottom:40px; right:var(--container-padding); width:44px; height:44px; border:1.5px solid rgba(0,0,0,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color var(--transition-fast), transform var(--transition-fast); }
.back-to-top:hover { border-color:rgba(0,0,0,0.5); transform:translateY(-3px); }
.back-to-top svg { width:14px; height:14px; }

/* Animations */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes taglineFade { 0% { opacity:0; transform:translateY(30px); } 15% { opacity:1; transform:translateY(0); } 70% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-10px); } }
@keyframes rotateBadge { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes blink { 0%,90%,100% { opacity:1; } 95% { opacity:0; } }
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }

/* Work Panel */
.work-panel { position:fixed; top:0; right:0; width:min(580px, 92vw); height:100vh; background:var(--color-bg); z-index:2000; transform:translateX(100%); transition:transform 0.6s var(--ease-out-expo); overflow-y:auto; border-left:1px solid var(--color-border); }
.work-panel.open { transform:translateX(0); }
.work-panel-header { display:flex; justify-content:space-between; align-items:center; padding:28px 32px 24px; position:sticky; top:0; background:var(--color-bg); z-index:10; border-bottom:1px solid var(--color-border); }
.work-panel-title { font-family:var(--font-display); font-size:1.2rem; font-weight:400; letter-spacing:-0.02em; }
.work-panel-close { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.2); border-radius:50%; transition:border-color var(--transition-fast), transform var(--transition-fast); }
.work-panel-close:hover { border-color:rgba(255,255,255,0.6); transform:rotate(90deg); }
.work-panel-grid { padding:24px 32px; display:flex; flex-direction:column; gap:28px; }
.work-item { display:block; text-decoration:none; color:inherit; transition:opacity var(--transition-fast); }
.work-item:hover { opacity:0.8; }
.work-thumb { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:4px; background:var(--color-surface); }
.work-thumb iframe { position:absolute; top:50%; left:50%; width:177.78%; min-width:100%; height:100%; min-height:56.25%; transform:translate(-50%,-50%); border:0; pointer-events:none; }
.work-info { padding:10px 0 0; }
.work-info h3 { font-family:var(--font-display); font-size:0.95rem; font-weight:500; letter-spacing:-0.01em; margin-bottom:2px; }
.work-info span { font-size:0.7rem; opacity:0.45; text-transform:uppercase; letter-spacing:0.06em; }
.work-panel-cta { padding:16px 32px 40px; text-align:center; }
.work-vimeo-link { font-size:0.78rem; font-weight:500; opacity:0.6; transition:opacity var(--transition-fast); letter-spacing:0.02em; }
.work-vimeo-link:hover { opacity:1; }
.work-panel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1999; opacity:0; pointer-events:none; transition:opacity 0.4s var(--ease-out-expo); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.work-panel-overlay.open { opacity:1; pointer-events:auto; }

/* Responsive */
@media (max-width:768px) {
  .nav { padding:16px 20px; }
  .nav-links { display:none; }
  .scroll-badge { width:55px; height:55px; bottom:40px; left:20px; }
  .manifesto { padding:60px 20px; }
  .manifesto-text, .manifesto-sub { font-size:clamp(1.8rem,8vw,2.8rem); }
  .team { padding:40px 20px 80px; }
  .team-grid { grid-template-columns:1fr; max-width:400px; }
  .footer-grid { grid-template-columns:1fr; gap:30px; }
  .cursor-dot { display:none; }
  body { cursor:auto; }
  a, button { cursor:pointer; }
}