@import url("https://fonts.googleapis.com/css2?family=Gloock&family=Saira:wght@200;300;400&display=swap");

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

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}

@layer tokens {
  :root {
    color-scheme: dark;

    --bg: #0C0D0F;
    --fg: #F2F4FF;
    --muted: #7A8490;
    --accent: #9274ED;

    --font-display: "Gloock", serif;
    --font-mono: "Saira", sans-serif;
    --hairline: 0.0625rem;
    --ui-inset: 2rem;
    --card-bg: rgba(12, 13, 15, 0.82);
    --card-border: color-mix(in srgb, var(--accent) 20%, transparent);
    --nav-x: calc(var(--ui-inset) + 0.125rem);
    --reveal-offset: 0.625rem;
    --reveal-duration: 0.5s;
    --z-ui: 10;
  }
}

@layer base {
  html {
    color-scheme: dark;
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    overflow-x: hidden;
  }
}

@layer layout {
  #scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
    pointer-events: none;
  }

  #scroll_container {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 6rem calc(5rem + var(--ui-inset)) 6rem 5rem;
    pointer-events: none;
  }
}

@layer cube {
  #cube {
    --s: min(74vw, 74vh, 560px);
    width: var(--s);
    height: var(--s);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(90deg) rotateY(0deg);
    will-change: transform;
    pointer-events: auto;
  }

  .face-link {
    position: absolute;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    backface-visibility: hidden;
    cursor: pointer;
  }

  .face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    background: #090A0C;

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

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

  .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;
  }

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

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

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

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

    .scene-label {
      font-size: 0.625rem;
      color: var(--accent);
      margin-block-start: 0.5rem;
      max-width: 7.5rem;
      margin-inline-start: auto;
    }
  }

  #scene_strip {
    position: fixed;
    left: var(--nav-x);
    top: 50%;
    translate: -50% -50%;
    z-index: var(--z-ui);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .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.25rem;
    }

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

}

@layer cards {
  .text-card {
    pointer-events: auto;
    max-width: 23.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;

    &.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;
      }
    }
  }

  .tag {
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: 1.125rem;
  }

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

  h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  }
  h2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
  }

  .body-text {
    font-size: 0.875rem;
    font-weight: 200;
    letter-spacing: 0.03em;
    line-height: 1.8;
    color: color-mix(in srgb, var(--fg) 55%, transparent);
    margin-block-start: 1.25rem;
  }

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

  .stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

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

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

  .h-line {
    width: 3.125rem;
    height: var(--hairline);
    background: var(--accent);
    margin-block-end: 1.25rem;
    transform-origin: left;
  }

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

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

  .cta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    border: var(--hairline) solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 400;
    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;
    }
  }

  .cta-back {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 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.625rem;
    font-weight: 400;
    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 {
  :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back) {
    opacity: 0;
    translate: 0 var(--reveal-offset);
  }

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

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

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

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

  :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;
  }

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

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

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

