*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:root{--off-white:#F0F0F0;--carbon:#1A1A1A;--graphite:#2C2C2C;--steel:#4A4A4A;--ash:#6B6B6B;--neon-chartreuse:#DFFF00;--seam:#111111;--font-spine:'Anton', sans-serif;--font-mono:'Space Mono', monospace;--ease-heavy:cubic-bezier(0.77, 0, 0.175, 1);--duration:0.8s}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}body{background:var(--carbon);color:var(--off-white);overflow:hidden;overflow-x:hidden;height:100vh;width:100%}main.track{display:flex;width:100%;height:100vh;overflow:hidden;gap:0}article.panel{flex:1;position:relative;overflow:hidden;cursor:pointer;border-right:1px solid var(--seam);border-radius:0;transition:flex var(--duration) var(--ease-heavy)}article.panel:last-child{border-right:none}.panel__bg{position:absolute;inset:0;z-index:1;overflow:hidden}.panel__bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:0;filter:brightness(0.4) grayscale(100%);transform:scale(1.05);transition:filter var(--duration) var(--ease-heavy),transform var(--duration) var(--ease-heavy)}.panel__bg::after{content:'';position:absolute;inset:0;background:linear-gradient( 180deg,rgba(26,26,26,0.5) 0%,transparent 30%,transparent 60%,rgba(26,26,26,0.6) 100% );z-index:2;transition:opacity var(--duration) var(--ease-heavy)}.panel__index{position:absolute;top:42px;left:50%;transform:translateX(-50%);z-index:10;font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--off-white);opacity:0.35;transition:opacity var(--duration) var(--ease-heavy);white-space:nowrap}.spine{position:absolute;bottom:60px;left:50%;transform:translateX(-50%) rotate(180deg);z-index:10;writing-mode:vertical-rl;font-family:var(--font-spine);font-size:clamp(2rem,4vw,3.5rem);text-transform:uppercase;color:var(--off-white);letter-spacing:0.05em;line-height:1;white-space:nowrap;opacity:1;transition:opacity 0.4s var(--ease-heavy),transform 0.4s var(--ease-heavy);pointer-events:none}.details{position:absolute;bottom:48px;left:48px;right:48px;z-index:10;opacity:0;transform:translateX(-30px);transition:opacity 0.5s var(--ease-heavy) 0.15s,transform 0.5s var(--ease-heavy) 0.15s;pointer-events:none}.details__category{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--neon-chartreuse);margin-bottom:12px;display:flex;align-items:center;gap:12px}.details__category::before{content:'';display:inline-block;width:24px;height:1px;background:var(--neon-chartreuse)}.details__title{font-family:var(--font-spine);font-size:clamp(2.2rem,4vw,3.8rem);text-transform:uppercase;color:var(--off-white);line-height:0.95;margin-bottom:20px;letter-spacing:-0.01em}.details__meta{display:flex;gap:32px;margin-bottom:28px}.details__meta-item{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em}.details__meta-label{color:var(--steel);text-transform:uppercase;display:block;margin-bottom:4px}.details__meta-value{color:var(--off-white)}.details__description{font-family:var(--font-mono);font-size:0.75rem;line-height:1.7;color:rgba(240,240,240,0.6);max-width:420px;margin-bottom:32px}.btn-view{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:var(--neon-chartreuse);color:var(--carbon);font-family:var(--font-mono);font-size:0.7rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;border-radius:0;border:none;cursor:pointer;transition:background 0.3s var(--ease-heavy),transform 0.3s var(--ease-heavy)}.btn-view:hover{background:var(--off-white);transform:translateX(4px)}.btn-view svg{width:14px;height:14px;transition:transform 0.3s var(--ease-heavy)}.btn-view:hover svg{transform:translateX(4px)}main.track:hover>article.panel{flex:1}main.track>article.panel:hover{flex:6}article.panel:hover .panel__bg img{filter:brightness(0.85) grayscale(0%);transform:scale(1)}article.panel:hover .spine{opacity:0.2;transform:translateX(-50%) rotate(180deg) translateY(-20px)}article.panel:hover .details{opacity:1;transform:translateX(0);pointer-events:auto}main.track:hover>article.panel .panel__index{opacity:0}article.panel:hover .panel__index{opacity:0.35 !important}.global-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:flex-start;justify-content:space-between;padding:22px 36px 0;height:140px;background:linear-gradient( 180deg,rgba(26,26,26,0.9) 0%,rgba(26,26,26,0.5) 40%,rgba(26,26,26,0.15) 70%,transparent 100% );pointer-events:none}.logo{font-family:var(--font-mono);font-size:0.65rem;font-weight:700;letter-spacing:0.3em;text-transform:uppercase;color:var(--off-white);pointer-events:auto;text-decoration:none}.logo span{color:var(--neon-chartreuse);font-weight:400}.nav{display:flex;align-items:center;gap:6px;pointer-events:auto}.nav a{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(240,240,240,0.5);text-decoration:none;padding:8px 14px;border:1px solid transparent;transition:color 0.3s var(--ease-heavy),border-color 0.3s var(--ease-heavy)}.nav a:hover{color:var(--neon-chartreuse);border-color:rgba(223,255,0,0.3)}.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(26,26,26,0.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.5s var(--ease-heavy),visibility 0s linear 0.5s}.modal-overlay:target{opacity:1;visibility:visible;transition:opacity 0.5s var(--ease-heavy),visibility 0s linear 0s}.modal-overlay:target .modal__content{opacity:1;transform:translateY(0)}.modal__close{position:absolute;top:28px;right:36px;z-index:10;width:48px;height:48px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--off-white);font-family:var(--font-mono);font-size:1.4rem;border:1px solid var(--steel);border-radius:0;transition:border-color 0.3s var(--ease-heavy),color 0.3s var(--ease-heavy)}.modal__close:hover{border-color:var(--neon-chartreuse);color:var(--neon-chartreuse)}.modal__content{max-width:680px;width:90%;max-height:80vh;overflow-y:auto;padding:60px;opacity:0;transform:translateY(30px);transition:opacity 0.5s var(--ease-heavy) 0.1s,transform 0.5s var(--ease-heavy) 0.1s;scrollbar-width:thin;scrollbar-color:var(--steel) transparent}.modal__content::-webkit-scrollbar{width:4px}.modal__content::-webkit-scrollbar-track{background:transparent}.modal__content::-webkit-scrollbar-thumb{background:var(--steel);border-radius:0}.modal__content::-webkit-scrollbar-thumb:hover{background:var(--ash)}.modal__label{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--neon-chartreuse);margin-bottom:24px;display:flex;align-items:center;gap:12px}.modal__label::before{content:'';display:inline-block;width:32px;height:1px;background:var(--neon-chartreuse)}.modal__heading{font-family:var(--font-spine);font-size:clamp(2.5rem,6vw,4.5rem);text-transform:uppercase;color:var(--off-white);line-height:0.95;margin-bottom:36px}.modal__text{font-family:var(--font-mono);font-size:0.8rem;line-height:1.9;color:rgba(240,240,240,0.6);margin-bottom:24px}.modal__text strong{color:var(--off-white);font-weight:700}.modal__text a{color:var(--off-white);text-decoration:none;border-bottom:1px solid var(--steel);padding-bottom:2px;transition:border-color 0.3s var(--ease-heavy)}.modal__text a:hover{border-color:var(--neon-chartreuse)}.modal__divider{width:48px;height:1px;background:var(--steel);margin:36px 0;border:none}.modal__project-list{list-style:none;padding:0}.modal__project-list li{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;border-bottom:1px solid rgba(74,74,74,0.3);font-family:var(--font-mono);font-size:0.75rem}.modal__project-list li:first-child{border-top:1px solid rgba(74,74,74,0.3)}.modal__project-name{color:var(--off-white);font-weight:700;letter-spacing:0.05em}.modal__project-year{color:var(--steel);font-size:0.65rem;letter-spacing:0.1em}.modal__contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}.modal__contact-item{font-family:var(--font-mono)}.modal__contact-label{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}.modal__contact-value{font-size:0.8rem;color:var(--off-white)}.modal__contact-value a{color:var(--off-white);text-decoration:none;border-bottom:1px solid var(--steel);padding-bottom:2px;transition:border-color 0.3s var(--ease-heavy)}.modal__contact-value a:hover{border-color:var(--neon-chartreuse)}.global-footer{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 36px;pointer-events:none;background:linear-gradient( 0deg,rgba(26,26,26,0.6) 0%,transparent 100% )}.footer__credit{font-family:var(--font-mono);font-size:0.55rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(240,240,240,0.3);pointer-events:auto}.footer__credit a{color:rgba(240,240,240,0.5);text-decoration:none}.footer__scroll-hint{font-family:var(--font-mono);font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(240,240,240,0.3);display:flex;align-items:center;gap:8px}.footer__scroll-hint::before{content:'';display:inline-block;width:20px;height:1px;background:rgba(240,240,240,0.3)}@keyframes sliceIn{0%{transform:scaleX(0);opacity:0}100%{transform:scaleX(1);opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}article.panel{transform-origin:left center;animation:sliceIn 1s var(--ease-heavy) both}article.panel:nth-child(1){animation-delay:0.05s}article.panel:nth-child(2){animation-delay:0.15s}article.panel:nth-child(3){animation-delay:0.25s}article.panel:nth-child(4){animation-delay:0.35s}article.panel:nth-child(5){animation-delay:0.45s}.global-header,.global-footer{animation:fadeUp 0.6s var(--ease-heavy) 0.7s both}.spine{animation:fadeUp 0.5s var(--ease-heavy) backwards}article.panel:nth-child(1) .spine{animation-delay:0.6s}article.panel:nth-child(2) .spine{animation-delay:0.7s}article.panel:nth-child(3) .spine{animation-delay:0.8s}article.panel:nth-child(4) .spine{animation-delay:0.9s}article.panel:nth-child(5) .spine{animation-delay:1.0s}@media (max-width:900px){main.track{flex-direction:column;height:auto;min-height:100vh}article.panel{flex:none !important;width:100%;height:50vh;border-right:none;border-bottom:1px solid var(--seam)}article.panel:last-child{border-bottom:none}.panel__bg img{filter:brightness(0.7) grayscale(0%) !important;transform:scale(1) !important}.spine{display:none}.panel__index{opacity:0.35 !important;top:20px;font-size:0.55rem}.details{opacity:1 !important;transform:none !important;pointer-events:auto !important;bottom:24px;left:24px;right:24px}.details__title{font-size:1.8rem}.details__description{display:none}.global-header{padding:16px 20px 0;height:80px;align-items:flex-start}.global-footer{display:none}.nav a{padding:6px 10px;font-size:0.55rem}body{overflow-y:auto;overflow-x:hidden;height:auto}.modal__content{padding:40px 24px}.modal__contact-grid{grid-template-columns:1fr}.modal-overlay{align-items:flex-start}.modal__content{max-height:100vh;margin-top:40px;padding-bottom:60px}.modal__close{top:20px;right:50px;width:40px;height:40px;font-size:1.2rem}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}