/* ==========================================================================
   Chapter 15 & 16 — Apple G3 Continuous Curvature Corners, Zero-Clone Sheet
   Elevation, Editorial Typography & Specular Cursor Spotlight
   ========================================================================== */

:root {
  --g3-superellipse: superellipse(1.38);
  --g3-open-dur: 340ms;
  --g3-close-dur: 230ms;
  --g3-spring-out: cubic-bezier(0.22, 1, 0.36, 1);
  --g3-spring-close: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1. Eliminate viewport scrollbar gutter & overflow toggle jitter on modal open/close */
html {
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Editorial tabular numerals across all metrics, counters, and badges */
.mini-metric b,
.fff-card__stat b,
.fff-card__num,
.p-slide__index,
.p-slide__frame-badge,
.work-card__num,
.eyebrow,
.card-kicker,
.intro-journey-progress__value {
  font-variant-numeric: tabular-nums;
}

/* Keep capability cards stable on hover/focus-within so closing a modal never causes a vertical jump */
.capability-portal,
.capability-portal:hover,
.capability-portal:focus-within {
  transform: translate3d(0, var(--portal-float-y, 0px), 0) !important;
}

/* Clean Swiss Grid alignment for Horizontal Strip (eliminates jagged even-row brick offset) */
.horizontal-workspace .work-card,
.horizontal-workspace .work-card:nth-child(even),
.horizontal-workspace .work-card:hover,
.horizontal-workspace .work-card:focus-within {
  transform: translate3d(0, 0, 0) !important;
}

.horizontal-workspace .works-grid {
  padding: 8px 16px 24px 4px !important;
  scroll-behavior: auto;
}

.work-card__media img {
  transition: transform 520ms var(--g3-spring-out) !important;
}

.work-card:hover .work-card__media img {
  transform: scale(1.04);
}

.work-card__role-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(133, 96, 123, 0.09);
  color: #654b60;
  font-size: 9px;
  font-weight: 500;
}

/* Specular Cursor Spotlight on interactive cards */
.capability-portal::after,
.work-card::after,
.tool-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    380px circle at var(--spot-x, 50%) var(--spot-y, -200px),
    rgba(255, 255, 255, 0.55),
    rgba(133, 96, 123, 0.05) 45%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 320ms var(--g3-spring-out);
  z-index: 1;
}

.capability-portal:hover::after,
.work-card:hover::after,
.tool-box:hover::after {
  opacity: 1;
}

/* Eliminate scroll-fighting linear transitions on parallax showcase elements */
.p-slide {
  transition:
    opacity 520ms var(--g3-spring-out),
    visibility 0s linear 520ms !important;
}

.p-slide.is-active {
  transition:
    opacity 520ms var(--g3-spring-out),
    visibility 0s linear 0s !important;
}

.p-slide__camera-frame,
.p-slide__info,
.p-slide__ambient {
  transition: none !important;
}

/* 2. Native CSS superellipse corner-shape + Apple HIG continuous curvature proportions */
.liquid-glass-card,
.morph__copy-item,
.capability-portal,
.portal-network,
.tool-box,
.tool-tag,
.fff-card,
.fff-card__badge,
.fff-pill,
.history-mode-switch,
.history-mode-switch button,
.portfolio-mode-switch,
.portfolio-mode-switch button,
.p-slide__camera-frame,
.p-slide__cover-open,
.p-slide__frame-badge,
.cover-open-label,
.p-slide__info,
.p-slide__tag,
.parallax-rail,
.parallax-nav-btns button,
.catalog-controls,
.filter-btn,
.catalog-search,
.work-card,
.work-card__media,
.work-card__num,
.work-card__video-tag,
.detail-dialog,
.modal-dialog,
.modal-media-box,
.detail-switcher button,
.graph-shell,
.graph-tools button,
.graph-tools output,
.graph-node,
.graph-minimap,
.graph-hint,
.graph-neighbors button,
.graph-list__items article,
.capability-proof article,
.career-nav button,
.career-stats > div,
.career-recognition,
.career-case,
.case-steps span,
.career-outcomes article,
.intro-express,
.intro-journey-progress,
.intro-preview__images button,
.morph__hud-pill,
.nav__pill-btn,
.btn,
.switch-indicator {
  corner-shape: var(--g3-superellipse);
  -webkit-corner-shape: var(--g3-superellipse);
}

.intro-direction {
  cursor: pointer;
}