@layer responsive {
  @media (width <= 56.25em) {
    #hud {
      top: 1rem;
      right: 1rem;
    }

    #scene_strip {
      display: none;
    }

    #face_caption {
      bottom: 1rem;
    }

    section {
      min-height: 150vh;
      align-items: flex-end;
      padding: 0 1.5rem 3.5rem;
    }

    #s0 {
      min-height: 100vh;
      align-items: flex-end;
      padding: 0 1.5rem 3.5rem;
    }

    :is(.text-card, .text-card.right, .text-card.center) {
      width: fit-content;
      max-width: 100%;
      padding: 1.5rem 1.25rem;
    }

    .text-card .body-text {
      max-width: 19rem;
    }

    .body-text {
      line-height: 1.55;
    }

    .stat-row {
      gap: 1.5rem;
      margin-block-start: 1.25rem;
    }

    .cta-row {
      margin-block-start: 1.25rem;
    }

    /* Cube: center at 40vh, smaller so it doesn't clip off top */
    #scene {
      align-items: flex-start;
      padding-top: max(0px, calc(30vh - min(27.5vw, 25vh, 160px)));
      perspective-origin: 50% 30%;
    }


    #cube {
      --s: min(55vw, 50vh, 320px);
    }

    #s5 {
      min-height: 200vh;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
      padding-bottom: 4rem;
      gap: 1.5rem;
    }

    .mobile-social {
      display: flex;
      gap: 1rem;
      pointer-events: auto;
    }

    .mobile-social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border: var(--hairline) solid rgba(255, 255, 255, 0.3);
      color: var(--fg);
      background: var(--bg);
      text-decoration: none;
    }

    .mobile-social-btn svg {
      width: 1.125rem;
      height: 1.125rem;
    }
  }

  /* Right-aligned cards: widen enough for h2 to fit (overridden on mobile) */
  .text-card.right {
    max-width: 26rem;
  }

  /* Jarvics has a shorter h2 — narrower card gives more balanced body text */
  @media (width > 56.25em) {
    #s3 .text-card {
      max-width: 23rem;
    }
  }

  /* Hide mobile-only labels on desktop */
  .txt-m { display: none; }

  /* ─── MOBILE HORIZONTAL CAROUSEL ─────────────────────────── */
  @media (width <= 56.25em) {

    html:has(body.home),
    body.home { overflow: hidden; }

    /* Horizontal scroll strip pinned to bottom */
    #scroll_container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 5;
      display: flex;
      flex-direction: row;
      overflow-x: scroll;
      overflow-y: visible;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: calc((100% - 19rem) / 2);
      padding-inline: calc((100% - 19rem) / 2);
      scrollbar-width: none;
      overscroll-behavior-x: contain;
      pointer-events: auto;
      gap: 3rem;
    }

    #scroll_container::-webkit-scrollbar { display: none; }

    /* Each section = one fixed-width card slot */
    section,
    #s0,
    #s5 {
      flex: 0 0 19rem;
      width: 19rem;
      min-height: unset;
      height: 24.875rem;
      scroll-snap-align: start;
      padding: 0 0 1.5rem;
      align-items: stretch;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0;
    }

    /* Cards: left-aligned, fill card height, column flex so cta-row pins to bottom */
    :is(.text-card, .text-card.right, .text-card.center) {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: none;
      margin-inline-start: 0;
      border-left: var(--hairline) solid var(--card-border);
      border-right: none;
      text-align: left;
      padding: 1.25rem 1.25rem 1.5rem;
    }

    .text-card .cta-row       { margin-top: auto; }
    .text-card.right .cta-row { justify-content: flex-start; }
    .text-card.right .h-line  { margin-inline-start: 0; }

    /* Buttons fill card width */
    .btn-stack { width: 100%; }
    .btn-nav   { width: 100%; }

    /* Force all reveal animations visible */
    :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back, .h-line) {
      opacity: 1;
      translate: 0 0;
      scale: 1 1;
    }

    /* Hide LinkedIn/Gmail social buttons */
    .mobile-social { display: none; }

    /* S5: hide Restart, single Back fills full width */
    #s5 .restart-btn { display: none; }

    /* Swap Turn / Next labels */
    .txt-d { display: none; }
    .txt-m { display: inline; }
  }
}

