#portfolio{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  height:100vh;
  min-height:600px;
  width:100%;
  z-index:1;

}
#portfolio::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 30px;

    background:
        linear-gradient(
            to bottom,
            #49067d,
            var(--layer0)
        );
    filter: blur(8px);
}
#portfolio::after {
    content: "";
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 30px;

    background:
        linear-gradient(
            to top,
            var(--secondary-color),
            transparent
        );
    filter: blur(8px);
}

#portfolio-websection-logo{
  position:absolute;
  top:50px;
  left:50%;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  width:150px;
  background-color:var(--layer0);
  height:30px;
  border-width:0px;
  border-radius:15px;
  filter:
     drop-shadow(0 0 5px var(--secondary-color))
     drop-shadow(0 0 15px var(--secondary-color))
    ;
  transform: translateX(-50%);
}
#portfolio-content{
  display:flex;
  flex-direction:row;
  position:relative;
  width:100%;
  height:95vh;
  min-height:570px;
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  align-items:center;
}

.portfolio-section{
    width:250px;
    height:250px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    background-color:var(--layer0);
    border-width:0px;
    border-radius:15px;
    filter:
        drop-shadow(0 0 5px var(--secondary-color))
        drop-shadow(0 0 15px var(--secondary-color))
    ;
    transition: hover, 0.2s;
}
.portfolio-section-icon{
    width:200px;
    height:200px;
}
.portfolio-section:hover{
    width:275px;
    height:275px;
    filter:
        drop-shadow(0 0 5px var(--main-color))
        drop-shadow(0 0 15px var(--main-color))
}



#portfolio-content-activated{
  position:relative;
  width:100%;
  height:95vh;
  min-height:570px;
  display:flex;
  flex-direction:row;
  justify-content:start;
  align-items:stretch;
  box-sizing:border-box;
  padding:25px 0;
}
#portfolio-navigation-activated{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    height:100%;
    width:150px;
    margin:0 25px 0 25px;
    box-sizing:border-box;
    /* Keeps the section cards clear of the absolute "Portfolio" pill above. */
    padding-top:80px;

    background:#141414;

    border-radius:25px;
    border:1px solid rgba(255,255,255,.05);

    box-shadow:
        /* Main shadow */
        0 10px 30px rgba(0,0,0,.45),

        /* Soft shadow close to element */
        0 4px 10px rgba(0,0,0,.35),

        /* Top highlight */
        inset 0 1px 0 rgba(255,255,255,.08),

        /* Bottom dark edge */
        inset 0 -1px 0 rgba(0,0,0,.45);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}
#portfolio-websection-logo-activated{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    background-color:#252525;
    width:120px;
    height:50px;
    border-width:0px;
    border-radius:25px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.05);

    box-shadow:
        /* Main shadow */
        0 10px 30px rgba(0,0,0,.45),

        /* Soft shadow close to element */
        0 4px 10px rgba(0,0,0,.35),

        /* Top highlight */
        inset 0 1px 0 rgba(255,255,255,.08),

        /* Bottom dark edge */
        inset 0 -1px 0 rgba(0,0,0,.45);
}
.portfolio-section-activated{
    width:115px;
    height:125px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    background-color:#141414;
    border-width:0px;
    border-radius:15px;
    filter:
        drop-shadow(0 0 5px var(--secondary-color))
        drop-shadow(0 0 15px var(--secondary-color))
    ;
    transition: hover, 0.2s;
}
.portfolio-section-icon-activated{
    width:80px;
    height:80px;
}
.portfolio-section-clicked{
    width:125px;
    height:125px;
    filter:
        drop-shadow(0 0 5px var(--main-color))
        drop-shadow(0 0 15px var(--main-color))
    ;
}

#portfolio-active-content{
    position:relative;

    flex: 0.98;
    height:100%;
    min-width:0;
    background-color:#141414;
    border-radius: 25px;
    box-sizing:border-box;

    /* Clip the filmstrip while it slides between sections. */
    overflow:hidden;
}

/* Vertical filmstrip: the sections being crossed are stacked and this whole
   strip is translated, so a My Works -> Skills jump scrolls up through Projects
   in one continuous motion. Sits 15px inside the panel (the old padding). */
