/**
 * UI Layer Styles
 * Unified overlay system for navigation and contextual controls
 * Uses design tokens from tokens.css
 */

/* ========== Z-INDEX EXTENSION ========== */
:root {
  --z-ui-layer: 800;
}

/* ========== UI LAYER CONTAINER ========== */
.ui-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-ui-layer);
  pointer-events: none;

  /* Grid layout for corner positioning */
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "top-left    .       top-right"
    ".           .       ."
    "bottom-left .       bottom-right";

  /* Padding matches existing layout */
  padding: var(--unit);
}

/* ========== CORNER POSITIONS ========== */
.ui-layer__top-left {
  grid-area: top-left;
  align-self: start;
  justify-self: start;
  pointer-events: auto;
}

.ui-layer__top-right {
  grid-area: top-right;
  align-self: start;
  justify-self: end;
  pointer-events: auto;
}

.ui-layer__bottom-left {
  grid-area: bottom-left;
  align-self: end;
  justify-self: start;
  pointer-events: auto;
}

.ui-layer__bottom-right {
  grid-area: bottom-right;
  align-self: end;
  justify-self: end;
  pointer-events: auto;
}

/* ========== GLASS COMPONENT (SHARED BASE) ========== */
/* Centralized frosted glass styling for UI elements */
.ui-glass {
  /* Frosted glass effect - uses tokens from tokens.css */
  background-color: var(--glass-bg-light);
  backdrop-filter: var(--glass-blur) var(--glass-saturate);
  -webkit-backdrop-filter: var(--glass-blur) var(--glass-saturate);
  border: 1px solid var(--glass-border-light);

  /* Theme transitions */
  transition:
    background-color var(--duration-theme) ease-out,
    border-color var(--duration-theme) ease-out,
    color var(--duration-theme) ease-out;
}

/* Glass dark theme */
[data-theme="dark"] .ui-glass {
  background-color: var(--glass-bg-dark);
  border-color: var(--glass-border-dark);
}

/* Glass selected/active state - light theme */
.ui-glass--selected {
  background-color: var(--selected-light);
  border-color: var(--glass-border-light);
  color: var(--color-base-white);
}

/* Glass selected/active state - dark theme */
[data-theme="dark"] .ui-glass--selected {
  background-color: var(--selected-dark);
  border-color: var(--glass-border-dark);
  color: var(--color-base-black);
}

/* ========== PROJECT LABEL (TOP-LEFT) ========== */
/* Morphing pill with typewriter text animation */
.ui-layer__project-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--size-standard);
  min-width: calc(var(--size-standard) * 2);
  padding: 0 var(--spacing-md);
  border-radius: 100px;

  /* Override .ui-glass border with inset box-shadow */
  border: none;
  box-shadow: inset 0 0 0 1px var(--glass-border-light);

  /* Typography - centered */
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-base-black);
  white-space: nowrap;

  /* Hidden by default - entrance animation */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--duration-fast) var(--easing-default),
    visibility var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default),
    background-color var(--duration-theme) ease-out,
    box-shadow var(--duration-theme) ease-out,
    color var(--duration-theme) ease-out;
}

/* Visible state */
.ui-layer__project-label.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dark theme */
[data-theme="dark"] .ui-layer__project-label {
  color: var(--color-base-white);
  box-shadow: inset 0 0 0 1px var(--glass-border-dark);
}

/* ========== CLOSE BUTTON (TOP-RIGHT) ========== */
.ui-layer__close {
  /* Hidden by default, shown in project state */
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition:
    opacity var(--duration-fast) var(--easing-default),
    visibility var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default);
}

.ui-layer__close.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ========== NAV HELPER (BOTTOM-LEFT) ========== */
.ui-layer__nav-helper {
  opacity: 0.5;
  transition:
    opacity var(--duration-fast) var(--easing-default),
    visibility var(--duration-fast) var(--easing-default);
}

/* Hide nav helper with animation when carousel item approaches */
.ui-layer__nav-helper.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Nav helper table layout */
.ui-layer__nav-helper table {
  border-collapse: collapse;
}

.ui-layer__nav-helper td {
  padding: 0;
  vertical-align: baseline;
}

.ui-layer__nav-helper .nav-helper-spacer {
  width: var(--spacing-md);
}

.ui-layer__nav-helper .nav-helper-action {
  text-align: left;
  min-width: 80px;
}

.ui-layer__nav-helper .nav-helper-label {
  text-align: left;
  opacity: 0.6;
}

/* Line animation for nav helper */
.ui-layer__nav-helper .nav-helper-line {
  display: inline-block;
  opacity: 0;
  animation: navHelperLineIn 0.4s var(--easing-default) forwards;
  animation-delay: calc(var(--line-index, 0) * 80ms + 200ms);
}

