/* Cube gallery — adapted from https://codepen.io/luis-lessrain/pen/ZYpyoRV */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap");

.projects-showcase {
  position: relative;
  isolation: isolate;
  margin-left: -1.5rem;
  margin-right: -2rem;
  width: calc(100% + 3.5rem);
  /* Transparent so page parallax wash continues through the cube block */
  background: transparent;
  color: var(--site-text, #e8e8e9);
  font-family: "DM Mono", monospace;
  margin-bottom: 4rem;
}

.projects-showcase .text-card {
  pointer-events: auto;
}

@layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive;

@layer reset {
  .projects-showcase,
  .projects-showcase *,
  .projects-showcase *::before,
  .projects-showcase *::after {
   box-sizing: border-box;
  }
}

@layer tokens {
  .projects-showcase {
   color-scheme: dark;

   --dark-bg: var(--site-bg, rgba(67, 72, 79, 0.95));
   --dark-fg: var(--site-text, #e8e8e9);
   --dark-muted: #9ca3af;
   --light-bg: #f0ece3;
   --light-fg: #0d0d14;
   --light-muted: #9a9aaa;
  --accent-dark: #38bdf8;
   --accent-light: #3a6e00;

   --bg: var(--dark-bg);
   --fg: var(--dark-fg);
   --muted: var(--dark-muted);
   --accent: var(--accent-dark);

   --font-display: "Bebas Neue", sans-serif;
   --font-mono: "DM Mono", monospace;
   --hairline: 0.0625rem;
   --ui-inset: 2rem;
   --text-right-inset: 3rem;
   --card-bg: var(--block-bg, rgba(67, 72, 79, 0.95));
  --card-border: rgba(56, 189, 248, 0.2);
   --nav-x: calc(var(--ui-inset) + 0.125rem);
   --reveal-offset: 0.625rem;
   --reveal-duration: 0.5s;
   --z-ui: 10;
   --content-y-shift: 10rem; /* смещение text-card вниз */
   --cube-y-lift: 5rem; /* ~80px — куб чуть выше текста */
   --face-frame-inset: 7%;
   --face-frame-border: 2px solid var(--accent);
   --viewport-fade: 1;
   --cube-exit-pad: 0px;
  }
}

@layer base {
  .projects-showcase {
   background: transparent;
   color: var(--fg);
   font-family: var(--font-mono);
   overflow-x: hidden;
   transition: color 0.3s ease;
  }
}

@layer layout {
  .projects-showcase__viewport {
   position: fixed;
   z-index: 20;
   pointer-events: none;
   visibility: hidden;
   opacity: 0;
   overflow: hidden;
   transition: opacity 0.35s ease;
  }

  .projects-showcase.is-active .projects-showcase__viewport {
   visibility: visible;
   opacity: var(--viewport-fade, 1);
  }

 .projects-showcase #scene {
   position: absolute;
   inset: 0;
   z-index: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   perspective: 1100px;
   pointer-events: none;
   translate: 0 calc(var(--content-y-shift) - var(--cube-y-lift));
  }

 .projects-showcase #scroll_container {
   position: relative;
   z-index: 1;
  }

 .projects-showcase section {
   height: 100svh;
   min-height: 100svh;
   max-height: 100svh;
   box-sizing: border-box;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   padding: calc(6rem + var(--content-y-shift)) calc(5rem + var(--ui-inset)) 6rem 5rem;
   scroll-snap-align: start;
   scroll-snap-stop: always;
  }

 .projects-showcase .text-card {
   position: sticky;
   top: calc(50% + var(--content-y-shift));
   translate: 0 -50%;
   z-index: 30;
  }

 .projects-showcase section:has(.text-card.right) {
   padding-inline-end: calc(5rem + var(--ui-inset) + var(--text-right-inset));
  }

 .projects-showcase .text-card.right {
   margin-inline-start: auto;
  }
}

