/* Interactive six-sided portfolio sculpture and its local image editor. */
html[data-theme="forest"] { --cube-ui-accent: #176b50; --cube-glow: #b3c9ad; }
html[data-theme="crystal"] { --cube-ui-accent: #2355df; --cube-glow: #9ac7fa; }
html[data-theme="bloom"] { --cube-ui-accent: #dc477a; --cube-glow: #efafcb; }
html[data-theme="original"] { --cube-ui-accent: #7966d9; --cube-glow: #a7c9f4; }

.nav-main .skin-switcher { position: relative; inset: auto; z-index: 5; flex: none; margin: 0 2px 0 8px; color: var(--ink); font: 400 14px/1.2 var(--sans); }
.nav-main .skin-toggle { min-height: 39px; margin: 0; padding: 9px 12px; gap: 7px; white-space: nowrap; border-radius: 7px; background: transparent; border: 1px solid transparent; box-shadow: none; font-size: 13px; font-weight: 500; }
.nav-main .skin-toggle:hover, .nav-main .skin-toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--cube-ui-accent) 8%, white); border-color: color-mix(in srgb, var(--cube-ui-accent) 18%, white); }
.nav-main .skin-toggle .chevron { margin-left: 1px; }
.nav-main .skin-toggle[aria-expanded="true"] .chevron { transform: translateY(3px) rotate(225deg); }
.nav-main .skin-options { position: absolute; top: calc(100% + 18px); right: 0; width: 284px; margin: 0; padding: 17px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--cube-ui-accent) 23%, white); background: rgba(255,255,255,.96); box-shadow: 0 20px 60px #14142624; backdrop-filter: blur(18px); }
.nav-main .skin-options p { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.nav-main .skin-option { min-height: 62px; padding: 8px 11px; gap: 15px; background: #fff; border: 1px solid #e8e8eb; border-radius: 7px; font-size: 15px; }
.nav-main .skin-option+.skin-option { margin-top: 7px; }
.nav-main .skin-option:hover { border-color: var(--cube-ui-accent); }
.nav-main .skin-option[aria-pressed="true"] { background: color-mix(in srgb, var(--cube-ui-accent) 8%, white); border-color: var(--cube-ui-accent); box-shadow: inset 0 0 0 1px var(--cube-ui-accent); }
.nav-main .skin-option[aria-pressed="true"]::after { font-size: 11px; }
.cube-edit-open { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 13px; padding: 13px 4px 2px; border-top: 1px solid #e8e8eb; background: none; color: var(--cube-ui-accent); font-size: 13px; text-align: left; }
.cube-edit-open:hover { text-decoration: underline; }

.hero-inner .cube-stage { position: relative; isolation: isolate; display: grid; place-items: center; width: min(100%, 660px); height: 100%; min-height: 0; max-height: none; margin: 0 auto; perspective: 1200px; overflow: visible; cursor: grab; }
.hero-inner .cube-stage:active { cursor: grabbing; }
.cube-stage .cube-halo { position: absolute; z-index: -1; width: min(90%, 580px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cube-glow) 42%, transparent), transparent 70%); filter: blur(10px); }
.cube-stage .cube-ground { position: absolute; z-index: -1; width: min(68%, 380px); height: 60px; bottom: 11%; border-radius: 50%; background: color-mix(in srgb, var(--cube-glow) 36%, transparent); filter: blur(28px); }
.cube-hint { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .13em; opacity: .75; }
.cube-object { --cube-size: clamp(260px, 31vw, 430px); --cube-depth: calc(var(--cube-size) / 2); position: relative; width: var(--cube-size); height: var(--cube-size); transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(32deg); will-change: transform; }
.cube-face { position: absolute; inset: 0; display: block; border: max(2px, calc(var(--cube-size) * .007)) solid #fff; background-color: var(--face-color); background-image: linear-gradient(145deg, #ffffff4a 0%, transparent 38%, #0000001c 100%); background-size: cover; background-position: center; backface-visibility: hidden; box-shadow: inset 0 0 0 1px #ffffff70, inset 0 0 45px #ffffff1b, 0 0 4px #ffffff7a; }
.cube-face::after { content: ""; position: absolute; inset: 8%; border: 1px solid #ffffff66; pointer-events: none; }
.cube-face[data-face="front"] { --face-color: var(--cube-front); transform: translateZ(var(--cube-depth)); }
.cube-face[data-face="right"] { --face-color: var(--cube-right); transform: rotateY(90deg) translateZ(var(--cube-depth)); }
.cube-face[data-face="back"] { --face-color: var(--cube-back); transform: rotateY(180deg) translateZ(var(--cube-depth)); }
.cube-face[data-face="left"] { --face-color: var(--cube-left); transform: rotateY(-90deg) translateZ(var(--cube-depth)); }
.cube-face[data-face="top"] { --face-color: var(--cube-top); transform: rotateX(90deg) translateZ(var(--cube-depth)); }
.cube-face[data-face="bottom"] { --face-color: var(--cube-bottom); transform: rotateX(-90deg) translateZ(var(--cube-depth)); }

.cube-mini { --cube-size: 33px; --cube-depth: 16.5px; display: grid; place-items: center; flex: none; width: 42px; height: 42px; perspective: 170px; }
.cube-mini .cube-object { --cube-size: 29px; --cube-depth: 14.5px; transform: rotateX(-25deg) rotateY(32deg); will-change: auto; }
.cube-mini .cube-face { border-width: 1px; box-shadow: inset 0 0 0 1px #ffffff58; }
.cube-mini .cube-face::after { inset: 4px; }

.cube-editor { width: min(920px, calc(100vw - 30px)); max-height: calc(100dvh - 30px); padding: 28px; overflow: auto; border: 1px solid color-mix(in srgb, var(--cube-ui-accent) 30%, white); border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 28px 90px #17202b55; }
.cube-editor::backdrop { background: #0b132cb3; backdrop-filter: blur(5px); }
.cube-editor-head { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.cube-editor-head .mono { color: var(--cube-ui-accent); }
.cube-editor-head h2 { margin-top: 7px; font-size: clamp(23px, 3vw, 34px); }
.cube-editor-head [data-close] { width: 36px; height: 36px; border-radius: 50%; background: #f2f2f4; font-size: 25px; line-height: 1; }
.cube-editor-intro { max-width: 72ch; margin: 13px 0 22px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.cube-editor-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.cube-editor-toolbar>label:first-child { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.cube-editor select { min-height: 40px; min-width: 160px; padding: 8px 11px; border: 1px solid #d8dce1; border-radius: 7px; background: #fff; color: var(--ink); }
.cube-batch-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--cube-ui-accent); border-radius: 7px; color: var(--cube-ui-accent); font-size: 13px; cursor: pointer; }
.cube-batch-button:hover { background: color-mix(in srgb, var(--cube-ui-accent) 8%, white); }
.cube-editor-main { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: 22px; }
.cube-editor-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 370px; padding: 20px; border-radius: 10px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cube-glow) 36%, white), #f8f9fb 73%); perspective: 650px; overflow: hidden; }
.cube-editor-preview .cube-object { --cube-size: 155px; --cube-depth: 77.5px; }
.cube-editor-preview p { margin-top: 45px; color: var(--muted); font-size: 11px; }
.cube-face-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.cube-face-control { display: flex; align-items: center; gap: 10px; min-height: 112px; padding: 11px; border: 1px solid #e6e6e9; border-radius: 9px; }
.cube-face-swatch { display: block; flex: none; width: 50px; height: 50px; border: 2px solid #fff; outline: 1px solid #d9dce0; background: var(--swatch-color); background-size: cover; background-position: center; }
.cube-face-control strong { display: block; margin-bottom: 5px; font-size: 13px; }
.cube-face-control label, .cube-face-control button { display: inline-block; margin-right: 8px; padding: 0; background: none; color: var(--cube-ui-accent); font-size: 11px; line-height: 1.7; white-space: nowrap; cursor: pointer; }
.cube-face-control label:hover, .cube-face-control button:hover { text-decoration: underline; }
.cube-face-control button:disabled { color: #a5a5ad; cursor: default; text-decoration: none; }
.cube-editor-note { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cube-editor-status { min-height: 22px; margin-top: 6px; color: var(--cube-ui-accent); font-size: 12px; }

@media (max-width: 1199px) {
  #nav-items, .nav-actions { display: none; }
  .menu-button { display: flex; }
  .nav-dropdown { grid-template-columns: 1fr 1fr; padding: 28px; top: 68px; }
  .mobile-nav-list { grid-column: 1 / -1; }
  .mobile-nav-list button, .mobile-nav-list>a { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 22px; padding: 15px 0; background: none; border-bottom: 1px solid #eee; text-align: left; }
  .mobile-back { grid-column: 1 / -1; text-align: left; background: none; font-size: 14px; margin-bottom: 10px; padding: 10px 0; }
}
@media (max-width: 767px) {
  .hero-inner .cube-stage { width: 100%; height: 100%; max-height: none; padding: 0 0 6px; }
  .cube-stage .cube-object { --cube-size: min(52vw, 28dvh, 220px); --cube-depth: calc(var(--cube-size) / 2); }
  .cube-stage .cube-ground { bottom: 4%; width: 52%; height: 35px; }
  .cube-hint { bottom: 1%; font-size: 8px; }
  .nav-main .skin-options { position: fixed; top: 77px; right: 10px; width: min(284px, calc(100vw - 20px)); }
  .cube-editor { padding: 20px; }
  .cube-editor-main { grid-template-columns: 1fr; }
  .cube-editor-preview { min-height: 220px; }
  .cube-editor-preview .cube-object { --cube-size: 115px; --cube-depth: 57.5px; }
  .cube-editor-preview p { margin-top: 25px; }
}
@media (max-width: 480px) {
  .cube-editor-toolbar { align-items: stretch; flex-direction: column; }
  .cube-face-controls { grid-template-columns: 1fr; }
  .cube-face-control { min-height: 76px; }
  .nav-main { padding-inline: 11px; }
  .nav-main .skin-switcher { margin-left: auto; }
  .nav-main .skin-toggle { padding-inline: 7px; font-size: 11px; }
  .wordmark { font-size: 18px; }
  .wordmark img { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) { .cube-object { will-change: auto; } }
html.reduce-motion .cube-object { will-change: auto; }
/* Integrated reference scenes and compact header identity. */
html[data-theme="forest"] .hero { background: url('assets/portfolio-forest-scene.png') center / cover no-repeat; }
html[data-theme="crystal"] .hero { background: url('assets/portfolio-crystal-scene.png') center / cover no-repeat; }
html[data-theme="bloom"] .hero { background: url('assets/portfolio-bloom-scene.png') center / cover no-repeat; }
html:not([data-theme="original"]) .original-hero { visibility: hidden; }
html[data-theme] .hero-inner, html[data-theme] .trust-strip { position: relative; z-index: 1; }
html:not([data-theme="original"]) .wordmark>span { display:flex; align-items:center; gap:12px; white-space:nowrap; }
html:not([data-theme="original"]) .wordmark { font-size:19px; letter-spacing:.04em; }
html:not([data-theme="original"]) .wordmark small { display:block; margin:0; max-width:80px; white-space:normal; line-height:1.5; font-size:8px; letter-spacing:.16em; }
.nav-main .skin-switcher { display:flex; align-items:center; gap:5px; }
.nav-cube-stage { width:42px; height:42px; display:grid; place-items:center; perspective:180px; flex:none; touch-action:pan-y; }
.nav-cube-stage .cube-object { --cube-size:25px; --cube-depth:12.5px; }
.nav-cube-stage .cube-face { border-width:1px; box-shadow:inset 0 0 0 1px #ffffff55; }
.nav-cube-stage .cube-face::after { inset:3px; }
html[data-theme] .closing { padding:50px 20px 20px; min-height:0; }
html[data-theme] .closing .footer-card { margin-top:0; position:relative; }
html[data-theme] .closing .closing-background { top:0; bottom:auto; left:50%; transform:translateX(-50%); width:100%; height:100%; min-height:0; object-fit:cover; }
.cube-face-control input[type=file] { display:block; max-width:150px; font-size:10px; margin-top:5px; }
.cube-batch-button input { display:block; max-width:190px; font-size:10px; margin-top:5px; }
@media(max-width:767px) {
 html:not([data-theme="original"]) .wordmark { font-size:15px; }
 html:not([data-theme="original"]) .wordmark>span { gap:6px; }
 html:not([data-theme="original"]) .wordmark small { max-width:55px; font-size:6px; letter-spacing:.08em; }
 .nav-main .skin-switcher { margin-left:auto; gap:0; }
 .nav-cube-stage { width:30px; }
 .nav-cube-stage .cube-object { --cube-size:20px; --cube-depth:10px; }
 .nav-main .skin-toggle { padding:8px 3px; font-size:11px; gap:4px; }
 html[data-theme="forest"] .hero { background:linear-gradient(#f5f0e8 0%,#f5f0e8 39%,transparent 53%),url('assets/portfolio-forest-scene.png') 77% bottom / auto 62% no-repeat,#f5f0e8; }
 html[data-theme="crystal"] .hero { background:linear-gradient(#f1f6ff 0%,#f1f6ff 39%,transparent 53%),url('assets/portfolio-crystal-scene.png') 80% bottom / auto 62% no-repeat,#f1f6ff; }
 html[data-theme="bloom"] .hero { background:linear-gradient(#fff0ec 0%,#fff0ec 39%,transparent 53%),url('assets/portfolio-bloom-scene.png') 80% bottom / auto 62% no-repeat,#fff0ec; }
 html[data-theme] .closing { padding:30px 12px 12px; }
 .nav-main .skin-options { right:-35px; width:min(284px,calc(100vw - 30px)); }
}
/* Keep this decorative layer out of the hero grid at every breakpoint. */
.hero-scene { position:absolute; inset:0; pointer-events:none; }
@media(max-width:767px) { .hero-scene { display:none; } }
/* Full scene remains proportional; motion is isolated from live content. */
@media(min-width:768px) {
 html[data-theme] .hero { position:relative; isolation:isolate; overflow:hidden; }
 html:not([data-theme="original"]) .hero { background-image:none; }
 .hero-scene { position:absolute; inset:-22px; pointer-events:none; background-position:center; background-size:cover; background-repeat:no-repeat; will-change:transform; }
 html[data-theme="forest"] .hero-scene { background-image:url('assets/portfolio-forest-scene.png'); }
 html[data-theme="crystal"] .hero-scene { background-image:url('assets/portfolio-crystal-scene.png'); }
 html[data-theme="bloom"] .hero-scene { background-image:url('assets/portfolio-bloom-scene.png'); }
}
@media(max-width:767px),(prefers-reduced-motion:reduce) { .hero-scene { will-change:auto; } }

/* The ice-blue hero shows genuine adjacent camera renders from Blender. */
@media(min-width:1200px) {
 html[data-theme="crystal"] .hero-scene { inset:0; background-image:url('assets/crystal-codex1/hero-studio.webp?v=studio-4k-6'); background-size:cover; background-position:center; }
 html[data-theme="crystal"].crystal-codex1-ready .hero-scene { transform:perspective(1600px) rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg)) scale(1.075) !important; transform-origin:72% 48%; }
 html[data-theme="crystal"].crystal-codex1-ready .hero { background:#f7fafd; }
}
@media(min-width:1200px) and (min-aspect-ratio:16/9) {
 html[data-theme="crystal"].crystal-codex1-ready .hero-scene { background-size:cover; background-position:center; }
}
/* Real model and fixed-orientation camera translation; never warp the scene. */
html[data-theme="crystal"].crystal-live-ready .hero-scene { inset:0; transform:none !important; background:none; }
.crystal-codex1-canvas { width:100%; height:100%; display:block; }
html:not([data-theme="crystal"]) .crystal-codex1-canvas { display:none; }
/* Restore the verified Blender scene: no live canvas or image skew. */
@media(min-width:1200px) {
 html[data-theme="crystal"].crystal-codex1-ready .hero-scene {
  inset:0; transform:none !important;
  background-image:url('assets/crystal-codex1/hero-studio.webp?v=restored-4k-8');
  background-size:cover; background-position:center;
 }
}
/* Fit the complete sculpture between the navigation and tools on wide screens.
   A matching full-width studio gradient removes exposed white margins. */
@media(min-width:1200px) {
 html[data-theme="crystal"].crystal-codex1-ready .hero-scene {
  background-image:linear-gradient(180deg,#ecf1f7 0%,#eaf0f8 25%,#dde8f8 50%,#cadbf4 75%,#d5e3f7 100%);
 }
 html[data-theme="crystal"].crystal-codex1-ready .hero-scene::before {
  content:"";position:absolute;right:0;top:5%;height:90%;width:160dvh;max-width:100%;
  background:url('assets/crystal-codex1/hero-studio.webp?v=restored-4k-8') right center / contain no-repeat;
  mask-image:linear-gradient(to right,transparent,#000 18%),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);
  mask-composite:intersect;
 }
}