@keyframes navHelperLineIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========== CONTEXT MENU (BOTTOM-RIGHT) ========== */
.ui-layer__menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: flex-end;

  /* Smooth transition for transitioning state */
  transition: opacity var(--duration-fast) var(--easing-default);
}

/* ========== PILL CONTAINER ========== */
/*
 * Pill is the source of truth for sizing.
 * Width matches standard button size (e.g., close button).
 * Inner area and indicator derive from pill dimensions.
 */
.ui-layer__pill {
  /* Sizing - derived from standard button token */
  --pill-padding: var(--spacing-xs);
  --pill-width: var(--size-standard);
  --pill-inner: calc(var(--pill-width) - 2 * var(--pill-padding));

  /* Animation timing */
  --pill-btn-duration: var(--duration-instant);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: var(--pill-width);
  min-height: var(--pill-width);
  padding: var(--pill-padding);
  border-radius: calc(var(--pill-width) / 2);
  overflow: hidden;

  /* Override .ui-glass border with inset box-shadow to avoid adding to dimensions */
  border: none;
  box-shadow: inset 0 0 0 1px var(--glass-border-light);

  transition:
    background-color var(--duration-theme) ease-out,
    box-shadow var(--duration-theme) ease-out;
}

/* Pill dark theme box-shadow */
[data-theme="dark"] .ui-layer__pill {
  box-shadow: inset 0 0 0 1px var(--glass-border-dark);
}

/* Indicator - fills pill inner area, height matches inner width */
.ui-layer__pill-indicator {
  position: absolute;
  top: var(--pill-padding);
  left: var(--pill-padding);
  right: var(--pill-padding);
  aspect-ratio: 1;
  background-color: var(--indicator-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;

  transition:
    top 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.2s ease;
}

[data-theme="dark"] .ui-layer__pill-indicator {
  background-color: var(--indicator-dark);
}

/* Hide indicator when only 1 button visible */
.ui-layer__pill[data-button-count="1"] .ui-layer__pill-indicator {
  opacity: 0;
}

/* Buttons inside pill - size derived from pill inner */
.ui-layer__pill .ui-layer__menu-btn {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--pill-inner);
  height: 0;
  min-height: 0;  /* Override base button min-height */
  line-height: 1; /* Prevent icon line-height from adding extra space */
  background: transparent;
  border: none;
  overflow: hidden;

  /* Hidden state (default) */
  opacity: 0;
  pointer-events: none;

  /* Transition using pill's timing token */
  transition:
    opacity var(--pill-btn-duration) var(--easing-default),
    height var(--pill-btn-duration) var(--easing-default),
    color var(--duration-theme) ease-out;
}

/* Visible state - height controlled by data-visible */
.ui-layer__pill .ui-layer__menu-btn[data-visible="true"] {
  height: var(--pill-inner);
  min-height: var(--pill-inner);
  pointer-events: auto;
}

/* Opacity controlled separately - visible and not fading = full opacity */
.ui-layer__pill .ui-layer__menu-btn[data-visible="true"]:not([data-fading="true"]) {
  opacity: 1;
}

/* Fading state - opacity 0 but height preserved */
.ui-layer__pill .ui-layer__menu-btn[data-fading="true"] {
  opacity: 0;
}

.ui-layer__pill .ui-layer__menu-btn:hover {
  background: transparent;
}

/* Ensure icons in pill don't add extra space */
.ui-layer__pill .ui-layer__menu-btn i,
.ui-layer__pill .ui-layer__menu-btn svg {
  display: block;
  line-height: 1;
}

/* Selected button inside pill - keep icon black on white indicator */
.ui-layer__pill .ui-layer__menu-btn[aria-current="true"] {
  color: var(--color-base-black);
  background: transparent;
  border: none;
}

[data-theme="dark"] .ui-layer__pill .ui-layer__menu-btn[aria-current="true"] {
  color: var(--color-base-white);
  background: transparent;
}

/* Menu buttons - circle variant */
/* Uses .ui-glass for frosted glass effect */
.ui-layer__menu-btn {
  --btn-size: var(--size-standard); /* 64px - standard interactive element size */

  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--btn-size);
  height: var(--btn-size);
  min-width: var(--btn-size);
  min-height: var(--btn-size);
  padding: 0;
  border-radius: 50%;

  /* Icon */
  color: var(--color-base-black);
  font-size: 22px;
  line-height: 1;

  /* Interaction */
  cursor: pointer;
  transition:
    background-color var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-theme) ease-out,
    color var(--duration-theme) ease-out,
    transform var(--duration-quick) var(--easing-default),
    opacity var(--duration-fast) var(--easing-default);
}

