.portfolio{z-index:1;position:relative}.portfolio__header{text-align:center;margin-bottom:var(--space-2xl)}.portfolio__header .section-subtitle{margin:0 auto}.notebook-container{margin-top:var(--space-3xl);flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.notebook-wrapper{perspective:2500px;width:800px;height:520px;margin-bottom:var(--space-2xl);justify-content:center;display:flex}.notebook{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease-out);position:relative;transform:rotateX(8deg)rotateY(0)}.notebook:hover{transform:rotateX(12deg)rotateY(-3deg)}.notebook-page{width:50%;height:100%;transform-style:preserve-3d;cursor:pointer;will-change:transform;position:absolute;top:0;left:50%}.page-face{backface-visibility:hidden;background:var(--clr-surface-light);border:1px solid var(--clr-border-light);flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.page-front{transform-origin:0;border-left:1px solid #000c;border-radius:4px 16px 16px 4px;transform:rotateY(0);box-shadow:inset 20px 0 50px -20px #0006}.page-back{transform-origin:50%;border-right:1px solid #000c;border-radius:16px 4px 4px 16px;transform:rotateY(180deg);box-shadow:inset -20px 0 50px -20px #0006}.notebook-page.flipped .page-back{box-shadow:-10px 10px 30px #00000080,inset -20px 0 50px -20px #0006}.notebook-page:not(.flipped) .page-front{box-shadow:10px 10px 30px #00000080,inset 20px 0 50px -20px #0006}.page-lighting{z-index:10;pointer-events:none;transition:opacity .5s;position:absolute;inset:0}.lighting-front{background:linear-gradient(90deg,#0000004d 0%,#0000 15% 85%,#ffffff0d 100%)}.lighting-back{background:linear-gradient(270deg,#0000004d 0%,#0000 15% 85%,#ffffff0d 100%)}.notebook-cover{background:linear-gradient(135deg,#2e1065 0%,#1e1b4b 35%,#1e3a8a 70%,#0f172a 100%);border:1px solid #7c3aed66;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;box-shadow:inset 0 0 30px #7c3aed33}.front-cover{border-left:14px solid #1e1035}.back-cover{border-right:14px solid #1e1035}.cover-design{text-align:center;backdrop-filter:blur(10px);background:#0f172a8c;border:1px solid #7c3aed59;border-radius:12px;width:85%;padding:2.5rem 1.5rem;box-shadow:0 10px 30px #0000004d,inset 0 0 20px #7c3aed26}.cover-design h2{color:#94a3b8;font-size:var(--fs-xs);letter-spacing:6px;text-transform:uppercase;margin-bottom:var(--space-md)}.cover-design h1{background:linear-gradient(135deg,#7c3aed 0%,#2563eb 50%,#38bdf8 100%);-webkit-text-fill-color:transparent;margin-bottom:var(--space-lg);background-clip:text;font-size:2.5rem;font-weight:800;line-height:1.1}.cover-line{width:50px;height:3px;margin:0 auto var(--space-lg);background:linear-gradient(90deg,#7c3aed,#2563eb,#38bdf8);border-radius:2px}.cover-design p{font-size:var(--fs-sm);color:#cbd5e1}.brand-mark{font-family:var(--font-heading);color:#a855f71a;margin-bottom:var(--space-md);font-size:4rem;font-weight:900}.notebook-blank{background:var(--clr-surface-light);width:100%;height:100%}.page-content{z-index:2;width:100%;height:100%;position:relative}.notebook-project{height:100%;padding:var(--space-xl);background-image:linear-gradient(#a855f708 1px,#0000 1px),linear-gradient(90deg,#a855f708 1px,#0000 1px);background-size:20px 20px;flex-direction:column;display:flex}.project-visual{height:170px;margin-bottom:var(--space-lg);border:1px solid #ffffff0d;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #0000004d}.project-number{font-family:var(--font-heading);pointer-events:none;font-size:6rem;font-weight:900;line-height:1;position:absolute;top:-15px;right:5px}.project-icon{z-index:1;filter:drop-shadow(0 0 15px);position:relative}.project-body{flex-direction:column;flex-grow:1;display:flex}.project-body h3{font-size:var(--fs-lg);margin-bottom:var(--space-xs);letter-spacing:-.01em}.project-body p{color:var(--clr-text-secondary);margin-bottom:var(--space-md);font-size:.85rem;line-height:1.6}.project-tags{margin-bottom:var(--space-lg);flex-wrap:wrap;gap:6px;display:flex}.project-tags span{border-radius:var(--radius-full);background:#0003;border:1px solid;padding:3px 10px;font-size:.65rem;font-weight:500}.project-link{font-size:var(--fs-xs);transition:all .3s var(--ease-out);border-radius:8px;align-self:flex-start;align-items:center;gap:8px;margin-top:auto;padding:8px 16px;font-weight:600;display:inline-flex;box-shadow:0 4px 15px #0003;color:#fff!important}.project-link:hover{filter:brightness(1.15);transform:translateY(-2px);box-shadow:0 8px 20px #0000004d}.notebook-nav{align-items:center;gap:var(--space-xl);background:var(--glass-bg);backdrop-filter:var(--glass-blur);border-radius:var(--radius-full);border:1px solid var(--glass-border);padding:12px 28px;display:flex;box-shadow:0 10px 30px #00000080}.nav-btn{color:var(--clr-text);font-weight:600;font-size:var(--fs-sm);background:0 0;align-items:center;gap:8px;transition:color .2s;display:flex}.nav-btn:not(:disabled):hover{color:var(--clr-primary)}.nav-btn:disabled{opacity:.25;cursor:not-allowed}.page-indicator{font-size:var(--fs-xs);color:var(--clr-text-secondary);letter-spacing:1px;font-family:monospace}@media (width<=900px){.notebook-wrapper{width:700px;height:450px}}@media (width<=768px){.notebook-wrapper{transform-origin:top;width:800px;height:520px;margin-bottom:-280px;transform:scale(.45)}.notebook,.notebook:hover{transform:rotateX(0)rotateY(0)!important}}@media (width<=480px){.notebook-wrapper{margin-bottom:-310px;transform:scale(.4)}}@media (width<=380px){.notebook-wrapper{margin-bottom:-330px;transform:scale(.36)}}