/* Button stack — View Project on top, nav buttons below at equal width */
.btn-stack {
  display: inline-flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-stack > .cta {
  width: 100%;
  justify-content: center;
}

.btn-stack > .cta-back {
  width: 100%;
  justify-content: center;
}

.btn-nav {
  display: flex;
  gap: 0.5rem;
}

.btn-nav > .cta-back {
  flex: 1;
  justify-content: center;
}

/* Mobile-only social row — hidden on desktop via media so layered mobile rule wins */
@media (width > 56.25em) {
  .mobile-social { display: none; }
}

/* ─── Social Footer Icons ──────────────────────────────────── */

.social-footer {
  position: fixed;
  bottom: var(--ui-inset);
  right: var(--ui-inset);
  z-index: var(--z-ui);
  display: flex;
  gap: 1rem;
}

/* Hide fixed social footer on mobile — placed after .social-footer to win cascade */
@media (width <= 56.25em) {
  .social-footer { display: none; }
}



.social-clips {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: -100;
  pointer-events: none;
}

.social-link {
  transform-style: preserve-3d;
  perspective: 400px;
  position: relative;
  width: 40px;
  height: 40px;
}

.social-link a {
  transform-style: preserve-3d;
  transform-origin: 20px 20px -20px;
  display: block;
  position: absolute;
  z-index: 1;
  transform: translateZ(10px);
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.social-link a:nth-child(1) { top: 0; left: 0; height: 50%; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.social-link a:nth-child(2) { top: 0; right: 0; width: 50%; clip-path: polygon(100% 100%, 0 50%, 100% 0); }
.social-link a:nth-child(3) { bottom: 0; right: 0; height: 50%; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.social-link a:nth-child(4) { bottom: 0; left: 0; width: 50%; clip-path: polygon(0 100%, 0 0, 100% 50%); }

.social-link a:nth-child(1):hover ~ .social-cube,
.social-link a:nth-child(1):focus ~ .social-cube { transform: rotateX(-0.5turn); }

.social-link a:nth-child(2):hover ~ .social-cube,
.social-link a:nth-child(2):focus ~ .social-cube { transform: rotateY(-0.5turn); }

.social-link a:nth-child(3):hover ~ .social-cube,
.social-link a:nth-child(3):focus ~ .social-cube { transform: rotateX(0.5turn); }

.social-link a:nth-child(4):hover ~ .social-cube,
.social-link a:nth-child(4):focus ~ .social-cube { transform: rotateY(0.5turn); }

/* Correct back-face orientation when rotating on X axis */
.social-link a:nth-child(1):hover ~ .social-cube > div:nth-child(6),
.social-link a:nth-child(1):focus ~ .social-cube > div:nth-child(6),
.social-link a:nth-child(3):hover ~ .social-cube > div:nth-child(6),
.social-link a:nth-child(3):focus ~ .social-cube > div:nth-child(6) {
  transform: rotateY(180deg) rotateZ(180deg) translateZ(40px);
}

.social-link a:nth-child(1):hover,
.social-link a:nth-child(1):focus,
.social-link a:nth-child(2):hover,
.social-link a:nth-child(2):focus,
.social-link a:nth-child(3):hover,
.social-link a:nth-child(3):focus,
.social-link a:nth-child(4):hover,
.social-link a:nth-child(4):focus {
  z-index: 2;
  transform: translateZ(15px);
  width: 100% !important;
  height: 100% !important;
  clip-path: none !important;
  transition: all 100ms ease 500ms;
}

.social-cube {
  transform-origin: 20px 20px -20px;
  transform-style: preserve-3d;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  transition: transform 300ms ease-out;
}

.social-cube > div {
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  border: var(--hairline) solid var(--bg);
}

.social-cube > div svg {
  width: 18px;
  height: 18px;
}

.social-cube > div:nth-child(1) { transform-origin: center top;    transform: rotateX(90deg)  translateY(-40px); }
.social-cube > div:nth-child(2) { transform-origin: center bottom; transform: rotateX(-90deg) translateY(40px);  }
.social-cube > div:nth-child(3) { transform-origin: left center;   transform: rotateY(-90deg) translateX(-40px); }
.social-cube > div:nth-child(4) { transform-origin: right center;  transform: rotateY(90deg)  translateX(40px);  }
.social-cube > div:nth-child(5) { border: var(--hairline) solid rgba(255, 255, 255, 0.3); }
.social-cube > div:nth-child(6) { transform: rotateY(180deg) translateZ(40px); }

/* LinkedIn */
.sc-linkedin > div:nth-child(1),
.sc-linkedin > div:nth-child(2),
.sc-linkedin > div:nth-child(3),
.sc-linkedin > div:nth-child(4) { background: var(--bg); border: var(--hairline) solid rgba(255, 255, 255, 0.3); }
.sc-linkedin > div:nth-child(5) { background: var(--bg); }
.sc-linkedin > div:nth-child(6) { background: #0A66C2; }

/* Gmail */
.sc-gmail > div:nth-child(1),
.sc-gmail > div:nth-child(2),
.sc-gmail > div:nth-child(3),
.sc-gmail > div:nth-child(4) { background: var(--bg); border: var(--hairline) solid rgba(255, 255, 255, 0.3); }
.sc-gmail > div:nth-child(5) { background: var(--bg); }
.sc-gmail > div:nth-child(6) { background: #EA4335; }

/* ─── Background Grid ──────────────────────────────────── */
#bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 49px 49px;
}

#bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 280px at var(--flash-x, -9999px) var(--flash-y, -9999px),
    rgba(255,255,255,0.08) 0%,
    transparent 70%
  );
  mask-image:
    linear-gradient(black 1px, transparent 1px),
    linear-gradient(90deg, black 1px, transparent 1px);
  mask-size: 49px 49px;
  mask-composite: add;
  -webkit-mask-image:
    linear-gradient(black 1px, transparent 1px),
    linear-gradient(90deg, black 1px, transparent 1px);
  -webkit-mask-size: 49px 49px;
  -webkit-mask-composite: source-over;
}

@media (hover: none) {
  #bg-grid::before {
    display: none;
  }
}

/* Per-face accent colors — scoped to each section so cards never bleed */
#s0 { --accent: #9274ED; }
#s1 { --accent: #FF66C4; }
#s2 { --accent: #5DB4F5; }
#s3 { --accent: #67BBEF; }
#s4 { --accent: #FBC363; }
#s5 { --accent: #44B4DD; }