/* V4.4 — cinematic opening glass portfolio folder. All visual controls remain editable through SITE_CONTENT.heroSettings. */
.v4-scene{
  --v4-perspective-x:0deg;--v4-perspective-y:0deg;--v4-scroll-shift:0px;
  --folder-tint:#a8cbb0;--folder-opacity:.25;--folder-opacity-pct:25%;--folder-blur:14px;--folder-border:#e9e2ca;
  --folder-open-ms:1120ms;--folder-reveal-delay:720ms;--folder-stagger:175ms;
  --orbit-outer-speed:29s;--orbit-inner-speed:39s;--orbit-opacity:.34;--orbit-dot-size:6px;
  --hover-lift:30px;--hover-extra:.12;--pointer-tilt:5;
  --hero-cta-start:#f4d49d;--hero-cta-end:#c98e51;--hero-cta-glow:#e9b977;
  position:relative;height:min(65svh,595px);min-height:420px;display:flex;flex-direction:column;justify-content:center;
  isolation:isolate;perspective:1500px;touch-action:pan-y;overflow:visible
}
.v4-world{
  position:relative;height:min(53svh,505px);min-height:350px;max-width:690px;width:100%;margin:0 auto;
  transform-style:preserve-3d;transform:translate3d(var(--float-x,0px),calc(var(--float-y,0px) + var(--v4-scroll-shift)),0) rotateX(var(--v4-perspective-x)) rotateY(var(--v4-perspective-y));
  transition:transform .9s cubic-bezier(.2,.8,.2,1);will-change:transform
}
/* Two perfect circular orbital paths with independently rotating luminous particles. */
.v4-orbits{position:absolute;inset:-7% -7% -2%;display:grid;place-items:center;pointer-events:none;z-index:0;transform:translateZ(-90px)}
.v4-orbit,.v4-orbit-quiet{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:auto;aspect-ratio:1;height:110%;border-radius:50%;
  border:1px solid rgba(197,226,202,var(--orbit-opacity));
  box-shadow:inset 0 0 24px rgba(220,244,222,.035),0 0 24px rgba(169,211,178,.04);will-change:transform
}
.v4-orbit::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 18deg,transparent 0deg,rgba(210,239,216,.04) 58deg,rgba(230,195,137,.58) 82deg,transparent 112deg,transparent 220deg,rgba(171,220,186,.34) 252deg,transparent 286deg);opacity:.78;mask:radial-gradient(farthest-side,transparent calc(100% - 1.3px),#000 calc(100% - .6px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.3px),#000 calc(100% - .6px))}
.v4-orbit-a{animation:v4-orbit-forward var(--orbit-outer-speed) linear infinite}
.v4-orbit-b{height:78%;border-color:rgba(183,224,199,var(--orbit-opacity));animation:v4-orbit-reverse var(--orbit-inner-speed) linear infinite}
.v4-orbit-quiet{height:126%;border-color:rgba(255,255,255,.045);box-shadow:0 0 34px rgba(164,210,177,.035)}
.v4-orbit i{position:absolute;display:block;width:var(--orbit-dot-size);height:var(--orbit-dot-size);border-radius:50%;left:50%;top:0;transform:translate(-50%,-50%);background:#f8d5a2;box-shadow:0 0 0 5px rgba(250,218,174,.08),0 0 17px rgba(241,203,151,.9),0 0 32px rgba(241,203,151,.34);animation:v4-dot-pulse 2.5s ease-in-out infinite}
.v4-orbit-a i:nth-child(2){width:calc(var(--orbit-dot-size)*.72);height:calc(var(--orbit-dot-size)*.72);left:50%;top:100%;background:#cde9d6;box-shadow:0 0 0 4px rgba(205,233,214,.08),0 0 17px #cde9d6cc;animation-delay:-1.1s}
.v4-orbit-a i:nth-child(3){width:calc(var(--orbit-dot-size)*.56);height:calc(var(--orbit-dot-size)*.56);left:15%;top:22%;background:#e9f3d9;box-shadow:0 0 13px rgba(220,241,213,.8);animation-delay:-.7s}
.v4-orbit-b i:nth-child(1){left:85%;top:14%;background:#bdd9c8;box-shadow:0 0 0 4px rgba(195,229,199,.08),0 0 17px rgba(195,229,199,.95);animation-delay:-.6s}
.v4-orbit-b i:nth-child(2){left:18%;top:83%;width:calc(var(--orbit-dot-size)*.62);height:calc(var(--orbit-dot-size)*.62);background:#f2d5a8;box-shadow:0 0 14px rgba(242,213,168,.9);animation-delay:-1.5s}
@keyframes v4-orbit-forward{to{transform:rotate(360deg)}}
@keyframes v4-orbit-reverse{to{transform:rotate(-360deg)}}
@keyframes v4-dot-pulse{0%,100%{filter:brightness(.82);scale:.9;opacity:.78}50%{filter:brightness(1.45);scale:1.28;opacity:1}}
.v4-ambient{position:absolute;pointer-events:none;border-radius:50%;z-index:-1;filter:blur(25px);mix-blend-mode:screen}
.v4-ambient-one{width:56%;aspect-ratio:1;background:radial-gradient(circle,rgba(234,173,89,.23),transparent 68%);top:9%;left:22%;animation:v4-ambient-shift 8.5s ease-in-out infinite alternate}
.v4-ambient-two{width:62%;aspect-ratio:1;background:radial-gradient(circle,rgba(132,191,144,.23),transparent 65%);right:-2%;bottom:-6%;animation:v4-ambient-shift 10s ease-in-out -2s infinite alternate-reverse}
.v4-ambient-three{width:35%;aspect-ratio:1;background:radial-gradient(circle,rgba(242,207,154,.13),transparent 70%);left:0;bottom:8%;animation:v4-ambient-shift 12s ease-in-out -3s infinite alternate}
@keyframes v4-ambient-shift{to{transform:translate3d(18px,-14px,0) scale(1.08);opacity:.65}}

/* The folder is built as a rear shell, side gussets, a bottom rail and a distinct glass front pocket. */
.v4-folder-scene{
  position:absolute;inset:0;z-index:2;transform-style:preserve-3d;filter:drop-shadow(0 34px 42px rgba(3,14,7,.3));
  opacity:0;transform:translate3d(0,24px,-28px) scale(.91);transition:opacity .78s ease,transform 1.05s cubic-bezier(.16,.84,.2,1);will-change:transform,opacity
}
.v4-scene.is-opening .v4-folder-scene,.v4-scene.is-open .v4-folder-scene{opacity:1;transform:translate3d(0,0,0) scale(1)}
.v4-scene.is-open .v4-folder-scene{animation:v4-folder-float 7.5s ease-in-out 1.8s infinite}
@keyframes v4-folder-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
.v4-folder-back{
  position:absolute;left:8%;width:84%;top:27%;height:64%;z-index:2;border:1px solid rgba(226,239,219,.62);border-radius:22px 25px 19px 19px;
  background:linear-gradient(128deg,color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),transparent),color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),transparent) 42%,rgba(236,225,198,.17) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.36),inset 0 -20px 36px rgba(190,222,193,.07),0 20px 46px rgba(0,0,0,.17);
  backdrop-filter:blur(var(--folder-blur)) saturate(165%);-webkit-backdrop-filter:blur(var(--folder-blur)) saturate(165%);transform:translateZ(4px);overflow:visible
}
.v4-folder-back::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(132deg,rgba(255,255,255,.17),transparent 31%,rgba(236,249,228,.08) 61%,transparent);pointer-events:none}
.v4-folder-back::after{content:"";position:absolute;left:8%;right:8%;top:12px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
.v4-folder-tab{
  position:absolute;display:block;width:33%;height:27px;left:9%;top:-24px;
  background:linear-gradient(135deg,rgba(183,220,188,.28),rgba(128,179,142,.16) 62%,rgba(239,224,190,.18));
  border:1px solid rgba(232,243,225,.6);border-bottom:0;border-radius:12px 16px 0 0;
  clip-path:polygon(0 0,88% 0,100% 100%,0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.42)
}
.v4-folder-back-shine{position:absolute;left:15%;right:12%;top:15px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
.v4-folder-base{
  position:absolute;left:8.5%;width:83%;top:86%;height:8%;z-index:3;border:1px solid rgba(238,245,222,.42);border-radius:5px 5px 22px 22px;
  background:linear-gradient(180deg,rgba(220,242,219,.22),rgba(115,166,128,.15));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 15px 30px rgba(0,0,0,.16);transform:translateZ(22px) rotateX(4deg)
}
.v4-folder-side{position:absolute;top:31%;height:57%;width:6%;z-index:4;border:1px solid rgba(234,244,224,.48);background:linear-gradient(90deg,rgba(230,247,229,.22),rgba(130,179,146,.12));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:inset 0 0 15px rgba(255,255,255,.1)}
.v4-folder-side-left{left:5.5%;border-radius:15px 0 0 19px;clip-path:polygon(0 0,100% 5%,100% 100%,8% 96%);transform:translateZ(18px) rotateY(-10deg);transform-origin:right center}
.v4-folder-side-right{right:5.5%;border-radius:0 15px 19px 0;clip-path:polygon(0 5%,100% 0,92% 96%,0 100%);transform:translateZ(18px) rotateY(10deg);transform-origin:left center}
.v4-projects-layer{position:absolute;inset:0;z-index:5;transform-style:preserve-3d;pointer-events:none}
.v4-project-card{
  position:absolute;top:5%;left:36%;width:28%;height:auto;aspect-ratio:3/4;display:block;overflow:hidden;padding:5px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(231,238,224,.9));border:1px solid rgba(255,255,255,.9);border-radius:12px;
  box-shadow:0 20px 42px rgba(2,13,7,.38),inset 0 0 0 1px rgba(255,255,255,.48);
  transform-origin:50% 88%;transition:transform .82s cubic-bezier(.16,.84,.2,1),box-shadow .55s,filter .55s,opacity .5s;
  cursor:pointer;text-decoration:none;outline-offset:7px;filter:saturate(.96);backface-visibility:hidden;will-change:transform;pointer-events:auto
}
.v4-project-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px;pointer-events:none}
.v4-project-card::after{content:"";position:absolute;inset:5px;background:linear-gradient(to bottom,transparent 65%,rgba(13,21,16,.58) 100%);border-radius:8px;pointer-events:none}
.v4-card-caption{position:absolute;bottom:11px;left:12px;right:12px;z-index:2;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.055em;font-weight:800;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.65);white-space:nowrap}
.v4-card-caption span{font-size:16px}
.v4-project-card.v4-slot-left{left:14%;--slot-x:-12px;--slot-y:18px;--slot-z:34px;z-index:5}
.v4-project-card.v4-slot-center{left:36%;--slot-x:0px;--slot-y:-7px;--slot-z:94px;z-index:7}
.v4-project-card.v4-slot-right{left:58%;--slot-x:12px;--slot-y:18px;--slot-z:34px;z-index:5}
.v4-project-card.v4-slot-hidden{opacity:0;visibility:hidden;pointer-events:none;z-index:1;transform:translate3d(0,94px,-65px) scale(.74)}
.v4-project-card:not(.v4-slot-hidden){transform:translate3d(calc(var(--slot-x) + var(--project-x,0px)),calc(var(--slot-y) + var(--project-y,0px)),var(--slot-z)) rotate(var(--card-rotation,0deg)) scale(var(--slot-scale,1))}
.v4-project-card.is-hovered,.v4-project-card.is-touch-selected{
  z-index:12!important;filter:saturate(1.12) brightness(1.08);
  transform:translate3d(calc(var(--slot-x) + var(--project-x,0px)),calc(var(--slot-y) + var(--project-y,0px) - var(--hover-lift)),calc(var(--slot-z) + 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 38px 72px rgba(0,0,0,.5),0 0 0 1px rgba(246,218,170,.65),0 0 30px rgba(224,185,124,.2)
}
.v4-project-card.is-touch-selected{--hover-lift:22px;--hover-extra:.08;--card-tilt-x:0deg;--card-tilt-y:0deg}
.v4-folder-front-flap{
  position:absolute;left:8%;width:84%;top:38%;height:51%;z-index:10;transform-origin:50% 0%;
  transform:translateZ(148px) rotateX(-15deg) translateY(-7px);transform-style:preserve-3d;pointer-events:none
}
.v4-folder-front-flap::before{content:"";position:absolute;left:3%;right:3%;top:-4px;height:13px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.26),rgba(190,222,196,.12),rgba(255,255,255,.28));filter:blur(5px);opacity:.7}
.v4-folder-front{
  position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 0,29% 0,35% 8%,100% 8%,100% 100%,0 100%);
  border-radius:0 0 24px 24px;border:1px solid rgba(231,242,222,.68);
  background:linear-gradient(118deg,color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),transparent) 0%,color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),transparent) 34%,rgba(239,229,203,.19) 59%,color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),transparent) 100%);
  box-shadow:0 23px 58px rgba(2,16,7,.36),inset 0 1px 0 rgba(255,255,255,.56),inset 0 -1px 0 rgba(240,217,184,.3),inset 0 0 28px rgba(230,249,228,.08);
  backdrop-filter:blur(var(--folder-blur)) saturate(175%);-webkit-backdrop-filter:blur(var(--folder-blur)) saturate(175%)
}
.v4-folder-front::before{content:"";position:absolute;left:-18%;top:-100%;width:64%;height:245%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.27),transparent);transform:rotate(26deg);animation:v4-glass-reflection 7.5s ease-in-out 2.8s infinite}
.v4-folder-front::after{content:"";position:absolute;inset:0;border-radius:inherit;border-top:1px solid rgba(255,255,255,.58);box-shadow:inset 0 0 26px rgba(230,249,228,.08);pointer-events:none}
.v4-folder-topline{display:flex;align-items:center;gap:9px;position:absolute;top:19px;left:24px;right:24px;color:#fdf5df;font-size:9px;letter-spacing:.16em;font-weight:800;text-shadow:0 2px 9px rgba(4,18,8,.62)}
.v4-folder-glyph{font-size:20px;font-weight:300;line-height:1;opacity:.92}.v4-folder-version{margin-left:auto;font-size:9px;opacity:.82}
.v4-folder-bottomline{position:absolute;bottom:17px;left:24px;right:21px;display:flex;align-items:center;gap:9px;color:#fff7e7;font-size:10px;letter-spacing:.13em;font-weight:800;text-shadow:0 2px 12px rgba(6,26,14,.68)}
.v4-folder-bottomline>span:first-child{font-family:Georgia,serif;font-size:25px;font-weight:400;letter-spacing:-.02em;line-height:1}.v4-folder-hyphen{width:21px;height:1px;background:rgba(255,248,223,.76)}.v4-folder-arrow{margin-left:auto;font-size:19px;font-weight:400}
.v4-project-switch{position:relative;z-index:14;display:flex;align-items:center;justify-content:center;gap:7px;margin:-4px auto 0;max-width:100%;min-height:40px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:2px 3px}.v4-project-switch::-webkit-scrollbar{display:none}
.v4-switch-btn{appearance:none;border:1px solid rgba(232,211,179,.28);background:rgba(251,247,231,.065);color:#c1cebf;border-radius:30px;padding:9px 12px;font-family:inherit;font-weight:750;font-size:10px;line-height:1.2;cursor:pointer;white-space:nowrap;letter-spacing:.02em;display:flex;gap:5px;align-items:center;transition:all .34s cubic-bezier(.2,.8,.2,1);flex:none}
.v4-switch-btn span{font-size:10px;font-weight:550;opacity:.84}.v4-switch-btn:hover,.v4-switch-btn:focus-visible{border-color:rgba(235,208,157,.72);color:#fff;transform:translateY(-2px)}
.v4-switch-btn.is-current{background:linear-gradient(115deg,rgba(226,190,136,.25),rgba(119,157,126,.2));border-color:rgba(238,199,139,.8);color:#ffe3b9;box-shadow:0 0 25px rgba(217,170,103,.2),inset 0 1px 0 rgba(255,255,255,.17)}
.v4-folder-note{position:absolute;left:3%;right:3%;bottom:6px;display:flex;justify-content:space-between;color:rgba(241,231,210,.48);font-size:9px;letter-spacing:.14em;z-index:1;pointer-events:none}

/* Entrance: the folder settles first, its front pocket relaxes open, then artwork rises from inside. */
.v4-scene.is-preopen .v4-folder-scene{opacity:0;transform:translate3d(0,24px,-28px) scale(.91)}
.v4-scene.is-preopen .v4-folder-front-flap{transform:translateZ(148px) rotateX(-15deg) translateY(-7px)}
.v4-scene.is-preopen .v4-project-card{opacity:0;transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),112px,-68px) rotate(var(--card-rotation,0deg)) scale(.78)}
.v4-scene.is-opening .v4-folder-front-flap{animation:v4-pocket-open var(--folder-open-ms) cubic-bezier(.18,.82,.2,1) .2s both}
.v4-scene.is-opening .v4-project-card{opacity:0;transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),112px,-68px) rotate(var(--card-rotation,0deg)) scale(.78);animation:v4-card-emerge 1.02s cubic-bezier(.16,.9,.2,1) var(--card-delay,720ms) both}
.v4-scene.is-opening .v4-project-card.v4-slot-hidden{animation:none}
.v4-scene.is-open .v4-folder-front-flap{transform:translateZ(148px) rotateX(0deg) translateY(0)}
.v4-scene.is-open .v4-project-card{opacity:1}
@keyframes v4-pocket-open{0%{transform:translateZ(148px) rotateX(-15deg) translateY(-7px)}45%{transform:translateZ(148px) rotateX(3deg) translateY(5px)}72%{transform:translateZ(148px) rotateX(-1.8deg) translateY(1px)}100%{transform:translateZ(148px) rotateX(0deg) translateY(0)}}
@keyframes v4-card-emerge{0%{opacity:0;transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),112px,-68px) rotate(var(--card-rotation,0deg)) scale(.78)}62%{opacity:1}82%{transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) - 5px + var(--project-y,0px)),calc(var(--slot-z,0px) + 10px)) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) + .025))}100%{opacity:1;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))}}
@keyframes v4-glass-reflection{0%,34%{translate:-135% 0;opacity:0}48%{opacity:.65}67%,100%{translate:250% 0;opacity:0}}
.v4-project-card:focus-visible,.v4-switch-btn:focus-visible{outline:2px solid #efc482;outline-offset:5px}.v4-scene:focus-within{z-index:5}

/* CTA: retain the existing warm light, add a richer gold/amber gradient and a slow highlight. */
.hero .button-gold{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(112deg,var(--hero-cta-start,#f4d49d) 0%,#e7b978 48%,var(--hero-cta-end,#c98e51) 100%);border-color:rgba(255,237,204,.66);color:#202a20;box-shadow:0 8px 27px color-mix(in srgb,var(--hero-cta-glow,#e9b977) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.62);transition:transform .32s ease,box-shadow .38s ease,filter .38s ease}
.hero .button-gold::after{content:"";position:absolute;inset:-80% auto -80% -45%;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);transform:rotate(22deg);transition:transform .85s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:-1}
.hero .button-gold:hover{filter:saturate(1.1) brightness(1.05);box-shadow:0 13px 36px color-mix(in srgb,var(--hero-cta-glow,#e9b977) 43%,transparent),inset 0 1px 0 rgba(255,255,255,.74);transform:translateY(-3px)}
.hero .button-gold:hover::after{transform:translateX(480%) rotate(22deg)}
.site-header .nav-cta{background:linear-gradient(110deg,rgba(244,209,158,.15),rgba(201,142,81,.12));border-color:rgba(245,201,139,.72);box-shadow:0 0 22px color-mix(in srgb,var(--hero-cta-glow,#e9b977) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.site-header .nav-cta:hover{background:linear-gradient(110deg,rgba(244,209,158,.23),rgba(201,142,81,.2));border-color:var(--hero-cta-start,#f4d49d);box-shadow:0 0 30px color-mix(in srgb,var(--hero-cta-glow,#e9b977) 33%,transparent)}

@media(min-width:851px){.hero .hero-grid{align-items:center;grid-template-columns:1fr 1.02fr}.v4-scene{height:min(62svh,570px);min-height:410px}.v4-world{height:min(50svh,465px);min-height:340px}.hero h1{max-width:610px}}
@media(min-width:851px) and (max-height:790px){.hero{min-height:0!important}.v4-scene{height:min(57svh,440px);min-height:335px}.v4-world{height:min(48svh,355px);min-height:290px}.v4-folder-back{top:27%;height:64%}.v4-folder-front-flap{top:38%;height:51%}.v4-project-card{top:4%}.v4-project-switch{margin-top:-7px;min-height:34px}.hero h1{font-size:clamp(38px,4.5vw,58px)!important;line-height:1.02}}
@media(max-width:1100px) and (min-width:851px){.v4-project-card{width:29%}.v4-orbits{inset:0 -3%}.v4-folder-topline{top:16px;font-size:8px}.v4-folder-bottomline{font-size:9px}}
@media(max-width:850px){.v4-scene{height:min(65vw,475px);min-height:330px;margin:25px auto 2px;width:100%;max-width:690px}.v4-world{min-height:0;height:calc(100% - 43px)}.v4-folder-note{bottom:0}.v4-project-card{top:4%}}
@media(max-width:590px){
  .v4-scene{height:345px!important;min-height:0;margin:14px auto 4px;width:100%;max-width:390px}
  .v4-world{height:278px;min-height:0}
  .v4-orbits{inset:0 -3% -2%}.v4-orbit{height:108%}.v4-orbit-b{height:78%}.v4-orbit-quiet{height:124%}
  .v4-project-card{width:31%;top:5px;padding:4px;border-radius:8px}.v4-project-card img{border-radius:5px}
  .v4-card-caption{font-size:6px;bottom:7px;left:7px;right:7px}.v4-card-caption span{font-size:11px}
  .v4-project-card.v4-slot-left{left:10%;--slot-x:-6px;--slot-y:13px;--slot-z:25px}
  .v4-project-card.v4-slot-center{left:35%;--slot-x:0;--slot-y:-4px;--slot-z:72px}
  .v4-project-card.v4-slot-right{left:60%;--slot-x:6px;--slot-y:13px;--slot-z:25px}
  .v4-folder-back{left:5%;width:90%;top:78px;height:178px;border-radius:15px}
  .v4-folder-tab{height:20px;top:-17px;border-radius:8px 12px 0 0}
  .v4-folder-base{left:7%;width:86%;top:239px;height:23px;border-radius:6px 6px 15px 15px}
  .v4-folder-side{top:86px;height:164px;width:5%}.v4-folder-side-left{left:3.5%;border-radius:10px 0 0 13px}.v4-folder-side-right{right:3.5%;border-radius:0 10px 13px 0}
  .v4-folder-front-flap{left:3%;width:94%;top:105px;height:140px;transform:translateZ(118px) rotateX(-15deg) translateY(-5px)}
  .v4-folder-front{border-radius:0 0 15px 15px;clip-path:polygon(0 0,29% 0,35% 8%,100% 8%,100% 100%,0 100%)}
  .v4-folder-topline{top:12px;left:14px;right:14px;font-size:7px;gap:6px;letter-spacing:.13em}.v4-folder-glyph{font-size:14px}.v4-folder-version{font-size:7px}
  .v4-folder-bottomline{bottom:11px;left:14px;right:14px;font-size:7px;gap:6px}.v4-folder-bottomline>span:first-child{font-size:19px}.v4-folder-hyphen{width:12px}.v4-folder-arrow{font-size:16px}
  .v4-project-switch{height:39px;margin:0 auto;justify-content:flex-start;padding-inline:2px}.v4-switch-btn{padding:8px 8px;font-size:10px}.v4-switch-btn span{font-size:9px}
  .v4-folder-note{display:none}.hero-bottom{margin-top:2px}
}
@media(max-width:370px){.v4-scene{height:315px!important}.v4-world{height:248px}.v4-project-card{top:4px}.v4-folder-back{top:70px;height:158px}.v4-folder-base{top:212px}.v4-folder-side{top:77px;height:145px}.v4-folder-front-flap{top:94px;height:125px}.v4-switch-btn{padding:7px 6px}.v4-switch-btn span{font-size:8px}}
@media(hover:none){.v4-project-card:hover{filter:unset}}
@media(prefers-reduced-motion:reduce){
  .v4-orbit,.v4-orbit i,.v4-ambient,.v4-folder-front::before{animation:none!important}
  .v4-folder-scene{opacity:1!important;transform:none!important;animation:none!important;translate:none!important;transition:none!important}
  .v4-scene.is-opening .v4-folder-front-flap,.v4-scene.is-open .v4-folder-front-flap{animation:none!important;transform:translateZ(148px) rotateX(0deg) translateY(0)}
  .v4-scene.is-opening .v4-project-card,.v4-scene.is-open .v4-project-card{animation:none!important;opacity:1;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-world,.v4-project-card,.v4-switch-btn{transition:none!important}
}

/* V4.4 — reference-led classic folder silhouette. The tab, shoulders and body form one continuous folder path. */
.v4-folder-rear-shell{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  transform:translate3d(7px,-9px,-22px);
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.24));
}
.v4-folder-rear-svg{display:block;width:100%;height:100%;overflow:visible}
.v4-folder-rear-path{filter:drop-shadow(0 10px 18px rgba(0,0,0,.16))}
.v4-folder-front-flap{
  position:absolute!important;inset:0!important;left:0!important;top:0!important;width:100%!important;height:100%!important;
  z-index:10;transform-origin:50% 30%;transform-style:preserve-3d;
  transform:translateZ(92px) rotateX(-18deg) translateY(-14px);
  pointer-events:none;will-change:transform;
}
.v4-folder-front{
  position:absolute;inset:0;overflow:hidden;
  clip-path:polygon(
    8.6% 27.9%, 8.6% 19.3%, 8.8% 17.6%, 9.4% 16.3%, 10.5% 15.8%,
    29.7% 15.8%, 31.1% 16.2%, 32.3% 17.5%, 39.1% 30.2%,
    86.7% 30.2%, 88.9% 30.6%, 90.5% 31.8%, 91.4% 33.9%,
    91.4% 82.6%, 91.0% 85.5%, 89.8% 88.0%, 87.5% 90.0%,
    84.5% 91.0%, 13.3% 91.0%, 10.5% 90.3%, 8.9% 88.4%,
    8.6% 85.2%, 8.6% 27.9%
  );
  background:
    linear-gradient(126deg,
      color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),rgba(13,30,19,.22)) 0%,
      color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),rgba(15,34,22,.26)) 38%,
      rgba(225,214,186,.15) 60%,
      color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),rgba(13,30,19,.22)) 100%);
  border:0;
  backdrop-filter:blur(var(--folder-blur)) saturate(175%);
  -webkit-backdrop-filter:blur(var(--folder-blur)) saturate(175%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -18px 34px rgba(202,231,202,.09),
    inset 0 0 28px rgba(232,248,224,.11),
    0 26px 55px rgba(0,0,0,.28);
  isolation:isolate;
}
.v4-folder-front::before{
  content:"";position:absolute;inset:-35% -25%;pointer-events:none;
  background:
    linear-gradient(112deg,transparent 28%,rgba(255,255,255,.20) 43%,rgba(224,244,226,.07) 48%,transparent 58%),
    radial-gradient(ellipse at 18% 18%,rgba(255,255,255,.15),transparent 34%),
    radial-gradient(ellipse at 82% 84%,rgba(236,204,153,.12),transparent 35%);
  transform:translateX(-45%) rotate(8deg);
  animation:v4-folder-glass-sweep 8.5s ease-in-out 2.4s infinite;
}
.v4-folder-front::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.11),transparent 18%,transparent 77%,rgba(220,238,218,.07));
  mix-blend-mode:screen;
}
.v4-folder-front-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 8px rgba(183,222,188,.18))}
.v4-folder-front-outline path:first-child{stroke:var(--folder-border,#e9e2ca);stroke-width:3.4;vector-effect:non-scaling-stroke}
.v4-folder-front-outline path:nth-child(2){stroke:rgba(255,255,255,.36);stroke-width:1.8;vector-effect:non-scaling-stroke}
.v4-folder-front-outline path:nth-child(3){stroke:rgba(255,255,255,.20);stroke-width:1.6;vector-effect:non-scaling-stroke}
.v4-folder-topline{
  top:59%;left:13.5%;right:12%;gap:9px;
  color:#f9f5e8;font-size:9px;letter-spacing:.16em;
  text-shadow:0 2px 12px rgba(3,18,9,.68);
}
.v4-folder-bottomline{
  bottom:13%;left:13.5%;right:12%;gap:10px;
  color:#fff6e4;font-size:10px;letter-spacing:.13em;
  text-shadow:0 2px 12px rgba(3,18,9,.7);
}
.v4-folder-bottomline>span:first-child{font-size:27px}
.v4-folder-glyph{font-size:19px}
.v4-folder-front-flap .v4-folder-topline,
.v4-folder-front-flap .v4-folder-bottomline{z-index:2}
.v4-scene.is-preopen .v4-folder-front-flap{
  transform:translateZ(92px) rotateX(-19deg) translateY(-16px);
}
.v4-scene.is-opening .v4-folder-front-flap{
  animation:v4-classic-folder-open var(--folder-open-ms) cubic-bezier(.18,.84,.18,1) .12s both;
}
.v4-scene.is-open .v4-folder-front-flap{
  transform:translateZ(92px) rotateX(0deg) translateY(0);
}
@keyframes v4-classic-folder-open{
  0%{transform:translateZ(92px) rotateX(-19deg) translateY(-16px)}
  48%{transform:translateZ(92px) rotateX(3deg) translateY(4px)}
  76%{transform:translateZ(92px) rotateX(-1.2deg) translateY(-1px)}
  100%{transform:translateZ(92px) rotateX(0deg) translateY(0)}
}
@keyframes v4-folder-glass-sweep{
  0%,35%{transform:translateX(-45%) rotate(8deg);opacity:0}
  48%{opacity:.9}
  72%,100%{transform:translateX(42%) rotate(8deg);opacity:0}
}
/* Artwork starts below the folder lip, then rises in a soft stagger — no generic fade-only reveal. */
.v4-scene.is-preopen .v4-project-card,
.v4-scene.is-opening .v4-project-card{
  opacity:0;
  transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),138px,-82px) rotate(var(--card-rotation,0deg)) scale(.80);
}
.v4-scene.is-opening .v4-project-card:not(.v4-slot-hidden){
  animation:v4-classic-card-rise 1.22s cubic-bezier(.16,.92,.22,1) var(--card-delay,900ms) both;
}
.v4-scene.is-opening .v4-project-card.v4-slot-hidden{animation:none}
.v4-scene.is-open .v4-project-card{opacity:1}
@keyframes v4-classic-card-rise{
  0%{opacity:0;transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),138px,-82px) rotate(var(--card-rotation,0deg)) scale(.80)}
  58%{opacity:1}
  78%{transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) - 7px + var(--project-y,0px)),calc(var(--slot-z,0px) + 13px)) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) + .035))}
  100%{opacity:1;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-card{backface-visibility:hidden}
@media(max-width:590px){
  .v4-folder-front-flap{inset:0!important;width:100%!important;height:100%!important}
  .v4-folder-front{clip-path:polygon(
    8.6% 27.9%,8.6% 19.3%,8.8% 17.6%,9.4% 16.3%,10.5% 15.8%,
    29.7% 15.8%,31.1% 16.2%,32.3% 17.5%,39.1% 30.2%,
    86.7% 30.2%,88.9% 30.6%,90.5% 31.8%,91.4% 33.9%,
    91.4% 82.6%,91% 85.5%,89.8% 88%,87.5% 90%,84.5% 91%,
    13.3% 91%,10.5% 90.3%,8.9% 88.4%,8.6% 85.2%,8.6% 27.9%
  )}
  .v4-folder-topline{top:59%;left:13%;right:12%;font-size:7px;gap:6px}
  .v4-folder-bottomline{bottom:13%;left:13%;right:12%;font-size:7px;gap:6px}
  .v4-folder-bottomline>span:first-child{font-size:19px}
  .v4-folder-glyph{font-size:14px}
  .v4-scene.is-preopen .v4-project-card,.v4-scene.is-opening .v4-project-card{
    transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),92px,-54px) rotate(var(--card-rotation,0deg)) scale(.80)
  }
  @keyframes v4-classic-card-rise{
    0%{opacity:0;transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),92px,-54px) rotate(var(--card-rotation,0deg)) scale(.80)}
    58%{opacity:1}
    78%{transform:translate3d(calc(var(--slot-x,0px) + var(--project-x,0px)),calc(var(--slot-y,0px) - 5px + var(--project-y,0px)),calc(var(--slot-z,0px) + 8px)) rotate(var(--card-rotation,0deg)) scale(calc(var(--slot-scale,1) + .03))}
    100%{opacity:1;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))}
  }
}
@media(prefers-reduced-motion:reduce){
  .v4-folder-front::before{animation:none!important}
  .v4-scene.is-preopen .v4-folder-front-flap,.v4-scene.is-opening .v4-folder-front-flap,.v4-scene.is-open .v4-folder-front-flap{
    transform:translateZ(92px) rotateX(0deg) translateY(0)!important;animation:none!important
  }
}
.v4-folder-front-flap::before{content:none!important;display:none!important}