@layer cube {
 .projects-showcase #cube {
   --s: min(68vw, 62svh, 520px);
   width: var(--s);
   height: var(--s);
   position: relative;
   transform-style: preserve-3d;
   transform: rotateX(90deg) rotateY(0deg);
   will-change: transform;
  }

 .projects-showcase .face {
   position: absolute;
   inset: 0;
   overflow: hidden;
   backface-visibility: hidden;
   background: repeating-linear-gradient(
       0deg,
       rgba(255, 255, 255, 0.02) 0,
       rgba(255, 255, 255, 0.02) 1px,
       transparent 1px,
       transparent 48px
     ),
     repeating-linear-gradient(
       90deg,
       rgba(255, 255, 255, 0.02) 0,
       rgba(255, 255, 255, 0.02) 1px,
       transparent 1px,
       transparent 48px
     ),
     var(--site-bg, rgba(67, 72, 79, 0.95));
  }

 .projects-showcase .face img {
   position: absolute;
   top: var(--face-frame-inset);
   left: var(--face-frame-inset);
   width: calc(100% - 2 * var(--face-frame-inset));
   height: calc(100% - 2 * var(--face-frame-inset));
   box-sizing: border-box;
   aspect-ratio: 1;
   object-fit: cover;
   object-position: center;
   display: block;
   border: var(--face-frame-border);
   background: var(--site-bg, rgba(67, 72, 79, 0.95));
  }

 .projects-showcase .face:has(img) .face-ph {
   display: none;
  }

 .projects-showcase .face-ph {
   position: absolute;
   bottom: 1.5rem;
   left: 1.75rem;
   font-family: var(--font-display);
   font-size: clamp(2rem, 8vw, 5rem);
   letter-spacing: 0.04em;
   color: rgba(255, 255, 255, 0.06);
   pointer-events: none;
   user-select: none;
  }

 .projects-showcase .face[data-face="front"] {
   transform: translateZ(calc(var(--s) / 2));
  }
 .projects-showcase .face[data-face="back"] {
   transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
  }
 .projects-showcase .face[data-face="right"] {
   transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
  }
 .projects-showcase .face[data-face="left"] {
   transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
  }
 .projects-showcase .face[data-face="top"] {
   transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
  }
 .projects-showcase .face[data-face="bottom"] {
   transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
  }
}

@layer ui {
 .projects-showcase #hud {
   position: absolute;
   top: var(--ui-inset);
   right: var(--ui-inset);
   z-index: var(--z-ui);
   text-align: right;
   font-size: 0.65rem;
   letter-spacing: 0.15em;
   color: var(--muted);
   text-transform: uppercase;

   .projects-showcase .progress-bar {
     width: 7.5rem;
     height: var(--hairline);
     background: var(--muted);
     margin-block-start: 0.5rem;
     margin-inline-start: auto;
     position: relative;
     overflow: hidden;
   }

   .projects-showcase .progress-fill {
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
     width: 0%;
     background: var(--accent);
     transition: width 0.1s linear;
   }

   .projects-showcase .scene-label {
     font-size: 0.6rem;
     color: var(--accent);
     margin-block-start: 0.4rem;
   }
  }

 .projects-showcase #scene_strip {
   position: absolute;
   left: var(--nav-x);
   top: 50%;
   translate: -50% -50%;
   z-index: var(--z-ui);
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   pointer-events: auto;
  }

 .projects-showcase .scene-dot {
   position: relative;
   display: block;
   width: 0.25rem;
   height: 0.25rem;
   border-radius: 50%;
   background: var(--muted);
   transition: background 0.3s, scale 0.3s;
   cursor: pointer;

   &::before {
     content: "";
     position: absolute;
     inset: -0.2rem;
   }

   &.active {
     background: var(--accent);
     scale: 1.8;
   }
  }

 .projects-showcase #theme_toggle {
   position: absolute;
   bottom: var(--ui-inset);
   left: var(--nav-x);
   translate: -50% 0;
   z-index: var(--z-ui);
   pointer-events: auto;
   width: 2rem;
   height: 2rem;
   border: none;
   background: color-mix(in srgb, var(--muted) 35%, transparent);
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.3s;

   &:hover {
     background: color-mix(in srgb, var(--muted) 55%, transparent);
   }

   svg {
     width: 0.875rem;
     height: 0.875rem;
     position: absolute;
     transition: opacity 0.3s ease, rotate 0.3s ease;
     color: var(--accent);
   }

   .icon-sun {
     opacity: 1;
     rotate: 0deg;
   }

   .icon-moon {
     opacity: 0;
     rotate: 90deg;
   }
  }

 .projects-showcase #face_caption {
   position: absolute;
   bottom: var(--ui-inset);
   left: 50%;
   translate: -50% 0;
   z-index: var(--z-ui);
   text-align: center;
   pointer-events: none;
   user-select: none;
  }

 .projects-showcase #face_caption_num {
   font-size: 0.58rem;
   letter-spacing: 0.28em;
   color: var(--accent);
   text-transform: uppercase;
   margin-block-end: 0.15rem;
  }

 .projects-showcase #face_caption_name {
   font-family: var(--font-display);
   font-size: clamp(1.8rem, 5vw, 3.5rem);
   letter-spacing: 0.08em;
   color: var(--muted);
   opacity: 0.5;
   line-height: 1;
  }

 .projects-showcase #credit {
   display: none;
  }
}

