
/* ===== V4.7: green / gold 3D glass portfolio folder =====
   Replace the folder rendering only. Original site palette is untouched. */
.v47-shell{
  --v47-edge:rgba(236,247,220,.76);
  --v47-glow:rgba(210,176,111,.30);
  position:absolute;inset:0!important;z-index:2;
  perspective:1300px;transform-style:preserve-3d;
  filter:drop-shadow(0 30px 38px rgba(4,16,9,.38));
  opacity:1;
  transform:rotateY(-5deg) rotateX(4deg);
  transition:transform 900ms cubic-bezier(.18,.78,.22,1);
}
.v4-scene.is-preopen .v47-shell{opacity:0;transform:translate3d(0,26px,-38px) rotateY(-5deg) rotateX(8deg) scale(.93)}
.v4-scene.is-opening .v47-shell,.v4-scene.is-open .v47-shell{
  opacity:1;transform:rotateY(-5deg) rotateX(4deg) scale(1)
}
.v4-scene.is-open .v47-shell{animation:v47-breathe 7.4s ease-in-out 2s infinite}
@keyframes v47-breathe{0%,100%{translate:0 0}50%{translate:0 -4px}}
.v47-defs{position:absolute;left:0;top:0;pointer-events:none;width:0;height:0;overflow:hidden}
.v47-back{
  position:absolute;left:6.6%;top:25%;width:87%;height:67%;z-index:2;
  transform:translateZ(-14px);filter:drop-shadow(0 18px 26px rgba(0,0,0,.21));
  pointer-events:none;
}
.v47-back svg{display:block;width:100%;height:100%;overflow:visible}
.v47-back svg path{vector-effect:non-scaling-stroke;stroke-width:3}
.v47-interior{
  position:absolute;left:12.2%;top:42%;width:76%;height:41%;z-index:3;
  border-radius:0 0 25px 25px;
  transform:translateZ(-7px) rotateX(2deg);
  background:linear-gradient(180deg,rgba(4,13,7,.32),rgba(25,52,31,.10) 43%,rgba(235,219,177,.065));
  box-shadow:inset 0 21px 39px rgba(0,0,0,.20),inset 0 -12px 22px rgba(189,231,193,.05);
  pointer-events:none;
}
.v47-side{
  position:absolute;z-index:7;top:46%;height:42%;width:2.3%;pointer-events:none;
  background:linear-gradient(90deg,rgba(235,248,226,.50),rgba(137,180,140,.22) 42%,rgba(30,61,38,.13));
  border:1px solid rgba(234,248,223,.40);
  box-shadow:inset 0 0 10px rgba(255,255,255,.25),0 0 13px rgba(214,240,197,.10);
}
.v47-side-left{left:8.1%;transform:translateZ(17px) rotateY(-20deg);transform-origin:right center;border-radius:15px 2px 3px 19px}
.v47-side-right{right:7.7%;transform:translateZ(17px) rotateY(20deg);transform-origin:left center;border-radius:2px 15px 19px 3px}
.v47-bottom-thickness{
  position:absolute;left:10%;top:86%;width:81%;height:3.8%;z-index:9;
  border-radius:3px 4px 21px 22px;pointer-events:none;
  border-bottom:2px solid rgba(232,232,200,.55);
  background:linear-gradient(180deg,rgba(208,226,198,.29),rgba(115,153,113,.17),rgba(32,72,41,.31));
  box-shadow:0 19px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.56),0 0 17px rgba(217,196,145,.12);
  transform:translateZ(43px) rotateX(-8deg);
}
.v47-front{
  position:absolute;left:7.0%;top:34%;width:86%;height:58%;
  z-index:10;transform-style:preserve-3d;pointer-events:none;
  transform-origin:50% 100%;
  transform:translate3d(0,21px,55px) rotateX(-16deg);
  will-change:transform;
}
.v47-glass{
  position:absolute;inset:0;
  clip-path:url(#v47-glass-cut);-webkit-clip-path:url(#v47-glass-cut);
  background:
    linear-gradient(115deg,rgba(214,231,207,.32) 0%,rgba(97,143,104,.23) 30%,rgba(198,222,196,.23) 53%,rgba(224,192,144,.24) 78%,rgba(108,163,120,.29) 100%),
    radial-gradient(ellipse at 45% 2%,rgba(240,244,218,.15),transparent 68%);
  backdrop-filter:blur(3px) saturate(165%);
  -webkit-backdrop-filter:blur(3px) saturate(165%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -15px 29px rgba(166,207,167,.09),0 27px 40px rgba(0,0,0,.21);
}
.v47-front-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px rgba(209,230,187,.18));pointer-events:none}
.v47-front-line path{vector-effect:non-scaling-stroke;stroke-width:3.2}
.v47-front-shine{
  position:absolute;inset:17% 4% 4%;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(116deg,transparent 24%,rgba(250,250,239,.12) 41%,transparent 53%);
  transform:translateX(-30%);opacity:.6;
  animation:v47-shine 9s ease-in-out 2.4s infinite;
}
@keyframes v47-shine{0%,33%{translate:-16% 0;opacity:0}50%{opacity:.65}68%,100%{translate:21% 0;opacity:0}}
.v47-folder-label{
  position:absolute;left:10%;right:10%;bottom:11%;z-index:3;
  display:flex;align-items:center;gap:10px;pointer-events:none;
  color:rgba(250,247,230,.98);text-shadow:0 2px 12px rgba(5,22,11,.72);
  font-size:10px;font-weight:800;letter-spacing:.15em;
}
.v47-folder-label .v47-ja{
  display:grid;place-items:center;height:27px;width:29px;flex:none;
  border:1px solid rgba(253,244,217,.48);background:rgba(23,56,35,.39);
  border-radius:6px;font-size:10px;letter-spacing:.04em;
}
.v47-folder-label .v47-label-arrow{margin-left:auto;font-size:18px;font-weight:400}
.v47-hidden-meta{display:none}
/* Opening: front pane pivots outward, creating a visible pocket gap before the cards emerge. */
.v4-scene.is-preopen .v47-front{
  transform:translate3d(0,-5px,23px) rotateX(0deg);
}
.v4-scene.is-opening .v47-front{
  animation:v47-folder-unfold var(--folder-open-ms,1230ms) cubic-bezier(.19,.86,.19,1) .18s both;
}
.v4-scene.is-open .v47-front{
  transform:translate3d(0,21px,55px) rotateX(-16deg)
}
@keyframes v47-folder-unfold{
  0%{transform:translate3d(0,-5px,23px) rotateX(0deg)}
  55%{transform:translate3d(0,27px,66px) rotateX(-23deg)}
  78%{transform:translate3d(0,17px,51px) rotateX(-13deg)}
  100%{transform:translate3d(0,21px,55px) rotateX(-16deg)}
}
/* Art: 95% width side-to-center ratio (with different depth), no thumbnail-sized side cards. */
.v47-projects{z-index:5;transform-style:preserve-3d;pointer-events:none}
.v47-projects .v4-project-card{
  top:0%;width:33.5%;padding:5px;aspect-ratio:3/4;
  border-radius:12px;overflow:hidden;
  background:linear-gradient(140deg,#faf9f1,#d9e5da);
  border:1px solid rgba(251,253,241,.91);
  box-shadow:0 24px 48px rgba(0,0,0,.34),0 0 0 1px rgba(218,231,214,.14);
  pointer-events:auto;transform-origin:50% 88%;backface-visibility:hidden;
  transition:transform .72s cubic-bezier(.16,.84,.2,1),box-shadow .5s,filter .5s,opacity .5s;
  will-change:transform,filter,opacity;
}
.v47-projects .v4-project-card img{border-radius:8px;object-fit:cover}
.v47-projects .v4-card-caption{font-size:9px;bottom:10px;left:9px;right:9px}
.v47-projects .v4-project-card.v4-slot-left{left:7.5%;--slot-x:-2px;--slot-y:18px;--slot-z:10px;z-index:5}
.v47-projects .v4-project-card.v4-slot-center{left:33.3%;--slot-x:0px;--slot-y:-8px;--slot-z:56px;z-index:7}
.v47-projects .v4-project-card.v4-slot-right{left:59%;--slot-x:2px;--slot-y:18px;--slot-z:10px;z-index:5}
.v47-projects .v4-project-card.v4-slot-hidden{opacity:0;visibility:hidden;pointer-events:none}
.v47-projects .v4-project-card:not(.v4-slot-hidden){
  transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + var(--project-y,0px)),var(--slot-z,0px)) rotate(var(--card-rotation,0deg)) scale(var(--slot-scale,1));
}
.v4-scene.is-preopen .v47-projects .v4-project-card:not(.v4-slot-hidden){
  opacity:.13;filter:blur(2px);
  transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + 142px + var(--project-y,0px)),-28px) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) * .89));
}
.v4-scene.is-opening .v47-projects .v4-project-card:not(.v4-slot-hidden){
  animation:v47-card-rise 1.18s cubic-bezier(.16,.91,.22,1) var(--card-delay,1450ms) both;
}
.v4-scene.is-open .v47-projects .v4-project-card:not(.v4-slot-hidden){opacity:1;filter:none}
@keyframes v47-card-rise{
  0%{opacity:.13;filter:blur(2px);transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + 142px + var(--project-y,0px)),-28px) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) * .89))}
  36%{opacity:.95;filter:blur(0)}
  79%{transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) - 9px + var(--project-y,0px)),calc(var(--slot-z,0px) + 5px)) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) + .02))}
  100%{opacity:1;filter:none;transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + var(--project-y,0px)),var(--slot-z,0px)) rotate(var(--card-rotation,0deg)) scale(var(--slot-scale,1))}
}
.v47-projects .v4-project-card.is-hovered,.v47-projects .v4-project-card.is-touch-selected{
  z-index:15!important;filter:saturate(1.12) brightness(1.06)!important;
  transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + var(--project-y,0px) - var(--hover-lift,30px)),calc(var(--slot-z,0px) + 72px)) rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) + var(--hover-extra,.12)))!important;
  box-shadow:0 40px 65px rgba(0,0,0,.47),0 0 0 1px rgba(246,218,170,.65),0 0 30px rgba(224,185,124,.19)!important;
}
@media(max-width:760px){
  .v4-scene{height:auto!important;min-height:0!important;margin:14px auto 4px;width:100%;max-width:440px}
  .v4-world{height:clamp(310px,77vw,352px)!important;min-height:0!important;max-width:440px}
  .v47-shell{transform:rotateY(-2deg) rotateX(2deg)}
  .v4-scene.is-preopen .v47-shell{transform:translateY(17px) rotateY(-2deg) rotateX(4deg) scale(.95)}
  .v4-scene.is-opening .v47-shell,.v4-scene.is-open .v47-shell{transform:rotateY(-2deg) rotateX(2deg)}
  .v47-back{left:5%;top:28%;width:90%;height:64%}
  .v47-interior{left:11%;top:44%;width:78%;height:42%}
  .v47-front{left:5%;top:36%;width:90%;height:55%}
  .v47-side{top:47%;height:40%;width:2.4%}
  .v47-side-left{left:6.5%}.v47-side-right{right:6.3%}
  .v47-bottom-thickness{left:7.5%;top:88%;width:85%}
  .v47-projects .v4-project-card{width:36%;top:2%;padding:4px;border-radius:9px}
  .v47-projects .v4-project-card img{border-radius:5px}
  .v47-projects .v4-card-caption{font-size:6px;bottom:7px;left:6px;right:6px}
  .v47-projects .v4-project-card.v4-slot-left{left:5.8%;--slot-x:-2px;--slot-y:12px;--slot-z:8px}
  .v47-projects .v4-project-card.v4-slot-center{left:32%;--slot-x:0px;--slot-y:-4px;--slot-z:46px}
  .v47-projects .v4-project-card.v4-slot-right{left:58.2%;--slot-x:2px;--slot-y:12px;--slot-z:8px}
  .v47-folder-label{left:9%;right:9%;bottom:12%;font-size:8px;gap:7px;letter-spacing:.12em}
  .v47-folder-label .v47-ja{width:25px;height:23px;font-size:9px}
  .v47-folder-label .v47-label-arrow{font-size:14px}
  .v4-scene.is-preopen .v47-front{transform:translate3d(0,-4px,20px) rotateX(0deg)}
  .v4-scene.is-open .v47-front{transform:translate3d(0,14px,42px) rotateX(-16deg)}
  @keyframes v47-folder-unfold{0%{transform:translate3d(0,-4px,20px) rotateX(0deg)}55%{transform:translate3d(0,19px,51px) rotateX(-22deg)}78%{transform:translate3d(0,11px,39px) rotateX(-13deg)}100%{transform:translate3d(0,14px,42px) rotateX(-16deg)}}
  .v4-scene.is-preopen .v47-projects .v4-project-card:not(.v4-slot-hidden){transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + 108px + var(--project-y,0px)),-24px) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) * .88))}
  @keyframes v47-card-rise{0%{opacity:.13;filter:blur(2px);transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + 108px + var(--project-y,0px)),-24px) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) * .88))}36%{opacity:.95;filter:blur(0)}79%{transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) - 6px + var(--project-y,0px)),calc(var(--slot-z,0px) + 4px)) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) + .018))}100%{opacity:1;filter:none;transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + var(--project-y,0px)),var(--slot-z,0px)) rotate(var(--card-rotation,0deg)) scale(var(--slot-scale,1))}}
  .v4-project-switch{margin:2px auto 0;justify-content:center;gap:4px}
  .v4-switch-btn{padding:9px 8px;font-size:9px}.v4-switch-btn span{font-size:9px}
  .v4-folder-note{display:none}
}
@media(max-width:380px){
  .v4-world{height:290px!important}.v47-projects .v4-project-card{width:37%;top:2%}.v47-folder-label{font-size:7px}
  .v4-switch-btn{padding:8px 6px;font-size:8px}.v4-switch-btn span{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .v4-scene .v47-front{transform:translate3d(0,21px,55px) rotateX(-16deg)!important;animation:none!important}
  .v4-scene .v47-projects .v4-project-card:not(.v4-slot-hidden){opacity:1!important;filter:none!important;animation:none!important;transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) + var(--project-y,0px)),var(--slot-z,0px)) rotate(var(--card-rotation,0deg)) scale(var(--slot-scale,1))!important}
  .v47-front-shine{animation:none!important}
}
/* Final art-direction pass: one bright outer contour; quieter inner shell avoids jagged double edges. */
.v47-back svg path{stroke:rgba(215,235,208,.32)!important;stroke-width:2!important}
.v47-bottom-thickness{opacity:.57;border-bottom-width:1px;box-shadow:0 16px 27px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.25)}
.v47-side{background:linear-gradient(90deg,rgba(229,245,221,.43),rgba(151,192,154,.24) 50%,rgba(37,75,47,.19));border-color:rgba(237,247,227,.33)}
.v47-glass{box-shadow:inset 0 2px 0 rgba(255,255,255,.33),inset 0 -16px 26px rgba(174,217,172,.085),0 24px 43px rgba(0,0,0,.22)}