.section-strip{
    position:absolute;
    inset:15px;
}
.section-strip.intro{
    animation:section-slide-in .34s ease both;
}
@keyframes section-slide-in{
    from{
        opacity:0;
        transform:translateY(-28px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Floating line/grid dock: phone-only home for the My Works style selector
   (my_works.js moves it here). Hidden everywhere else. */
#style-selector-dock{
    display:none;
}

/* One section. Each fills the strip's visible height so stacking them gives an
   exact one-panel (=100%) step per section. */
.section-content{
    display:flex;
    flex-direction:column;
    gap:10px;

    height:100%;
    box-sizing:border-box;
}

/* Tablet: identical layout, every block one step smaller ------------------- */
@media (max-width:1024px){
    .portfolio-section{
        width:170px;
        height:170px;
    }
    .portfolio-section-icon{
        width:126px;
        height:126px;
    }
    .portfolio-section:hover{
        width:188px;
        height:188px;
    }

    #portfolio-navigation-activated{
        width:112px;
        margin:0 15px;
        padding-top:70px;
    }
    #portfolio-websection-logo-activated{
        width:95px;
        height:40px;
    }
    .portfolio-section-activated{
        width:88px;
        height:96px;
    }
    .portfolio-section-icon-activated{
        width:50px;
        height:50px;
    }
    .portfolio-section-clicked{
        width:96px;
        height:104px;
    }
}

/* Phone: idle cards stack; the sidebar becomes a top bar -------------------- */
@media (max-width:680px){
    #portfolio{
        height:auto;
        min-height:100vh;
    }
    #portfolio-content{
        flex-direction:column;
        justify-content:center;
        gap:35px;
        height:auto;
        min-height:100vh;
        box-sizing:border-box;
        padding:100px 0 60px;
    }
    /* That padding is for the idle stacked cards only - once the activated
       shell is mounted inside the same container, drop it. */
    #portfolio-content:has(> #portfolio-content-activated){
        padding:0;
        min-height:0;
        justify-content:flex-start;
    }
    .portfolio-section{
        width:140px;
        height:140px;
    }
    .portfolio-section-icon{
        width:100px;
        height:100px;
    }
    .portfolio-section:hover{
        width:140px;
        height:140px;
    }

    /* Activated: navigation moves to the top, content fills the rest. */
    #portfolio-content-activated{
        flex-direction:column;
        height:92vh;
        min-height:570px;
        padding:15px 0;
        /* The dock slides off the right edge - clip it instead of letting the
           page grow a horizontal scrollbar. */
        overflow:clip;
    }

    /* The style selector floats centered just above the bottom navigation.
       Hidden state sinks it straight down behind the (opaque, higher) nav bar,
       so it rises from the bar when My Works opens and dives back when not. */
    #style-selector-dock{
        display:block;
        position:absolute;
        left:50%;
        /* Rides just above the bottom navigation. */
        bottom:109px;
        z-index:20;

        transform:translate(-50%, 80px);
        transition:transform .35s ease;
    }
    #style-selector-dock.dock-shown{
        transform:translate(-50%, 0);
    }
    #portfolio-navigation-activated{
        flex-direction:row;
        justify-content:space-evenly;
        width:auto;
        height:88px;
        flex-shrink:0;
        /* Bottom tab bar: sits under the content, away from the site navbar. */
        order:2;
        margin:15px 15px 0;
        /* The pill is hidden in the horizontal bar - no clearance needed. */
        padding-top:0;
        /* Above the style-selector dock, so the dock hides behind this bar. */
        z-index:21;
    }
    #portfolio-websection-logo-activated{
        display:none;
    }
    .portfolio-section-activated{
        width:82px;
        height:66px;
    }
    .portfolio-section-activated h3{
        font-size:0.7rem;
    }
    .portfolio-section-icon-activated{
        width:32px;
        height:32px;
    }
    .portfolio-section-clicked{
        width:86px;
        height:70px;
    }
    #portfolio-active-content{
        flex:1;
        min-height:0;
        margin:0 15px;
        order:1;
        transition:margin-bottom .35s ease;
    }
    /* While the dock is up, the content panel shortens just enough for the
       selector's own lane - list touches dock, dock touches nav, no overlap. */
    #portfolio-content-activated:has(> #style-selector-dock.dock-shown) #portfolio-active-content{
        margin-bottom:33px;
    }
    .section-strip{
        inset:10px;
    }
}

/* Small phone: tighter margins, slimmer section buttons ---------------------- */
@media (max-width:400px){
    #portfolio-navigation-activated{
        height:80px;
        margin:12px 10px 0;
    }
    #style-selector-dock{
        bottom:101px;
        transform:translate(-50%, 72px);
    }
    #style-selector-dock.dock-shown{
        transform:translate(-50%, 0);
    }
    #portfolio-content-activated:has(> #style-selector-dock.dock-shown) #portfolio-active-content{
        margin-bottom:36px;
    }
    #portfolio-active-content{
        margin:0 10px;
    }
    .portfolio-section-activated{
        width:76px;
        height:62px;
    }
    .portfolio-section-clicked{
        width:80px;
        height:66px;
    }
}