html,body{margin:0;padding:0;background:#F5F5F3;}
*{box-sizing:border-box;}
/* project columns: a screenshot per column under a frosted-glass overlay */
[data-proj]{position:relative;display:block;overflow:hidden;min-width:0;text-decoration:none;background:#131210;flex:1 1 0;transition:flex-grow .6s cubic-bezier(.55,0,.15,1);}
[data-proj]:not(:last-child){border-right:1px solid rgba(245,245,243,.10);}
[data-proj]:hover{flex-grow:4;}

/* the screenshot itself, gently easing out of a scale on hover */
.shot{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .7s cubic-bezier(.55,0,.15,1);}
[data-proj]:hover .shot{transform:scale(1);}

/* frosted glass: heavy + desaturated at rest so the four very different shots
   read as one set; clears and re-saturates on hover to reveal the real thing */
.glass{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,19,17,.40),rgba(14,13,11,.60));-webkit-backdrop-filter:blur(16px) saturate(.58) brightness(.7);backdrop-filter:blur(16px) saturate(.58) brightness(.7);box-shadow:inset 0 1px 0 rgba(245,245,243,.07),inset 0 0 70px rgba(0,0,0,.4);transition:background .55s ease,-webkit-backdrop-filter .55s ease,backdrop-filter .55s ease;}
[data-proj]:hover .glass{background:linear-gradient(180deg,rgba(20,19,17,.05),rgba(13,12,10,.28) 55%,rgba(9,8,7,.58));-webkit-backdrop-filter:blur(2px) saturate(1) brightness(.94);backdrop-filter:blur(2px) saturate(1) brightness(.94);}

/* scanline texture + a bottom scrim that keeps the copy legible on any shot */
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.07;background-image:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px);}
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(10,9,8,.92) 0%,rgba(10,9,8,.8) 14%,rgba(10,9,8,.42) 34%,rgba(10,9,8,0) 60%);}

/* lift the text layers above the glass + scrim, and keep them readable */
[data-proj]>.pnum,[data-proj]>.fout,[data-proj]>.fin{z-index:3;}
[data-proj]>.pbar{z-index:4;}
[data-proj]>.pnum,[data-proj] .fout{text-shadow:0 1px 10px rgba(0,0,0,.55);}
[data-proj]>.fin{text-shadow:0 1px 12px rgba(0,0,0,.55);}

/* reveal-on-hover: vertical label fades out, full info fades in */
[data-proj] .fin{opacity:0;transition:opacity .4s ease .12s;}
[data-proj]:hover .fin{opacity:1;}
[data-proj] .fout{opacity:1;transition:opacity .3s ease;}
[data-proj]:hover .fout{opacity:0;}

@media (prefers-reduced-motion:reduce){.shot,[data-proj]:hover .shot{transform:none;}}
/* star ascii block (shared by both languages + the scramble overlay) */
.star{margin:0;font-family:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;color:#181816;font-size:clamp(9px,0.82vw,12px);line-height:1.7;letter-spacing:.01em;font-weight:800;-webkit-text-stroke:0.2px #181816;tab-size:8;-moz-tab-size:8;white-space:pre;}

/* language switch */
.lang-hu{display:none;}
[data-lang="hu"] .lang-hu{display:revert;}
[data-lang="hu"] .lang-en{display:none;}

/* name: first/last swap places per language (animated via FLIP in script.js) */
.name-part{display:inline-block;}
[data-lang="hu"] .name-part[data-part="first"]{order:1;}
[data-lang="hu"] .name-part[data-part="last"]{order:0;}

/* language toggle: a single knob that slides between EN and HU */
.lang-toggle{position:relative;width:86px;height:26px;border:1px solid rgba(24,24,22,.34);border-radius:13px;background:#F5F5F3;padding:0;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;}
.lang-knob{position:absolute;top:3px;left:3px;width:40px;height:20px;border-radius:10px;background:#181816;transition:left .28s cubic-bezier(.5,0,.2,1);}
[data-lang="hu"] .lang-knob{left:43px;}
.lang-track{position:absolute;inset:0;display:flex;align-items:center;z-index:1;}
.lang-label{flex:1;text-align:center;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em;color:#74716A;transition:color .28s cubic-bezier(.5,0,.2,1);}
[data-lang="en"] .lang-label[data-lbl="en"]{color:#F5F5F3;}
[data-lang="hu"] .lang-label[data-lbl="hu"]{color:#F5F5F3;}
/* social link hover */
.social-link{color:#74716A;text-decoration:none;transition:color .2s ease;}
.social-link:hover{color:#181816;}