/* Standalone glass buttons (close, etc.) - use inset shadow instead of border */
.ui-layer__menu-btn.ui-glass {
  border: none;
  box-shadow: inset 0 0 0 1px var(--glass-border-light);
}

[data-theme="dark"] .ui-layer__menu-btn.ui-glass {
  box-shadow: inset 0 0 0 1px var(--glass-border-dark);
}

/* Custom SVG icon sizing */
.ui-layer__menu-btn svg {
  width: 26px;
  height: 26px;
}

.ui-layer__menu-btn:hover {
  background-color: var(--glass-hover-light);
  transform: scale(1.05);
}

.ui-layer__menu-btn:active {
  transform: scale(0.95);
}

/* Current/active state - uses glass effect with transparency */
.ui-layer__menu-btn[aria-current="true"],
.ui-layer__menu-btn.active {
  background-color: var(--selected-light);
  color: var(--color-base-white);
}

/* Dark theme menu buttons */
[data-theme="dark"] .ui-layer__menu-btn {
  color: var(--color-base-white);
}

[data-theme="dark"] .ui-layer__menu-btn:hover {
  background-color: var(--glass-hover-dark);
}

[data-theme="dark"] .ui-layer__menu-btn[aria-current="true"],
[data-theme="dark"] .ui-layer__menu-btn.active {
  background-color: var(--selected-dark);
  color: var(--color-base-black);
}

/* Secondary button variant - minimal style with scale on hover */
.ui-layer__menu-btn--secondary {
  --btn-size: var(--size-secondary);
  width: var(--btn-size);
  height: var(--btn-size);
  min-width: var(--btn-size);
  min-height: var(--btn-size);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--color-base-black);
}

.ui-layer__menu-btn--secondary:hover {
  background: transparent;
  border-color: var(--border-color);
  transform: scale(1.15);
}

.ui-layer__menu-btn--secondary:active {
  transform: scale(1.05);
}

/* White icon on dark theme */
[data-theme="dark"] .ui-layer__menu-btn--secondary {
  color: var(--color-base-white);
}