@layer cards {
 .projects-showcase .text-card {
   max-width: 25.75rem;
   width: 25.75rem;
   padding: 2.25rem 2rem;
   background: var(--card-bg);
   border-left: var(--hairline) solid var(--card-border);
   backdrop-filter: blur(6px) saturate(120%);
   -webkit-backdrop-filter: blur(6px) saturate(120%);
   overflow: hidden;
   transition: background 0.3s ease, border-color 0.3s ease;

   &.right {
     margin-inline-start: auto;
     border-left: none;
     border-right: var(--hairline) solid var(--card-border);
     text-align: right;

     .h-line {
       transform-origin: right;
       margin-inline-start: auto;
     }
   }

   &.center {
     margin-inline: auto;
     border-left: none;
     border-top: var(--hairline) solid var(--card-border);
     text-align: center;
     max-width: 28.75rem;

     .h-line {
       transform-origin: center;
       margin-inline: auto;
     }
   }
  }

 .projects-showcase .tag {
   font-size: 0.6rem;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   color: var(--accent);
   margin-block-end: 1.1rem;
  }

 .projects-showcase :where(h1, h2) {
   font-family: var(--font-display);
   font-weight: 400;
   letter-spacing: 0.03em;
   line-height: 0.92;
  }

 .projects-showcase h1 {
   font-size: clamp(3rem, 8vw, 6.5rem);
  }

 .projects-showcase h2 {
   font-size: clamp(2.2rem, 5vw, 4rem);
  }

 .projects-showcase .body-text {
   font-size: 0.78rem;
   line-height: 1.8;
   color: color-mix(in srgb, var(--fg) 55%, transparent);
   margin-block-start: 1.25rem;
  }

 .projects-showcase .stat-row {
   display: flex;
   gap: 2.5rem;
   margin-block-start: 2rem;
   flex-wrap: wrap;
  }

 .projects-showcase .stat {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
  }

 .projects-showcase .stat-num {
   font-family: var(--font-display);
   font-size: 2.2rem;
   color: var(--accent);
   line-height: 1;
  }

 .projects-showcase .stat-label {
   font-size: 0.58rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--muted);
  }

 .projects-showcase .h-line {
   width: 3.75rem;
   height: 2px;
   border-radius: 999px;
   background: linear-gradient(
     90deg,
     var(--accent) 0%,
     color-mix(in srgb, var(--accent) 35%, transparent) 100%
   );
   margin-block-end: 1.2rem;
   transform-origin: left;
  }

 .projects-showcase .text-card.right .h-line {
   margin-inline-start: auto;
   transform-origin: right;
   background: linear-gradient(
     270deg,
     var(--accent) 0%,
     color-mix(in srgb, var(--accent) 35%, transparent) 100%
   );
  }

 .projects-showcase .cta-row {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 0.75rem;
   margin-block-start: 1.75rem;
  }

 .projects-showcase .text-card.right .cta-row {
   justify-content: flex-end;
  }

 .projects-showcase .cta {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.6rem 1.25rem;
   border: var(--hairline) solid var(--accent);
   color: var(--accent);
   font-family: var(--font-mono);
   font-size: 0.62rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   text-decoration: none;
   cursor: pointer;
   transition: background 0.2s, color 0.2s;

   &:hover {
     background: var(--accent);
     color: var(--bg);
   }

   svg {
     width: 0.6875rem;
     height: 0.6875rem;
   }
  }

 .projects-showcase .cta-back {
   display: inline-flex;
   align-items: center;
   gap: 0.6rem;
   padding: 0.6rem 1.25rem;
   border: var(--hairline) solid
     color-mix(in srgb, var(--muted) 45%, transparent);
   color: var(--muted);
   font-family: var(--font-mono);
   font-size: 0.62rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   text-decoration: none;
   transition: background 0.2s, color 0.2s, border-color 0.2s;

   &:hover {
     background: color-mix(in srgb, var(--muted) 12%, transparent);
     border-color: var(--muted);
     color: var(--fg);
   }

   svg {
     width: 0.6875rem;
     height: 0.6875rem;
   }
  }
}

