/* FC refinement: content first, consistent motion, readable video surfaces. */
.hero-description{max-width:560px;font-size:20px;line-height:1.55;color:#e4e2d8}
.hero-support{max-width:470px;color:#b3b5ac;font-size:15px;line-height:1.7;margin-top:14px}
.hero-copy,.hero-visual{transition:opacity .5s var(--ease),transform .55s var(--ease),translate .55s var(--ease)}
.hero h1 .gold:after{animation:line-enter .55s .1s var(--ease) both}
.js .reveal{transform:translateY(16px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.js .reveal.is-visible{transform:none}
.project-offset.reveal{transition-delay:.07s}
.hero-slide{transition:opacity .5s ease}
.hero-slide .slide-title,.hero-slide .slide-kicker,.hero-slide .slide-view{transition-duration:.5s}
.button{transition:background .2s,color .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button:before{transition-duration:.35s}
.shader-background{background:radial-gradient(ellipse at 65% 42%,#d0b47706,transparent 65%)}
.project-image:after{background:linear-gradient(180deg,#0002 0%,transparent 35%,#0008 65%,#000d 100%)}
.desktop-nav{gap:24px}

:focus-visible{outline:2px solid #ead7a7;outline-offset:5px}
.fc-testimonials__video-note{font-size:12px;color:#b3b5ac;line-height:1.6;margin-top:9px}
.fc-testimonials__transcript{border-top:1px solid #3c3b32;margin-top:20px;padding-top:10px}
.fc-testimonials__transcript summary{cursor:pointer;padding:10px 0;font-size:14px;color:#e2c98f;min-height:44px}
.fc-testimonials__transcript div{max-width:65ch;font-size:14px;line-height:1.8;color:#b9bbb1;padding:6px 0 10px}
.fc-testimonials__transcript p+p{margin-top:12px}
@media(max-width:800px){.hero-description{font-size:19px;max-width:480px}.hero-support{font-size:15px;max-width:440px}.shader-background canvas{display:none}.shader-background{background:radial-gradient(ellipse at 60% 45%,#d0b4770a,transparent 70%)}}
@media(max-width:560px){.hero-description{font-size:18px;margin-top:24px}.hero-support{font-size:14px;margin-top:12px}.hero-actions{margin-top:23px}.projects .project-image{aspect-ratio:1/1.1}.project-featured .project-image{aspect-ratio:1/1.1}.project-open{bottom:22px}.project-image-bottom{bottom:99px}}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.button:hover{transform:none}.mobile-whatsapp{transition:none}}

/* Logo reveal, pointer typography and cinematic section entrances. */
.site-intro{pointer-events:none;transition:opacity .7s ease,visibility .7s,transform .85s var(--ease);transform:translateY(-3%)}
.intro-playing .site-intro{pointer-events:auto;transform:translateY(0)}
.intro-playing .intro-logo{animation:fc-logo-arrive .9s var(--ease) both}
.intro-playing .intro-frame i{animation:frame-lock 1s var(--ease) both}
.intro-playing .intro-track span{animation:studio-start 1.35s cubic-bezier(.35,.05,.22,1) forwards}
.intro-name{animation:fc-intro-label .8s .2s both}
.intro-skip{position:absolute;right:5.2%;bottom:35px;background:transparent;border-bottom:1px solid #d0b47766;padding:12px 0;color:#d1be91;font-size:13px;letter-spacing:.03em}
.intro-skip span{margin-left:16px}
.hero-copy{transition:opacity .85s var(--ease),transform 1s var(--ease)}
.hero-visual{transition:opacity .9s .12s var(--ease),translate 1.1s .12s var(--ease)}
.js .reveal{transform:translateY(30px);transition:opacity .85s var(--ease),transform 1s var(--ease)}
.js .reveal.is-visible{transform:none}
.project-offset.reveal{transition-delay:.15s}
.fc-testimonials__copy.reveal{transition-delay:.05s}
.fc-testimonials__list.reveal{transition-delay:.15s}
.hero h1 .tech-word-light{color:var(--white)}
.hero h1 .tech-letter{position:relative;animation:none;transform:translate(var(--hover-x,0px),var(--hover-y,0px));text-shadow:0 0 22px rgba(208,180,119,var(--hover-glow,0));transition:transform .65s var(--ease),text-shadow .65s ease;will-change:auto}
.hero h1.is-pointer-active .tech-letter{transition-duration:.3s,.35s}
@keyframes fc-logo-arrive{from{opacity:0;transform:translateY(18px) scale(.86);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fc-intro-label{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:560px){.intro-skip{right:6%;bottom:max(25px,env(safe-area-inset-bottom))}.intro-logo{width:155px}}
@media(prefers-reduced-motion:reduce){.site-intro{display:none}.hero h1 .tech-letter{animation:none!important;transform:none!important;text-shadow:none!important}.js .reveal{opacity:1;transform:none}}

/* Quiet gold lighting, drafting grid and contour rings: no JS or image download. */
.hero .shader-background{inset:0;opacity:1;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent);background:radial-gradient(ellipse at 83% 32%,rgba(208,180,119,.12),transparent 48%),radial-gradient(ellipse at 22% 76%,rgba(208,180,119,.035),transparent 50%)}
.hero .shader-background:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(208,180,119,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(208,180,119,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse at 82% 42%,#000,transparent 68%);-webkit-mask-image:radial-gradient(ellipse at 82% 42%,#000,transparent 68%)}
.hero .shader-background:after{content:'';position:absolute;width:760px;height:470px;left:48%;top:3%;border:1px solid rgba(208,180,119,.075);border-radius:50%;transform:rotate(-24deg);box-shadow:0 0 0 55px rgba(208,180,119,.025),0 0 0 110px rgba(208,180,119,.015)}
@media(max-width:800px){.hero .shader-background{background:radial-gradient(ellipse at 92% 36%,rgba(208,180,119,.095),transparent 55%),radial-gradient(ellipse at 8% 80%,rgba(208,180,119,.025),transparent 48%)}.hero .shader-background:before{background-size:56px 56px;opacity:.6}.hero .shader-background:after{width:500px;height:340px;left:35%;top:28%;opacity:.65}}
@media(prefers-reduced-motion:reduce){.hero .shader-background{display:block}}

/* Fade the artwork at both horizontal edges; keep contours as lines, not bands. */
.hero .shader-background{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 78%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 78%,transparent);-webkit-mask-composite:source-in}
.hero .shader-background:after{width:clamp(480px,55vw,760px);height:clamp(320px,34vw,470px);left:47%;top:5%;box-shadow:none;border-color:rgba(208,180,119,.045)}
@media(max-width:800px){.hero .shader-background:after{width:480px;height:340px;left:25%;top:28%;opacity:.5}}

/* Intro atmosphere: soft gold light and a quiet technical texture. */
.site-intro{isolation:isolate;background:radial-gradient(ellipse at 50% 46%,rgba(208,180,119,.075),transparent 43%),radial-gradient(ellipse at 72% 16%,rgba(208,180,119,.028),transparent 50%),#0b0b0b}
.site-intro:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(208,180,119,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(208,180,119,.026) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at center,#000 12%,transparent 67%);-webkit-mask-image:radial-gradient(ellipse at center,#000 12%,transparent 67%)}
.site-intro:after{content:'';position:absolute;width:min(72vw,780px);height:min(52vw,510px);left:50%;top:46%;z-index:-1;pointer-events:none;border:1px solid rgba(208,180,119,.045);border-radius:50%;transform:translate(-50%,-50%) rotate(-22deg);background:radial-gradient(ellipse at center,rgba(208,180,119,.025),transparent 64%)}
@media(max-width:560px){.site-intro:before{background-size:56px 56px}.site-intro:after{width:92vw;height:75vw}}