/* Smooth switch indicator pill glide */
.has-switch-indicator .switch-indicator {
  transition:
    transform 360ms var(--g3-spring-out),
    width 360ms var(--g3-spring-out),
    height 260ms var(--g3-spring-out) !important;
}

/* 3. Non-destructive Apple G3 Continuous-Curvature SVG Specular Ring Overlay */
.g3-corner-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none !important;
  z-index: 4;
  overflow: visible;
  display: block;
}

.g3-corner-ring__outer {
  fill: none;
  stroke: var(--g3-stroke-color, rgba(20, 18, 28, 0.1));
  stroke-width: var(--g3-stroke-width, 1.15px);
  vector-effect: non-scaling-stroke;
  transition: stroke 240ms var(--g3-spring-out), stroke-width 240ms var(--g3-spring-out);
}

.g3-corner-ring__inner {
  fill: none;
  stroke: var(--g3-highlight-color, rgba(255, 255, 255, 0.72));
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.capability-portal:hover > .g3-corner-ring .g3-corner-ring__outer,
.capability-portal:focus-within > .g3-corner-ring .g3-corner-ring__outer {
  stroke: var(--portal-color, #85607b);
  stroke-width: 2px;
}

.fff-card.is-center > .g3-corner-ring .g3-corner-ring__outer {
  stroke: var(--chapter-ink, rgba(123, 63, 70, 0.34));
  stroke-width: 1.4px;
}

.work-card:hover > .g3-corner-ring .g3-corner-ring__outer {
  stroke: rgba(91, 26, 26, 0.26);
  stroke-width: 1.35px;
}

.p-slide__camera-frame > .g3-corner-ring .g3-corner-ring__outer,
.p-slide__info > .g3-corner-ring .g3-corner-ring__outer {
  --g3-stroke-color: rgba(255, 255, 255, 0.22);
  --g3-highlight-color: rgba(255, 255, 255, 0.14);
}

/* 4. Permanent GPU-Composited Backdrop Veil (#g3-backdrop-veil) */
.detail-dialog::backdrop,
.modal-dialog::backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

.g3-backdrop-veil {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  pointer-events: none !important;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(16, 13, 22, 0.42) 0%, rgba(20, 17, 26, 0.28) 72%),
    rgba(22, 18, 28, 0.14);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  transition: opacity var(--g3-open-dur) var(--g3-spring-out);
}

.g3-backdrop-veil.is-active {
  opacity: 1;
}

.g3-backdrop-veil.is-closing {
  transition: opacity var(--g3-close-dur) var(--g3-spring-close);
  opacity: 0;
}

/* 5. Clean GPU Sheet Elevation (<dialog>) — immediately click-transparent on close */
.detail-dialog,
.modal-dialog {
  will-change: transform, opacity;
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0) scale(1);
  box-shadow:
    0 28px 80px rgba(16, 12, 24, 0.22),
    inset 0 0 0 1px rgba(20, 18, 28, 0.08) !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

dialog[data-focus-closing] {
  pointer-events: none !important;
}

body.is-locked .portal-float,
body.is-locked .portal-wire {
  animation-play-state: paused !important;
}

/* 6. Interviewer Executive Impact Banner & Contact Fast-Track Styling */
.modal-impact-banner {
  padding: 12px 15px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 238, 244, 0.85), rgba(238, 243, 247, 0.65));
  border: 1px solid rgba(133, 96, 123, 0.18);
  margin-bottom: 10px;
}

.modal-impact-banner small {
  display: block;
  font-family: var(--type-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #7d5b74;
  margin-bottom: 4px;
}

.modal-impact-banner strong {
  display: block;
  font-size: 13px;
  color: #231e28;
  line-height: 1.55;
}

.contact-fast-tracks {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 18, 28, 0.08);
}

.contact-fast-tracks > small {
  display: block;
  font-family: var(--type-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #85798b;
  margin-bottom: 8px;
}

.contact-fast-tracks__list {
  display: grid;
  gap: 7px;
}

.contact-fast-track-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 13px;
  border-radius: 14px;
  background: #f8f6f9;
  border: 1px solid rgba(20, 18, 28, 0.07);
  color: #26212c;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 200ms var(--g3-spring-out), border-color 200ms var(--g3-spring-out), transform 200ms var(--g3-spring-out);
}

.contact-fast-track-btn:hover {
  background: #f2ecf1;
  border-color: rgba(133, 96, 123, 0.32);
  transform: translateX(2px);
}