/* Secondary button icon sizing */
.ui-layer__menu-btn--secondary i,
.ui-layer__menu-btn--secondary svg {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* ========== STATE-BASED VISIBILITY ========== */

/* Carousel state - show nav helper, menu, year label; hide close */
/* Note: project-label visibility in carousel is JS-controlled via .visible class */
.ui-layer[data-state="carousel"] .ui-layer__close {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* List state - hide nav helper, project label, close */
.ui-layer[data-state="list"] .ui-layer__project-label,
.ui-layer[data-state="list"] .ui-layer__close,
.ui-layer[data-state="list"] .ui-layer__nav-helper {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Project state - hide nav helper */
.ui-layer[data-state="project"] .ui-layer__nav-helper {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* About state - hide project label, close, and nav helper */
.ui-layer[data-state="about"] .ui-layer__project-label,
.ui-layer[data-state="about"] .ui-layer__close,
.ui-layer[data-state="about"] .ui-layer__nav-helper {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Transitioning state - fade out close button (menu/pill handles its own animation) */
.ui-layer[data-transitioning="true"] .ui-layer__close {
  opacity: 0.3;
  pointer-events: none;
}

/* Disable pointer events on menu during transitions */
.ui-layer[data-transitioning="true"] .ui-layer__menu {
  pointer-events: none;
}

/* ========== WORKS LIST VIEW ========== */
.works-list-view {
  position: fixed;
  inset: 0;
  z-index: var(--z-elevated);
  background-color: var(--surface-primary);
  overflow-y: auto;
  padding: calc(var(--unit) + var(--spacing-2xl)) var(--unit) var(--unit) var(--unit);

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity var(--duration-fast) var(--easing-default),
    visibility var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default),
    background-color var(--duration-theme) ease-out;
}

.works-list-view.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.works-list-view__container {
  width: 100%;
}

.works-list-view__title {
  margin: 0 0 var(--spacing-3xl) 0;
  padding: 0;
}

.works-list-view__list {
  padding-right: var(--unit-3x);
}

/* List items - grid layout with standard row height */
.works-list-view__item {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 1fr 0.5fr;
  gap: var(--spacing-md);
  align-items: center;
  min-height: var(--size-standard); /* 64px - standard interactive element height */
  padding: 0 var(--unit-half);
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  color: var(--text-primary);
  transition:
    background-color var(--duration-instant) var(--easing-default),
    color var(--duration-instant) var(--easing-default),
    border-color var(--duration-theme) ease-out,
    margin var(--duration-instant) var(--easing-default),
    padding var(--duration-instant) var(--easing-default);
}

.works-list-view__item:first-of-type {
  border-top: 1px solid var(--color-border-light);
}

.works-list-view__item:last-of-type {
  margin-bottom: var(--spacing-3xl);
}

.works-list-view__item:hover {
  background-color: var(--color-base-black);
  color: var(--color-base-white);
}

.works-list-view__item:hover .works-list-view__col {
  color: var(--color-base-white);
  opacity: 1;
}

[data-theme="dark"] .works-list-view__item:hover {
  background-color: var(--color-base-white);
  color: var(--color-base-black);
}

[data-theme="dark"] .works-list-view__item:hover .works-list-view__col {
  color: var(--color-base-black);
}

/* Column base styles */
.works-list-view__col {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    color var(--duration-instant) var(--easing-default),
    opacity var(--duration-instant) var(--easing-default);
}

/* Client column */
.works-list-view__col--client {
  font-weight: 500;
}

/* Secondary columns - dimmed */
.works-list-view__col--role,
.works-list-view__col--platform,
.works-list-view__col--year {
  opacity: 0.5;
}

/* Year column - right aligned */
.works-list-view__col--year {
  text-align: right;
}

/* Dark theme list */
[data-theme="dark"] .works-list-view {
  background-color: var(--surface-primary);
}

[data-theme="dark"] .works-list-view__item {
  border-color: var(--color-border-dark);
}

/* ========== ABOUT VIEW ========== */
.about-view {
  position: fixed;
  inset: 0;
  z-index: var(--z-elevated);
  background-color: var(--surface-primary);
  overflow-y: auto;

  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity var(--duration-fast) var(--easing-default),
    visibility var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default),
    background-color var(--duration-theme) ease-out;
}

.about-view.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* About page layout */
.about-view .about-page {
  padding: var(--unit) var(--unit) 0 var(--unit);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
}

.about-view .about-content {
  max-width: 1400px;
  padding-top: var(--unit-1x);
}

.about-view .about-text {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.about-view .about-text:last-of-type {
  margin-bottom: 0;
}

.about-view .about-image {
  margin-top: var(--spacing-3xl);
  display: flex;
  justify-content: flex-end;
}

.about-view .about-image img {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* About view footer */
.about-view .main-footer {
  flex-shrink: 0;
}

/* Responsive adjustments for about view */
@media (max-width: 1080px) {
  .about-view .about-page {
    padding: var(--unit) var(--unit) 0 var(--unit);
  }

  .about-view .about-text {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    margin-bottom: var(--spacing-md);
  }

  .about-view .about-image img {
    max-width: 200px;
  }
}

/* ========== RESPONSIVE ADJUSTMENTS ========== */
@media (max-width: 1080px) {
  .ui-layer {
    padding: var(--unit) var(--unit) var(--unit) var(--unit);
  }

  /* Hide nav helper on mobile */
  .ui-layer__nav-helper {
    display: none;
  }

  /* Menu buttons slightly smaller on mobile */
  .ui-layer__menu-btn {
    --btn-size: var(--size-compact);
    font-size: 20px;
  }

  /* Pill uses compact size on mobile */
  .ui-layer__pill {
    --pill-width: var(--size-compact);
  }

  .ui-layer__menu-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Project label slightly smaller on mobile */
  .ui-layer__project-label {
    height: var(--size-compact); /* 56px - compact variant for mobile */
    font-size: 10px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* List view mobile */
  .works-list-view {
    padding: calc(var(--unit) + var(--spacing-xl)) var(--unit) var(--unit) var(--unit);
  }

  /* Simplified grid on mobile - hide role and platform */
  .works-list-view__item {
    grid-template-columns: 1fr 1.5fr 0.5fr;
  }

  .works-list-view__col--role,
  .works-list-view__col--platform {
    display: none;
  }

  .works-list-view__col {
    font-size: var(--font-size-sm);
  }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  .ui-layer__project-label,
  .ui-layer__close,
  .ui-layer__menu-btn,
  .ui-layer__nav-helper,
  .ui-layer__pill,
  .ui-layer__pill-indicator,
  .ui-layer__pill .ui-layer__menu-btn,
  .works-list-view {
    transition: none !important;
  }

  .ui-layer__nav-helper .nav-helper-line {
    animation: none;
    opacity: 1;
  }
}

/* ===== Coming Soon Overlay (on hero image) ===== */

.device-item * {
  transition: opacity 0.3s ease-out;
}

.device-item::after {
  content: 'CASE STUDY\a COMING SOON';
  white-space: pre-wrap;
  text-align: center;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.device-item.coming-soon-active * {
  opacity: 0.6 !important;
}

.device-item.coming-soon-active::after {
  opacity: 1;
}