/* ---------- Reset & base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --black: #060606; --charcoal: #121014; --red: #c8102e; --red-dim: #7a1120; --white: #f5f3f0; --gray: #9a9599; --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --reveal-y: 18px; --reveal-duration: 0.6s; } html { scroll-behavior: smooth; /* Horizontal clip must live on , not only . `overflow-x: hidden` on alone makes the scroll container on iOS Safari, which swallows touch-drag scrolling (page only moves via anchor links). */ overflow-x: hidden; } body { background: var(--black); color: var(--white); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; overflow-x: clip; } a { color: inherit; text-decoration: none; } /* Visually hidden but available to screen readers and search crawlers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Header ---------- */ .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: clamp(20px, 3vw, 36px) clamp(20px, 5vw, 64px); pointer-events: none; } .site-header > * { pointer-events: auto; } .logo { font-weight: 800; font-size: 15px; letter-spacing: 0.12em; } .site-nav { display: flex; gap: clamp(20px, 3vw, 40px); } .site-nav a { position: relative; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--gray); transition: color 0.4s var(--ease-premium); } .site-nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--red); transition: width 0.4s var(--ease-premium); } .site-nav a:hover, .site-nav a:focus-visible { color: var(--white); } .site-nav a:hover::after, .site-nav a:focus-visible::after { width: 100%; } .btn-nav { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; padding: 10px 20px; border: 1px solid rgba(245, 243, 240, 0.25); border-radius: 999px; transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium); } .btn-nav:hover, .btn-nav:focus-visible { border-color: var(--red); background: rgba(200, 16, 46, 0.12); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; z-index: 30; } .nav-toggle span { display: block; width: 100%; height: 1.5px; background: var(--white); transition: transform 0.35s var(--ease-premium), opacity 0.35s var(--ease-premium); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .mobile-nav { position: fixed; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; padding: 0 32px; background: rgba(6, 6, 6, 0.98); transform: translateY(-100%); opacity: 0; transition: transform 0.5s var(--ease-premium), opacity 0.4s var(--ease-premium); pointer-events: none; } .mobile-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-nav a { font-size: 22px; font-weight: 700; letter-spacing: 0.06em; color: var(--white); } .mobile-nav .btn-nav { margin-top: 12px; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 78% 45%, rgba(200, 16, 46, 0.16), transparent 65%), linear-gradient(180deg, #0a0808 0%, var(--black) 45%, #0c0507 100%); } .hero-glow { position: absolute; top: 10%; right: -10%; width: 55vw; height: 55vw; max-width: 800px; max-height: 800px; background: radial-gradient(circle, rgba(200, 16, 46, 0.28) 0%, rgba(200, 16, 46, 0) 70%); filter: blur(10px); pointer-events: none; z-index: 1; } .hero-bg-text { position: absolute; top: 37%; left: 44%; transform: translate(-50%, -50%); width: 130vw; text-align: center; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(76px, 14vw, 245px); line-height: 1; letter-spacing: 0.01em; color: transparent; background: linear-gradient(180deg, rgba(154, 22, 38, 0.55), rgba(90, 10, 20, 0.25)); -webkit-background-clip: text; background-clip: text; white-space: nowrap; user-select: none; z-index: 3; mix-blend-mode: screen; pointer-events: none; } .hero-content { position: relative; z-index: 4; width: 100%; padding: clamp(100px, 12vw, 140px) clamp(20px, 5vw, 64px) 60px; pointer-events: none; } /* ---------- Hero text ---------- */ .hero-text { max-width: 480px; animation: fadeUp 0.9s var(--ease-premium) both; pointer-events: auto; } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-name { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(48px, 6.2vw, 84px); line-height: 0.94; letter-spacing: 0.01em; color: var(--white); margin-bottom: 22px; } .hero-role { font-size: clamp(14px, 1.4vw, 16px); font-weight: 700; letter-spacing: 0.04em; color: var(--white); margin-bottom: 16px; } .hero-desc { font-size: 15px; line-height: 1.7; color: var(--gray); max-width: 38ch; margin-bottom: 36px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; border-radius: 999px; transition: transform 0.4s var(--ease-premium), background 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), color 0.4s var(--ease-premium); } .btn-primary { background: var(--red); color: var(--white); } .btn-primary:hover, .btn-primary:focus-visible { background: #e01535; transform: translateY(-2px); } .btn-secondary { border: 1px solid rgba(245, 243, 240, 0.25); color: var(--white); } .btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--white); transform: translateY(-2px); } .btn-arrow { transition: transform 0.4s var(--ease-premium); } .btn:hover .btn-arrow, .btn:focus-visible .btn-arrow { transform: translate(2px, -2px); } /* ---------- Hero image (full-bleed) ---------- */ .hero-image-stage { --reveal-radius: 270px; position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 2; overflow: hidden; isolation: isolate; animation: fadeUp 1s var(--ease-premium) 0.15s both; } /* is only a source-switching wrapper here — generate no box so the lays out exactly as a direct child of .hero-image-stage. */ .hero-image-stage picture { display: contents; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 22%; display: block; } .hero-img-back { z-index: 1; } .hero-img-front { z-index: 2; --mx: 50%; --my: 50%; --reveal-scale: 0; mask-image: radial-gradient( circle calc(var(--reveal-radius) * var(--reveal-scale)) at var(--mx) var(--my), transparent 0%, transparent 45%, black 100% ); -webkit-mask-image: radial-gradient( circle calc(var(--reveal-radius) * var(--reveal-scale)) at var(--mx) var(--my), transparent 0%, transparent 45%, black 100% ); } .hero-image-scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0) 22%), linear-gradient(0deg, rgba(6, 6, 6, 0.55) 0%, transparent 18%); } .hero-hint { position: absolute; z-index: 4; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--gray); opacity: 0.7; } .hint-touch { display: none; } @media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } /* Touch: drop the cursor-follow spotlight mask and use a tap-toggled circular iris instead — closes to reveal the back image, reopens on the next tap. clip-path transitions natively, unlike mask-image. */ .hero-img-front { mask-image: none; -webkit-mask-image: none; clip-path: circle(140% at 50% 50%); -webkit-clip-path: circle(140% at 50% 50%); transition: clip-path 0.85s var(--ease-premium), -webkit-clip-path 0.85s var(--ease-premium); } .hero-image-stage.revealed .hero-img-front { clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%); } } @media (hover: none) and (prefers-reduced-motion: reduce) { .hero-img-front { transition: none; } } /* ---------- Scroll cue ---------- */ .scroll-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 1px; height: 40px; background: rgba(245, 243, 240, 0.15); z-index: 3; overflow: hidden; } .scroll-cue span { position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--red); animation: scrollCue 2.2s ease-in-out infinite; } @keyframes scrollCue { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-text, .hero-image-stage { animation: none; } .scroll-cue span { animation: none; top: 60%; } } /* ---------- Tablet ---------- */ @media (max-width: 1024px) { .hero { flex-direction: column; align-items: stretch; min-height: auto; } .hero-image-stage { --reveal-radius: 210px; position: relative; width: 100%; height: 56svh; order: 1; } .hero-image-scrim { background: linear-gradient(0deg, rgba(6, 6, 6, 0.85) 0%, rgba(6, 6, 6, 0) 22%), linear-gradient(180deg, rgba(6, 6, 6, 0.5) 0%, transparent 18%); } .hero-content { order: 2; text-align: center; /* Stacked layout: content sits below the image, so it no longer needs to clear the absolute header — just breathing room. */ padding-top: clamp(44px, 9vw, 72px); } .hero-text { max-width: 560px; margin: 0 auto; } .hero-desc { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .hero-bg-text { left: 50%; font-size: clamp(70px, 24vw, 220px); } .scroll-cue { display: none; } } /* Switch to the hamburger before the inline nav + logo + button can crowd the header (landscape phones / small tablets), not just at phone width. */ @media (max-width: 860px) { .site-nav, .site-header .btn-nav { display: none; } .nav-toggle { display: flex; } } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .hero-image-stage { --reveal-radius: 160px; height: 48svh; } .hero-content { padding-bottom: 40px; } .hero-name { font-size: clamp(40px, 12vw, 56px); } .hero-desc { font-size: 14px; } .hero-cta { flex-direction: column; width: 100%; } .btn { justify-content: center; width: 100%; } .hero-bg-text { width: 100vw; font-size: clamp(52px, 30vw, 140px); } } /* ---------- About ---------- */ .about-section { position: relative; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, var(--black) 0%, #170b0e 42%, var(--black) 100%); padding: clamp(64px, 8vw, 100px) clamp(20px, 5vw, 64px) clamp(48px, 6vw, 72px); } /* Fades in during the scroll-driven init sequence (JS); the idle drift/pulse keyframes on the glows inside keep running independently underneath. */ .about-glow-field { position: absolute; inset: 0; z-index: 0; } .about-glow { position: absolute; top: -12%; left: -8%; width: 46vw; height: 46vw; max-width: 680px; max-height: 680px; background: radial-gradient(circle, rgba(200, 16, 46, 0.24) 0%, rgba(200, 16, 46, 0) 70%); filter: blur(10px); pointer-events: none; z-index: 0; will-change: transform; } /* Idle ambient motion — separate from the scroll-driven reveal/parallax above, so it keeps breathing while the user sits still on the section. */ .about-glow-2 { position: absolute; bottom: -16%; right: -10%; width: 42vw; height: 42vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle, rgba(200, 16, 46, 0.22) 0%, rgba(200, 16, 46, 0) 70%); filter: blur(14px); pointer-events: none; z-index: 0; will-change: transform, opacity; animation: aboutGlowDrift 13s ease-in-out infinite; } /* Middle glow — the two corner glows above only reach ~650px each; on a tall section that leaves the whole center band pure black, so this one covers the gap between them. */ .about-glow-3 { position: absolute; top: 42%; left: 52%; width: 50vw; height: 50vw; max-width: 760px; max-height: 760px; background: radial-gradient(circle, rgba(200, 16, 46, 0.17) 0%, rgba(200, 16, 46, 0) 70%); filter: blur(20px); pointer-events: none; z-index: 0; will-change: transform, opacity; animation: aboutGlowPulse 16s ease-in-out infinite; } @keyframes aboutGlowDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.65; } 50% { transform: translate3d(-30px, -22px, 0) scale(1.1); opacity: 1; } } @keyframes aboutGlowPulse { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } 50% { transform: translate3d(20px, -16px, 0) scale(1.15); opacity: 0.9; } } .about-noise { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); animation: aboutGrainShift 1s steps(4) infinite; } @keyframes aboutGrainShift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 2%); } 50% { transform: translate(2%, -2%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(0, 0); } } .about-particles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .about-particles span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px 2px rgba(200, 16, 46, 0.6); opacity: 0; animation: aboutEmberRise ease-in-out infinite; } /* Spread across top/left so each ember stays visible near its own zone of the (tall) section, instead of all rising from the very bottom edge. */ .about-particles span:nth-child(1) { left: 8%; top: 12%; animation-duration: 11s; animation-delay: 0s; } .about-particles span:nth-child(2) { left: 22%; top: 55%; animation-duration: 9s; animation-delay: 1.6s; } .about-particles span:nth-child(3) { left: 41%; top: 82%; animation-duration: 13s; animation-delay: 3.2s; } .about-particles span:nth-child(4) { left: 63%; top: 28%; animation-duration: 10s; animation-delay: 0.8s; } .about-particles span:nth-child(5) { left: 78%; top: 65%; animation-duration: 12s; animation-delay: 4.5s; } .about-particles span:nth-child(6) { left: 90%; top: 9%; animation-duration: 8.5s; animation-delay: 2.2s; } @keyframes aboutEmberRise { 0%, 100% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.7; } 50% { transform: translateY(-90px) scale(1); opacity: 0.45; } 85% { opacity: 0.2; } } /* Reveal-on-scroll base state, shared by indicator/body/label/accent/strip */ .about-indicator, .about-body, .about-belief-label, .about-belief-accent, .about-capabilities { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-duration) var(--ease-premium), transform var(--reveal-duration) var(--ease-premium); } .about-indicator.is-visible, .about-body.is-visible, .about-belief-label.is-visible, .about-capabilities.is-visible { opacity: 1; transform: translateY(0); } /* When the GSAP init timeline is running it writes these inline styles on every scroll tick; a competing CSS transition here would re-animate each write and lag behind the intended scrub position, so it's switched off. */ .gsap-motion .about-indicator, .gsap-motion .about-body, .gsap-motion .about-belief-label, .gsap-motion .about-belief-accent, .gsap-motion .about-capabilities { transition: none; } .about-indicator { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, 3vw, 32px); } .about-index { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); } .about-index-line { width: 28px; height: 1px; background: var(--red); } .about-label { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--gray); } .about-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .about-headline { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(34px, 5vw, 72px); line-height: 0.98; letter-spacing: 0.01em; color: var(--white); } /* "Text as window": starts as a hollow, transparent-fill outline so the ambient glow/particles behind it (z-index 0) show through the letter shapes, then the scrub timeline fills it solid white as the word converges into position — see script.js. Fully GSAP-owned; the fallback path (reduced motion or GSAP failing to load) just forces the fill to white directly. */ .reveal-word { display: inline-block; color: transparent; -webkit-text-stroke: 1px rgba(245, 243, 240, 0.4); } .about-body { padding-top: 0; margin-top: clamp(-28px, -3vw, -14px); transition-delay: 0.1s; } .about-body p { font-size: clamp(18px, 2.1vw, 22px); font-weight: 700; line-height: 1.6; color: var(--gray); max-width: 42ch; margin-bottom: 14px; } .about-body p:last-child { margin-bottom: 0; } .keyword { position: relative; color: var(--white); letter-spacing: 0; transition: color 0.4s var(--ease-premium), letter-spacing 0.4s var(--ease-premium); } .keyword::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-premium); } .keyword:hover { color: var(--red); letter-spacing: 0.015em; } .keyword:hover::after { transform: scaleX(1); } .about-belief { position: relative; z-index: 1; margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(20px, 3vw, 32px); text-align: center; } .about-belief-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--gray); margin-bottom: 20px; } .about-belief-statement { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(22px, 3.2vw, 40px); line-height: 1.15; color: var(--white); max-width: 20ch; margin-inline: auto; } /* Same hollow-to-solid pattern as .reveal-word — see script.js. */ .reveal-line { display: block; color: transparent; -webkit-text-stroke: 1px rgba(245, 243, 240, 0.4); } .about-belief-accent { display: block; width: 0; height: 2px; background: var(--red); margin: 24px auto 0; transition: width 0.8s var(--ease-premium) 0.5s; } .about-belief-accent.is-visible { width: 48px; } /* Three.js rotating/morphing particle shape — now a full-bleed background layer spanning the whole section (behind all real content, z-index 0), instead of a small corner accent. Hidden below 1024px to avoid an unnecessary WebGL context and extra GPU/battery cost on mobile. */ .about-globe { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .about-globe canvas { display: block; width: 100%; height: 100%; } @media (max-width: 1024px) { .about-globe { display: none; } } .about-capabilities { position: relative; z-index: 1; margin-top: clamp(24px, 3vw, 40px); overflow: hidden; } .capabilities-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--gray); will-change: transform; animation: capabilitiesDrift 18s ease-in-out infinite; } /* Idle self-driven drift, independent of scroll — pauses under the cursor. */ @keyframes capabilitiesDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-22px); } } .about-capabilities:hover .capabilities-track { animation-play-state: paused; } .capabilities-track .dot { color: var(--red); } .capability-item { position: relative; padding-bottom: 4px; transition: color 0.4s var(--ease-premium); } .capability-item::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--red); transition: width 0.4s var(--ease-premium); } .capability-item:hover { color: var(--white); } .capability-item:hover::after { width: 100%; } @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; } .about-body { padding-top: 0; margin-top: clamp(24px, 4vw, 36px); } .about-body p { max-width: 60ch; } .about-belief-statement { max-width: 100%; } } @media (max-width: 640px) { .about-headline br { display: none; } .capabilities-track { gap: 12px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .about-indicator, .about-body, .about-belief-label, .about-belief-accent, .about-capabilities { transition: opacity 0.3s ease; transform: none; filter: none; } .reveal-word, .reveal-line { color: var(--white); -webkit-text-stroke: 0; transform: none; filter: none; } .capabilities-track { animation: none; } .about-glow-2, .about-glow-3 { animation: none; opacity: 0.5; } .about-noise { animation: none; } .about-particles { display: none; } } /* ---------- My Work ---------- */ .work-section { position: relative; overflow: hidden; background: #171315; padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 64px) clamp(90px, 10vw, 140px); } /* Wrapper handles position/size and the continuous idle float (CSS keyframes); the inner .work-orb handles hover-glow and the JS cursor parallax transform — kept on separate elements so the two motion systems (idle drift vs. cursor-driven) never fight over `transform`. */ .work-orb-wrap { position: absolute; z-index: 0; } .work-orb { position: absolute; inset: 0; border-radius: 50%; filter: blur(20px); will-change: transform; } .work-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 90, 110, 0.95) 0%, rgba(200, 16, 46, 0.5) 45%, rgba(200, 16, 46, 0) 72%); opacity: 0; transition: opacity 0.5s var(--ease-premium); } .work-orb:hover::after { opacity: 1; } @keyframes work-orb-float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3vw, -3.5vw); } } @keyframes work-orb-float-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3.5vw, 2.5vw); } } @keyframes work-orb-float-c { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2.5vw, 3vw); } } .work-orb-wrap-1 { top: -12%; right: -8%; width: 31vw; height: 31vw; max-width: 430px; max-height: 430px; animation: work-orb-float-a 20s ease-in-out infinite; animation-delay: -2s; } .work-orb-wrap-2 { bottom: -10%; left: -8%; width: 24vw; height: 24vw; max-width: 335px; max-height: 335px; animation: work-orb-float-b 24s ease-in-out infinite; animation-delay: -6s; } .work-orb-wrap-3 { top: 30%; left: 36%; width: 14vw; height: 14vw; max-width: 205px; max-height: 205px; animation: work-orb-float-c 16s ease-in-out infinite; animation-delay: -1s; } .work-orb-wrap-4 { top: 4%; left: 4%; width: 13vw; height: 13vw; max-width: 180px; max-height: 180px; animation: work-orb-float-a 18s ease-in-out infinite; animation-delay: -9s; } .work-orb-wrap-5 { bottom: 6%; right: 8%; width: 17vw; height: 17vw; max-width: 240px; max-height: 240px; animation: work-orb-float-b 22s ease-in-out infinite; animation-delay: -4s; } .work-orb-wrap-6 { top: 55%; right: 20%; width: 11vw; height: 11vw; max-width: 155px; max-height: 155px; animation: work-orb-float-c 15s ease-in-out infinite; animation-delay: -7s; } .work-orb-wrap-7 { top: 12%; left: 55%; width: 12vw; height: 12vw; max-width: 175px; max-height: 175px; animation: work-orb-float-a 26s ease-in-out infinite; animation-delay: -12s; } .work-orb-wrap-8 { bottom: 20%; left: 18%; width: 11vw; height: 11vw; max-width: 160px; max-height: 160px; animation: work-orb-float-b 19s ease-in-out infinite; animation-delay: -3s; } .work-orb-wrap-9 { top: 68%; right: 42%; width: 8vw; height: 8vw; max-width: 125px; max-height: 125px; animation: work-orb-float-c 14s ease-in-out infinite; animation-delay: -5s; } .work-orb-1 { background: radial-gradient(circle, rgba(200, 16, 46, 0.32) 0%, rgba(200, 16, 46, 0) 70%); } .work-orb-2 { background: radial-gradient(circle, rgba(200, 16, 46, 0.26) 0%, rgba(200, 16, 46, 0) 70%); } .work-orb-3 { background: radial-gradient(circle, rgba(200, 16, 46, 0.2) 0%, rgba(200, 16, 46, 0) 70%); } .work-orb-4 { background: radial-gradient(circle, rgba(200, 16, 46, 0.22) 0%, rgba(200, 16, 46, 0) 70%); } .work-orb-5 { background: radial-gradient(circle, rgba(200, 16, 46, 0.24) 0%, rgba(200, 16, 46, 0) 70%); } .work-orb-6 { background: radial-gradient(circle, rgba(200, 16, 46, 0.18) 0%, rgba(200, 16, 46, 0) 70%); } .work-orb-7 { background: radial-gradient(circle, rgba(200, 16, 46, 0.2) 0%, rgba(200, 16, 46, 0) 70%); } .work-orb-8 { background: radial-gradient(circle, rgba(200, 16, 46, 0.18) 0%, rgba(200, 16, 46, 0) 70%); } .work-orb-9 { background: radial-gradient(circle, rgba(200, 16, 46, 0.16) 0%, rgba(200, 16, 46, 0) 70%); } @media (prefers-reduced-motion: reduce) { .work-orb-wrap { animation: none; } } .work-indicator, .work-heading, .work-intro { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-duration) var(--ease-premium), transform var(--reveal-duration) var(--ease-premium); } .work-indicator.is-visible, .work-heading.is-visible, .work-intro.is-visible { opacity: 1; transform: translateY(0); } .work-indicator { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); } .work-index { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); } .work-index-line { width: 28px; height: 1px; background: var(--red); } .work-label { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--gray); } .work-intro-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: end; margin-bottom: clamp(64px, 9vw, 120px); } .work-heading { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(48px, 7vw, 108px); line-height: 0.95; letter-spacing: 0.01em; color: var(--white); } .work-intro { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; color: var(--gray); max-width: 36ch; padding-bottom: clamp(4px, 1vw, 10px); } /* ---------- Featured project index (3D draggable card carousel) ---------- */ .work-carousel-wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 32px); opacity: 0; transition: opacity 0.7s var(--ease-premium); } .work-carousel-wrap.is-visible { opacity: 1; } .work-carousel-nav { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(245, 243, 240, 0.2); background: none; color: var(--white); cursor: pointer; transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium), transform 0.4s var(--ease-premium); } .work-carousel-nav:hover { border-color: var(--red); background: rgba(200, 16, 46, 0.12); transform: scale(1.06); } .work-carousel { position: relative; width: 100%; max-width: 780px; height: clamp(300px, 34vw, 380px); display: flex; align-items: center; justify-content: center; perspective: 1400px; } .work-carousel-stage { position: relative; width: 1px; height: 1px; transform-style: preserve-3d; cursor: grab; touch-action: pan-y; } .work-carousel-stage:active { cursor: grabbing; } .work-card { position: absolute; top: 50%; left: 50%; width: 260px; margin: -130px 0 0 -130px; backface-visibility: hidden; } .work-card-visual { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border: 1px solid rgba(245, 243, 240, 0.14); background: linear-gradient(135deg, rgba(200, 16, 46, 0.16) 0%, transparent 55%), linear-gradient(180deg, #140b0d 0%, #0a0607 100%); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .work-card-visual.has-image, .work-mobile-visual.has-image { overflow: hidden; } .work-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } .work-project-placeholder-title { font-family: 'Anton', sans-serif; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: 0.02em; color: rgba(245, 243, 240, 0.35); text-align: center; padding: 0 12px; } .work-project-placeholder-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: rgba(200, 16, 46, 0.75); } .work-card-label { display: flex; align-items: baseline; gap: 10px; padding: 12px 2px 0; } .work-card-number { font-size: 11px; font-weight: 700; color: var(--red-dim); } .work-card-title { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(15px, 1.6vw, 19px); color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.4s var(--ease-premium); } .work-card.is-active .work-card-title { color: var(--white); } .work-carousel-detail { position: relative; z-index: 1; max-width: 640px; margin: clamp(32px, 5vw, 56px) auto 0; text-align: center; opacity: 0; transition: opacity 0.7s var(--ease-premium); } .work-carousel-detail.is-visible { opacity: 1; } .work-carousel-detail-number { display: block; font-family: 'Anton', sans-serif; font-size: clamp(18px, 2vw, 24px); color: var(--red-dim); margin-bottom: 8px; } .work-carousel-detail-title { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.02; color: var(--white); } .work-carousel-detail-category { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--gray); margin-top: 10px; margin-bottom: 18px; } .work-carousel-detail p { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; color: var(--gray); margin: 0 auto 22px; } .work-carousel-detail-tech { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-bottom: 26px; } .work-carousel-detail-tech span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: rgba(154, 149, 153, 0.8); padding-bottom: 2px; border-bottom: 1px solid rgba(245, 243, 240, 0.12); } .work-carousel-detail-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--white); padding: 12px 22px; border: 1px solid rgba(245, 243, 240, 0.25); border-radius: 999px; transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium), transform 0.4s var(--ease-premium); } .work-carousel-detail-link { cursor: pointer; font-family: inherit; background: none; } .work-carousel-detail-link svg { transition: transform 0.4s var(--ease-premium); } .work-carousel-detail-link:hover, .work-carousel-detail-link:focus-visible { border-color: var(--red); background: rgba(200, 16, 46, 0.12); transform: translateY(-2px); } .work-carousel-detail-link:hover svg { transform: translate(3px, -3px); } /* ---------- Mobile fallback (plain stacked list) ---------- */ .work-mobile-list { position: relative; z-index: 1; display: none; } .work-mobile-item { padding: clamp(28px, 6vw, 40px) 0; border-bottom: 1px solid rgba(245, 243, 240, 0.08); opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium); } .work-mobile-item.is-visible { opacity: 1; transform: translateY(0); } .work-mobile-visual { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border: 1px solid rgba(245, 243, 240, 0.1); background: linear-gradient(135deg, rgba(200, 16, 46, 0.14) 0%, transparent 55%), linear-gradient(180deg, #140b0d 0%, #0a0607 100%); margin-bottom: 18px; } .work-mobile-number { display: block; font-size: 12px; font-weight: 700; color: var(--red-dim); } .work-mobile-title { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(24px, 7vw, 34px); color: var(--white); margin-top: 6px; } .work-mobile-category { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--gray); margin-top: 8px; margin-bottom: 16px; } .work-mobile-item p { font-size: 15px; line-height: 1.65; color: var(--gray); margin-bottom: 18px; } .work-mobile-tech { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 20px; } .work-mobile-tech span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: rgba(154, 149, 153, 0.8); padding-bottom: 2px; border-bottom: 1px solid rgba(245, 243, 240, 0.12); } .work-mobile-link { display: inline-flex; align-items: center; gap: 10px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--white); background: none; padding: 11px 20px; border: 1px solid rgba(245, 243, 240, 0.25); border-radius: 999px; cursor: pointer; transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium); } .work-mobile-link:hover, .work-mobile-link:focus-visible { border-color: var(--red); background: rgba(200, 16, 46, 0.12); } /* ---------- Case study modal ---------- */ .case-study-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 40px); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-premium), visibility 0s linear 0.4s; } .case-study-modal.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease-premium), visibility 0s linear 0s; } .case-study-backdrop { position: absolute; inset: 0; background: rgba(6, 6, 6, 0.86); backdrop-filter: blur(6px); } .case-study-panel { position: relative; width: 100%; max-width: 720px; max-height: 86vh; overflow-y: auto; background: linear-gradient(180deg, #140b0d 0%, #0a0607 100%); border: 1px solid rgba(245, 243, 240, 0.14); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); padding: clamp(32px, 5vw, 56px); transform: translateY(24px); transition: transform 0.4s var(--ease-premium); } .case-study-modal.is-open .case-study-panel { transform: translateY(0); } .case-study-close { position: sticky; float: right; top: 0; margin-left: 16px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(245, 243, 240, 0.2); background: var(--black); color: var(--white); cursor: pointer; transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium), transform 0.4s var(--ease-premium); } .case-study-close:hover, .case-study-close:focus-visible { border-color: var(--red); background: rgba(200, 16, 46, 0.12); transform: rotate(90deg); } .case-study-number { display: block; font-family: 'Anton', sans-serif; font-size: clamp(16px, 2vw, 20px); color: var(--red-dim); margin-bottom: 6px; } .case-study-title { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1.02; color: var(--white); max-width: 90%; } .case-study-category { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--gray); margin-top: 10px; } .case-study-tech { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 20px; } .case-study-tech span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: rgba(154, 149, 153, 0.8); padding-bottom: 2px; border-bottom: 1px solid rgba(245, 243, 240, 0.12); } .case-study-sections { margin-top: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 24px; } .case-study-section h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--white); margin-bottom: 8px; } .case-study-section p { font-size: 15px; line-height: 1.7; color: var(--gray); } @media (max-width: 1024px) { .work-intro-row { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 768px) { /* Show the same 3D card carousel as desktop instead of the stacked list — same ring geometry, auto-rotation, drag and prev/next arrows, just scaled down to fit. Desktop rules above are untouched. */ .work-mobile-list { display: none; } .work-carousel-wrap { gap: 2px; } .work-carousel-nav { width: 36px; height: 36px; background: rgba(6, 6, 6, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .work-carousel { width: 236px; max-width: none; height: 290px; transform: scale(0.6); } } @media (prefers-reduced-motion: reduce) { .work-carousel-wrap, .work-carousel-detail, .work-mobile-item, .work-carousel-nav, .work-card-title { transition: none; } .work-carousel-wrap, .work-carousel-detail { opacity: 1; } .work-mobile-item { opacity: 1; transform: none; } .case-study-panel, .case-study-close { transition: none; } } /* ---------- Services ---------- */ .services-section { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--black) 0%, #0d0709 50%, var(--black) 100%); padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 64px) clamp(90px, 10vw, 140px); } /* Structured/systematic vs. About's atmospheric drift: a static faint vertical grid instead of animated glow — see project notes in CLAUDE.md context for the About/Services distinction. */ .services-grid-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(245, 243, 240, 0.035) 0, rgba(245, 243, 240, 0.035) 1px, transparent 1px, transparent 120px); } .services-glow { position: absolute; top: -8%; right: -6%; width: 40vw; height: 40vw; max-width: 600px; max-height: 600px; background: radial-gradient(circle, rgba(200, 16, 46, 0.14) 0%, rgba(200, 16, 46, 0) 70%); filter: blur(20px); z-index: 0; pointer-events: none; } .services-bg-word, .services-bg-number { position: absolute; z-index: 0; font-family: 'Anton', sans-serif; font-weight: 400; color: rgba(245, 243, 240, 0.05); white-space: nowrap; user-select: none; pointer-events: none; transition: opacity 0.3s ease; } .services-bg-word { left: 50%; bottom: 4%; transform: translateX(-50%); font-size: clamp(90px, 16vw, 260px); letter-spacing: 0.01em; } .services-bg-number { right: clamp(20px, 5vw, 64px); top: 6%; font-size: clamp(120px, 20vw, 340px); line-height: 1; color: rgba(200, 16, 46, 0.07); } @media (max-width: 1024px) { .services-bg-word, .services-bg-number { display: none; } } .services-reveal-mask { position: relative; z-index: 1; --sweep: 0%; clip-path: inset(0 calc(100% - var(--sweep)) 0 0); } .services-sweep-line { position: absolute; top: 0; bottom: 0; left: var(--sweep); width: 1px; background: var(--red); box-shadow: 0 0 16px 1px rgba(200, 16, 46, 0.7); z-index: 2; } .services-indicator { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(24px, 3vw, 40px); } .services-index { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); } .services-index-line { width: 28px; height: 1px; background: var(--red); } .services-label { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--gray); } .services-intro-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: end; margin-bottom: clamp(64px, 9vw, 110px); } .services-heading { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(40px, 6vw, 92px); line-height: 0.98; letter-spacing: 0.01em; color: var(--white); } .services-intro { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; color: var(--gray); max-width: 38ch; padding-bottom: clamp(4px, 1vw, 10px); } /* ---------- Service rows ---------- */ .services-list { position: relative; z-index: 1; border-top: 1px solid rgba(245, 243, 240, 0.1); } /* One continuous line behind every node dot — the "these are connected" read from a single element instead of per-row plumbing. */ .services-list::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(20px, 3vw, 34px); width: 1px; background: rgba(245, 243, 240, 0.08); z-index: 0; } .service-row { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(16px, 2.5vw, 32px); border-bottom: 1px solid rgba(245, 243, 240, 0.1); transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium); opacity: 0; transform: translateY(24px); } .service-row.is-visible { opacity: 1; transform: translateY(0); transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium), opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium); } .service-row:hover, .service-row.is-active { background: rgba(200, 16, 46, 0.04); border-color: rgba(200, 16, 46, 0.3); } .service-node { display: flex; align-items: center; justify-content: center; width: clamp(20px, 3vw, 34px); } .service-node-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(245, 243, 240, 0.25); box-shadow: none; transition: background 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium); } .service-row:hover .service-node-dot, .service-row.is-active .service-node-dot { background: var(--red); box-shadow: 0 0 10px 2px rgba(200, 16, 46, 0.65); } .service-row-main { position: relative; --cx: 50%; display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); padding: clamp(20px, 3vw, 30px) 0; cursor: pointer; } .service-row-main::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120px circle at var(--cx) 50%, rgba(200, 16, 46, 0.14), transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .service-row:hover .service-row-main::before, .service-row.is-active .service-row-main::before { opacity: 1; } .service-number { font-size: clamp(13px, 1.4vw, 15px); font-weight: 700; letter-spacing: 0.06em; color: var(--gray); transition: color 0.4s var(--ease-premium); } .service-row:hover .service-number, .service-row.is-active .service-number { color: var(--red); } .service-title { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(20px, 3vw, 34px); letter-spacing: 0.005em; color: var(--white); flex: 1; transition: letter-spacing 0.4s var(--ease-premium); } .service-row:hover .service-title, .service-row.is-active .service-title { letter-spacing: 0.015em; } .service-arrow { font-size: 18px; color: var(--gray); transition: transform 0.4s var(--ease-premium), color 0.4s var(--ease-premium); } .service-row:hover .service-arrow, .service-row.is-active .service-arrow { color: var(--red); transform: rotate(-45deg); } /* Grid-rows 0fr → 1fr trick: animates height without measuring scrollHeight in JS. Wrapper needs min-height: 0 on the child (default) + overflow hidden here to actually clip during the transition. */ .service-details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-premium); overflow: hidden; } .service-row:hover .service-details, .service-row.is-active .service-details { grid-template-rows: 1fr; } .service-details-inner { min-height: 0; } .service-description { font-size: clamp(14px, 1.4vw, 16px); line-height: 1.6; color: var(--gray); max-width: 46ch; padding-bottom: 4px; } .service-keywords { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--red-dim); padding-bottom: clamp(18px, 2.5vw, 26px); } .service-signal-line { position: relative; height: 1px; overflow: hidden; } .service-signal-pulse { position: absolute; top: 0; left: 0; width: 70px; height: 100%; background: linear-gradient(90deg, transparent, var(--red), transparent); transform: translateX(-100%); opacity: 0; } .service-row:hover .service-signal-pulse, .service-row.is-active .service-signal-pulse { animation: serviceSignalTravel 1.1s var(--ease-premium); } @keyframes serviceSignalTravel { 0% { transform: translateX(-100%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(calc(100% + 70px)); opacity: 0; } } /* ---------- Services closing statement ---------- */ .services-close { position: relative; z-index: 1; margin-top: clamp(64px, 9vw, 120px); text-align: center; opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-duration) var(--ease-premium), transform var(--reveal-duration) var(--ease-premium); } .services-close.is-visible { opacity: 1; transform: translateY(0); } .services-close-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--gray); margin-bottom: 20px; } .services-close-statement { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(26px, 4vw, 52px); line-height: 1.1; color: var(--white); } .services-close-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(24px, 3vw, 36px); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--white); padding-bottom: 4px; border-bottom: 1px solid rgba(245, 243, 240, 0.3); transition: border-color 0.4s var(--ease-premium), color 0.4s var(--ease-premium); } .services-close-cta:hover, .services-close-cta:focus-visible { border-color: var(--red); color: var(--red); } .services-close-cta svg { transition: transform 0.4s var(--ease-premium); } .services-close-cta:hover svg { transform: translate(3px, -3px); } @media (max-width: 1024px) { .services-intro-row { grid-template-columns: 1fr; align-items: start; gap: 20px; } } @media (max-width: 768px) { .service-row-main { flex-wrap: wrap; } .service-title { flex-basis: 100%; order: 1; font-size: clamp(20px, 6vw, 26px); } .service-number { order: 0; } .service-arrow { order: 2; margin-left: auto; } } @media (prefers-reduced-motion: reduce) { .services-reveal-mask { clip-path: none; } .services-sweep-line { display: none; } .service-row { opacity: 1; transform: none; transition: none; } .service-details { transition: none; } .service-signal-pulse { animation: none; } .services-close { transition: opacity 0.3s ease; transform: none; } } /* ---------- Contact ---------- */ .contact-section { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 45% at 85% 15%, rgba(200, 16, 46, 0.16), transparent 65%), linear-gradient(180deg, var(--black) 0%, #170a0d 45%, var(--black) 100%); padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 64px) clamp(90px, 10vw, 140px); } .contact-grid-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(245, 243, 240, 0.03) 0, rgba(245, 243, 240, 0.03) 1px, transparent 1px, transparent 120px); } .contact-glow { position: absolute; bottom: -14%; left: -8%; width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; background: radial-gradient(circle, rgba(200, 16, 46, 0.16) 0%, rgba(200, 16, 46, 0) 70%); filter: blur(16px); z-index: 0; pointer-events: none; } .contact-bg-word { position: absolute; z-index: 0; right: -4vw; bottom: -6vw; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(120px, 22vw, 380px); line-height: 0.9; letter-spacing: 0.01em; color: rgba(122, 17, 32, 0.16); white-space: nowrap; user-select: none; pointer-events: none; } @media (max-width: 1024px) { .contact-bg-word { font-size: clamp(90px, 30vw, 200px); } } /* ---------- Connection Handshake entrance ---------- */ .contact-handshake { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0; height: 48px; margin-bottom: clamp(24px, 4vw, 40px); } .handshake-node { width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: 0; flex-shrink: 0; } .handshake-line { height: 1px; width: clamp(60px, 18vw, 220px); background: linear-gradient(90deg, transparent, var(--red)); transform: scaleX(0); } .handshake-line-left { transform-origin: left; } .handshake-line-right { transform-origin: right; background: linear-gradient(90deg, var(--red), transparent); } .handshake-pulse { position: relative; width: 8px; height: 8px; flex-shrink: 0; } .handshake-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--red); box-shadow: 0 0 20px 4px rgba(200, 16, 46, 0.8); opacity: 0; transform: scale(0.4); } /* GSAP can't target a pseudo-element directly, so the timeline just adds this class and a plain CSS animation (one-shot, forwards) takes over. */ .handshake-pulse.is-active::after { animation: handshakePulseOnce 0.6s ease-out forwards; } @keyframes handshakePulseOnce { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.4); } } .handshake-label { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; color: var(--red-dim); opacity: 0; white-space: nowrap; } /* ---------- Layout ---------- */ .contact-body { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(48px, 6vw, 100px); align-items: start; } .contact-left { position: relative; } .contact-indicator, .contact-intro, .contact-status, .contact-details, .contact-links, .form-row { opacity: 0; } .contact-indicator { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 3vw, 32px); } .contact-index { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--red); } .contact-index-line { width: 28px; height: 1px; background: var(--red); } .contact-label { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--gray); } .contact-heading { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: 0.01em; color: var(--white); margin-bottom: clamp(20px, 3vw, 30px); } .contact-reveal-line { display: block; overflow: hidden; } .contact-reveal-line span { display: block; transform: translateY(110%); filter: blur(6px); } .contact-intro { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; color: var(--gray); max-width: 40ch; margin-bottom: clamp(28px, 4vw, 44px); } .contact-status { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--white); margin-bottom: clamp(32px, 4vw, 48px); } .status-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; } .status-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--red); opacity: 0; animation: statusPulse 2.2s ease-out infinite; } @keyframes statusPulse { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } } .contact-details { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2.5vw, 26px) 0; border-top: 1px solid rgba(245, 243, 240, 0.1); border-bottom: 1px solid rgba(245, 243, 240, 0.1); margin-bottom: clamp(32px, 4vw, 48px); } .contact-detail-row { display: flex; align-items: baseline; gap: 14px; } .contact-detail-label { width: 90px; flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--gray); } .contact-detail-value { font-size: 15px; font-weight: 700; color: var(--white); } .contact-links { display: flex; flex-direction: column; } .contact-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(245, 243, 240, 0.1); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--gray); transition: color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium); } .contact-link:hover, .contact-link:focus-visible { color: var(--white); border-color: var(--red); } .contact-link svg { transition: transform 0.4s var(--ease-premium); } .contact-link:hover svg { transform: translate(3px, -3px); } /* ---------- Form ---------- */ .contact-form { position: relative; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 30px); } .form-row { transform: translateY(16px); } .form-field { position: relative; --cx: 50%; } .form-field label, .form-group-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--gray); margin-bottom: 10px; transition: color 0.4s var(--ease-premium); } .req { color: var(--red-dim); } .form-field:focus-within label { color: var(--white); } .form-field input, .form-field textarea, .form-field select { width: 100%; background: none; border: none; border-bottom: 1px solid rgba(245, 243, 240, 0.18); color: var(--white); font-family: 'Manrope', sans-serif; font-size: 16px; padding: 10px 2px; transition: border-color 0.4s var(--ease-premium); resize: vertical; } .form-field textarea { min-height: 110px; } .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(154, 149, 153, 0.55); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--red); } /* Cursor-local brightening along the bottom border — a thin traveling highlight, not a full spotlight (see .service-row-main for the sibling pattern in Services). */ .form-field::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; width: 130px; background: linear-gradient(90deg, transparent, var(--red), transparent); transform: translateX(calc(var(--cx) - 65px)); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .form-field:hover::after { opacity: 0.9; } .form-field.is-valid label::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--white); margin-left: 8px; vertical-align: middle; } .form-field.is-invalid input, .form-field.is-invalid textarea { border-color: var(--red); } .form-error { display: block; min-height: 16px; font-size: 12px; color: var(--red); margin-top: 6px; } /* Native select, restyled to match the underline-input language. */ .form-field select { appearance: none; -webkit-appearance: none; cursor: pointer; } .form-field select option { background: var(--charcoal); color: var(--white); } .form-field:has(select)::before { content: ''; position: absolute; right: 4px; bottom: 16px; width: 8px; height: 8px; border-right: 1px solid var(--gray); border-bottom: 1px solid var(--gray); transform: rotate(45deg); pointer-events: none; } .chip-group { display: flex; flex-wrap: wrap; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--gray); background: none; border: 1px solid rgba(245, 243, 240, 0.18); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium), color 0.4s var(--ease-premium); } .chip:hover, .chip:focus-visible { border-color: rgba(245, 243, 240, 0.4); color: var(--white); } .chip[aria-pressed="true"], .chip[aria-checked="true"] { border-color: var(--red); background: rgba(200, 16, 46, 0.1); color: var(--white); } .chip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); opacity: 0; transition: opacity 0.3s ease; } .chip[aria-pressed="true"] .chip-dot, .chip[aria-checked="true"] .chip-dot { opacity: 1; } .contact-submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; padding: 18px 30px; background: var(--red); color: var(--white); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; border: none; border-radius: 999px; cursor: pointer; overflow: hidden; transition: background 0.4s var(--ease-premium), transform 0.15s ease-out; will-change: transform; } .contact-submit::before { content: ''; position: absolute; inset: 0; background: #e01535; transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-premium); z-index: 0; } .contact-submit:hover::before, .contact-submit:focus-visible::before { transform: scaleX(1); } .contact-submit-text, .contact-submit svg { position: relative; z-index: 1; } .contact-submit svg { transition: transform 0.4s var(--ease-premium); } .contact-submit:hover svg { transform: translate(3px, -3px); } .contact-submit:disabled { cursor: default; } @media (max-width: 1024px) { .contact-body { grid-template-columns: 1fr; gap: clamp(56px, 8vw, 80px); } } @media (max-width: 640px) { .contact-detail-label { width: 76px; } .chip { font-size: 11px; padding: 8px 14px; } } @media (prefers-reduced-motion: reduce) { .contact-handshake { display: none; } .contact-indicator, .contact-intro, .contact-status, .contact-details, .contact-links, .form-row { opacity: 1; transform: none; } .contact-reveal-line span { transform: none; filter: none; } .status-dot::after { animation: none; } .form-field::after { transition: none; } } /* ---------- Footer ---------- */ .site-footer { position: relative; background: var(--black); border-top: 1px solid rgba(245, 243, 240, 0.1); padding: clamp(40px, 5vw, 56px) clamp(20px, 5vw, 64px) clamp(24px, 3vw, 32px); } .footer-top { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 48px); justify-content: space-between; padding-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid rgba(245, 243, 240, 0.08); } .footer-brand { display: flex; flex-direction: column; gap: 6px; } .footer-name { font-family: 'Anton', sans-serif; font-size: 18px; letter-spacing: 0.02em; color: var(--white); } .footer-role, .footer-business { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--gray); } .footer-links, .footer-nav { display: flex; flex-direction: column; gap: 10px; } .footer-links a, .footer-nav a { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--gray); transition: color 0.4s var(--ease-premium); } .footer-links a:hover, .footer-nav a:hover, .footer-links a:focus-visible, .footer-nav a:focus-visible { color: var(--red); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: clamp(20px, 2.5vw, 26px); font-size: 11px; letter-spacing: 0.08em; color: rgba(154, 149, 153, 0.7); } @media (max-width: 640px) { .footer-top { flex-direction: column; } .footer-bottom { flex-direction: column; align-items: flex-start; } }