@layer reveal {
 .projects-showcase
   :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back) {
   opacity: 0;
   translate: 0 var(--reveal-offset);
  }

 .projects-showcase :is(h1, h2) {
   translate: 0 1.125rem;
   transition: opacity var(--reveal-duration) ease 0.08s,
     translate var(--reveal-duration) ease 0.08s;
  }

 .projects-showcase .tag {
   transition: opacity var(--reveal-duration) ease,
     translate var(--reveal-duration) ease;
  }

 .projects-showcase .body-text {
   transition: opacity var(--reveal-duration) ease 0.2s,
     translate var(--reveal-duration) ease 0.2s;
  }

 .projects-showcase .stat-row {
   transition: opacity var(--reveal-duration) ease 0.3s,
     translate var(--reveal-duration) ease 0.3s;
  }

 .projects-showcase :is(.cta, .cta-back) {
   transition: opacity var(--reveal-duration) ease 0.35s,
     translate var(--reveal-duration) ease 0.35s, background 0.2s, color 0.2s,
     border-color 0.2s;
  }

 .projects-showcase .h-line {
   opacity: 0;
   scale: 0 1;
   transition: opacity 0.4s ease, scale 0.4s ease;
  }

 .projects-showcase
   :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back).visible {
   opacity: 1;
   translate: 0 0;
  }

 .projects-showcase .h-line.visible {
   opacity: 1;
   scale: 1 1;
  }
}

@layer theme {
  .projects-showcase[data-theme="light"] {
   color-scheme: light;
   --bg: var(--light-bg);
   --fg: var(--light-fg);
   --muted: var(--light-muted);
   --accent: var(--accent-light);
   --card-bg: rgba(240, 236, 227, 0.08);
   --card-border: rgba(58, 110, 0, 0.14);

   .projects-showcase .face {
     background: repeating-linear-gradient(
         0deg,
         rgba(0, 0, 0, 0.05) 0,
         rgba(0, 0, 0, 0.05) 1px,
         transparent 1px,
         transparent 48px
       ),
       repeating-linear-gradient(
         90deg,
         rgba(0, 0, 0, 0.05) 0,
         rgba(0, 0, 0, 0.05) 1px,
         transparent 1px,
         transparent 48px
       ),
       #ddd8cf;
   }

   .projects-showcase .face-ph {
     color: rgba(0, 0, 0, 0.07);
   }

   .projects-showcase #theme_toggle {
     svg {
       color: var(--fg);
     }
     .icon-sun {
       opacity: 0;
       rotate: -90deg;
     }
     .icon-moon {
       opacity: 1;
       rotate: 0deg;
     }
   }

   .projects-showcase #face_caption_name {
     opacity: 0.35;
   }
  }
}

@layer responsive {
 @media (width >= 900px) {
   .projects-showcase {
    margin-right: -5rem;
    width: calc(100% + 6.5rem);
   }
  }

 @media (width <= 56.25em) {
   .projects-showcase {
    display: none !important;
   }
  }
}