/* Full portfolio, with a separate motion layer. No rack or shutter intro. */
:root { --motion-gold:#e1c38b; }
html { scroll-padding-top:100px; }
main:focus { outline:none; }
.topbar { position:fixed; transition:background .4s, padding .4s,box-shadow .4s; }
.topbar.is-scrolled { padding-top:14px;padding-bottom:14px;background:rgba(5,8,13,.86);backdrop-filter:blur(24px);box-shadow:0 1px 0 #a4b2ba18;color:#ede3e4; }
[data-theme=light] .topbar.is-scrolled { background:rgba(245,244,240,.88);color:#17222c; }
.brand { display:flex; flex-direction:column; gap:4px; }
.preview-label { font:8px/1.2 monospace;letter-spacing:.15em;opacity:.65;white-space:nowrap; }
.topbar nav { gap:27px; }
.topbar nav a { display:flex;align-items:center;gap:7px;transition:color .3s; }
.nav-icon { width:17px;height:17px;opacity:.48;transition:opacity .3s,transform .4s var(--ease-out); }
nav a:hover .nav-icon,nav a[aria-current] .nav-icon { opacity:1;transform:translateY(-2px); }
nav a[aria-current] { color:var(--motion-gold); }
[data-theme=light] .inner-page nav a[aria-current] { color:#77612d; }
.theme-toggle svg { width:20px;height:20px;display:block;transition:transform .7s var(--ease-out); }
.theme-toggle:hover svg { transform:rotate(60deg); }
.hero-cinema { animation:whole-frame 1.6s var(--ease-out) both; border-radius:0 0 calc(var(--hero-progress,0)*44px) calc(var(--hero-progress,0)*44px); }
@keyframes whole-frame { from { clip-path:inset(4% 3% round 44px);opacity:.3; } to { clip-path:inset(0 round 0px);opacity:1; } }
.hero-cinema .first-name { animation:hero-type 1.3s var(--ease-out) .15s both; }
.hero-cinema .last-name { animation:hero-type 1.4s var(--ease-out) .3s both; }
@keyframes hero-type { from { opacity:0;transform:translateY(75px) rotate(2deg); } to { opacity:1;transform:none; } }
.hero-cinema .hero-image { transition:opacity 1.4s ease,transform 7s linear; }
.hero-cinema .hero-shade { background:linear-gradient(180deg,#05080d55,transparent 50%,#05080d77); }
.hero-cinema .hero-tagline { animation-duration:1s;animation-delay:.55s!important; }
.reveal { transform:translate3d(0,45px,0);transition:opacity .8s var(--ease-out) var(--stagger,0ms),transform 1s var(--ease-out) var(--stagger,0ms); }
.reveal.in { transform:none; }
.motion-heading .motion-word { transition-duration:1s; }
.section-statement,.footer-name { translate:0 var(--drift,0px); }
.project-card.reveal,.all-projects .project-card.reveal { opacity:1!important;transform:none!important;filter:none!important; }
.project-card .project-image,.project-card.reveal .project-image,.all-projects .project-card .project-image { clip-path:none!important;transform:translateY(24px) scale(.96);opacity:.2;transition:transform 1s var(--ease-out),opacity .7s var(--ease-out),box-shadow .5s; }
.project-card.in .project-image,.all-projects .project-card.in .project-image { opacity:1;transform:none; }
.project-card .cover-art { clip-path:none!important;opacity:1!important;transform:none!important; }
.project-card .cover-editorial-copy h3 span { transform:none!important;opacity:1!important; }
.project-card .cover-art img { transition:transform 1.25s var(--ease-out),filter .7s; }
.project-card .hover-disc { width:84px;height:84px;border-radius:26px;background:#e9dec6;color:#07111b;backdrop-filter:blur(12px);box-shadow:0 10px 55px #0005;transform:translate(-50%,-50%) scale(.5);transition:opacity .3s,transform .45s var(--ease-out);font-size:11px; }
@media (hover:hover) and (pointer:fine) {
 .project-card.in:hover .project-image { transform:translateY(-6px);opacity:1!important;box-shadow:0 28px 65px #0004; }
 .project-card:hover .cover-art img { transform:scale(1.08); }
 .project-card:hover .hover-disc { opacity:1;transform:translate(-50%,-50%) scale(1); }
 .project-card:hover .cover-editorial-copy { transform:translateY(-6px); }
 .connect-icon,.theme-toggle,.black-button,.outline-button,.frame-open { translate:var(--mx,0px) var(--my,0px);transition:translate .3s var(--ease-out),background .4s,border .4s,box-shadow .4s; }
 .connect-icon:hover svg { transform:translateY(-3px) rotate(-8deg) scale(1.1); }
 .skill-card:hover { transform:translateY(-8px);border-color:#e1c38b44; }
 .skill-card:hover svg { transform:rotate(-8deg) scale(1.12); }
 .skill-card:hover::after { opacity:1; }
}
.cover-editorial-copy { transition:transform .7s var(--ease-out); }
.skill-card { position:relative;border:1px solid transparent;transition:transform .6s var(--ease-out),border-color .6s;overflow:hidden; }
.skill-card:after { content:'';position:absolute;inset:0;background:radial-gradient(220px circle at var(--shine-x,50%) var(--shine-y,50%),#c3d4e718,transparent);opacity:0;transition:opacity .4s;pointer-events:none; }
.skill-card svg,.connect-icon svg { transition:transform .7s var(--ease-out); }
.job { position:relative;transition:border-color .6s; }
.job:before { content:'';position:absolute;inset-inline-start:0;bottom:-1px;width:0;height:2px;background:var(--motion-gold);transition:width 1.3s var(--ease-out); }
.job.job-current:before { width:100%; }
.job h3 { transition:color .5s; }
.job.job-current h3 { color:var(--motion-gold); }
[data-theme=light] .job.job-current h3 { color:#7d632b; }
.backstage-frame { position:relative;aspect-ratio:3/4; }
.backstage-frame>img { width:100%;height:100%;object-fit:cover;transition:filter .5s; }
.frame-open { position:absolute;inset:0;margin:auto;width:88px;height:88px;border:1px solid #ffffff70;border-radius:26px;display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;background:#1019237a;backdrop-filter:blur(16px);color:#fff;cursor:pointer;z-index:4;box-shadow:0 10px 60px #0002; }
.frame-open svg { width:27px;height:27px;transition:transform .5s var(--ease-out); }
.frame-open span { font-size:10px;letter-spacing:.1em; }
.frame-open:hover { background:#e1c38be8;color:#07111b; }
.frame-open:hover svg { transform:scale(1.2) rotate(-5deg); }
.personal-cat,.travel-moment { position:relative; }
.photo-open { inset:auto 22px 22px auto;width:52px;height:52px;border-radius:18px; }
.personal-cat .photo-open { bottom:auto;top:22px; }
#project-dialog { width:min(1160px,calc(100% - 48px));max-height:90svh;border-radius:28px;border:1px solid #8196aa25; }
#project-dialog[open] { animation:none; }
#project-dialog::backdrop { background:#01050bd9;backdrop-filter:blur(18px);animation:cinema-backdrop .5s ease both; }
@keyframes cinema-backdrop { from { opacity:0; } to { opacity:1; } }
#dialog-content { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:0;align-items:start;min-height:500px; }
#dialog-content>video { width:100%;height:76svh;max-height:800px;object-fit:contain;align-self:center;border-radius:22px;margin:20px 0 20px 20px;max-width:calc(100% - 20px);background:#020509; }
.dialog-copy { padding:60px 34px 35px; }
.dialog-copy h2 { font-size:clamp(26px,3vw,40px);line-height:1.22; }
.dialog-copy>p { font-size:16px; }
.dialog-close { position:sticky;top:16px;float:right;margin:16px 16px -62px 0;border-radius:15px;background:#ede3e4;color:#07111b;z-index:30;transition:transform .4s var(--ease-out); }
.dialog-close:hover { transform:rotate(90deg); }
.cinema-ghost { overflow:hidden;border-radius:28px;transform-origin:center center; }
.cinema-ghost .cover-art,.cinema-ghost img { width:100%;height:100%;object-fit:cover;clip-path:none!important;opacity:1!important; }
.cinema-ghost .cover-art { position:absolute;inset:0; }
.cinema-ghost .cover-editorial-copy h3 span { opacity:1!important;transform:none!important; }
.cinema-ghost img { transform:none!important; }
.cinema-photo { height:78svh;width:100%;object-fit:contain;margin:20px 0; }
#dialog-content:has(.cinema-photo) { grid-template-columns:minmax(0,1.5fr) 1fr; }
.credits-list { margin-bottom:15px; }
.credits-list>div { transition:background .3s; }
.credits-list>div:hover { background:#a4b2ba0c; }
@media(min-width:1000px) { .backstage-card:nth-child(even) { margin-top:90px; } }
@media(max-width:1050px) { .topbar nav{gap:17px}.nav-icon{display:none}.topbar{gap:18px} }
@media(max-width:760px) {
 #dialog-content,#dialog-content:has(.cinema-photo) { display:block;min-height:0; }
 #project-dialog { width:calc(100% - 20px);max-height:93svh;border-radius:24px; }
 #dialog-content>video { height:auto;max-height:65svh;margin:16px auto 0;width:auto;max-width:calc(100% - 24px); }
 .cinema-photo { height:auto;max-height:72svh;object-fit:contain;margin:16px 0 0; }
 .dialog-copy { padding:24px; }
 .dialog-close { top:12px;margin:12px 12px -55px 0; }
 .hero-cinema { animation-duration:1.1s; }
 .backstage-frame { aspect-ratio:4/5; }
 .frame-open { width:70px;height:70px;border-radius:23px; }
 .photo-open { width:46px;height:46px;border-radius:16px; }
 .preview-label { font-size:7px; }
 .topbar.open nav a { font-size:22px;gap:16px; }
 .topbar.open .nav-icon { display:block;width:23px;height:23px; }
 .topbar nav a[aria-current] { color:var(--motion-gold); }
 [data-theme=light] .topbar.open nav a[aria-current] { color:var(--motion-gold); }
 .topbar.open nav { animation:menu-deploy .5s var(--ease-out) both;transform-origin:top; }
 .topbar.open nav a { animation:menu-item .55s var(--ease-out) both; }
 .topbar.open nav a:nth-child(2) { animation-delay:.06s; }
 .topbar.open nav a:nth-child(3) { animation-delay:.12s; }
 .topbar.open nav a:nth-child(4) { animation-delay:.18s; }
}
@media(prefers-reduced-motion:reduce) {
 *,*:before,*:after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
 .reveal,.project-card .project-image,.all-projects .project-card .project-image,.motion-word { opacity:1!important;transform:none!important;clip-path:none!important; }
 .section-statement,.footer-name,.connect-icon,.theme-toggle,.black-button,.outline-button,.frame-open { translate:none!important; }
 .hero-cinema { clip-path:none; }
}

@keyframes menu-deploy { from { opacity:0;transform:translateY(-12px) scale(.95); } to { opacity:1;transform:none; } }
@keyframes menu-item { from { opacity:0;translate:0 12px; } to { opacity:1;translate:0 0; } }

/* Stable, immediately usable player; the media never waits behind a cloned cover. */
#project-dialog { overflow-x:hidden;scrollbar-gutter:stable; }
#project-dialog::backdrop { animation-duration:240ms; }
#dialog-content { min-height:0; }
.cinema-stage { position:relative;height:min(76svh,800px);min-width:0;margin:20px 0 20px 20px;border-radius:22px;overflow:hidden;background:#020509;align-self:start; }
.cinema-stage>video { display:block;width:100%;height:100%;max-height:none;margin:0;object-fit:contain;background:#020509;border-radius:0; }
.cinema-status { position:absolute;top:50%;left:50%;translate:-50% -50%;max-width:90%;padding:12px 18px;border:1px solid #ffffff35;border-radius:14px;background:#101923ec;color:#fff;z-index:2;font-size:14px;line-height:1.8; }
.cinema-status[hidden] { display:none; }
.fa .cinema-stage { margin:20px 20px 20px 0; }
.fa,.fa button,.fa input,.fa textarea,.fa select,.fa small,.fa .section-kicker,.fa .hero-tagline,.fa .sample-tag,.fa .outline-button,.fa .black-button,.fa .text-link,.fa .slot-label,.fa .hover-disc,.fa .project-caption small,.fa .dialog-copy small { font-family:Vazirmatn,Arial,sans-serif;letter-spacing:normal; }
.fa h1,.fa h2,.fa h3,.fa .first-name,.fa .last-name { font-family:Vazirmatn,Vazirmatn,sans-serif; }
.fa .brand,.fa .footer-name { font-family:'DM Sans',Arial,sans-serif; }
.fa p,.fa .dialog-copy p { line-height:1.95;font-weight:400; }
.fa .credits-list p { line-height:1.8; }
@media(max-width:760px) {
 .cinema-stage,.fa .cinema-stage { margin:14px 12px 0;height:60svh;border-radius:18px; }
 #project-dialog { scrollbar-gutter:auto; }
 .fa .dialog-copy { text-align:start; }
 .fa .page-intro { line-height:1.9; }
}

.cinema-stage.is-landscape,.fa .cinema-stage.is-landscape { height:auto;aspect-ratio:16/9; }

/* Refined identity and unboxed cover lettering. */
.fa h1,.fa h2,.fa h3,.fa .first-name,.fa .last-name,.fa .projects .moody-cover .cover-editorial-copy h3 { font-family:Vazirmatn,Arial,sans-serif; }
.cover-signature { background:transparent;border:0;border-radius:0;padding:0;box-shadow:none; }
.hero-tagline { font-size:clamp(13px,1.3vw,19px);line-height:1.65; }
.hero-caption { justify-content:flex-end; }