/* V4.5 — balanced artwork hierarchy and a cleaner classic glass-folder pocket. */
.v4-folder-rear-shell{
  transform:translate3d(4px,-5px,-18px);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.20));
}
.v4-folder-rear-path{filter:drop-shadow(0 6px 12px rgba(0,0,0,.12))}
.v4-folder-front{
  /* The raised tab belongs to the rear folder shell; the front is one clean pocket panel. */
  clip-path:polygon(
    8.6% 30.2%,86.7% 30.2%,88.9% 30.6%,90.5% 31.8%,91.4% 33.9%,
    91.4% 82.6%,91% 85.5%,89.8% 88%,87.5% 90%,84.5% 91%,
    13.3% 91%,10.5% 90.3%,8.9% 88.4%,8.6% 85.2%,8.6% 30.2%
  );
  background:
    linear-gradient(126deg,
      color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),rgba(13,30,19,.16)) 0%,
      color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),rgba(15,34,22,.18)) 38%,
      rgba(225,214,186,.10) 60%,
      color-mix(in srgb,var(--folder-tint) var(--folder-opacity-pct),rgba(13,30,19,.16)) 100%);
  backdrop-filter:blur(var(--folder-blur)) saturate(155%);
  -webkit-backdrop-filter:blur(var(--folder-blur)) saturate(155%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -12px 24px rgba(202,231,202,.055),
    inset 0 0 18px rgba(232,248,224,.075),
    0 18px 36px rgba(0,0,0,.20);
}
.v4-folder-front-outline path:first-child{
  stroke:var(--folder-border,#e9e2ca);
  stroke-width:2.8;
  vector-effect:non-scaling-stroke;
}
.v4-folder-front-outline path:nth-child(2){
  stroke:rgba(255,255,255,.22);
  stroke-width:1.3;
  vector-effect:non-scaling-stroke;
}
.v4-folder-front-outline path:nth-child(3){
  stroke:rgba(255,255,255,.13);
  stroke-width:1.2;
  vector-effect:non-scaling-stroke;
}
/* A quieter double-edge: the rear shell stays visible as depth, not as a second heavy outline. */
.v4-folder-rear-svg path:first-of-type{stroke-width:2.5}
.v4-project-card.v4-slot-left{left:12.5%;--slot-x:-5px;--slot-y:16px;--slot-z:38px;z-index:5}
.v4-project-card.v4-slot-center{left:36%;--slot-x:0px;--slot-y:-7px;--slot-z:94px;z-index:7}
.v4-project-card.v4-slot-right{left:59.5%;--slot-x:5px;--slot-y:16px;--slot-z:38px;z-index:5}
.v4-folder-front-flap{transform-origin:50% 30%}
.v4-scene.is-preopen .v4-folder-front-flap{
  transform:translateZ(92px) rotateX(-30deg) translateY(-19px);
}
@keyframes v4-classic-folder-open{
  0%{transform:translateZ(92px) rotateX(-30deg) translateY(-19px)}
  46%{transform:translateZ(92px) rotateX(3deg) translateY(4px)}
  76%{transform:translateZ(92px) rotateX(-1deg) translateY(-1px)}
  100%{transform:translateZ(92px) rotateX(0deg) translateY(0)}
}
@media(max-width:590px){
  .v4-project-card.v4-slot-left{left:9.5%;--slot-x:-3px;--slot-y:11px;--slot-z:27px}
  .v4-project-card.v4-slot-center{left:35%;--slot-x:0px;--slot-y:-4px;--slot-z:72px}
  .v4-project-card.v4-slot-right{left:61%;--slot-x:3px;--slot-y:11px;--slot-z:27px}
  .v4-folder-front{clip-path:polygon(
    8.6% 30.2%,86.7% 30.2%,88.9% 30.6%,90.5% 31.8%,91.4% 33.9%,
    91.4% 82.6%,91% 85.5%,89.8% 88%,87.5% 90%,84.5% 91%,
    13.3% 91%,10.5% 90.3%,8.9% 88.4%,8.6% 85.2%,8.6% 30.2%
  )}
  .v4-scene.is-preopen .v4-folder-front-flap{
    transform:translateZ(92px) rotateX(-30deg) translateY(-15px);
  }
  @keyframes v4-classic-folder-open{
    0%{transform:translateZ(92px) rotateX(-30deg) translateY(-15px)}
    46%{transform:translateZ(92px) rotateX(3deg) translateY(3px)}
    76%{transform:translateZ(92px) rotateX(-1deg) translateY(-1px)}
    100%{transform:translateZ(92px) rotateX(0deg) translateY(0)}
  }
}